mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-07 03:14:59 +08:00
349ffa4f34
- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
956 lines
23 KiB
Vue
956 lines
23 KiB
Vue
<template>
|
|
<div class="wrapper" :style="themeStyle">
|
|
<u-navbar
|
|
class="cart-navbar"
|
|
:style="cartNavbarStyle"
|
|
:auto-back="false"
|
|
:fixed="true"
|
|
:placeholder="true"
|
|
:border="false"
|
|
left-icon=""
|
|
title="购物车"
|
|
:right-text="isEdit ? '完成' : '编辑'"
|
|
@rightClick="toggleEdit"
|
|
></u-navbar>
|
|
<!-- 空白页-->
|
|
<view v-if="!loading && (cartDetail.cartList == '' || cartDetail.cartList == [] || !cartDetail)" class="empty">
|
|
<image src="/static/emptyCart.png" mode="aspectFit"></image>
|
|
<view class="empty-tips">
|
|
空空如也
|
|
<navigator class="navigator" url="/pages/tabbar/home/index" open-type="switchTab">随便逛逛</navigator>
|
|
</view>
|
|
</view>
|
|
<!-- 店铺商品信息 -->
|
|
<div class="content">
|
|
<div class="box box2" :class="{ invalid: isInvalid(item) }" v-for="(item, index) in cartDetail.cartList"
|
|
:key="index">
|
|
<view class="tab">
|
|
<view class="store-line">
|
|
<view class="store-line-check">
|
|
<u-checkbox usedAlone shape="circle" :active-color="lightColor" v-model:checked="item.checked"
|
|
:label-size="14" @change="(checked) => onStoreCheckChange(item, checked)"></u-checkbox>
|
|
</view>
|
|
<text class="store-name wes" @click.stop="navigateToStore(item)">{{ item.storeName }}</text>
|
|
</view>
|
|
<view class="right-col" v-if="item.canReceiveCoupon" @click="navigateToCoupon(item)">
|
|
<div class="right-line"></div>
|
|
<span>领劵</span>
|
|
</view>
|
|
</view>
|
|
<u-swipe-action ref="swiperAction" class="cart-item" v-for="(skuItem, i) in item.skuList" :key="skuItem.goodsSku.id">
|
|
<u-swipe-action-item :show="skuItem.selected" @open="openAction(skuItem)" :options="options"
|
|
:name="i"
|
|
@click="changeActionTab(skuItem)" @longpress="changeActionTab(skuItem)">
|
|
<!-- 满减活动 -->
|
|
<div v-if="Object.keys(skuItem.promotionMap).length != 0">
|
|
<div v-if="getPromotion(skuItem).includes('FULL_DISCOUNT')">
|
|
<div class="promotion-notice" v-if="item.promotionNotice">
|
|
<span class="tips">满减</span>
|
|
<span style="flex:10;">{{item.promotionNotice}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<view class="goods-row" :class="{ invalid: isInvalid(skuItem) }">
|
|
<view class="goods-config">
|
|
<view>
|
|
<u-checkbox v-if="skuItem.invalid == 0 && !skuItem.errorMessage" usedAlone shape="circle"
|
|
:active-color="lightColor" class="c-left" v-model:checked="skuItem.checked"
|
|
@change="(checked) => onSkuCheckChange(skuItem, checked)"></u-checkbox>
|
|
<span class="invalid" v-else style="font-size: 24rpx">失效</span>
|
|
</view>
|
|
<u-image border-radius="10" :fade="true" @click="navigateToGoods(skuItem)" width="160rpx" height="160rpx"
|
|
mode="aspectFill" :src="getSkuThumbnail(skuItem.goodsSku.thumbnail)" />
|
|
</view>
|
|
<view class="goods-content">
|
|
<!-- 商品名称 -->
|
|
<p class="sp-name" @click="navigateToGoods(skuItem)">
|
|
{{ skuItem.goodsSku.goodsName }}
|
|
</p>
|
|
<!-- 规格 -->
|
|
<p class="sp-type" style="width:300rpx">{{skuItem.goodsSku.simpleSpecs}}</p>
|
|
<p class="sp-type" v-if="skuItem.goodsSku.salesModel == 'WHOLESALE'">批发商品</p>
|
|
<p class="sp-number">
|
|
<view class="sp-price">
|
|
<div class="main-color">
|
|
￥<span>{{ goodsFormatPrice(skuItem.goodsSku.price)[0] }}</span>
|
|
<span>.{{ goodsFormatPrice(skuItem.goodsSku.price)[1] }}</span>
|
|
</div>
|
|
</view>
|
|
<view>
|
|
<uni-number-box class="uNumber" :min="1" :max="999" @change="numChange(skuItem)" v-model="skuItem.num"></uni-number-box>
|
|
</view>
|
|
<!-- 如果当有促销并且促销是 限时抢购 -->
|
|
<div class="promotions-list" v-if="Object.keys(skuItem.promotionMap).length != 0"
|
|
>
|
|
<div class="promotions-item-seckill" v-if="getPromotion(skuItem).includes('SECKILL')">
|
|
距秒杀结束: <u-count-down show-border :hide-zero-day="true" :color="$mainColor" border-color="#ededed"
|
|
font-size="24" :timestamp="getCountDownTime(skuItem)">
|
|
</u-count-down>
|
|
</div>
|
|
</div>
|
|
|
|
<div style='margin-left: 20rpx;' v-if="!skuItem.checked && skuItem.errorMessage">
|
|
{{skuItem.errorMessage}}
|
|
</div>
|
|
</p>
|
|
|
|
</view>
|
|
</view>
|
|
</u-swipe-action-item>
|
|
</u-swipe-action>
|
|
</div>
|
|
</div>
|
|
<u-modal v-model:show="deleteShow" :confirm-style="{'color':lightColor}" @confirm="deleteConfirm" show-cancel-button
|
|
:content="deleteContent" :async-close="true"></u-modal>
|
|
<!-- 结账 -->
|
|
<div class="box box6">
|
|
<view class="navL">
|
|
<u-checkbox class="checkout-all" usedAlone shape="circle" :active-color="lightColor" v-model:checked="checkout"
|
|
:label-size="12" label="全选" @change="checkOut">
|
|
</u-checkbox>
|
|
<view class="checkout-total">
|
|
<view class="checkout-total-main">
|
|
<text class="checkout-total-label">总计:</text>
|
|
<text class="checkout-total-price" v-if="cartDetail && cartDetail.priceDetailDTO">
|
|
<text class="checkout-total-currency">¥</text>
|
|
<text class="checkout-total-int">{{ goodsFormatPrice(cartDetail.priceDetailDTO.flowPrice)[0] }}</text>
|
|
<text class="checkout-total-dec">.{{ goodsFormatPrice(cartDetail.priceDetailDTO.flowPrice)[1] }}</text>
|
|
</text>
|
|
<text class="checkout-total-price" v-else>¥0.00</text>
|
|
</view>
|
|
<view
|
|
v-if="cartDetail.cartList && cartDetail.cartList.length != 0 && cartDetail.priceDetailDTO && cartDetail.priceDetailDTO.discountPrice != 0"
|
|
class="checkout-total-discount"
|
|
>
|
|
<text>优惠减:￥{{ cartDetail.priceDetailDTO.goodsPrice - unitPrice(cartDetail.priceDetailDTO.flowPrice) }}</text>
|
|
<text class="discount-details" @click="discountDetails">优惠明细</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 优惠详情 -->
|
|
<u-popup z-index="3" close mode="bottom" height="50%" closeable v-model:show="discountDetailsFlag" border-radius="20">
|
|
<div class="discount-list">
|
|
<view class="discount-title">优惠明细</view>
|
|
<div class="discount-way">
|
|
<div class="discount-item" v-if="cartDetail.priceDetailDTO">
|
|
<span>商品总额</span>
|
|
<span>￥{{unitPrice(cartDetail.priceDetailDTO.goodsPrice)}}</span>
|
|
|
|
</div>
|
|
<div class="discount-item" v-if="cartDetail.priceDetailDTO">
|
|
<span>优惠券</span>
|
|
<span>-￥{{unitPrice(cartDetail.priceDetailDTO.couponPrice)}}</span>
|
|
</div>
|
|
<div class="discount-item" v-if="cartDetail.priceDetailDTO">
|
|
<span>其他优惠</span>
|
|
<span>-￥{{unitPrice(cartDetail.priceDetailDTO.discountPrice)}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</u-popup>
|
|
|
|
<view v-if="isEdit" @click="deleteGoods()">
|
|
<div class="settlement">删除</div>
|
|
</view>
|
|
|
|
<view v-else @click="submitOrder()">
|
|
<div class="settlement">去结算</div>
|
|
</view>
|
|
</div>
|
|
<u-toast ref="uToast" />
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, reactive, computed, onMounted } from 'vue'
|
|
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
|
|
import * as API_Trade from '@/api/trade'
|
|
import { debounce } from '@/utils/tools.js'
|
|
import uniNumberBox from '@/components/uni-number-box'
|
|
import config from '@/config/config'
|
|
import { useStore } from '@/store'
|
|
import { unitPrice, goodsFormatPrice, isLogin, forceLogin } from '@/utils/filters.js'
|
|
|
|
const store = useStore()
|
|
const uToast = ref()
|
|
const swiperAction = ref()
|
|
|
|
const lightColor = computed(() => store.getters.lightColor)
|
|
const loading = ref(false)
|
|
const discountDetailsFlag = ref(false)
|
|
// 商品栏右侧滑动按钮
|
|
const options = [
|
|
{
|
|
text: "删除",
|
|
style: {
|
|
backgroundColor: store.getters.lightColor,
|
|
},
|
|
},
|
|
]
|
|
const isInvalid = (val: any): boolean => {
|
|
if (!val) return false
|
|
if (val.invalid == 1 || (!val.checked && val.errorMessage)) {
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
}
|
|
const deleteShow = ref(false)
|
|
const deleteContent = "删除该商品？"
|
|
const cartDetail = ref<any>("")
|
|
const goodsVal = ref<any>("")
|
|
const isEdit = ref(false)
|
|
const checkout = ref(false)
|
|
const WEIXIN_num = ref("")
|
|
const defaultGoodsImage = config.logo
|
|
const capsuleInsetRight = ref(0)
|
|
|
|
const cartNavbarStyle = computed(() => {
|
|
if (!capsuleInsetRight.value) {
|
|
return {}
|
|
}
|
|
return {
|
|
"--cart-capsule-inset": `${capsuleInsetRight.value}px`,
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
setCapsuleInset()
|
|
// #ifdef MP-WEIXIN
|
|
uni.showShareMenu({ withShareTicket: true })
|
|
// #endif
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
getCardData()
|
|
})
|
|
|
|
onShow(() => {
|
|
deleteShow.value ? (deleteShow.value = false) : true
|
|
if (swiperAction.value) {
|
|
(swiperAction.value as any[]).forEach((item: any) => {
|
|
item.show = false
|
|
})
|
|
getCardData()
|
|
} else {
|
|
getCardData()
|
|
}
|
|
})
|
|
|
|
function setCapsuleInset() {
|
|
// #ifdef MP-WEIXIN
|
|
try {
|
|
const menuButton = uni.getMenuButtonBoundingClientRect()
|
|
const { windowWidth } = uni.getWindowInfo()
|
|
capsuleInsetRight.value = windowWidth - menuButton.left + uni.upx2px(8)
|
|
} catch (e) {
|
|
capsuleInsetRight.value = 90
|
|
}
|
|
// #endif
|
|
}
|
|
|
|
function toggleEdit() {
|
|
isEdit.value = !isEdit.value
|
|
}
|
|
|
|
function getSkuThumbnail(url: any) {
|
|
if (url && /^(https?:)?\/\//.test(String(url))) {
|
|
return url
|
|
}
|
|
return defaultGoodsImage
|
|
}
|
|
|
|
/**
|
|
* 倒数计时
|
|
*/
|
|
function getCountDownTime(val: any) {
|
|
if (val.promotionMap) {
|
|
let key = Object.keys(val.promotionMap).find((child: string) => {
|
|
return child.split("-")[0] == 'SECKILL'
|
|
})
|
|
return val.promotionMap[key].endTime / 1000 - (new Date().getTime() / 1000)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 优惠明细开关
|
|
*/
|
|
function discountDetails() {
|
|
discountDetailsFlag.value = true
|
|
}
|
|
/**
|
|
* 左滑打开删除
|
|
*/
|
|
function openAction(skuItem: any) {
|
|
cartDetail.value.cartList.forEach((cartItem: any) => {
|
|
if (cartItem.skuList) {
|
|
cartItem.skuList.forEach((sku: any) => {
|
|
sku["selected"] = false
|
|
})
|
|
}
|
|
})
|
|
skuItem["selected"] = true
|
|
}
|
|
|
|
/**
|
|
* 滑动删除
|
|
*/
|
|
function changeActionTab(val: any) {
|
|
deleteShow.value = true
|
|
goodsVal.value = val
|
|
}
|
|
|
|
/**
|
|
* 点击删除
|
|
*/
|
|
function deleteConfirm() {
|
|
API_Trade.deleteSkuItem(goodsVal.value.goodsSku.id).then((res: any) => {
|
|
if (res.statusCode == 200) {
|
|
uni.showToast({
|
|
title: "此商品删除成功",
|
|
duration: 2000,
|
|
})
|
|
deleteShow.value = false
|
|
getCardData()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 删除商品
|
|
*/
|
|
function deleteGoods() {
|
|
if (whetherChecked()) {
|
|
var delGoodsData: any[] = []
|
|
cartDetail.value.cartList.forEach((item: any) => {
|
|
item.skuList.forEach((goodsItem: any) => {
|
|
if (goodsItem.checked) {
|
|
delGoodsData.push(goodsItem.goodsSku.id)
|
|
}
|
|
})
|
|
})
|
|
if (delGoodsData && delGoodsData.length > 0) {
|
|
API_Trade.deleteSkuItem(delGoodsData).then((res: any) => {
|
|
if (res.data.success) {
|
|
uni.showToast({
|
|
title: "删除成功!",
|
|
icon: "none",
|
|
})
|
|
getCardData()
|
|
}
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: "请选择删除商品，如果商品失效，请左滑无效商品删除",
|
|
icon: "none",
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 跳转到店铺
|
|
*/
|
|
function navigateToStore(val: any) {
|
|
uni.navigateTo({
|
|
url: "/pages/product/shopPage?id=" + val.storeId,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 跳转到优惠券
|
|
*/
|
|
function navigateToCoupon(val: any) {
|
|
uni.navigateTo({
|
|
url: "/pages/cart/coupon/couponCenter?storeId=" + val.storeId,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 跳转到商品
|
|
*/
|
|
function navigateToGoods(val: any) {
|
|
uni.navigateTo({
|
|
url:
|
|
"/pages/product/goods?id=" +
|
|
val.goodsSku.id +
|
|
"&goodsId=" +
|
|
val.goodsSku.goodsId,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 点击步进器回调
|
|
*/
|
|
const numChange = debounce(function (val: any) {
|
|
updateSkuNumFun(val.goodsSku.id, val.num)
|
|
}, 1000)
|
|
/**
|
|
* 去结算
|
|
*/
|
|
function submitOrder() {
|
|
if (whetherChecked()) {
|
|
navigateTo("/pages/order/fillorder?way=CART")
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 验证是否选中商品
|
|
*/
|
|
function whetherChecked(): boolean {
|
|
forceLogin()
|
|
|
|
let canBuy = false
|
|
cartDetail.value.cartList.forEach((item: any) => {
|
|
if (item.checked) {
|
|
canBuy = true
|
|
} else {
|
|
item.skuList.forEach((skuItem: any) => {
|
|
if (skuItem.checked) {
|
|
canBuy = true
|
|
}
|
|
})
|
|
}
|
|
})
|
|
if (!canBuy) {
|
|
uni.showToast({
|
|
title: "您还没有选择商品",
|
|
duration: 2000,
|
|
icon: "none",
|
|
})
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 跳转
|
|
*/
|
|
function navigateTo(url: string) {
|
|
uni.navigateTo({
|
|
url,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 全选
|
|
*/
|
|
function checkOut(checked?: boolean) {
|
|
const selected = typeof checked === "boolean" ? checked : checkout.value
|
|
API_Trade.checkAll(selected).then((result: any) => {
|
|
if (result.data.success) {
|
|
getCardData()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 获取店铺选中信息
|
|
*/
|
|
function checkStoreFun(skuId: any, num: any) {
|
|
API_Trade.checkStore(skuId, num).then((result: any) => {
|
|
if (result.data.success) {
|
|
getCardData()
|
|
}
|
|
})
|
|
}
|
|
|
|
function onStoreCheckChange(storeItem: any, checked: any) {
|
|
checkStoreFun(storeItem.storeId, checked)
|
|
}
|
|
|
|
function onSkuCheckChange(skuItem: any, checked: any) {
|
|
updateSkuCheckedFun(skuItem.goodsSku.id, checked)
|
|
}
|
|
|
|
/**
|
|
* 获取购物车选中信息
|
|
*/
|
|
function updateSkuCheckedFun(skuId: any, num: any) {
|
|
API_Trade.updateSkuChecked(skuId, num).then((result: any) => {
|
|
if (result.data.success) {
|
|
getCardData()
|
|
}
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 更新商品购物车数量
|
|
*/
|
|
function updateSkuNumFun(skuId: any, num: any) {
|
|
API_Trade.updateSkuNum(skuId, num).then((result: any) => {
|
|
if (result.statusCode == 200) {
|
|
getCardData()
|
|
} else {
|
|
setTimeout(() => {
|
|
getCardData()
|
|
}, 1000)
|
|
}
|
|
})
|
|
}
|
|
|
|
// 数据去重一下
|
|
function getPromotion(item: any) {
|
|
return Object.keys(item.promotionMap).map((child: string) => {
|
|
return child.split("-")[0]
|
|
})
|
|
}
|
|
|
|
/**
|
|
* 获取购物车数据
|
|
*/
|
|
function getCardData() {
|
|
if (isLogin("auth")) {
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
})
|
|
API_Trade.getCarts()
|
|
.then((result: any) => {
|
|
loading.value = false
|
|
uni.stopPullDownRefresh()
|
|
if (result.data.success) {
|
|
cartDetail.value = result.data.result
|
|
let checkOuted = true
|
|
for (let i = 0; i < cartDetail.value.cartList.length; i++) {
|
|
let item = cartDetail.value.cartList[i]
|
|
item.checked = item.checked == 1
|
|
if (!item.checked) {
|
|
checkOuted = false
|
|
}
|
|
item.skuList &&
|
|
item.skuList.forEach((sku: any) => {
|
|
sku.checked = sku.checked == 1
|
|
if (!sku.checked) {
|
|
checkOuted = false
|
|
}
|
|
if(Object.keys(sku.promotionMap).length != 0)
|
|
{
|
|
Object.keys(sku.promotionMap).forEach((pro: string, proIndex: number) => {
|
|
pro = pro.split('-')[0]
|
|
if (pro == "PINTUAN" ) {
|
|
Object.keys(sku.promotionMap).splice(proIndex, 1);
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
checkout.value = checkOuted
|
|
uni.stopPullDownRefresh()
|
|
}
|
|
})
|
|
.catch(() => { loading.value = false })
|
|
if (store.state.isShowToast){ uni.hideLoading() }
|
|
} else {
|
|
if (store.state.isShowToast){ uni.hideLoading() }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f2f2f2;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
// #ifdef MP-WEIXIN
|
|
@import "./mp-carui.scss";
|
|
// #endif
|
|
.u-image {
|
|
box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.cart-navbar {
|
|
::v-deep .u-navbar__content__right {
|
|
padding-right: var(--cart-capsule-inset, 13px);
|
|
}
|
|
|
|
::v-deep .u-navbar__content__right__text {
|
|
color: $light-color;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
.promotion-notice {
|
|
margin-top: 10px;
|
|
margin-left: 68rpx;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
::v-deep .tips {
|
|
margin: 0 8rpx 0 0;
|
|
background: $main-color;
|
|
border-radius: 100px;
|
|
display: block;
|
|
flex: 1;
|
|
padding: 2rpx 12rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.default-color {
|
|
color: #333;
|
|
}
|
|
.goods-row {
|
|
padding: 30rpx 0;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.store-name {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.store-arrow {
|
|
flex-shrink: 0;
|
|
margin-left: 10rpx;
|
|
}
|
|
.invalid {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.cart-item {
|
|
width: 100%;
|
|
border-radius: 0.4em;
|
|
transition: 0.35s;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 空白页 */
|
|
::v-deep .u-number-input {
|
|
background: #fff !important;
|
|
border: 1px solid #ededed;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
::v-deep .u-icon-minus,
|
|
::v-deep .u-icon-plus {
|
|
background: #ffffff !important;
|
|
border: 1px solid #ededed;
|
|
color: #333 !important;
|
|
width: 40rpx;
|
|
}
|
|
|
|
.empty {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: 99;
|
|
padding-bottom: var(--window-bottom);
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #fff;
|
|
|
|
image {
|
|
width: 240rpx;
|
|
height: 160rpx;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.empty-tips {
|
|
display: flex;
|
|
font-size: $font-sm + 2rpx;
|
|
color: $font-color-disabled;
|
|
|
|
.navigator {
|
|
color: $uni-color-primary;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.settlement {
|
|
width: 180rpx;
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
background: linear-gradient(91deg, $light-color 1%, $aider-light-color 99%);
|
|
border-radius: 900rpx;
|
|
text-align: center;
|
|
color: #fff;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.price {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
::v-deep .number {
|
|
line-height: 1;
|
|
font-size: 30rpx;
|
|
> span {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box2 {
|
|
border-radius: 20rpx;
|
|
padding: 0 16rpx 0;
|
|
margin: 0 16rpx 20rpx;
|
|
.u-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
background: #fff;
|
|
|
|
}
|
|
|
|
.wrapper {
|
|
height: 100%;
|
|
}
|
|
|
|
::v-deep .u-col {
|
|
padding: 24rpx 0 !important;
|
|
}
|
|
|
|
.goods-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 20rpx;
|
|
overflow: hidden;
|
|
|
|
> p,
|
|
.sp-name,
|
|
.sp-type,
|
|
.sp-number {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 20rpx 0 20rpx 0;
|
|
margin-bottom: 80rpx;
|
|
}
|
|
|
|
.line {
|
|
float: left;
|
|
width: 1px;
|
|
height: 100%;
|
|
border-right: 1px solid $light-color;
|
|
}
|
|
|
|
.store-line-check {
|
|
flex-shrink: 0;
|
|
|
|
::v-deep .u-checkbox {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.store-line {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods-config {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
|
|
::v-deep .invalid {
|
|
display: block;
|
|
width: 80rpx !important;
|
|
}
|
|
}
|
|
.tab {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24rpx 0 8rpx;
|
|
}
|
|
|
|
.right-col {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: $light-color;
|
|
font-size: 26rpx;
|
|
margin-left: 16rpx;
|
|
|
|
> span {
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.right-line {
|
|
width: 2rpx;
|
|
height: 40rpx;
|
|
border-left: 1px solid #eeeeee;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.box6 {
|
|
justify-content: space-between;
|
|
position: fixed;
|
|
// #ifdef APP-PLUS || MP-WEIXIN
|
|
bottom: 0;
|
|
// #endif
|
|
// #ifdef H5
|
|
bottom: var(--window-bottom);
|
|
// #endif
|
|
left: 0;
|
|
border-top: 1px solid #ededed;
|
|
display: flex;
|
|
height: 100rpx;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
width: 100%;
|
|
background: rgba(255, 255, 255, 1);
|
|
color: #333;
|
|
z-index: 99;
|
|
> .navL {
|
|
padding: 0 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
min-width: 0;
|
|
gap: 24rpx;
|
|
|
|
.checkout-all {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
::v-deep .u-checkbox {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.checkout-total {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.checkout-total-main {
|
|
display: flex;
|
|
align-items: baseline;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.checkout-total-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.checkout-total-price {
|
|
margin-left: 4rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: $main-color;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.checkout-total-int {
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.checkout-total-dec {
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.checkout-total-discount {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 4rpx;
|
|
font-size: 24rpx;
|
|
color: #c9c7c7;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
|
|
.sp-type {
|
|
color: $u-light-color;
|
|
padding: 10rpx 0;
|
|
font-size: 24rpx;
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
.sp-number {
|
|
font-weight: bold;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
> .sp-price {
|
|
::v-deep span:nth-of-type(1) {
|
|
font-size: 38rpx;
|
|
}
|
|
::v-deep span:nth-of-type(2) {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.priceDetail-flowPrice {
|
|
font-weight: bold;
|
|
padding-left: 20rpx;
|
|
> span:nth-of-type(1) {
|
|
font-size: 38rpx;
|
|
}
|
|
}
|
|
|
|
.discount-details {
|
|
margin-left: 10px;
|
|
color: #666;
|
|
padding: 4rpx 10rpx;
|
|
border-radius: 100px;
|
|
background: rgba(201, 199, 199, 0.3);
|
|
}
|
|
.discount-item {
|
|
display: flex;
|
|
margin: 40rpx 0;
|
|
justify-content: space-between;
|
|
> span:nth-of-type(1) {
|
|
color: #666;
|
|
}
|
|
> span:nth-of-type(2) {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.discount-title {
|
|
font-size: 36rpx;
|
|
margin-top: 20rpx;
|
|
text-align: center;
|
|
}
|
|
.discount-way {
|
|
width: 94%;
|
|
margin: 0 3%;
|
|
}
|
|
.discount-list {
|
|
width: 100%;
|
|
}
|
|
.promotions-list {
|
|
margin-left: 20rpx;
|
|
> .promotions-item-seckill {
|
|
background: rgba($color: $main-color, $alpha: 0.1);
|
|
font-size: 24rpx;
|
|
color: $main-color;
|
|
display: inline;
|
|
padding: 0rpx 10rpx;
|
|
border-radius: 100px;
|
|
}
|
|
}
|
|
</style>
|