2023-6-25

pages.json

@@ -210,7 +210,18 @@
 			"style": {
 				"navigationBarTitleText": "购物车"
 			}
-		}, {
+		},
+		{
+			"path": "pages/cart/cart1",
+			"style": {
+				"navigationBarTitleText": "购物车"
+			}
+		},{
+			"path": "pages/cart/cart2",
+			"style": {
+				"navigationBarTitleText": "购物车"
+			}
+		},{
 			"path": "pages/user/user",
 			"style": {
 				// #ifndef MP-WEIXIN

pages/cart/cart1.vue

@@ -0,0 +1,733 @@
+<template>
+	<view class="container">
+		<!-- 空白页 -->
+		<view v-if="!hasLogin || empty === true" class="empty">
+			<image src="/static/error/emptyCart.png" class="emptyImg" mode="aspectFit"></image>
+			<view v-if="hasLogin" class="empty-tips">
+				空空如也
+				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛>
+				</navigator>
+			</view>
+			<view v-else class="empty-tips">
+				空空如也
+				<view class="navigator" @click="navToLogin">去登陆></view>
+			</view>
+		</view>
+		<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">
+					<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
+						<view class="image-wrapper">
+							<image :src="item.productInfo.image" :class="[item.loaded]" mode="aspectFill" lazy-load
+								@load="onImageLoad('cartList', index)" @error="onImageError('cartList', index)"></image>
+							<view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.checked }"
+								@click="check('item', index)"></view>
+						</view>
+						<view class="item-right">
+							<text class="clamp title">{{ item.productInfo.store_name }}</text>
+							<!-- <text class="attr">{{ item.productInfo.attrInfo.suk }}</text> -->
+							<text class="price">¥{{ item.productInfo.price }}</text>
+							<!-- <uni-number-box
+								class="step"
+								:min="1"
+								:max="item.productInfo.stock"
+								:value="item.cart_num > item.productInfo.stock ? item.productInfo.stock : item.cart_num"
+								:isMax="item.cart_num >= item.productInfo.stock ? true : false"
+								:isMin="item.cart_num === 1"
+								:index="index"
+								@eventChange="numberChange"
+							></uni-number-box> -->
+							<view class="munbox flex">
+								<image src="../../static/icon/reduce.png" mode="" @click="reduce(item,index)"></image>
+								<input type="munber" :value="item.cart_num*1" disabled />
+								<image src="../../static/icon/add.png" mode="" @click="add(item)"></image>
+							</view>
+						</view>
+						<!-- <text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text> -->
+					</view>
+				</block>
+			</view>
+			<!-- 底部菜单栏 -->
+			<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>
+				<view class="total-box">
+					<text class="price">合计：¥{{ total }}</text>
+					<!-- <text class="coupon">
+						已优惠
+						<text>74.35</text>
+						元
+					</text> -->
+				</view>
+				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getCartList,
+		getCartNum,
+		cartDel
+	} from '@/api/cart.js';
+	import {
+		mapState
+	} from 'vuex';
+	import uniNumberBox from '@/components/uni-number-box.vue';
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
+	export default {
+		components: {
+			uniNumberBox
+		},
+		data() {
+			return {
+				total: 0, //总价格
+				allChecked: false, //全选状态  true|false
+				empty: false, //空白页现实  true|false
+				cartList: [],
+				code: '', //商品条码
+			};
+		},
+		onShow() {
+			// 只有登录时才加载数据
+			if (this.hasLogin) {
+				this.loadData();
+			}
+		},
+		watch: {
+			//显示空白页
+			cartList(e) {
+				let empty = e.length === 0 ? true : false;
+				if (this.empty !== empty) {
+					this.empty = empty;
+				}
+			}
+		},
+		computed: {
+			...mapState(['weichatObj']),
+			...mapState('user', ['hasLogin'])
+		},
+		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;
+				getCartList({
+					type:1
+				})
+					.then(function(e) {
+						// 获取当前购物车物品增加数量
+						let nub = obj.cartList.length;
+						// 获取之前对象数组
+						let aArray = obj.cartList.reverse();
+						// 获取返回数据对象数组
+						let bArray = e.data.valid.reverse();
+						obj.cartList = bArray
+							.map((item, ind) => {
+								// 设置返回数据默认为勾选状态
+								item.checked = true;
+								// 获取相同数组之前对象的数据
+								let carlist = aArray[ind];
+								// 判断之前是否已经加载完毕
+								if (carlist && carlist.loaded == 'loaded') {
+									item.loaded = 'loaded';
+								}
+								return item;
+							})
+							.reverse();
+						obj.calcTotal(); //计算总价
+					})
+					.catch(function(e) {
+						console.log(e);
+					});
+			},
+			//监听image加载完成
+			onImageLoad(key, index) {
+				// 修改载入完成后图片class样式
+				this.$set(this[key][index], 'loaded', 'loaded');
+			},
+			//监听image加载失败
+			onImageError(key, index) {
+				this[key][index].image = '/static/error/errorImage.jpg';
+			},
+			// 跳转到登录页
+			navToLogin() {
+				// 保存地址
+				saveUrl();
+				// 登录拦截
+				interceptor();
+			},
+			//选中状态处理
+			check(type, index) {
+				if (type === 'item') {
+					this.cartList[index].checked = !this.cartList[index].checked;
+				} else {
+					const checked = !this.allChecked;
+					const list = this.cartList;
+					list.forEach(item => {
+						item.checked = checked;
+					});
+					this.allChecked = checked;
+				}
+				this.calcTotal(type);
+			},
+			//数量
+			numberChange(data) {
+				let arr = this.cartList[data.index];
+				arr.cart_num = data.number;
+				getCartNum({
+						id: arr.id,
+						number: data.number
+					})
+					.then(e => {
+						console.log(e);
+					})
+					.catch(function(e) {
+						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) {
+				let list = this.cartList;
+				let row = list[index];
+				let id = row.id;
+				cartDel({
+					ids: id
+				});
+				this.cartList.splice(index, 1);
+				uni.hideLoading();
+				this.calcTotal();
+			},
+			//清空
+			clearCart() {
+				uni.showModal({
+					content: '清空购物车？',
+					success: e => {
+						if (e.confirm) {
+							let st = this.cartList.map(e => {
+								return e.id;
+							});
+							cartDel({
+								ids: st.join(',')
+							}).then(e => {
+								console.log(e);
+							});
+							this.cartList = [];
+						}
+					}
+				});
+			},
+			//计算总价
+			calcTotal() {
+				let list = this.cartList;
+				if (list.length === 0) {
+					this.empty = true;
+					return;
+				}
+				let total = 0;
+				let checked = true;
+				list.forEach(item => {
+					if (item.checked === true) {
+						total += item.productInfo.price * item.cart_num;
+					} else if (checked === true) {
+						checked = false;
+					}
+				});
+				this.allChecked = checked;
+				this.total = Number(total.toFixed(2));
+			},
+			//创建订单
+			createOrder() {
+				let list = this.cartList;
+				let goodsData = [];
+				list.forEach(item => {
+					if (item.checked) {
+						goodsData.push(item.id);
+					}
+				});
+
+				uni.navigateTo({
+					url: '/pages/order/createOrder?id=' + goodsData.join(',')
+				});
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		padding-bottom: 134rpx;
+		background-color: $page-color-base;
+
+		/* 空白页 */
+		.empty {
+			position: fixed;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100vh;
+			padding-bottom: 100rpx;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: center;
+			background: #fff;
+
+			.emptyImg {
+				width: 300rpx;
+				height: 250rpx;
+				margin-bottom: 30rpx;
+			}
+
+			.empty-tips {
+				display: flex;
+				font-size: $font-sm + 2rpx;
+				color: $font-color-disabled;
+
+				.navigator {
+					color: $uni-color-primary;
+					margin-left: 16rpx;
+				}
+			}
+		}
+	}
+
+	/* 购物车列表项 */
+	.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 26rpx 30rpx 80rpx;
+
+		.image-wrapper {
+			width: 150rpx;
+			height: 150rpx;
+			flex-shrink: 0;
+			position: relative;
+
+			image {
+				border-radius: 8rpx;
+			}
+		}
+
+		.checkbox {
+			display: flex;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: -65rpx;
+			margin: auto 0;
+			height: 50rpx;
+			z-index: 8;
+			font-size: 44rpx;
+			line-height: 1;
+			padding: 4rpx;
+			color: $font-color-disabled;
+			background: #fff;
+			border-radius: 50px;
+		}
+
+		.item-right {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			overflow: hidden;
+			position: relative;
+			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;
+				color: $font-color-dark;
+				height: 40rpx;
+				line-height: 40rpx;
+			}
+
+			.attr {
+				font-size: $font-sm + 2rpx;
+				color: $font-color-light;
+				height: 50rpx;
+				line-height: 50rpx;
+
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #999999;
+			}
+
+			.price {
+				// 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 {
+			padding: 4rpx 10rpx;
+			font-size: 34rpx;
+			height: 50rpx;
+			color: $font-color-light;
+		}
+	}
+
+	/* 底部栏 */
+	.action-section {
+		/* #ifdef H5 */
+		margin-bottom: 0px;
+		/* #endif */
+		position: fixed;
+		left: 0rpx;
+		bottom: 0rpx;
+		z-index: 95;
+		display: flex;
+		align-items: center;
+		width: 750rpx;
+		height: 100rpx;
+		padding: 0 30rpx;
+		// background: rgba(255, 255, 255, 0.9);
+		background: #fff;
+
+		// box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
+		// border-radius: 16rpx;
+		.checkbox {
+			height: 52rpx;
+			position: relative;
+
+			.icon-checked-box {
+				border-radius: 50rpx;
+				background-color: #ffffff;
+				width: 52rpx;
+				height: 100%;
+				position: relative;
+				z-index: 5;
+				font-size: 53rpx;
+				line-height: 1;
+				color: $font-color-light;
+
+				&::after {
+					content: '全选';
+					width: 100rpx;
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 52rpx;
+					margin: auto;
+					line-height: 1.5;
+					padding-left: 10rpx;
+					font-size: 32rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #767477;
+				}
+			}
+
+			.icon-checked {
+				color: $base-color;
+			}
+		}
+
+		.clear-btn {
+			position: absolute;
+			left: 26rpx;
+			top: 0;
+			z-index: 4;
+			width: 0;
+			height: 52rpx;
+			line-height: 52rpx;
+			padding-left: 38rpx;
+			font-size: $font-base;
+			color: #fff;
+			background: $font-color-disabled;
+			border-radius: 0 50px 50px 0;
+			opacity: 0;
+			transition: 0.2s;
+
+			&.show {
+				opacity: 1;
+				width: 120rpx;
+			}
+		}
+
+		.total-box {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			text-align: right;
+			padding-right: 40rpx;
+			color: #FF6F0F;
+			font-weight: bold;
+
+			.price {
+				font-size: 32rpx;
+
+				// font-size: $font-lg;
+				// color: $font-color-dark;
+
+			}
+
+			.coupon {
+				font-size: $font-sm;
+
+				// color: $font-color-light;
+				text {
+					font-weight: bold;
+					color: $font-color-dark;
+				}
+			}
+		}
+
+		.confirm-btn {
+			padding: 0 38rpx;
+			margin: 0;
+			border-radius: 100px;
+			height: 76rpx;
+			line-height: 76rpx;
+			font-size: $font-base + 2rpx;
+			background: $base-color;
+			font-weight: bold;
+		}
+	}
+
+	/* 复选框选中状态 */
+	.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;
+		position: sticky;
+		top: 0rpx;
+		z-index: 99;
+
+		.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;
+		}
+	}
+
+	.btm-btn {
+		z-index: 95;
+		display: flex;
+		position: fixed;
+		bottom: 0;
+		text-align: center;
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #FFFFFF;
+		line-height: 97rpx;
+		width: 750rpx;
+
+		.btn-item {
+			height: 100%;
+			width: 50%;
+			background-color: #31332d;
+		}
+
+		.btn-item1 {
+			background-color: #5DBC7C;
+		}
+	}
+
+	.cart-list {
+		// padding-top: 88rpx;
+		padding-bottom: 97rpx;
+	}
+
+	.hx-wrapper {
+		width: 536rpx;
+		height: 630rpx;
+		position: relative;
+
+		// background-color: #fff;
+		.hx-img {
+			width: 536rpx;
+			height: 281rpx;
+
+			image {
+				width: 536rpx;
+				height: 281rpx;
+			}
+		}
+
+		.hx-close {
+			position: absolute;
+			left: 243rpx;
+			bottom: -80rpx;
+			width: 52rpx;
+			height: 52rpx;
+
+			image {
+				width: 52rpx;
+				height: 52rpx;
+			}
+		}
+
+		.hx-body {
+			width: 536rpx;
+			height: 349rpx;
+			background-color: #fff;
+			border-radius: 0 0 10rpx 10rpx;
+
+			.hx-title {
+				width: 536rpx;
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #333333;
+				line-height: 1;
+				padding-top: 42rpx;
+				text-align: center;
+			}
+
+			input {
+				width: 439rpx;
+				height: 68rpx;
+				background: #DBF3E9;
+				border-radius: 10rpx;
+				margin: 39rpx auto 0;
+				padding-left: 26rpx;
+
+				.hx-placeholder {
+					font-size: 26rpx;
+					font-weight: 500;
+					color: #52C696;
+				}
+			}
+
+			.hx-btn {
+				margin: 44rpx auto 0;
+				width: 353rpx;
+				height: 71rpx;
+				background: #52C696;
+				border-radius: 34rpx;
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #F8F9F9;
+				line-height: 71rpx;
+				text-align: center;
+			}
+
+
+		}
+	}
+</style>

pages/cart/cart2.vue

@@ -0,0 +1,733 @@
+<template>
+	<view class="container">
+		<!-- 空白页 -->
+		<view v-if="!hasLogin || empty === true" class="empty">
+			<image src="/static/error/emptyCart.png" class="emptyImg" mode="aspectFit"></image>
+			<view v-if="hasLogin" class="empty-tips">
+				空空如也
+				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛>
+				</navigator>
+			</view>
+			<view v-else class="empty-tips">
+				空空如也
+				<view class="navigator" @click="navToLogin">去登陆></view>
+			</view>
+		</view>
+		<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">
+					<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
+						<view class="image-wrapper">
+							<image :src="item.productInfo.image" :class="[item.loaded]" mode="aspectFill" lazy-load
+								@load="onImageLoad('cartList', index)" @error="onImageError('cartList', index)"></image>
+							<view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.checked }"
+								@click="check('item', index)"></view>
+						</view>
+						<view class="item-right">
+							<text class="clamp title">{{ item.productInfo.store_name }}</text>
+							<!-- <text class="attr">{{ item.productInfo.attrInfo.suk }}</text> -->
+							<text class="price">¥{{ item.productInfo.price }}</text>
+							<!-- <uni-number-box
+								class="step"
+								:min="1"
+								:max="item.productInfo.stock"
+								:value="item.cart_num > item.productInfo.stock ? item.productInfo.stock : item.cart_num"
+								:isMax="item.cart_num >= item.productInfo.stock ? true : false"
+								:isMin="item.cart_num === 1"
+								:index="index"
+								@eventChange="numberChange"
+							></uni-number-box> -->
+							<view class="munbox flex">
+								<image src="../../static/icon/reduce.png" mode="" @click="reduce(item,index)"></image>
+								<input type="munber" :value="item.cart_num*1" disabled />
+								<image src="../../static/icon/add.png" mode="" @click="add(item)"></image>
+							</view>
+						</view>
+						<!-- <text class="del-btn iconfont iconclose" @click="deleteCartItem(index)"></text> -->
+					</view>
+				</block>
+			</view>
+			<!-- 底部菜单栏 -->
+			<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>
+				<view class="total-box">
+					<text class="price">合计：¥{{ total }}</text>
+					<!-- <text class="coupon">
+						已优惠
+						<text>74.35</text>
+						元
+					</text> -->
+				</view>
+				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		getCartList,
+		getCartNum,
+		cartDel
+	} from '@/api/cart.js';
+	import {
+		mapState
+	} from 'vuex';
+	import uniNumberBox from '@/components/uni-number-box.vue';
+	import {
+		saveUrl,
+		interceptor
+	} from '@/utils/loginUtils.js';
+	export default {
+		components: {
+			uniNumberBox
+		},
+		data() {
+			return {
+				total: 0, //总价格
+				allChecked: false, //全选状态  true|false
+				empty: false, //空白页现实  true|false
+				cartList: [],
+				code: '', //商品条码
+			};
+		},
+		onShow() {
+			// 只有登录时才加载数据
+			if (this.hasLogin) {
+				this.loadData();
+			}
+		},
+		watch: {
+			//显示空白页
+			cartList(e) {
+				let empty = e.length === 0 ? true : false;
+				if (this.empty !== empty) {
+					this.empty = empty;
+				}
+			}
+		},
+		computed: {
+			...mapState(['weichatObj']),
+			...mapState('user', ['hasLogin'])
+		},
+		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;
+				getCartList({
+					type:2
+				})
+					.then(function(e) {
+						// 获取当前购物车物品增加数量
+						let nub = obj.cartList.length;
+						// 获取之前对象数组
+						let aArray = obj.cartList.reverse();
+						// 获取返回数据对象数组
+						let bArray = e.data.valid.reverse();
+						obj.cartList = bArray
+							.map((item, ind) => {
+								// 设置返回数据默认为勾选状态
+								item.checked = true;
+								// 获取相同数组之前对象的数据
+								let carlist = aArray[ind];
+								// 判断之前是否已经加载完毕
+								if (carlist && carlist.loaded == 'loaded') {
+									item.loaded = 'loaded';
+								}
+								return item;
+							})
+							.reverse();
+						obj.calcTotal(); //计算总价
+					})
+					.catch(function(e) {
+						console.log(e);
+					});
+			},
+			//监听image加载完成
+			onImageLoad(key, index) {
+				// 修改载入完成后图片class样式
+				this.$set(this[key][index], 'loaded', 'loaded');
+			},
+			//监听image加载失败
+			onImageError(key, index) {
+				this[key][index].image = '/static/error/errorImage.jpg';
+			},
+			// 跳转到登录页
+			navToLogin() {
+				// 保存地址
+				saveUrl();
+				// 登录拦截
+				interceptor();
+			},
+			//选中状态处理
+			check(type, index) {
+				if (type === 'item') {
+					this.cartList[index].checked = !this.cartList[index].checked;
+				} else {
+					const checked = !this.allChecked;
+					const list = this.cartList;
+					list.forEach(item => {
+						item.checked = checked;
+					});
+					this.allChecked = checked;
+				}
+				this.calcTotal(type);
+			},
+			//数量
+			numberChange(data) {
+				let arr = this.cartList[data.index];
+				arr.cart_num = data.number;
+				getCartNum({
+						id: arr.id,
+						number: data.number
+					})
+					.then(e => {
+						console.log(e);
+					})
+					.catch(function(e) {
+						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) {
+				let list = this.cartList;
+				let row = list[index];
+				let id = row.id;
+				cartDel({
+					ids: id
+				});
+				this.cartList.splice(index, 1);
+				uni.hideLoading();
+				this.calcTotal();
+			},
+			//清空
+			clearCart() {
+				uni.showModal({
+					content: '清空购物车？',
+					success: e => {
+						if (e.confirm) {
+							let st = this.cartList.map(e => {
+								return e.id;
+							});
+							cartDel({
+								ids: st.join(',')
+							}).then(e => {
+								console.log(e);
+							});
+							this.cartList = [];
+						}
+					}
+				});
+			},
+			//计算总价
+			calcTotal() {
+				let list = this.cartList;
+				if (list.length === 0) {
+					this.empty = true;
+					return;
+				}
+				let total = 0;
+				let checked = true;
+				list.forEach(item => {
+					if (item.checked === true) {
+						total += item.productInfo.price * item.cart_num;
+					} else if (checked === true) {
+						checked = false;
+					}
+				});
+				this.allChecked = checked;
+				this.total = Number(total.toFixed(2));
+			},
+			//创建订单
+			createOrder() {
+				let list = this.cartList;
+				let goodsData = [];
+				list.forEach(item => {
+					if (item.checked) {
+						goodsData.push(item.id);
+					}
+				});
+
+				uni.navigateTo({
+					url: '/pages/order/createOrder?id=' + goodsData.join(',')
+				});
+			},
+		}
+	};
+</script>
+
+<style lang="scss">
+	.container {
+		padding-bottom: 134rpx;
+		background-color: $page-color-base;
+
+		/* 空白页 */
+		.empty {
+			position: fixed;
+			left: 0;
+			top: 0;
+			width: 100%;
+			height: 100vh;
+			padding-bottom: 100rpx;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+			align-items: center;
+			background: #fff;
+
+			.emptyImg {
+				width: 300rpx;
+				height: 250rpx;
+				margin-bottom: 30rpx;
+			}
+
+			.empty-tips {
+				display: flex;
+				font-size: $font-sm + 2rpx;
+				color: $font-color-disabled;
+
+				.navigator {
+					color: $uni-color-primary;
+					margin-left: 16rpx;
+				}
+			}
+		}
+	}
+
+	/* 购物车列表项 */
+	.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 26rpx 30rpx 80rpx;
+
+		.image-wrapper {
+			width: 150rpx;
+			height: 150rpx;
+			flex-shrink: 0;
+			position: relative;
+
+			image {
+				border-radius: 8rpx;
+			}
+		}
+
+		.checkbox {
+			display: flex;
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			left: -65rpx;
+			margin: auto 0;
+			height: 50rpx;
+			z-index: 8;
+			font-size: 44rpx;
+			line-height: 1;
+			padding: 4rpx;
+			color: $font-color-disabled;
+			background: #fff;
+			border-radius: 50px;
+		}
+
+		.item-right {
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			overflow: hidden;
+			position: relative;
+			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;
+				color: $font-color-dark;
+				height: 40rpx;
+				line-height: 40rpx;
+			}
+
+			.attr {
+				font-size: $font-sm + 2rpx;
+				color: $font-color-light;
+				height: 50rpx;
+				line-height: 50rpx;
+
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #999999;
+			}
+
+			.price {
+				// 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 {
+			padding: 4rpx 10rpx;
+			font-size: 34rpx;
+			height: 50rpx;
+			color: $font-color-light;
+		}
+	}
+
+	/* 底部栏 */
+	.action-section {
+		/* #ifdef H5 */
+		margin-bottom: 0px;
+		/* #endif */
+		position: fixed;
+		left: 0rpx;
+		bottom: 0rpx;
+		z-index: 95;
+		display: flex;
+		align-items: center;
+		width: 750rpx;
+		height: 100rpx;
+		padding: 0 30rpx;
+		// background: rgba(255, 255, 255, 0.9);
+		background: #fff;
+
+		// box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
+		// border-radius: 16rpx;
+		.checkbox {
+			height: 52rpx;
+			position: relative;
+
+			.icon-checked-box {
+				border-radius: 50rpx;
+				background-color: #ffffff;
+				width: 52rpx;
+				height: 100%;
+				position: relative;
+				z-index: 5;
+				font-size: 53rpx;
+				line-height: 1;
+				color: $font-color-light;
+
+				&::after {
+					content: '全选';
+					width: 100rpx;
+					position: absolute;
+					top: 0;
+					bottom: 0;
+					left: 52rpx;
+					margin: auto;
+					line-height: 1.5;
+					padding-left: 10rpx;
+					font-size: 32rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #767477;
+				}
+			}
+
+			.icon-checked {
+				color: $base-color;
+			}
+		}
+
+		.clear-btn {
+			position: absolute;
+			left: 26rpx;
+			top: 0;
+			z-index: 4;
+			width: 0;
+			height: 52rpx;
+			line-height: 52rpx;
+			padding-left: 38rpx;
+			font-size: $font-base;
+			color: #fff;
+			background: $font-color-disabled;
+			border-radius: 0 50px 50px 0;
+			opacity: 0;
+			transition: 0.2s;
+
+			&.show {
+				opacity: 1;
+				width: 120rpx;
+			}
+		}
+
+		.total-box {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			text-align: right;
+			padding-right: 40rpx;
+			color: #FF6F0F;
+			font-weight: bold;
+
+			.price {
+				font-size: 32rpx;
+
+				// font-size: $font-lg;
+				// color: $font-color-dark;
+
+			}
+
+			.coupon {
+				font-size: $font-sm;
+
+				// color: $font-color-light;
+				text {
+					font-weight: bold;
+					color: $font-color-dark;
+				}
+			}
+		}
+
+		.confirm-btn {
+			padding: 0 38rpx;
+			margin: 0;
+			border-radius: 100px;
+			height: 76rpx;
+			line-height: 76rpx;
+			font-size: $font-base + 2rpx;
+			background: $base-color;
+			font-weight: bold;
+		}
+	}
+
+	/* 复选框选中状态 */
+	.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;
+		position: sticky;
+		top: 0rpx;
+		z-index: 99;
+
+		.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;
+		}
+	}
+
+	.btm-btn {
+		z-index: 95;
+		display: flex;
+		position: fixed;
+		bottom: 0;
+		text-align: center;
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #FFFFFF;
+		line-height: 97rpx;
+		width: 750rpx;
+
+		.btn-item {
+			height: 100%;
+			width: 50%;
+			background-color: #31332d;
+		}
+
+		.btn-item1 {
+			background-color: #5DBC7C;
+		}
+	}
+
+	.cart-list {
+		// padding-top: 88rpx;
+		padding-bottom: 97rpx;
+	}
+
+	.hx-wrapper {
+		width: 536rpx;
+		height: 630rpx;
+		position: relative;
+
+		// background-color: #fff;
+		.hx-img {
+			width: 536rpx;
+			height: 281rpx;
+
+			image {
+				width: 536rpx;
+				height: 281rpx;
+			}
+		}
+
+		.hx-close {
+			position: absolute;
+			left: 243rpx;
+			bottom: -80rpx;
+			width: 52rpx;
+			height: 52rpx;
+
+			image {
+				width: 52rpx;
+				height: 52rpx;
+			}
+		}
+
+		.hx-body {
+			width: 536rpx;
+			height: 349rpx;
+			background-color: #fff;
+			border-radius: 0 0 10rpx 10rpx;
+
+			.hx-title {
+				width: 536rpx;
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #333333;
+				line-height: 1;
+				padding-top: 42rpx;
+				text-align: center;
+			}
+
+			input {
+				width: 439rpx;
+				height: 68rpx;
+				background: #DBF3E9;
+				border-radius: 10rpx;
+				margin: 39rpx auto 0;
+				padding-left: 26rpx;
+
+				.hx-placeholder {
+					font-size: 26rpx;
+					font-weight: 500;
+					color: #52C696;
+				}
+			}
+
+			.hx-btn {
+				margin: 44rpx auto 0;
+				width: 353rpx;
+				height: 71rpx;
+				background: #52C696;
+				border-radius: 34rpx;
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #F8F9F9;
+				line-height: 71rpx;
+				text-align: center;
+			}
+
+
+		}
+	}
+</style>

pages/product/classify.vue

@@ -25,7 +25,14 @@
 		</view>
 		<empty v-if="list.length === 0"></empty>
 		<view class="jg"></view>
-	</view>
+		<navigator url="/pages/cart/cart2">
+		<view class="cart">
+			<view class="text" v-if="total>0">
+				{{total}}
+			</view>
+			<image class="cart-icon" src="/static/img/cartIcon.png" mode="scaleToFill"></image>
+		</view>
+		</navigator>
 	</view>
 </template>
 
@@ -34,16 +41,23 @@
 	import {
 		groomList
 	} from '@/api/product.js';
+	import {
+		getCartList,
+	} from '@/api/cart.js';
 	export default {
 		data() {
 			return {
 				list: [],
-				bannerImg: []
+				bannerImg: [],
+				total: 0
 			};
 		},
 		components: {
 			empty
 		},
+		onShow() {
+			this.loadCart();
+		},
 		onLoad(option) {
 			// 获取查询对象
 			this.type = option.type;
@@ -54,8 +68,21 @@
 			}
 			// 加载基础数据
 			this.loadData();
+			this.loadCart();
 		},
 		methods: {
+			async loadCart() {
+				let obj = this;
+				getCartList({
+						type: 2
+					})
+					.then(function(e) {
+						obj.total = e.data.valid.length;
+					})
+					.catch(function(e) {
+						console.log(e);
+					});
+			},
 			navTo: function(ls) {
 				uni.navigateTo({
 					url: '/pages/product/product?id=' + ls.id
@@ -94,6 +121,30 @@
 </script>
 
 <style lang="scss">
+	.cart {
+		position: fixed;
+		right: 30rpx;
+		bottom: 60rpx;
+	
+		.cart-icon {
+			width: 150rpx;
+			height: 150rpx;
+		}
+	
+		.text {
+			background-color: $color-red;
+			color: #FFF;
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 40rpx;
+			height: 40rpx;
+			z-index: 999;
+			text-align: center;
+			border-radius: 99rpx;
+		}
+	
+	}
 	page {
 		background: $page-color-base;
 	}
@@ -200,4 +251,4 @@
 
 		}
 	}
-</style>
+</style>

pages/product/supermarket.vue

@@ -15,12 +15,12 @@
 			</view>
 			<uni-load-more :status="loadingType"></uni-load-more>
 		</view>
-
-		<view class="cart">
-
+		<view class="cart" @click="navtab">
+			<view class="text" v-if="total>0">
+				{{total}}
+			</view>
+			<image class="cart-icon" src="/static/img/cartIcon.png" mode="scaleToFill"></image>
 		</view>
-
-
 	</view>
 </template>
 
@@ -60,10 +60,15 @@
 		},
 		onReady() {},
 		methods: {
+			navtab() {
+				uni.switchTab({
+					url: '/pages/cart/cart'
+				})
+			},
 			async loadCart() {
 				let obj = this;
 				getCartList({
-						type: 1
+						type: 0
 					})
 					.then(function(e) {
 						obj.total = e.data.valid.length;
@@ -99,6 +104,8 @@
 				})
 			},
 			toggleSpec(str) {
+				const that = this;
+				that.total++
 				cartAdd({
 					cartNum: 1, //商品数量
 					uniqueId: '', //商品标签
@@ -112,6 +119,7 @@
 						type: 'top',
 						duration: 2000
 					});
+					that.loadCart();
 				})
 			},
 		}
@@ -125,6 +133,31 @@
 		height: auto;
 	}
 
+	.cart {
+		position: fixed;
+		right: 30rpx;
+		bottom: 60rpx;
+
+		.cart-icon {
+			width: 150rpx;
+			height: 150rpx;
+		}
+
+		.text {
+			background-color: $color-red;
+			color: #FFF;
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 40rpx;
+			height: 40rpx;
+			z-index: 999;
+			text-align: center;
+			border-radius: 99rpx;
+		}
+
+	}
+
 	.guess {
 		display: flex;
 		justify-content: space-between;
@@ -183,4 +216,4 @@
 			}
 		}
 	}
-</style>
+</style>

pages/shoping/index.vue

@@ -13,158 +13,228 @@
 			<view class="serachBox flex position-relative">
 				<view class="serachInput flex">
 					<icon :size="iconSize" type="search" color="#FFFFFF"></icon>
-					<input class="search" placeholder="搜索" @blur="confirm" placeholder-style="color:#ffffff" type="text" :value="search" @confirm="confirm" />
+					<input class="search" placeholder="搜索" @blur="confirm" placeholder-style="color:#ffffff" type="text"
+						:value="search" @confirm="confirm" />
 				</view>
 			</view>
 		</view>
-		<view class="list position-relative"><list ref="dataList"></list></view>
+		<view class="list position-relative">
+			<list ref="dataList"></list>
+		</view>
+			<view class="cart"  @click="navtab">
+				<view class="text" v-if="total>0">
+					{{total}}
+				</view>
+				<image class="cart-icon" src="/static/img/cartIcon.png" mode="scaleToFill"></image>
+			</view>
 	</view>
 </template>
 
 <script>
-import list from '@/pages/product/list';
-import { getShoping } from '@/api/shoping.js';
-export default {
-	components: { list },
-	data() {
-		return {
-			// 当前选中的滑块
-			current: 0,
-			// 门店信息
-			info: {
-				logo: '',
-				title: ''
-			},
-			ratio: '', //页面比例信息
-			search: '' //店铺搜索商品
-			//商店详情
-		};
-	},
-	onLoad(pt) {
-		// 保存商户id
-		this.info.id = pt.merid;
-		this.getShoping();
-	},
-	onReachBottom(e) {
-		// 底部加载数据
-		this.$refs.dataList.loadData();
-	},
-	onReady() {
-		// 保存商家id
-		this.$refs.dataList.mer_id = this.info.id;
-
-		// 加载分类
-		this.$refs.dataList.loadCateList();
-		let obj = this;
-		let query = uni.createSelectorQuery();
-		// 获取页面比例
-		query
-			.select('.content')
-			.fields(
-				{
-					size: true
+	import list from '@/pages/product/list';
+	import {
+		getShoping
+	} from '@/api/shoping.js';
+	import {
+		getCartList,
+	} from '@/api/cart.js';
+	export default {
+		components: {
+			list
+		},
+		data() {
+			return {
+				// 当前选中的滑块
+				current: 0,
+				// 门店信息
+				info: {
+					logo: '',
+					title: ''
 				},
-				e => {
-					// 保存比例
-					this.ratio = e.width / 750;
-				}
-			)
-			.exec();
-	},
-	computed: {
-		// 计算图标大小
-		iconSize() {
-			return 28 * this.ratio;
-		}
-	},
-	methods: {
-		//获取商店信息
-		getShoping() {
-			let obj = this;
-			getShoping({}, this.info.id)
-				.then(function({ data }) {
-					obj.info = data.info;
-					obj.$refs.dataList.iszy = obj.info.is_triple;
-					// 加载数据
-					obj.$refs.dataList.loadData();
-				})
-				.catch(e => {
-					console.log(e);
-				});
+				ratio: '', //页面比例信息
+				search: '' ,//店铺搜索商品
+				total: 0
+				//商店详情
+			};
+		},
+		onShow() {
+			this.loadCart();
 		},
-		// 滑块切换时触发方法
-		changeIndex(e) {
-			this.current = e.current;
+		onLoad(pt) {
+			// 保存商户id
+			this.info.id = pt.merid;
+			this.getShoping();
 		},
-		// 搜索确认事件
-		confirm(e) {
-			this.$refs.dataList.keyword = e.detail.value;
-			this.$refs.dataList.page = 1;
-			this.$refs.dataList.loadData('refresh');
+		onReachBottom(e) {
+			// 底部加载数据
+			this.$refs.dataList.loadData();
+		},
+		onReady() {
+			// 保存商家id
+			this.$refs.dataList.mer_id = this.info.id;
+
+			// 加载分类
+			this.$refs.dataList.loadCateList();
+			let obj = this;
+			let query = uni.createSelectorQuery();
+			// 获取页面比例
+			query
+				.select('.content')
+				.fields({
+						size: true
+					},
+					e => {
+						// 保存比例
+						this.ratio = e.width / 750;
+					}
+				)
+				.exec();
 		},
-		// 回退功能
-		backUrl() {
-			uni.navigateBack();
+		computed: {
+			// 计算图标大小
+			iconSize() {
+				return 28 * this.ratio;
+			}
+		},
+		methods: {
+			navtab() {
+				uni.switchTab({
+					url: '/pages/cart/cart'
+				})
+			},
+			async loadCart() {
+				let obj = this;
+				getCartList({
+						type: 0
+					})
+					.then(function(e) {
+						obj.total = e.data.valid.length;
+					})
+					.catch(function(e) {
+						console.log(e);
+					});
+			},
+			//获取商店信息
+			getShoping() {
+				let obj = this;
+				getShoping({}, this.info.id)
+					.then(function({
+						data
+					}) {
+						obj.info = data.info;
+						obj.$refs.dataList.iszy = obj.info.is_triple;
+						// 加载数据
+						obj.$refs.dataList.loadData();
+					})
+					.catch(e => {
+						console.log(e);
+					});
+			},
+			// 滑块切换时触发方法
+			changeIndex(e) {
+				this.current = e.current;
+			},
+			// 搜索确认事件
+			confirm(e) {
+				this.$refs.dataList.keyword = e.detail.value;
+				this.$refs.dataList.page = 1;
+				this.$refs.dataList.loadData('refresh');
+			},
+			// 回退功能
+			backUrl() {
+				uni.navigateBack();
+			}
 		}
-	}
-};
+	};
 </script>
 
 <style lang="scss">
-page,
-.content {
-	height: 100%;
-}
-.varHeight {
-	height: var(--status-bar-height);
-}
-
-.banner {
-	.shpingInfo {
-		padding: 30rpx $page-row-spacing;
-		.logoBox {
-			.logo {
-				height: 90rpx;
-				width: 90rpx;
-				border-radius: 50%;
-			}
-			.shopingTitle {
-				padding-left: 20rpx;
-				color: #ffffff;
-				font-size: $font-lg;
-			}
+	.cart {
+		position: fixed;
+		right: 30rpx;
+		bottom: 60rpx;
+
+		.cart-icon {
+			width: 150rpx;
+			height: 150rpx;
 		}
-		.shopingExit {
+
+		.text {
+			background-color: $color-red;
+			color: #FFF;
+			position: absolute;
+			top: 0;
+			right: 0;
+			width: 40rpx;
+			height: 40rpx;
+			z-index: 999;
+			text-align: center;
+			border-radius: 99rpx;
 		}
+
 	}
-	.serachBox,
-	.shpingInfo {
-		z-index: 999;
-	}
-	.bgImg {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
+
+	page,
+	.content {
 		height: 100%;
 	}
 
-	.serachBox {
-		padding: 0 $page-row-spacing;
-		padding-bottom: 20rpx;
-		width: 100%;
-		.serachInput {
-			background-color: rgba($color: #f1f1f1, $alpha: 0.5);
-			border-radius: 100rpx;
-			padding: 10rpx 25rpx;
+	.varHeight {
+		height: var(--status-bar-height);
+	}
+
+	.banner {
+		.shpingInfo {
+			padding: 30rpx $page-row-spacing;
+
+			.logoBox {
+				.logo {
+					height: 90rpx;
+					width: 90rpx;
+					border-radius: 50%;
+				}
+
+				.shopingTitle {
+					padding-left: 20rpx;
+					color: #ffffff;
+					font-size: $font-lg;
+				}
+			}
+
+			.shopingExit {}
+		}
+
+		.serachBox,
+		.shpingInfo {
+			z-index: 999;
+		}
+	
+	.bgImg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+
+		.serachBox {
+			padding: 0 $page-row-spacing;
+			padding-bottom: 20rpx;
 			width: 100%;
-			.search {
-				padding-left: 20rpx;
+
+			.serachInput {
+				background-color: rgba($color: #f1f1f1, $alpha: 0.5);
+				border-radius: 100rpx;
+				padding: 10rpx 25rpx;
 				width: 100%;
-				color: #ffffff;
-				font-size: 28rpx;
+
+				.search {
+					padding-left: 20rpx;
+					width: 100%;
+					color: #ffffff;
+					font-size: 28rpx;
+				}
 			}
 		}
 	}
-}
 </style>