292 lines
9.6 KiB
Vue
292 lines
9.6 KiB
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}`
|
||
})
|
||
}
|
||
} 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>
|