dy-hu
1 year ago
3 changed files with 953 additions and 33 deletions
-
2pages/tabbar/cart/index.vue
-
216pages_category_page1/goodsModule/components/GoodSkuSelect.vue
-
768pages_category_page1/goodsModule/components/GoodSkuSelect2.vue
@ -0,0 +1,768 @@ |
|||
<!-- |
|||
* @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="14" |
|||
> |
|||
<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="fs32 fs-bold">¥</label> |
|||
<label |
|||
class="fs32 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> |
|||
</view> |
|||
</view> |
|||
<view class="goodsNumCent"> |
|||
<view |
|||
class="goodsNum-box flex-row-plus flex-sp-between" |
|||
:class="{'bottom-line' :aliAgingObj.supportHanaUta}" |
|||
> |
|||
<label class="font-color-333 fs26">数量</label> |
|||
<view class="goodsNum"> |
|||
<view |
|||
class="item subtract" |
|||
@click="handleNumSub" |
|||
>- |
|||
</view> |
|||
<view |
|||
class="item goodsNumber" |
|||
v-model="buyNum" |
|||
>{{ buyNum }} |
|||
</view> |
|||
<view |
|||
class="item add" |
|||
@click="handleNumAdd" |
|||
>+ |
|||
</view> |
|||
</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"] |
|||
} |
|||
} |
|||
}, |
|||
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: 30upx 30upx; |
|||
width: 690upx; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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-color: #333333; |
|||
font-size: 28upx; |
|||
line-height: 90upx; |
|||
text-align: center; |
|||
color: #FFEBC4; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.skuSelectBtn { |
|||
padding-bottom: 30rpx; |
|||
|
|||
.selectBtn { |
|||
width: 342rpx; |
|||
height: 100rpx; |
|||
line-height: 100rpx; |
|||
text-align: center; |
|||
border: 2rpx solid #333333; |
|||
font-size: 28rpx; |
|||
border-radius: 8rpx; |
|||
} |
|||
|
|||
.selectBuyNow { |
|||
background: #333333; |
|||
} |
|||
} |
|||
|
|||
.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; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue