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