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 @click="addressListFunc" class="left text-cut text-grey"><text class="cuIcon-locationfill text-green"></text>配送至河南省郑州市高新区大学科技园配送至河南省郑州市高新区大学科技园</view>
				<view @click="status = !status" class="right margin-left">{{ status ? '完成' : '管理' }}</view>
			</view>
		</view>
		<!-- section -->
		<cu-scrollView @refresherpulling="refresherpulling" @scroll="scroll" :height="height">
			<view class="section">
				<checkbox-group :value="group" @change="chooseShop">
					<view v-for="(item, index) in ListValue" :key="index" class="item flex align-center bg-white radius  padding">
						<checkbox :value="item.id" :checked="group.some(it=>it==item.id)" style="transform: scale(0.6);" />
						<view class="right flex margin-left">
							<view
							@click="detailFunc(item.commodity_details)"
								:style="{ backgroundImage: 'url(' + item.image + ')' }"
								class="image radius margin-right-sm"
							></view>
							<view class="right-right">
								<view class="text-black">{{ item.name }}</view>
								<view class="flex justify-between margin-top-xs margin-bottom-sm">
									<view class="text-red text-price">
										<cu-price :value="item.price"/>
									</view>
									<view>{{item.point_price}}积分</view>
								</view>
								<view style="float: right;"><cu-stepper @change="val=>changeNum(index,val)" :value="item.quantity" /></view>
							</view>
						</view>
					</view>
				</checkbox-group>
				<!-- 状态管理 -->
				<view class="cu-load" :class="{ loading: currentPage <= totalPage, over: currentPage > totalPage }"></view>
			</view>
		</cu-scrollView>
		<!-- 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 align-center">
					<checkbox-group @change="totalFunc('total_lockA')" class="margin-right flex align-center">
						<checkbox :checked="total_lockA" 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" />
						元
						<text class="margin-left-sm text-grey left">{{point_price}}积分</text>
					</view>
				</view>
				<view class="right"><button :disabled="bind!=1" @click="payFunc" 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="totalFunc('total_lockB')" class="margin-right flex align-center">
						<checkbox :checked="total_lockB" style="transform: scale(0.6);" />
						<text class="text-lg margin-left-sm">全选</text>
					</checkbox-group>
				</view>
				<view class="right">
					<button :disabled="bind!=1" class="cu-btn bg-red round shadow-blur margin-right">删除</button>
					<button :disabled="bind!=1" class="cu-btn bg-green round shadow-blur">移入收藏</button>
				</view>
			</view>
		</view>
		<cu-bar active="3" />
	</view>
</template>

<script>
import { CustomBarHeight } from '@/common/device/index.js';
import { mapState, mapActions ,mapMutations} from 'vuex';
import api from "./api.js";
export default {
	data() {
		return {
			status: false, // false 结算 true 管理
			total_lockA: false, //购买 全选
			total_lockB: false, //管理 全选
			price: 0, //合计
			point_price:0,//积分
			group: []
		};
	},
	computed: {
		...mapState(['bind']),
		...mapState('requestList', ['ListValue', 'currentPage', 'totalPage']),
		height() {
			return `calc(100vh - 280rpx - ${CustomBarHeight}px)`;
		}
	},
	onLoad() {},
	async onShow() {
		await this.reset();
		await this.requestFunc({ method: 'get', url: `/customer/order/cart/`, data: { limit: 10 } });
	},
	methods: {
		...mapMutations('requestList',['changeValue']),
		...mapActions('requestList', ['reset','requestFunc']), 
		totalFunc(type){
			let totalStutas=!this[type];
			let group=[];
			if(totalStutas) this.ListValue.forEach(item=>group.push(item.id));
			this.group=group;
			this[type]=totalStutas;
		},
		addressListFunc(){
			uni.navigateTo({
				url:"/loginPages/addressList/index"
			})
		},
		//合计
		computer(){
			let point_price=0,price=0;
			if(!this.status && this.group.length>0) this.ListValue.forEach(item=>{
				if(this.group.findIndex(it=>it==item.id)!=-1){
					point_price+=item.point_price*1*item.quantity;
					price+=item.price*1*item.quantity;
				}
			})
			this.point_price=point_price;
			this.price=price;
		},
		detailFunc(id){
			uni.navigateTo({
				url:`/pages/detail/index?id=${id}`
			})
		},
		chooseShop(e) {
			let {value}=e.detail;
			if(value.length==this.ListValue.length) {
				if(this.status){
					this.total_lockB=true;
				}else{
					this.total_lockA=true;
				}
			}else{
				if(this.status){
					this.total_lockB=false;
				}else{
					this.total_lockA=false;
				}
			}
			this.group=value;
		},
		// 更改商品数量
		async changeNum(index,val){
			let ListValue=JSON.parse(JSON.stringify(this.ListValue));
			let {id}=ListValue[index];
			var result =await api.quantity({id,quantity:val});
			if(result.code===0){
				ListValue[index]['quantity']=val;
				this.changeValue(ListValue);
				this.computer();
			}
		},
		// 下拉刷新
		async refresherpulling() {
			await this.reset();
			await this.requestFunc({ method: 'get', url: `/customer/order/cart/`, data: { limit: 10 } });
		},
		// 上拉加载
		async scroll() {
			await this.requestFunc({ method: 'get', url: `/customer/order/cart/`, data: { limit: 10 } });
		},
		payFunc() {
			uni.navigateTo({
				url: '/indexPages/pay/index'
			});
		}
	},
	watch: {
		group:{
			handler(newVal,oldVal){
			  this.computer();
			},
			deep:true
		},
		status: {
			handler(newVal, oldVal) {
			   this.group=[];
			   this.total_lockA=false;
			   this.total_lockB=false;
			},
			deep: true
		}
	},
	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: 100rpx;
		.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>