TmOct5/dtx_store
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

商品详情页面+可参与拼单列表

Browse Source
This commit is contained in:
张冬雪
2022-08-04 16:26:59 +08:00
parent 454ccb91c8
commit 7e8ed7115d
6 changed files with 6223 additions and 2341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
pages/store/goods.vue
View File

@@ -15,17 +15,47 @@
</view>
<!-- 详情 -->
<view class="main">
<view class="title">{{goods.name}}</view>
<view class="title"> {{goods.name}} </view>
<view class="sub-title">{{goods.description}}</view>
<view class="box-flex">
<view class="price">
{{goods.price.show}}<text>DT积分</text>
</view>
<view class="sales" v-if="goods.skus">库存量{{goods.skus[0].stock}}</view>
<view class="sales" v-if="goods.skus && !goods.is_active">库存量{{goods.skus[0].stock}}件</view>
<view class="_pin" v-if="goods.is_active">
<view class="_has" v-if="goods.active.count>0">
<image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已拼{{goods.active.count}}件
</view>
<view class="tuan">{{goods.active.number}}人团</view>
</view>
</view>
<view class="unit" v-if="goods.skus && goods.skus[0].unit !== ''" @click="open()">
<span> 规格 : {{selectSkusValues.unit_text}}</span>
<uni-icons type="right" color="#cacaca" />
<view class="unit" v-if="goods.skus && goods.skus[0].unit !== '' && !goods.is_active" @click="open()">
<span>规格:{{selectSkusValues.unit_text}}</span>
<uni-icons type="right" color="#cacaca" />
</view>
<view class="is_active" v-if="goods.is_active && actives.length>0">
<view class="title" v-if="actives.length > 2">
这些人刚刚拼单成功，可参与拼单
<span @click="getMorePin = true">查看更多
<uni-icons type="right" color="#cacaca" />
</span>
</view>
<view class="title" v-if="actives.length <= 2">
{{actives.length}}人正在拼单，可参与拼单
</view>
<view class="content">
<block v-for="(item,index) in actives" :key="index">
<view class="content-item" v-if="index < 2">
<view class="info">
<u-avatar-group :urls="item.urls" size="34" gap="0.6" class="avatar-group" />
<view class="nickname"> {{item.name}}</view>
</view>
<view class="btn">去拼单</view>
</view>
</block>
</view>
</view>
<!-- 店铺信息 -->
@@ -50,7 +80,7 @@
<view class="imgs">
<block v-for="(item, index) in goods.content" :key="index">
<image :src="item" mode="widthFix"></image>
<image :src="item" mode="widthFix" />
</block>
</view>
</view>
@@ -61,6 +91,23 @@
</view>
<button type="default" hover-class="none" @click="buy">立即购买</button>
</view>
<!-- 更多拼单弹窗 -->
<u-popup :show="getMorePin" :round="10" mode="center" @close="close" :closeable='true' zIndex="1229930">
<view class="getPinTitle"> 可参与拼单 </view>
<scroll-view scroll-y="true" class="getPinList">
<view class="content">
<block v-for="(item,index) in actives" :key="index">
<view class="content-item">
<view class="info">
<u-avatar-group :urls="item.urls" size="34" gap="0.6" class="avatar-group" />
<view class="nickname"> {{item.name}}</view>
</view>
<view class="btn">去拼单</view>
</view>
</block>
</view>
</scroll-view>
</u-popup>
<!-- 多规格弹窗 -->
<u-popup :show="skuShow" :round="10" mode="bottom" @close="close" @open="open">
@@ -126,6 +173,111 @@
specselect: [],
selectSkusValues: {},
qty: 1,
actives: [{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg'
],
name: "洛基洛基、张三张三张三张三张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
}
],
getMorePin: false,
};
},
mounted() {
@@ -133,8 +285,9 @@
},
methods: {
getGoods() {
let id = this.$Route.query.id
// let id = 61;
// let id = this.$Route.query.id
// let id = 61; // 普通商品
let id = 90; // 拼团商品
goods(id).then(res => {
this.goods = res
this.specs = res.specs
@@ -151,6 +304,7 @@
},
close() {
this.skuShow = false
this.getMorePin = false
this.qty = 1;
// this.specselect = this.skus[0].unit.split('|')
// this.selectSkusValues = this.skus[0]
@@ -321,6 +475,12 @@
padding: $padding;
font-weight: bold;
font-size: $title-size + 14;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
}
.sub-title {
@@ -350,19 +510,116 @@
font-size: $title-size-m;
color: $text-gray;
}
._pin {
font-size: 26rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
color: $text-gray;
._has {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
color: #d81e06;
background-color: rgba($color: $text-price, $alpha: 0.1);
padding: 4rpx 10rpx;
border-radius: 30rpx;
image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
}
.tuan {
margin-left: $margin;
}
}
}
.unit {
padding: 30rpx;
font-size: $title-size;
color: #333;
border-top: solid 20rpx #f9f9f9;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-top: solid 20rpx #f9f9f9;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.is_active {
border-top: solid 20rpx #f9f9f9;
.title {
font-size: 30rpx;
color: #333;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
span {
font-size: 26rpx;
color: #666;
font-weight: normal;
}
}
.content {
padding: 0 $padding;
.content-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
font-size: 28rpx;
padding-bottom: $padding - 10;
padding-top: $padding - 10;
border-bottom: solid 1rpx #f9f9f9;
.info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
overflow: hidden;
.avatar-group {
margin-right: 30rpx;
}
.nickname {
width: 300rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.btn {
background-color: $main-color;
color: white;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
}
}
.imgs {
@@ -484,6 +741,74 @@
}
}
.getPinTitle {
text-align: center;
font-size: 30rpx;
color: #333333;
font-weight: bold;
padding: $padding - 10 0;
border-bottom: solid 1rpx #f9f9f9;
position: absolute;
top: 0;
width: 100%;
background-color: #fff !important;
border-radius: 20rpx 20rpx 0 0;
z-index: 1000000000000000;
}
.getPinList {
width: 80vw;
max-height: 60vh;
color: $text-color;
position: relative;
.content {
padding: 0 $padding;
padding-top: $padding * 3;
.content-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
font-size: 28rpx;
padding-bottom: $padding - 10;
padding-top: $padding - 10;
border-bottom: solid 1rpx #f9f9f9;
.info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
overflow: hidden;
.avatar-group {
margin-right: 30rpx;
}
.nickname {
width: 240rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.btn {
background-color: $main-color;
color: white;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
}
}
// 规格弹窗
.skuView {
min-height: 30vh;