多规格增加

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

@@ -100,7 +100,7 @@
orders({ orders({
state: this.tabs[this.index].type, state: this.tabs[this.index].type,
page: this.page page: this.page
}).then(res => { }).then(res => {
if (res.page.current === 1) { if (res.page.current === 1) {
this.array = [] this.array = []
} }
@@ -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

@@ -8,7 +8,8 @@
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" /> <image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
<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>
@@ -182,6 +183,11 @@
font-size: 26rpx; font-size: 26rpx;
padding-top: 6rpx; padding-top: 6rpx;
// @extend .ellipsis-1; // @extend .ellipsis-1;
}
&>.unit{
color:#999;
font-size: 26rpx;
padding-top: 10rpx;
} }
&>.price { &>.price {
@@ -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

@@ -16,7 +16,10 @@
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" /> <image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
<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>
@@ -318,6 +321,11 @@
font-size: 26rpx; font-size: 26rpx;
padding-top: 6rpx; padding-top: 6rpx;
// @extend .ellipsis-1; // @extend .ellipsis-1;
}
.unit{
color:#999;
font-size: 26rpx;
padding-top: 10rpx;
} }
&>.price { &>.price {

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>
@@ -85,7 +91,7 @@
getOrder() { getOrder() {
refunds({ refunds({
page: this.page page: this.page
}).then(res => { }).then(res => {
if (res.page.current === 1) { if (res.page.current === 1) {
this.array = [] this.array = []
} }
@@ -234,6 +240,11 @@
padding-left: $margin; padding-left: $margin;
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 {

View File

@@ -5,21 +5,24 @@
<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>
</view> </view>
</view> </view>
<view class="total"> <view class="total">
<view class="total-item grey"> <view class="total-item grey">
申请金额<text>{{refund_total || '0.00'}} DT</text> 申请金额<text>{{refund_total || '0.00'}} DT</text>
</view> </view>
<view class="total-item"> <view class="total-item">
合计退款<text>{{refund_total|| '0.00'}} DT</text> 合计退款<text>{{refund_total|| '0.00'}} DT</text>
</view> </view>
</view> </view>
<view class="logistics--logs"> <view class="logistics--logs">
<block v-for="(log, logIndex) in logs" :key="logIndex"> <block v-for="(log, logIndex) in logs" :key="logIndex">
<view class="item"> <view class="item">
@@ -39,14 +42,14 @@
data() { data() {
return { return {
logs: [], logs: [],
goodsInfo: {}, goodsInfo: {},
refund_total:'' refund_total: ''
} }
}, },
onLoad() { onLoad() {
refundsLogs(this.$Route.query.id).then(res => { refundsLogs(this.$Route.query.id).then(res => {
this.logs = res.logs this.logs = res.logs
this.goodsInfo = res.refund.items[0] this.goodsInfo = res.refund.items[0]
this.refund_total = res.refund.refund_total this.refund_total = res.refund.refund_total
}).catch(err => { }).catch(err => {
uni.showToast({ uni.showToast({
@@ -76,8 +79,8 @@
$radius: 10rpx; $radius: 10rpx;
.RefundHistory { .RefundHistory {
padding: $padding; padding: $padding;
min-height: 100vh; min-height: 100vh;
background-color: #f9f9f9; background-color: #f9f9f9;
} }
@@ -124,8 +127,8 @@
border-radius: $radius $radius 0 0; border-radius: $radius $radius 0 0;
z-index: 9; z-index: 9;
padding: $margin; padding: $margin;
overflow: hidden; overflow: hidden;
margin-top: 30rpx; margin-top: 30rpx;
min-height: 50vh; min-height: 50vh;
.item { .item {
@@ -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;
@@ -250,31 +259,31 @@
} }
} }
} }
.total { .total {
background-color: #fff; background-color: #fff;
padding: 0 $padding $padding $padding; padding: 0 $padding $padding $padding;
border-top: solid 2rpx #f9f9f9; border-top: solid 2rpx #f9f9f9;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333;
.total-item { .total-item {
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding-top: $padding; padding-top: $padding;
text { text {
font-size: 32rpx; font-size: 32rpx;
} }
} }
.grey { .grey {
color: #666; color: #666;
} }
} }
</style> </style>

View File

@@ -8,7 +8,10 @@
<image :src="goodsInfo.cover" mode="aspectFill" class="good-img" /> <image :src="goodsInfo.cover" mode="aspectFill" class="good-img" />
<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>
@@ -242,6 +245,11 @@
font-size: 26rpx; font-size: 26rpx;
padding-top: 6rpx; padding-top: 6rpx;
// @extend .ellipsis-1; // @extend .ellipsis-1;
}
&>.unit{
color:#999;
font-size: 26rpx;
padding-top: 10rpx;
} }
&>.price { &>.price {

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

@@ -1,322 +1,599 @@
<template> <template>
<view> <view>
<!-- 产品封面 --> <!-- 产品封面 -->
<view class="goods-swiper"> <view class="goods-swiper">
<swiper :indicator-dots="false" @change="current = $event.detail.current + 1"> <swiper :indicator-dots="false" @change="current = $event.detail.current + 1">
<swiper-item v-for="(item, index) in goods.pictures" :key="index"> <swiper-item v-for="(item, index) in goods.pictures" :key="index">
<view class="swiper-cover"> <view class="swiper-cover">
<image :src="item" mode="aspectFill" /> <image :src="item" mode="aspectFill" />
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="swiper-pages"> <view class="swiper-pages">
{{current}}/{{goods.pictures.length}} {{current}}/{{goods.pictures.length}}
</view> </view>
</view> </view>
<!-- 详情 --> <!-- 详情 -->
<view class="main"> <view class="main">
<view class="title">{{goods.name}}</view> <view class="title">{{goods.name}}</view>
<view class="sub-title">{{goods.description}}</view> <view class="sub-title">{{goods.description}}</view>
<view class="box-flex"> <view class="box-flex">
<view class="price"> <view class="price">
{{goods.price.show}}<text>DT积分</text> {{goods.price.show}}<text>DT积分</text>
</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>
<!-- 店铺信息 --> <!-- 店铺信息 -->
<view class="shopInfo" @click="toShop(goods.shop.shop_id)" v-if="goods.shop"> <view class="shopInfo" @click="toShop(goods.shop.shop_id)" v-if="goods.shop">
<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
</view> class='no'>5.0</span></text> </view>
</view> </view>
<view class="shopInfo-title-right" >全部商品 {{goods.shop.goods_count || 0}} <uni-icons type="right" color="grey"/></view> </view>
</view> <view class="shopInfo-title-right">全部商品 {{goods.shop.goods_count || 0}}
<uni-icons type="right" color="grey" />
<view class="imgs"> </view>
<block v-for="(item, index) in goods.content" :key="index"> </view>
<image :src="item" mode="widthFix"></image>
</block> <view class="imgs">
</view> <block v-for="(item, index) in goods.content" :key="index">
</view> <image :src="item" mode="widthFix"></image>
<!-- 立即购买 --> </block>
<view class="footer"> </view>
<view @click="toShop(goods.shop.shop_id)" class=" shop"><uni-icons type="shop" size="26" color="grey"/>店铺</view> </view>
<button type="default" hover-class="none" @click="buy">立即购买</button> <!-- 立即购买 -->
</view> <view class="footer">
</view> <view @click="toShop(goods.shop.shop_id)" class=" shop">
</template> <uni-icons type="shop" size="26" color="grey" />店铺
</view>
<script> <button type="default" hover-class="none" @click="buy">立即购买</button>
import { goods } from '@/apis/interfaces/store' </view>
import userAuth from '@/public/userAuth'
export default { <!-- 多规格弹窗 -->
data() { <u-popup :show="skuShow" :round="10" mode="bottom" @close="close" @open="open">
return { <scroll-view class="skuView" scroll-y="true">
current: 1, <view class="goods-info">
goods : { <image class="goods-cover" :src="selectSkusValues.cover" mode="aspectFill" />
pictures : [], <view class="baseInfo">
name : "", <view class="money"> {{selectSkusValues.price}}<span>DT积分</span> </view>
description : "", <view class="shop-name" v-if="goods.shop"> {{goods.shop.name}} </view>
content : [], <view class="sku-text"> 商品规格{{selectSkusValues.unit_text}} </view>
price : { <view class="stock" v-if="selectSkusValues.stock>0"> 剩余库存{{selectSkusValues.stock}} </view>
show: 0 <view class="stock" v-else> 当前商品库存不足</view>
} </view>
} </view>
};
}, <view class="sku" v-for="(item,index) in specs" :key="item.spec_id">
mounted() { <view class="sku-title">{{item.name}}</view>
this.getGoods() <view class="sku-list">
}, <block v-for="it in item.values" :keys='it.value_id'>
methods:{ <view :class="['sku-item',specselect[index] == it.value_id ? 'sku-active':'']"
getGoods(){ @click="clickSkus(index,it.value_id)">
goods(this.$Route.query.id).then(res => { {{it.value}}
console.log(res) </view>
this.goods = res </block>
}) </view>
}, </view>
buy(){
if(this.$store.state.token === ''){ <view class="buy-number" v-if="selectSkusValues.stock>0">
const Auth = new userAuth() <view class="buy-title">数量</view>
Auth.Login() <uni-number-box :min="0" :max="selectSkusValues.stock" @change="qty = $event" />
return </view>
}
this.$Router.push({ <button class="now-buy" type="default" hover-class="none" @click="buy2(selectSkusValues)">立即购买</button>
name: 'StoreBuy', </scroll-view>
params: { </u-popup>
skuId: this.goods.skus[0].sku_id </view>
} </template>
})
}, <script>
toShop(id){ import {
this.$Router.push({ goods
name: 'ShopDetail', } from '@/apis/interfaces/store'
params: { import userAuth from '@/public/userAuth'
ShopId: id export default {
} data() {
}) return {
} current: 1,
} goods: {
} pictures: [],
</script> name: "",
description: "",
<style lang="scss"> content: [],
.goods-swiper{ price: {
position: relative; show: 0
width: 100%; }
padding-top: 110%; },
background: $window-color; skus: [],
&> swiper{ skuid: '',
position: absolute; skuShow: false,
top: 0; specs: [],
left: 0; unitText: '',
width: 100%; specselect: [],
height: 100%; selectSkusValues: {},
.swiper-cover{ qty: 1,
width: 100%; };
height: 100%; },
image{ mounted() {
position: absolute; this.getGoods()
top: 0; },
left: 0; methods: {
width: 100%; getGoods() {
height: 100%; let id = this.$Route.query.id
} // let id = 61;
} goods(id).then(res => {
} this.goods = res
.swiper-pages{ this.specs = res.specs
position: absolute; this.skus = res.skus
bottom:20rpx; this.skuid = res.skus[0].sku_id
left: 0; this.unitText = res.skus[0].unit_text
right: 0; this.specselect = res.skus[0].unit.split('|')
z-index: 9; this.selectSkusValues = res.skus[0]
line-height: 90rpx; })
text-align: center; },
color: white; open() {
font-size: $title-size-m; this.skuShow = true
text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02); this.qty = 1;
} },
} close() {
// 详情 this.skuShow = false
.main{ this.qty = 1;
position: relative; // this.specselect = this.skus[0].unit.split('|')
z-index: 9; // this.selectSkusValues = this.skus[0]
margin-top: -20rpx; },
background: white; clickSkus(index, id) {
border-radius: $radius $radius 0 0; this.skuid = ''
box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02); this.specselect[index] = id;
padding-bottom: ($padding*2) + 90; let newlist = []
.hr{ let str = ''
position: relative; for (var i in this.specselect) {
min-height: 1rpx; if (i == index) {
margin: 0 $margin; newlist.push(id);
text-align: center; if (i == 0) {
text{ str = id
position: relative; } else {
z-index: 1; str = str + '|' + id
color: $text-gray; }
font-size: $title-size-m; } else {
background: white; newlist.push(this.specselect[i])
padding: 0 $padding; if (i == 0) {
} str = this.specselect[i]
&::after{ } else {
content: " "; str = str + '|' + this.specselect[i]
background: $border-color; }
width: 100%; }
height: 1rpx;
position: absolute; }
left: 0; for (var i in this.skus) {
top: 50%; if (this.skus[i].unit === str) {
} this.selectSkusValues = this.skus[i];
} break;
.title{ }
padding: $padding; }
font-weight: bold; this.specselect = newlist
font-size: $title-size + 14; },
}
.sub-title{ buy() {
padding: 0 $padding; if (this.$store.state.token === '') {
font-size: $title-size-m; const Auth = new userAuth()
color: $text-gray; Auth.Login()
} return
.box-flex{ }
padding: $padding; if (this.goods.type === 2) {
display: flex; this.open();
justify-content: space-between; return
align-items: center; }
.price{ this.goUrl();
font-weight: bold;
color: $text-price; },
font-size: $title-size + 10; buy2(value) {
text{ let {
font-size: 60%; sku_id,
margin-left: 10rpx; stock
} } = value;
} if (stock > 0) {
.sales{ this.skuid = sku_id;
font-size: $title-size-m; this.goUrl()
color: $text-gray; } else {
} uni.showToast({
} title: '当前商品库存不足',
.unit{ icon: 'none',
padding: 30rpx; mask: true,
font-size: $title-size-m; duration: 2000
color: #333; })
border-top:solid 20rpx #f9f9f9; }
} },
.imgs{ goUrl() {
image{ this.$Router.push({
vertical-align: top; name: 'StoreBuy',
width: 100%; params: {
} skuId: this.skuid,
} qty: this.qty
}
.shopInfo{ })
border-top: solid $padding #f9f9f9; this.close()
display: flex; },
flex-direction: row; toShop(id) {
align-items: center; this.$Router.push({
justify-content: space-between; name: 'ShopDetail',
box-sizing: border-box; params: {
width: 100%; ShopId: id
padding:$padding $padding - 10; }
border-bottom: solid 10rpx #f9f9f9; })
.shopInfo-title-left{ },
width: 500rpx; }
display: flex; }
flex-direction: row; </script>
align-items: center;
justify-content: flex-start; <style lang="scss">
box-sizing: border-box; .goods-swiper {
.shop-logo{ position: relative;
width: 100rpx; width: 100%;
height: 100rpx; padding-top: 110%;
border-radius: 10rpx; background: $window-color;
border:solid 1rpx #f9f9f9;
} &>swiper {
.shop-title{ position: absolute;
display: flex; top: 0;
flex-direction: column; left: 0;
align-items: flex-start; width: 100%;
justify-content: flex-start; height: 100%;
box-sizing: border-box;
font-size: 26rpx; .swiper-cover {
margin-left: $margin; width: 100%;
color: #999; height: 100%;
width:370rpx;
.no { image {
color: $text-price; position: absolute;
padding-left: 4rpx; top: 0;
} left: 0;
width: 100%;
.shop-titl{ height: 100%;
font-size: 34rpx; }
color: #333; }
font-weight: bold; }
margin-bottom: 6rpx;
overflow: hidden; .swiper-pages {
white-space: nowrap; position: absolute;
text-overflow: ellipsis; bottom: 20rpx;
width: 100%; left: 0;
} right: 0;
} z-index: 9;
} line-height: 90rpx;
.shopInfo-title-right{ text-align: center;
display: flex; color: white;
flex-direction: row; font-size: $title-size-m;
align-items: center; text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02);
justify-content: center; }
box-sizing: border-box; }
font-size: 26rpx;
color: #222; // 详情
} .main {
position: relative;
} z-index: 9;
margin-top: -20rpx;
} background: white;
// 购买 border-radius: $radius $radius 0 0;
.footer{ box-shadow: 0 0 10rpx 10rpx rgba($color: #000000, $alpha: .02);
position: fixed; padding-bottom: ($padding*2) + 90;
bottom: 0;
left: 0; .hr {
right: 0; position: relative;
padding: $padding; min-height: 1rpx;
z-index: 98; margin: 0 $margin;
background: white; text-align: center;
display: flex;
flex-direction: row; text {
align-items: center; position: relative;
justify-content: center; z-index: 1;
box-sizing: border-box; color: $text-gray;
// linear-gradient(to top, white 86%, rgba(255,255,255,.0)) font-size: $title-size-m;
.shop{ background: white;
display: flex; padding: 0 $padding;
flex-direction: column; }
align-items: center;
justify-content: center; &::after {
box-sizing: border-box; content: " ";
font-size: 24rpx; background: $border-color;
color: $text-gray; width: 100%;
} height: 1rpx;
button{ position: absolute;
background: $main-color; left: 0;
margin-left: 60rpx; top: 50%;
flex: 1; }
color: white; }
border-radius: $radius-lg;
height: 90rpx; .title {
line-height: 90rpx; padding: $padding;
font-weight: bold; font-weight: bold;
font-size: $title-size; font-size: $title-size + 14;
&::after{ }
display: none;
} .sub-title {
} padding: 0 $padding;
} font-size: $title-size-m;
color: $text-gray;
}
.box-flex {
padding: $padding;
display: flex;
justify-content: space-between;
align-items: center;
.price {
font-weight: bold;
color: $text-price;
font-size: $title-size + 10;
text {
font-size: 60%;
margin-left: 10rpx;
}
}
.sales {
font-size: $title-size-m;
color: $text-gray;
}
}
.unit {
padding: 30rpx;
font-size: $title-size-m;
color: #333;
border-top: solid 20rpx #f9f9f9;
}
.imgs {
image {
vertical-align: top;
width: 100%;
}
}
.shopInfo {
border-top: solid $padding #f9f9f9;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
padding: $padding $padding - 10;
border-bottom: solid 10rpx #f9f9f9;
.shopInfo-title-left {
width: 500rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
.shop-logo {
width: 100rpx;
height: 100rpx;
border-radius: 10rpx;
border: solid 1rpx #f9f9f9;
}
.shop-title {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
font-size: 26rpx;
margin-left: $margin;
color: #999;
width: 370rpx;
.no {
color: $text-price;
padding-left: 4rpx;
}
.shop-titl {
font-size: 34rpx;
color: #333;
font-weight: bold;
margin-bottom: 6rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
}
}
.shopInfo-title-right {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 26rpx;
color: #222;
}
}
}
// 购买
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding;
z-index: 98;
background: white;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
// linear-gradient(to top, white 86%, rgba(255,255,255,.0))
.shop {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 24rpx;
color: $text-gray;
}
button {
background: $main-color;
margin-left: 60rpx;
flex: 1;
color: white;
border-radius: $radius-lg;
height: 90rpx;
line-height: 90rpx;
font-weight: bold;
font-size: $title-size;
&::after {
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