hengmei-two/pagesA/shopCart/shopCart.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'购物车'" :statusTitle="true"></status-nav>
		<view :style="{paddingTop: statusHeight+'px'}" class="pad-zy30 pad-x160">
			<view class="bacf radius20 mar-s20 pad20" v-if="cartList.length!=0">
				<view class="fon28 col3 disjbac" style="height: 43rpx;">
					<view class="bold">订单信息</view>
					<view v-if="!cancle_del && cartList.length!=0" @tap="guanEv(0)">管理</view>
					<view v-if="cancle_del && cartList.length!=0" @tap="guanEv(1)" class="edit-btn">管理 ×</view>
				</view>
				<view v-for="(item,index) in cartList" :key="index" class="disjbac pad-sx40 borbot posir cart-list-box" @touchstart="moveStart(index,$event)" @touchend="moveEnd">
					<view class="disjbac width100" :style="{marginLeft:(showDel && isDang==index)?'-70px':'',paddingRight:(showDel && isDang==index)?'70px':''}">
						<!-- 圈 -->
						<view @tap="chooseItem(index)">
							<image v-if="item.isActive" src="/static/public/chooseFS.png" class="flexs chooseDX" mode=""></image>
							<image v-else src="/static/public/cancle-FS.png" class="flexs chooseDX" mode=""></image>
						</view>
						<image lazy-load @tap="chooseItem(index)" :src="item.imgSrc" class="order-image mar-z25 flexs" mode="aspectFill"></image>
						<view class="width100 disjbac fc" style="height: 166rpx;">
							<view class="width100">
								<view @tap="goShoptDetail(item.spu_id,item.spu_activity_id)" class="fon28 col3 bold clips2">{{item.title}}</view>
								<view class="order-sy">{{item.sku_name}}</view>
							</view>
							<view class="disjbac width100 mar-s10">
								<view class="order-item-price"><span v-if="item.is_score!=1">￥</span><span v-else>积分：</span>{{item.price}} <span class="fon20 mar-z10" :style="{color:publicColor}" style="font-weight: 400;">{{item.mch_type_text}}</span></view>
								<view class="fon26 col3 disac bold cart-input-box">
									<image @tap="deladdEvent(index , 0)" src="/static/public/del.png" mode=""></image>
									<input type="text" @input="inputNum($event,index)" v-model="item.num"/>
									<image @tap="deladdEvent(index , 1)" src="/static/public/add.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view v-if="showDel && isDang==index" @tap="deltItem(index)" class="item-del-btn">删除</view>
				</view>
			</view>
			<nothing-page v-if="cartList.length==0" :content="'暂无更多商品'"></nothing-page>
			<view class="disjbac posixzy bacf pad-zy32" style="height: 124rpx;line-height: 124rpx;">
				<view class="disac" @tap="chooseAll">
					<view class="chooseAll-box">
						<view v-if="isChooseAll"></view>
					</view>
					<view class="fon28 col3 mar-z10">全选</view>
				</view>
				<!-- 去支付 -->
				<view v-if="!cancle_del" class="disjbac">
					<view>
						<view class="fon28" v-if="isScore!='score'">合计：<span class="fon40 bold colf8">￥{{allPrice}}</span></view>
						<view class="fon28" v-else>合计：<span class="fon40 bold colf8">{{allPrice}}</span></view>
					</view>
					<view @tap="goGetReadyDan" class="colf fon30 bold mar-z10 goBuy-btn" style="background: #3875F6;">{{cartList.length==0?'去购物':'去支付'}}</view>
				</view>
				<!-- 删除 -->
				<view @tap="delBtn" v-else class="colf fon28 bold goBuy-btn" style="background: #F85050;">删除</view>
			</view>
		</view>
		<!-- 用户信息授权，手机号授权 -->
		<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDel:false,
				startX:'',//开始位置
				endX:'',//结束位置
				cancle_del:false,
				cartList:[],//购物车列表
				isChooseAll:false,//是否全选
				isDang:0,//当前抹动的item
				newList:[],//暂存准备购买商品
				delIndex:[],//待删除商品的ID
				page:1,
				size:10,
				isScore:'',
				timeout:null
			}
		},
		computed: {
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		onShow() {
			uni.removeStorageSync('orderList');
			uni.removeStorageSync('payType');
		},
		onLoad(options) {
			options.isScore=='score' ? this.isScore = 'score' : ''
			if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
				this.checkList();
			}
		},
		computed:{
			allPrice(){
				let sum = 0
				this.cartList.forEach(item=>{
					if(item.isActive)	sum += item.price*1 * item.num
				})
				return sum;
			},
		},
		methods: {
			// 数量输入事件
			inputNum(e,index){
				clearTimeout(this.timeout);
				let str = e.detail.value;
				this.timeout = setTimeout(()=>{
					if(str=='' || str==0){
						this.cartList[index].num = 1;
					}
				},500)
			},
			checkList(){//查询列表事件
				this.$requst.post('order/shopping-cart',{page:this.page,size:this.size,type:this.isScore}).then(res=>{
					if(res.code==0){
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let nprice = '';
								item.is_score ==1 ? nprice = item.score : nprice = item.sku.sku_price/100;
								let obj = {
									id:item.id,
									spu_id:item.spu.id,
									spu_activity_id:item.spu_activity_id,//活动商品id
									imgSrc:this.$http + item.spu.spu_cover,
									coding:item.sku.coding,
									title:item.spu_name,
									sku_name:item.sku.sku_name,
									price:nprice,//实际价格
									num:item.num,
									isActive:false,
									is_score:item.is_score,//是否是积分
									group_id:0,//0发起拼团 1参与拼团 2单独购买
									mch_type:item.spu.mch_type,//商品类型
									mch_type_text:item.spu.mch_type_text//商品类型描述
								}
								this.cartList.push(obj)
							})
						}
					}
				})
			},
			deltItem(index){//删除购物车
				this.$requst.post('order/shopping-cart-del',{id:this.cartList[index].id}).then(res=>{
					if(res.code==0){
						this.cartList.splice(index,1);
						this.$toolAll.tools.showToast('删除成功');
					}
				})
			},
			deladdEvent(cur,index){//数量加减事件
				if(index==0){//减少数量
					if(this.cartList[cur].num>1) this.cartList[cur].num--;
				} else {//增加数量
					this.cartList[cur].num++;
				}
				this.$requst.post('order/shopping-cart-change-num',{id:this.cartList[cur].id,num:this.cartList[cur].num}).then(res=>{})
				this.zanList();
			},
			chooseItem(index){//单选事件
				this.cartList[index].isActive = !this.cartList[index].isActive;
				let one = this.cartList.filter(function(item){
					 return item.isActive == false; 
				})
				one.length==0 ? this.isChooseAll = true : this.isChooseAll = false
				this.zanList();
			},
			chooseAll(){//全选事件
				this.isChooseAll = !this.isChooseAll;
				this.cartList.forEach(item=>{
					this.isChooseAll ? item.isActive = true : item.isActive = false;
				})
				this.zanList();
			},
			zanList(){//暂存选中商品事件
				this.delIndex = []
				this.newList = this.cartList.filter(item=>item.isActive==true);
				if(this.cancle_del){
					this.cartList.filter((item,index)=>{
						if(item.isActive) {
							this.delIndex.push(item.id);
						}
					});
				}
			},
			delBtn(){//底部删除事件
				this.delIndex.forEach(item=>{
					this.cartList.forEach((item1,index)=>{
						if(item==item1.id){
							this.cartList.splice(index,1);
							this.$requst.post('order/shopping-cart-del',{id:item1.id}).then(res=>{
								if(res.code==0){
									
								} else {
									this.$toolAll.tools.showToast(res.msg);
								}
							})
						}
					})
				})
				this.isChooseAll = false;
				if(this.cartList.length==0){
					this.cancle_del = false;
				}
			},
			guanEv(index){//管理切换事件
				index==0 ? this.cancle_del = true : this.cancle_del = false; 
				this.cartList.forEach(item=>item.isActive=false);
				this.isChooseAll = false;
			},
			moveStart(index,e){//移动开始
				this.isDang = index;
				this.startX = e.touches[0].pageX
			},
			moveEnd(e){//移动结束
				this.endX = e.changedTouches[0].pageX
				if(this.startX-this.endX>0){
					this.showDel = true;
				} else this.showDel = false;
			},
			goGetReadyDan(){
				let newUrl = '';
				let isNei = '';
				if(this.isScore=='score') {
					isNei = 3
				}
				if(this.cartList.length == 0) {
					if(isNei==3){
						newUrl = '/pagesA/pointsMall/pointsMall';
					} else {
						newUrl = '/pages/tabbar/shop/shop';
					}
					uni.navigateTo({
						url:newUrl
					})
				} 
				if(this.cartList.length > 0) {
					// console.log(this.isAllEqual(this.newList));
					if(this.isAllEqual(this.newList) || this.newList.length==1){
						uni.setStorageSync('orderList',this.newList);
						if(this.newList.length==0){
							this.$toolAll.tools.showToast('请选择要支付的商品');
						} else {
							uni.setStorageSync('payType',0);
							uni.navigateTo({
								// url:`/pagesA/getReadyDan/getReadyDan?isNei=${isNei}`
								url:`/pagesA/getReadyDan/getReadyDan-two?isNei=${isNei}`
							})
						}
					} else {
						this.$toolAll.tools.showToast('请选择相同类型的商品下单')
					}
				} 
			},
			// 判断数组对象中的某个字段的值是否都相等
			isAllEqual(array) {
			    if (array.length > 0) {
			        return !array.some(function(value, index) {
			            return value.mch_type !== array[0].mch_type;
			        });
			    } else {
			        return true;
			    }
			},
			goShoptDetail(id,is_activity){
				// &isIntegral=${this.dataList[index].isIntegral}
				if(this.isScore=='score'){
					uni.navigateTo({
						url:`/pagesB/shopDetail/shopDetail?id=${id}&isIntegral=true`
					})
				} else {
					uni.navigateTo({
						url:`/pagesB/shopDetail/shopDetail?id=${id}&is_activity=${is_activity}`
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>