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 v-if="Object.keys(addressValue).length>0" @click="addressListFunc" class="left text-cut text-grey">
					<text class="cuIcon-locationfill text-green"></text>
					配送至{{ addressValue.province }}{{ addressValue.city }}{{ addressValue.area }}{{ addressValue.address }}
				</view>
				<view v-else class="left"> </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="index" :checked="group.some(it => it == index)" style="transform: scale(0.6);" />
						<view class="right flex margin-left">
							<image  @click="detailFunc(item.commodity_details)" mode="aspectFit" :src="item.image | lazyImage" class="image radius margin-right-sm"></image>
							<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 v-if="bind==1" 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="disabled" @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 @click="deleteFunc" :disabled="disabled" class="cu-btn bg-red round shadow-blur margin-right">删除</button>
					<button @click="collectFunc" :disabled="disabled" 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 {debounce} from "@/common/debounceThrottle/index.js"
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('addressDefault', ['addressValue']),
		...mapState('requestList', ['ListValue', 'currentPage', 'totalPage']),
		height() {
			return `calc(100vh - 280rpx - ${CustomBarHeight}px)`;
		},
		disabled() {
			let bind = this.bind;
			let group = this.group;
			return bind != 1 || group.length == 0;
		}
	},
	onLoad() {
		
	},
	async onShow() {
		await this.reset();
		if(this.bind!=1) return false;
		await this.requestFunc({ method: 'get', url: `/customer/order/cart/`, data: { limit: 10 } });
		await this.$store.dispatch('addressDefault/requestFunc');
	},
	methods: {
		...mapMutations('requestList', ['changeValue']),
		...mapActions('requestList', ['reset', 'requestFunc']),
		totalFunc(type) {
			let totalStutas = !this[type];
			let group = [];
			if (totalStutas) this.ListValue.forEach((item, index) => group.push(index));
			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();
			if(this.bind!=1) return false;
			await this.requestFunc({ method: 'get', url: `/customer/order/cart/`, data: { limit: 10 } });
		},
		// 上拉加载
		async scroll() {
			if(this.bind!=1) return false;
			await this.requestFunc({ method: 'get', url: `/customer/order/cart/`, data: { limit: 10 } });
		},
		payFunc(){
			debounce(this._payFunc(),3000)
		},
		_payFunc() {
			let listValue = JSON.parse(JSON.stringify(this.ListValue));
			let group = JSON.parse(JSON.stringify(this.group));
			group = group.map(item => {
				let ItemDate = listValue[item];
				let img = ItemDate['image'];
				let count = ItemDate['quantity'];
				delete ItemDate['image'];
				delete ItemDate['quantity'];
				return { ...ItemDate, img, count };
			});
			uni.navigateTo({
				url: `/indexPages/pay/index?list=${JSON.stringify(group)}`
			});
		},
		deleteFunc(){
			debounce(this._deleteFunc(),3000)
		},
		async _deleteFunc() {
			let listValue = JSON.parse(JSON.stringify(this.ListValue));
			let group = JSON.parse(JSON.stringify(this.group));
			group = group.map(item => listValue[item]['id']);
			await api.deleteShop({ids:JSON.stringify(group)});
			this.group=[];
			this.total_lockB = false;
			await this.reset();
			await this.requestFunc({ method: 'get', url: `/customer/order/cart/`, data: { limit: 10 } });
		},
		collectFunc(){
		    debounce(this._collectFunc(),3000)
		},
		async _collectFunc(){
			let listValue = JSON.parse(JSON.stringify(this.ListValue));
			let group = JSON.parse(JSON.stringify(this.group));
			group = group.map(item => listValue[item]['commodity_details']);
			var result= await api.favorite({ids:JSON.stringify(group)})
			if(result.code==0) uni.showToast({
				title:"成功移入收藏",
				icon:"success",
				success:()=>{
					this.group=[];
					this.total_lockB = false;
				}
			})
		}
	},
	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
		}
	},
	// 下拉刷新
	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>