2312970463@qq.com 4 years ago
parent
commit
1cb4cee456
7 changed files with 800 additions and 808 deletions
  1. 8 6
      components/seckill/seckill.vue
  2. 18 18
      pages.json
  3. 151 229
      pages/index/index.vue
  4. 623 555
      pages/user/user.vue
  5. BIN
      static/img/lv02.png
  6. BIN
      static/img/lv03.png
  7. BIN
      static/img/lv04.png

+ 8 - 6
components/seckill/seckill.vue

@@ -151,7 +151,8 @@ export default {
 
 <style lang="scss">
 /* 秒杀专区 */
-.seckill-section {
+.seckill-section {
+	background-color: #fff;
 	padding: 4rpx 30rpx 24rpx;
 	.s-header {
 		display: flex;
@@ -210,7 +211,7 @@ export default {
 		background-color: white;
 		padding: 20rpx;
 		border-radius: 5rpx;
-		box-shadow: $box-shadow;
+		// box-shadow: $box-shadow;
 	}
 	.scoll-wrapper {
 		display: flex;
@@ -227,15 +228,16 @@ export default {
 			color: $font-color-light;
 		}
 		.floor-item {
-			width: 150rpx;
+			width: 207rpx;
 			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;
+				width: 207rpx;
+				height: 207rpx;
+				border-radius: 10rpx;
+				background-color: red;
 			}
 			.price {
 				color: $color-red;

+ 18 - 18
pages.json

@@ -16,24 +16,24 @@
 							"placeholder": "请输入关键字",
 							"disabled": true,
 							"placeholderColor": "#606266",
-							"align": "left"
-						},
-						"buttons": [{
-								"fontSrc": "/static/yticon.ttf",
-								"text": "\ue60d",
-								"fontSize": "26",
-								"color": "#303133",
-								"float": "left",
-								"background": "rgba(0,0,0,0)"
-							},
-							{
-								"fontSrc": "/static/yticon.ttf",
-								"text": "\ue744",
-								"fontSize": "27",
-								"color": "#303133",
-								"background": "rgba(0,0,0,0)"
-							}
-						]
+							"align": "center"
+						}
+						// "buttons": [{
+						// 		"fontSrc": "/static/yticon.ttf",
+						// 		"text": "\ue60d",
+						// 		"fontSize": "26",
+						// 		"color": "#303133",
+						// 		"float": "left",
+						// 		"background": "rgba(0,0,0,0)"
+						// 	},
+						// 	{
+						// 		"fontSrc": "/static/yticon.ttf",
+						// 		"text": "\ue744",
+						// 		"fontSize": "27",
+						// 		"color": "#303133",
+						// 		"background": "rgba(0,0,0,0)"
+						// 	}
+						// ]
 					}
 				},
 				// #endif

+ 151 - 229
pages/index/index.vue

@@ -20,39 +20,38 @@
 				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="bannerNavToUrl(item)"><image :src="item.pic" /></swiper-item>
 			</swiper>
 			<!-- 自定义swiper指示器 -->
-			<view class="swiper-dots">
+			<!-- <view class="swiper-dots">
 				<text class="num">{{ swiperCurrent + 1 }}</text>
 				<text class="sign">/</text>
 				<text class="num">{{ swiperLength }}</text>
-			</view>
+			</view> -->
 		</view>
 		<!-- 分类 -->
 		<view class="cate-section">
 			<view class="cate-item">
 				<image src="/static/icon/c3.png"></image>
-				<text>联盟礼包</text>
+				<text>全部分类</text>
 			</view>
 			<navigator url="/pages/product/groupBooking/index">
 				<view class="cate-item">
 					<image src="/static/icon/c5.png"></image>
-					<text>超值拼团</text>
+					<text>线下门店</text>
 				</view>
 			</navigator>
 			<navigator url="/pages/product/seckill">
 				<view class="cate-item">
 					<image src="/static/icon/c7.png"></image>
-					<text>限时秒杀</text>
+					<text>施工产品</text>
 				</view>
 			</navigator>
 			<navigator url="/pages/index/sign">
 				<view class="cate-item">
 					<image src="/static/icon/c8.png"></image>
-					<text>每日签到</text>
+					<text>分享有礼</text>
 				</view>
 			</navigator>
 		</view>
-		
-		<view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view>
+		<!-- <view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view> -->
 		<!-- 可领取优惠券 -->
 		<!-- <scroll-view class="coupon-box clamp" :scroll-x="true">
 			<view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
@@ -84,121 +83,14 @@
 
 		<!-- 秒杀楼层 -->
 		<seckill></seckill>
-		<!-- 砍价 -->
-		<view class="hot-goods">
-			<view class="hot-headers flex-upDown-center">
-				<!-- <image class="img" src="../../static/img/img44.png"></image> -->
-				<view class="hot-title">超值砍价</view>
-				<view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
-			</view>
-			<view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
-				<view class="hot-produce">
-					<view class="produce-image"><image :src="baritem.image"></image></view>
-					<view class="produce-content">
-						<view class="produce-price1 ">
-							<view class="produce-name line2">{{ baritem.title }}</view>
-							<!-- <view class="produce-info">
-								已抢
-								<text style="color: #FF383E">{{ baritem.sales }}</text>
-								箱/仅剩
-								<text style="color:#FF383E">{{ baritem.stock }}</text>
-								箱
-							</view> -->
-							<view class="produce-center">
-								<view class="kanjia_word">
-									<view class="word-1">原价:¥{{ baritem.price }}</view>
-									<view class="word-2">
-										砍后价
-										<text style="font-size: 24rpx;">¥</text>
-										<text style="font-size: 36rpx;">{{ baritem.min_price }}</text>
-									</view>
-								</view>
-								<view
-									class="kanjia_button flex-center"
-									@tap.stop="openSubscribe('/pages/activity/goods_bargain_details/index?id=' + baritem.id + '&bargain=' + userInfo.uid)"
-								>
-									<view>查看详情</view>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 拼团楼层 -->
-
-		<view class="recommend flex">
-			<view class="recommend_list" @click="change(ls.id)" v-for="ls in recommend">
-				<view class="re_title" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_title }}</view>
-				<view class="re_name" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_name }}</view>
-				<image class="selected_icon" v-bind:class="{ active: ls.id == checkid }" src="/static/img/img04.png"></image>
+		<!-- 附近门店 -->
+		<view class="store-wrapper">
+			<view class="title-wrapper flex">
+				<image src="" mode=""></image>
+				<view class="">附近门店</view>
+				<view class="title-b">门店好物随心购</view>
 			</view>
 		</view>
-		<swiper id="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="checkid">
-			<swiper-item>
-				<!-- <scroll-view scroll-y="true" class="list-box-h"> -->
-				<view class="guess-section">
-					<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-						<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-						<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-						<view class="cmy-hr"></view>
-						<view class="price margin-c-20 flex">
-							<view>
-								<text class="font-size-sm ">¥</text>
-								{{ item.price }}
-							</view>
-							<view class="font-size-sm">
-								<text class="font-color-gray">{{ item.sales }}人购买</text>
-							</view>
-						</view>
-					</view>
-				</view>
-				<!-- </scroll-view> -->
-			</swiper-item>
-			<swiper-item>
-				<scroll-view scroll-y="true" class="list-box-h">
-					<view class="guess-section">
-						<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-							<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-							<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-							<view class="cmy-hr"></view>
-							<view class="price margin-c-20 flex">
-								<view>
-									<text class="font-size-sm ">¥</text>
-									{{ item.price }}
-								</view>
-								<view class="font-size-sm">
-									<text class="font-color-gray">{{ item.sales }}人购买</text>
-								</view>
-							</view>
-						</view>
-					</view>
-				</scroll-view>
-			</swiper-item>
-			<swiper-item>
-				<scroll-view scroll-y="true">
-					<view class="guess-section">
-						<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
-							<navigator :url="item.link">
-								<view class="image-wrappe r"><image :src="item.image" mode="scaleToFill"></image></view>
-								<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-								<view class="cmy-hr"></view>
-								<view class="price margin-c-20 flex">
-									<view>
-										<text class="font-size-sm ">¥</text>
-										{{ item.price }}
-									</view>
-									<view class="font-size-sm">
-										<text class="font-color-gray">库存{{ item.stock + item.unit_name }}</text>
-									</view>
-								</view>
-							</navigator>
-						</view>
-					</view>
-				</scroll-view>
-			</swiper-item>
-		</swiper>
-
 		<!-- 精品 商品 -->
 		<view class="f-header m-t">
 			<view class="f-left-icon"></view>
@@ -422,7 +314,7 @@ export default {
 	},
 	computed: {
 		...mapState(['loginInterceptor']),
-		...mapState('user', ['hasLogin','userInfo'])
+		...mapState('user', ['hasLogin', 'userInfo'])
 	},
 	onLoad: function(option) {
 		// #ifndef MP
@@ -485,7 +377,7 @@ export default {
 		navToDetailPages(item) {
 			let id = item.product_id;
 			//let type = 2;
-		
+
 			uni.navigateTo({
 				url: '/pages/product/product?id=' + id
 			});
@@ -515,7 +407,7 @@ export default {
 		},
 		getBargainList() {
 			let that = this;
-		
+
 			getBargainList({
 				page: that.page,
 				limit: that.limit
@@ -668,129 +560,129 @@ export default {
 	}
 }
 // 热销商品
-	.hot-goods {
-		margin: 0 25rpx;
-		padding: 5rpx 25rpx 30rpx 25rpx;
-		background-color: #fff;
-		border-radius: 10rpx;
-		.hot-headers {
-			margin: 25rpx 0;
-			width: 100%;
-			display: flex;
-			.img {
-				width: 32rpx;
-				height: 32rpx;
-				margin-right: 10rpx;
-			}
-			.hot-title {
-				font-size: 30rpx;
-				margin-right: 15rpx;
-			}
-			.more {
-				line-height: 1;
-				padding: 5rpx 10rpx 5rpx 15rpx;
-				text-align: center;
-				font-size: 20rpx;
-				border-radius: 15rpx;
-				color: #ffffff;
-				background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
-				image {
-					width: 20rpx;
-					height: 20rpx;
-				}
-			}
+.hot-goods {
+	margin: 0 25rpx;
+	padding: 5rpx 25rpx 30rpx 25rpx;
+	background-color: #fff;
+	border-radius: 10rpx;
+	.hot-headers {
+		margin: 25rpx 0;
+		width: 100%;
+		display: flex;
+		.img {
+			width: 32rpx;
+			height: 32rpx;
+			margin-right: 10rpx;
+		}
+		.hot-title {
+			font-size: 30rpx;
+			margin-right: 15rpx;
 		}
-		.hot-lists {
+		.more {
 			line-height: 1;
+			padding: 5rpx 10rpx 5rpx 15rpx;
+			text-align: center;
+			font-size: 20rpx;
+			border-radius: 15rpx;
+			color: #ffffff;
+			background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
+			image {
+				width: 20rpx;
+				height: 20rpx;
+			}
+		}
+	}
+	.hot-lists {
+		line-height: 1;
+		display: flex;
+		.hot-produce {
+			width: 100%;
+			height: 260rpx;
+			border-top: 1px solid #f0f0f0;
 			display: flex;
-			.hot-produce {
-				width: 100%;
-				height: 260rpx;
-				border-top: 1px solid #f0f0f0;
-				display: flex;
-				padding-top: 28rpx;
-				.produce-image {
+			padding-top: 28rpx;
+			.produce-image {
+				width: 200rpx;
+				height: 200rpx;
+				image {
 					width: 200rpx;
 					height: 200rpx;
-					image {
-						width: 200rpx;
-						height: 200rpx;
-						border: 1px solid #f0f0f0;
-					}
+					border: 1px solid #f0f0f0;
 				}
-				.produce-content {
-					// flex-direction: column;
-					margin-left: 30rpx;
-					height: 200rpx;
-					position: relative;
-					width: calc(100% - 200rpx - 30rpx);
-					.produce-name {
-						font-size: 28rpx;
-						font-weight: bold;
-						line-height: 35rpx;
-						color: #343434;
+			}
+			.produce-content {
+				// flex-direction: column;
+				margin-left: 30rpx;
+				height: 200rpx;
+				position: relative;
+				width: calc(100% - 200rpx - 30rpx);
+				.produce-name {
+					font-size: 28rpx;
+					font-weight: bold;
+					line-height: 35rpx;
+					color: #343434;
+				}
+				.produce-info {
+					font-size: 20rpx;
+					margin-top: 25rpx;
+				}
+				.produce-price {
+					display: flex;
+					align-items: flex-end;
+					color: #ff383e;
+					font-size: 24rpx;
+					margin-top: 70rpx;
+					font-weight: bold;
+					text {
+						font-size: 36rpx;
 					}
-					.produce-info {
-						font-size: 20rpx;
-						margin-top: 25rpx;
+					.produce-price-1 {
+						font-size: 22rpx;
+						font-weight: 500;
+						text-decoration: line-through;
+						color: rgba(170, 170, 170, 1);
+						margin-left: 20rpx;
 					}
-					.produce-price {
+				}
+				.produce-price1 {
+					height: 100%;
+					letter-spacing: 3rpx;
+					color: #ff383e;
+					font-size: 24rpx;
+					font-weight: bold;
+					.produce-center {
+						width: 100%;
+						position: absolute;
+						bottom: 0;
 						display: flex;
-						align-items: flex-end;
-						color: #ff383e;
-						font-size: 24rpx;
-						margin-top: 70rpx;
-						font-weight: bold;
-						text {
-							font-size: 36rpx;
-						}
-						.produce-price-1 {
-							font-size: 22rpx;
-							font-weight: 500;
-							text-decoration: line-through;
-							color: rgba(170, 170, 170, 1);
-							margin-left: 20rpx;
-						}
-					}
-					.produce-price1 {
-						height: 100%;
-						letter-spacing: 3rpx;
-						color: #ff383e;
-						font-size: 24rpx;
-						font-weight: bold;
-						.produce-center {
-							width: 100%;
-							position: absolute;
-							bottom: 0;
-							display: flex;
-							justify-content: space-between;
-							align-items: center;
-							.kanjia_word {
-								.word-1 {
-									font-size: 22rpx;
-									color: #666666;
-								}
-								.word-2 {
-									font-size: 28rpx;
-									color: #ff383e;
-									margin-top: 10rpx;
-								}
+						justify-content: space-between;
+						align-items: center;
+						.kanjia_word {
+							.word-1 {
+								font-size: 22rpx;
+								color: #666666;
 							}
-							.kanjia_button {
-								height: 50rpx;
-								width: 150rpx;
-								border-radius: 25rpx;
-								font-size: 26rpx;
-								font-weight: 500;
+							.word-2 {
+								font-size: 28rpx;
 								color: #ff383e;
-								border: 1px solid rgba(255, 56, 62, 1);
+								margin-top: 10rpx;
 							}
 						}
+						.kanjia_button {
+							height: 50rpx;
+							width: 150rpx;
+							border-radius: 25rpx;
+							font-size: 26rpx;
+							font-weight: 500;
+							color: #ff383e;
+							border: 1px solid rgba(255, 56, 62, 1);
+						}
 					}
 				}
 			}
 		}
 	}
+}
 /* #ifdef MP */
 .mp-height {
 	height: 44px;
@@ -930,6 +822,8 @@ page {
 	align-items: center;
 	flex-wrap: wrap;
 	padding: 30rpx 22rpx;
+	background-color: #fff;
+	margin-bottom: 20rpx;
 	.cate-item {
 		display: flex;
 		flex-direction: column;
@@ -1241,4 +1135,32 @@ page {
 		color: $font-color-light;
 	}
 }
+.store-wrapper {
+	.title-wrapper {
+		justify-content: flex-start;
+		align-items: center;
+		height: 86rpx;
+		line-height: 86rpx;
+		image {
+			width: 36rpx;
+			height: 36rpx;
+			background: linear-gradient(43deg, #FFC063, #FFA163);
+			border-radius: 50%;
+		}
+		view {
+			padding-left: 10rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #242424;
+		}
+		.title-b {
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #8B8B8B;
+		}
+		
+	}
+}
 </style>

+ 623 - 555
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>

BIN
static/img/lv02.png


BIN
static/img/lv03.png


BIN
static/img/lv04.png