300 lines
10 KiB
Vue
300 lines
10 KiB
Vue
<template>
|
||
<view class="pinSuccess">
|
||
<view class="count-down" v-if="downTime>0">
|
||
<u-count-down ref="countDown" :time="downTime" format="HH:mm:ss" :autoStart="true" millisecond />
|
||
</view>
|
||
<view class="title" v-if="surplus>0"> 还差 <span>{{surplus}}</span> 人，赶紧邀请好友来拼单吧 </view>
|
||
<block v-if="share.status == 3">
|
||
<view class="btn invite" v-if="!share.can_share " @click="onTake"> 参与该拼单 </view>
|
||
<view class="btn invite" v-if="share.can_share" @click="onShare"> 邀请好友拼单 </view>
|
||
</block>
|
||
<view class="btn index" @click="goIndex"> 去首页逛逛</view>
|
||
<view class="goodInfo">
|
||
<view class="avatars">
|
||
<block >
|
||
<image v-for="(item,index) in details" :key='index+1' :class="['avatar',item.master?'pin':''] " :src="item.cover" mode="aspectFill" />
|
||
</block>
|
||
<block v-if="surplus>0">
|
||
<image v-for="(item,index) in surplus" :key='index+2' class="wen" src="/static/book/wen.png" mode="aspectFill" />
|
||
</block>
|
||
</view>
|
||
<block>
|
||
<view class="orderInfo">
|
||
<view class="left"> 订单详情 </view>
|
||
<view class="right" @click="goDetail">
|
||
<view class="right-title"> {{goodName}} </view>
|
||
<u-icon name="arrow-right" />
|
||
</view>
|
||
</view>
|
||
<view class="orderInfo">
|
||
<view class="left">拼单规则</view>
|
||
<view class="right">
|
||
<view class="right-title">人满发货 · 人不满退款 · 只能拼一次 </view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<!-- 分享 -->
|
||
<uni-popup ref="popupShare" type="share" background-color="#fff">
|
||
<uni-popup-share title="立即分享到" @select="select" />
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
repages
|
||
} from '@/apis/interfaces/store.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
goodName: '',
|
||
details: [],
|
||
downTime: 0,
|
||
surplus: 0,
|
||
goods: {}, // order 是{} 标识不是我的订单，否则就是我的订单可以跳转订单详情
|
||
share:{},
|
||
access: '0', // 参与别人的1 自己的分享的0 后来想想这个接口作用不大了 ~ 闹挺 ~ 所以这个字段暂时不用，用后端返回的新字段来区分是自己的拼单还是别人的拼单；
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.access = this.$Route.query.access
|
||
repages(this.$Route.query.id,{invite:this.invite}).then(res => {
|
||
this.share = res.share
|
||
this.goods = res.goods
|
||
this.goodName = res.goods.name
|
||
this.surplus = res.share.surplus
|
||
this.details = res.share.details
|
||
this.downTime = res.share.down * 1000
|
||
uni.setNavigationBarTitle({
|
||
title:res.share.status_text
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none",
|
||
mask: true,
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
onHide() {
|
||
try {
|
||
if (this.$refs.countDown) {
|
||
this.$refs.countDown.pause()
|
||
}
|
||
} catch (err) {
|
||
uni.showToast({
|
||
title: err,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
// 参与拼单
|
||
onTake(){
|
||
console.log()
|
||
uni.navigateTo({
|
||
url: '/pages/store/goods?id=' + this.goods.goods_id+'&shareId='+this.share.collage_id ,// shareId 代表当前商品详情下面拼单有带 id
|
||
})
|
||
},
|
||
// 分享
|
||
onShare() {
|
||
this.$refs.popupShare.open();
|
||
},
|
||
|
||
// 分享选项
|
||
select(e) {
|
||
switch (e.item.name) {
|
||
case 'wxchum':
|
||
uni.share({
|
||
provider: 'weixin',
|
||
scene: 'WXSceneSession',
|
||
type: 0,
|
||
href: this.share.url + this.share.collage_id+'invitation'+this.share.invite.invite,
|
||
title: '【仅剩' + this.surplus +'个名额】邀请您一起拼团',
|
||
summary: '好货不用一分钱，点点就能带回家【 ' + this.goods.name + '】',
|
||
imageUrl: this.goods.cover,
|
||
fail(err) {
|
||
uni.showToast({
|
||
title: err.errMsg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
break;
|
||
case 'wxcircle':
|
||
uni.share({
|
||
provider: 'weixin',
|
||
scene: 'WXSceneTimeline',
|
||
type: 0,
|
||
href: this.share.url + this.share.collage_id+'invitation'+this.share.invite.invite,
|
||
summary: '好货不用一分钱，点点就能带回家【 ' + this.goods.name + '】',
|
||
imageUrl: this.goods.cover,
|
||
fail(err) {
|
||
uni.showToast({
|
||
title: err.errMsg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
break;
|
||
}
|
||
},
|
||
|
||
// 返回首页
|
||
goIndex() {
|
||
uni.reLaunch({
|
||
url: '/pages/store/index'
|
||
})
|
||
},
|
||
// 商品详情
|
||
goDetail() {
|
||
uni.navigateTo({
|
||
url: '/pages/store/goods?id=' + this.goods.goods_id
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.pinSuccess {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
|
||
.count-down {
|
||
background-color: #f9f9f9;
|
||
border-radius: 4rpx;
|
||
padding: 10rpx $padding;
|
||
margin-top: $margin;
|
||
}
|
||
|
||
.title {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
margin-top: $margin * 2;
|
||
|
||
span {
|
||
color: $main-color;
|
||
font-size: 42rpx;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
width: 80%;
|
||
background-color: $main-color;
|
||
color: #fff;
|
||
text-align: center;
|
||
padding: $padding - 4;
|
||
font-size: 34rpx;
|
||
border-radius: 10rpx;
|
||
margin-top: $margin;
|
||
border: solid $main-color 3rpx;
|
||
}
|
||
|
||
.invite {
|
||
margin-top: $margin + 20;
|
||
}
|
||
|
||
.index {
|
||
background-color: rgba($color: #fff, $alpha: 1.0);
|
||
color: $main-color;
|
||
}
|
||
|
||
.goodInfo {
|
||
border-top: solid 20rpx #f9f9f9;
|
||
width: 100%;
|
||
margin-top: $margin + 20;
|
||
padding: $padding + 10;
|
||
box-sizing: border-box;
|
||
|
||
.avatars {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
border-bottom: solid 1rpx #f9f9f9;
|
||
padding-bottom: $padding;
|
||
|
||
image {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
border-radius: 50%;
|
||
margin: 10rpx 20rpx;
|
||
border: solid 2rpx #f9f9f9;
|
||
}
|
||
|
||
.me {
|
||
position: relative;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
content: '我';
|
||
border-radius: 20rpx;
|
||
background: $main-color;
|
||
padding: 4rpx 34rpx;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.pin {
|
||
position: relative;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
content: '拼主';
|
||
// border-radius: 20rpx;
|
||
background: orange;
|
||
padding: 4rpx 0;
|
||
font-size: 20rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.orderInfo {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 0;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
border-bottom: solid 1rpx #f9f9f9;
|
||
|
||
.right {
|
||
flex: 1;
|
||
margin-left: $margin;
|
||
text-align: right;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
|
||
.right-title {
|
||
margin-right: 10rpx;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|