|
|
<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="http://36.138.125.206:8081/ceres-local-file/image/logo_http://36.138.125.206:8081/ceres-local-filepng" ></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="http://36.138.125.206:8081/ceres-local-file/image/title_edit.png"/> <image style="width: 32rpx;height: 32rpx;margin-right: 30rpx" @click="showManage = !showManage" v-if="showManage" src="http://36.138.125.206:8081/ceres-local-file/image/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="http://36.138.125.206:8081/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="http://36.138.125.206:8081/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="http://36.138.125.206:8081/ceres-local-file/image/cart_shop.png" class="shop-img" ></image> <text class="shop-name">{{ item.shopName }}</text> <image src="http://36.138.125.206:8081/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="http://36.138.125.206:8081/ceres-local-file/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="http://36.138.125.206:8081/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="http://36.138.125.206:8081/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(http://36.138.125.206:8081/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="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_nosub.png"/> <image v-else class="operate-img" @click.stop="handleSubSkuNumber(index,cIndex)" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_sub.png"/> <text class="num">{{ skuItem.number }}</text> <image class="operate-img" @click.stop="handleAddSkuNumber(index,cIndex)" src="http://36.138.125.206:8081/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="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_select_active.png" class="cart-select-img" @click="handleSelectAll(0)" ></image> <image mode="aspectFill" v-else src="http://36.138.125.206:8081/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="http://36.138.125.206:8081/ceres-local-file/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>
|
