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.
1125 lines
34 KiB
1125 lines
34 KiB
<template>
|
|
<view class="content">
|
|
<!-- 骨架屏 -->
|
|
<u-skeleton
|
|
el-color="#efefef"
|
|
bg-color="#fff"
|
|
:loading="loading && isFirstComeIn"
|
|
:animation="true"
|
|
></u-skeleton>
|
|
<global-loading />
|
|
<!-- 购物车 -->
|
|
<view class="u-skeleton">
|
|
<view v-if="!isEmpty">
|
|
<u-sticky bg-color="#fff">
|
|
<view class="cart-bg u-skeleton-fillet">
|
|
<view class="cart-num-box">
|
|
<!-- <image
|
|
class=" u-skeleton-fillet"
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/logo_wechat.png"
|
|
></image>-->
|
|
<view>
|
|
<text class="num-box u-skeleton-fillet">
|
|
{{$t('common.totalitemnum',{"number":settleAccountsObj.allNum})}}
|
|
</text>
|
|
</view>
|
|
<!-- <text
|
|
class="btn-box "
|
|
@click="showManage = !showManage"
|
|
v-if="!showManage"
|
|
>{{$t('common.manager')}}
|
|
</text>
|
|
<text
|
|
class="btn-box"
|
|
@click="showManage = !showManage"
|
|
v-if="showManage"
|
|
>{{$t('common.finish')}}
|
|
</text>-->
|
|
<image style="width: 32rpx;height: 32rpx;margin-right: 30rpx" @click="showManage = !showManage"
|
|
v-if="!showManage" src="@/static/images/temp/title_edit.png"/>
|
|
<image style="width: 32rpx;height: 32rpx;margin-right: 30rpx" @click="showManage = !showManage"
|
|
v-if="showManage" src="@/static/images/temp/title_finish.png"/>
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
<view class="cart-list-box">
|
|
<view
|
|
class="itemBox"
|
|
v-for="(item, index) in dataList"
|
|
:key="item.shopId"
|
|
>
|
|
<view
|
|
class="item"
|
|
v-if="item.skus.length >0"
|
|
>
|
|
<view class="shop-box">
|
|
<image
|
|
mode="aspectFill u-skeleton-fillet"
|
|
v-if="item.selected === 1"
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_active.png"
|
|
class="cart-select-img"
|
|
@click.stop="handleSelectShop(index,0)"
|
|
></image>
|
|
<image
|
|
mode="aspectFill u-skeleton-fillet"
|
|
v-else
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_normal.png"
|
|
class="cart-select-img"
|
|
@click.stop="handleSelectShop(index,1)"
|
|
></image>
|
|
<view
|
|
class="shop-name-box u-skeleton-fillet"
|
|
@click="$jump(`${jumpObj.store}?storeId=${item.shopId}`)"
|
|
>
|
|
<image
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/cart_shop.png"
|
|
class="shop-img"
|
|
></image>
|
|
<text class="shop-name">{{ item.shopName }}</text>
|
|
<image
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_common_grey_forward.png"
|
|
class="arrow-right-img"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="rulesBox flex-items"
|
|
v-if="item.currentRules && item.currentRules.number"
|
|
>
|
|
<image
|
|
class="mar-right-20"
|
|
src="https://ceres.zkthink.com/static/images/zuheIcon.png"
|
|
></image>
|
|
<view class="fs24 font-color-C83732">
|
|
{{$t('common.cartzuhetips', {price:item.currentRules.price, number:item.currentRules.number})}}
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-for="(skuItem, cIndex) in dataList[index].skus"
|
|
class="product-list-box "
|
|
>
|
|
<view
|
|
class="pro-item"
|
|
@click="$jump(`${jumpObj.detail}?shopId=${item.shopId}&productId=${skuItem.productId}&skuId=${skuItem.skuId}`)"
|
|
>
|
|
<image
|
|
mode="aspectFill u-skeleton-fillet"
|
|
v-if="skuItem.selected == 1"
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_active.png"
|
|
@click.stop="handleSelectSku(index,cIndex,0)"
|
|
class="cart-select-img"
|
|
></image>
|
|
<image
|
|
mode="aspectFill u-skeleton-fillet"
|
|
v-else
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_normal.png"
|
|
@click.stop="handleSelectSku(index,cIndex,1)"
|
|
class="cart-select-img"
|
|
></image>
|
|
<view class="pro-r">
|
|
<image
|
|
:src="skuItem.image"
|
|
onerror="this.src='url(https://wechat.hnthee.com/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null"
|
|
class="pro-img default-img u-skeleton-fillet"
|
|
></image>
|
|
<view class="pro-r-r u-skeleton-fillet">
|
|
<view class="pro-name">{{ skuItem.productName }}</view>
|
|
<view class="sku-box">
|
|
<text v-if="skuItem.value">{{ skuItem.value }}</text>
|
|
<text v-else>默认规格</text>
|
|
<!-- <text></text> -->
|
|
</view>
|
|
<view class="pro-price-num-box">
|
|
<view class="pro-price-box">
|
|
<text class="fuhao">￥</text>
|
|
<text>{{ skuItem.price }}</text>
|
|
</view>
|
|
<view class="cart-operate-num-box">
|
|
<image v-if="skuItem.number === 1" class="operate-img" @click.stop="handleSubSkuNumber(index,cIndex)"
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_nosub.png"/>
|
|
<image v-else class="operate-img" @click.stop="handleSubSkuNumber(index,cIndex)"
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_sub.png"/>
|
|
<text class="num">{{ skuItem.number }}</text>
|
|
<image class="operate-img" @click.stop="handleAddSkuNumber(index,cIndex)"
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_add.png"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- #ifdef H5 -->
|
|
<view class="cart-bottom-box-h5">
|
|
<!-- #endif -->
|
|
<!-- #ifndef H5 -->
|
|
<view class="cart-bottom-box-app">
|
|
<!-- #endif -->
|
|
<view class="cart-bottom">
|
|
|
|
<view style="display: flex;flex-direction: column">
|
|
<view class="left">
|
|
<image
|
|
mode="aspectFill"
|
|
v-if="settleAccountsObj.isAllCheck"
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_active.png"
|
|
class="cart-select-img"
|
|
@click="handleSelectAll(0)"
|
|
></image>
|
|
<image
|
|
mode="aspectFill"
|
|
v-else
|
|
src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_select_normal.png"
|
|
class="cart-select-img"
|
|
@click="handleSelectAll(1)"
|
|
></image>
|
|
<text>{{$t('common.chooseall')}}（{{ settleAccountsObj.checkNum }}）</text>
|
|
</view>
|
|
<view class="total-title">{{$t('common.total_small')}}：<text class="total-content">¥{{ settleAccountsObj.checkMoney }}</text></view>
|
|
</view>
|
|
|
|
<view class="right">
|
|
<view
|
|
v-if="!showManage"
|
|
class="btn-confirm"
|
|
@click="settlementTap"
|
|
>结算</view>
|
|
|
|
<view
|
|
v-if="showManage"
|
|
class="btn-delete"
|
|
@click="handleOpenDelete"
|
|
>删除</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 购物车为空 -->
|
|
<view
|
|
v-if="isEmpty"
|
|
class="emptyCart-box flex-items-plus flex-column"
|
|
>
|
|
<image
|
|
class="emptyCart-img"
|
|
src="https://ceres.zkthink.com/static/images/cartEmpty.png"
|
|
></image>
|
|
<label class="font-color-999 fs26 mar-top-30">你的购物车还没有宝贝哦</label>
|
|
<label class="font-color-999 fs26 mar-top-10">快去首页选一个吧～</label>
|
|
<view
|
|
class="goToShopping"
|
|
@click="$jumpToTabbar(jumpObj.shopping)"
|
|
>去购物
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 热门推荐 -->
|
|
<HotTemplate v-if="isEmpty" class="u-skeleton-fillet"/>
|
|
|
|
<view style="width: 100%;height: 140rpx;background-color:#FAFAFA;"></view>
|
|
|
|
<!-- 删除确认弹窗 -->
|
|
<DeleteModal
|
|
:showTip.sync="showDeleteModal"
|
|
@confirm="handleDoDelete"
|
|
></DeleteModal>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HotTemplate from '../../../components/hoteRecommed/index.vue'
|
|
import DeleteModal from "./components/DeleteModal";
|
|
import api from "../../../components/canvasShow/config/api";
|
|
import { defaultCartList, getCartNumberBySelect, getPriceBySelect } from "./cartUtils";
|
|
import lodash from 'lodash'
|
|
let cacheKey = ''
|
|
const NET = require('../../../utils/request')
|
|
const API = require('../../../config/api')
|
|
export default {
|
|
components: {
|
|
HotTemplate,
|
|
DeleteModal
|
|
},
|
|
data() {
|
|
return {
|
|
isFirstComeIn:true, // 是否是首次进入
|
|
loading: true, // 是否在加载
|
|
showManage: false, // 是否开启管理
|
|
dataList: [
|
|
{skus: []}
|
|
], // 购物车数据
|
|
showDeleteModal: false, // 是否展示删除
|
|
isEmpty: false, // 购物车是否为空
|
|
userInfo: {}, // 用户信息
|
|
// 跳转对象
|
|
jumpObj: {
|
|
store: '/pages_category_page1/store/index',
|
|
detail: '/pages_category_page1/goodsModule/goodsDetails',
|
|
shopping: '/pages/tabbar/index/index'
|
|
},
|
|
// 底部结算条对象
|
|
settleAccountsObj: {
|
|
allNum: 0,// 所有sku数量（头部）
|
|
checkNum: 0, // 选中sku的数量
|
|
checkMoney: 0, // 选中sku的总价
|
|
isAllCheck: false, // 是否宣布选中
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.isFirstComeIn = true
|
|
this.loading = true
|
|
this.userInfo = uni.getStorageSync('storage_key')
|
|
cacheKey = this.userInfo.buyerUserId + "cart_info"
|
|
this.dataList = defaultCartList
|
|
this.isEmpty = false
|
|
this.getDataList()
|
|
},
|
|
methods: {
|
|
/**
|
|
* 获取购物车列表
|
|
*/
|
|
getDataList:lodash.debounce(async function () {
|
|
this.isEmpty = false
|
|
this.loading = true
|
|
try {
|
|
const res = await NET.request(API.ShoppingCart, {}, 'GET')
|
|
this.dataList = res.data
|
|
this.settleAccountsObj.allNum = this.dataList.length
|
|
if (this.dataList.length === 0) {
|
|
this.isEmpty = true
|
|
uni.setStorageSync('allCartNum', 0)
|
|
uni.removeTabBarBadge({
|
|
index: 2
|
|
})
|
|
}
|
|
// sku为空的山沟
|
|
const emptySkuShopArray = []
|
|
this.dataList.forEach((shopObj, shopIndex) => {
|
|
shopObj['currentIds'] = []
|
|
shopObj['priceNumber'] = 0
|
|
shopObj['rules'] = []
|
|
shopObj['currentRules'] = {}
|
|
shopObj['ids'] = 0
|
|
// 处理下架商品
|
|
for (let i = shopObj.skus.length - 1; i >= 0; i--) {
|
|
// shelveState是否上架
|
|
if (shopObj.skus[i].shelveState === 0) {
|
|
// 删掉下架商品
|
|
// todo 失效商品
|
|
shopObj.skus.splice(i, 1)
|
|
continue
|
|
}
|
|
if (shopObj.skus[i].activityType === 6 && shopObj.skus[i].selected === 1) {
|
|
shopObj.currentIds.push(shopObj.skus[i].priceId)
|
|
shopObj.priceNumber += shopObj.skus[i].number
|
|
}
|
|
}
|
|
for (let i = 0; i < shopObj.skus.length; i++) {
|
|
if (shopObj.skus[i].activityType === 6) {
|
|
shopObj.ids = shopObj.skus[i].priceId
|
|
break
|
|
}
|
|
}
|
|
// 根据店铺索引获取规则
|
|
this.getData(shopObj).then(res => {
|
|
shopObj.rules = res.data ? res.data[0].rules : {}
|
|
this.handleSetGroupGood(shopIndex)
|
|
})
|
|
shopObj.skus.length === 0?emptySkuShopArray.push(shopObj):undefined
|
|
})
|
|
this.isEmpty = emptySkuShopArray.length >=this.dataList.length
|
|
this.handleRenderCart()
|
|
// 数据回来就直接关闭骨架屏
|
|
this.loading = false
|
|
this.isFirstComeIn = false
|
|
await this.handleUpdateMoneyAndNum()
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
},500),
|
|
|
|
/**
|
|
* 获取组合定价
|
|
* @param item
|
|
* @return {Promise<unknown>}
|
|
*/
|
|
getData(item) {
|
|
return new Promise(((resolve, reject) => {
|
|
if (item.ids) {
|
|
NET.request(api.getPrices, {
|
|
shopId: item.shopId,
|
|
ids: item.ids,
|
|
page: 1,
|
|
pageSize: 10
|
|
}, 'GET').then(res => {
|
|
resolve(res)
|
|
}).catch(e => {
|
|
reject(e)
|
|
})
|
|
} else {
|
|
resolve([])
|
|
}
|
|
}))
|
|
},
|
|
|
|
/**
|
|
* 单个SKU数量减
|
|
* @param shopIndex 店铺索引
|
|
* @param skuIndex index店铺下sku商品索引
|
|
*/
|
|
async handleSubSkuNumber(shopIndex, skuIndex) {
|
|
const selectSku = this.dataList[shopIndex].skus[skuIndex]
|
|
if (selectSku.number <= 1) {
|
|
return uni.showToast({
|
|
title: '亲！至少一件哦！',
|
|
icon: "none"
|
|
})
|
|
}
|
|
--selectSku.number
|
|
await this.handleUpdateCart(selectSku.skuId, selectSku.number)
|
|
setTimeout(async ()=>{
|
|
await this.getDataList()
|
|
},500)
|
|
},
|
|
|
|
/**
|
|
* 单个SKU数量加
|
|
* @param shopIndex 店铺索引
|
|
* @param skuIndex index店铺下sku商品索引
|
|
*/
|
|
async handleAddSkuNumber(shopIndex, skuIndex) {
|
|
const selectSku = this.dataList[shopIndex].skus[skuIndex]
|
|
if (selectSku.number >= selectSku.stockNumber) {
|
|
selectSku.number = selectSku.stockNumber
|
|
return uni.showToast({
|
|
title: $t('common.understock'),
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
if (selectSku.number < selectSku.stockNumber) {
|
|
++selectSku.number
|
|
await this.handleUpdateCart(selectSku.skuId, selectSku.number)
|
|
setTimeout(async ()=>{
|
|
await this.getDataList()
|
|
},500)
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 更新总价和总数（底部结算栏，头部总数）
|
|
* @return {Promise<void>}
|
|
*/
|
|
async handleUpdateMoneyAndNum() {
|
|
const {allNumber, checkNumber, isAllCheck} = await getCartNumberBySelect(this.dataList)
|
|
const {money} = await getPriceBySelect(this.dataList)
|
|
this.settleAccountsObj.checkMoney = money
|
|
this.settleAccountsObj.isAllCheck = isAllCheck
|
|
this.settleAccountsObj.allNum = allNumber
|
|
this.settleAccountsObj.checkNum = checkNumber
|
|
},
|
|
|
|
/**
|
|
* 请求服务端更新购物车数量
|
|
* @param skuId :需要更新的skuId
|
|
* @param number: 数量
|
|
*/
|
|
handleUpdateCart:lodash.debounce(async function(skuId, number) {
|
|
// 重新算钱和数量
|
|
await NET.request(API.UpdateNumberCart, {
|
|
skuId: skuId,
|
|
number: number
|
|
}, 'POST')
|
|
},500),
|
|
|
|
|
|
/**
|
|
* 选中店铺
|
|
* @param shopIndex 店铺索引
|
|
* @param type 0否1是
|
|
*/
|
|
handleSelectShop(shopIndex, type) {
|
|
const shopObj = this.dataList[shopIndex]
|
|
const shopCarts = [{
|
|
shopId: shopObj.shopId,
|
|
skus: []
|
|
}]
|
|
shopObj.selected = type
|
|
// 设置当前店铺下的所有sku
|
|
shopObj.skus.forEach(skuObj => {
|
|
skuObj.selected = type
|
|
shopCarts[0].skus.push({
|
|
skuId: skuObj.skuId,
|
|
selected: skuObj.selected
|
|
})
|
|
})
|
|
this.handleSetGroupGood(shopIndex)
|
|
this.handleUpdateSelected(shopCarts)
|
|
}
|
|
,
|
|
|
|
/**
|
|
* 商品单选
|
|
* @param shopIndex 店铺索引dataList
|
|
* @param skuIndex sku索引dataList[index].skus
|
|
* @param type 是否选中 0否1是
|
|
*/
|
|
handleSelectSku(shopIndex, skuIndex, type) {
|
|
const shopObj = this.dataList[shopIndex]
|
|
const skuObj = this.dataList[shopIndex].skus[skuIndex]
|
|
skuObj.selected = type
|
|
let shopCarts = [{
|
|
shopId: shopObj.shopId,
|
|
skus: [{
|
|
skuId: skuObj.skuId,
|
|
selected: skuObj.selected,
|
|
}]
|
|
}]
|
|
if (type === 1) {
|
|
// 过滤店铺内未选择的sku
|
|
const noSelectSkuList = shopObj.skus.filter(sku => sku.selected === 0);
|
|
if (noSelectSkuList.length >= 0) {
|
|
shopObj.selected = 0
|
|
} else {
|
|
shopObj.selected = 1
|
|
}
|
|
} else {
|
|
shopObj.selected = type
|
|
}
|
|
// 渲染组合商品
|
|
this.handleSetGroupGood(shopIndex)
|
|
this.handleUpdateSelected(shopCarts)
|
|
}
|
|
,
|
|
|
|
|
|
/**
|
|
* 全选
|
|
* @param type 是否选中 0否1是
|
|
*/
|
|
handleSelectAll(type) {
|
|
this.dataList.forEach((shopObj, shopIndex) => {
|
|
// 组合支付商品数量
|
|
const goodsOfJointNumber = shopObj.skus.reduce((prev, skuObj) => {
|
|
skuObj.selected = type
|
|
// 如果是组合支付
|
|
if (skuObj.selected === 1 && skuObj.activityType === 6) {
|
|
return prev + skuObj.number
|
|
}
|
|
}, 0)
|
|
shopObj.selected = type
|
|
shopObj.priceNumber = goodsOfJointNumber
|
|
shopObj.currentRules = {}
|
|
// 处理选中的组合商品
|
|
if (type === 1) {
|
|
this.handleSetGroupGood(shopIndex)
|
|
}
|
|
})
|
|
this.handleUpdateSelected([])
|
|
}
|
|
,
|
|
|
|
|
|
/**
|
|
* 处理组合商品(设置currentRules渲染横幅)
|
|
* @param shopIndex
|
|
*/
|
|
handleSetGroupGood(shopIndex) {
|
|
const shopObj = this.dataList[shopIndex]
|
|
shopObj.currentRules = {}
|
|
shopObj.priceNumber = 0
|
|
shopObj.skus.forEach((skuObj) => {
|
|
if (skuObj.activityType === 6 && skuObj.selected === 1) {
|
|
shopObj.priceNumber += skuObj.number
|
|
}
|
|
})
|
|
const shopRules = this.dataList[shopIndex].rules
|
|
for (let i = 0; i < shopRules.length; i++) {
|
|
if (shopRules[i].number === shopObj.priceNumber) {
|
|
shopObj.currentRules = shopRules[i]
|
|
break
|
|
} else if (shopRules[shopRules.length - 1].number < shopObj.priceNumber) {
|
|
shopObj.currentRules = shopRules[shopRules.length - 1]
|
|
break
|
|
}
|
|
}
|
|
}
|
|
,
|
|
|
|
/**
|
|
* 更新缓存sku勾选和价格、数量显示
|
|
* @param shopCarts:{shopId:number,skus:{skuId:number,select:number}}[] 只有一个对象（店铺）全选传空数组
|
|
*/
|
|
handleUpdateSelected(shopCarts) {
|
|
this.handleSetCache(shopCarts)
|
|
this.handleUpdateMoneyAndNum()
|
|
}
|
|
,
|
|
|
|
/**
|
|
* 设置购物车本地缓存（先存入本地缓存，再调用handleRenderCart根据本地缓存渲染）
|
|
* @param shopCarts:{shopId:number,skus:{skuId:number,select:number}}[] 只有一个对象（店铺）全选传空数组
|
|
*/
|
|
handleSetCache(shopCarts) {
|
|
let cartInfo = uni.getStorageSync(cacheKey);
|
|
if (cartInfo === '') {
|
|
// 全选
|
|
if (shopCarts.length <= 0) {
|
|
// 全选直接缓存整个列表
|
|
uni.setStorageSync(cacheKey, JSON.stringify(this.dataList))
|
|
// 渲染视图
|
|
this.handleRenderCart()
|
|
return
|
|
}
|
|
// 无购物车信息
|
|
cartInfo = shopCarts
|
|
uni.setStorageSync(cacheKey, JSON.stringify(cartInfo))
|
|
} else {
|
|
cartInfo = JSON.parse(cartInfo)
|
|
// 全选
|
|
if (shopCarts.length <= 0) {
|
|
// 全选直接缓存整个列表
|
|
uni.setStorageSync(cacheKey, JSON.stringify(this.dataList))
|
|
// 渲染视图
|
|
this.handleRenderCart()
|
|
return
|
|
}
|
|
// 看了代码逻辑结构，一次只会传一个商铺过来，大胆取0
|
|
const shopItem = shopCarts[0]
|
|
const cacheHaveInfo = cartInfo.findIndex(item => item.shopId === shopItem.shopId)
|
|
if (cacheHaveInfo < 0) {
|
|
// 如果缓存中不存在当前商店信息，写入缓存
|
|
cartInfo.push(shopItem)
|
|
} else {
|
|
// 获取到缓存项
|
|
const cacheShopItem = cartInfo[cacheHaveInfo]
|
|
// 判断传入的sku大小，sku length为1就是点单项，sku length>1就是点击了整个店铺
|
|
if (shopItem.skus.length > 1) {
|
|
// 点击整个店铺，直接赋值
|
|
cartInfo[cacheHaveInfo] = shopItem
|
|
} else {
|
|
// 点击单项sku，获取到sku // 数据结构只会传入一项
|
|
const shopItemSkuItem = shopItem.skus[0];
|
|
// 在缓存中寻找
|
|
const cacheShopItemSkuItemIndex = cacheShopItem.skus.findIndex(item => item.skuId === shopItemSkuItem.skuId);
|
|
cacheShopItemSkuItemIndex >= 0 ? cacheShopItem.skus[cacheShopItemSkuItemIndex] = shopItemSkuItem : cacheShopItem.skus.push(shopItemSkuItem)
|
|
}
|
|
}
|
|
// 逻辑处理完毕更新缓存
|
|
uni.setStorageSync(cacheKey, JSON.stringify(cartInfo))
|
|
// 渲染视图
|
|
this.handleRenderCart()
|
|
}
|
|
}
|
|
,
|
|
|
|
/**
|
|
* 根据本地缓存渲染购物车勾选
|
|
* @constructor
|
|
*/
|
|
handleRenderCart() {
|
|
// 取消所有勾选
|
|
this.dataList.forEach(shop => {
|
|
shop.selected = 0
|
|
shop.skus.forEach(sku => {
|
|
sku.selected = 0
|
|
})
|
|
})
|
|
// 校验缓存中的数据是否存在于购物车中
|
|
this.handleCheckCacheAndUpdate()
|
|
// 缓存内购物车信息
|
|
let cartInfo = uni.getStorageSync(cacheKey);
|
|
if (cartInfo === '') return
|
|
cartInfo = JSON.parse(cartInfo)
|
|
|
|
// 遍历购物车信息，寻找缓存比对
|
|
this.dataList.forEach(nowCartShopItem => {
|
|
let shopSelect = 1
|
|
const cacheCartShopItem = cartInfo.find(item => item.shopId === nowCartShopItem.shopId);
|
|
if (cacheCartShopItem) {
|
|
// 如果缓存中有当前店铺，遍历当前购物车sku
|
|
nowCartShopItem.skus.forEach(nowCartSkuItem => {
|
|
const cacheCartSkuItem = cacheCartShopItem.skus.find(item => item.skuId === nowCartSkuItem.skuId);
|
|
if (cacheCartSkuItem) {
|
|
// 如果有一个未选中当前店铺就不能全选
|
|
!cacheCartSkuItem.selected ? shopSelect = 0 : ''
|
|
nowCartSkuItem.selected = cacheCartSkuItem.selected
|
|
} else {
|
|
shopSelect = 0
|
|
}
|
|
})
|
|
} else {
|
|
shopSelect = 0
|
|
}
|
|
nowCartShopItem.selected = shopSelect
|
|
})
|
|
}
|
|
,
|
|
|
|
/**
|
|
* 比较缓存内数据和后端数据是否一致,并且更新缓存
|
|
* @constructor
|
|
*/
|
|
handleCheckCacheAndUpdate() {
|
|
// 缓存内购物车信息
|
|
let cartInfo = uni.getStorageSync(cacheKey);
|
|
if (cartInfo === '') return
|
|
cartInfo = JSON.parse(cartInfo)
|
|
// 校验缓存中的数据是否存在于购物车中
|
|
cartInfo.forEach((cacheCartShopItem, cacheCartShopIndex) => {
|
|
const nowCartShopItem = this.dataList.find(item => item.shopId === cacheCartShopItem.shopId);
|
|
if (!nowCartShopItem) {
|
|
cartInfo.splice(cacheCartShopIndex, 1)
|
|
} else {
|
|
// 存在就校验缓存中的sku在不在后端返回的列表内
|
|
cacheCartShopItem.skus.forEach((cacheCartSkuItem, cacheCartSkuIndex) => {
|
|
const nowCartSkuItem = nowCartShopItem.skus.find(item => item.skuId === cacheCartSkuItem.skuId)
|
|
if (!nowCartSkuItem) {
|
|
cacheCartShopItem.skus.splice(cacheCartSkuIndex, 1)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
uni.setStorageSync(cacheKey, JSON.stringify(cartInfo))
|
|
}
|
|
,
|
|
|
|
/**
|
|
* 打开删除弹窗
|
|
*/
|
|
handleOpenDelete() {
|
|
if (!this.settleAccountsObj.checkNum) return uni.showToast({
|
|
title: '请先选择对应商品',
|
|
icon: 'none'
|
|
})
|
|
this.showDeleteModal = true
|
|
|
|
}
|
|
,
|
|
|
|
/**
|
|
* 执行删除
|
|
* @return {Promise<void>}
|
|
*/
|
|
async handleDoDelete() {
|
|
let ids = []
|
|
for (const shopObj of this.dataList) {
|
|
ids = [...ids, ...shopObj.skus.filter(sku => (sku.selected === 1 || sku.selected === true)).map(sku => sku.skuId)]
|
|
}
|
|
await NET.request(API.DeleteCart, {ids}, 'POST')
|
|
this.showDeleteModal = false
|
|
await this.getDataList()
|
|
}
|
|
,
|
|
|
|
/**
|
|
* 结算购物车
|
|
* @return {Promise<void>}
|
|
*/
|
|
async settlementTap() {
|
|
const {shopList} = await getPriceBySelect(this.dataList)
|
|
uni.setStorageSync('skuItemDTOList', shopList)
|
|
this.$jump('/pages_category_page1/orderModule/orderConfirm?type=2')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
scoped
|
|
>
|
|
.content {
|
|
|
|
//overflow: hidden;
|
|
//opacity: 0;
|
|
|
|
.cart-bg {
|
|
width: 100%;
|
|
height: 70rpx;
|
|
background-color: #fff;
|
|
|
|
.cart-num-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 286rpx;
|
|
height: 72rpx;
|
|
}
|
|
|
|
.btn-box {
|
|
font-size: 28rpx;
|
|
color: #252744;
|
|
border: 1rpx solid #252744;
|
|
border-radius: 30rpx;
|
|
padding: 6rpx 20rpx;
|
|
margin-right: 30rpx;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.num-box {
|
|
padding: 30rpx 0 30rpx 30rpx;
|
|
box-sizing: border-box;
|
|
font-size: 28rpx;
|
|
color: #252744;
|
|
}
|
|
}
|
|
|
|
.cart-list-box {
|
|
box-sizing: border-box;
|
|
|
|
.itemBox {
|
|
.item {
|
|
background: #ffffff;
|
|
//border-bottom: 16rpx solid #F8F9FA;
|
|
margin-left: 30rpx;
|
|
margin-right: 30rpx;
|
|
margin-top: 30rpx;
|
|
border-radius: 30rpx;
|
|
.shop-box {
|
|
margin-top: 5rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.cart-select-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.shop-name-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.shop-img {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 2rpx;
|
|
}
|
|
|
|
.shop-name {
|
|
font-size: 28rpx;
|
|
color: #252744;
|
|
display: inline-block;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.arrow-right-img {
|
|
width: 14rpx;
|
|
height: 24rpx;
|
|
margin-left: 12rpx;
|
|
margin-top: 4rpx;
|
|
/* box-sizing: border-box;
|
|
margin-left: 30rpx;
|
|
position: absolute;
|
|
right: 30rpx;*/
|
|
}
|
|
}
|
|
}
|
|
|
|
.rulesBox {
|
|
height: 86rpx;
|
|
background: #F9F6F1;
|
|
padding: 0 20rpx;
|
|
|
|
image {
|
|
width: 126rpx;
|
|
height: 46rpx;
|
|
}
|
|
}
|
|
|
|
.product-list-box {
|
|
margin: 8rpx 0;
|
|
|
|
.pro-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
|
|
.cart-select-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.pro-r {
|
|
flex: 1;
|
|
border-bottom: 1px solid #eee;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 30rpx 30rpx 30rpx 0;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.pro-img {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
border-radius: 10rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.pro-r-r {
|
|
flex: 1;
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.pro-name {
|
|
height: 50rpx;
|
|
line-height: 33rpx;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
font-size: 24rpx;
|
|
color: #252744;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.sku-box {
|
|
width: auto;
|
|
display: inline;
|
|
height: 40rpx;
|
|
box-sizing: border-box;
|
|
font-size: 24rpx;
|
|
color: #90919C;
|
|
|
|
/*text {
|
|
border: 2rpx solid #E4E5E6;
|
|
padding: 2rpx 10rpx;
|
|
}*/
|
|
}
|
|
|
|
.pro-price-num-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.pro-price-box {
|
|
font-size: 26rpx;
|
|
color: #90919C;
|
|
font-weight: 400;
|
|
|
|
.fuhao {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.pro-num-box {
|
|
width: 140rpx;
|
|
height: 40rpx;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
|
|
.num-btn {
|
|
font-size: 34rpx;
|
|
color: #999999;
|
|
display: inline-block;
|
|
width: 40rpx;
|
|
text-align: center;
|
|
line-height: 32rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.num-btn.r {
|
|
border-right: 1px solid #ddd;
|
|
}
|
|
|
|
.num-btn.l {
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
|
|
.num {
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pro-item:last-of-type .pro-r {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.itemBox:first-child {
|
|
.shop-box {
|
|
//border-top: 2rpx solid #eee;
|
|
}
|
|
}
|
|
|
|
.itemBox:last-child {
|
|
.item {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.emptyCart-box {
|
|
margin: 100rpx 0;
|
|
|
|
.emptyCart-img {
|
|
width: 216rpx;
|
|
height: 156rpx;
|
|
}
|
|
|
|
.goToShopping {
|
|
width: 282rpx;
|
|
height: 84rpx;
|
|
line-height: 84rpx;
|
|
text-align: center;
|
|
background: #333333;
|
|
margin-top: 40rpx;
|
|
color: #FFEBC4;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.cart-bottom-box-h5 {
|
|
position: fixed;
|
|
bottom: 80rpx;
|
|
width: 100%;
|
|
z-index: 99;
|
|
}
|
|
|
|
.cart-bottom-box-app {
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
width: 100%;
|
|
z-index: 99;
|
|
}
|
|
|
|
.cart-bottom {
|
|
height: 190rpx;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-top-left-radius: 30rpx;
|
|
border-top-right-radius: 30rpx;
|
|
//border-top: 1rpx solid #eee;
|
|
}
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #252744;
|
|
|
|
.cart-select-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-left: 50rpx;
|
|
margin-right: 15rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.total-title{
|
|
color: #252744;
|
|
font-size: 28rpx;
|
|
margin-left: 50rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.total-content{
|
|
color: #252744;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
|
|
.price-box {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
|
|
.price {
|
|
font-size: 40rpx;
|
|
color: #C83732;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.btn-confirm {
|
|
width: 280rpx;
|
|
height: 98rpx;
|
|
background: #252744;
|
|
text-align: center;
|
|
line-height: 98rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
margin-right: 50rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.btn-delete {
|
|
width: 280rpx;
|
|
height: 98rpx;
|
|
background: #F54639;
|
|
text-align: center;
|
|
line-height: 98rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
margin-right: 50rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.cart-operate-num-box {
|
|
width: 140rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
|
|
.operate-img{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
.num {
|
|
font-size: 26rpx;
|
|
color: #252744;
|
|
}
|
|
}
|
|
|
|
page{
|
|
background-color: #FAFAFA;
|
|
}
|
|
</style>
|