352 lines
12 KiB
Vue
352 lines
12 KiB
Vue
<template>
|
|
<view v-if="pageShow">
|
|
<!-- 使用标题栏 -->
|
|
<status-nav :statusBackw="true" :whereCome="2" :iscenter="true" :statusTitleImg="true" :statusTitle="true" :title-val="'购物车'" :tabcolor="'#ffffff'"></status-nav>
|
|
<!-- 列表 -->
|
|
<view :style="{paddingTop:(statusHNH+10)+'px'}">
|
|
<view class="padding-zy20 bacb">
|
|
<view v-if="gouwList.length!=0" :class="delCur==index?'fadeOutUp ':''" class="padding-sx30 disba borbot animated " v-for="(item,index) in gouwList" :key="index">
|
|
<view class="disac">
|
|
<!-- 单选按钮 -->
|
|
<view class="margin-y20"><label class="radio"><radio @tap.stop="choose(index)" :checked="item.status" color="#ff7800"/></label></view>
|
|
<!-- 商品图片 -->
|
|
<image @tap="checkDetail(item.spu_id)" class="radius10 gouwcimg" :src="item.src" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="padding-z20">
|
|
<view class="dis">
|
|
<!-- 商品标题 -->
|
|
<view class="clips2 fon28 color33 margin-y20 width100" style="line-height: 46rpx;">{{item.title}}</view>
|
|
<!-- 删除按钮 -->
|
|
<image @tap.stop="clear(item.id,index)" class="flexs margin-s10" style="width: 30rpx;height: 30rpx;" src="../../../static/img/gouwc/del.png" mode=""></image>
|
|
</view>
|
|
<view @tap="chooseCate(index)" class="disbcac margin-s10 margin-x20 xuanz posir fon24 color9 ">
|
|
<!-- 商品类型 -->
|
|
<view class="clips1">{{item.cateArr[0].sku_name}}</view>
|
|
<!-- 下键 -->
|
|
<image class="margin-z20 flexs" style="width: 17rpx;height: 10rpx;" src="../../../static/img/gouwc/xia.png" mode=""></image>
|
|
<!-- 选择框 -->
|
|
<view v-if="current==index" class="posia textc padding-x20" style="top: 60rpx;left: 0;right: 0;background-color: rgb(245, 245, 245);border-radius: 6rpx;">
|
|
<scroll-view scroll-y="true" style="height: 100rpx;">
|
|
<view class="discc">
|
|
<view @tap="cateChoose(index,index1)" class="clips1 margin-s20" v-for="(item1,index1) in item.cateArr" :key="index1" style="width: 80%;">{{item1.sku_name}}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="margin-s30 disba">
|
|
<view class="colorf6 fon24 bold width100">￥<text class="fon28">{{item.price}}</text>.0</view>
|
|
<view class="disac">
|
|
<!-- 递减 -->
|
|
<button @tap.stop="deladdEvent( item.id , index , 0)" class="deladd fon36 color33" :disabled="item.num==1">-</button>
|
|
<!-- 数量框 禁止输入-->
|
|
<input type="text" disabled v-model="item.num" style="width: 60%;background-color: #F5F5F5;text-align: center;padding: 4rpx 0;border-radius: 4rpx;"/>
|
|
<!-- 数量框 可以输入-->
|
|
<!-- <input type="text" @blur="blurEv(index)" @input="changeInput(index,0,$event)" :value="item.num" style="width: 60%;background-color: #F5F5F5;text-align: center;padding: 4rpx 0;border-radius: 4rpx;"/> -->
|
|
<!-- 递增 -->
|
|
<button @tap.stop="deladdEvent( item.id , index , 1)" class="deladd fon36 color33">+</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="gouwList.length==0" class="kongk">空空如也</view>
|
|
</view>
|
|
</view>
|
|
<!-- 猜你喜欢 -->
|
|
<view class="disbcac padding-sx40">
|
|
<view class="gouwcxian "></view>
|
|
<image class="margin-zy20 margin-s10 gouwchh" src="/static/img/gouwc/heh.png" mode=""></image>
|
|
<view class="bold fon32">猜你喜欢</view>
|
|
<view class="gouwcxian margin-z20"></view>
|
|
</view>
|
|
<!-- 喜欢列表 -->
|
|
<twocoluList @addChe="addChe" :dataList="dataList"></twocoluList>
|
|
<!-- 结算 -->
|
|
<view class="posi-bzy disba padding-zy20 gouwcb-box">
|
|
<view class="disac">
|
|
<label class="radio disac" style="margin-top: -6rpx;">
|
|
<radio :checked="allcheck" @tap="allchoose" color="#ff7800"/><view class="margin-z10 margin-y20 margin-s10">全选</view>
|
|
</label>
|
|
<view class="fon36">合计:<label class="colorf6 bold">￥{{allPrice}}.0</label></view>
|
|
</view>
|
|
<button v-if="allNum!=0" :disabled="disb" @tap="gopay" class="colorb bold gouwcbtn">{{disb?'正在前往...':'去结算('+allNum+')'}}</button>
|
|
<button v-else @tap="goGouw" class="colorb bold gouwcbtn">去购物</button>
|
|
</view>
|
|
<view style="height: 56px;"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import twocoluList from '@/components/twocoluList.vue';
|
|
export default {
|
|
components:{
|
|
twocoluList
|
|
},
|
|
data() {
|
|
return {
|
|
current:'-1',
|
|
delCur:'-1',
|
|
gouwList:[],
|
|
dataList:[],
|
|
disb:false,
|
|
allcheck:false,
|
|
cunIdArr:[],
|
|
newId:'',
|
|
newNum:1,
|
|
newType:'',
|
|
inputNum:'',
|
|
dangVal:'',
|
|
orderList:[],//暂存准备下单的订单的coding、num
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|
pageShow:true,
|
|
page:1,
|
|
size:10,
|
|
total:'',
|
|
isZanw:true,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.$toolAll.tools.guoq()
|
|
uni.hideTabBar()
|
|
this.checkGouCList()
|
|
this.allcheck = false
|
|
uni.removeStorageSync('orderInfo')
|
|
},
|
|
onReachBottom() {
|
|
// console.log(this.total,this.productList.length);
|
|
if(this.total!=this.dataList.length){
|
|
this.page++
|
|
this.like()//调用自主预约列表事件
|
|
} else {
|
|
if(this.isZanw) this.$toolAll.tools.showToast('暂无更多商品列表','none',1000)
|
|
this.isZanw = false
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.like()
|
|
},
|
|
computed:{
|
|
allPrice(){
|
|
let sum = 0
|
|
this.gouwList.forEach(item=>{
|
|
if(item.status) sum += item.price*1 * item.num
|
|
})
|
|
return sum;
|
|
},
|
|
allNum(){
|
|
let num = 0
|
|
this.gouwList.forEach(item=>{
|
|
if(item.status) num +=item.num*1
|
|
})
|
|
return num;
|
|
},
|
|
zhunOrder(){
|
|
let arr = []
|
|
// console.log('数据：',this.gouwList);
|
|
this.gouwList.forEach(item=>{
|
|
let buyObj = {
|
|
sku_coding:item.coding,
|
|
num:item.num
|
|
}
|
|
if(item.status) arr.push(buyObj)
|
|
})
|
|
return arr
|
|
}
|
|
},
|
|
methods: {
|
|
like(){//查询猜你喜欢列表
|
|
this.$requst.post('product/spu/guess',{page:1,size:50}).then(res=>{
|
|
// console.log('猜你喜欢',res);
|
|
if(res.code==0){
|
|
this.pageShow = true
|
|
this.total = res.data.total
|
|
if(res.data.list.length!=0){
|
|
res.data.list.forEach(item=>{
|
|
let likeObj = {
|
|
id:item.main_sku.id,
|
|
spu_id:item.id,
|
|
src:this.$http + item.main_sku.main_image,
|
|
title:item.name,
|
|
price:item.main_sku.cur_price/100,
|
|
tags:item.tags
|
|
}
|
|
this.dataList.push(likeObj)
|
|
})
|
|
}
|
|
}
|
|
},error=>{})
|
|
},
|
|
checkGouCList(){//购物车商品查询事件
|
|
this.gouwList = []
|
|
let gouParma = {
|
|
page:1,
|
|
size:50//后台默认20
|
|
}
|
|
this.$requst.post('order/shopping-cart',gouParma).then(res=>{
|
|
// console.log('购物车',res);
|
|
if(res.data.length!=0){
|
|
res.data.forEach(item=>{
|
|
if(item.sku!=null){
|
|
let gouObj = {
|
|
id:item.id,
|
|
spu_id:item.spu_id,
|
|
coding:item.sku.coding,
|
|
src:this.$http + item.sku.sku_cover,
|
|
status:false,
|
|
title:item.spu_name,
|
|
price:parseInt(item.price)/100,
|
|
num:item.num,
|
|
cateArr:item.skus
|
|
}
|
|
this.gouwList.push(gouObj)
|
|
} else {
|
|
// console.log('id:',item.id);
|
|
this.$requst.post('order/shopping-cart-del',{id:item.id}).then(res=>{},error=>{})
|
|
}
|
|
// console.log('数据：',this.gouwList);
|
|
})
|
|
}
|
|
// console.log(res);
|
|
},error=>{})
|
|
},
|
|
cateChoose(index,index1){//类型选择
|
|
let dang = this.gouwList[index].cateArr[index1];
|
|
let num = this.gouwList[index].cateArr.indexOf(dang)
|
|
if(num!=-1){
|
|
this.gouwList[index].cateArr.splice(num,1)
|
|
this.gouwList[index].cateArr.unshift(dang)
|
|
}
|
|
|
|
this.gouwList[index].src = this.$http + this.gouwList[index].cateArr[0].sku_cover
|
|
this.gouwList[index].coding = this.gouwList[index].cateArr[0].coding
|
|
this.gouwList[index].price = this.gouwList[index].cateArr[0].sku_price/100
|
|
},
|
|
chooseCate(index){//类型选择调起
|
|
// console.log('下拉选择：'+index);
|
|
this.current==index ? this.current = '-1' : this.current = index
|
|
},
|
|
gopay(){//去结算事件
|
|
let ya = this
|
|
let storageAddress = uni.getStorageSync('storageAddress')
|
|
let buyParma = {
|
|
sku_list: this.zhunOrder,
|
|
address_id: storageAddress || ''
|
|
}
|
|
// console.log('参数',buyParma);
|
|
this.$requst.post('order/prepare-info',buyParma).then(res=>{
|
|
// console.log(res);
|
|
if(res.code==0){
|
|
ya.disb = true
|
|
uni.setStorageSync('orderInfo',res.data)
|
|
setTimeout(function(){
|
|
ya.disb = false
|
|
},2000)
|
|
uni.navigateTo({
|
|
url:'/pagesA/confirmOrder/confirmOrder'
|
|
})
|
|
}
|
|
},error=>{ya.disb = false})
|
|
},
|
|
choose(index){//单选
|
|
this.gouwList[index].status = !this.gouwList[index].status
|
|
let one = this.gouwList.filter(function(item){
|
|
return item.status == false;
|
|
})
|
|
one.length==0 ? this.allcheck = true : this.allcheck = false
|
|
},
|
|
allchoose(){//全选
|
|
this.allcheck = !this.allcheck
|
|
this.gouwList.forEach((item,index)=>{
|
|
this.allcheck ? item.status = true : item.status = false
|
|
})
|
|
},
|
|
deladdEvent(id,cur,index){//数量加减事件
|
|
if(index==0){//减少数量
|
|
this.gouwList[cur].num--
|
|
this.newType = 'down'
|
|
} else {//增加数量
|
|
this.gouwList[cur].num++
|
|
this.newType = 'up'
|
|
}
|
|
this.newId = id
|
|
this.changeNum()//调用数量变更事件
|
|
},
|
|
changeNum(){//执行数量变更事件
|
|
let bparma = {
|
|
id:this.newId,
|
|
num:this.newNum,
|
|
type:this.newType
|
|
}
|
|
this.$requst.post('order/shopping-cart-change-num',bparma).then(res=>{},error=>{})
|
|
},
|
|
// changeInput(index,id,e){//数量输入框事件
|
|
// // console.log(index,id);
|
|
// this.newId = id
|
|
// this.inputNum = e.target.value
|
|
// this.dangVal = this.gouwList[index].num
|
|
// if(this.inputNum>this.dangVal){
|
|
// this.newType = 'up'
|
|
// } else if(this.inputNum<this.dangVal){
|
|
// this.newType = 'down'
|
|
// }
|
|
// this.newNum = this.gouwList[index].num = this.inputNum
|
|
// },
|
|
// blurEv(index){
|
|
// if(this.inputNum==''){
|
|
// this.gouwList[index].num = this.dangVal
|
|
// this.$toolAll.tools.showToast('请输入正确的产品数量')
|
|
// } else {
|
|
// this.changeNum()//调用数量变更事件
|
|
// }
|
|
// },
|
|
goGouw(){//去购物按钮事件
|
|
// console.log('去购物');
|
|
uni.setStorageSync('whereCome',0)
|
|
uni.switchTab({
|
|
url:'/pages/tabbar/product/product'
|
|
})
|
|
},
|
|
clear(id,index){//删除商品
|
|
// console.log('删除商品：'+id);
|
|
uni.showModal({
|
|
content:'确定要删除该商品吗？',
|
|
cancelText:'取消',
|
|
cancelColor:'#999999',
|
|
confirmText:'确定',
|
|
confirmColor:'#FF7800',
|
|
success: (res) => {
|
|
if(res.confirm){
|
|
this.$requst.post('order/shopping-cart-del',{id:id}).then(res=>{
|
|
if(res.code==0){
|
|
this.delCur = index
|
|
setTimeout(()=>{
|
|
this.delCur = '-1'
|
|
this.gouwList.splice(index,1)
|
|
},500)
|
|
// this.checkGouCList()
|
|
this.$toolAll.tools.showToast('删除商品成功')
|
|
}
|
|
},error=>{})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
checkDetail(id){//查看商品详情
|
|
// console.log('查看详情：'+id);
|
|
uni.navigateTo({
|
|
url:'/pagesA/productDetail/productDetail?index=0&id='+id
|
|
})
|
|
},
|
|
addChe(){//加入购物车事件
|
|
let ya = this
|
|
setTimeout(function(){
|
|
ya.checkGouCList()
|
|
},500)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
|
|
</style>
|