该文描述了一个商品详情页面的实现，包括如何处理商品规格、价格、库存等信息，使其具有响应式效果。文中详细介绍了如何从原始数据结构转换为所需的数据结构，并展示了如何在Vue.js中使用计算属性来处理动态选择和库存显示。同时，还涵盖了弹出层的逻辑和事件处理，如颜色和数量选择。
先看最终效果
要求两个15价格要对应且具有响应式，所有数据都要具有响应式，库存默认为skuList中所有商品的库存综合，但但选择具体商品就要显示具体商品的库存;默认选择弹框中的第一项商品。
看看请求到的商品详情数据
4.分析要渲染成这样的效果需要怎样的数据结构
逆推法
因为标题有需要循环,而标题中的具体内容也需要循环,所以就需要一个二维数组来循环遍历;
因为一打开就需要选中第一个标题和标题中的第一个内容,所以需要给一个0下标；
所以目标数据结构是[{title:'标题1',arr1:["内容1","内容2","内容3"]},{title:'标题2',arr2:["内容1","内容2","内容3"]}]
因为直接创造一个变量,没有用原本就有的数据进行改造来得方便,所以就以目标数据结构去数据中找差不多的数据,
就会发现specificationList这个数据比较符合目标数据。所以就改造specificationList这个数据
5.具体操作代码
//方法中
// 初始化数据
methods: {
init(spuId) {//请求商品详情数据
post("product", "getProduct", {
spuId
}).then(res => {
console.log(res, "商品详情");
//购买类型的数据处理
res.data.specificationList = res.data.specificationList.map(item => { //添加新属性
return {
...item,
value: [],//添加一个空数组用于接收标题下具体的内容（黑色、白色、蓝色）
indes: 0//添加一个下标，用于默认选中第一个商品，也用于以后选择其他商品
}
})
if (0 == res.data.skuList.length) {
return {}
}
// 处理成目标数据结构
let skuList = this.skuList.forEach(item => {
item.specification.split(",").map(item => {
return item.split("_")
}).forEach(item => {
let title = item[0]
let content = item[1]
let obj = res.data.specificationList.find(item => item.title == title)
if (!obj.value.includes(content)) {
obj.value.push(content)
}
})
})
})
}}
//计算属性中
computed: {
// 处理团购价
handledPrice() {
let index = this.findvalue
if (this.goodsDetail.activity) {
return this.goodsDetail.activity.groupShopSkuDTOList[index].skuGroupShopPrice
} else if (this.isVIP) {
return this.goodsDetail.vipPrice
} else {
return this.goodsDetail.price
}
},
handledStock() {
// 库存数据处理
let sum = 0
this.skuList.forEach(item => {
sum += item.stock
})
return sum
},
selectedTitle() {
// 使用计算属性得到用户选中规格型号
let skulists = this.goodsDetail.specificationList || []
let selectedTitle = skulists.map(i => {
return i.value[i.indes]
})
return selectedTitle.join() //这里join默认以“,”隔开
},
//获取当前选中的下标
findvalue() {
let index = this.goodsDetail.skuList?.findIndex(s => s.title == this.selectedTitle)
// console.log(index);
return index
},
showPrice() {
let sess = this.goodsDetail.skuList || []
if (0 == sess.length) {
return {}
}
let index = this.findvalue
this.productId = sess[index].id
return sess[index].price / 100
},
img() {
let ses = this.goodsDetail.skuList || []
if (0 == ses.length) {
return {}
}
let index = this.findvalue
return ses[index].img
},
maxsok() {
let se = this.goodsDetail.skuList || []
if (0 == se.length) {
return {}
}
let index = this.findvalue
this.skuItem = se[index]
return se[index].stock
}
}<view class="goods-content">
<view class="goodsName">{{goodsDetail.title}}</view>
<div class="goodsPrice">
<text class="price">￥{{handledPrice/100}}</text>
<text class="originalPrice">￥{{goodsDetail.originalPrice/100}}</text>
<text class="discount">{{isTitle}}</text>
</div>
<view class="stock-sale">
<view class="stock">销量：{{goodsDetail.sales}}</view>
<view class="sale">库存：{{shower?maxsok:handledStock}}</view>
</view>
</view>
<!-- 底部弹出层 -->
<view class="popup-box">
<u-popup :show="show" :round="15" @close="close" @open="open">
<view class="popup-box-content">
<view class="popup-header">
<image src="../../static/迷糊瓜神.webp" mode=""></image>
<view class="popup-header-goods">
<view class="price">￥{{handledPrice/100}}<span class="memberPrice">
{{goodsDetail.activity?"团购价":'会员价'}}</span></view>
<view class="stock">库存:{{maxsok}}{{goodsDetail.unit}}</view>
<view class="selected">已选:{{selectedTitle}}</view>
</view>
</view>
<view class="goodsColor" v-for="(item,index) in goodsDetail.specificationList" :key="index">
<view class="goodsColor-title">{{item.title}}</view>
<view class="goodsColor-item">
<view class="textstyle">
<u-tag :text="ite" plain shape="circle" v-for="(ite,indexs) in item.value"
@click="clickTags(item,indexs)" :type="item.indes==indexs?'error':'primary'">
</u-tag>
</view>
</view>
</view>
<view class="goodsNum">
<view class="goodsNum-title">数量</view>
<view class="">
<uni-number-box @change="changeValue" />
</view>
</view>
<view class="finished">
<button type="primary" @click="finished">完成</button>
</view>
</view>
</u-popup>
</view>6.完整代码
<template>
<view class="whole">
<view class="header">
<!-- 轮播图 -->
<view class="u-demo-block">
<u-swiper :list="scolleList" @change="changeCurrenNum" :autoplay="false">
<view slot="indicator" class="indicator">
<view class="indicator__dot" v-for="(item, index) in scolleList" :key="index"
:class="[index === currentNum && 'indicator__dot--active']">
</view>
</view>
</u-swiper>
</view>
<view @click="toOrder">
跳到订单页面
</view>
<view class="goods-content">
<view class="goodsName">{{goodsDetail.title}}</view>
<div class="goodsPrice">
<text class="price">￥{{handledPrice/100}}</text>
<text class="originalPrice">￥{{goodsDetail.originalPrice/100}}</text>
<text class="discount">{{isTitle}}</text>
</div>
<view class="stock-sale">
<view class="stock">销量：{{goodsDetail.sales}}</view>
<view class="sale">库存：{{shower?maxsok:handledStock}}</view>
</view>
</view>
</view>
<view class="middle">
<view class="middle-list">
<uni-list class="first-list" v-if="goodsDetail.activity?true:false">
<uni-list-item showArrow style="background-color: #e8e8e8;">
<template v-slot:header>
<image src="../../static/迷糊瓜神.webp" mode="" class="first-list-img"></image>
</template>
<template v-slot:body>
<text class="slot-box slot-text middle-group"> {{minNum}}人成团,已有{{buyerNum}}人参团</text>
</template>
<template v-slot:footer>
<view class="icon-speack">
<uni-icons type="checkbox" size="35rpx"></uni-icons>
<text class="speack colorRed">告诉TA</text>
</view>
</template>
</uni-list-item>
</uni-list>
<uni-list>
<view @click="bool = true">
<uni-list-item showArrow>
<template v-slot:header>
<view class="slot-box">优惠券</view>
</template>
<template v-slot:body>
<text class="slot-box slot-text colorRed counp">领取优惠券</text>
</template>
</uni-list-item>
</view>
</uni-list>
<uni-list>
<view @click="show = true">
<uni-list-item showArrow>
<template v-slot:header>
<view class="slot-box">购买类型</view>
</template>
<template v-slot:body>
<text class="slot-box slot-text colorRed"
style="width: 400rpx;">{{shower?selectedTitle:""}}</text>
</template>
</uni-list-item>
</view>
</uni-list>
<uni-list>
<uni-list-item>
<template v-slot:header>
<view class="slot-box">配送费用</view>
</template>
<template v-slot:body>
<text
class="slot-box slot-text defaultFreePrice">{{defaultFreePrice?"单笔购买满"+defaultFreePrice/100+"元免邮费":"包邮"}}</text>
</template>
</uni-list-item>
</uni-list>
<uni-list v-for="(item,index) in attributeList" :key="index">
<uni-list-item>
<template v-slot:header>
<view class="slot-box">{{item.attribute}}</view>
</template>
<template v-slot:body>
<text class="slot-box slot-text">{{item.value}}</text>
</template>
</uni-list-item>
</uni-list>
</view>
</view>
<!-- 富文本内容 -->
<view class="bottom">
<u-divider text="图文详情" textColor="#949494" lineColor="#616161"></u-divider>
<view class="u-content">
<u-parse :content="content"></u-parse>
</view>
<!-- 立即购买 -->
<view class="goods-carts">
<uni-goods-nav :options="options" :fill="true" :button-group="customButtonGroup" @click="onClick"
@buttonClick="buttonClick" />
</view>
</view>
<!-- 底部弹出层 -->
<view class="popup-box">
<u-popup :show="show" :round="15" @close="close" @open="open">
<view class="popup-box-content">
<view class="popup-header">
<image src="../../static/迷糊瓜神.webp" mode=""></image>
<view class="popup-header-goods">
<view class="price">￥{{handledPrice/100}}<span
class="memberPrice">{{goodsDetail.activity?"团购价":'会员价'}}</span></view>
<view class="stock">库存:{{maxsok}}{{goodsDetail.unit}}</view>
<view class="selected">已选:{{selectedTitle}}</view>
</view>
</view>
<view class="goodsColor" v-for="(item,index) in goodsDetail.specificationList" :key="index">
<view class="goodsColor-title">{{item.title}}</view>
<view class="goodsColor-item">
<view class="textstyle">
<u-tag :text="ite" plain shape="circle" v-for="(ite,indexs) in item.value"
@click="clickTags(item,indexs)" :type="item.indes==indexs?'error':'primary'">
</u-tag>
</view>
</view>
</view>
<view class="goodsNum">
<view class="goodsNum-title">数量</view>
<view class="">
<uni-number-box @change="changeValue" />
</view>
</view>
<view class="finished">
<button type="primary" @click="finished">完成</button>
</view>
</view>
</u-popup>
</view>
<!-- 优惠券弹出层 -->
<view class="popup-box2">
<u-popup :show="bool" @close="closeCoupon" @open="openCoupon">
<view class="counpList">
<view class="counpList-item" v-for="(item,index) in couponList" :key="index"
@click="receiveCoupon(item.id)">
<view class="counpList-item-up">
<view class="line">
<view class="counpList-item-up-left">
<view class="discount">{{item.title}}</view>
<view class="subTitle">在领取后{{item.days}}天有效,可领{{item.limit}}张，已领{{item.nowCount}}张
</view>
</view>
<view class="counpList-item-up-right">
<view class="discount-price">￥{{item.discount/100}}</view>
<view class="fullDiscount">{{item.description}}</view>
</view>
</view>
</view>
<view class="counpList-item-down">
{{item.categoryTitle?"限"+item.categoryTitle+"可用":"全部可用"}}
<image src="../../static/a.png" v-if="item.limit<=item.nowCount"></image>
</view>
</view>
</view>
</u-popup>
</view>
</view>
</template>
<script>
import {
post,
get
} from "@/uilt/http.js"
export default {
data() {
return {
scolleList: [], //轮播图列表
currentNum: 0,
attributeList: [], //属性列表
nodes: "", //富文本
content: "", //富文本
goodsDetail: {}, //商品详情数据
isVIP: 0, //vip价格
minNum: 100, //参团人数
buyerNum: 0, //已经参团人数
isTitle: "",
defaultFreePrice: 0, //邮费
stock: 0, //库存
skuList: [],
show: false, //弹出层
shower: false, //显示隐藏购买类型
isBuyNow: false, //加入购物车/立即购买（立即参团）
bool: false,
couponList: [], //优惠券列表
specificationList: "", //属性列表
spuId: 0, //商品ID
productId: 0, //商品spuid
isCollon: false, //收藏或取消收藏
skuItem:{},//当前选中的skuList商品
num:0,//加入购物车的数量
options: [{
icon: 'home',
text: '首页',
iconColor: "#ffff00"
}, {
icon: 'heart',
text: '收藏',
infoColor: "#f5f5f5"
}, {
icon: 'cart',
text: '购物车',
info: 0 //已经加入购物车的数量
}],
customButtonGroup: [{
text: '加入购物车',
backgroundColor: 'linear-gradient(90deg, #FE9D38, #FA4767)',
color: '#fff'
},
{
text: '',
backgroundColor: 'linear-gradient(90deg, #FA4767, #F56A6C)',
color: '#fff'
}
]
}
},
onLoad(options) {
this.spuId = options.id
this.init(options.id)
let user = uni.getStorageSync("user") || "{}"
let userObj = JSON.parse(user)
this.isVIP = userObj && userObj.level
this.judgeCollection()
this.getCarNum() //获取已加入购物车的数量
},
onHide() {
[
[{
img: "ytghlk",
title: "ujh",
price: 5,
stock: 2
}, {
img: "ytghlk",
title: "ujh",
price: 5,
stock: 2
}],
[]
]
this.shower = false;
},
methods: {
toOrder(){
let data = JSON.stringify({
num:this.num,
title:this.goodsDetail.title,
item:this.skuItem
})
uni.navigateTo({
url:`/pages/order/create?data=${data}`
})
},
// 初始化数据
init(spuId) {
post("product", "getProduct", {
spuId
}).then(res => {
console.log(res, "商品详情");
let data = res.data
this.goodsDetail = data
this.scolleList = data.imgList
this.attributeList = data.attributeList
this.content = data.detail // 富文本内容
this.defaultFreePrice = data.freightTemplate.defaultFreePrice
this.skuList = data.skuList
this.specificationList = data.specificationList
//购买类型的数据处理
res.data.specificationList = res.data.specificationList.map(item => { //添加新属性
return {
...item,
value: [],
indes: 0
}
})
if (0 == res.data.skuList.length) {
return {}
}
// 方法3
let skuList = this.skuList.forEach(item => {
// console.log(this.skuList,"this.skuList");
item.specification.split(",").map(item => {
return item.split("_")
}).forEach(item => {
let title = item[0]
let content = item[1]
let obj = res.data.specificationList.find(item => item.title == title)
if (!obj.value.includes(content)) {
obj.value.push(content)
}
})
})
// console.log(res.data.specificationList,"res.data.specificationList重新处理");
// 方法2
// let arr = []
// let skuList=this.skuList.forEach(item=>{
// console.log(this.skuList,"this.skuList");
// arr = item.title.split(",")
// var title = arr[0]
// var content = arr[1]
// if(!res.data.specificationList[0].value.includes(title)){
// res.data.specificationList[0].value.push(title)
// }
// if(!res.data.specificationList[1].value.includes(content)){
// res.data.specificationList[1].value.push(content)
// }
// console.log(arr,"arr");
// })
// console.log(res.data.specificationList,"res.data.specificationList重新处理");
// 方法1
// res.data.skuList.forEach(item => {
// let spe = item.specification
// spe.split(',').map(items => items.split('_')).forEach(s => {
// let title=s[0]
// let val=s[1]
// var findspec = res.data.specificationList.find((item) => item.title ===title)
// //去重操作
// let inde = findspec.value.indexOf(val)
// if (inde == -1) {
// findspec.value.push(val)
// }
// })
// })
console.log(this.goodsDetail, "this.goodsDetail已处理");
this.handle()
this.coupon()
this.delegation()
})
},
// 头部轮播图
changeCurrenNum(e) {
this.currentNum = e.current
},
// 收藏/取消收藏商品
onClick(e) {
this.isCollon = !this.isCollon
if (1 == e.index) {
post("favorite", this.isCollon ? "create" : "delete", {
spuId: this.spuId
}).then(res => {
this.options[1].icon = this.isCollon ? "heart-filled" : 'heart'
console.log(res, "收藏商品");
})
} else if (0 == e.index) {
uni.switchTab({
url: '/pages/index/index'
})
}
},
// 判断是否收藏了
judgeCollection() {
post("favorite", "getFavoriteBySpuId", {
spuId: this.spuId
}).then(res => {
this.isCollon = res.data
this.options[1].icon = res.data ? "heart-filled" : 'heart'
console.log(res, "是否收藏了商品");
})
},
// 立即参团/立即购买
buttonClick(e) {
// show: false, //弹出层
// shower: false, //显示隐藏购买类型
console.log(e)
if (e.index) {
console.log("立即购买");
if (this.shower) {
uni.navigateTo({
url: `/pages/order/create`
})
} else {
this.show = true
}
} else {
console.log("加入购物车按钮");
if (this.shower) {
post("cart", "addCartItem", {
skuId: this.productId
}).then(res => {
uni.showToast({
title: res.errmsg,
icon: "none"
})
console.log(res, "加入购物车");
this.isBuyNow = false;
this.getCarNum()
})
} else {
this.show = true
this.isBuyNow = true
}
}
},
// 获取已加入购物车的数量
getCarNum() {
post("cart", "countCart").then(res => {
console.log(res, "加入购物车的数量");
this.options[2].info = res.data
})
},
// 商品数据处理
handle() {
// 处理商品价格
if (this.goodsDetail.activity) {
this.minNum = this.goodsDetail.activity.minNum
this.buyerNum = this.goodsDetail.activity.buyerNum
this.isTitle = "团购价"
} else if (this.isVIP) {
this.isTitle = "VIP价"
// console.log(this.isVIP,"this.isVIP");
} else {
this.isTitle = Math.floor((this.goodsDetail.price / this.goodsDetail.originalPrice) * 100) /
10 + "折"
}
},
// 底部弹出层
open() {
// console.log('open');
},
close() {
this.show = false
this.isBuyNow = false;
// console.log('close');
},
// 数量改变
changeValue(value) {
this.num = value
console.log('返回数值：', value);
},
finished() {
// show: false, //弹出层
// shower: false, //显示隐藏购买类型
// isBuyNow:false//用于判断是立即参团还是加入购物车
this.show = false;
this.shower = true;
if (this.isBuyNow) {
post("cart", "addCartItem", {
skuId: this.productId
}).then(res => {
uni.showToast({
title: res.errmsg,
icon: "none"
})
console.log(res, "加入购物车");
this.isBuyNow = false;
this.getCarNum()
})
}
},
// 优惠券弹出层
openCoupon() {
this.coupon()
// console.log('open');
},
closeCoupon() {
this.bool = false
// console.log('close');
},
// 可领取优惠券列表
coupon() {
post("coupon", "getObtainableCoupon").then(res => {
console.log(res, "优惠券列表");
this.couponList = res.data
}).catch(err => {
if (10001 == err.errno) {
uni.showModal({
title: '提示',
content: '用户未登录，是否进行登录？',
success: function(res) {
if (res.confirm) {
uni.navigateTo({
url: '/pages/public/login'
})
} else if (res.cancel) {
}
}
});
}
})
},
// 点击领取优惠券
receiveCoupon(couponId) {
let data = {
couponId
}
post("coupon", "obtainCoupon", data).then(res => {
console.log(res, "领取优惠券列表");
uni.showToast({
title: res.errmsg,
icon: "none"
})
this.coupon()
}).catch(err => {
console.log(err, "领取优惠券列表");
uni.showToast({
title: err.errmsg,
icon: "none"
})
})
},
//点击规格事件
clickTags(i, index) {
i.indes = index
},
// 判断是否参团
delegation() {
if (this.goodsDetail.activity) {
console.log(111);
this.customButtonGroup[1].text = "立即购买"
} else {
console.log(222);
this.customButtonGroup[1].text = "立即参团"
}
},
},
computed: {
// 处理团购价
handledPrice() {
let index = this.findvalue
if (this.goodsDetail.activity) {
return this.goodsDetail.activity.groupShopSkuDTOList[index].skuGroupShopPrice
} else if (this.isVIP) {
return this.goodsDetail.vipPrice
} else {
return this.goodsDetail.price
}
},
handledStock() {
// 库存数据处理
let sum = 0
this.skuList.forEach(item => {
sum += item.stock
})
return sum
},
selectedTitle() {
// 使用计算属性得到用户选中规格型号
let skulists = this.goodsDetail.specificationList || []
let selectedTitle = skulists.map(i => {
return i.value[i.indes]
})
return selectedTitle.join() //这里join默认以“,”隔开
},
//获取当前选中的下标
findvalue() {
let index = this.goodsDetail.skuList?.findIndex(s => s.title == this.selectedTitle)
// console.log(index);
return index
},
showPrice() {
let sess = this.goodsDetail.skuList || []
if (0 == sess.length) {
return {}
}
let index = this.findvalue
this.productId = sess[index].id
return sess[index].price / 100
},
img() {
let ses = this.goodsDetail.skuList || []
if (0 == ses.length) {
return {}
}
let index = this.findvalue
return ses[index].img
},
maxsok() {
let se = this.goodsDetail.skuList || []
if (0 == se.length) {
return {}
}
let index = this.findvalue
this.skuItem = se[index]
return se[index].stock
}
}
}
</script>
<style lang="scss">
.whole {
font-size: 32rpx;
height: 2000rpx;
background-color: $bgColor;
// 头部
.header {
// 轮播图
.u-demo-block {
width: 100%;
height: 800rpx;
// 图片响应式全屏
/deep/.u-swiper {
height: 100% !important;
border-radius: 0 !important;
}
/deep/.u-swiper__wrapper__item__wrapper__image {
height: 100% !important;
border-radius: 0 !important;
}
/deep/.u-swiper__wrapper {
height: 100% !important;
border-radius: 0 !important;
}
.indicator {
@include flex(row);
justify-content: center;
&__dot {
height: 6px;
width: 6px;
border-radius: 100px;
background-color: rgba(255, 255, 255, 0.35);
margin: 0 5px;
transition: background-color 0.3s;
&--active {
background-color: #ffffff;
}
}
}
.indicator-num {
padding: 2px 0;
background-color: rgba(0, 0, 0, 0.35);
border-radius: 100px;
width: 35px;
@include flex;
justify-content: center;
&__text {
color: #FFFFFF;
font-size: 12px;
}
}
}
.goods-content {
padding: 30rpx;
box-sizing: border-box;
background-color: #fff;
.goodsName {}
.goodsPrice {
line-height: 64rpx;
.price {
font-size: 34rpx;
color: #ff0000;
}
.originalPrice {
color: #686868;
font-size: 28rpx;
margin-left: 20rpx;
text-decoration: line-through;
}
.discount {
color: #FFFFFF;
font-size: $fontSize-min;
padding: 4rpx 10rpx;
margin-left: 20rpx;
background-color: #ff0000;
}
}
.stock-sale {
color: #686868;
display: flex;
font-size: 27rpx;
.stock {
width: 50%;
}
.sale {
width: 50%;
}
}
}
}
// 中间
.middle {
margin-bottom: 20rpx;
.middle-list {
.slot-box {
font-size: 28rpx;
width: 30%;
}
.defaultFreePrice {
width: 50%;
}
.colorRed {
color: #ff0000;
}
.counp {
margin-left: 14rpx;
}
.first-list {
/deep/.uni-list-item__container {
display: flex;
justify-content: space-between;
}
.middle-group {
width: 50%;
font-size: 28rpx;
}
.first-list-img {
width: 40rpx;
height: 40rpx;
}
.icon-speack {
display: flex;
align-items: center;
.speack {
font-size: 27rpx;
margin-left: 10rpx;
}
}
}
}
}
// 底部
.bottom {
background-color: #FFFFFF;
// 分割线
/deep/.u-divider {
width: 50%;
margin: auto;
padding: 40rpx 0px;
}
/* 富文本内容 */
.u-content {
// padding: 24rpx;
}
.goods-carts {
width: 90%;
margin: auto;
z-index: 999;
box-shadow: 0px 0px 20rpx 6rpx #ccc;
border-radius: 10rpx;
overflow: hidden;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
position: fixed;
left: 0;
right: 0;
/* #ifdef H5 */
left: var(--window-left);
right: var(--window-right);
/* #endif */
bottom: 60rpx;
/deep/.uni-tab__cart-button-right {
border-right: #ccc 1px solid;
}
}
}
.popup-box {
background-color: #fff;
.popup-box-content {
padding: 0px 30rpx;
box-sizing: border-box;
// 公共样式
.goodsSize-title {
color: red;
margin: 20rpx 0px;
}
// 图片
.popup-header {
display: flex;
align-items: center;
font-size: $fontSize-md;
image {
width: 160rpx;
height: 160rpx;
margin-right: 30rpx;
margin-top: -40rpx;
}
.price {
font-size: $fontSize-max;
color: $color;
.memberPrice {
color: #fff;
font-size: $fontSize-min;
padding: 4rpx 10rpx;
border-radius: 6rpx;
margin-left: 20rpx;
line-height: 50rpx;
background-color: #ff0000;
}
}
.stock {
line-height: 50rpx;
}
}
// 尺寸
// 颜色
.goodsColor {
margin-bottom: 40rpx;
.goodsColor-title {
@extend .goodsSize-title;
}
.goodsColor-item {
// 规格属性
.textstyle {
display: flex;
width: 100%;
flex-wrap: wrap;
/deep/.u-tag-wrapper {
margin: 10rpx;
}
}
}
}
// 数量
.goodsNum {
margin-bottom: 40rpx;
.goodsNum-title {
@extend .goodsSize-title;
}
}
// 完成按钮
.finished {
margin-bottom: 40rpx;
button {
border-radius: 46rpx !important;
}
}
}
}
// 优惠券弹出层
.popup-box2 {
background-color: #aaaaaa;
// 优惠券
.counpList {
padding: 20rpx;
box-sizing: border-box;
background-color: #e6e6e6;
.counpList-item {
box-sizing: border-box;
margin-bottom: 20rpx;
.counpList-item-up {
padding: 20rpx 0px 0rpx;
background: radial-gradient(circle at left bottom, transparent 10px, #fff 0) top left / 50% 100% no-repeat,
radial-gradient(circle at right bottom, transparent 10px, #fff 0) top right / 50% 100% no-repeat;
.line {
display: flex;
justify-content: space-between;
margin: 0px 20rpx;
padding-bottom: 15rpx;
border-bottom: #aaaaaa 1px dashed;
.discount {
// font-size: $fontSize-max;
line-height: 60rpx;
}
.subTitle {
margin-bottom: 10rpx;
color: #7e7e7e;
font-size: $fontSize-min;
}
.discount-price {
text-align: right;
color: $color;
line-height: 60rpx;
font-size: 34rpx;
}
.fullDiscount {
font-size: $fontSize-min;
}
}
}
.counpList-item-down {
position: relative;
padding: 10rpx 20rpx;
line-height: 60rpx;
color: #7e7e7e;
font-size: $fontSize-min;
background: radial-gradient(circle at left top, transparent 10px, #fff 0) top left / 50% 100% no-repeat,
radial-gradient(circle at right top, transparent 10px, #fff 0) top right / 50% 100% no-repeat;
image {
width: 100rpx;
height: 100rpx;
position: absolute;
bottom: 0px;
right: 0px;
}
}
}
}
}
}
</style>
扫一扫
555
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
