You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
876 lines
24 KiB
876 lines
24 KiB
<!--
|
|
* @FileDescription: sku选择器（花呗、拼团下单）
|
|
* @Author: kahu
|
|
* @Date: 2022/11/7
|
|
* @LastEditors: kahu
|
|
* @LastEditTime: 2022/11/7
|
|
-->
|
|
<template>
|
|
<div class="content">
|
|
<u-popup
|
|
v-model="goodsDetailShowFlag"
|
|
mode="bottom"
|
|
border-radius="60"
|
|
>
|
|
<view class="goosDetailshow-box">
|
|
<view class="detailImg-box flex-row-plus">
|
|
<image
|
|
class="detailImg"
|
|
:src="selectedSku.image"
|
|
></image>
|
|
<view class="flex-column-plus mar-left-40">
|
|
<view class="font-color-F54639">
|
|
<label class="fs30 fs-bold">¥</label>
|
|
<label
|
|
class="fs30 fs-bold mar-left-5"
|
|
v-text="selectedSku.activityType === 1 && btnType === 4 ? selectedSku['salePrice'] : selectedSku.price"
|
|
></label>
|
|
</view>
|
|
<label class="fs24 font-color-595B6B mar-top-10">{{$t('common.stocknum', {number:selectedSku.stockNumber})}}</label>
|
|
<label class="fs24 font-color-595B6B mar-top-10">已选</label>
|
|
</view>
|
|
</view>
|
|
<view class="color-box flex-column-plus">
|
|
<view
|
|
v-for="(skuRowItem,skuRowIndex) in productData['names']"
|
|
:key="skuRowIndex"
|
|
>
|
|
<label
|
|
class="fs26 font-color-333"
|
|
v-if="skuRowItem['nameCode']"
|
|
>{{ skuRowItem.skuName }}</label>
|
|
<view class="colorName-box">
|
|
<view
|
|
class="pad-bot-30"
|
|
v-for="(skuColItem, skuColIndex) in skuRowItem.values"
|
|
:key="skuColIndex"
|
|
>
|
|
<view
|
|
class="colorName"
|
|
:class="{'colorName-on' : selectedAttr[skuRowItem['nameCode']] === skuColItem.valueCode}"
|
|
@click="handleClickSkuItem(skuRowItem['nameCode'], skuColItem.valueCode)"
|
|
>
|
|
{{ skuColItem.skuValue }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view class="scroll-view_H" scroll-x="true">
|
|
<view class="sku-box">
|
|
<view class="sku-image-item">
|
|
<image class="sku-image" :src="imageUrl"/>
|
|
<label class="sku-name">浅绿色</label>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sku-box">
|
|
<view class="sku-image-item">
|
|
<image class="sku-image-select" :src="imageUrl"/>
|
|
<label class="sku-name">深灰色</label>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sku-box">
|
|
<view class="sku-image-item">
|
|
<image class="sku-image" :src="imageUrl"/>
|
|
<label class="sku-name">黄色</label>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sku-box">
|
|
<view class="sku-image-item">
|
|
<image class="sku-image" :src="imageUrl"/>
|
|
<label class="sku-name">蓝色</label>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sku-box">
|
|
<view class="sku-image-item">
|
|
<image class="sku-image" :src="imageUrl"/>
|
|
<label class="sku-name">军绿色</label>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sku-box">
|
|
<view class="sku-image-item">
|
|
<image class="sku-image" :src="imageUrl"/>
|
|
<label class="sku-name">黑色</label>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sku-box">
|
|
<view class="sku-image-item">
|
|
<image class="sku-image" :src="imageUrl"/>
|
|
<label class="sku-name">黑色1</label>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="sku-box">
|
|
<view class="sku-image-item">
|
|
<image class="sku-image" :src="imageUrl"/>
|
|
<label class="sku-name">黑色2</label>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="goodsNumCent">
|
|
<view
|
|
class="goodsNum-box flex-row-plus flex-sp-between"
|
|
:class="{'bottom-line' :aliAgingObj.supportHanaUta}"
|
|
>
|
|
<label class="font-color-252744 fs28 fs-bold">数量</label>
|
|
<view class="goodsNum">
|
|
<image v-if="buyNum === 1" class="image-count-operate" @click="handleNumSub"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_nosub.png"/>
|
|
<image v-else @click="handleNumSub" class="image-count-operate" src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_sub.png"/>
|
|
<view
|
|
class="text-count-operate"
|
|
v-model="buyNum"
|
|
>{{ buyNum }}
|
|
</view>
|
|
<image class="image-count-operate" @click="handleNumAdd"
|
|
src="http://36.138.125.206:8081/ceres-local-file/image/icon_cart_add.png"/>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 花呗分期 -->
|
|
<view
|
|
class="huabei-box flex-column-plus"
|
|
v-if="aliAgingObj.supportHanaUta"
|
|
>
|
|
<label class="font-color-999 fs24">花呗分期</label>
|
|
<scroll-view
|
|
class="fenqi-box"
|
|
scroll-x="true"
|
|
>
|
|
<view
|
|
class="huabei-item"
|
|
:class="[{'fenqi-on' :aliAgingObj.selectIndex === 0},{'disabled' :aliAgingObj.disableSelectList[0]}]"
|
|
@click="handleSelectAliAging(0)"
|
|
>
|
|
<label class="huabei-period">分3期(含手续费)</label>
|
|
<label class="huabei-money">￥{{ aliAgingObj.agingMoneyList[0] }}/期</label>
|
|
</view>
|
|
<view
|
|
class="huabei-item"
|
|
:class="[{'fenqi-on' :aliAgingObj.selectIndex === 1},{'disabled' :aliAgingObj.disableSelectList[1]}]"
|
|
@click="handleSelectAliAging(1)"
|
|
>
|
|
<label class="huabei-period">分6期(含手续费)</label>
|
|
<label class="huabei-money">￥{{ aliAgingObj.agingMoneyList[1] }}/期</label>
|
|
</view>
|
|
<view
|
|
class="huabei-item"
|
|
:class="[{'fenqi-on' :aliAgingObj.selectIndex === 2},{'disabled' :aliAgingObj.disableSelectList[2]}]"
|
|
@click="handleSelectAliAging(2)"
|
|
>
|
|
<label class="huabei-period">分12期(含手续费)</label>
|
|
<label class="huabei-money">￥{{ aliAgingObj.agingMoneyList[2] }}/期</label>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<view
|
|
v-if="btnType===6"
|
|
class="skuSelectBtn"
|
|
>
|
|
<view
|
|
class="flex-row-plus offShelf"
|
|
v-if="productData.shelveState === 0"
|
|
>
|
|
商品已下架
|
|
</view>
|
|
<view
|
|
class="flex-row-plus flex-items flex-sp-around"
|
|
v-else-if="selectedSku.activityType === 1"
|
|
>
|
|
<view
|
|
class="selectJoinShop selectBtn font-color-333"
|
|
@click="handleBuyNow"
|
|
>单独购买
|
|
</view>
|
|
<view
|
|
class="selectBuyNow selectBtn font-color-FFEBC4"
|
|
@click="handleBuyWithGroup(1)"
|
|
>我要开团
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="flex-row-plus flex-items flex-sp-around"
|
|
v-else
|
|
>
|
|
<view
|
|
class="selectJoinShop selectBtn font-color-333"
|
|
@click="handleAddCart"
|
|
>{{$t('common.addtocart')}}
|
|
</view>
|
|
<view
|
|
class="selectBuyNow selectBtn font-color-FFEBC4"
|
|
@click="handleBuyNow"
|
|
>{{$t('common.buynow')}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<view
|
|
v-if="selectedSku.activityType === 1 && collageId !== 0"
|
|
class="goosDetailbut-box flex-items-plus"
|
|
:style="{'padding-bottom':(isIphone === true? 60:20)+'rpx'}"
|
|
>
|
|
<view
|
|
class="joinbuyBut"
|
|
@click="handleBuyWithGroup(2)"
|
|
>{{$t('common.sure')}}
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-else-if="selectedSku.activityType === 1 && btnType === 3"
|
|
class="goosDetailbut-box flex-row-plus"
|
|
:style="{'padding-bottom':(isIphone === true? 60:20)+'rpx'}"
|
|
>
|
|
<view
|
|
class="buyNowBut"
|
|
@click="handleBuyWithGroup(1)"
|
|
>去拼团
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-else
|
|
class="goosDetailbut-box flex-row-plus"
|
|
:style="{'padding-bottom':(isIphone === true? 60:20)+'rpx'}"
|
|
>
|
|
<view
|
|
v-if="btnType === 1"
|
|
class="buyNowBut"
|
|
@click="handleAddCart"
|
|
>{{$t('common.sure')}}
|
|
</view>
|
|
<view
|
|
v-else
|
|
class="buyNowBut"
|
|
@click="handleBuyNow(2)"
|
|
>{{$t('common.sure')}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NET from "../../../utils/request";
|
|
import API from "../../../config/api";
|
|
|
|
export default {
|
|
name: "GoodSkuSelect",
|
|
data() {
|
|
return {
|
|
// 是否展示SKU弹窗
|
|
goodsDetailShowFlag: false,
|
|
// 已经选中的valueCode key => value names.nameCode=>values.valueCode 处理选中渲染
|
|
selectedAttr: {},
|
|
// 当前选中的skuMap对象（服务端数据）
|
|
selectedSku: {},
|
|
// 1加入购物车 2立即购买 3开团 4单独购买 6SKU选择
|
|
btnType: 0,
|
|
buyNum: 1,
|
|
// 花呗对象
|
|
aliAgingObj: {
|
|
supportHanaUta: false,
|
|
selectIndex: -1,
|
|
disableSelectList: [true, true, true],
|
|
agingMoneyList: ["0.00", "0.00", "0.00"]
|
|
},
|
|
imageUrl: 'http://36.138.125.206:8081/ceres-local-file/file/2023/05/4237d7abe33d45a485a4b81c865e55bb_9344949001256.png'
|
|
}
|
|
},
|
|
props: {
|
|
productData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
isIphone: {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
collageId: {
|
|
type: Number,
|
|
default: () => 0
|
|
}
|
|
},
|
|
methods: {
|
|
/**
|
|
* 当前SKU数量减少
|
|
*/
|
|
handleNumSub() {
|
|
if (this.buyNum > 1) {
|
|
this.buyNum = this.buyNum - 1
|
|
} else {
|
|
uni.showToast({
|
|
title: '亲！至少一件哦！',
|
|
icon: "none"
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 当前SKU数量加
|
|
*/
|
|
handleNumAdd() {
|
|
if (this.buyNum < this.selectedSku.stockNumber) {
|
|
this.buyNum = this.buyNum + 1
|
|
} else {
|
|
uni.showToast({
|
|
title: this.$t('common.understock'),
|
|
icon: "none"
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 根据skuId选择SKU
|
|
* @param skuId SkuId
|
|
*/
|
|
handleSelectBySkuId(skuId) {
|
|
if (!skuId) return
|
|
// 当前商品后端返回的所有sku的排列组合
|
|
const allSkuValueGroupMap = this.productData.map
|
|
for (const allSkuValueGroupMapKey in allSkuValueGroupMap) {
|
|
if (parseInt(allSkuValueGroupMap[allSkuValueGroupMapKey].skuId) !== parseInt(skuId)) continue;
|
|
this.selectedSku = allSkuValueGroupMap[allSkuValueGroupMapKey]
|
|
this.echoFatherRowText(this.productData, this.selectedSku, this.buyNum)
|
|
// 控制组件选中渲染
|
|
const selectValueCodes = this.selectedSku['valueCodes'].split(',')
|
|
for (const skuRow of this.productData.names) {
|
|
for (const skuCol of skuRow.values) {
|
|
if (!selectValueCodes.includes(skuCol['valueCode'])) continue;
|
|
this.$set(this.selectedAttr, skuRow['nameCode'], skuCol['valueCode'])
|
|
break; // 一行的sku只会有一个value
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 点击sku的一项
|
|
* @param nameCode SKU行的nameCode
|
|
* @param valueCode SKU列的valueCode
|
|
* nameCodeValueCodeClick
|
|
*/
|
|
handleClickSkuItem(nameCode, valueCode) {
|
|
// 当前选中
|
|
this.$set(this.selectedAttr, nameCode, valueCode)
|
|
// 获取到所有的sku的values.valueCode
|
|
let values = []
|
|
for (const key in this.selectedAttr) {
|
|
values.push(this.selectedAttr[key])
|
|
}
|
|
// 当前选中的sku的key组合
|
|
// 后端返回的productData.map中，排列组合了所有values[].valueCode的情况，使用逗号分隔
|
|
const nowSelectSkuValueGroupKey = values.join(',') // 相较于allSkuValueGroupMap的key
|
|
// 后端返回的所有sku组合（values.valueCode）
|
|
const allSkuValueGroupMap = this.productData.map
|
|
// 遍历后端数据
|
|
for (const allSkuValueGroupMapKey in allSkuValueGroupMap) {
|
|
// 当和当前选中的sku一致
|
|
if (nowSelectSkuValueGroupKey === allSkuValueGroupMapKey) {
|
|
this.selectedSku = allSkuValueGroupMap[allSkuValueGroupMapKey]
|
|
this.echoFatherRowText(this.productData, this.selectedSku, this.buyNum)
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
/**
|
|
* 回显父组件（通讯）
|
|
* @param productData 当前商品对象
|
|
* @param skuItem 当前选中的sku的后端数据
|
|
* @param buyNum 当前sku购买数量
|
|
*/
|
|
echoFatherRowText(productData, skuItem, buyNum) {
|
|
// 获取到当前选中的sku的valueCode
|
|
const currentSku = []
|
|
// 取出所有的valueCode
|
|
const nowSelectValueCodeList = skuItem['valueCodes'].split(',')
|
|
const skuRows = productData.names
|
|
for (const skuRow of skuRows) {
|
|
const skuValues = skuRow.values
|
|
for (const skuValue of skuValues) {
|
|
if (!nowSelectValueCodeList.includes(skuValue.valueCode)) continue;
|
|
const currentSkuItem = {skuText: ''}
|
|
if (skuValue.valueCode === '单款项') {
|
|
currentSkuItem['skuText'] = skuValue['skuValue']
|
|
} else {
|
|
currentSkuItem['skuText'] = `${ skuValue.skuName }:${ skuValue.skuValue }`
|
|
}
|
|
currentSku.push(currentSkuItem)
|
|
break; // 只会对应一个value数据，找到就break减少循环
|
|
}
|
|
}
|
|
this.$emit('getCurrentSku', {
|
|
skuItem,
|
|
currentSku,
|
|
buyNum
|
|
})
|
|
// 选中sku之后，做一些相应的操作
|
|
// postSelectSku依赖于getCurrentSku的数据
|
|
this.$emit('postSelectSku')
|
|
},
|
|
|
|
//加入购物车
|
|
async handleAddCart() {
|
|
this.handleCheckIsLogin()
|
|
if (this.selectedSku.stockNumber < 1) {
|
|
return uni.showToast({
|
|
title: this.$t('common.understock'),
|
|
icon: "none"
|
|
})
|
|
}
|
|
// uni.showLoading({
|
|
// mask: true,
|
|
// title: '添加中...',
|
|
// })
|
|
try {
|
|
const postData = {
|
|
skuId: this.selectedSku.skuId,
|
|
number: this.buyNum,
|
|
}
|
|
await NET.request(API.ShoppingaddCart, postData, 'POST')
|
|
// 埋点
|
|
this.$store.dispatch('doPointer', {
|
|
eventType: 2,
|
|
productIds: this.productId
|
|
})
|
|
// 给购物车小图标赋值数量
|
|
let newAllCartNum = uni.getStorageSync('allCartNum') + this.buyNum
|
|
uni.setStorageSync('allCartNum', newAllCartNum)
|
|
this.$emit('changeCartNum',newAllCartNum)
|
|
uni.showToast({
|
|
title: '添加成功',
|
|
icon: 'none'
|
|
})
|
|
setTimeout(()=>{
|
|
this.buyNum = 1
|
|
this.goodsDetailShowFlag = false
|
|
},2000)
|
|
}finally {
|
|
uni.hideLoading()
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 立即购买（下单）
|
|
*/
|
|
handleBuyNow() {
|
|
this.handleCheckIsLogin()
|
|
if (this.selectedSku.stockNumber < 1) {
|
|
return uni.showToast({
|
|
title: this.$t('common.understock'),
|
|
icon: "none"
|
|
})
|
|
}
|
|
if (this.buyNum > this.selectedSku.stockNumber && this.selectedSku.stockNumber !== 0) {
|
|
return uni.showToast({
|
|
title: '已超出最大数量限制',
|
|
icon: "none"
|
|
})
|
|
}
|
|
|
|
//组装后端数据
|
|
let list = [{
|
|
ifWork: 0,
|
|
shopId: this.productData.shopId,
|
|
shopName: this.productData.shopName,
|
|
shopDiscountId: this.shopDiscountId > 0 ? this.shopDiscountId : null,
|
|
shopSeckillId: this.shopSeckillId > 0 ? this.shopSeckillId : null,
|
|
skus: [{
|
|
productId: this.productData.productId,
|
|
skuId: this.selectedSku.skuId,
|
|
productName: this.productData.productName,
|
|
image: this.selectedSku.image,
|
|
price: this.selectedSku.price,
|
|
weight: 0,
|
|
number: this.buyNum,
|
|
SKU: "",
|
|
total: this.selectedSku.price * this.buyNum,
|
|
ifLogistics: 1
|
|
}]
|
|
}]
|
|
uni.setStorageSync('skuItemDTOList', list)
|
|
this.buyNum = 1
|
|
this.goodsDetailShowFlag = false
|
|
uni.navigateTo({
|
|
url: '../orderModule/orderConfirm?type=1',
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 拼团下单
|
|
* @param type 1单独开团2拼团
|
|
*/
|
|
handleBuyWithGroup(type) {
|
|
this.handleCheckIsLogin()
|
|
if (this.selectedSku.stockNumber < 1) {
|
|
return uni.showToast({
|
|
title: this.$t('common.understock'),
|
|
icon: "none"
|
|
})
|
|
}
|
|
const data = {
|
|
number: this.buyNum,
|
|
productId: this.productId,
|
|
shopId: this.shopId,
|
|
skuId: this.selectedSku.skuId,
|
|
shopGroupWorkId: this.selectedSku.shopGroupWorkId,
|
|
type: type
|
|
}
|
|
if (type !== 1) {
|
|
data.collageId = this.collageId
|
|
}
|
|
uni.removeStorageSync("skuItemDTOList")
|
|
uni.setStorageSync('skuItemList', data)
|
|
this.goodsDetailShowFlag = false
|
|
this.buyNum = 1
|
|
uni.navigateTo({
|
|
url: '../orderModule/orderConfirm?type=1',
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 是否登录
|
|
* @return {boolean|void}
|
|
*/
|
|
handleCheckIsLogin() {
|
|
const userInfo = uni.getStorageSync('storage_key')
|
|
if (!userInfo || (userInfo && JSON.stringify(userInfo) === '{}')) {
|
|
return uni.navigateTo({
|
|
url: '../../pages_category_page2/userModule/login'
|
|
})
|
|
}
|
|
return true
|
|
},
|
|
|
|
/**
|
|
* 选择分期
|
|
* @param index 0:3期 1:6期 2:12期
|
|
*/
|
|
handleSelectAliAging(index) {
|
|
const aliAgingObj = this.aliAgingObj
|
|
if (aliAgingObj.selectIndex !== index && !aliAgingObj.disableSelectList[index]) {
|
|
aliAgingObj.selectIndex = index;
|
|
} else {
|
|
aliAgingObj.selectIndex = -1;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 渲染是否支持花呗
|
|
* @param productData 当前商品
|
|
* @param skuPrice:number 选中SKU的价格
|
|
*/
|
|
handleRenderAliAging(productData, skuPrice) {
|
|
if (productData.ifHuabei !== 1) return
|
|
const aliAgingObj = this.aliAgingObj
|
|
if (skuPrice && skuPrice >= 0.03) {
|
|
aliAgingObj.supportHanaUta = true
|
|
aliAgingObj.disableSelectList[0] = false;
|
|
aliAgingObj.agingMoneyList[0] = (parseInt((skuPrice / 3 * 100) / 100 + '')).toFixed(2) + ""
|
|
}
|
|
if (skuPrice && skuPrice >= 0.06) {
|
|
aliAgingObj.supportHanaUta = false;
|
|
aliAgingObj.disableSelectList[1] = false;
|
|
aliAgingObj.agingMoneyList[1] = (parseInt((skuPrice / 6 * 100) / 100 + '')).toFixed(2) + ""
|
|
}
|
|
if (skuPrice && skuPrice >= 0.12) {
|
|
aliAgingObj.supportHanaUta = true;
|
|
aliAgingObj.disableSelectList[2] = false;
|
|
aliAgingObj.agingMoneyList[2] = (parseInt((skuPrice / 12 * 100) / 100 + '')).toFixed(2) + ""
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style
|
|
lang="scss"
|
|
scoped
|
|
>
|
|
.goosDetailshow-box {
|
|
margin-bottom: -5upx;
|
|
|
|
.detailImg-box {
|
|
margin-top: 30upx;
|
|
margin-left: 30upx;
|
|
border-bottom: 1upx solid #EDEDED;
|
|
padding-bottom: 20upx;
|
|
width: 690upx;
|
|
|
|
.detailImg {
|
|
width: 140upx;
|
|
height: 140upx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
|
|
.color-box {
|
|
padding: 30rpx 30rpx;
|
|
width: 100%;
|
|
|
|
.colorName-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 30upx;
|
|
margin-left: -30upx;
|
|
|
|
.colorName {
|
|
background-color: #FFFFFF;
|
|
margin-left: 30upx;
|
|
padding: 10upx 32upx;
|
|
font-size: 26upx;
|
|
border: 2rpx solid #E4E5E6;
|
|
z-index: 2;
|
|
color: #333333;
|
|
}
|
|
|
|
.colorName-on {
|
|
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
|
|
color: #C5AA7B;
|
|
margin-left: 30upx;
|
|
padding: 10upx 32upx;
|
|
font-size: 26upx;
|
|
text-align: center;
|
|
z-index: 1;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.modelNum-box {
|
|
padding: 30upx 30upx;
|
|
border-bottom: 1upx solid #EDEDED;
|
|
width: 690upx;
|
|
|
|
.modelNumName-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top: 30upx;
|
|
margin-left: -30upx;
|
|
|
|
.modelNumName-on {
|
|
background-color: #FFE4D0;
|
|
color: #FF7800;
|
|
margin-left: 30upx;
|
|
padding: 10upx 32upx;
|
|
border-radius: 28upx;
|
|
border: 1upx solid #FF7800;
|
|
font-size: 26upx;
|
|
text-align: center;
|
|
}
|
|
|
|
.modelNumName {
|
|
background-color: #F5F5F5;
|
|
margin-left: 30upx;
|
|
padding: 10upx 32upx;
|
|
border-radius: 28upx;
|
|
font-size: 26upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsNumCent {
|
|
padding: 0 30upx;
|
|
|
|
.goodsNum-box {
|
|
width: 100%;
|
|
padding: 30rpx 0 180rpx 0;
|
|
//border-top: 2rpx solid #EDEDED;
|
|
|
|
.goodsNum {
|
|
height: 50upx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.item {
|
|
width: 50upx;
|
|
height: 50upx;
|
|
line-height: 48rpx;
|
|
border: 1upx solid #999999;
|
|
text-align: center;
|
|
}
|
|
|
|
.subtract {
|
|
border-right: 0upx;
|
|
}
|
|
|
|
.goodsNumber {
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.add {
|
|
border-left: 0upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.image-count-operate{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.text-count-operate{
|
|
width: 60rpx;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
color: #252744;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.bottom-line {
|
|
border-bottom: 1upx solid #EDEDED;
|
|
}
|
|
|
|
.huabei-box {
|
|
padding: 30upx 30upx;
|
|
width: 690upx;
|
|
|
|
.fenqi-box {
|
|
margin-top: 15upx;
|
|
width: 120%;
|
|
|
|
.huabei-item {
|
|
display: inline-block;
|
|
background: #f3f3f3;
|
|
padding: 16upx 24upx;
|
|
margin: 5upx 10upx;
|
|
border-radius: 15upx;
|
|
text-align: center;
|
|
font-size: 7upx;
|
|
|
|
.huabei-period {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.fenqi-on {
|
|
border: 1px solid #EF7F93;
|
|
color: #EF7F93;
|
|
}
|
|
|
|
.disabled {
|
|
color: #cacaca;
|
|
}
|
|
}
|
|
}
|
|
|
|
.goosDetailbut-box {
|
|
justify-content: center;
|
|
|
|
.joinShopCartBut {
|
|
width: 343upx;
|
|
height: 80upx;
|
|
border-radius: 40upx 0 0 40upx;
|
|
background-color: #FFC300;
|
|
color: #FFFEFE;
|
|
font-size: 28upx;
|
|
line-height: 80upx;
|
|
text-align: center;
|
|
margin-left: 30upx;
|
|
}
|
|
|
|
.buyNowBut {
|
|
width: 90%;
|
|
height: 90upx;
|
|
background: linear-gradient(-10deg, #252744, #484A66);
|
|
font-size: 32rpx;
|
|
line-height: 90upx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
border-radius: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.skuSelectBtn {
|
|
padding-bottom: 30rpx;
|
|
|
|
.selectBtn {
|
|
width: 342rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
color: #252744;
|
|
text-align: center;
|
|
border: 1px solid #252744;
|
|
font-size: 32rpx;
|
|
border-radius: 50rpx;
|
|
}
|
|
|
|
.selectBuyNow {
|
|
color: #FFFFFF;
|
|
background: linear-gradient(-10deg, #252744, #484A66);
|
|
}
|
|
}
|
|
|
|
.couponItemimg {
|
|
width: 150upx;
|
|
height: 60upx;
|
|
}
|
|
|
|
.joinbuyBut {
|
|
width: 190upx;
|
|
height: 80upx;
|
|
background: #333333;
|
|
color: #FFEBC4;
|
|
font-size: 28upx;
|
|
line-height: 80upx;
|
|
text-align: center;
|
|
margin-left: 30upx;
|
|
}
|
|
|
|
.sku-box{
|
|
display: inline-block;
|
|
}
|
|
|
|
.sku-image-item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-right: 30rpx;
|
|
|
|
.sku-image{
|
|
width: 86rpx;
|
|
height: 86rpx;
|
|
border: 2px solid #D3D4DE;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
.sku-image-select{
|
|
width: 86rpx;
|
|
height: 86rpx;
|
|
border: 2px solid #252744;
|
|
border-radius: 20rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.sku-name{
|
|
font-size: 24rpx;
|
|
color: #595B6B;
|
|
margin-top: 8rpx;
|
|
}
|
|
}
|
|
|
|
.scroll-view_H {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
}
|
|
</style>
|