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.
403 lines
11 KiB
403 lines
11 KiB
<template>
|
|
<view class="container">
|
|
<view class="prod-list">
|
|
<block
|
|
v-for="(item, scIndex) in shopCartItemDiscounts"
|
|
:key="scIndex"
|
|
>
|
|
<view class="prod-block">
|
|
<view
|
|
v-if="item.chooseDiscountItemDto"
|
|
class="discount-tips"
|
|
>
|
|
<text class="text-block">
|
|
{{ wxs.parseDiscount(item.chooseDiscountItemDto.discountRule) }}
|
|
</text>
|
|
<text class="text-list">
|
|
{{
|
|
wxs.parseDiscountMsg(item.chooseDiscountItemDto.discountRule, item.chooseDiscountItemDto.needAmount, item.chooseDiscountItemDto.discount)
|
|
}}
|
|
</text>
|
|
</view>
|
|
<block
|
|
v-for="(prod, index) in item.shopCartItems"
|
|
:key="index"
|
|
>
|
|
<view class="item">
|
|
<view class="btn">
|
|
<label>
|
|
<checkbox
|
|
:data-scindex="scIndex"
|
|
:data-index="index"
|
|
:value="prod.prodId"
|
|
:checked="prod.checked"
|
|
color="#105c3e"
|
|
@tap="onSelectedItem"
|
|
/>
|
|
</label>
|
|
</view>
|
|
<view class="prodinfo">
|
|
<view class="pic">
|
|
<image :src="prod.pic" />
|
|
</view>
|
|
<view class="opt">
|
|
<view class="prod-name">
|
|
{{ prod.prodName }}
|
|
</view>
|
|
<text :class="'prod-info-text ' + (prod.skuName?'':'empty-n')">
|
|
{{ prod.skuName }}
|
|
</text>
|
|
<view class="price-count">
|
|
<view class="price">
|
|
<text class="symbol">
|
|
￥
|
|
</text>
|
|
<text class="big-num">
|
|
{{ wxs.parsePrice(prod.price)[0] }}
|
|
</text>
|
|
<text class="small-num">
|
|
.{{ wxs.parsePrice(prod.price)[1] }}
|
|
</text>
|
|
</view>
|
|
<view class="m-numSelector">
|
|
<view
|
|
class="minus"
|
|
:data-scindex="scIndex"
|
|
:data-index="index"
|
|
@tap="onCountMinus"
|
|
/>
|
|
<input
|
|
type="number"
|
|
:value="prod.prodCount"
|
|
disabled
|
|
>
|
|
<view
|
|
class="plus"
|
|
:data-scindex="scIndex"
|
|
:data-index="index"
|
|
@tap="onCountPlus"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
|
|
<view
|
|
v-if="!shopCartItemDiscounts.length"
|
|
class="empty"
|
|
>
|
|
<view class="img">
|
|
<image src="@/static/images/tabbar/basket.png" />
|
|
</view>
|
|
<view class="txt">
|
|
您还没有添加任何商品哦~
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view
|
|
v-if="shopCartItemDiscounts.length>0"
|
|
class="cart-footer"
|
|
>
|
|
<view class="btn all">
|
|
<label @tap="onSelAll">
|
|
<checkbox
|
|
:checked="allChecked"
|
|
color="#f7d731;"
|
|
/>
|
|
全选</label>
|
|
</view>
|
|
<view
|
|
class="btn del"
|
|
@tap="onDelBasket"
|
|
>
|
|
<text>删除</text>
|
|
</view>
|
|
<view class="btn total">
|
|
<view class="finally">
|
|
<text>合计:</text>
|
|
<view class="price">
|
|
<text class="symbol">
|
|
￥
|
|
</text>
|
|
<text class="big-num">
|
|
{{ wxs.parsePrice(finalMoney)[0] }}
|
|
</text>
|
|
<text class="small-num">
|
|
.{{ wxs.parsePrice(finalMoney)[1] }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="subtractMoney>0"
|
|
class="total-msg"
|
|
>
|
|
总额:￥{{ wxs.toPrice(totalMoney) }} 立减:￥{{ wxs.toPrice(subtractMoney) }}
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="btn settle"
|
|
@tap="toFirmOrder"
|
|
>
|
|
<text>结算</text>
|
|
</view>
|
|
</view>
|
|
<!-- end 底部按钮 -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const wxs = number()
|
|
/**
|
|
* 生命周期函数--监听页面显示
|
|
*/
|
|
onShow(() => {
|
|
loadBasketData()
|
|
http.getCartCount() // 重新计算购物车总数量
|
|
})
|
|
|
|
const allChecked = ref(false)
|
|
const shopCartItemDiscounts = ref([])
|
|
const loadBasketData = () => {
|
|
uni.showLoading() // 加载购物车
|
|
http.request({
|
|
url: '/p/shopCart/info',
|
|
method: 'POST',
|
|
data: {}
|
|
})
|
|
.then(({ data }) => {
|
|
if (data.length > 0) {
|
|
// 默认不选中
|
|
const shopCartItemDiscountsParam = data[0].shopCartItemDiscounts
|
|
shopCartItemDiscountsParam.forEach(shopCartItemDiscount => {
|
|
shopCartItemDiscount.shopCartItems.forEach(shopCartItem => {
|
|
shopCartItem.checked = false
|
|
})
|
|
})
|
|
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
|
allChecked.value = false
|
|
} else {
|
|
shopCartItemDiscounts.value = []
|
|
}
|
|
calTotalPrice() // 计算总价
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 去结算
|
|
*/
|
|
const toFirmOrder = () => {
|
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
|
const basketIds = []
|
|
shopCartItemDiscountsParam.forEach(shopCartItemDiscount => {
|
|
shopCartItemDiscount.shopCartItems.forEach(shopCartItem => {
|
|
if (shopCartItem.checked) {
|
|
basketIds.push(shopCartItem.basketId)
|
|
}
|
|
})
|
|
})
|
|
|
|
if (!basketIds.length) {
|
|
uni.showToast({
|
|
title: '请选择商品',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.setStorageSync('basketIds', JSON.stringify(basketIds))
|
|
uni.navigateTo({
|
|
url: '/pages/submit-order/submit-order?orderEntry=0'
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 全选
|
|
*/
|
|
const onSelAll = () => {
|
|
let allCheckedParam = allChecked.value
|
|
allCheckedParam = !allCheckedParam // 改变状态
|
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
|
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
|
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
|
for (let j = 0; j < cItems.length; j++) {
|
|
cItems[j].checked = allCheckedParam
|
|
}
|
|
}
|
|
allChecked.value = allCheckedParam
|
|
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
|
calTotalPrice() // 计算总价
|
|
}
|
|
|
|
/**
|
|
* 每一项的选择事件
|
|
* +
|
|
*/
|
|
const onSelectedItem = (e) => {
|
|
const index = e.currentTarget.dataset.index // 获取data- 传进来的index
|
|
const scindex = e.currentTarget.dataset.scindex
|
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value // 获取购物车列表
|
|
const checked = shopCartItemDiscountsParam[scindex].shopCartItems[index].checked // 获取当前商品的选中状态
|
|
shopCartItemDiscountsParam[scindex].shopCartItems[index].checked = !checked // 改变状态
|
|
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
|
checkAllSelected() // 检查全选状态
|
|
calTotalPrice() // 计算总价
|
|
}
|
|
|
|
/**
|
|
* 检查全选状态
|
|
*/
|
|
const checkAllSelected = () => {
|
|
let allCheckedParam = true
|
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
|
let flag = false
|
|
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
|
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
|
for (let j = 0; j < cItems.length; j++) {
|
|
if (!cItems[j].checked) {
|
|
allCheckedParam = !allCheckedParam
|
|
flag = true
|
|
break
|
|
}
|
|
}
|
|
if (flag) break
|
|
}
|
|
allChecked.value = allCheckedParam
|
|
}
|
|
|
|
const totalMoney = ref(0)
|
|
const subtractMoney = ref(0)
|
|
const finalMoney = ref(0)
|
|
/**
|
|
* 计算购物车总额
|
|
*/
|
|
const calTotalPrice = () => {
|
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
|
const shopCartIds = []
|
|
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
|
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
|
for (let j = 0; j < cItems.length; j++) {
|
|
if (cItems[j].checked) {
|
|
shopCartIds.push(cItems[j].basketId)
|
|
}
|
|
}
|
|
}
|
|
uni.showLoading()
|
|
http.request({
|
|
url: '/p/shopCart/totalPay',
|
|
method: 'POST',
|
|
data: shopCartIds
|
|
})
|
|
.then(({ data }) => {
|
|
finalMoney.value = data.finalMoney
|
|
totalMoney.value = data.totalMoney
|
|
subtractMoney.value = data.subtractMoney
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 减少数量
|
|
*/
|
|
const onCountMinus = (e) => {
|
|
const index = e.currentTarget.dataset.index
|
|
const scindex = e.currentTarget.dataset.scindex
|
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
|
const prodCount = shopCartItemDiscountsParam[scindex].shopCartItems[index].prodCount
|
|
if (prodCount > 1) {
|
|
updateCount(shopCartItemDiscountsParam, scindex, index, -1)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 增加数量
|
|
*/
|
|
const onCountPlus = (e) => {
|
|
const index = e.currentTarget.dataset.index
|
|
const scindex = e.currentTarget.dataset.scindex
|
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
|
updateCount(shopCartItemDiscountsParam, scindex, index, 1)
|
|
}
|
|
|
|
/**
|
|
* 改变购物车数量接口
|
|
*/
|
|
const updateCount = (shopCartItemDiscountsParam, scindex, index, prodCount) => {
|
|
uni.showLoading({
|
|
mask: true
|
|
})
|
|
http.request({
|
|
url: '/p/shopCart/changeItem',
|
|
method: 'POST',
|
|
data: {
|
|
count: prodCount,
|
|
prodId: shopCartItemDiscountsParam[scindex].shopCartItems[index].prodId,
|
|
skuId: shopCartItemDiscountsParam[scindex].shopCartItems[index].skuId,
|
|
shopId: 1
|
|
}
|
|
})
|
|
.then(() => {
|
|
shopCartItemDiscountsParam[scindex].shopCartItems[index].prodCount += prodCount
|
|
shopCartItemDiscounts.value = shopCartItemDiscountsParam
|
|
calTotalPrice() // 计算总价
|
|
uni.hideLoading()
|
|
http.getCartCount() // 重新计算购物车总数量
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 删除购物车商品
|
|
*/
|
|
const onDelBasket = () => {
|
|
const shopCartItemDiscountsParam = shopCartItemDiscounts.value
|
|
const basketIds = []
|
|
for (let i = 0; i < shopCartItemDiscountsParam.length; i++) {
|
|
const cItems = shopCartItemDiscountsParam[i].shopCartItems
|
|
for (let j = 0; j < cItems.length; j++) {
|
|
if (cItems[j].checked) {
|
|
basketIds.push(cItems[j].basketId)
|
|
}
|
|
}
|
|
}
|
|
if (!basketIds.length) {
|
|
uni.showToast({
|
|
title: '请选择商品',
|
|
icon: 'none'
|
|
})
|
|
} else {
|
|
uni.showModal({
|
|
title: '',
|
|
content: '确认要删除选中的商品吗？',
|
|
confirmColor: '#eb2444',
|
|
success (res) {
|
|
if (res.confirm) {
|
|
uni.showLoading({
|
|
mask: true
|
|
})
|
|
http.request({
|
|
url: '/p/shopCart/deleteItem',
|
|
method: 'DELETE',
|
|
data: basketIds
|
|
})
|
|
.then(() => {
|
|
uni.hideLoading()
|
|
loadBasketData()
|
|
})
|
|
}
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./basket.scss";
|
|
</style>
|