237 lines
7.4 KiB
Vue
237 lines
7.4 KiB
Vue
<template>
|
||
<view class="pinSuccess">
|
||
<view class="count-down">
|
||
<u-count-down ref="countDown" :time="downTime" format="HH:mm:ss" :autoStart="true" millisecond/>
|
||
</view>
|
||
<view class="title"> 还差 <span>{{surplus}}</span> 人，赶紧邀请好友来拼单吧 </view>
|
||
<view class="btn invite"> 邀请好友拼单 </view>
|
||
<view class="btn index" @click="goIndex"> 去首页逛逛</view>
|
||
<view class="goodInfo">
|
||
<view class="avatars">
|
||
<block v-for="(item,index) in details" :key='index'>
|
||
<image class="avatar pin" :src="item.cover" mode="aspectFill" />
|
||
</block>
|
||
<image class="wen" src="/static/book/wen.png" mode="aspectFill" />
|
||
</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>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
repages
|
||
} from '@/apis/interfaces/store.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
goodName: '',
|
||
details: [],
|
||
downTime: 0,
|
||
surplus: 1,
|
||
order: {}, // order 是{} 标识不是我的订单，否则就是我的订单可以跳转订单详情
|
||
};
|
||
},
|
||
onLoad() {
|
||
console.log(this.$Route.query.id)
|
||
repages(this.$Route.query.id).then(res => {
|
||
this.order = res.order
|
||
this.goodName = res.order.goods.name
|
||
this.downTime = res.share.down * 1000
|
||
this.surplus = res.share.surplus
|
||
this.details = res.share.details
|
||
}).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: {
|
||
goIndex() {
|
||
uni.reLaunch({
|
||
url: '/pages/store/index'
|
||
})
|
||
},
|
||
goDetail(){
|
||
if(!this.order.order_no){
|
||
console.log('不是我的跳商品详情')
|
||
uni.navigateTo({
|
||
url:'/pages/store/goods?id='+this.order.goods.goods_id
|
||
})
|
||
}else{
|
||
console.log('是我的跳转订单详情')
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</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: 26rpx;
|
||
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>
|