1171 lines
31 KiB
Vue
1171 lines
31 KiB
Vue
|
<template>
|
||
|
|
<view class="dialogBox" v-if="show">
|
||
|
|
<view class="dialog" @click="closeDialog()"></view>
|
||
|
|
|
||
|
|
<view class="block">
|
||
|
|
<view class="head">
|
||
|
|
<text>本团商品</text>
|
||
|
|
<view class="text" @click="toGroup()">查看团购详情<up-icon name="arrow-right" color="#666" /></view>
|
||
|
|
</view>
|
||
|
|
<scroll-view scroll-y="true" class="contentBox">
|
||
|
|
|
||
|
|
<view class="goods-item" v-for="goods in goodsList" :key="goods.id">
|
||
|
|
<template v-if="goods.specs_type === 1">
|
||
|
|
<view class="left" @click="getGoodsSkus(goods)">
|
||
|
|
<view class="tip" v-if="goods.goods.stock <= 0">已抢光</view>
|
||
|
|
<image class="img" :src="goods.face_img" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<template v-else>
|
||
|
|
<view class="left" @click="can_buy ? openSingleSku(goods) : ''">
|
||
|
|
<view class="tip" v-if="goods.goods.stock <= 0">已抢光</view>
|
||
|
|
<image class="img" :src="goods.face_img" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<view class="right">
|
||
|
|
<view @click="getGoodsSkus(goods)">
|
||
|
|
<view class="title">
|
||
|
|
<view class="kuajing" v-if="goods.goods.is_cross_border === 1">跨境包税</view>
|
||
|
|
<view class="kuajing" v-else-if="goods.goods.overseas_direct_mail === 1">海外直邮</view>{{goods.title}}
|
||
|
|
</view>
|
||
|
|
<view>
|
||
|
|
<span v-if="goods.goods.limit_type == 1" class="box_number1">{{goods.goods.start_sale_num}}件起购</span>
|
||
|
|
<span v-if="goods.goods.limit_type == 2" class="box_number1">限购{{goods.goods.limit}}件</span>
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;align-items: center;justify-content: space-between;padding: 10rpx 0;">
|
||
|
|
<span class="tites"></span>
|
||
|
|
<text class="total" v-if="is_show_sales && info.copy_shared_on === 0">已团{{goods.sales}}</text>
|
||
|
|
<text class="total" v-if="is_show_sales && info.copy_shared_on === 1">已团{{goods.goods.sales}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;align-items: center;justify-content: space-between;">
|
||
|
|
<view style="display: flex;align-items: center;flex-wrap: wrap;">
|
||
|
|
|
||
|
|
<!-- 会员下普通价格 -->
|
||
|
|
<view class="text text2" v-if="vipOn && goods.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))">
|
||
|
|
<view class="price">
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text v-if="goods.specs_type === 0">{{goods.price * 1}}</text>
|
||
|
|
<text v-else>
|
||
|
|
<text v-if="goods.max_price === goods.min_price">{{goods.min_price * 1}}</text>
|
||
|
|
<text v-else>{{goods.min_price * 1}}<text class="st">起</text></text>
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="text">
|
||
|
|
<!-- 显示会员价 -->
|
||
|
|
<view v-if="vipOn && goods.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))" class="vip">
|
||
|
|
<view class="vip-tag"><text>会员价 ￥</text>{{goods.vip_price * 1}}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 显示普通价格 -->
|
||
|
|
<view v-else class="vip">
|
||
|
|
<view class="price">
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text v-if="goods.specs_type === 0">{{goods.price * 1}}</text>
|
||
|
|
<text v-else>
|
||
|
|
<text v-if="goods.max_price === goods.min_price">{{goods.min_price * 1}}</text>
|
||
|
|
<text v-else>{{goods.min_price * 1}}<text class="st">起</text></text>
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<template v-if="goods.show2">
|
||
|
|
<text class="right1" :class="(goods.goods.stock <= 0 || !can_buy) ? 'dis' : ''"
|
||
|
|
v-if="info.status !== 3 && info.sold_status !== 2"
|
||
|
|
@click="(goods.goods.stock > 0 && can_buy) ? getGoodsSkus(goods) : ''">加入购物车</text>
|
||
|
|
</template>
|
||
|
|
<template v-if="goods.show1">
|
||
|
|
<up-number-box
|
||
|
|
v-model="goods.num"
|
||
|
|
:min="goods.goods.limit_type == 1 ? parseInt(goods.goods.start_sale_num) : goods.goods.limit_type == 0 ? 1 : 1"
|
||
|
|
:max="goods.goods.limit_type == 2 ? parseInt(goods.goods.limit) : goods.goods.limit_type == 0 ? (goods.goods.stock <= 0 ? 0 : goods.goods.stock) : 0"
|
||
|
|
@overlimit="plusBtn(goods.goods.limit_type == 1 ? 0 : goods.goods.limit_type == 2 ? 1 : 2, goods.num, goods.goods.limit, (goods.goods.stock <= 0 ? 0 : goods.goods.stock))"
|
||
|
|
disabledInput
|
||
|
|
bgColor="#f2f3f5"
|
||
|
|
:longPress="false"
|
||
|
|
:asyncChange="true"
|
||
|
|
@change="changeNum($event, goods)">
|
||
|
|
</up-number-box>
|
||
|
|
</template>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="loading" class="loadbox">
|
||
|
|
<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
|
||
|
|
</view>
|
||
|
|
<view v-if="!loading && !goodsList.length">
|
||
|
|
<up-empty mode="list" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/list.png" text="正在备货中..."></up-empty>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
|
||
|
|
<view class="cartBox" :class="showCart ? 'show' : ''">
|
||
|
|
<view class="head">
|
||
|
|
<text>已选{{number}}件商品</text>
|
||
|
|
<view class="close" @click="showCart = false"><up-icon name="close" color="#666" /></view>
|
||
|
|
</view>
|
||
|
|
<scroll-view scroll-y="true" class="contentBox">
|
||
|
|
|
||
|
|
<view class="goods-item" v-for="goods in cartList" :key="goods.id">
|
||
|
|
<view class="left">
|
||
|
|
<view class="tip" v-if="goods.goods.stock <= 0">已抢光</view>
|
||
|
|
<image class="img" :src="goods.goods.pic_url" mode="aspectFill"></image>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view>
|
||
|
|
<view class="title">
|
||
|
|
<view class="kuajing" v-if="goods.goods.is_cross_border === 1">跨境包税</view>
|
||
|
|
<view class="kuajing" v-else-if="goods.goods.overseas_direct_mail === 1">海外直邮</view>{{goods.goods.title}}
|
||
|
|
</view>
|
||
|
|
<template v-if="goods.goods && goods.goods.sku">
|
||
|
|
<view class="sku">{{goods.goods.sku.v1}}</view>
|
||
|
|
<view class="sku" v-if="goods.goods.sku.v2">-{{goods.goods.sku.v2}}</view>
|
||
|
|
<view class="sku" v-if="goods.goods.sku.v3">-{{goods.goods.sku.v3}}</view>
|
||
|
|
<view class="sku" v-if="goods.goods.sku.v4">-{{goods.goods.sku.v4}}</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<view>
|
||
|
|
<span v-if="goods.goods.limit_type == 1" class="box_number1">{{goods.goods.start_sale_num}}件起购</span>
|
||
|
|
<span v-if="goods.goods.limit_type == 2" class="box_number1">限购{{goods.goods.limit}}件</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view style="display: flex;align-items: center;justify-content: space-between;">
|
||
|
|
<view style="display: flex;align-items: center;flex-wrap: wrap;">
|
||
|
|
|
||
|
|
<!-- 会员下普通价格 -->
|
||
|
|
<view class="text text2" v-if="vipOn && goods.goods.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))">
|
||
|
|
<view class="price">
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text>{{goods.goods.price}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="text">
|
||
|
|
<!-- 显示会员价 -->
|
||
|
|
<view v-if="vipOn && goods.goods.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))" class="vip">
|
||
|
|
<view class="vip-tag"><text>会员价 ￥</text>{{goods.goods.vip_price * 1}}</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 显示普通价格 -->
|
||
|
|
<view v-else class="vip">
|
||
|
|
<view class="price">
|
||
|
|
<text class="icon">￥</text>
|
||
|
|
<text>{{goods.goods.price}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 步进器 -->
|
||
|
|
<view class="stepper">
|
||
|
|
<view class="minus flex" @click="minusCart(goods)"><up-icon name="minus" size="12" :color="Color" /></view>
|
||
|
|
<view class="num">{{goods.num}}</view>
|
||
|
|
<view class="plus flex" @click="plusCart(goods)"><up-icon name="plus" size="12" color="#fff" /></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="loading" class="loadbox">
|
||
|
|
<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
|
||
|
|
</view>
|
||
|
|
</scroll-view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="goods-btn" v-if="!loading">
|
||
|
|
<view class="goods-btn-icon" @click="toPage('/pages/order/list/index')">
|
||
|
|
<up-icon name="order" size="22" />
|
||
|
|
<view>订单</view>
|
||
|
|
</view>
|
||
|
|
<view class="goods-btn-icon" @click="showCart = !showCart">
|
||
|
|
<view class="badge" v-if="number">{{number}}</view>
|
||
|
|
<up-icon name="shopping-cart" size="24" />
|
||
|
|
<view>购物车</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<template v-if="goodsList.length !== 0">
|
||
|
|
<view class="btn" :class="can_buy ? '' : 'disabled'" @click="can_buy ? toPay() : ''" v-if="info.status !== 3 && info.sold_status === 1 && parseInt(info.total_stock) > 0">
|
||
|
|
<text>￥{{cartPrice}}</text>
|
||
|
|
<text>跟团购买</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view v-if="info.status !== 3 && info.sold_status === 1 && parseInt(info.total_stock) <= 0" class="btn" :class="info.is_subscribe_remind_stock ? 'hui' : ''" @click="arrivalNotice()">
|
||
|
|
<text v-if="!info.is_subscribe_remind_stock">到货提醒</text>
|
||
|
|
<text v-else>取消到货提醒</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="btn disabled" v-if="info.status !== 3 && info.sold_status === 2">
|
||
|
|
<text>团购已结束</text>
|
||
|
|
</view>
|
||
|
|
<view class="btn disabled" v-if="info.status === 3">
|
||
|
|
<text>团购未发布</text>
|
||
|
|
</view>
|
||
|
|
<view class="btn" v-if="info.status !== 3 && info.sold_status === 0"
|
||
|
|
@click="!info.is_subscribe_remind ? handleSubscrip() : ''" :class="info.is_subscribe_remind ? 'disabled' : ''">
|
||
|
|
<view class="item">
|
||
|
|
<image
|
||
|
|
src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/07/01/cuOPd5R1X6MBOOPo7Whc3wfErkvFD3raT9sZnbv9.png"
|
||
|
|
mode="widthFix" v-if="!info.is_subscribe_remind"></image>
|
||
|
|
<text v-if="!info.is_subscribe_remind">预约提醒</text>
|
||
|
|
<text v-else>已提醒</text>
|
||
|
|
</view>
|
||
|
|
<view class="countDown">
|
||
|
|
<up-count-down use-slot :time="startTime" @change="onTimeChange" @finish="timeFinish">
|
||
|
|
<text>距开售</text>
|
||
|
|
<text v-if="timeData.days > 0">{{ timeData.days }}天</text>
|
||
|
|
<text>{{ timeData.hours }}时</text>
|
||
|
|
<text>{{ timeData.minutes }}分</text>
|
||
|
|
<text>{{ timeData.seconds }}秒</text>
|
||
|
|
</up-count-down>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<view v-else class="btn disabled">
|
||
|
|
<text>团购已下架</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 单规格 -->
|
||
|
|
<single-sku
|
||
|
|
:id="singleId"
|
||
|
|
:group-id="id"
|
||
|
|
:show="showSingleSku"
|
||
|
|
:show_stock="show_stock"
|
||
|
|
:can-buy="can_buy"
|
||
|
|
:short-status="shortStatus"
|
||
|
|
@close="showSingleSku = false"
|
||
|
|
:sales="sales"
|
||
|
|
@refresh="toRefresh">
|
||
|
|
</single-sku>
|
||
|
|
|
||
|
|
<!-- 多规格 -->
|
||
|
|
<choose-sku
|
||
|
|
:show-sku="showSku"
|
||
|
|
:skus_1="skus_1"
|
||
|
|
:sku-info="skuInfo"
|
||
|
|
@close="closeSku"
|
||
|
|
:type="type"
|
||
|
|
@getnum="getnum"
|
||
|
|
:show_stock="show_stock"
|
||
|
|
:showDetail="true"
|
||
|
|
:groupId="id"
|
||
|
|
source=""
|
||
|
|
:sourceId="0"
|
||
|
|
sourceType="normal"
|
||
|
|
:can-buy="can_buy"
|
||
|
|
:sold-status="orign_status"
|
||
|
|
:fenxiang="false"
|
||
|
|
:remind-stock="info.is_subscribe_remind_stock"
|
||
|
|
:remindTmplId="remindTmplId"
|
||
|
|
@remind="goodsRemind"
|
||
|
|
:sales="sales"
|
||
|
|
:short-status="shortStatus" />
|
||
|
|
|
||
|
|
<!-- 有任选几件活动并且与起购数量一致sku弹窗 -->
|
||
|
|
<multiple-sku
|
||
|
|
:show="showVanSku"
|
||
|
|
@close="closeSku"
|
||
|
|
@getnum="getnum"
|
||
|
|
:show_stock="show_stock"
|
||
|
|
:specs-num="specsNum"
|
||
|
|
:goodId="goodId"
|
||
|
|
:groupId="id"
|
||
|
|
source=""
|
||
|
|
:sourceId="0"
|
||
|
|
sourceType="normal"
|
||
|
|
:sold-status="orign_status"
|
||
|
|
:fenxiang="false"
|
||
|
|
:remind-stock="info.is_subscribe_remind_stock"
|
||
|
|
:remindTmplId="remindTmplId"
|
||
|
|
:sales="sales"
|
||
|
|
@remind="goodsRemind">
|
||
|
|
</multiple-sku>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
||
|
|
import { get, post } from '@/api/request.js'
|
||
|
|
import { showToast, goodsItem, toMiniProgram } from '../common.js'
|
||
|
|
import { Style } from '@/utils/list.js'
|
||
|
|
import singleSku from '@/components/ktt/singleSku.vue'
|
||
|
|
import ChooseSku from '@/components/sku/ChooseSku.vue'
|
||
|
|
import multipleSku from '@/components/sku/multiple.vue'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { singleSku, ChooseSku, multipleSku },
|
||
|
|
props: {
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
id: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
},
|
||
|
|
sales: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props, context) {
|
||
|
|
const data = reactive({
|
||
|
|
id: 0,
|
||
|
|
show: false,
|
||
|
|
goodsList: [],
|
||
|
|
loading: true,
|
||
|
|
can_buy: true,
|
||
|
|
Color: uni.getStorageSync('theme_color'),
|
||
|
|
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
|
||
|
|
is_show_sales: false,
|
||
|
|
info: {},
|
||
|
|
vipOn: uni.getStorageSync('vip_on') === 1,
|
||
|
|
is_vip: uni.getStorageSync('is_vip'),
|
||
|
|
vip_price_show: uni.getStorageSync('vip_price_show') || false,
|
||
|
|
tagColor: Style[uni.getStorageSync('theme_index') * 1].tagColor,
|
||
|
|
cartList: [],
|
||
|
|
number: 0,
|
||
|
|
cartPrice: 0,
|
||
|
|
type: 1,
|
||
|
|
canClick: true,
|
||
|
|
remindTmplId: '',
|
||
|
|
yuyueTempId: '',
|
||
|
|
startTime: '',
|
||
|
|
timeData: {},
|
||
|
|
orign_status: 0,
|
||
|
|
showCart: false,
|
||
|
|
showVanSku: false,
|
||
|
|
goodId: 0,
|
||
|
|
specsNum: 0,
|
||
|
|
show_1: true,
|
||
|
|
showSingleSku: false,
|
||
|
|
singleId: 0,
|
||
|
|
show_stock: 0,
|
||
|
|
shortStatus: 1
|
||
|
|
})
|
||
|
|
|
||
|
|
function getInfo(val) {
|
||
|
|
data.loading = true
|
||
|
|
get(`/api/v1/goods/group/detail/${data.id}`).then((res) => {
|
||
|
|
data.info = JSON.parse(JSON.stringify(res.data))
|
||
|
|
data.goodsList = JSON.parse(JSON.stringify(res.data.group_goods))
|
||
|
|
data.goodsList.forEach((it) => {
|
||
|
|
if(it.goods && it.goods.short_status == 0) {
|
||
|
|
it.goods.stock = 0
|
||
|
|
}
|
||
|
|
})
|
||
|
|
isRepeat()
|
||
|
|
data.can_buy = !res.data.is_new_purchase || (res.data.is_new_purchase && res.user.is_purchase === 0)
|
||
|
|
data.is_show_sales = res.data.is_show_sales === 1
|
||
|
|
data.show_stock = res.data.shop.show_stock
|
||
|
|
data.loading = false
|
||
|
|
|
||
|
|
data.orign_status = res.data.sold_status
|
||
|
|
if(res.data.sold_status == 2) {
|
||
|
|
data.info.sold_status = 1
|
||
|
|
data.info.total_stock = 0
|
||
|
|
data.goodsList.forEach((it) => {
|
||
|
|
it.goods.stock = 0
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// 未到开团时间
|
||
|
|
getStartTime()
|
||
|
|
|
||
|
|
}).catch(() => {
|
||
|
|
data.loading = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取当前团购购物车数据
|
||
|
|
const getCartList = async() => {
|
||
|
|
await get('/api/v1/carts', {
|
||
|
|
shop_group_goods_id: data.id
|
||
|
|
}).then((res) => {
|
||
|
|
data.cartList = res.data
|
||
|
|
data.number = res.num
|
||
|
|
data.cartPrice = res.total_price
|
||
|
|
isRepeat()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function getCartNum() {
|
||
|
|
get('/api/v1/carts/num').then((res) => {
|
||
|
|
let num = Number(res.data.num)
|
||
|
|
uni.setStorageSync('cartNum', num)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const isRepeat = () => {
|
||
|
|
var list = []
|
||
|
|
data.goodsList && data.goodsList.forEach((element, index) => {
|
||
|
|
list.push(element.id)
|
||
|
|
data.cartList.forEach((item) => {
|
||
|
|
if (element.id === item.shop_goods_id) {
|
||
|
|
element.num = item.num
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
data.cartList.forEach((item) => {
|
||
|
|
list.push(item.shop_goods_id)
|
||
|
|
})
|
||
|
|
Array.prototype.duplicate = function() {
|
||
|
|
let tmp = []
|
||
|
|
this.concat().sort().sort(function(a, b) {
|
||
|
|
if (a == b && tmp.indexOf(a) === -1) tmp.push(a)
|
||
|
|
})
|
||
|
|
return tmp
|
||
|
|
}
|
||
|
|
data.goodsList && data.goodsList.forEach((element) => {
|
||
|
|
element.show1 = false
|
||
|
|
element.show2 = false
|
||
|
|
if(list.duplicate().includes(element.id)) {
|
||
|
|
if(element.specs_type === 0) {
|
||
|
|
element.show1 = true
|
||
|
|
} else {
|
||
|
|
element.show2 = true
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
element.show2 = true
|
||
|
|
}
|
||
|
|
if (element.show1 === element.show2) {
|
||
|
|
element.show2 = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeDialog() {
|
||
|
|
if(data.showCart) {
|
||
|
|
data.showCart = false
|
||
|
|
} else {
|
||
|
|
close()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function close() {
|
||
|
|
context.emit('close')
|
||
|
|
}
|
||
|
|
|
||
|
|
function toPage(url) {
|
||
|
|
uni.navigateTo({ url })
|
||
|
|
}
|
||
|
|
|
||
|
|
function getRemindTempId() {
|
||
|
|
get(`/api/v1/shop/template`, { type: 22 }).then((req) => {
|
||
|
|
data.remindTmplId = req.data.template_id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
async function toPay() {
|
||
|
|
if (data.cartList.length > 0) {
|
||
|
|
let cartList = []
|
||
|
|
for (let i = 0; i < data.cartList.length; i++) {
|
||
|
|
let obj = data.cartList[i]
|
||
|
|
if(obj.goods.status !== 1 || obj.goods.sold_status == 2 || (obj.goods.sku && obj.goods.sku.stock <= 0)){
|
||
|
|
|
||
|
|
} else {
|
||
|
|
cartList.push(obj)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
uni.setStorageSync('shopGoods', cartList)
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/pay/index?type=1'
|
||
|
|
})
|
||
|
|
} else if (data.goodsList.length === 1) {
|
||
|
|
if (data.goodsList[0].specs_type == 1) {
|
||
|
|
if(data.goodsList[0].goods.show_sku_style == 1 || data.goodsList[0].goods.show_sku_style == 2) {
|
||
|
|
data.specsNum = data.goodsList[0].goods.show_sku_style == 1 ? 2 : 3
|
||
|
|
data.showVanSku = true
|
||
|
|
data.goodId = data.goodsList[0].id
|
||
|
|
} else {
|
||
|
|
data.type = 2
|
||
|
|
getGoodsSku(data.goodsList[0])
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if(data.goodsList[0].goods.stock <= 0) {
|
||
|
|
return showToast('当前商品已经抢光啦')
|
||
|
|
}
|
||
|
|
let order = [{
|
||
|
|
shop_goods_id: data.goodsList[0].id,
|
||
|
|
shop_goods_sku_id: 0,
|
||
|
|
num: data.goodsList[0].goods.limit_type == 1 ? data.goodsList[0].goods.start_sale_num : 1,
|
||
|
|
shop_group_goods_id: data.id,
|
||
|
|
source_id: 0,
|
||
|
|
source_type: 'normal'
|
||
|
|
}]
|
||
|
|
uni.setStorageSync('shopGoods', order)
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/pay/index?type=0&source='
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
showToast('请选择商品')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 到货提醒
|
||
|
|
async function arrivalNotice() {
|
||
|
|
// 取消提醒
|
||
|
|
if(data.info.is_subscribe_remind_stock) {
|
||
|
|
post(`/api/v1/goods/remind/cancel/${data.id}`, {type: 1}).then((res) => {
|
||
|
|
data.info.is_subscribe_remind_stock = false
|
||
|
|
uni.showToast({
|
||
|
|
title: '已取消到货提醒',
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
toMiniProgram('pages/groups/index?id=' + data.id)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function getYuyueTempId() {
|
||
|
|
get(`/api/v1/shop/template`, { type: 20 }).then((req) => {
|
||
|
|
data.yuyueTempId = req.data.template_id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 订阅活动提醒消息
|
||
|
|
const handleSubscrip = () => {
|
||
|
|
toMiniProgram('pages/groups/index?id=' + data.id)
|
||
|
|
}
|
||
|
|
|
||
|
|
function getStartTime() {
|
||
|
|
if (data.info.sold_status === 0 && data.info.sold_start_time) {
|
||
|
|
let startAt = new Date(
|
||
|
|
data.info.sold_start_time.replace(/-/g, '/')
|
||
|
|
).getTime() // 开始时间
|
||
|
|
let nowAt = new Date().getTime() // 当前时间
|
||
|
|
let timestamp = startAt - nowAt //计算时间差
|
||
|
|
data.startTime = timestamp
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onTimeChange(e) {
|
||
|
|
data.timeData = e
|
||
|
|
}
|
||
|
|
|
||
|
|
function timeFinish() {
|
||
|
|
data.info.sold_status = 1
|
||
|
|
}
|
||
|
|
|
||
|
|
// 购物车-减
|
||
|
|
async function minusCart(goods) {
|
||
|
|
// 如果商品设置了起购
|
||
|
|
if(goods.goods.limit_type == 1) {
|
||
|
|
if(goods.num > parseInt(goods.goods.start_sale_num)) {
|
||
|
|
goods.num -= 1
|
||
|
|
} else if(goods.num == parseInt(goods.goods.start_sale_num)) {
|
||
|
|
minusTips(goods)
|
||
|
|
return
|
||
|
|
} else {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if(goods.num == 1) {
|
||
|
|
minusTips(goods)
|
||
|
|
return
|
||
|
|
} else {
|
||
|
|
goods.num -= 1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
await addGroupCart(goods)
|
||
|
|
getCartNum()
|
||
|
|
getCartList()
|
||
|
|
}
|
||
|
|
|
||
|
|
function minusTips(goods) {
|
||
|
|
uni.showModal({
|
||
|
|
title: '提示',
|
||
|
|
content: '确定删除该商品吗？',
|
||
|
|
confirmColor: '#42b983',
|
||
|
|
async success(res) {
|
||
|
|
if (res.confirm) {
|
||
|
|
goods.num = 0
|
||
|
|
await addGroupCart(goods)
|
||
|
|
getCartNum()
|
||
|
|
getCartList()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 购物车-加
|
||
|
|
async function plusCart(goods) {
|
||
|
|
// 如果商品设置了限购
|
||
|
|
if(goods.goods.limit_type == 2) {
|
||
|
|
if(goods.num < parseInt(goods.goods.limit)) {
|
||
|
|
goods.num += 1
|
||
|
|
} else {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
goods.num += 1
|
||
|
|
}
|
||
|
|
await addGroupCart(goods)
|
||
|
|
getCartNum()
|
||
|
|
getCartList()
|
||
|
|
}
|
||
|
|
|
||
|
|
async function addGroupCart(goods) {
|
||
|
|
let params = {
|
||
|
|
num: goods.num,
|
||
|
|
shop_goods_id: goods.shop_goods_id,
|
||
|
|
shop_goods_sku_id: goods.shop_goods_sku_id,
|
||
|
|
shop_group_goods_id: goods.shop_group_goods_id,
|
||
|
|
source_id: 0,
|
||
|
|
source_type: 'normal'
|
||
|
|
}
|
||
|
|
await post('/api/v1/carts/' + goods.id, params, 'PUT').then((res) => {
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function toRefresh() {
|
||
|
|
data.showSingleSku = false
|
||
|
|
getCartNum()
|
||
|
|
getCartList()
|
||
|
|
}
|
||
|
|
|
||
|
|
const { getGoodsSku, showSku, skuInfo, getNum, num, getGoodsSpecs, skus_1 } = goodsItem()
|
||
|
|
|
||
|
|
const getGoodsSkus = (goods) => {
|
||
|
|
data.shortStatus = goods.goods.short_status
|
||
|
|
if(!data.can_buy && goods.specs_type === 0) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(goods.goods.stock <= 0 && goods.specs_type === 0) {
|
||
|
|
showToast('商品已被抢光了')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(data.can_buy && goods.specs_type === 0) {
|
||
|
|
openSingleSku(goods)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(goods.goods.show_sku_style == 1 || goods.goods.show_sku_style == 2) {
|
||
|
|
data.specsNum = data.goodsList[0].goods.show_sku_style == 1 ? 2 : 3
|
||
|
|
data.showVanSku = true
|
||
|
|
data.goodId = goods.id
|
||
|
|
} else {
|
||
|
|
getGoodsSku(goods).then((res) => {
|
||
|
|
if (goods.specs_type === 0) {
|
||
|
|
if (data.show_1) {
|
||
|
|
data.show_1 = false
|
||
|
|
getCartList()
|
||
|
|
getCartNum()
|
||
|
|
}
|
||
|
|
setTimeout(() => {
|
||
|
|
showToast('已加入购物车')
|
||
|
|
data.show_1 = true
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function openSingleSku(e) {
|
||
|
|
data.singleId = e.id
|
||
|
|
data.shortStatus = e.goods.short_status
|
||
|
|
data.showSingleSku = true
|
||
|
|
}
|
||
|
|
|
||
|
|
//计步器减数量
|
||
|
|
const hanleapp = (e) => {
|
||
|
|
var num = (e.num -= 1)
|
||
|
|
data.cartList.forEach((res) => {
|
||
|
|
if (res.shop_goods_id === e.id) {
|
||
|
|
post(`/api/v1/carts/${res.id}`, {
|
||
|
|
shop_goods_id: res.shop_goods_id,
|
||
|
|
shop_goods_sku_id: res.shop_goods_sku_id,
|
||
|
|
num: num,
|
||
|
|
shop_group_goods_id: res.shop_group_goods_id,
|
||
|
|
source_id: 0,
|
||
|
|
source_type: 'normal'
|
||
|
|
}, 'PUT').then((res) => {
|
||
|
|
getCartList()
|
||
|
|
getCartNum()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
// 计步器加数量
|
||
|
|
const hanleadd = (event, e) => {
|
||
|
|
if(data.info.limit_type === 2 && data.number >= data.info.limit) {
|
||
|
|
showToast('本团商品限购' + data.info.limit + '件')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
let num = (e.num += 1)
|
||
|
|
data.cartList.forEach((res) => {
|
||
|
|
if (res.shop_goods_id === e.id) {
|
||
|
|
post(`/api/v1/carts/${res.id}`, {
|
||
|
|
shop_goods_id: res.shop_goods_id,
|
||
|
|
shop_goods_sku_id: res.shop_goods_sku_id,
|
||
|
|
num: num,
|
||
|
|
shop_group_goods_id: res.shop_group_goods_id,
|
||
|
|
source_id: 0,
|
||
|
|
source_type: 'normal'
|
||
|
|
}, 'PUT').then((res) => {
|
||
|
|
getCartList()
|
||
|
|
getCartNum()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const plusBtn = (number, index, e, sock) => {
|
||
|
|
if (number == 0) {
|
||
|
|
showToast('该商品不能低于起购件数')
|
||
|
|
} else if (number == 1) {
|
||
|
|
if (index == e) {
|
||
|
|
showToast('已达到商品限购件数')
|
||
|
|
} else if (index > e) {
|
||
|
|
showToast('已达到商品限购件数')
|
||
|
|
} else if (index != e) {
|
||
|
|
showToast('该商品不能低于1件')
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (sock <= 1) {
|
||
|
|
showToast('已达到该商品最大件数')
|
||
|
|
} else {
|
||
|
|
showToast('该商品不能低于1件')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeSku() {
|
||
|
|
data.type = 1
|
||
|
|
showSku.value = false
|
||
|
|
data.showVanSku = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const getnum = () => {
|
||
|
|
getStartTime()
|
||
|
|
getCartList()
|
||
|
|
getNum()
|
||
|
|
}
|
||
|
|
|
||
|
|
function goodsRemind(flag) {
|
||
|
|
data.info.is_subscribe_remind_stock = flag
|
||
|
|
}
|
||
|
|
|
||
|
|
function toGroup() {
|
||
|
|
const pages = getCurrentPages()
|
||
|
|
const prevPage = pages[pages.length - 2]
|
||
|
|
if(prevPage && prevPage.route == 'pages/groups/index' && prevPage.options.id == data.id) {
|
||
|
|
uni.navigateBack({
|
||
|
|
delta: 1
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/groups/index?id=' + data.id
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeNum(e, goods) {
|
||
|
|
// 减按钮
|
||
|
|
if(e.value < goods.num && goods.num > 0) {
|
||
|
|
let num = (goods.num -= 1)
|
||
|
|
data.cartList.forEach((res) => {
|
||
|
|
if (res.shop_goods_id === goods.id) {
|
||
|
|
post(`/api/v1/carts/${res.id}`, {
|
||
|
|
shop_goods_id: res.shop_goods_id,
|
||
|
|
shop_goods_sku_id: res.shop_goods_sku_id,
|
||
|
|
num: num,
|
||
|
|
shop_group_goods_id: res.shop_group_goods_id,
|
||
|
|
source_id: 0,
|
||
|
|
source_type: 'normal'
|
||
|
|
}, 'PUT').then((res) => {
|
||
|
|
getCartList()
|
||
|
|
getCartNum()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else if(e.value > goods.num) { // 加按钮
|
||
|
|
if(data.info.limit_type === 2 && data.number >= data.info.limit) {
|
||
|
|
showToast('本团商品限购' + data.info.limit + '件')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
let num = (goods.num += 1)
|
||
|
|
data.cartList.forEach((res) => {
|
||
|
|
if (res.shop_goods_id === goods.id) {
|
||
|
|
post(`/api/v1/carts/${res.id}`, {
|
||
|
|
shop_goods_id: res.shop_goods_id,
|
||
|
|
shop_goods_sku_id: res.shop_goods_sku_id,
|
||
|
|
num: num,
|
||
|
|
shop_group_goods_id: res.shop_group_goods_id,
|
||
|
|
source_id: 0,
|
||
|
|
source_type: 'normal'
|
||
|
|
}, 'PUT').then((res) => {
|
||
|
|
getCartList()
|
||
|
|
getCartNum()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
watch(props, async (newProps) => {
|
||
|
|
if (newProps.show) {
|
||
|
|
data.show = true
|
||
|
|
data.id = newProps.id * 1
|
||
|
|
data.goodsList = []
|
||
|
|
await getCartList()
|
||
|
|
getInfo()
|
||
|
|
// getRemindTempId()
|
||
|
|
// getYuyueTempId()
|
||
|
|
} else {
|
||
|
|
data.show = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
return {
|
||
|
|
...toRefs(data),
|
||
|
|
getCartList,
|
||
|
|
getInfo,
|
||
|
|
close,
|
||
|
|
toPage,
|
||
|
|
toPay,
|
||
|
|
arrivalNotice,
|
||
|
|
getRemindTempId,
|
||
|
|
handleSubscrip,
|
||
|
|
getStartTime,
|
||
|
|
onTimeChange,
|
||
|
|
timeFinish,
|
||
|
|
closeDialog,
|
||
|
|
minusCart,
|
||
|
|
plusCart,
|
||
|
|
getCartNum,
|
||
|
|
getGoodsSkus,
|
||
|
|
getGoodsSku,
|
||
|
|
openSingleSku,
|
||
|
|
toRefresh,
|
||
|
|
hanleapp,
|
||
|
|
hanleadd,
|
||
|
|
showSku,
|
||
|
|
skuInfo,
|
||
|
|
closeSku,
|
||
|
|
getnum,
|
||
|
|
getNum,
|
||
|
|
goodsRemind,
|
||
|
|
num,
|
||
|
|
skus_1,
|
||
|
|
getGoodsSpecs,
|
||
|
|
plusBtn,
|
||
|
|
toGroup,
|
||
|
|
changeNum,
|
||
|
|
toMiniProgram
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.dialogBox{
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 200;
|
||
|
|
overflow: hidden;
|
||
|
|
.dialog{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
.block{
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: #fff;
|
||
|
|
height: 78vh;
|
||
|
|
border-radius: 20rpx 20rpx 0 0;
|
||
|
|
overflow: hidden;
|
||
|
|
.head{
|
||
|
|
color: #333;
|
||
|
|
font-size: 30rpx;
|
||
|
|
height: 100rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
||
|
|
.text{
|
||
|
|
color: #777;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.contentBox{
|
||
|
|
height: calc(100% - 210rpx);
|
||
|
|
overflow-y: auto;
|
||
|
|
.goods-item {
|
||
|
|
display: flex;
|
||
|
|
padding: 24rpx;
|
||
|
|
border-bottom: 1rpx solid #f0f0f0;
|
||
|
|
.left {
|
||
|
|
margin-right: 14rpx;
|
||
|
|
width: 200rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
border-radius: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
.tip {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.4);
|
||
|
|
color: #fff;
|
||
|
|
font-size: 24rpx;
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
height: 36rpx;
|
||
|
|
line-height: 36rpx;
|
||
|
|
}
|
||
|
|
.img {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: #999999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.right {
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 30rpx;
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
.title {
|
||
|
|
color: #2c2c2c;
|
||
|
|
}
|
||
|
|
.sku{
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
margin-top: 6rpx;
|
||
|
|
}
|
||
|
|
.vip {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
color: v-bind('priceColor');
|
||
|
|
.price{
|
||
|
|
font-size: 34rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
.icon {
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.total{
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: v-bind('priceColor');
|
||
|
|
}
|
||
|
|
.text{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
.btn{
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
text {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #fff;
|
||
|
|
background: $Color3;
|
||
|
|
border-radius: 5rpx;
|
||
|
|
height: 62rpx;
|
||
|
|
line-height: 62rpx;
|
||
|
|
width: 165rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.box_number1 {
|
||
|
|
padding: 2rpx 10rpx;
|
||
|
|
border: 1px solid #656565;
|
||
|
|
border-radius: 6rpx;
|
||
|
|
color: #656565;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
.dis {
|
||
|
|
opacity: 0.65;
|
||
|
|
}
|
||
|
|
.text2 {
|
||
|
|
font-size: 36rpx !important;
|
||
|
|
color: v-bind('priceColor');
|
||
|
|
font-weight: 600;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
.icon{
|
||
|
|
font-weight: normal;
|
||
|
|
font-size: 24rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.vip-tag {
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #fbe6c3;
|
||
|
|
background: #353648;
|
||
|
|
border-radius: 20rpx 0 0 0;
|
||
|
|
padding: 8rpx 10rpx;
|
||
|
|
line-height: 1;
|
||
|
|
text{
|
||
|
|
font-size: 22rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.right1 {
|
||
|
|
float: right;
|
||
|
|
background: v-bind('Color');
|
||
|
|
color: #fff;
|
||
|
|
padding: 15rpx 20rpx;
|
||
|
|
border-radius: 8rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.cartBox{
|
||
|
|
position: absolute;
|
||
|
|
top: 78vh;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 100rpx);
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 20rpx 20rpx 0 0;
|
||
|
|
transition: all 0.3s;
|
||
|
|
z-index: 5;
|
||
|
|
&.show{
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
.left{
|
||
|
|
width: 200rpx !important;
|
||
|
|
height: 200rpx !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.empty{
|
||
|
|
width: 100%;
|
||
|
|
padding: 120rpx 0;
|
||
|
|
text-align: center;
|
||
|
|
.img{
|
||
|
|
width: 400rpx;
|
||
|
|
}
|
||
|
|
text{
|
||
|
|
display: block;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #aaa;
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.loadbox{
|
||
|
|
padding: 30rpx 0;
|
||
|
|
text-align: center;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
.goods-btn {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 110rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.16);
|
||
|
|
box-sizing: border-box;
|
||
|
|
z-index: 10;
|
||
|
|
&-icon {
|
||
|
|
font-size: 20rpx;
|
||
|
|
width: 100rpx;
|
||
|
|
position: relative;
|
||
|
|
text-align: center;
|
||
|
|
border-right: 2rpx solid #e9e9e9;
|
||
|
|
.icon{
|
||
|
|
height: 23px;
|
||
|
|
width: 23px;
|
||
|
|
margin: 0 auto 8rpx;
|
||
|
|
}
|
||
|
|
.badge{
|
||
|
|
position: absolute;
|
||
|
|
top: -10rpx;
|
||
|
|
left: 60rpx;
|
||
|
|
background-color: v-bind('tagColor');
|
||
|
|
color: #fff;
|
||
|
|
display: inline-block;
|
||
|
|
line-height: 1;
|
||
|
|
padding: 2px 4px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&-icon:nth-child(2) {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-direction: column;
|
||
|
|
flex: 1;
|
||
|
|
height: 100%;
|
||
|
|
color: #fff;
|
||
|
|
background: v-bind('Color');
|
||
|
|
font-size: 34rpx;
|
||
|
|
line-height: inherit;
|
||
|
|
border-radius: 0;
|
||
|
|
&.hui{
|
||
|
|
opacity: 0.65;
|
||
|
|
color: #eee;
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
image {
|
||
|
|
width: 35rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.disabled{
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
.countDown{
|
||
|
|
text{
|
||
|
|
color: #fff;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.stepper{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.flex{
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
}
|
||
|
|
.num{
|
||
|
|
width: 80rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.minus{
|
||
|
|
border: 1px solid v-bind('Color');
|
||
|
|
}
|
||
|
|
.plus{
|
||
|
|
background-color: v-bind('Color');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.flex{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
</style>
|