2023-4-25

manifest.json

@@ -184,8 +184,8 @@
                         "/api" : "" // rewrite path
                     }
                 }
-            },
-            "https" : true
+            }
+            // "https" : true
         },
         "sdkConfigs" : {
             "maps" : {

pages.json

@@ -7,7 +7,10 @@
 				"app-plus": {
 					"titleNView": false
 				},
-				
+				// #endif
+				// #ifdef MP
+				"navigationBarBackgroundColor": "#ff629f",
+				"navigationBarTextStyle":"white",
 				// #endif
 				"navigationBarTitleText": "母婴界严选"
 			}
@@ -168,6 +171,12 @@
 					"navigationBarTitleText": "当前模板"
 				}
 			},
+			{
+				"path": "model/modelList",
+				"style": {
+					"navigationBarTitleText": "模板列表"
+				}
+			},
 			{
 				"path": "model/shoprz",
 				"style": {
@@ -312,9 +321,9 @@
 		]
 	}],
 	"globalStyle": {
-		"navigationBarTextStyle": "#FFFFFF",
+		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#ff629f",
+		"navigationBarBackgroundColor": "#FFFFFF",
 		"backgroundColor": "#f8f8f8"
 	},
 	"tabBar": {

pages/index/index.vue

@@ -1,12 +1,84 @@
 <template>
 	<view class="indexBox">
 		<swiper class="top-swiper" autoplay="true" duration="400" interval="5000" @change="swiperChange">
-			<swiper-item v-for="item in imagelist" class="carousel-item" @click="navTo(item)">
-				<image :src="item" />
+			<swiper-item v-for="item in imagelist" class="carousel-item" @click="navTo(item.url)">
+				<image class="imageitem" :src="item.img" />
 			</swiper-item>
 		</swiper>
+		<view class="hot-list-box">
+			<view class="title-box flex">
+				<view class="flex">
+					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
+					<view class="title">
+						热门装扮
+					</view>
+				</view>
+				<navigator url="/pages/user/model/modelList?ishot=1">
+					<view class="right flex">
+						<text class="margin-r-10">
+							更多
+						</text>
+						<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
+					</view>
+				</navigator>
+			</view>
+			<view class="hot-list">
+				<view class="item" v-for="item in rmList">
+					<view class="hot-image-box">
+						<image class="hot-image" :src="item.img" mode="widthFix"></image>
+					</view>
+					<view class="hot-title clamp">
+						{{item.title}}
+					</view>
+					<view class="hot-money flex flex-start">
+						<view class="money">
+							￥{{item.price}}
+						</view>
+						<view class="oldmoney">
+							{{item.old_price}}
+						</view>
+					</view>
+				</view>
+				<view class="item-none" v-if="rmList.length<3" v-for="item in (3-rmList.length)">
 
+				</view>
+			</view>
+			<view class="title-box flex">
+				<view class="flex">
+					<image class="hot margin-r-10" src="../../static/icon/hot.png" mode="scaleToFill"></image>
+					<view class="title">
+						精选推荐
+					</view>
+				</view>
+				<navigator url="/pages/user/model/modelList?isrecommend=1">
+					<view class="right flex">
+						<text class="margin-r-10">
+							更多
+						</text>
+						<image src="../../static/icon/next1.png" mode="scaleToFill" class="tip"></image>
+					</view>
+				</navigator>
+			</view>
 
+			<view class="list-box">
+				<view class="list" v-for="(item,index) in navList.orderList">
+					<view class="list-image-box">
+						<image class="list-image" :src="item.img" mode="widthFix"></image>
+					</view>
+					<view class="list-content">
+						
+					<view class="list-title clamp">
+						{{item.title}}
+					</view>
+					<view class="list-money flex flex-start">
+						<view class="money">
+							￥{{item.price}}
+						</view>
+					</view>
+					</view>
+				</view>
+			</view>
+		</view>
 		<uni-load-more :status="navList.loadingType"></uni-load-more>
 	</view>
 </template>
@@ -23,11 +95,6 @@
 		getBannerList,
 		getShowTemplateList
 	} from '@/api/model.js';
-	// #ifdef MP-WEIXIN
-	import {
-		openGetAddress
-	} from '@/utils/rocessor.js';
-	// #endif
 	export default {
 		data() {
 			return {
@@ -48,12 +115,7 @@
 			};
 		},
 		computed: {
-			...mapState('user', ['hasLogin', 'userInfo']),
-			...mapState(['firstUse']),
-			...mapState('shop', ['shopDetail']),
-			notify() {
-				return this.notifyNum + this.articleNum
-			}
+			...mapState('user', [ 'userInfo']),
 		},
 		onLoad: function(option) {
 			// #ifndef MP
@@ -77,8 +139,7 @@
 		onShow() {
 			this.loadIndexs();
 		},
-		onReady() {
-		},
+		onReady() {},
 		// 滚动到底部
 		onReachBottom() {
 			this.getShowTemplateList();
@@ -144,7 +205,8 @@
 				)
 				// 获取热门
 				getShowTemplateList({
-					is_hot: 1
+					is_hot: 1,
+					pageSize: 3
 				}).then(
 					(res) => {
 						that.rmList = res.data.list
@@ -155,9 +217,10 @@
 						console.log(res);
 					}
 				)
+				that.getShowTemplateList();
 			},
 			// 获取模板列表
-			getShowTemplateList() {
+			getShowTemplateList(source) {
 				//这里是将订单挂载到tab列表下
 				let navItem = this.navList;
 				let state = navItem.state;
@@ -183,7 +246,7 @@
 					.then(({
 						data
 					}) => {
-						let arr = data.data.map(e => {
+						let arr = data.list.map(e => {
 							return e;
 						});
 						navItem.orderList = navItem.orderList.concat(arr);
@@ -210,24 +273,165 @@
 						// #ifdef H5
 						window.location.href = url
 						// #endif
+						// #ifdef APP
+						plus.runtime.openURL(url)
+						// #endif
 					} else {
-						window.location.href = 'baidu.com'
-						// uni.navigateTo({
-						// 	url: url
-						// })
+						uni.navigateTo({
+							url: url
+						})
 					}
 				}
-
 			}
 		},
-
 	};
 </script>
 
 <style lang="scss">
 	page,
 	.indexBox {
-		height: 0;
+		height: auto;
 		min-height: 100%;
 	}
+
+	.indexBox {
+		padding-bottom: 50rpx;
+	}
+
+	.top-swiper {
+		margin: auto;
+		width: 750rpx;
+		height: 273rpx;
+		padding: 0 $page-row-spacing;
+		background: linear-gradient(to bottom, #ff629f, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1));
+
+		.carousel-item {
+			border-radius: 20rpx;
+
+			.imageitem {
+				// margin: auto;
+				width: 690rpx;
+				height: 273rpx;
+			}
+		}
+	}
+
+	.hot-list-box {
+		padding: $page-row-spacing;
+		background-color: #FFFFFF;
+		padding-bottom: 0;
+
+		.title-box {
+			line-height: 1;
+
+			.hot {
+				width: 36rpx;
+				height: 36rpx;
+
+			}
+
+			.title {
+				font-size: $font-lg;
+				font-weight: bold;
+			}
+
+			.right {
+				font-size: $font-sm;
+				color: #999999;
+
+				.tip {
+					width: 15rpx;
+					height: 25rpx;
+				}
+			}
+		}
+
+		.hot-list {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			align-items: flex-start;
+			padding-top: 30rpx;
+			padding-bottom: 15rpx;
+
+			.item-none {
+				width: 220rpx;
+			}
+
+			.item {
+				padding: 13rpx;
+				width: 220rpx;
+				border-radius: 10rpx;
+				border: 2px solid #F65486;
+				margin-bottom: 16rpx;
+				line-height: 1;
+				.hot-title {
+					color: $font-color-dark;
+					font-size: $font-base;
+					padding: 10rpx 0;
+				}
+
+				.hot-image-box {
+					width: 194rpx;
+					height: 228rpx;
+					overflow: hidden;
+
+					.hot-image {
+						width: 100%;
+					}
+				}
+
+				.hot-money {
+					.money {
+						font: $font-lg;
+						color: #FF3342;
+					}
+
+					.oldmoney {
+						color: #969696;
+						font-size: $font-sm;
+						text-decoration: line-through;
+					}
+				}
+			}
+		}
+
+		.list-box {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			align-items: flex-start;
+			padding-top: 30rpx;
+			padding-bottom: 20rpx;
+
+			.list {
+				box-shadow: 0px 0px 20rpx 0px rgba(50,50,52,0.06);
+				border-radius: 15rpx;
+				.list-image-box {
+					width: 330rpx;
+					height: 420rpx;
+					overflow: hidden;
+
+					.list-image {
+						width: 100%;
+					}
+				}
+				.list-content{
+					padding: 20rpx;
+					line-height: 1;
+					.list-title {
+						color: $font-color-dark;
+						font-size: $font-base;
+						margin-bottom: 10rpx;
+					}
+					.list-money {
+						.money {
+							font: $font-lg;
+							color: #FF3342;
+						}
+					}
+				}
+			}
+		}
+	}
 </style>

pages/user/model/modelList.vue

@@ -0,0 +1,179 @@
+<template>
+	<view class="indexBox">
+		<view class="hot-list-box">
+			<view class="list-box">
+				<view class="list" v-for="(item,index) in navList.orderList">
+					<view class="list-image-box">
+						<image class="list-image" :src="item.img" mode="widthFix"></image>
+					</view>
+					<view class="list-content">
+						<view class="list-title clamp">
+							{{item.title}}
+						</view>
+						<view class="list-money flex flex-start">
+							<view class="money">
+								￥{{item.price}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<uni-load-more :status="navList.loadingType"></uni-load-more>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState,
+		mapMutations
+	} from 'vuex';
+	import {
+		share
+	} from '@/api/wx';
+	import {
+		getBannerList,
+		getShowTemplateList
+	} from '@/api/model.js';
+	export default {
+		data() {
+			return {
+				// 商品列表
+				navList: {
+					state: 1,
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10, //每次信息条数
+					count: 0, //总消息条数
+				},
+			};
+		},
+		onLoad: function(option) {
+			this.getShowTemplateList();
+		},
+		// 滚动到底部
+		onReachBottom() {
+			this.getShowTemplateList();
+		},
+		methods: {
+			// 获取模板列表
+			getShowTemplateList(source) {
+				//这里是将订单挂载到tab列表下
+				let navItem = this.navList;
+				let state = navItem.state;
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (navItem.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				// 修改当前对象状态为加载中
+				navItem.loadingType = 'loading';
+				getShowTemplateList({
+						is_recommend: 1,
+						page: navItem.page,
+						pageSize: navItem.limit
+					})
+					.then(({
+						data
+					}) => {
+						let arr = data.list.map(e => {
+							return e;
+						});
+						navItem.orderList = navItem.orderList.concat(arr);
+						navItem.page++;
+						if (navItem.limit == arr.length) {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'more';
+							return;
+						} else {
+							//判断是否还有数据， 有改为 more， 没有改为noMore
+							navItem.loadingType = 'noMore';
+						}
+						uni.hideLoading();
+						this.$set(navItem, 'loaded', true);
+					})
+					.catch(e => {
+						console.log(e);
+					});
+
+			},
+			navTo(url) {
+				if (url) {
+					if (url.indexOf('http') > -1) {
+						// #ifdef H5
+						window.location.href = url
+						// #endif
+						// #ifdef APP
+						plus.runtime.openURL(url)
+						// #endif
+					} else {
+						uni.navigateTo({
+							url: url
+						})
+					}
+				}
+			}
+		},
+	};
+</script>
+
+<style lang="scss">
+	page,
+	.indexBox {
+		height: auto;
+		min-height: 100%;
+	}
+
+	.hot-list-box {
+		padding: $page-row-spacing;
+		padding-bottom: 0;
+
+		.list-box {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			align-items: flex-start;
+			padding-bottom: 20rpx;
+
+			.list {
+				box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+				border-radius: 15rpx;
+
+				.list-image-box {
+					width: 330rpx;
+					height: 420rpx;
+					overflow: hidden;
+
+					.list-image {
+						width: 100%;
+					}
+				}
+
+				.list-content {
+					padding: 20rpx;
+					line-height: 1;
+					.list-title {
+						color: $font-color-dark;
+						font-size: $font-base;
+						margin-bottom: 10rpx;
+					}
+
+					.list-money {
+						.money {
+							font: $font-lg;
+							color: #FF3342;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

uni.scss

@@ -31,7 +31,7 @@ $uni-border-color:#ebeef5;
 $color-yellow: #FFE92F;
 $color-gray: #999999;
 $color-green: #0BBB62;
-$color-red: #FF4241;
+$color-red: #F65486;
 /* 图片加载中颜色 */
 $image-bg-color: #eee;
 /* 行为相关颜色 */