cosmetics_shop_wxapp/pages/shoppingCart/index.vue

<template>
	<view class="requestList">
		<!-- header -->
		<cu-custom custom bgColor="bg-gradual-blue"><view slot="content">购物车</view></cu-custom>
		<view class="setting">
			<view class="setting-content flex align-center justify-center padding-sm bg-white">
				<view class="left text-cut text-grey">配送至河南省郑州市高新区大学科技园配送至河南省郑州市高新区大学科技园</view>
				<view @click="status = !status" class="right margin-left">{{ status ? '完成' : '管理' }}</view>
			</view>
		</view>
		<!-- section -->
		<view class="section">
			<checkbox-group @change="chooseShop" >
				<view v-for="(item, index) in 20" :key="index" class="item flex align-center bg-white radius  padding">
					<checkbox :value="item" style="transform: scale(0.6);"  />
				    <view class="right flex margin-left">
						<view :style="{backgroundImage:'url('+'https://gd-hbimg.huaban.com/d478a9c4bd0167adae79806c6ccaa2d7f59ded5dd101-WmmTdI_fw658/format/webp'+')'}" class="image radius margin-right-sm"></view>
						<view class="right-right">
							<view class="text-xl">{{item}}</view>
							<view style="float: right;"><cu-stepper :value.sync="item"  /></view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<!-- footer -->
		<view class="tool">
			<!-- 结算 -->
			<view v-if="!status" class="bg-white tool-contentA flex align-center justify-center padding-lr padding-tb-sm">
				<view class="left flex ">
					<checkbox-group @change="e => (total_lockA = !total_lockA)" class="margin-right flex align-center">
						<checkbox style="transform: scale(0.6);"  />
						<text class="text-lg margin-left-sm">全选</text>
					</checkbox-group>
					<view class="text-red margin-left">
						合计：
						<cu-price :value="price" size="52" />
						元
					</view>
				</view>
				<view class="right"><button class="cu-btn bg-red round shadow-blur">结算</button></view>
			</view>
			<!-- 管理 -->
			<view v-else class="bg-white tool-contentA flex align-center justify-center padding-lr padding-tb-sm">
				<view class="left flex ">
					<checkbox-group @change="e => (total_lockB = !total_lockB)" class="margin-right flex align-center">
						<checkbox style="transform: scale(0.6);"  />
						<text class="text-lg margin-left-sm">全选</text>
					</checkbox-group>
				</view>
				<view class="right">
					<button class="cu-btn bg-red round shadow-blur margin-right">删除</button>
					<button class="cu-btn bg-green round shadow-blur">移入收藏</button>
				</view>
			</view>
		</view>
		<cu-bar active="2" />
	</view>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	data() {
		return {
			status: false, // false 管理 true 完成
			total_lockA: false, //全选
			total_lcokB: false, //全选
			price: 0 //合计
		};
	},
	computed: {
		...mapState('requestList', ['value'])
	},
	onLoad() {
		// this.requestFunc({
		// 	axios:{},
		// 	reset:true
		// });
	},
	methods: {
		...mapActions('requestList', ['requestFunc']),
		chooseShop(e){
			console.log(e)
		}
	},
	onShareAppMessage() {
		return {};
	},
	onShareTimeline() {
		return {};
	},
	// 下拉刷新
	async onPullDownRefresh() {
		// await this.$store.requestList.dispatch('requestFunc',true);
		uni.stopPullDownRefresh({});
	}
};
</script>

<style lang="scss" scoped>
.requestList {
	.section{
		.item{
			position: relative;
			.image{
				width: 160upx;
				min-width: 160upx;
				height: 160upx;
				background-size: cover;
				background-position: center;
			}
			.right{
				flex: auto;
				.right-right{
					flex: auto;
				}
			}
			&::after {
				content: '';
				border-bottom: 1upx solid #eee;
				position: absolute;
				left: 0;
				bottom: 0;
				transform: scale(1, 0.5);
				width: 100%;
			}
		}
	}
	.setting {
		height: 80upx;
		.setting-content {
			position: fixed;
			left: 0;
			z-index: 9998;
			width: 100%;
			.left {
				flex: auto;
			}
			.right {
				min-width: 60upx;
			}
		}
	}
	.tool {
		height: 130upx;
		.tool-contentA {
			position: fixed;
			bottom: calc(100rpx + env(safe-area-inset-bottom));
			left: 0;
			z-index: 9998;
			width: 100%;
			.left {
				flex: auto;
			}
			&::before {
				content: '';
				border-top: 1upx solid #aaa;
				position: absolute;
				left: 0;
				top: 0;
				transform: scale(1, 0.5);
				width: 100%;
			}
		}
	}
}
</style>