martial-arts/pagesB/cart/cart.vue

<template>
	<view>
		<status-container titlet="购物车" returnc="#FFFFFF">
			<view slot="content" style="margin-top: -20rpx;">
				<view class="bacf boxshowb posi-sticky" :style="{top:newtop+'px'}">
					<view class="pad-zy30 pad-sx24 disjbac pad-zy30 pad-sx20">
						<view class="fon26 col26">四川省成都市武侯区</view>
						<image @tap="$toolAll.tools.goPage(`/pagesB/add-address/add-address?id=${0}`)" src="/static/tabbar/icon-edit.png" mode="" style="width: 26rpx;height: 28rpx;" lazy-load></image>
					</view>
				</view>
				<view v-if="datalist.length" class="bacf mar-s30 pad-zy30 pad-x30 boxshowb">
					<view class="disac animated pad-sx30 bbot" :class="item.ifExit ? 'fadeInUp' : 'fadeOutDown'" :style="{display: item.ifShow ? 'flex' : 'none'}" v-for="(item,index) in datalist" :key="index">
						<!-- 选择 -->
						<view class="flexs mo-item" :class="item.ifcheck ? 'active-item' : ''" @tap="chooseEv(index)"></view>
						<!-- 商品图片 -->
						<image @tap="chooseEv(index)" class="flexs mar-zy20" :src="item.imgsrc" mode="aspectFill" style="width: 194rpx;height: 136rpx;" lazy-load></image>
						<view class="disjb fc width100" style="height: 136rpx;">
							<view @tap="goDetail(item.id)">
								<!-- 商品标题 -->
								<view class="fon24 clips2 col26">{{item.title}}{{datalist.length}}</view>
							</view>
							<view class="disjbac">
								<!-- 商品价格 -->
								<view class="fon24 col-e42417 bold">￥{{$toolAll.tools.addXiaoShu(item.price)}}</view>
								<!-- 商品数量 -->
								<view class="disac overflow" style="height: 50rpx;">
									<!-- 减数量 -->
									<view class="borbot-df disjcac radius4" @tap="addCutEv(index,0)" style="color: #d1d1d1;width: 50rpx;height: 50rpx;">
										<i class="icon icon-cut fon20" :style="{backgroundColor: item.num==minNum || !ifManage ? '#FFFFFF' : '#000000'}"></i>
									</view>
									<!-- 实际数量 -->
									<input type="digit" @blur="blurEv(index,$event)" @focus="focusEv(item.num)" class="fon24 tcenter countInput" v-model="item.num">
									<!-- 加数量 -->
									<view class="borbot-df disjcac radius4" @tap="addCutEv(index,1)" style="color: #d1d1d1;width: 50rpx;height: 50rpx;">
										<i class="icon icon-add fon20" :style="{backgroundColor: item.num==maxNum || !ifManage ? '#FFFFFF' : '#000000'}"></i>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<pitera v-else textStr="您的购物车：这也空空，那也空空(*^▽^*)" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
				<!-- 热门产品推荐 -->
				<view class="pad-zy30 mar-x30 mar-s40">
					<view class="disjcac" style="border-bottom: 2rpx solid #ebe3e2;">
						<view class="col26 fon30 pad-zy14" style="background-color: #fff6f5;margin-bottom: -20rpx;">热门产品推荐</view>
					</view>
				</view>
				<view class="pad-zy20">
					<list @goDetail="goDetail"></list>
					<list @goDetail="goDetail"></list>
				</view>
				<!-- 底部导航 -->
				<view class="disjbac bacf pad20 posixzy fon24 boxshowt">
					<view class="disac" @tap="chooseAllEv">
						<view class="flexs mo-item mar-y10" :class="ifSelectAll ? 'active-item' : ''"></view>
						<span>全选</span>
					</view>
					<view class="disac">
						<view class="">合计：<span class="fon38 colf8 bold">￥{{allPrice}}</span></view>
						<view @tap="goConfirmOrder" class="fon24 radius32 colf disjcac mar-z20" style="width: 184rpx;height: 64rpx;background-color: #f37617;">去支付</view>
					</view>
				</view>
			</view>
		</status-container>
	</view>
</template>

<script>
	// 底部组件
	import footTab from '@/components/foot-tabs/foot-tab.vue';
	import list from '@/components/list.vue';
	import swiperPu from '@/components/swipers/swiper-pu.vue';
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{'foot-tab' :footTab,list,swiperPu,pitera},
		data() {
			return {
				newtop:uni.getSystemInfoSync().statusBarHeight + 42,
				richText:'',
				ifLogin:false,
				datalist:[
					{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
					{id:1,imgsrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',title:'商品标题',price:199,num:1,ifcheck:false,ifExit:true,ifShow:true},
				],
				ifSelectAll:false,//是否全选
				originalNum:0,//当前输入框原值
				maxNum:20,//最大可输入数量
				minNum:1,//最小可输入数量
			}
		},
		onShow() {
			// 开启banner图自动轮播
			this.$store.commit('setAutoplay',true);
		},
		onHide() {
			// 关闭banner图自动轮播
			this.$store.commit('setAutoplay',false);
		},
		computed:{
			// 总价及合计
			allPrice() {
				let allPrice = 0;
				this.datalist.forEach(item=>{
					if(item.ifcheck) {
						allPrice += this.$toolAll.tools.operationEv(item.price,item.num,'*',2)*1;
					}
				})
				return this.$toolAll.tools.addXiaoShu(allPrice);
			},
			// 要删除的数量
			delNum() {
				let delNum = 0;
				this.datalist.forEach(item=>{
					if(item.ifcheck) {
						delNum += 1;
					}
				})
				return delNum;
			}
		},
		onLoad() {
			
		},
		methods: {
			// 前往确认订单页
			goConfirmOrder(){
				uni.navigateTo({
					url:'/pagesB/confirm-order/confirm-order'
				})
			},
			// 全选事件
			chooseAllEv(){
				this.ifSelectAll = !this.ifSelectAll;
				this.datalist.forEach(item=>item.ifcheck = this.ifSelectAll ? true : false);
			},
			// 选中事件
			chooseEv(index) {
				this.datalist[index].ifcheck = !this.datalist[index].ifcheck;
				this.judgeSelectAllEv();
			},
			// 判断全选中是否被选中
			judgeSelectAllEv() {
				let exit = this.datalist.findIndex(item=>item.ifcheck==false);
				if(exit!=-1) {
					this.ifSelectAll = false
				} else {
					this.ifSelectAll = true;
				}  
			},
			// 去商品详情事件
			goDetail(id){
				uni.navigateTo({
					url:'/pagesB/shop-detail/shop-detail'
				})
			},
			// 数量加减事件
			addCutEv(index,num) {
				// 不在管理状态下：可进行加减
				if(num) {
					// 加 ，如果当前商品数量不等于最大值
					if(this.datalist[index].num != this.maxNum) {
						this.datalist[index].num++;
					}
				} else {
					// 减 ，如果当前商品数量大于最小值
					if(this.datalist[index].num > this.minNum) {
						this.datalist[index].num--;
					} else {
						this.datalist[index].ifExit = false;
						setTimeout(()=>{
							this.datalist.splice(index,1);
						},500)
					}
				}
				console.log(this.allPrice,'总价');
			},
			// 输入框获取焦点事件
			focusEv(num) {
				// 储存当前商品的原始数值
				this.originalNum = num;
			},
			// 输入框失去焦点事件
			blurEv(index,e) {
				// 失去焦点时，获取当前输入框里的数值
				let currentNum = e.detail.value*1;
				// 如果当前输入框的值不等于0或空，并且当前输入框的值大于最大值，当前商品的数量 = 最大值， 否则为当前输入框输入的值
				this.datalist[index].num = currentNum ? currentNum > this.maxNum ? this.maxNum : currentNum : this.originalNum;
			}
		}
	}
</script>

<style>
	.countInput{width: 68rpx;border-top: 2rpx solid #DFDFDF;border-bottom: 2rpx solid #DFDFDF;border-radius: 4rpx;height: 50rpx;box-sizing: border-box;}
</style>