多规格增加

This commit is contained in:
2022-07-08 16:16:13 +08:00
parent d3185b6e26
commit 49cf009ec7
12 changed files with 2403 additions and 1547 deletions

View File

@@ -10,8 +10,8 @@ import router from '../router'
// 基础配置 // 基础配置
const config = { const config = {
apiUrl : 'https://api.gongli.vip/api/', // 正式环境 // apiUrl : 'https://api.gongli.vip/api/', // 正式环境
// apiUrl : 'http://api.gl.shangkelian.cn/api/', // 测试 apiUrl : 'http://api.gl.shangkelian.cn/api/', // 测试
timeout : 60000 timeout : 60000
} }

View File

@@ -114,7 +114,8 @@
stateText: val.state, stateText: val.state,
cans: val.can, cans: val.can,
shop: val.shop, shop: val.shop,
goods_id:val.items[0].sku.goods_id goods_id:val.items[0].sku.goods_id,
unit:val.items[0].sku.unit
} }
}) })
this.array = this.array.concat(ordersArr) this.array = this.array.concat(ordersArr)
@@ -149,10 +150,8 @@
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
cancel(orderNo).then(res => { cancel(orderNo).then(res => {
console.log(res)
let orderIndex = this.array.findIndex(val => val.no === e let orderIndex = this.array.findIndex(val => val.no === e
.order.no) .order.no)
console.log(this.index, typeof this.index, orderIndex);
if (this.index == '0') { if (this.index == '0') {
this.array[orderIndex].stateText = "已取消"; this.array[orderIndex].stateText = "已取消";
this.array[orderIndex].cans = { this.array[orderIndex].cans = {
@@ -208,10 +207,8 @@
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
sign(orderNo).then(res => { sign(orderNo).then(res => {
console.log(res)
let orderIndex = this.array.findIndex(val => val.no === e let orderIndex = this.array.findIndex(val => val.no === e
.order.no) .order.no)
console.log(this.index, typeof this.index, orderIndex);
if (this.index == '0') { if (this.index == '0') {
this.array[orderIndex].stateText = "已签收"; this.array[orderIndex].stateText = "已签收";
this.array[orderIndex].cans = { this.array[orderIndex].cans = {

View File

@@ -9,6 +9,7 @@
<view class="item--content"> <view class="item--content">
<view class="title">{{goodsInfo.goods_name}}</view> <view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view> <view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class="unit"> {{goodsInfo.unit}} </view>
<view class="price">{{goodsInfo.price || '0'}} <view class="price">{{goodsInfo.price || '0'}}
<view class="price-type"> <view class="price-type">
<text> DT积分</text> <text> DT积分</text>
@@ -22,7 +23,7 @@
<view class="sales-item" @click="goSales('refund')"> <view class="sales-item" @click="goSales('refund')">
<view class="sales-item-left"> <view class="sales-item-left">
<image class="icon" <image class="icon"
src="http://storage.zh.shangkelian.cn/images/2022/01/11/9093c59ea5d513008926ac4233c20992.png" src="/static/icon/icon-back.png"
mode="aspectFill" /> mode="aspectFill" />
<view class="sales-title">退货</view> <view class="sales-title">退货</view>
</view> </view>
@@ -38,7 +39,7 @@
<view class="sales-item" @click="goSales('exchange')"> <view class="sales-item" @click="goSales('exchange')">
<view class="sales-item-left"> <view class="sales-item-left">
<image class="icon" <image class="icon"
src="http://storage.zh.shangkelian.cn/images/2022/01/11/9093c59ea5d513008926ac4233c20992.png" src="/static/icon/icon-exchange.png"
mode="aspectFill" /> mode="aspectFill" />
<view class="sales-title">换货</view> <view class="sales-title">换货</view>
</view> </view>
@@ -183,6 +184,11 @@
padding-top: 6rpx; padding-top: 6rpx;
// @extend .ellipsis-1; // @extend .ellipsis-1;
} }
&>.unit{
color:#999;
font-size: 26rpx;
padding-top: 10rpx;
}
&>.price { &>.price {
padding-top: 10rpx; padding-top: 10rpx;
@@ -248,8 +254,8 @@
font-weight: bold; font-weight: bold;
.icon { .icon {
width: 60rpx; width: 46rpx;
height: 60rpx; height: 46rpx;
border-radius: 50%; border-radius: 50%;
margin-right: $margin - 10; margin-right: $margin - 10;
} }

View File

@@ -17,6 +17,9 @@
<view class="item--content"> <view class="item--content">
<view class="title">{{goodsInfo.goods_name}}</view> <view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view> <view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class="unit">
{{goodsInfo.unit}}
</view>
<view class=" number"> <view class=" number">
{{goodsInfo.qty}} {{goodsInfo.qty}}
</view> </view>
@@ -319,6 +322,11 @@
padding-top: 6rpx; padding-top: 6rpx;
// @extend .ellipsis-1; // @extend .ellipsis-1;
} }
.unit{
color:#999;
font-size: 26rpx;
padding-top: 10rpx;
}
&>.price { &>.price {
padding-top: 10rpx; padding-top: 10rpx;

View File

@@ -23,7 +23,13 @@
<view class="order--flex" @click="$Router.push({ name: 'StoreGoods', params: {id: item.items[0].goods_id}})"> <view class="order--flex" @click="$Router.push({ name: 'StoreGoods', params: {id: item.items[0].goods_id}})">
<image class="order--cover" :src="item.items[0].cover" mode="aspectFill"></image> <image class="order--cover" :src="item.items[0].cover" mode="aspectFill"></image>
<view class="order--title">{{item.items[0].goods_name}}</view> <view class="order--title">
{{item.items[0].goods_name}}
<view class="unit">
{{item.items[0].sku.unit}}
</view>
</view>
<view class="order--count"> <view class="order--count">
<view class="order--price">{{item.items[0].price}}<text>DT积分</text></view> <view class="order--price">{{item.items[0].price}}<text>DT积分</text></view>
<view class="order--sum">{{item.items[0].qty}}</view> <view class="order--sum">{{item.items[0].qty}}</view>
@@ -235,6 +241,11 @@
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx; line-height: 40rpx;
} }
.unit{
color:#999;
font-size: 26rpx;
padding-top: 10rpx;
}
.order--count { .order--count {
text-align: right; text-align: right;

View File

@@ -5,6 +5,9 @@
<view class="item--content"> <view class="item--content">
<view class="title">{{goodsInfo.goods_name}}</view> <view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view> <view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class="unit">
{{goodsInfo.unit}}
</view>
<view class=" number"> <view class=" number">
{{goodsInfo.qty}} {{goodsInfo.qty}}
</view> </view>
@@ -40,7 +43,7 @@
return { return {
logs: [], logs: [],
goodsInfo: {}, goodsInfo: {},
refund_total:'' refund_total: ''
} }
}, },
onLoad() { onLoad() {
@@ -214,6 +217,12 @@
// @extend .ellipsis-1; // @extend .ellipsis-1;
} }
.unit {
color: #999;
font-size: 26rpx;
padding-top: 10rpx;
}
&>.price { &>.price {
padding-top: 10rpx; padding-top: 10rpx;
display: flex; display: flex;

View File

@@ -9,6 +9,9 @@
<view class="item--content"> <view class="item--content">
<view class="title">{{goodsInfo.goods_name}}</view> <view class="title">{{goodsInfo.goods_name}}</view>
<view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view> <view class="sub_title" v-if="goodsInfo.shop">{{goodsInfo.shop.name}}</view>
<view class="unit">
{{goodsInfo.unit}}
</view>
<view class="price">{{goodsInfo.price || '0'}} <view class="price">{{goodsInfo.price || '0'}}
<view class="price-type"> <view class="price-type">
<text> DT积分</text> <text> DT积分</text>
@@ -243,6 +246,11 @@
padding-top: 6rpx; padding-top: 6rpx;
// @extend .ellipsis-1; // @extend .ellipsis-1;
} }
&>.unit{
color:#999;
font-size: 26rpx;
padding-top: 10rpx;
}
&>.price { &>.price {
padding-top: 10rpx; padding-top: 10rpx;

View File

@@ -63,7 +63,7 @@
export default { export default {
data() { data() {
return { return {
qty : 1, qty : 0,
goodsInfo : [], goodsInfo : [],
total : 0, total : 0,
freight : 0, freight : 0,
@@ -74,6 +74,7 @@
}, },
onShow(){ onShow(){
if(JSON.stringify(this.$store.getters.getAddress) !== '{}') this.address = this.$store.getters.getAddress if(JSON.stringify(this.$store.getters.getAddress) !== '{}') this.address = this.$store.getters.getAddress
this.qty= this.$Route.query.qty;
}, },
mounted() { mounted() {
this.getBuy() this.getBuy()

View File

@@ -23,8 +23,8 @@
</view> </view>
<view class="sales" v-if="goods.skus">库存量{{goods.skus[0].stock}}</view> <view class="sales" v-if="goods.skus">库存量{{goods.skus[0].stock}}</view>
</view> </view>
<view class="unit" v-if="goods.skus && goods.skus[0].unit !== ''"> <view class="unit" v-if="goods.skus && goods.skus[0].unit !== ''" @click="open()">
规格 : {{goods.skus[0].unit_text}} 规格 : {{selectSkusValues.unit_text}}
</view> </view>
<!-- 店铺信息 --> <!-- 店铺信息 -->
@@ -32,11 +32,14 @@
<view class="shopInfo-title-left"> <view class="shopInfo-title-left">
<image class="shop-logo" :src="goods.shop.cover" mode="aspectFill" /> <image class="shop-logo" :src="goods.shop.cover" mode="aspectFill" />
<view class="shop-title"> <view class="shop-title">
<view class="shop-titl" >{{goods.shop.name}}</view> <view class="shop-titl">{{goods.shop.name}}</view>
<view> 店铺评分:<span class='no'>5.0</span> <text style="padding-left: 20rpx;">服务态度:<span class='no'>5.0</span></text> </view> <view> 店铺评分:<span class='no'>5.0</span> <text style="padding-left: 20rpx;">服务态度:<span
class='no'>5.0</span></text> </view>
</view> </view>
</view> </view>
<view class="shopInfo-title-right" >全部商品 {{goods.shop.goods_count || 0}} <uni-icons type="right" color="grey"/></view> <view class="shopInfo-title-right">全部商品 {{goods.shop.goods_count || 0}}
<uni-icons type="right" color="grey" />
</view>
</view> </view>
<view class="imgs"> <view class="imgs">
@@ -47,81 +50,207 @@
</view> </view>
<!-- 立即购买 --> <!-- 立即购买 -->
<view class="footer"> <view class="footer">
<view @click="toShop(goods.shop.shop_id)" class=" shop"><uni-icons type="shop" size="26" color="grey"/>店铺</view> <view @click="toShop(goods.shop.shop_id)" class=" shop">
<uni-icons type="shop" size="26" color="grey" />店铺
</view>
<button type="default" hover-class="none" @click="buy">立即购买</button> <button type="default" hover-class="none" @click="buy">立即购买</button>
</view> </view>
<!-- 多规格弹窗 -->
<u-popup :show="skuShow" :round="10" mode="bottom" @close="close" @open="open">
<scroll-view class="skuView" scroll-y="true">
<view class="goods-info">
<image class="goods-cover" :src="selectSkusValues.cover" mode="aspectFill" />
<view class="baseInfo">
<view class="money"> {{selectSkusValues.price}}<span>DT积分</span> </view>
<view class="shop-name" v-if="goods.shop"> {{goods.shop.name}} </view>
<view class="sku-text"> 商品规格{{selectSkusValues.unit_text}} </view>
<view class="stock" v-if="selectSkusValues.stock>0"> 剩余库存{{selectSkusValues.stock}} </view>
<view class="stock" v-else> 当前商品库存不足</view>
</view>
</view>
<view class="sku" v-for="(item,index) in specs" :key="item.spec_id">
<view class="sku-title">{{item.name}}</view>
<view class="sku-list">
<block v-for="it in item.values" :keys='it.value_id'>
<view :class="['sku-item',specselect[index] == it.value_id ? 'sku-active':'']"
@click="clickSkus(index,it.value_id)">
{{it.value}}
</view>
</block>
</view>
</view>
<view class="buy-number" v-if="selectSkusValues.stock>0">
<view class="buy-title">数量</view>
<uni-number-box :min="0" :max="selectSkusValues.stock" @change="qty = $event" />
</view>
<button class="now-buy" type="default" hover-class="none" @click="buy2(selectSkusValues)">立即购买</button>
</scroll-view>
</u-popup>
</view> </view>
</template> </template>
<script> <script>
import { goods } from '@/apis/interfaces/store' import {
goods
} from '@/apis/interfaces/store'
import userAuth from '@/public/userAuth' import userAuth from '@/public/userAuth'
export default { export default {
data() { data() {
return { return {
current: 1, current: 1,
goods : { goods: {
pictures : [], pictures: [],
name : "", name: "",
description : "", description: "",
content : [], content: [],
price : { price: {
show: 0 show: 0
} }
} },
skus: [],
skuid: '',
skuShow: false,
specs: [],
unitText: '',
specselect: [],
selectSkusValues: {},
qty: 1,
}; };
}, },
mounted() { mounted() {
this.getGoods() this.getGoods()
}, },
methods:{ methods: {
getGoods(){ getGoods() {
goods(this.$Route.query.id).then(res => { let id = this.$Route.query.id
console.log(res) // let id = 61;
goods(id).then(res => {
this.goods = res this.goods = res
this.specs = res.specs
this.skus = res.skus
this.skuid = res.skus[0].sku_id
this.unitText = res.skus[0].unit_text
this.specselect = res.skus[0].unit.split('|')
this.selectSkusValues = res.skus[0]
}) })
}, },
buy(){ open() {
if(this.$store.state.token === ''){ this.skuShow = true
this.qty = 1;
},
close() {
this.skuShow = false
this.qty = 1;
// this.specselect = this.skus[0].unit.split('|')
// this.selectSkusValues = this.skus[0]
},
clickSkus(index, id) {
this.skuid = ''
this.specselect[index] = id;
let newlist = []
let str = ''
for (var i in this.specselect) {
if (i == index) {
newlist.push(id);
if (i == 0) {
str = id
} else {
str = str + '|' + id
}
} else {
newlist.push(this.specselect[i])
if (i == 0) {
str = this.specselect[i]
} else {
str = str + '|' + this.specselect[i]
}
}
}
for (var i in this.skus) {
if (this.skus[i].unit === str) {
this.selectSkusValues = this.skus[i];
break;
}
}
this.specselect = newlist
},
buy() {
if (this.$store.state.token === '') {
const Auth = new userAuth() const Auth = new userAuth()
Auth.Login() Auth.Login()
return return
} }
if (this.goods.type === 2) {
this.open();
return
}
this.goUrl();
},
buy2(value) {
let {
sku_id,
stock
} = value;
if (stock > 0) {
this.skuid = sku_id;
this.goUrl()
} else {
uni.showToast({
title: '当前商品库存不足',
icon: 'none',
mask: true,
duration: 2000
})
}
},
goUrl() {
this.$Router.push({ this.$Router.push({
name: 'StoreBuy', name: 'StoreBuy',
params: { params: {
skuId: this.goods.skus[0].sku_id skuId: this.skuid,
qty: this.qty
} }
}) })
this.close()
}, },
toShop(id){ toShop(id) {
this.$Router.push({ this.$Router.push({
name: 'ShopDetail', name: 'ShopDetail',
params: { params: {
ShopId: id ShopId: id
} }
}) })
} },
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.goods-swiper{ .goods-swiper {
position: relative; position: relative;
width: 100%; width: 100%;
padding-top: 110%; padding-top: 110%;
background: $window-color; background: $window-color;
&> swiper{
&>swiper {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
.swiper-cover{
.swiper-cover {
width: 100%; width: 100%;
height: 100%; height: 100%;
image{
image {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@@ -130,9 +259,10 @@
} }
} }
} }
.swiper-pages{
.swiper-pages {
position: absolute; position: absolute;
bottom:20rpx; bottom: 20rpx;
left: 0; left: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
@@ -143,8 +273,9 @@
text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02); text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02);
} }
} }
// 详情 // 详情
.main{ .main {
position: relative; position: relative;
z-index: 9; z-index: 9;
margin-top: -20rpx; margin-top: -20rpx;
@@ -152,12 +283,14 @@
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02); box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02);
padding-bottom: ($padding*2) + 90; padding-bottom: ($padding*2) + 90;
.hr{
.hr {
position: relative; position: relative;
min-height: 1rpx; min-height: 1rpx;
margin: 0 $margin; margin: 0 $margin;
text-align: center; text-align: center;
text{
text {
position: relative; position: relative;
z-index: 1; z-index: 1;
color: $text-gray; color: $text-gray;
@@ -165,7 +298,8 @@
background: white; background: white;
padding: 0 $padding; padding: 0 $padding;
} }
&::after{
&::after {
content: " "; content: " ";
background: $border-color; background: $border-color;
width: 100%; width: 100%;
@@ -175,49 +309,57 @@
top: 50%; top: 50%;
} }
} }
.title{
.title {
padding: $padding; padding: $padding;
font-weight: bold; font-weight: bold;
font-size: $title-size + 14; font-size: $title-size + 14;
} }
.sub-title{
.sub-title {
padding: 0 $padding; padding: 0 $padding;
font-size: $title-size-m; font-size: $title-size-m;
color: $text-gray; color: $text-gray;
} }
.box-flex{
.box-flex {
padding: $padding; padding: $padding;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.price{
.price {
font-weight: bold; font-weight: bold;
color: $text-price; color: $text-price;
font-size: $title-size + 10; font-size: $title-size + 10;
text{
text {
font-size: 60%; font-size: 60%;
margin-left: 10rpx; margin-left: 10rpx;
} }
} }
.sales{
.sales {
font-size: $title-size-m; font-size: $title-size-m;
color: $text-gray; color: $text-gray;
} }
} }
.unit{
.unit {
padding: 30rpx; padding: 30rpx;
font-size: $title-size-m; font-size: $title-size-m;
color: #333; color: #333;
border-top:solid 20rpx #f9f9f9; border-top: solid 20rpx #f9f9f9;
} }
.imgs{
image{ .imgs {
image {
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
} }
} }
.shopInfo{ .shopInfo {
border-top: solid $padding #f9f9f9; border-top: solid $padding #f9f9f9;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -225,22 +367,25 @@
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding:$padding $padding - 10; padding: $padding $padding - 10;
border-bottom: solid 10rpx #f9f9f9; border-bottom: solid 10rpx #f9f9f9;
.shopInfo-title-left{
.shopInfo-title-left {
width: 500rpx; width: 500rpx;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
box-sizing: border-box; box-sizing: border-box;
.shop-logo{
.shop-logo {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
border-radius: 10rpx; border-radius: 10rpx;
border:solid 1rpx #f9f9f9; border: solid 1rpx #f9f9f9;
} }
.shop-title{
.shop-title {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@@ -249,13 +394,14 @@
font-size: 26rpx; font-size: 26rpx;
margin-left: $margin; margin-left: $margin;
color: #999; color: #999;
width:370rpx; width: 370rpx;
.no { .no {
color: $text-price; color: $text-price;
padding-left: 4rpx; padding-left: 4rpx;
} }
.shop-titl{ .shop-titl {
font-size: 34rpx; font-size: 34rpx;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
@@ -267,7 +413,8 @@
} }
} }
} }
.shopInfo-title-right{
.shopInfo-title-right {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -280,8 +427,9 @@
} }
} }
// 购买 // 购买
.footer{ .footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
@@ -294,8 +442,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: border-box; box-sizing: border-box;
// linear-gradient(to top, white 86%, rgba(255,255,255,.0)) // linear-gradient(to top, white 86%, rgba(255,255,255,.0))
.shop{ .shop {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -304,7 +453,8 @@
font-size: 24rpx; font-size: 24rpx;
color: $text-gray; color: $text-gray;
} }
button{
button {
background: $main-color; background: $main-color;
margin-left: 60rpx; margin-left: 60rpx;
flex: 1; flex: 1;
@@ -314,9 +464,136 @@
line-height: 90rpx; line-height: 90rpx;
font-weight: bold; font-weight: bold;
font-size: $title-size; font-size: $title-size;
&::after{
&::after {
display: none; display: none;
} }
} }
} }
// 规格弹窗
.skuView {
min-height: 30vh;
max-height: 60vh;
padding: $padding + 10 $padding;
color: $text-color;
box-sizing: border-box;
// 商品信息
.goods-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
padding-bottom: 20rpx;
.goods-cover {
width: 200rpx;
height: 200rpx;
border-radius: 20rpx;
}
.baseInfo {
flex: 1;
padding-left: $padding;
box-sizing: border-box;
.money {
font-size: $title-size + 14;
font-weight: bold;
color: $text-price;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
span {
font-weight: normal;
font-size: $title-size-m - 4;
padding-left: 10rpx;
padding-top: 12rpx;
display: inline-block;
}
}
.shop-name {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba($color: $text-price, $alpha: 0.5));
display: inline-block;
padding: 4rpx 20rpx 4rpx 0;
color: #71440b;
font-size: $title-size-m - 2;
}
.sku-text {
font-size: $title-size-m - 2;
padding-top: 10rpx;
color: $text-gray;
}
.stock {
font-size: $title-size-m - 2;
padding-top: 6rpx;
color: $text-gray;
}
}
}
.buy-number {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: $padding + 20 0 $padding 0;
.buy-title {
font-size: 32rpx;
font-weight: bold;
}
}
// 规格
.sku {
.sku-title {
font-size: 32rpx;
font-weight: bold;
padding-top: 30rpx;
}
.sku-list {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
flex-wrap: wrap;
.sku-item {
padding: 10rpx 30rpx;
border: solid 1rpx #f9f9f9;
margin-right: 20rpx;
margin-top: 20rpx;
border-radius: 40rpx;
background-color: #f9f9f9;
font-size: 26rpx;
}
.sku-active {
background-color: rgba($color: $main-color, $alpha: 0.2);
color: $main-color;
font-weight: bold;
}
}
}
.now-buy {
background-color: #34ce98;
color: #fff;
border: none;
margin-top: $margin;
}
}
</style> </style>

View File

@@ -19,10 +19,13 @@
</view> </view>
<view class="order--flex" @click="$emit('onBtn', {type: 'goodsDetail', order: orderInfo})"> <view class="order--flex" @click="$emit('onBtn', {type: 'goodsDetail', order: orderInfo})">
<image class="order--cover" :src="orderInfo.cover" mode="aspectFill"></image> <image class="order--cover" :src="orderInfo.cover" mode="aspectFill"></image>
<view class="order--title">{{orderInfo.name}}</view> <view class="order--title">
{{orderInfo.name}}
<view class="unit"> {{orderInfo.unit}} </view>
</view>
<view class="order--count"> <view class="order--count">
<view class="order--price">{{orderInfo.price}}<text>DT积分</text></view> <view class="order--price">{{orderInfo.price}}<text>DT积分</text></view>
<view class="order--sum">{{orderInfo.sum}}</view> <view class="order--sum">{{orderInfo.sum}} </view>
</view> </view>
</view> </view>
</block> </block>
@@ -172,6 +175,16 @@
padding-left: $margin; padding-left: $margin;
font-size: 28rpx; font-size: 28rpx;
line-height: 40rpx; line-height: 40rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
box-sizing: border-box;
.unit{
color: #999;
font-size: 26rpx;
padding-top: 10rpx;
}
} }
.order--count{ .order--count{
text-align: right; text-align: right;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long