Browse Source

解决积分商城数据注销和线上订货缩短加载时间

qukaidi 4 years ago
parent
commit
fc241968c7
2 changed files with 292 additions and 229 deletions
  1. 46 27
      pages/home/inline-shop/inline_shop.vue
  2. 246 202
      pages/home/integral-mall/integral_mall.vue

+ 46 - 27
pages/home/inline-shop/inline_shop.vue

@@ -6,7 +6,7 @@
 			<u-icon @click="handleGo('msg')" name="chat-fill" label="消息" size="36" label-pos="bottom" :margin-right="16"
 			 label-color="#ffffff" :custom-style="iconCustomStyle"></u-icon>
 		</u-navbar>
-		<u-sticky >
+		<u-sticky :enable="enable1">
 			<view class="filter-wrap wrap-flex">
 				<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="handleGo('mallMenu1')">全部</u-button>
 				<u-dropdown style="position: static;">
@@ -20,18 +20,18 @@
 		</u-sticky>
 		<scroll-view scroll-y="true" @scrolltolower="scrollBottom" class="scroll-view-container">
 			<view class="page-box">
-				<u-waterfall v-model="goodsList" ref="uWaterfall">
+				<u-waterfall v-model="goodsList" add-time="50">
 					<template v-slot:left="{leftList}">
 						<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="handleGoDetails">
 							<!-- 警告:微信小程序中需要hx2.8.11版本才支持在template中结合其他组件,比如下方的lazy-load组件 -->
-							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+							<u-lazy-load threshold="-200" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
 							<view class="demo-title">
 								{{item.title}}
 							</view>
 							<!-- <view class="demo-price">
 								{{item.price}}元
 							</view> -->
-						<!-- 	<view class="demo-tag">
+							<!-- 	<view class="demo-tag">
 								<view class="demo-tag-owner">
 									自营
 								</view>
@@ -42,12 +42,14 @@
 							<view class="demo-shop">
 								库存:{{item.count}}
 							</view>
-							<view class="shopping-car"><u-icon :custom-style="iconCustomStyleCar"  color="#ffffff" name="car"></u-icon></view>
+							<view class="shopping-car">
+								<u-icon :custom-style="iconCustomStyleCar" color="#ffffff" name="car"></u-icon>
+							</view>
 						</view>
 					</template>
 					<template v-slot:right="{rightList}">
 						<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="handleGoDetails">
-							<u-lazy-load threshold="-450" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
+							<u-lazy-load threshold="-200" border-radius="10" :image="item.image" :index="index"></u-lazy-load>
 							<view class="demo-title">
 								{{item.title}}
 							</view>
@@ -65,14 +67,19 @@
 							<view class="demo-shop">
 								库存:{{item.count}}
 							</view>
-							<view class="shopping-car"><u-icon :custom-style="iconCustomStyleCar" name="car" color="#ffffff"></u-icon></view>
+							<view class="shopping-car">
+								<u-icon :custom-style="iconCustomStyleCar" name="car" color="#ffffff"></u-icon>
+							</view>
 						</view>
 					</template>
 				</u-waterfall>
 				<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
 			</view>
 		</scroll-view>
-		<view id="shopping-car" @click="handleGoCar"><u-icon :custom-style="iconCustomStyleCarFixed" size="48" name="car" color="#9999999"></u-icon><u-badge :offset="[-8,-8]" :count="goodsCounts" type="error"></u-badge></view>
+		<view id="shopping-car" @click="handleGoCar">
+			<u-icon :custom-style="iconCustomStyleCarFixed" size="48" name="car" color="#9999999"></u-icon>
+			<u-badge :offset="[-8,-8]" :count="goodsCounts" type="error"></u-badge>
+		</view>
 		<u-popup v-model="showFilterPopup" mode="right" width="60%">
 			<view class="filter-title">筛选</view>
 			<block v-for="(item,index) in tabbar" :key="index">
@@ -121,6 +128,10 @@
 				buttonCustomStyle: {
 					border: "none"
 				},
+				loadStatus: 'loadmore',
+				goodsCounts: 99, //购物车商品数
+				goodsList: [],
+				enable1: true,
 				keyword: "",
 				allValue: "",
 				brandValue: "",
@@ -152,9 +163,6 @@
 						},
 					]
 				}],
-				loadStatus: 'loadmore',
-				goodsCounts: 99,//购物车商品数
-				goodsList: [],
 				list: [{
 						price: 35,
 						title: '175/70R14 88T XL SH08 BGSL',
@@ -221,23 +229,31 @@
 						count: '100',
 						image: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
 					},
-				]
+				],
 			}
 		},
+		onShow() {
+			this.enable1 = true
+		},
+		onHide() {
+			this.enable1 = false
+		},
 		onLoad() {
 			this.addRandomData();
 		},
+		onReachBottom() {
+			this.scrollBottom()
+		},
 		methods: {
-			scrollBottom: function(){
-				console.log("到底了")
+			scrollBottom() {
 				this.loadStatus = 'loading';
 				// 模拟数据加载
 				setTimeout(() => {
 					this.addRandomData();
-					this.loadStatus = 'loadmore';
-				}, 1000)
+					this.loadStatus = 'loadmore';			
+				}, 100)
 			},
-			handleGo: function(value) {
+			handleGo(value) {
 				var urlStr = ""
 				switch (value) {
 					case "msg":
@@ -254,15 +270,14 @@
 					url: urlStr
 				});
 			},
-			handleGoDetails: function(){
-				uni.navigateTo({
-					url: "/pages/home/inline-shop/inline_shop_details"
+			handleGoDetails() {
+				this.$u.route({
+					url: 'pages/home/inline-shop/inline_shop_details',
 				})
 			},
-			handleGoCar: function(){
-				console.log("进入购物车")
-				uni.navigateTo({
-					url: "/pages/home/inline-shop/inline_shop_car"
+			handleGoCar() {
+				this.$u.route({
+					url: 'pages/home/inline-shop/inline_shop_car',
 				})
 			},
 			addRandomData() {
@@ -329,10 +344,12 @@
 		background: #f6f6f6;
 		padding: 8rpx;
 	}
-	.scroll-view-container{
+
+	.scroll-view-container {
 		width: 100%;
 		height: calc(100vh - 176rpx);
 	}
+
 	.demo-warter {
 		border-radius: 8px;
 		margin: 5px;
@@ -398,12 +415,14 @@
 		color: $u-tips-color;
 		margin-top: 5px;
 	}
-	.shopping-car{
+
+	.shopping-car {
 		position: absolute;
 		bottom: 4rpx;
 		right: 16rpx;
 	}
-	#shopping-car{
+
+	#shopping-car {
 		position: fixed;
 		z-index: 9999;
 		right: 26rpx;

+ 246 - 202
pages/home/integral-mall/integral_mall.vue

@@ -2,7 +2,7 @@
 	<view>
 		<view class="wrap">
 			<!-- 积分商城 -->
-			<u-sticky>
+			<u-sticky :enable="enable2">
 				<view class="filter-wrap wrap-flex">
 					<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="handleGo('mallMenu1')">精选</u-button>
 					<u-dropdown style="position: static;">
@@ -11,18 +11,21 @@
 					<u-button :custom-style="buttonCustomStyle" :hair-line="false" hover-class="none" @click="showFilterPopup=true">分类
 						<u-icon name="grid"></u-icon>
 					</u-button>
-					<u-search placeholder="请输入商品名称或种类" :animation="true" :style="inputCustomStyle" :show-action="false" v-model="keyword" @focus="inputFocus" @blur="inputBlur"></u-search>
+					<u-search placeholder="请输入商品名称或种类" :animation="true" :style="inputCustomStyle" :show-action="false" v-model="keyword"
+					 @focus="inputFocus" @blur="inputBlur"></u-search>
 				</view>
 			</u-sticky>
 			<scroll-view scroll-y @scrolltolower="scrollBottom" class="scroll-view-container">
 				<view class="page-box">
-					<view class="order" >
+					<view class="order">
 						<view class="item" v-for="(item, index) in goodsList" :key="index" @click="handleGoDetails">
-							<view class="left"><image :src="item.goodsUrl" mode="aspectFill"></image></view>
+							<view class="left">
+								<image :src="item.goodsUrl" mode="aspectFill"></image>
+							</view>
 							<view class="content">
 								<view class="title u-line-2">{{ item.title }}</view>
 								<view class="type">{{ item.type }}</view>
-								<!-- <view class="delivery-time">发货时间 {{ item.deliveryTime }}</view> -->
+
 								<view class="price-row">
 									<view class="price">
 										{{ item.price }}积分
@@ -34,8 +37,11 @@
 					</view>
 					<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
 				</view>
-			</scroll-view>	
-			<view id="shopping-car" @click="handleGoCar"><u-icon :custom-style="iconCustomStyleCarFixed" size="48" name="car" color="#9999999"></u-icon><u-badge :offset="[-8,-8]" :count="goodsCounts" type="error"></u-badge></view>
+			</scroll-view>
+			<view id="shopping-car" @click="handleGoCar">
+				<u-icon :custom-style="iconCustomStyleCarFixed" size="48" name="car" color="#9999999"></u-icon>
+				<u-badge :offset="[-8,-8]" :count="goodsCounts" type="error"></u-badge>
+			</view>
 			<u-popup v-model="showFilterPopup" mode="right" width="60%">
 				<view class="filter-title">分类</view>
 				<block v-for="(item,index) in tabbar" :key="index">
@@ -60,170 +66,176 @@
 </template>
 
 <script>
-export default {
-	data() {
-		return {
-			buttonCustomStyle: {
-				border: "none"
-			},
-			brandValue: "",
-			brandOptions: [{
-				label: "赛轮",
-				value: "SAILUN"
-			}, {
-				label: "金宇",
-				value: "jinyu"
-			}],
-			keyword: "",
-			inputCustomStyle: {},
-			iconCustomStyleCarFixed: {
-				background: "#ffffff",
-				padding: "16rpx",
-				borderRadius: "50%",
-				boxShadow: "0px 1px 12px 0px rgba(116, 116, 116, 0.6)"
-			},
-			goodsCounts: 100,
-			showFilterPopup: false,
-			tabbar: [{
-				"name": "品牌",
-				"foods": [{
-						"value": "赛轮",
-						"label": "SAILUN",
+	export default {
+		data() {
+			return {
+				buttonCustomStyle: {
+					border: "none"
+				},
+				brandValue: "",
+				brandOptions: [{
+					label: "赛轮",
+					value: "SAILUN"
+				}, {
+					label: "金宇",
+					value: "jinyu"
+				}],
+				keyword: "",
+				inputCustomStyle: {},
+				iconCustomStyleCarFixed: {
+					background: "#ffffff",
+					padding: "16rpx",
+					borderRadius: "50%",
+					boxShadow: "0px 1px 12px 0px rgba(116, 116, 116, 0.6)"
+				},
+				goodsCounts: 100,
+				showFilterPopup: false,
+				tabbar: [{
+					"name": "品牌",
+					"foods": [{
+							"value": "赛轮",
+							"label": "SAILUN",
+						},
+						{
+							"value": "金宇",
+							"label": "jinyu",
+						},
+					]
+				}],
+				loadStatus: "loadmore",
+
+				goodsList: [],
+				list: [{
+						goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
+						title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
+						type: '胎动品牌;修补类型;普通积分',
+						deliveryTime: '付款后30天内发货',
+						price: '348.58',
+						number: 2
 					},
 					{
-						"value": "金宇",
-						"label": "jinyu",
+						goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
+						title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
+						type: '胎动品牌;修补类型;普通积分',
+						deliveryTime: '付款后30天内发货',
+						price: '135.00',
+						number: 1
 					},
-				]
-			}],
-			loadStatus: "loadmore",
-			
-			goodsList: [],
-			list: [
-				{
-					goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
-					title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
-					type: '胎动品牌;修补类型;普通积分',
-					deliveryTime: '付款后30天内发货',
-					price: '348.58',
-					number: 2
-				},
-				{
-					goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/47645/22/6120/140457/5d3d17deEec9f8e8d/3687ff03ca89b48c.jpg',
-					title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
-					type: '胎动品牌;修补类型;普通积分',
-					deliveryTime: '付款后30天内发货',
-					price: '135.00',
-					number: 1
-				},
-				{
-					goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
-					title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
-					type: '胎动品牌;修补类型;普通积分',
-					deliveryTime: '付款后7天内发货',
-					price: '128.05',
-					number: 1
-				},
-				{
-					goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
-					title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
-					type: '胎动品牌;修补类型;普通积分',
-					deliveryTime: '保质5年',
-					price: '1998',
-					number: 3
-				},
-				{
-					goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
-					title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
-					type: '胎动品牌;修补类型;普通积分',
-					deliveryTime: '保质5年',
-					price: '2354',
-					number: 1
-				},
-				{
-					goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
-					title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
-					type: '胎动品牌;修补类型;普通积分',
-					deliveryTime: '珍藏10年好酒',
-					price: '1543',
-					number: 3
-				},
-				{
-					goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
-					title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
-					type: '胎动品牌;修补类型;普通积分',
-					deliveryTime: '口感好',
-					price: '120',
-					number: 1
-				},
-				{
-					goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
-					title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
-					type: '胎动品牌;修补类型;普通积分',
-					deliveryTime: '使用方便',
-					price: '451',
-					number: 9
-				}
-			]
-		};
-	},
-	onLoad() {
-		this.getDataList();
-	},
-	computed: {
-		// 价格小数
-		priceDecimal() {
-			return val => {
-				if (val !== parseInt(val)) return val.slice(-2);
-				else return '00';
-			};
-		},
-		// 价格整数
-		priceInt() {
-			return val => {
-				if (val !== parseInt(val)) return val.split('.')[0];
-				else return val;
-			};
-		}
-	},
-	methods: {
-		inputFocus: function(){
-			console.log(111);
-			this.inputCustomStyle = {
-				position: "absolute",
-				zIndex: "100",
-				width: "98%",
-				margin: "6rpx 1%"
+					{
+						goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t1/88990/24/4208/105799/5de4c6e9E24bc09d0/f810effb14c9c13a.jpg',
+						title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
+						type: '胎动品牌;修补类型;普通积分',
+						deliveryTime: '付款后7天内发货',
+						price: '128.05',
+						number: 1
+					},
+					{
+						goodsUrl: 'https://img12.360buyimg.com/n7/jfs/t1/93698/23/4500/114562/5de713dfEfc997085/e8deaa979909851d.jpg',
+						title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
+						type: '胎动品牌;修补类型;普通积分',
+						deliveryTime: '保质5年',
+						price: '1998',
+						number: 3
+					},
+					{
+						goodsUrl: 'https://img11.360buyimg.com/n7/jfs/t16642/126/2693663818/450163/6879e8ce/5b06d93bN6305bd94.png',
+						title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
+						type: '胎动品牌;修补类型;普通积分',
+						deliveryTime: '保质5年',
+						price: '2354',
+						number: 1
+					},
+					{
+						goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+						title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
+						type: '胎动品牌;修补类型;普通积分',
+						deliveryTime: '珍藏10年好酒',
+						price: '1543',
+						number: 3
+					},
+					{
+						goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+						title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
+						type: '胎动品牌;修补类型;普通积分',
+						deliveryTime: '口感好',
+						price: '120',
+						number: 1
+					},
+					{
+						goodsUrl: 'https://img10.360buyimg.com/n7/jfs/t1/68753/35/2229/118427/5d089fb7Ee5b93887/2e3bbc7fec247fdc.jpg',
+						title: '【胎动】T-M3蘑菇钉,24支/盒, 3mm ',
+						type: '胎动品牌;修补类型;普通积分',
+						deliveryTime: '使用方便',
+						price: '451',
+						number: 9
+					}
+				],
+				enable2: true
 			};
 		},
-		inputBlur: function(){
-			this.inputCustomStyle = {};
-		},
-		scrollBottom: function(v){
-			console.log(v);
-			this.loadStatus = 'loading';
-			// 模拟数据加载
-			setTimeout(() => {
-				this.getDataList();
-				this.loadStatus = 'loadmore';
-			}, 1000)
+		onLoad() {
+			this.getDataList();
 		},
-		getDataList: function(){
-			this.goodsList = this.goodsList.concat(this.list)
+		onShow() {
+			this.enable2 = true
 		},
-		handleGoCar: function(){
-			console.log("进入购物车")
-			uni.navigateTo({
-				url: "/pages/home/integral-mall/integral_mall_car"
-			})
+		onHide() {
+			this.enable2 = false
 		},
-		handleGoDetails: function(){
-			uni.navigateTo({
-				url: "/pages/home/integral-mall/integral_mall_goods_details"
-			})
+		computed: {
+			// 价格小数
+			priceDecimal() {
+				return val => {
+					if (val !== parseInt(val)) return val.slice(-2);
+					else return '00';
+				};
+			},
+			// 价格整数
+			priceInt() {
+				return val => {
+					if (val !== parseInt(val)) return val.split('.')[0];
+					else return val;
+				};
+			}
 		},
-	}
-};
+		methods: {
+			inputFocus() {
+				console.log(111);
+				this.inputCustomStyle = {
+					position: "absolute",
+					zIndex: "100",
+					width: "98%",
+					margin: "6rpx 1%"
+				};
+			},
+			inputBlur() {
+				this.inputCustomStyle = {};
+			},
+			scrollBottom(v) {
+				console.log(v);
+				this.loadStatus = 'loading';
+				// 模拟数据加载
+				setTimeout(() => {
+					this.getDataList();
+					this.loadStatus = 'loadmore';
+				}, 1000)
+			},
+			getDataList() {
+				this.goodsList = this.goodsList.concat(this.list)
+			},
+			handleGoCar() {
+				console.log("进入购物车")
+				this.$u.route({
+					url: 'pages/home/integral-mall/integral_mall_car',
+				})
+			},
+			handleGoDetails() {
+				this.$u.route({
+					url: 'pages/home/integral-mall/integral_mall_goods_details',
+				})
+			},
+		}
+	};
 </script>
 
 <style lang="scss" scoped>
@@ -232,46 +244,50 @@ export default {
 		height: 100%;
 		background-color: #f2f2f2;
 	}
+
 	/* #endif */
 	.wrap-flex {
 		display: flex;
 	}
-	.scroll-view-container{
+
+	.scroll-view-container {
 		width: 100%;
 		height: calc(100% - 88rpx);
 	}
+
 	.filter-title {
 		background: #F6F6F6;
 		padding: 16rpx;
 	}
-	
+
 	.class-item {
 		margin-bottom: 30rpx;
 		background-color: #fff;
 		padding: 16rpx;
 		border-radius: 8rpx;
 	}
-	
+
 	.class-item:last-child {
 		min-height: 100vh;
 	}
-	
+
 	.item-title {
 		font-size: 26rpx;
 		color: $u-main-color;
 		font-weight: bold;
 	}
-	
+
 	.item-menu-name {
 		font-weight: normal;
 		font-size: 24rpx;
 		color: $u-main-color;
 	}
-	
+
 	.item-container {
 		display: flex;
 		flex-wrap: wrap;
 	}
+
 	.thumb-box {
 		width: 33.333333%;
 		display: flex;
@@ -282,7 +298,8 @@ export default {
 		background: #f6f6f6;
 		padding: 8rpx;
 	}
-.order {
+
+	.order {
 		width: 710rpx;
 		background-color: #ffffff;
 		margin: 20rpx auto;
@@ -290,56 +307,69 @@ export default {
 		box-sizing: border-box;
 		padding: 20rpx;
 		font-size: 28rpx;
+
 		.top {
 			display: flex;
 			justify-content: space-between;
+
 			.left {
 				display: flex;
 				align-items: center;
+
 				.store {
 					margin: 0 10rpx;
 					font-size: 32rpx;
 					font-weight: bold;
 				}
 			}
+
 			.right {
 				color: $u-type-warning-dark;
 			}
 		}
+
 		.item {
 			display: flex;
 			margin: 20rpx 0 0;
+
 			.left {
 				margin-right: 20rpx;
+
 				image {
 					width: 200rpx;
 					height: 200rpx;
 					border-radius: 10rpx;
 				}
 			}
+
 			.content {
 				.title {
 					font-size: 28rpx;
 					line-height: 50rpx;
 				}
+
 				.type {
 					margin: 10rpx 0;
 					font-size: 24rpx;
 					color: $u-tips-color;
 				}
+
 				.delivery-time {
 					color: #e5d001;
 					font-size: 24rpx;
 				}
-				.price-row{
+
+				.price-row {
 					display: flex;
 					justify-content: space-between;
 					margin: 10rpx 0;
 					font-size: 26rpx;
-					.price{
+
+					.price {
 						color: #FF0000;
 					}
-					.exchange{
+
+					.exchange {
 						background: #0094FE;
 						color: #FFFFFF;
 						padding: 4rpx 16rpx;
@@ -347,34 +377,41 @@ export default {
 					}
 				}
 			}
+
 			.right {
 				margin-left: 10rpx;
 				padding-top: 20rpx;
 				text-align: right;
+
 				.decimal {
 					font-size: 24rpx;
 					margin-top: 4rpx;
 				}
+
 				.number {
 					color: $u-tips-color;
 					font-size: 24rpx;
 				}
 			}
 		}
+
 		.total {
 			margin-top: 20rpx;
 			text-align: right;
 			font-size: 24rpx;
+
 			.total-price {
 				font-size: 32rpx;
 			}
 		}
+
 		.bottom {
 			display: flex;
 			margin-top: 40rpx;
 			padding: 0 10rpx;
 			justify-content: space-between;
 			align-items: center;
+
 			.btn {
 				line-height: 52rpx;
 				width: 160rpx;
@@ -384,44 +421,51 @@ export default {
 				text-align: center;
 				color: $u-type-info-dark;
 			}
+
 			.evaluate {
 				color: $u-type-warning-dark;
 				border-color: $u-type-warning-dark;
 			}
 		}
 	}
-.centre {
-	text-align: center;
-	margin: 200rpx auto;
-	font-size: 32rpx;
-	image {
-		width: 164rpx;
-		height: 164rpx;
-		border-radius: 50%;
-		margin-bottom: 20rpx;
-	}
-	.tips {
-		font-size: 24rpx;
-		color: #999999;
-		margin-top: 20rpx;
+
+	.centre {
+		text-align: center;
+		margin: 200rpx auto;
+		font-size: 32rpx;
+
+		image {
+			width: 164rpx;
+			height: 164rpx;
+			border-radius: 50%;
+			margin-bottom: 20rpx;
+		}
+
+		.tips {
+			font-size: 24rpx;
+			color: #999999;
+			margin-top: 20rpx;
+		}
+
+		.btn {
+			margin: 80rpx auto;
+			width: 200rpx;
+			border-radius: 32rpx;
+			line-height: 64rpx;
+			color: #ffffff;
+			font-size: 26rpx;
+			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
+		}
 	}
-	.btn {
-		margin: 80rpx auto;
-		width: 200rpx;
-		border-radius: 32rpx;
-		line-height: 64rpx;
-		color: #ffffff;
-		font-size: 26rpx;
-		background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
+
+	.wrap {
+		display: flex;
+		flex-direction: column;
+		height: calc(100vh - var(--window-top));
+		width: 100%;
 	}
-}
-.wrap {
-	display: flex;
-	flex-direction: column;
-	height: calc(100vh - var(--window-top));
-	width: 100%;
-}
-	#shopping-car{
+
+	#shopping-car {
 		position: fixed;
 		z-index: 9999;
 		right: 26rpx;