721 lines
20 KiB
Vue
721 lines
20 KiB
Vue
<template>
|
|
<!-- 选规格弹窗 -->
|
|
<view>
|
|
<up-popup :show="showSku" mode="bottom" :round="10" @close="close" :safe-area-inset-bottom="true" catchtouchmove="preventD" :lock-scroll="true" :z-index="202">
|
|
<view class="wholeBox">
|
|
<view class="skuTop">
|
|
<image class="img" :src="viewImg" @click="preViewImg(viewImg)" :style="{width: imgWidth + 'rpx', height: imgWidth + 'rpx'}" mode="aspectFill" />
|
|
<view class="topInfo" :class="imgWidth == 200 ? '' : 'smallfont'">
|
|
<view class="title" v-if="imgWidth == 200">{{skuInfo.title}}</view>
|
|
<view class="priceBox">
|
|
<!-- 会员下普通价格 -->
|
|
<view class="text1" v-if="vipOn && chooseItem.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))">
|
|
<text class="icon1">￥</text>
|
|
<text>{{chooseItem.price}}</text>
|
|
</view>
|
|
|
|
<view>
|
|
<!-- 显示会员价 -->
|
|
<view v-if="vipOn && chooseItem.vip_price > 0 && (is_vip || (!is_vip && vip_price_show))" class="vip">
|
|
<view class="vip-tag"><text class="txt">会员价 ￥</text>{{chooseItem.vip_price}}</view>
|
|
</view>
|
|
|
|
<!-- 显示普通价格 -->
|
|
<view v-else class="vip">
|
|
<text class="icon1">￥</text>
|
|
<text>{{chooseItem.price}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="text" v-if="show_stock === 1">剩余{{ chooseItem.stock > 0 ? chooseItem.stock : 0 }}件</view>
|
|
<view class="sel">已选：{{skuName}}</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="goodBox" scroll-y="true" enhanced="true" @scroll="skuScroll" :scroll-top="topNum">
|
|
<view class="skuBox">
|
|
<view class="sku_list" v-for="(items, idx) in specsList" :key="idx">
|
|
<view class="title">第{{idx + 1}}件商品</view>
|
|
<view class="sku_item" v-for="(item, index) in items" :key="index">
|
|
<view class="spec_name">{{item.spec_name}}</view>
|
|
<view class="sku_tag">
|
|
<view class="tag" v-for="(it, i) in item.value" :key="it.id"
|
|
@click="!it.show ? chooseSku(it, index, i, idx, items) :''"
|
|
:class="pickSkuList[idx]['v'+ (index + 1) +'_id'] === it.id ? 'choose' : it.show ? 'dis' : '' ">
|
|
<image :src="it.img" v-if="it.img" class="tag_img"></image>
|
|
<text>{{it.value}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="sku_num">
|
|
<view class="num">
|
|
<text>购买数量</text>
|
|
<text v-if="show_stock === 1">（最多{{ chooseItem.stock > 0 ? chooseItem.stock : 0 }}件）</text>
|
|
<view v-if="skuInfo.limit_type == 2" class="box_red">限购{{skuInfo.limit}}件</view>
|
|
<view v-if="skuInfo.limit_type == 1" class="box_red">{{skuInfo.start_sale_num}}件起购</view>
|
|
</view>
|
|
<up-number-box
|
|
v-model="chooseItem.num"
|
|
:min="skuInfo.limit_type == 1 ? parseInt(skuInfo.start_sale_num) : skuInfo.limit_type === 0 ? 1 : 1 "
|
|
:max="skuInfo.limit_type == 2 ? parseInt(skuInfo.limit) : skuInfo.limit_type === 0 ? (chooseItem.stock > 0 ? chooseItem.stock : 0) : 0"
|
|
@overlimit="plusBtn(skuInfo.limit_type == 1 ? 0 : skuInfo.limit_type == 2 ? 1 : 2 ,chooseItem.num, skuInfo.limit)"
|
|
disabledInput
|
|
bgColor="#f2f3f5"
|
|
:longPress="false"
|
|
@change="changeNum">
|
|
</up-number-box>
|
|
</view>
|
|
<view class="sku_buy" v-if="sales > 0">
|
|
<view class="img" v-for="img in skuInfo.avatars" :key="img">
|
|
<image :src="img" class="sku-buy-img"></image>
|
|
</view>
|
|
<view class="text">已有<text class="num">{{sales}}</text>个社群好友购买</view>
|
|
</view>
|
|
</view>
|
|
<view class="edition" v-if="textModule.length != 0">
|
|
<view v-for="(item, index) in textModule" :key="index">
|
|
<!-- 大图 -->
|
|
<view v-if="item.type == 1" class="edition_box" @click="preViewImg(item.imgs[0])">
|
|
<view v-for="(imgs, i) in item.imgs" :key="i">
|
|
<image :src="imgs + '?x-oss-process=image/format,webp'" :webp="true" mode="widthFix" :lazy-load="true" style="width:100%"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 小图 -->
|
|
<view class="edition_box" v-if="item.type == 2">
|
|
<view class="small_img">
|
|
<view v-for="(list, index1) in item.img" :key="index1" class="imgs" @click="getTextimg(item.img, list)">
|
|
<image :src="list + '?x-oss-process=image/format,webp'" mode="aspectFill" :webp="true" class="image"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 视频 -->
|
|
<view class="edition_box" v-if="item.type == 3">
|
|
<video :src="item.video[0]" height="100%" width="250" class="video_box" style="display: block;margin: 0 auto;"></video>
|
|
</view>
|
|
|
|
<!-- 文字 -->
|
|
<view class="edition_box text1_box" v-if="item.type == 4">
|
|
<text selectable="true" :user-select="true" class="text">{{item.text}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else-if="images.length != 0" class="imgbox">
|
|
<image v-for="img in images" :key="img" :lazy-load="true" :src="img" class="img" mode="widthFix"></image>
|
|
</view>
|
|
<view v-if="images.length === 0 && mainImg.length !== 0" class="imgbox">
|
|
<image v-for="img in mainImg" :key="img" :lazy-load="true" :src="img" class="img" mode="widthFix"></image>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
|
|
<view class="sku_btn" v-if="soldStatus == 2" @click="arrivalNotice()">
|
|
<view class="btn" v-if="!remindStock">到货提醒</view>
|
|
<view class="btn dis" v-else>取消到货提醒</view>
|
|
</view>
|
|
<view class="sku_btn" v-else @click="(chooseItem.stock > 0 && canBuy) ? addToCart() : ''">
|
|
<view class="btn" :class="(chooseItem.stock <= 0 || !canBuy) ? 'dis' : ''">加入购物车</view>
|
|
</view>
|
|
|
|
</view>
|
|
</up-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, reactive, toRefs, watch } from 'vue'
|
|
import { showToast, goodsItem, toMiniProgram } from '../common.js'
|
|
import { get, post } from '@/api/request.js'
|
|
import { Style } from '@/utils/list.js'
|
|
|
|
export default {
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
show_stock: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
sourceId: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
sourceType: {
|
|
type: String,
|
|
default: 'normal'
|
|
},
|
|
canBuy: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
goodId: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
groupId: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
specsNum: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
remindStock: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
soldStatus: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
sales: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
remindTmplId: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
setup(props, context) {
|
|
const data = reactive({
|
|
showSku: false,
|
|
Color: uni.getStorageSync('theme_color'),
|
|
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
|
|
cartColor: Style[uni.getStorageSync('theme_index') * 1].cartColor,
|
|
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
|
vipOn: uni.getStorageSync('vip_on') === 1,
|
|
vip_price_show: uni.getStorageSync('vip_price_show'),
|
|
sourceId: 0,
|
|
sourceType: '',
|
|
viewImg: '',
|
|
imgWidth: 200,
|
|
skuInfo: {},
|
|
skuName: '',
|
|
is_vip: uni.getStorageSync('is_vip'),
|
|
specsList: [],
|
|
textModule: [],
|
|
mainImg: [],
|
|
images: [],
|
|
chooseItem: {},
|
|
goodId: 0,
|
|
choose: [],
|
|
sku_skuInfo: {},
|
|
chooseIndex: [],
|
|
pickSkuList: [],
|
|
curIndex: 0,
|
|
action: false,
|
|
topNum: 0,
|
|
specsNum: 0,
|
|
isSale: uni.getStorageSync('role') == 1,
|
|
canClick: true,
|
|
remindStock: false
|
|
})
|
|
|
|
const preventD = () => {
|
|
return
|
|
}
|
|
|
|
// 预览图片
|
|
const preViewImg = (img) => {
|
|
let img_preview_suffix = uni.getStorageSync('img_preview_suffix') || ''
|
|
let imurl = img + img_preview_suffix
|
|
if(img.indexOf('.gif') >= 0 || img.indexOf('.GIF') >= 0) {
|
|
imurl = img
|
|
}
|
|
uni.previewImage({
|
|
urls: [imurl],
|
|
current: 0
|
|
})
|
|
}
|
|
|
|
const hanleShare = () => {
|
|
context.emit('buttomShow', true)
|
|
}
|
|
|
|
function skuScroll(e) {
|
|
if(e.detail.scrollTop > 200){
|
|
data.imgWidth = 120
|
|
} else {
|
|
data.imgWidth = 200
|
|
}
|
|
}
|
|
|
|
function chooseSku(e, index, i_index, idx, items) {
|
|
data.action = true
|
|
if (e.img || e.img_800) {
|
|
data.viewImg = e.img_800 || e.img
|
|
}
|
|
data.curIndex = idx
|
|
data.choose[idx]['v' + (index + 1) + '_id'] = items[index].value[i_index].id
|
|
|
|
data.pickSkuList[idx]['v' + (index + 1) + '_id'] = items[index].value[i_index].id
|
|
data.pickSkuList[idx]['v' + (index + 1)] = items[index].value[i_index].value
|
|
data.chooseIndex[idx].push(index)
|
|
data.chooseIndex[idx] = Array.from(new Set(data.chooseIndex[idx]))
|
|
}
|
|
|
|
watch(props, (newProps) => {
|
|
if(newProps.show) {
|
|
data.showSku = true
|
|
data.chooseItem = {}
|
|
data.chooseItem.num = 1
|
|
data.goodId = newProps.goodId
|
|
data.sourceId = newProps.sourceId
|
|
data.sourceType = newProps.sourceType
|
|
data.specsNum = newProps.specsNum
|
|
data.remindStock = newProps.remindStock
|
|
data.images = []
|
|
data.specsList = []
|
|
data.pickSkuList = []
|
|
data.choose = []
|
|
data.chooseIndex = []
|
|
|
|
get(`/api/v1/goods/spec/${data.goodId}`).then((res) => {
|
|
data.topNum = data.topNum == 0 ? 0.1 : 0
|
|
data.skuInfo = res.data
|
|
data.viewImg = res.data.face_img
|
|
data.mainImg = res.data.gallery || []
|
|
data.limit = res.data.limit
|
|
|
|
if(res.data.specs) {
|
|
res.data.specs[0].value.forEach((it) => {
|
|
if(it.img_800){
|
|
data.images.push(it.img_800)
|
|
}
|
|
})
|
|
let tempSpecs = JSON.parse(JSON.stringify(res.data.specs))
|
|
if (res.data.specs.length === 1) {
|
|
let sku = []
|
|
res.data.skus.forEach((ress) => {
|
|
if (ress.stock <= 0 || ress.price == 0) {
|
|
sku.push(ress.v1_id)
|
|
}
|
|
})
|
|
tempSpecs.forEach((res, i) => {
|
|
res.value.forEach((req) => {
|
|
if (sku.includes(req.id)) {
|
|
req.show = true
|
|
} else {
|
|
req.show = false
|
|
}
|
|
})
|
|
})
|
|
}
|
|
for (let index = 0; index < data.specsNum; index++) {
|
|
data.pickSkuList[index] = {}
|
|
for (let i = 0; i < tempSpecs.length; i++) {
|
|
data.pickSkuList[index]['v' + (i + 1) + '_id'] = 0
|
|
}
|
|
data.specsList.push(JSON.parse(JSON.stringify(tempSpecs)))
|
|
data.choose.push({})
|
|
data.chooseIndex.push([])
|
|
}
|
|
}
|
|
data.textModule = res.data.text_modules || []
|
|
if(props.soldStatus == 2) {
|
|
res.data.stock = 0
|
|
res.data.skus.forEach((ress) => {
|
|
ress.stock = 0
|
|
})
|
|
}
|
|
data.sku_skuInfo = res.data.skus
|
|
|
|
data.chooseItem = JSON.parse(JSON.stringify(res.data.skus[0]))
|
|
data.chooseItem.stock = res.data.stock
|
|
|
|
setTimeout(() => {
|
|
data.imgWidth = 200
|
|
}, 100)
|
|
|
|
})
|
|
}
|
|
})
|
|
|
|
watch(
|
|
() => data.choose,
|
|
(newChoose) => {
|
|
if(!data.action) {
|
|
return
|
|
}
|
|
if (data.specsList[data.curIndex].length - Object.keys(data.choose[data.curIndex]).length == 1) {
|
|
// 如果只有一个规格类未选中，则去判断未选中的这一项是否可选
|
|
data.specsList[data.curIndex].forEach((req, i) => {
|
|
if (data.chooseIndex[data.curIndex].indexOf(i) == -1) {
|
|
req.value.forEach((rej, j) => {
|
|
data.sku_skuInfo.forEach((ress, m) => {
|
|
let flag = [rej.id === ress['v' + (i + 1) + '_id']]
|
|
for (const key in data.choose[data.curIndex]) {
|
|
flag.push(ress[key] == data.choose[data.curIndex][key])
|
|
}
|
|
if (flag.findIndex(target => target === false) == -1) {
|
|
if (ress.stock <= 0 || ress.price == 0) {
|
|
rej.show = true
|
|
} else {
|
|
rej.show = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
} else if (data.specsList[data.curIndex].length == Object.keys(data.choose[data.curIndex]).length) {
|
|
for (const key in data.choose[data.curIndex]) {
|
|
let i = parseInt(key.substr(1, 1))
|
|
data.specsList[data.curIndex][i - 1].value.forEach((req) => {
|
|
data.sku_skuInfo.forEach((ress, m) => {
|
|
let flag = [req.id == ress['v' + i + '_id']]
|
|
for (const k in data.choose[data.curIndex]) {
|
|
let j = parseInt(k.substr(1, 1))
|
|
if (i != j) {
|
|
flag.push(ress[k] == data.choose[data.curIndex][k])
|
|
}
|
|
}
|
|
if (flag.findIndex(target => target === false) == -1) {
|
|
if ((ress.stock <= 0 || ress.price == 0)) {
|
|
req.show = true
|
|
} else {
|
|
req.show = false
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
// 判断选择规格值是否完整
|
|
for (let i = data.specsList[data.curIndex].length; i >= 1; i--) {
|
|
if (!newChoose[data.curIndex]['v' + i + '_id']) {
|
|
return
|
|
}
|
|
}
|
|
// 对比选中项
|
|
data.sku_skuInfo.forEach((sku, s_index) => {
|
|
let num = data.chooseItem.num
|
|
if (
|
|
sku.v1_id === newChoose[data.curIndex].v1_id &&
|
|
sku.v2_id === newChoose[data.curIndex].v2_id &&
|
|
sku.v3_id === newChoose[data.curIndex].v3_id &&
|
|
sku.v4_id === newChoose[data.curIndex].v4_id
|
|
) {
|
|
data.chooseItem = {
|
|
...sku
|
|
}
|
|
if (num > 0) {
|
|
data.chooseItem.num = num < sku.stock ? num : (sku.stock > 0 ? sku.stock : 0)
|
|
} else if (sku.stock > 0) {
|
|
data.chooseItem.num = data.skuInfo.limit_type == 0 ? 1 : data.skuInfo.limit_type == 1 ? parseInt(data.skuInfo.start_sale_num) : 1
|
|
} else {
|
|
data.chooseItem.num = 0
|
|
}
|
|
}
|
|
})
|
|
|
|
}, {
|
|
deep: true
|
|
}
|
|
)
|
|
|
|
watch(() => data.pickSkuList, (newPickList) => {
|
|
data.skuName = ''
|
|
newPickList.forEach((item) => {
|
|
let name = []
|
|
for (let i = 0; i < data.specsNum; i++) {
|
|
if(item['v' + (i + 1)]) {
|
|
name.push(item['v' + (i + 1)])
|
|
}
|
|
}
|
|
if(name.length) {
|
|
data.skuName += '【' + name.join('-') + '】'
|
|
}
|
|
})
|
|
}, {
|
|
deep: true
|
|
})
|
|
|
|
function addToCart() {
|
|
let params = [], flag = true
|
|
for (let i = 0; i < data.pickSkuList.length; i++) {
|
|
let pick = data.pickSkuList[i]
|
|
for (let m = 0; m < data.sku_skuInfo.length; m++) {
|
|
let sku = data.sku_skuInfo[m]
|
|
if(pick.v1_id == sku.v1_id && pick.v2_id == sku.v2_id && pick.v3_id == sku.v3_id && pick.v4_id == sku.v4_id) {
|
|
params.push({
|
|
shop_goods_id: sku.shop_goods_id,
|
|
shop_goods_sku_id: sku.id,
|
|
shop_group_goods_id: props.groupId,
|
|
num: data.chooseItem.num,
|
|
source_id: data.sourceId,
|
|
source_type: data.sourceType
|
|
})
|
|
}
|
|
}
|
|
}
|
|
console.log(params)
|
|
if(params.length != data.specsNum) {
|
|
showToast('请选择完整规格')
|
|
return
|
|
}
|
|
post('/api/v1/carts/batch', { goods: params}).then((res) => {
|
|
showToast('已加入购物车')
|
|
getNum()
|
|
context.emit('getnum')
|
|
close()
|
|
})
|
|
}
|
|
|
|
function close(e) {
|
|
data.action = false
|
|
data.showSku = false
|
|
context.emit('close')
|
|
}
|
|
|
|
// 商品数量
|
|
function changeNum(e) {
|
|
data.chooseItem.num = e
|
|
}
|
|
|
|
async function arrivalNotice() {
|
|
// 取消提醒
|
|
if(data.remindStock) {
|
|
post(`/api/v1/goods/remind/cancel/${data.groupId}`, {type: 1}).then((res) => {
|
|
data.remindStock = false
|
|
uni.showToast({
|
|
title: '已取消到货提醒',
|
|
icon: 'none'
|
|
})
|
|
context.emit('remind', false)
|
|
})
|
|
} else {
|
|
toMiniProgram('pages/groups/index?id=' + data.groupId)
|
|
}
|
|
}
|
|
|
|
const { getNum } = goodsItem()
|
|
|
|
return {
|
|
toMiniProgram,
|
|
...toRefs(data),
|
|
preventD,
|
|
preViewImg,
|
|
hanleShare,
|
|
skuScroll,
|
|
chooseSku,
|
|
close,
|
|
addToCart,
|
|
getNum,
|
|
changeNum,
|
|
arrivalNotice
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.wholeBox{
|
|
background-color: #fff;
|
|
height: 70vh;
|
|
position: relative;
|
|
overflow: hidden;
|
|
.skuTop{
|
|
display: flex;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
.img{
|
|
background: #bbbbbb;
|
|
border-radius: 8rpx;
|
|
margin-right: 30rpx;
|
|
transition: all 0.3s;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
.topInfo{
|
|
display: flex;
|
|
width: calc(100% - 250rpx);
|
|
flex-direction: column;
|
|
&.smallfont{
|
|
.title{
|
|
display: none;
|
|
}
|
|
.price{
|
|
font-size: 28rpx;
|
|
}
|
|
.text{
|
|
display: none;
|
|
}
|
|
.sel{
|
|
font-size: 24rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
.title{
|
|
width: calc(100% - 50rpx);
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.priceBox{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.text1{
|
|
font-size: 32rpx;
|
|
color: v-bind('priceColor');
|
|
margin-right: 10rpx;
|
|
font-weight: 600;
|
|
}
|
|
.icon1{
|
|
font-size: 24rpx;
|
|
font-weight: normal;
|
|
}
|
|
.vip{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 34rpx;
|
|
color: v-bind('priceColor');
|
|
}
|
|
}
|
|
.text{
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
margin-top: 20rpx;
|
|
display: block;
|
|
}
|
|
.sel{
|
|
margin-top: 20rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
.goodBox{
|
|
height: calc(70vh - 280rpx);
|
|
.skuBox{
|
|
margin-bottom: 30rpx;
|
|
.sku_list{
|
|
padding: 10rpx 30rpx 30rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
position: relative;
|
|
.title{
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
margin-top: 10rpx;
|
|
}
|
|
.sku_item{
|
|
.spec_name{
|
|
font-size: 26rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.sku_tag{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 24rpx;
|
|
.tag{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #000;
|
|
background-color: #f4f4f4;
|
|
margin-right: 22rpx;
|
|
margin-top: 20rpx;
|
|
padding: 10rpx 18rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 6rpx;
|
|
.tag_img{
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
.dis{
|
|
opacity: 0.35;
|
|
}
|
|
.choose {
|
|
background-color: v-bind('bgColor');
|
|
color: v-bind('Color');
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sku_num{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 30rpx;
|
|
.num{
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
.box_red{
|
|
padding: 5rpx 10rpx;
|
|
box-sizing: border-box;
|
|
font-size: 25rpx;
|
|
display: inline-block;
|
|
color: #656565;
|
|
}
|
|
}
|
|
}
|
|
.sku_buy{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-top: 1rpx solid #eee;
|
|
border-bottom: 1rpx solid #eee;
|
|
.img{
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
margin-left: -10rpx;
|
|
border: 4rpx solid #fff;
|
|
box-sizing: border-box;
|
|
.sku-buy-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.text{
|
|
margin-left: 20rpx;
|
|
font-size: 28rpx;
|
|
.num {
|
|
color: v-bind('Color');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.sku_btn{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 2;
|
|
background-color: #fff;
|
|
display: flex;
|
|
.btn{
|
|
height: 104rpx;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 104rpx;
|
|
background: v-bind('Color');
|
|
width: 100%;
|
|
}
|
|
.dis{
|
|
opacity: 0.7;
|
|
color: #eee;
|
|
}
|
|
}
|
|
}
|
|
.vip-tag {
|
|
font-size: 32rpx;
|
|
color: #fbe6c3;
|
|
background: #353648;
|
|
border-radius: 20rpx 0 0 0;
|
|
padding: 8rpx 10rpx;
|
|
line-height: 1;
|
|
.txt{
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
</style>
|