Merge branch 'master' of http://git.liuniu946.com/cmy/xinwang

components/seckill/seckill.vue

@@ -1,246 +1,264 @@
-<template>
-	<view class="seckill-section m-t" v-if="show">
-		<view class="s-header">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">限时秒杀</text></view>
-			<view class="tip-box">
-				<text class="tip" v-if="status == 1">{{ showTime }}点场结束</text>
-				<text class="tip" v-if="status == 2">距离下场开始</text>
-				<text class="tip" v-if="status == 0">当天活动已结束</text>
-				<uni-countdown v-if="status == 1 || status == 2" :show-day="false" :hour="stopTimeH" :minute="stopTimeM" :second="stopTimeS"></uni-countdown>
-			</view>
-			<view class="textNav iconfont iconenter" @click="navTo('/pages/product/seckill')">更多</view>
-		</view>
-		<scroll-view class="floor-list" scroll-x>
-			<view class="scoll-wrapper position-relative" @click="navTo('/pages/product/seckill')">
-				<view v-for="(item, index) in list" :key="index" class="floor-item">
-					<image class="list-image" :src="item.image" mode="aspectFill"></image>
-					<text class="title clamp">{{ item.title }}</text>
-					<text class="price">￥{{ item.price }}</text>
-				</view>
-				<view v-if="list.length == 0" class="floor-item ">
-					<image class="list-image" mode="aspectFill"></image>
-					<text class="title clamp"></text>
-					<text class="price"></text>
-				</view>
-				<view v-if="list.length == 0" class="noGoodsBg"><view>敬请期待</view></view>
-			</view>
-		</scroll-view>
-	</view>
-</template>
-
-<script>
-import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
-import { getSeckillList, getSeckillClass } from '@/api/product.js';
-import { timeComputed } from '@/utils/rocessor.js';
-export default {
-	components: {
-		uniCountdown
-	},
-	data() {
-		return {
-			list: [],
-			page: 1,
-			limit: 10,
-			showTime: '', //显示的时间
-			showTImeId: '', //显示时间id用于查询数据
-			stopTimeH: 0,
-			stopTimeM: 0,
-			stopTimeS: 0,
-			// 判断是否所有活动已经结束
-			stop: false, //活动是否已经结束
-			show: false, //是否显示活动
-			status: 0 //获取状态值1为有活动开始中 2为活动未开始 0为活动已经结束
-		};
-	},
-	created: function(e) {
-		// 载入分类
-		this.getClass();
-	},
-	methods: {
-		navTo(url) {
-			uni.navigateTo({
-				url
-			});
-		},
-		getList() {
-			getSeckillList(
-				{
-					page: this.page,
-					limit: this.limit
-				},
-				this.showTImeId
-			)
-				.then(e => {
-					this.list = e.data;
-				})
-				.catch(e => {
-					console.log(e);
-				});
-		},
-		getClass() {
-			let obj = this;
-			getSeckillClass({})
-				.then(({ data }) => {
-					let arr = data.seckillTime;
-					// 用于判断是否有数据
-					let showDate = false;
-					for (var i = 0; i < arr.length; i++) {
-						let ar = arr[i];
-						if (ar.status === 1 || ar.status === 2) {
-							obj.status = ar.status;
-							// 保存要显示的场次时间
-							obj.showTime = ar.time;
-							// 保存要显示活动商品的id
-							obj.showTImeId = ar.id;
-							// 保存当前状态值
-							// 计算倒计时时间
-							if (ar.status === 1) {
-								obj.timeComputed(ar.stop * 1000);
-							} else {
-								// 获取需要开始
-								let arTime = ar.time.split(':');
-								let h = arTime[0];
-								let m = arTime[1];
-								let time = new Date();
-								// 设置时间
-								time.setHours(h, m, 0);
-								obj.timeComputed(time.getTime());
-							}
-							// 获取商品列表
-							obj.getList();
-							// 保存当前有活动在举行
-							showDate = true;
-							// 任务查询结束跳出循环
-							break;
-						}
-					}
-					// 判断是否有活动
-					if (arr.length > 0) {
-						obj.show = true;
-					}
-					// 判断今天活动是否已经全部结束
-					if (!showDate) {
-						// 保存活动结束最后一个小时的活动商品
-						obj.showTImeId = arr[arr.length - 1].id;
-						// 活动已经结束
-						obj.status = 0;
-						// 获取结束时的商品
-						obj.getList();
-						console.log(obj.status);
-					}
-					// 如果所有场次均已经结束
-				})
-				.catch(e => {
-					uni.showModal({
-						title: JSON.stringify(e)
-					});
-				});
-		},
-		// 计算倒计时时间
-		timeComputed(da) {
-			let obj = this;
-			let stopTime = timeComputed(da)
-			obj.stopTimeH =stopTime.hours;
-			obj.stopTimeM = stopTime.minutes;
-			obj.stopTimeS =stopTime.seconds;
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-/* 秒杀专区 */
-.seckill-section {
-	padding: 4rpx 30rpx 24rpx;
-	.s-header {
-		display: flex;
-		align-items: center;
-		height: 92rpx;
-		line-height: 1;
-		.tit-box {
-			flex-shrink: 0;
-		}
-		.tit {
-			@extend %font-title;
-		}
-		.f-left-icon {
-			@extend %f-left-icon;
-		}
-		.textNav {
-			line-height: 1;
-			padding: 15rpx 0;
-			flex-shrink: 0;
-			flex-grow: 1;
-			min-width: 100rpx;
-		}
-		.tip-box {
-			flex-grow: 1;
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
-		}
-		.tip {
-			font-size: $font-sm;
-			color: $font-color-light;
-			padding-left: 10rpx;
-			padding-right: 10rpx;
-		}
-		.timer {
-			display: inline-block;
-			width: 40rpx;
-			height: 36rpx;
-			text-align: center;
-			line-height: 36rpx;
-			margin-right: 14rpx;
-			font-size: $font-sm + 2rpx;
-			color: #fff;
-			border-radius: 2px;
-			background: rgba(0, 0, 0, 0.8);
-		}
-		.iconenter {
-			font-size: $font-sm;
-			color: $font-color-light;
-			flex: 1;
-			text-align: right;
-		}
-	}
-	.floor-list {
-		white-space: nowrap;
-		background-color: white;
-		padding: 20rpx;
-		border-radius: 5rpx;
-		box-shadow: $box-shadow;
-	}
-	.scoll-wrapper {
-		display: flex;
-		align-items: flex-start;
-		.noGoodsBg {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			height: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			color: $font-color-light;
-		}
-		.floor-item {
-			width: 150rpx;
-			margin-right: 20rpx;
-			font-size: $font-sm + 2rpx;
-			color: $font-color-dark;
-			line-height: 1.8;
-			.list-image {
-				width: 150rpx;
-				height: 150rpx;
-				border-radius: 6rpx;
-			}
-			.price {
-				color: $color-red;
-			}
-		}
-	}
-}
+<template>
+	<view class="seckill-section m-t" v-if="show">
+		<view class="s-header">
+			<image src="" mode="" class="sk-img"></image>
+			<view class="tit-box"><text class="tit">限时秒杀</text></view>
+			<view class="tip-box">
+				<text class="tip" v-if="status == 1">{{ showTime }}点场结束</text>
+				<text class="tip" v-if="status == 2">距离下场开始</text>
+				<text class="tip" v-if="status == 0">当天活动已结束</text>
+				<uni-countdown 
+					v-if="status == 1 || status == 2" 
+					:show-day="false" 
+					:hour="stopTimeH" 
+					:minute="stopTimeM" 
+					:second="stopTimeS"
+					:color="'#fff'"
+					:backgroundColor="'#FF4C4C'"
+					:splitorColor="'#FF4C4C'"
+				></uni-countdown>
+			</view>
+			<view class="textNav iconfont iconenter" @click="navTo('/pages/product/seckill')">更多</view>
+		</view>
+		<scroll-view class="floor-list" scroll-x>
+			<view class="scoll-wrapper position-relative" @click="navTo('/pages/product/seckill')">
+				<view v-for="(item, index) in list" :key="index" class="floor-item">
+					<image class="list-image" :src="item.image" mode="aspectFill"></image>
+					<text class="title clamp">{{ item.title }}</text>
+					<text class="price">￥{{ item.price }}</text>
+				</view>
+				<view v-if="list.length == 0" class="floor-item ">
+					<image class="list-image" mode="aspectFill"></image>
+					<text class="title clamp"></text>
+					<text class="price"></text>
+				</view>
+				<view v-if="list.length == 0" class="noGoodsBg"><view>敬请期待</view></view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
+import { getSeckillList, getSeckillClass } from '@/api/product.js';
+import { timeComputed } from '@/utils/rocessor.js';
+export default {
+	components: {
+		uniCountdown
+	},
+	data() {
+		return {
+			list: [],
+			page: 1,
+			limit: 10,
+			showTime: '', //显示的时间
+			showTImeId: '', //显示时间id用于查询数据
+			stopTimeH: 0,
+			stopTimeM: 0,
+			stopTimeS: 0,
+			// 判断是否所有活动已经结束
+			stop: false, //活动是否已经结束
+			show: false, //是否显示活动
+			status: 0 //获取状态值1为有活动开始中 2为活动未开始 0为活动已经结束
+		};
+	},
+	created: function(e) {
+		// 载入分类
+		this.getClass();
+	},
+	methods: {
+		navTo(url) {
+			uni.navigateTo({
+				url
+			});
+		},
+		getList() {
+			getSeckillList(
+				{
+					page: this.page,
+					limit: this.limit
+				},
+				this.showTImeId
+			)
+				.then(e => {
+					this.list = e.data;
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		getClass() {
+			let obj = this;
+			getSeckillClass({})
+				.then(({ data }) => {
+					let arr = data.seckillTime;
+					// 用于判断是否有数据
+					let showDate = false;
+					for (var i = 0; i < arr.length; i++) {
+						let ar = arr[i];
+						if (ar.status === 1 || ar.status === 2) {
+							obj.status = ar.status;
+							// 保存要显示的场次时间
+							obj.showTime = ar.time;
+							// 保存要显示活动商品的id
+							obj.showTImeId = ar.id;
+							// 保存当前状态值
+							// 计算倒计时时间
+							if (ar.status === 1) {
+								obj.timeComputed(ar.stop * 1000);
+							} else {
+								// 获取需要开始
+								let arTime = ar.time.split(':');
+								let h = arTime[0];
+								let m = arTime[1];
+								let time = new Date();
+								// 设置时间
+								time.setHours(h, m, 0);
+								obj.timeComputed(time.getTime());
+							}
+							// 获取商品列表
+							obj.getList();
+							// 保存当前有活动在举行
+							showDate = true;
+							// 任务查询结束跳出循环
+							break;
+						}
+					}
+					// 判断是否有活动
+					if (arr.length > 0) {
+						obj.show = true;
+					}
+					// 判断今天活动是否已经全部结束
+					if (!showDate) {
+						// 保存活动结束最后一个小时的活动商品
+						obj.showTImeId = arr[arr.length - 1].id;
+						// 活动已经结束
+						obj.status = 0;
+						// 获取结束时的商品
+						obj.getList();
+						console.log(obj.status);
+					}
+					// 如果所有场次均已经结束
+				})
+				.catch(e => {
+					uni.showModal({
+						title: JSON.stringify(e)
+					});
+				});
+		},
+		// 计算倒计时时间
+		timeComputed(da) {
+			let obj = this;
+			let stopTime = timeComputed(da);
+			obj.stopTimeH = stopTime.hours;
+			obj.stopTimeM = stopTime.minutes;
+			obj.stopTimeS = stopTime.seconds;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/* 秒杀专区 */
+.seckill-section {
+	background-color: #fff;
+	padding: 4rpx 20rpx 24rpx;
+	.s-header {
+		display: flex;
+		align-items: center;
+		height: 92rpx;
+		line-height: 1;
+		.sk-img {
+			width: 36rpx;
+			height: 36rpx;
+			background-color: red;
+			border-radius: 50%;
+			margin-right: 9rpx;
+		}
+		.tit-box {
+			flex-shrink: 0;
+		}
+		.tit {
+			@extend %font-title;
+		}
+		.f-left-icon {
+			@extend %f-left-icon;
+		}
+		.textNav {
+			line-height: 1;
+			padding: 15rpx 0;
+			flex-shrink: 0;
+			flex-grow: 1;
+			min-width: 100rpx;
+		}
+		.tip-box {
+			flex-grow: 1;
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+		}
+		.tip {
+			font-size: $font-sm;
+			color: $font-color-light;
+			padding-left: 10rpx;
+			padding-right: 10rpx;
+		}
+		.timer {
+			display: inline-block;
+			width: 40rpx;
+			height: 36rpx;
+			text-align: center;
+			line-height: 36rpx;
+			margin-right: 14rpx;
+			font-size: $font-sm + 2rpx;
+			color: #fff;
+			border-radius: 2px;
+			background: rgba(0, 0, 0, 0.8);
+		}
+		.iconenter {
+			font-size: $font-sm;
+			color: $font-color-light;
+			flex: 1;
+			text-align: right;
+		}
+	}
+	.floor-list {
+		white-space: nowrap;
+		background-color: white;
+		padding: 20rpx;
+		border-radius: 5rpx;
+		// box-shadow: $box-shadow;
+	}
+	.scoll-wrapper {
+		display: flex;
+		align-items: flex-start;
+		.noGoodsBg {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			color: $font-color-light;
+		}
+		.floor-item {
+			width: 207rpx;
+			margin-right: 20rpx;
+			font-size: $font-sm + 2rpx;
+			color: $font-color-dark;
+			line-height: 1.8;
+			.list-image {
+				width: 207rpx;
+				height: 207rpx;
+				border-radius: 10rpx;
+				background-color: red;
+			}
+			.price {
+				color: $color-red;
+			}
+		}
+	}
+}
 </style>

pages.json

@@ -3,7 +3,7 @@
 			"path": "pages/index/index",
 			"style": {
 				"enablePullDownRefresh": true,
-				"navigationStyle": "custom",
+				"navigationStyle": "custom",
 				"navigationBarTitleText": "商城首页"
 			}
 		},
@@ -404,7 +404,7 @@
 						"searchInput": {
 							"backgroundColor": "rgba(231, 231, 231,.7)",
 							"borderRadius": "16px",
-							"placeholder": "商品搜索",
+							"placeholder": "输入关键词搜索",
 							"disabled": true,
 							"placeholderColor": "#606266",
 							"align": "left"
@@ -439,7 +439,7 @@
 	},
 	"tabBar": {
 		"color": "#C0C4CC",
-		"selectedColor": "#5DBC7C",
+		"selectedColor": "#FF4C4C",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{

pages/cart/cart.vue

@@ -12,7 +12,16 @@
 				<view class="navigator" @click="navToLogin">去登陆></view>
 			</view>
 		</view>
-		<view v-else>
+		<view v-else>
+			<!-- 购物车头部 -->
+			<view class="cart-hand flex">
+				<view class="hand-tit">
+					购物车共 <text>{{ ' '+cartList.length}} 件</text>商品
+				</view>
+				<view class="hand-btn" @click="clearCart()">
+					清空购物车
+				</view>
+			</view>
 			<!-- 列表 -->
 			<view class="cart-list">
 				<block v-for="(item, index) in cartList" :key="item.id">
@@ -30,9 +39,9 @@
 						</view>
 						<view class="item-right">
 							<text class="clamp title">{{ item.productInfo.store_name }}</text>
-							<text class="attr">{{ item.attr_val }}</text>
+							<text class="attr">{{ item.productInfo.attrInfo.suk }}</text>
 							<text class="price">¥{{ item.productInfo.price }}</text>
-							<uni-number-box
+							<!-- <uni-number-box
 								class="step"
 								:min="1"
 								:max="item.productInfo.stock"
@@ -41,9 +50,14 @@
 								:isMin="item.cart_num === 1"
 								:index="index"
 								@eventChange="numberChange"
-							></uni-number-box>
+							></uni-number-box> -->
+							<view class="munbox flex" >
+								<image src="../../static/icon/reduce.png" mode="" @click="reduce(item,index)"></image>
+								<input type="number" :value="item.cart_num" disabled/>
+								<image src="../../static/icon/add.png" mode="" @click="add(item)"></image>
+							</view>
 						</view>
-						<text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text>
+						<!-- <text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text> -->
 					</view>
 				</block>
 			</view>
@@ -51,7 +65,7 @@
 			<view class="action-section">
 				<view class="checkbox">
 					<view class="iconfont iconroundcheckfill icon-checked-box" @click="check('all')" :class="{ 'icon-checked': allChecked }"></view>
-					<view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view>
+					<!-- <view class="clear-btn" @click="allChecked ? clearCart() : ''" :class="{ show: allChecked }"><text>清空</text></view> -->
 				</view>
 				<view class="total-box">
 					<text class="price">¥{{ total }}</text>
@@ -102,7 +116,32 @@ export default {
 	computed: {
 		...mapState('user', ['hasLogin'])
 	},
-	methods: {
+	methods: {
+		reduce(item,index) {
+			if(item.cart_num == 1) {
+				uni.showModal({
+					content: '删除该商品？',
+					success: e => {
+						if (e.confirm) {
+							this.deleteCartItem(index)
+						}
+					}
+				});
+				
+			}else {
+				item.cart_num--
+				this.newNumberChange(item)
+			}
+		},
+		add(item) {
+			console.log(item)
+			if(item.productInfo.stock > item.cart_num) {
+				item.cart_num++
+				this.newNumberChange(item)
+			}else {
+				return 
+			}
+		},
 		//请求数据
 		async loadData() {
 			let obj = this;
@@ -175,6 +214,16 @@ export default {
 					console.log(e);
 				});
 			this.calcTotal();
+		},
+		newNumberChange(item) {
+			getCartNum({ id: item.id, number: item.cart_num })
+				.then(e => {
+					console.log(e);
+				})
+				.catch(function(e) {
+					console.log(e);
+				});
+			this.calcTotal();
 		},
 		//删除
 		deleteCartItem(index) {
@@ -278,13 +327,20 @@ export default {
 	}
 }
 /* 购物车列表项 */
-.cart-item {
+.cart-item {
+	width: 710rpx;
+	height: 210rpx;
+	background: #FFFFFF;
+	box-shadow: 0px 0px 10rpx 0rpx rgba(0, 0, 0, 0.1);
+	border-radius: 10rpx;
+	margin: 20rpx auto;
+	
 	display: flex;
 	position: relative;
-	padding: 30rpx 40rpx;
+	padding: 30rpx 26rpx 30rpx 80rpx;
 	.image-wrapper {
-		width: 230rpx;
-		height: 230rpx;
+		width: 150rpx;
+		height: 150rpx;
 		flex-shrink: 0;
 		position: relative;
 		image {
@@ -293,8 +349,11 @@ export default {
 	}
 	.checkbox {
 		position: absolute;
-		left: -16rpx;
-		top: -16rpx;
+		top: 0;
+		bottom: 0;
+		left: -65rpx;
+		margin: auto 0;
+		height: 50rpx;
 		z-index: 8;
 		font-size: 44rpx;
 		line-height: 1;
@@ -309,7 +368,23 @@ export default {
 		flex: 1;
 		overflow: hidden;
 		position: relative;
-		padding-left: 30rpx;
+		padding-left: 30rpx;
+		.munbox {
+			width: 144rpx;
+			height: 44rpx;
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			input {
+				display: inline-block;
+				text-align: center;
+			}
+			image {
+				flex-shrink: 0;
+				width: 44rpx;
+				height: 44rpx;
+			}
+		}
 		.title,
 		.price {
 			font-size: $font-base + 2rpx;
@@ -321,14 +396,30 @@ export default {
 			font-size: $font-sm + 2rpx;
 			color: $font-color-light;
 			height: 50rpx;
-			line-height: 50rpx;
+			line-height: 50rpx;
+			
+			font-size: 26rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #999999;
 		}
 		.price {
-			height: 50rpx;
-			line-height: 50rpx;
+			// height: 50rpx;
+			// line-height: 50rpx;
+			padding-top: 20rpx;
+			font-size: 34rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #FF4C4C;
 		}
 		.step {
 			margin-top: 20rpx;
+		}
+		.title {
+			font-size: 34rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
 		}
 	}
 	.del-btn {
@@ -398,7 +489,8 @@ export default {
 		display: flex;
 		flex-direction: column;
 		text-align: right;
-		padding-right: 40rpx;
+		padding-right: 40rpx;
+		
 		.price {
 			font-size: $font-lg;
 			color: $font-color-dark;
@@ -425,5 +517,35 @@ export default {
 .action-section .checkbox.checked,
 .cart-item .checkbox.checked {
 	color: $base-color;
+}
+.cart-hand {
+	width: 750rpx;
+	height: 88rpx;
+	background: #FFFFFF;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #333333;
+	line-height: 88rpx;
+	padding-left: 28rpx;
+	padding-right: 26rpx;
+	.hand-tit {
+		text {
+			color: #FF4C4C;
+		}
+	
+	}
+	.hand-btn {
+		width: 164rpx;
+		height: 62rpx;
+		border: 2rpx solid #FF4C4C;
+		border-radius: 31rpx;
+		font-size: 26rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #FF4C4C;
+		line-height: 62rpx;
+		text-align: center;
+	}
 }
 </style>

pages/category/category.vue

@@ -153,7 +153,9 @@ page,
 	color: $font-color-base;
 	position: relative;
 	&.active {
-		color: $base-color;
+		// color: $base-color;
+		color: #000;
+		font-weight: bold;
 		background: #f8f8f8;
 		&:before {
 			content: '';

pages/product/common/topSwiper.vue

@@ -1,11 +1,17 @@
 <template>
 	<view class="carousel">
-		<swiper indicator-dots :circular="true" duration="400">
+		<swiper indicator-dots :circular="true" duration="400" @change="swiperChange">
 			<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
 				<view class="image-wrapper"><image :src="item" class="loaded" mode="scaleToFill"></image></view>
 			</swiper-item>
-		</swiper>
-	</view>
+		</swiper>
+		<view class="swiper-dots">
+			<text class="num">{{ swiperCurrent + 1 }}</text>
+			<text class="sign">/</text>
+			<text class="num">{{ imgList | num }}</text>
+		</view>
+	</view>
+	
 </template>
 
 <script>
@@ -20,9 +26,26 @@ export default {
 	},
 	data() {
 		return {
-			
+			swiperCurrent: 0,
+			swiperLength: 0
 		};
-	},
+	},
+	filters: {
+		num(val) {
+			if(val){
+				
+				return val.length
+			}
+			return 0
+		}
+	},
+	methods: {
+		swiperChange(e) {
+			let index = e.detail.current;
+			this.swiperCurrent = index;
+			
+		}
+	}
 };
 </script>
 
@@ -31,7 +54,7 @@ export default {
 	/* #ifdef APP-PLUS */
 	padding-top: var(--status-bar-height);
 	/* #endif */
-	height: 700rpx;
+	height: 520rpx;
 	position: relative;
 	swiper {
 		height: 100%;
@@ -51,5 +74,25 @@ export default {
 			height: 100%;
 		}
 	}
+}
+.swiper-dots {
+	position: absolute;
+	bottom: 30rpx;
+	right: 26rpx;
+	color: red;
+	background-color: red;
+	z-index: 99;
+	width: 88rpx;
+	height: 42rpx;
+	background: #000000;
+	opacity: 0.5;
+	border-radius: 21rpx;
+
+	font-size: 28rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #FFFFFF;
+	line-height: 42rpx;
+	text-align: center;
 }
 </style>

pages/user/user.vue

@@ -1,556 +1,624 @@
-<template>
-	<view class="container">
-		<view class="vheigh"></view>
-		<scroll-view class="content-box" scroll-y="true">
-			<view class="user-section">
-				<view class="bg"></view>
-				<view class="user-info-box ">
-					<view class="detail flex" @click="navTo('/pages/set/userinfo')">
-						<view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
-						<view class="info-box">
-							<view class="username">{{ userInfo.nickname || '游客' }}</view>
-							<view class="font-size-sm" v-if="userInfo.spread_uid">邀请码:{{ userInfo.spread_uid }}</view>
-						</view>
-					</view>
-					<view class="config iconfont">
-						<text class="setting iconsetting" @click="navTo('/pages/set/set')"></text>
-						<text class="message iconmessage" @click="navTo('/pages/user/notice')"></text>
-					</view>
-				</view>
-				<!-- 会员卡功能 -->
-				<view class="vip-card-box">
-					<image class="card-bg" src="/static/img/vip-card-bg.png" mode=""></image>
-					<view class="b-btn">我要升级</view>
-					<view class="tit">
-						<text class="iconfont icon-iLinkapp-"></text>
-						升级专享优惠权益
-					</view>
-					<text class="e-m">DCloud Union</text>
-					<text class="e-b">开通会员开发无bug 一测就上线</text>
-				</view>
-			</view>
-
-			<view
-				class="cover-container"
-				:style="[
-					{
-						transform: coverTransform,
-						transition: coverTransition
-					}
-				]"
-				@touchstart="coverTouchstart"
-				@touchmove="coverTouchmove"
-				@touchend="coverTouchend"
-			>
-				<image class="arc" src="/static/img/arc.png"></image>
-
-				<view class="tj-sction">
-					<view class="tj-item" @click="navTo('/pages/money/wallet')">
-						<text class="num">{{ userInfo.now_money || '0.00' }}</text>
-						<text>余额</text>
-					</view>
-					<view class="tj-item" @click="navTo('/pages/user/award')">
-						<text class="num">{{ userInfo.brokerage_price || '0.00' }}</text>
-						<text>佣金</text>
-					</view>
-					<view class="tj-item" @click="navTo('/pages/user/scoreAccumulate')">
-						<text class="num">{{ userInfo.integral || '0.00' }}</text>
-						<text>积分</text>
-					</view>
-				</view>
-				<!-- 订单 -->
-
-				<view class="item-box">
-					<!-- <view class="box-title flex borde-b">
-						<view class="title"><text>我的订单</text></view>
-						<view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover">
-							<text>全部订单</text>
-							<text class="iconfont iconenter"></text>
-						</view>
-					</view> -->
-					<view class="order-section">
-						<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
-							<view class=" icon position-relative">
-								<image class="icon-img" src="/static/icon/i1.png" mode="aspectFit"></image>
-								<view class="corner" v-if="orderInfo.unpaid_count > 0">
-									<text>{{ orderInfo.unpaid_count }}</text>
-								</view>
-							</view>
-							<text>待付款</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
-							<view class=" icon position-relative">
-								<image class="icon-img" src="/static/icon/i2.png" mode="aspectFit"></image>
-								<view class="corner" v-if="orderInfo.unshipped_count > 0">
-									<text>{{ orderInfo.unshipped_count }}</text>
-								</view>
-							</view>
-							<text>待发货</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon position-relative">
-								<image class="icon-img" src="/static/icon/i3.png" mode="aspectFit"></image>
-								<view class="corner" v-if="orderInfo.received_count > 0">
-									<text>{{ orderInfo.received_count }}</text>
-								</view>
-							</view>
-							<text>待收货</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon position-relative">
-								<image class="icon-img" src="/static/icon/i4.png" mode="aspectFit"></image>
-								<!-- <view class="corner" v-if="orderInfo.complete_count > 0">
-									<text>{{ orderInfo.complete_count }}</text>
-								</view> -->
-							</view>
-							<text>已完成</text>
-						</view>
-					</view>
-				</view>
-				<view class="item-box">
-					<!-- <view class="box-title flex borde-b">
-						<view class="title"><text>我的资产</text></view>
-					</view> -->
-					<view class="order-section">
-						<view class="order-item" @click="navTo('/pages/money/wallet')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon"><image class="icon-img" src="/static/icon/u1.png" mode="aspectFit"></image></view>
-							<text>我的钱包</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon"><image class="icon-img" src="/static/icon/u2.png" mode="aspectFit"></image></view>
-							<text>奖励明细</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon"><image class="icon-img" src="/static/icon/u3.png" mode="aspectFit"></image></view>
-							<text>积分明细</text>
-						</view>
-						<view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
-							<view class="icon"><image class="icon-img" src="/static/icon/u4.png" mode="aspectFit"></image></view>
-							<text>通用币</text>
-						</view>
-					</view>
-				</view>
-
-				<!-- 浏览历史 -->
-				<view class="history-section icon">
-					<view class="sec-header">
-						<text class="iconfont iconfavor"></text>
-						<text>浏览历史</text>
-					</view>
-					<scroll-view scroll-x class="h-list">
-						<image
-							class="h-list-image"
-							@click="navTo('/pages/product/product')"
-							src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg"
-							mode="aspectFill"
-						></image>
-					</scroll-view>
-					<uni-list>
-						<uni-list-item title="我的钱包" @click="navTo('/pages/money/wallet')" thumb="/static/icon/img11.png"></uni-list-item>
-						<uni-list-item title="我的卡卷" @click="navTo('/pages/user/coupon')" thumb="/static/icon/img12.png"></uni-list-item>
-						<uni-list-item title="我的收藏" @click="navTo('/pages/user/favorites')" thumb="/static/icon/img02.png"></uni-list-item>
-						<uni-list-item title="商户入驻" @click="navTo('/pages/set/address')" thumb="/static/icon/img05.png"></uni-list-item>
-						<uni-list-item title="邀请好友" @click="navTo('/pages/user/shareQrCode')" thumb="/static/icon/img10.png"></uni-list-item>
-						<uni-list-item title="关于我们" @click="navTo('/pages/shareQrCode/index')" thumb="/static/icon/img09.png"></uni-list-item>
-					</uni-list>
-				</view>
-			</view>
-		</scroll-view>
-	</view>
-</template>
-<script>
-import { mapState, mapMutations } from 'vuex';
-import uniList from '@/components/uni-list/uni-list.vue';
-import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
-import { orderData, userinfo } from '@/api/user.js';
-import { saveUrl, interceptor } from '@/utils/loginUtils.js';
-let startY = 0,
-	moveY = 0,
-	pageAtTop = true;
-export default {
-	components: {
-		uniList,
-		uniListItem
-	},
-	data() {
-		return {
-			coverTransform: 'translateY(0px)',
-			coverTransition: '0s',
-			moving: false,
-			userDowm: 0, //卡片升级专属高度
-			userMaxDowm: 0 //卡片最高高度
-		};
-	},
-	onShow() {
-		// 判断是否已经登录
-		if (this.hasLogin) {
-			this.loadBaseData();
-		}
-	},
-	onReady() {
-		// 初始化获取页面宽度
-		uni.createSelectorQuery()
-			.select('.container')
-			.fields(
-				{
-					size: true
-				},
-				data => {
-					// 计算最多下拉的高度
-					this.userDowm = Math.floor((data.width / 750) * 185);
-					// 计算最大触发修改高度事件
-					this.userMaxDowm = Math.floor((data.width / 750) * 250);
-				}
-			)
-			.exec();
-	},
-	// #ifndef MP
-	// onNavigationBarButtonTap(e) {
-	// 	const index = e.index;
-	// 	if (index === 0) {
-	// 		this.navTo('/pages/set/set');
-	// 	} else if (index === 1) {
-	// 		// #ifdef APP-PLUS
-	// 		const pages = getCurrentPages();
-	// 		const page = pages[pages.length - 1];
-	// 		const currentWebview = page.$getAppWebview();
-	// 		currentWebview.hideTitleNViewButtonRedDot({
-	// 			index
-	// 		});
-	// 		// #endif
-	// 		uni.navigateTo({
-	// 			url: '/pages/user/notice'
-	// 		});
-	// 	}
-	// },
-	// #endif
-	computed: {
-		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
-	},
-	methods: {
-		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
-		// 加载初始数据
-		loadBaseData() {
-			userinfo({})
-				.then(({ data }) => {
-					this.setUserInfo(data);
-					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
-					orderData({})
-						.then(({ data }) => {
-							this.setOrderInfo(data);
-						})
-						.catch(e => {
-							this.setOrderInfo({
-								complete_count: 0, //完成
-								received_count: 0, //待收货
-								unshipped_count: 0, //待发货
-								order_count: 0, //订单总数
-								unpaid_count: 0 //待付款
-							});
-						});
-				})
-				.catch(e => {
-					console.log(e);
-				});
-		},
-		/**
-		 * 统一跳转接口,拦截未登录路由
-		 * navigator标签现在默认没有转场动画，所以用view
-		 */
-		navTo(url) {
-			if (!this.hasLogin) {
-				// 保存地址
-				saveUrl();
-				// 登录拦截
-				interceptor();
-			} else {
-				uni.navigateTo({
-					url
-				});
-			}
-		},
-
-		/**
-		 *  会员卡下拉和回弹
-		 *  1.关闭bounce避免ios端下拉冲突
-		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
-		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
-		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
-		 */
-		coverTouchstart(e) {
-			// console.log(e);
-			if (pageAtTop === false) {
-				return;
-			}
-
-			this.coverTransition = 'transform .1s linear';
-			startY = e.touches[0].clientY;
-		},
-		coverTouchmove(e) {
-			// console.log(e);
-			moveY = e.touches[0].clientY;
-			let moveDistance = moveY - startY;
-			let maxDowm = this.userMaxDowm;
-			let Dowm = this.userDowm;
-			if (moveDistance < 0) {
-				this.moving = false;
-				return;
-			}
-			this.moving = true;
-			if (moveDistance >= Dowm && moveDistance < maxDowm) {
-				moveDistance = Dowm;
-			}
-
-			if (moveDistance > 0 && moveDistance <= Dowm) {
-				this.coverTransform = `translateY(${moveDistance}px)`;
-			}
-		},
-		coverTouchend() {
-			if (this.moving === false) {
-				return;
-			}
-			this.moving = false;
-			this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
-			this.coverTransform = 'translateY(0px)';
-		}
-	}
-};
-</script>
-<style lang="scss">
-page {
-	height: 100%;
-}
-%flex-center {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-}
-%section {
-	display: flex;
-	justify-content: space-around;
-	align-content: center;
-	background: #fff;
-	border-radius: 10rpx;
-}
-.container {
-	height: 100%;
-	background-color: $page-color-base;
-}
-.content-box {
-	height: 100%;
-}
-.vheigh {
-	height: var(--status-bar-height);
-	background-color: $base-color;
-}
-.user-section {
-	height: 435rpx;
-	padding: 15rpx 30rpx 0;
-	position: relative;
-	.bg {
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 100%;
-		height: 100%;
-		background-color: $base-color;
-	}
-}
-.user-info-box {
-	height: 180rpx;
-	color: white;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	position: relative;
-	z-index: 1;
-	.detail {
-		height: 130rpx;
-		.portrait-box {
-			height: 100%;
-			.portrait {
-				width: 130rpx;
-				height: 100%;
-				border: 5rpx solid #fff;
-				border-radius: 50%;
-			}
-		}
-		.info-box {
-			margin-left: 20rpx;
-			line-height: 1.5;
-			.username {
-				font-size: $font-lg + 6rpx;
-				height: 100%;
-			}
-		}
-	}
-	.config {
-		font-size: 48rpx;
-		height: 130rpx;
-		.setting {
-			margin-right: 51rpx;
-		}
-	}
-}
-
-.vip-card-box {
-	display: flex;
-	flex-direction: column;
-	color: #f7d680;
-	height: 240rpx;
-	background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
-	border-radius: 16rpx 16rpx 0 0;
-	overflow: hidden;
-	position: relative;
-	padding: 20rpx 24rpx;
-	.card-bg {
-		position: absolute;
-		top: 20rpx;
-		right: 0;
-		width: 380rpx;
-		height: 260rpx;
-	}
-	.b-btn {
-		position: absolute;
-		right: 20rpx;
-		top: 16rpx;
-		width: 132rpx;
-		height: 40rpx;
-		text-align: center;
-		line-height: 40rpx;
-		font-size: 22rpx;
-		color: #36343c;
-		border-radius: 20px;
-		background: linear-gradient(left, #f9e6af, #ffd465);
-		z-index: 1;
-	}
-	.tit {
-		font-size: $font-base + 2rpx;
-		color: #f7d680;
-		margin-bottom: 28rpx;
-		.iconfont {
-			color: #f6e5a3;
-			margin-right: 16rpx;
-		}
-	}
-	.e-b {
-		font-size: $font-sm;
-		color: #d8cba9;
-		margin-top: 10rpx;
-	}
-}
-.cover-container {
-	background: $page-color-base;
-	margin-top: -150rpx;
-	padding: 0 30rpx;
-	position: relative;
-	background: #f5f5f5;
-	padding-bottom: 20rpx;
-	.arc {
-		position: absolute;
-		left: 0;
-		top: -34rpx;
-		width: 100%;
-		height: 36rpx;
-	}
-}
-.tj-sction {
-	@extend %section;
-	.tj-item {
-		@extend %flex-center;
-		flex-direction: column;
-		height: 140rpx;
-		font-size: $font-sm;
-		color: #75787d;
-	}
-	.num {
-		font-size: $font-lg;
-		color: $font-color-dark;
-		margin-bottom: 8rpx;
-	}
-}
-
-.item-box {
-	border-radius: 10rpx;
-	background-color: white;
-	margin-top: 20rpx;
-	.box-title {
-		line-height: 1;
-		padding: 30rpx;
-		.title {
-			font-size: $font-lg;
-			font-weight: bold;
-		}
-		.link {
-			font-size: $font-base - 2rpx;
-			color: $font-color-light;
-		}
-	}
-	.order-section {
-		@extend %section;
-		padding: 28rpx 0;
-		.order-item {
-			@extend %flex-center;
-			width: 120rpx;
-			height: 120rpx;
-			border-radius: 10rpx;
-			font-size: $font-sm;
-			color: $font-color-dark;
-		}
-		.iconfont {
-			font-size: 48rpx;
-			margin-bottom: 18rpx;
-			color: #fa436a;
-		}
-		.icon-shouhoutuikuan {
-			font-size: 44rpx;
-		}
-		.icon {
-			height: 50rpx;
-			width: 48rpx;
-			margin-bottom: 18rpx;
-			background-size: 100%;
-			background-repeat: no-repeat;
-			background-position: center;
-			.icon-img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-}
-
-.history-section {
-	// padding: 30rpx 0 0;
-	margin-top: 20rpx;
-	background: #fff;
-	border-radius: 10rpx;
-	.sec-header {
-		display: flex;
-		align-items: center;
-		font-size: $font-base;
-		color: $font-color-dark;
-		line-height: 40rpx;
-		margin-left: 30rpx;
-		padding-top: 30rpx;
-		.iconfont {
-			font-size: 44rpx;
-			color: $color-red;
-			margin-right: 16rpx;
-			line-height: 40rpx;
-		}
-	}
-	.h-list {
-		white-space: nowrap;
-		padding: 30rpx 30rpx 0;
-		.h-list-image {
-			display: inline-block;
-			width: 160rpx;
-			height: 160rpx;
-			margin-right: 20rpx;
-			border-radius: 10rpx;
-		}
-	}
-}
+<template>
+	<view class="container">
+		<view class="vheigh"></view>
+		<scroll-view class="content-box" scroll-y="true">
+			<view class="user-section">
+				<view class="bg"></view>
+				<view class="user-info-box ">
+					<view class="detail flex" @click="navTo('/pages/set/userinfo')">
+						<view class="portrait-box"><image class="portrait" :src="userInfo.avatar || '/static/error/missing-face.png'"></image></view>
+						<view class="info-box">
+							<view class="username">{{ userInfo.nickname || '游客' }}</view>
+							<!-- <view class="font-size-sm" v-if="userInfo.spread_uid">邀请码:{{ userInfo.spread_uid }}</view> -->
+							<view class="user-lv">
+								<!-- <view class="lv-1">
+									普通会员
+								</view>
+								<view class="lv-2">
+									<image src="../../static/img/lv02.png" mode=""></image>
+								</view> -->
+								<view class="lv-3">
+									<image src="../../static/img/lv03.png" mode=""></image>
+								</view>
+								<view class="lv-3" style="margin-left: -20rpx;">
+									<image src="../../static/img/lv04.png" mode=""></image>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="my-info flex">
+						<image src="../../static/icon/i6.png" mode=""></image>
+						<view class="title">我的资料</view>
+					</view>
+				</view>
+			</view>
+			<!-- 订单 -->
+			<view class="item-box item-box-b">
+				<view class="box-title flex borde-b">
+					<view class="title"><text>我的订单</text></view>
+					<view class="link" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"><text class="iconfont iconenter"></text></view>
+				</view>
+				<view class="order-section">
+					<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon position-relative">
+							<image class="icon-img" src="/static/icon/i1.png" mode="aspectFit"></image>
+							<view class="corner" v-if="orderInfo.unpaid_count > 0">
+								<text>{{ orderInfo.unpaid_count }}</text>
+							</view>
+						</view>
+						<text>待付款</text>
+					</view>
+					<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover" :hover-stay-time="50">
+						<view class=" icon position-relative">
+							<image class="icon-img" src="/static/icon/i2.png" mode="aspectFit"></image>
+							<view class="corner" v-if="orderInfo.unshipped_count > 0">
+								<text>{{ orderInfo.unshipped_count }}</text>
+							</view>
+						</view>
+						<text>待发货</text>
+					</view>
+					<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover" :hover-stay-time="50">
+						<view class="icon position-relative">
+							<image class="icon-img" src="/static/icon/i3.png" mode="aspectFit"></image>
+							<view class="corner" v-if="orderInfo.received_count > 0">
+								<text>{{ orderInfo.received_count }}</text>
+							</view>
+						</view>
+						<text>待收货</text>
+					</view>
+					<view class="order-item" @click="navTo('/pages/order/order?state=3')" hover-class="common-hover" :hover-stay-time="50">
+						<view class="icon position-relative">
+							<image class="icon-img" src="/static/icon/i4.png" mode="aspectFit"></image>
+							<!-- <view class="corner" v-if="orderInfo.complete_count > 0">
+								<text>{{ orderInfo.complete_count }}</text>
+							</view> -->
+						</view>
+						<text>已完成</text>
+					</view>
+				</view>
+			</view>
+			<!-- 升级店长 -->
+			<view class="up-box"></view>
+			<view>
+				<!-- <view class="tj-sction">
+					<view class="tj-item" @click="navTo('/pages/money/wallet')">
+						<text class="num">{{ userInfo.now_money || '0.00' }}</text>
+						<text>余额</text>
+					</view>
+					<view class="tj-item" @click="navTo('/pages/user/award')">
+						<text class="num">{{ userInfo.brokerage_price || '0.00' }}</text>
+						<text>佣金</text>
+					</view>
+					<view class="tj-item" @click="navTo('/pages/user/scoreAccumulate')">
+						<text class="num">{{ userInfo.integral || '0.00' }}</text>
+						<text>积分</text>
+					</view>
+				</view> -->
+
+				<view class="item-box item-box-a">
+					<view class="order-section">
+						
+						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u2.png" mode="aspectFit"></image></view>
+							<text>收益中心</text>
+						</view>
+						<view class="order-item" @click="navTo('/pages/money/wallet')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u1.png" mode="aspectFit"></image></view>
+							<text>我的钱包</text>
+						</view>
+						<view class="order-item" @click="navTo('/pages/user/award')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u3.png" mode="aspectFit"></image></view>
+							<text>我的会员</text>
+						</view>
+						<view class="order-item" @click="navTo('/pages/order/order?state=4')" hover-class="common-hover" :hover-stay-time="50">
+							<view class="icon icon-b"><image class="icon-img" src="/static/icon/u4.png" mode="aspectFit"></image></view>
+							<text>邀请好友</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 浏览历史 -->
+				<view class="history-section icon">
+					<!-- <view class="sec-header">
+						<text class="iconfont iconfavor"></text>
+						<text>浏览历史</text>
+					</view> -->
+					<!-- <scroll-view scroll-x class="h-list">
+						<image
+							class="h-list-image"
+							@click="navTo('/pages/product/product')"
+							src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553105186633&di=c121a29beece4e14269948d990f9e720&imgtype=0&src=http%3A%2F%2Fimg004.hc360.cn%2Fm8%2FM04%2FDE%2FDE%2FwKhQplZ-QteEBvsbAAAAADUkobU751.jpg"
+							mode="aspectFill"
+						></image>
+					</scroll-view> -->
+					<uni-list>
+						<uni-list-item title="我的实体店" @click="navTo('/pages/money/wallet')" thumb="/static/icon/img11.png"></uni-list-item>
+						<uni-list-item title="我的推广" @click="navTo('/pages/user/coupon')" thumb="/static/icon/img12.png"></uni-list-item>
+						<uni-list-item title="收货地址" @click="navTo('/pages/user/favorites')" thumb="/static/icon/img02.png"></uni-list-item>
+						<uni-list-item title="联系客服" @click="navTo('/pages/set/address')" thumb="/static/icon/img05.png"></uni-list-item>
+						<!-- <uni-list-item title="邀请好友" @click="navTo('/pages/user/shareQrCode')" thumb="/static/icon/img10.png"></uni-list-item> -->
+						<uni-list-item title="关于我们" @click="navTo('/pages/shareQrCode/index')" thumb="/static/icon/img09.png"></uni-list-item>
+					</uni-list>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+<script>
+import { mapState, mapMutations } from 'vuex';
+import uniList from '@/components/uni-list/uni-list.vue';
+import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+import { orderData, userinfo } from '@/api/user.js';
+import { saveUrl, interceptor } from '@/utils/loginUtils.js';
+let startY = 0,
+	moveY = 0,
+	pageAtTop = true;
+export default {
+	components: {
+		uniList,
+		uniListItem
+	},
+	data() {
+		return {
+			coverTransform: 'translateY(0px)',
+			coverTransition: '0s',
+			moving: false,
+			userDowm: 0, //卡片升级专属高度
+			userMaxDowm: 0 //卡片最高高度
+		};
+	},
+	onShow() {
+		// 判断是否已经登录
+		if (this.hasLogin) {
+			this.loadBaseData();
+		}
+	},
+	onReady() {
+		// 初始化获取页面宽度
+		uni.createSelectorQuery()
+			.select('.container')
+			.fields(
+				{
+					size: true
+				},
+				data => {
+					// 计算最多下拉的高度
+					this.userDowm = Math.floor((data.width / 750) * 185);
+					// 计算最大触发修改高度事件
+					this.userMaxDowm = Math.floor((data.width / 750) * 250);
+				}
+			)
+			.exec();
+	},
+	// #ifndef MP
+	// onNavigationBarButtonTap(e) {
+	// 	const index = e.index;
+	// 	if (index === 0) {
+	// 		this.navTo('/pages/set/set');
+	// 	} else if (index === 1) {
+	// 		// #ifdef APP-PLUS
+	// 		const pages = getCurrentPages();
+	// 		const page = pages[pages.length - 1];
+	// 		const currentWebview = page.$getAppWebview();
+	// 		currentWebview.hideTitleNViewButtonRedDot({
+	// 			index
+	// 		});
+	// 		// #endif
+	// 		uni.navigateTo({
+	// 			url: '/pages/user/notice'
+	// 		});
+	// 	}
+	// },
+	// #endif
+	computed: {
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+	},
+	methods: {
+		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+		// 加载初始数据
+		loadBaseData() {
+			userinfo({})
+				.then(({ data }) => {
+					this.setUserInfo(data);
+					// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
+					orderData({})
+						.then(({ data }) => {
+							this.setOrderInfo(data);
+						})
+						.catch(e => {
+							this.setOrderInfo({
+								complete_count: 0, //完成
+								received_count: 0, //待收货
+								unshipped_count: 0, //待发货
+								order_count: 0, //订单总数
+								unpaid_count: 0 //待付款
+							});
+						});
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		/**
+		 * 统一跳转接口,拦截未登录路由
+		 * navigator标签现在默认没有转场动画，所以用view
+		 */
+		navTo(url) {
+			if (!this.hasLogin) {
+				// 保存地址
+				saveUrl();
+				// 登录拦截
+				interceptor();
+			} else {
+				uni.navigateTo({
+					url
+				});
+			}
+		},
+
+		/**
+		 *  会员卡下拉和回弹
+		 *  1.关闭bounce避免ios端下拉冲突
+		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
+		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
+		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
+		 */
+		coverTouchstart(e) {
+			// console.log(e);
+			if (pageAtTop === false) {
+				return;
+			}
+
+			this.coverTransition = 'transform .1s linear';
+			startY = e.touches[0].clientY;
+		},
+		coverTouchmove(e) {
+			// console.log(e);
+			moveY = e.touches[0].clientY;
+			let moveDistance = moveY - startY;
+			let maxDowm = this.userMaxDowm;
+			let Dowm = this.userDowm;
+			if (moveDistance < 0) {
+				this.moving = false;
+				return;
+			}
+			this.moving = true;
+			if (moveDistance >= Dowm && moveDistance < maxDowm) {
+				moveDistance = Dowm;
+			}
+
+			if (moveDistance > 0 && moveDistance <= Dowm) {
+				this.coverTransform = `translateY(${moveDistance}px)`;
+			}
+		},
+		coverTouchend() {
+			if (this.moving === false) {
+				return;
+			}
+			this.moving = false;
+			this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
+			this.coverTransform = 'translateY(0px)';
+		}
+	}
+};
+</script>
+<style lang="scss">
+page {
+	height: 100%;
+	background-color: $page-color-base;
+}
+%flex-center {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+%section {
+	display: flex;
+	justify-content: space-around;
+	align-content: center;
+	background: #fff;
+	border-radius: 10rpx;
+}
+.container {
+	height: 100%;
+	background-color: #fff;
+}
+.content-box {
+	height: 100%;
+}
+.vheigh {
+	height: var(--status-bar-height);
+	background-color: $base-color;
+}
+.user-section {
+	height: 420rpx;
+	padding: 50rpx 0rpx 0 30rpx;
+	position: relative;
+	.bg {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		// z-index: 1;
+		background-color: $base-color;
+	}
+}
+.user-info-box {
+	height: 180rpx;
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	z-index: 1;
+	.detail {
+		height: 130rpx;
+		.portrait-box {
+			height: 100%;
+			.portrait {
+				width: 130rpx;
+				height: 100%;
+				border: 5rpx solid #fff;
+				border-radius: 50%;
+			}
+		}
+		.info-box {
+			margin-left: 20rpx;
+			line-height: 1.5;
+			.username {
+				font-size: $font-lg + 6rpx;
+				height: 100%;
+			}
+			.user-lv {
+				display: flex;
+				.lv-1 {
+					text-align: center;
+					width: 97rpx;
+					line-height: 32rpx;
+					border: 1px solid #FFFFFF;
+					border-radius: 8rpx;
+					font-size: 20rpx;
+					font-family: Source Han Sans CN;
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+				.lv-2, .lv-3{
+					width: 147rpx;
+					height: 32rpx;
+					image {
+						height: 100%;
+						width: 100%;
+					}
+				}
+			}
+		}
+	}
+	.config {
+		font-size: 48rpx;
+		height: 130rpx;
+		.setting {
+			margin-right: 51rpx;
+		}
+	}
+	.my-info {
+		width: 194rpx;
+		height: 64rpx;
+		background: #ffffff;
+		border-radius: 32rpx 0rpx 0rpx 32rpx;
+		justify-content: center;
+		image {
+			width: 30rpx;
+			height: 30rpx;
+			background-color: red;
+		}
+		.title {
+			padding-left: 9rpx;
+			font-size: 28rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #ff4c4c;
+		}
+	}
+}
+
+.vip-card-box {
+	display: flex;
+	flex-direction: column;
+	color: #f7d680;
+	height: 240rpx;
+	background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8));
+	border-radius: 16rpx 16rpx 0 0;
+	overflow: hidden;
+	position: relative;
+	padding: 20rpx 24rpx;
+	.card-bg {
+		position: absolute;
+		top: 20rpx;
+		right: 0;
+		width: 380rpx;
+		height: 260rpx;
+	}
+	.b-btn {
+		position: absolute;
+		right: 20rpx;
+		top: 16rpx;
+		width: 132rpx;
+		height: 40rpx;
+		text-align: center;
+		line-height: 40rpx;
+		font-size: 22rpx;
+		color: #36343c;
+		border-radius: 20px;
+		background: linear-gradient(left, #f9e6af, #ffd465);
+		z-index: 1;
+	}
+	.tit {
+		font-size: $font-base + 2rpx;
+		color: #f7d680;
+		margin-bottom: 28rpx;
+		.iconfont {
+			color: #f6e5a3;
+			margin-right: 16rpx;
+		}
+	}
+	.e-b {
+		font-size: $font-sm;
+		color: #d8cba9;
+		margin-top: 10rpx;
+	}
+}
+.cover-container {
+	background: $page-color-base;
+	margin-top: -150rpx;
+	padding: 0 30rpx;
+	position: relative;
+	background: #f5f5f5;
+	padding-bottom: 20rpx;
+	.arc {
+		position: absolute;
+		left: 0;
+		top: -34rpx;
+		width: 100%;
+		height: 36rpx;
+	}
+}
+.tj-sction {
+	@extend %section;
+	.tj-item {
+		@extend %flex-center;
+		flex-direction: column;
+		height: 140rpx;
+		font-size: $font-sm;
+		color: #75787d;
+	}
+	.num {
+		font-size: $font-lg;
+		color: $font-color-dark;
+		margin-bottom: 8rpx;
+	}
+}
+
+.item-box {
+	// width: 710rpx;
+	// height: 221rpx;
+	// background: #FFFFFF;
+	// box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	// border-radius: 20rpx;
+	// position: relative;
+	// top: -150rpx;
+	// left: 0;
+	// right: 0;
+	// margin: 0 auto -150rpx;
+	margin: 20rpx 0;
+	.box-title {
+		background-color: #fff;
+		line-height: 1;
+		// padding: 30rpx;
+		padding: 0 36rpx 0 35rpx;
+		height: 73rpx;
+		border-radius: 20rpx 20rpx 0 0;
+		.title {
+			font-weight: bold;
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+		}
+		.link {
+			font-size: $font-base - 2rpx;
+			color: $font-color-light;
+		}
+	}
+	.order-section {
+		height: 146rpx;
+		@extend %section;
+		// padding: 28rpx 0;
+		.order-item {
+			@extend %flex-center;
+			width: 120rpx;
+			height: 146rpx;
+			border-radius: 10rpx;
+			font-size: $font-sm;
+			color: $font-color-dark;
+		}
+		.iconfont {
+			font-size: 48rpx;
+			margin-bottom: 18rpx;
+			color: #fa436a;
+		}
+		.icon-shouhoutuikuan {
+			font-size: 44rpx;
+		}
+		.icon {
+			height: 50rpx;
+			width: 48rpx;
+			margin-bottom: 18rpx;
+			background-size: 100%;
+			background-repeat: no-repeat;
+			background-position: center;
+			.icon-img {
+				width: 100%;
+				height: 100%;
+			}
+		}
+		.icon-b {
+			height: 70rpx;
+			width: 70rpx;
+		}
+	}
+}
+
+.history-section {
+	// padding: 30rpx 0 0;
+	margin-top: 20rpx;
+	background: #fff;
+	border-radius: 10rpx;
+	.sec-header {
+		display: flex;
+		align-items: center;
+		font-size: $font-base;
+		color: $font-color-dark;
+		line-height: 40rpx;
+		margin-left: 30rpx;
+		padding-top: 30rpx;
+		.iconfont {
+			font-size: 44rpx;
+			color: $color-red;
+			margin-right: 16rpx;
+			line-height: 40rpx;
+		}
+	}
+	.h-list {
+		white-space: nowrap;
+		padding: 30rpx 30rpx 0;
+		.h-list-image {
+			display: inline-block;
+			width: 160rpx;
+			height: 160rpx;
+			margin-right: 20rpx;
+			border-radius: 10rpx;
+		}
+	}
+}
+.up-box {
+	margin: 21rpx auto;
+	width: 710rpx;
+	height: 90rpx;
+	background: linear-gradient(73deg, #FFFFFF 0%, #FFFBEB 0%, #FFF1DA 0%, #FED591 100%);
+	border-radius: 20rpx;
+}
+.item-box-b {
+	width: 710rpx;
+	height: 221rpx;
+	background: #FFFFFF;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.5);
+	border-radius: 20rpx;
+	position: relative;
+	top: -150rpx;
+	left: 0;
+	right: 0;
+	margin: 0 auto -150rpx;
+}
 </style>

uni.scss

@@ -4,7 +4,7 @@ $page-row-spacing: 30rpx;
 $page-color-base: #f8f8f8;//页面背景颜色
 $page-color-light: #f8f6fc;
 // 主题颜色
-$base-color: #5dbc7c;//项目颜色
+$base-color: #FF4C4C;//项目颜色
 $box-shadow-color:#5dbc7c;//阴影颜色
 $font-color:#5dbc7c;//字体颜色
 $font-color-spec: #5dbc7c;//可操作文字颜色
@@ -31,11 +31,11 @@ $uni-border-color:#ebeef5;
 $color-yellow: #fd5b23;
 $color-gray: #999999;
 $color-green: #5dbc7c;
-$color-red: #dd524d;
+$color-red: #FF4C4C;
 /* 图片加载中颜色 */
 $image-bg-color: #eee;
 /* 行为相关颜色 */
-$uni-color-primary: #5dbc7c;
+$uni-color-primary: #FF4C4C;
 $uni-color-success: #4cd964;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;