jiazhipeng
1 year ago
9 changed files with 1474 additions and 215 deletions
@ -0,0 +1,435 @@ |
|||
<template> |
|||
<view class="bg"> |
|||
|
|||
<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" |
|||
:safe-area="true" @change="popChange"> |
|||
<view class="cart-container" v-if="showCart"> |
|||
<view class="header-container"> |
|||
<view class="select-area flex flex-items-center" @click.stop="selectAllGoods"> |
|||
<view class="select-cycle" v-show="!selectAll"></view> |
|||
<view class="select-cycle selected" v-show="selectAll"> |
|||
<image src="https://yjdtadmin.sz-trip.com/uploads/20240726/a3d19f85c743c71320b3f879e01f6355.png"> |
|||
</view> |
|||
<view style="padding-left: 26rpx;" >全选</view> |
|||
</view> |
|||
<view class="delete-area flex flex-items-center" @click.stop="clearAllGoods"> |
|||
<image src="https://yjdtadmin.sz-trip.com/uploads/20240726/dde92bdf8b89abb93bd00472de06a615.png"></image> |
|||
<view style="padding-left: 8rpx;" >清空</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="content-container"> |
|||
<view class="content-item" v-for="(item,i) in cartData" :key="i" :model="cartData"> |
|||
<view class="flex flex-items-center" @tap.stop="setItemSelect(item)"> |
|||
<view class="select-cycle" v-show="!item.isSelected"></view> |
|||
<view class="select-cycle selected" v-show="item.isSelected"> |
|||
<image src="https://yjdtadmin.sz-trip.com/uploads/20240726/a3d19f85c743c71320b3f879e01f6355.png"> |
|||
</view> |
|||
<view style="padding-left: 26rpx;flex:1"> |
|||
<view class="commodity box" > |
|||
<image class="img" :src="showImg(item.Specifications_image)" mode="aspectFill"></image> |
|||
<view class="title goods-text-area"> |
|||
<view class="commodity-info"> |
|||
<view class="text-overflowRows" style="font-weight: bold;">{{ item.good_name }}</view> |
|||
<view class="text-overflowRows" style="font-size: 27rpx;color: #999999;padding-top: 10rpx;">{{ item.Specifications_name }}</view> |
|||
</view> |
|||
<view class="flex flex-between"> |
|||
<view class="commodity-price"> |
|||
￥ <view style="font-size: 40rpx;">{{item.Specifications_money/100}}</view> |
|||
</view> |
|||
<view class="add-num-area"> |
|||
<image @click.stop="addBuyNum(item,-1,i)" |
|||
:src="(item.num==1?'https://yjdtadmin.sz-trip.com/uploads/20231225/634870627318043881f9c417e5ad5b52.png':'https://yjdtadmin.sz-trip.com/uploads/20240726/ea81cd01a1f32a0226d33d8e35119c96.png')" ></image> |
|||
<view>{{item.num}}</view> |
|||
<image @click.stop="addBuyNum(item,1,i)" src="https://yjdtadmin.sz-trip.com/uploads/20240726/5028bbc810386a1f301a556672711f19.png" ></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
|
|||
|
|||
|
|||
|
|||
<slot name="content"></slot> |
|||
</view> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "cartData", |
|||
data() { |
|||
return { |
|||
cartData: [], |
|||
showCart: false, |
|||
selectAll: false, |
|||
canOpenpop: true, |
|||
allPrice: {allPrice:0, iNum:0, fNum:'00'} |
|||
} |
|||
}, |
|||
props:{ |
|||
paramData: { |
|||
type: Object, |
|||
}, |
|||
}, |
|||
|
|||
mounted() { |
|||
this.canOpenpop = true |
|||
this.refreshData() |
|||
uni.$on("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
beforeUnmount () { |
|||
uni.$off("updateDataByConnect",this.getDataByConnect) |
|||
}, |
|||
|
|||
methods: { |
|||
calNum () { |
|||
let res = 0 |
|||
this.cartData.forEach(v=>{ |
|||
res += v.num |
|||
}) |
|||
return res |
|||
}, |
|||
closePopup() { |
|||
this.$refs.popup.close() |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
openPop(){ |
|||
this.$refs.popup.open() |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
popChange (e) { |
|||
this.showCart = e.show |
|||
this.paramData.showCart = this.showCart |
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
|
|||
getDataByConnect(data) { |
|||
if (data.msgType == "updateCartDataInfo") { |
|||
this.refreshData(data) |
|||
} |
|||
}, |
|||
|
|||
|
|||
refreshData (data) { |
|||
let selectedData = [] |
|||
try { |
|||
selectedData = JSON.parse(uni.getStorageSync('cartDataInfo')); |
|||
} catch(e) { |
|||
selectedData = [] |
|||
} |
|||
|
|||
if (Array.isArray(data) && data.length>0) { |
|||
this.cartData = data |
|||
this.setAllSelect() |
|||
} else { |
|||
this.Post({},'/api/shopping/getShoppingList').then(res => { |
|||
if (res) { |
|||
this.cartData = (res.data || []).map(v=>{return {...v, isSelected:selectedData.includes(v.specifications_id)}}) |
|||
this.setAllSelect() |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
// 购物车操作 |
|||
setItemSelect(item) { |
|||
item.isSelected = !item.isSelected |
|||
// uni.setStorageSync('cartDataInfo', JSON.stringify(this.cartData)); |
|||
this.setAllSelect() |
|||
|
|||
}, |
|||
selectAllGoods(){ |
|||
let goods = this.cartData |
|||
if (this.selectAll) { |
|||
goods.forEach(v => v.isSelected = false) |
|||
this.selectAll = false |
|||
} else { |
|||
goods.forEach(v => v.isSelected = true) |
|||
this.selectAll = true |
|||
} |
|||
this.setAllSelect() |
|||
|
|||
}, |
|||
clearAllGoods(){ |
|||
let _this = this |
|||
Promise.all(this.cartData.map(v=>{ |
|||
return _this.Post({s_id: v.id},'/api/shopping/delShopping') |
|||
})).finally(res =>{ |
|||
this.cartData = [] |
|||
this.setAllSelect() |
|||
}) |
|||
}, |
|||
setAllSelect() { |
|||
let goods = this.cartData |
|||
if(goods.length>0&& goods.every(v => v.isSelected)){ |
|||
this.selectAll = true |
|||
} else { |
|||
this.selectAll = false |
|||
} |
|||
let selectedData = goods.filter(v=>v.isSelected).map(v=>v.specifications_id) |
|||
uni.setStorageSync('cartDataInfo', JSON.stringify(selectedData)); |
|||
this.calAllPrice() |
|||
}, |
|||
|
|||
addBuyNum(item, num,index){ |
|||
if (num == -1 && item.num == 1) { |
|||
this.Post({s_id: item.id},'/api/shopping/delShopping').then(res =>{ |
|||
this.cartData.splice(index,1) |
|||
this.setAllSelect() |
|||
}) |
|||
} else { |
|||
let numData = item.num + num |
|||
this.Post({s_id: item.id, num: numData},'/api/shopping/updateShopping').then(res =>{ |
|||
item.num += num |
|||
this.setAllSelect() |
|||
}) |
|||
} |
|||
}, |
|||
|
|||
calAllPrice () { |
|||
let selectedGoods = this.cartData.filter(v=>v.isSelected) |
|||
let totalPrice = 0 |
|||
selectedGoods.forEach(v=>{ |
|||
totalPrice += v.Specifications_money/100 * v.num |
|||
}) |
|||
totalPrice = totalPrice.toFixed(2) |
|||
console.log(totalPrice) |
|||
this.allPrice = {allPrice: totalPrice, iNum: totalPrice.split('.')[0], fNum: totalPrice.split('.')[1]} |
|||
|
|||
this.paramData.allPrice = totalPrice |
|||
this.paramData.iNum = this.allPrice.iNum |
|||
this.paramData.fNum = this.allPrice.fNum |
|||
this.paramData.num = this.calNum() |
|||
|
|||
this.$emit('changeParamData', this.paramData) |
|||
}, |
|||
|
|||
goCartOrder () { |
|||
if(this.cartData.every(v => !v.isSelected)){ |
|||
uni.showToast({ |
|||
title:'请先选中要购买的商品', |
|||
icon:'none', |
|||
}) |
|||
return |
|||
} |
|||
let orderData = this.cartData.filter(v=>v.isSelected).map(v=>{ |
|||
return { |
|||
goodsInfo: { |
|||
image: v.Specifications_image, |
|||
title:v.good_name, |
|||
}, |
|||
skuInfo: { |
|||
title:v.Specifications_name, |
|||
buyNum:v.num, |
|||
money: v.Specifications_money, |
|||
id: v.specifications_id, |
|||
}, |
|||
|
|||
} |
|||
}) |
|||
|
|||
|
|||
let orderInfo = { |
|||
// is_post: goods.is_post || "1", |
|||
is_post: 1, // 购物车都是邮寄 |
|||
goods: orderData, |
|||
post: 0 |
|||
} |
|||
|
|||
uni.setStorageSync('teChanOrder', JSON.stringify(orderInfo)); //规格 |
|||
// uni.setStorageSync('teChanInfo', JSON.stringify(this.info)); //商品 |
|||
uni.navigateTo({ |
|||
url: '/subPackages/techan/order' |
|||
}); |
|||
}, |
|||
}, |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
*{ |
|||
box-sizing: border-box; |
|||
} |
|||
.bg{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.cart-container{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: white; |
|||
height: 933rpx; |
|||
padding-bottom: 184rpx; |
|||
border-radius: 20rpx 20rpx 0rpx 0rpx; |
|||
display: flex; |
|||
flex-direction: column; |
|||
position: absolute; |
|||
width: 100%; |
|||
bottom: 0; |
|||
z-index: 20; |
|||
|
|||
.header-container{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 40rpx 26rpx; |
|||
|
|||
.select-area{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 37rpx; |
|||
color: #000000; |
|||
} |
|||
|
|||
|
|||
|
|||
.delete-area{ |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
font-size: 27rpx; |
|||
color: #999999; |
|||
image{ |
|||
width: 26rpx; |
|||
height: 26rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content-container{ |
|||
flex: 1; |
|||
height: 10rpx; |
|||
overflow-y: auto; |
|||
padding:0 26rpx 26rpx; |
|||
|
|||
.content-item{ |
|||
margin-bottom: 48rpx; |
|||
} |
|||
|
|||
.commodity { |
|||
display: flex; |
|||
.add-num-area{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
width: 160rpx; |
|||
|
|||
image{ |
|||
width: 49rpx; |
|||
height: 49rpx; |
|||
} |
|||
|
|||
} |
|||
.goods-text-area{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
.commodity-price{ |
|||
font-weight: 500; |
|||
font-size: 24rpx; |
|||
color: #F84A56; |
|||
display: flex; |
|||
align-items: baseline; |
|||
} |
|||
.commodity-info{ |
|||
font-family: PingFangSC; |
|||
font-weight: 500; |
|||
font-size: 32rpx; |
|||
color: #2C2C2C; |
|||
} |
|||
// align-items: center; |
|||
.img { |
|||
width: 217rpx; |
|||
height: 179rpx; |
|||
border-radius: 13rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
.title { |
|||
flex: 1; |
|||
margin-left: 20rpx; |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC-Medium, PingFang SC; |
|||
font-weight: 500; |
|||
color: #000000; |
|||
|
|||
.price-list { |
|||
display: flex; |
|||
margin-top: 18rpx; |
|||
align-items: center; |
|||
.price-r { |
|||
font-size: 32rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #fc5109; |
|||
&:before { |
|||
content: '¥'; |
|||
display: inline-block; |
|||
color: #fc5109; |
|||
font-size: 24rpx; |
|||
} |
|||
} |
|||
.price-g { |
|||
font-size: 24rpx; |
|||
font-family: PingFangSC-Regular, PingFang SC; |
|||
font-weight: 400; |
|||
color: #b5bcc9; |
|||
text-decoration: line-through; |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
.num-box { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-left: 20rpx; |
|||
width: 160rpx; |
|||
justify-content: space-between; |
|||
.num { |
|||
text-align: center; |
|||
width: 50rpx; |
|||
} |
|||
.ctrl { |
|||
width: 46rpx; |
|||
height: 46rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
.select-cycle{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
border-radius: 50%; |
|||
border: 1px solid #999999; |
|||
image{ |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
.select-cycle.selected { |
|||
border: none; |
|||
image{ |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
</style> |
|||
Loading…
Reference in new issue