You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
435 lines
10 KiB
435 lines
10 KiB
<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>
|