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.
404 lines
12 KiB
404 lines
12 KiB
<template>
|
|
<view>
|
|
<view class="isLoading bg-white flex flex-direction justify-center align-center" style="height: 100vh;width: 100vw;" v-if="showLoading">
|
|
<image src="/static/loading-white.gif" mode="widthFix" style="width:500upx"></image>
|
|
</view>
|
|
<view class="" v-else>
|
|
<template v-if="cartGoods.length==0">
|
|
<view class="flex flex-direction justify-center align-center" style="width: 100vw;height:80vh;">
|
|
<image :src="STATIC_URL+'null02.png'" style="width: 300rpx;" mode="widthFix"></image>
|
|
<view class="text-center" style="color: #AAAAAA;font-size: 26rpx;margin-top: 10rpx;">购物车空了,快去逛逛吧~</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<view class="cart-top flex justify-between bg-white">
|
|
<view class=""></view>
|
|
<view class="" @tap="editCart">{{isEdit?'取消编辑':'编辑商品'}}</view>
|
|
</view>
|
|
<view class="" style="height: 80rpx;"></view>
|
|
<view class="cart-shop-box">
|
|
<view class="cart-shop-item bg-white" v-for="(shop,shopIndex) in cartGoods" :key="shopIndex">
|
|
<view class="shop-name-box flex align-center">
|
|
<text :class="shop.shopChecked?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray'" @tap="checkShop(shopIndex)"></text>
|
|
<image class="shop-logo" :src="IMAGE_URL+shop.brandLogo" mode="widthFix"></image>
|
|
<view class="shop-name">{{shop.brandName}}</view>
|
|
</view>
|
|
<view class="cart-goods-box">
|
|
<view class="cart-goods-item flex justify-between align-start" v-for="(goods,goodsIndex) in shop.children" :key="goodsIndex">
|
|
<view class="flex align-center" style="height: 200rpx;">
|
|
<text :class="goods.goodsChecked?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray'" @tap="checkGoods(shopIndex,goodsIndex)"></text>
|
|
</view>
|
|
<navigator :url="'/pages/goodsDetail/goodsDetail?id='+goods.goodsId" class="cart-goods-pic">
|
|
<u-lazy-load threshold="-100" :image="IMAGE_URL+goods.mainPhotoUrl" :index="index" loading-img="/static/null05.png" height="200" border-radius="10" error-img="/static/null05.png" img-mode="aspectFill"></u-lazy-load>
|
|
</navigator>
|
|
<view class="cart-goods-msg flex-sub">
|
|
<view class="msg-top flex flex-direction justify-between clear align-start">
|
|
<view class="">
|
|
<view class="cart-goods-name">{{goods.goodsName}}</view>
|
|
<text class="cart-goods-spec">{{goods.skuName}}</text>
|
|
</view>
|
|
<view class="text-red tip">赚{{goods.commission}}</view>
|
|
</view>
|
|
<view class="msg-bottom flex justify-between" style="line-height: 50rpx;padding-top: 15rpx;">
|
|
<view class="flex">
|
|
<text class="text-red" style="font-size: 30rpx;">¥{{goods.price}}</text>
|
|
<text style="text-decoration: line-through;font-size: 20rpx;margin-left: 5rpx;color: #898989;">¥{{goods.originalPrice}}</text>
|
|
</view>
|
|
<!-- 用change事件初次加载会请求多次 -->
|
|
<u-number-box v-model="goods.quantity" :min="1" :input-width="72" :size="24" @change="changeNum(goods.shoppingTrolleyId,goods.quantity)"></u-number-box>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="cart-bottom bg-white flex justify-between align-center">
|
|
<view class="all-select-box flex align-center" @tap="selectAll">
|
|
<text :class="allChecked?'cuIcon-roundcheckfill text-red':'cuIcon-round text-gray'"></text>
|
|
<view style="font-size: 28rpx;margin-left: 10rpx;">全选</view>
|
|
</view>
|
|
<view class="flex align-center">
|
|
|
|
<view class="" style="margin-right: 30rpx;">
|
|
<template v-if="isEdit">
|
|
<view class="">已选择{{totalNum}}件商品</view>
|
|
</template>
|
|
<template v-else>
|
|
<view style="font-size: 28rpx;">合计：￥{{totalPrice}}</view>
|
|
<view class="text-red" style="font-size: 18rpx;">赚{{totalCommission}}</view>
|
|
</template>
|
|
</view>
|
|
<button v-if="isEdit" class="cu-btn text-white round bg-red" @tap="delGoods">删除</button>
|
|
<button v-else class="cu-btn text-white round bg-red" @tap="creatCartOrder">结算({{totalNum}})</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
allChecked: false,
|
|
cartGoods: [],
|
|
IMAGE_URL: this.IMAGE_URL,
|
|
STATIC_URL:this.STATIC_URL,
|
|
isEdit: false,
|
|
totalPrice: 0,
|
|
totalNum: 0,
|
|
selectGoodsIds: [],
|
|
totalCommission: 0,
|
|
showLoading:true
|
|
};
|
|
},
|
|
onShow() {
|
|
this.getCartGoods()
|
|
},
|
|
methods: {
|
|
editCart() {
|
|
this.isEdit = !this.isEdit
|
|
},
|
|
changeNum(id, num) {
|
|
// console.log(id, num)
|
|
this.$u.post('/api/v1/goods/shopping_trolley/quantity/update', {
|
|
UserID: uni.getStorageSync("userInfo").id,
|
|
ShoppingTrolleyId: id,
|
|
Quantity: num
|
|
}).then(res => {
|
|
console.log(res.data);
|
|
if (res.data.code == "FAIL") {
|
|
this.$u.toast(res.data.msg);
|
|
return
|
|
}
|
|
this.getSelectedGoods()
|
|
});
|
|
},
|
|
getCartGoods() {
|
|
this.$u.post('/api/v1/goods/shopping_trolley/list', {
|
|
UserID: uni.getStorageSync("userInfo").id
|
|
}).then(res => {
|
|
console.log(res.data);
|
|
this.showLoading = false
|
|
if (res.data.code == "FAIL") {
|
|
this.$u.toast(res.data.msg);
|
|
return
|
|
}
|
|
this.cartGoods = res.data.data
|
|
if (this.cartGoods.length != 0) {
|
|
this.allChecked = false
|
|
|
|
for (let i = 0; i < this.cartGoods.length; i++) {
|
|
this.cartGoods[i].shopChecked = false
|
|
for (let j = 0; j < this.cartGoods[i].children.length; j++) {
|
|
this.cartGoods[i].children[j].goodsChecked = false
|
|
}
|
|
}
|
|
}
|
|
this.getSelectedGoods()
|
|
this.$forceUpdate()
|
|
console.log(this.cartGoods)
|
|
});
|
|
},
|
|
// 勾选店铺
|
|
checkShop(s_index) {
|
|
this.cartGoods[s_index].shopChecked = !this.cartGoods[s_index].shopChecked
|
|
for (let i = 0; i < this.cartGoods[s_index].children.length; i++) {
|
|
this.cartGoods[s_index].children[i].goodsChecked = this.cartGoods[s_index].shopChecked
|
|
}
|
|
|
|
let checkedCount = 0
|
|
for (let i = 0; i < this.cartGoods.length; i++) {
|
|
if (this.cartGoods[i].shopChecked) {
|
|
checkedCount++
|
|
} else {
|
|
this.allChecked = false
|
|
break
|
|
}
|
|
}
|
|
if (checkedCount == this.cartGoods.length) {
|
|
this.allChecked = true
|
|
}
|
|
this.getSelectedGoods()
|
|
this.$forceUpdate()
|
|
},
|
|
//勾选商品
|
|
checkGoods(s_index, g_index) {
|
|
this.cartGoods[s_index].children[g_index].goodsChecked = !this.cartGoods[s_index].children[g_index].goodsChecked
|
|
let checkedCount = 0
|
|
for (let i = 0; i < this.cartGoods[s_index].children.length; i++) {
|
|
if (!this.cartGoods[s_index].children[i].goodsChecked) {
|
|
this.cartGoods[s_index].shopChecked = this.allChecked = false
|
|
break
|
|
} else {
|
|
checkedCount++
|
|
}
|
|
}
|
|
if (checkedCount == this.cartGoods[s_index].children.length) {
|
|
this.cartGoods[s_index].shopChecked = true
|
|
let checkedCount = 0
|
|
for (let i = 0; i < this.cartGoods.length; i++) {
|
|
if (!this.cartGoods[i].shopChecked) {
|
|
this.allChecked = false
|
|
break
|
|
} else {
|
|
checkedCount++
|
|
}
|
|
}
|
|
if (checkedCount == this.cartGoods.length) {
|
|
this.allChecked = true
|
|
}
|
|
}
|
|
this.getSelectedGoods()
|
|
this.$forceUpdate()
|
|
},
|
|
// 勾选全部
|
|
selectAll() {
|
|
this.allChecked = !this.allChecked
|
|
for (let i = 0; i < this.cartGoods.length; i++) {
|
|
this.cartGoods[i].shopChecked = this.allChecked
|
|
for (let j = 0; j < this.cartGoods[i].children.length; j++) {
|
|
this.cartGoods[i].children[j].goodsChecked = this.allChecked
|
|
}
|
|
}
|
|
this.getSelectedGoods()
|
|
// this.$forceUpdate()
|
|
},
|
|
getSelectedGoods() {
|
|
let selectGoodsIds = []
|
|
let totalPrice = 0
|
|
let totalNum = 0
|
|
let totalCommission = 0
|
|
for (let i = 0; i < this.cartGoods.length; i++) {
|
|
for (let j = 0; j < this.cartGoods[i].children.length; j++) {
|
|
if (this.cartGoods[i].children[j].goodsChecked) {
|
|
selectGoodsIds.push(this.cartGoods[i].children[j].shoppingTrolleyId)
|
|
totalNum += this.cartGoods[i].children[j].quantity
|
|
totalPrice += (this.cartGoods[i].children[j].price) * (this.cartGoods[i].children[j].quantity)
|
|
totalCommission += (this.cartGoods[i].children[j].commission) * (this.cartGoods[i].children[j].quantity)
|
|
}
|
|
}
|
|
}
|
|
this.totalNum = totalNum
|
|
this.totalPrice = totalPrice.toFixed(2)
|
|
this.selectGoodsIds = selectGoodsIds
|
|
this.totalCommission = totalCommission.toFixed(2)
|
|
// console.log(selectGoodsIds)
|
|
},
|
|
delGoods() {
|
|
if (this.selectGoodsIds.length == 0) {
|
|
this.$u.toast("至少选择一件商品");
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确认要删除选择的商品吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
this.$u.post('/api/v1/goods/shopping_trolley/remove', {
|
|
UserID: uni.getStorageSync("userInfo").id,
|
|
TrolleyGoodsIDs: this.selectGoodsIds
|
|
}).then(res => {
|
|
console.log(res.data);
|
|
if (res.data.code == "FAIL") {
|
|
this.$u.toast(res.data.msg);
|
|
return
|
|
}
|
|
uni.showToast({
|
|
title: "删除成功"
|
|
})
|
|
this.getCartGoods()
|
|
// this.posts = res.data.data
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
creatCartOrder() {
|
|
if (this.selectGoodsIds.length == 0) {
|
|
this.$u.toast("至少选择一件商品");
|
|
return
|
|
}
|
|
this.$u.post('/api/v1/order_preview/shopping_trolley/create', {
|
|
userId: uni.getStorageSync("userInfo").id,
|
|
ids: this.selectGoodsIds
|
|
}).then(res => {
|
|
console.log(res.data);
|
|
if (res.data.code == "FAIL") {
|
|
this.$u.toast(res.data.msg);
|
|
return
|
|
}
|
|
let preViewMsg = res.data.data
|
|
this.$store.commit('updatePreOrderMsg',preViewMsg);
|
|
uni.navigateTo({
|
|
url: "../confirmOrder/confirmOrder"
|
|
})
|
|
});
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.cart-top {
|
|
position: fixed;
|
|
width: 100%;
|
|
padding: 0 30rpx;
|
|
line-height: 80rpx;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.cart-shop-item {
|
|
margin: 20rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 15rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 200rpx;
|
|
}
|
|
|
|
.shop-name-box {
|
|
height: 80rpx;
|
|
font-size: 28rpx;
|
|
color: #0A0001;
|
|
|
|
.shop-logo {
|
|
width: 44rpx;
|
|
border-radius: 10rpx;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
|
|
.cart-goods-item {
|
|
padding-bottom: 20rpx;
|
|
|
|
.cart-goods-pic {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.msg-top {
|
|
height: 200rpx;
|
|
}
|
|
|
|
.cart-goods-name {
|
|
color: #0A0001;
|
|
font-size: 28rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.cart-goods-spec {
|
|
padding: 0 10rpx;
|
|
background-color: #EFF1F6;
|
|
color: #666666;
|
|
font-size: 20rpx;
|
|
margin-top: 10rpx;
|
|
display: inline-block;
|
|
line-height: 40rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.tip {
|
|
color: #CC1B4F;
|
|
font-size: 18rpx;
|
|
border-radius: 5rpx;
|
|
border: 1rpx solid #CC1B4F;
|
|
line-height: 28rpx;
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
input {
|
|
min-height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cart-bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
padding: 0 30rpx;
|
|
box-shadow: 0 0 15rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
z-index: 100;
|
|
|
|
button {
|
|
height: 76rpx;
|
|
width: 180rpx;
|
|
}
|
|
}
|
|
|
|
.u-checkbox__label.data-v-54acf820 {
|
|
word-wrap: break-word;
|
|
margin: 0 !important;
|
|
color: #606266;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.cuIcon-roundcheckfill,
|
|
.cuIcon-round {
|
|
font-size: 40rpx;
|
|
}
|
|
</style>
|