418 lines
15 KiB
Vue
418 lines
15 KiB
Vue
<template>
|
||
<view class="pin-detail">
|
||
<view class="goods">
|
||
<image class="cover" :src="goods.cover" mode="aspectFill" />
|
||
<view class="info">
|
||
<view class="title">{{goods.name}} </view>
|
||
<view class="subtitle">
|
||
<view class="hasPined" v-if="collage.sale>0">
|
||
<image src="/static/store/fire.png" mode="widthFix" />已拼{{collage.sale}}件
|
||
</view>
|
||
<view class="tuan">{{collage.number}}人团</view>
|
||
</view>
|
||
<view class="price">
|
||
<view class="now">{{goods.price}}<span>DT积分</span></view>
|
||
<view class="old"> {{goods.cost}}积分 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="pin">
|
||
<view class="title">
|
||
<block v-if="collage.down>0 && collage.status == 3">
|
||
<u-count-down :time="collage.down* 1000" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
|
||
</u-count-down>
|
||
距离结束<span>{{ timeData.days }}</span> 天
|
||
<span>{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}} </span>小时<span>{{ timeData.minutes }} </span>分钟<span>{{ timeData.seconds }} </span>秒
|
||
</block>
|
||
<block v-if="collage.status != 3">
|
||
<span>{{collage.status_text}}</span>
|
||
</block>
|
||
</view>
|
||
<view class="avatars">
|
||
<block>
|
||
<image v-for="(item,index) in users" :key='"avatar"+index+1' :class="['avatar',item.master?'pin':''] " :src="item" mode="aspectFill" />
|
||
</block>
|
||
<block v-if="collage.surplus>0">
|
||
<image v-for="(item,index) in collage.surplus" :key='"surplus"+index+2' class="wen" src="/static/book/wen.png" mode="aspectFill" />
|
||
</block>
|
||
</view>
|
||
<view class="title" v-if="collage.sale>0">已拼<span>{{collage.sale}}</span>人</view>
|
||
<view class="progress">
|
||
{{collage.number - collage.surplus}}人
|
||
<u-line-progress activeColor="#34ce98" class="line" :percentage="collage.score" :showText="false" />
|
||
{{collage.number}}人
|
||
</view>
|
||
</view>
|
||
<view class="warn" v-if="collage.status == 3 || collage.status == 2">完成支付后，需在24小时内邀请好友参加拼团，否则拼团失败，自动退款</view>
|
||
|
||
<view class="order" v-if="orderDetail.order_no != ''">
|
||
<view class="title">订单详情</view>
|
||
<view class="order-item">
|
||
<view class="order-item-title">订单编号：</view>
|
||
<view class="order-item-detail">{{orderDetail.order_no}}</view>
|
||
</view>
|
||
<view class="order-item">
|
||
<view class="order-item-title">下单时间：</view>
|
||
<view class="order-item-detail">{{orderDetail.created_at}}</view>
|
||
</view>
|
||
<view class="order-item">
|
||
<view class="order-item-title">支付时间：</view>
|
||
<view class="order-item-detail">{{orderDetail.paid_at}}</view>
|
||
</view>
|
||
<view class="order-item" v-if="collage.status == 1&& express.deliver_at">
|
||
<view class="order-item-title">发货时间：</view>
|
||
<view class="order-item-detail">{{ express.deliver_at || '--'}}</view>
|
||
</view>
|
||
<view class="order-item" v-if="collage.status == 1 && express.receive_at">
|
||
<view class="order-item-title">签收时间：</view>
|
||
<view class="order-item-detail">{{ express.receive_at || '--'}}</view>
|
||
</view>
|
||
<view class="order-item">
|
||
<view class="order-item-title">支付方式：</view>
|
||
<view class="order-item-detail">DT支付</view>
|
||
</view>
|
||
<view class="order-item">
|
||
<view class="order-item-title">备注信息：</view>
|
||
<view class="order-item-detail">{{orderDetail.remark || '--'}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btn" v-if="collage.status == 1 && can">
|
||
<view v-if="can.logistic_show" @click="onBtn('logistic')" class="btn-item"> 查看物流 </view>
|
||
<view v-if="can.sign" @click="onBtn('sign')" class="btn-item success"> 确认签收 </view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
myPinDetail
|
||
} from '@/apis/interfaces/pin.js'
|
||
import { sign } from '@/apis/interfaces/order'
|
||
export default {
|
||
data() {
|
||
return {
|
||
orderDetail: {},
|
||
goods: {},
|
||
collage: {},
|
||
users: [],
|
||
timeData: {},
|
||
express: {},
|
||
can: {}
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.getInfo()
|
||
},
|
||
methods: {
|
||
getInfo(){
|
||
myPinDetail(this.$Route.query.id).then(res => {
|
||
console.log(res)
|
||
this.orderDetail = res.order_detail;
|
||
this.goods = res.item;
|
||
let collage = res.collage;
|
||
collage.score = (res.collage.number - res.collage.surplus)/res.collage.number * 100
|
||
this.collage = collage;
|
||
this.users = res.users;
|
||
this.express = res.order_detail.express;
|
||
this.can = res.order_detail.can;
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none",
|
||
mask: true,
|
||
duration: 3000
|
||
})
|
||
})
|
||
},
|
||
onChange(e) {
|
||
this.timeData = e
|
||
},
|
||
onBtn(type) {
|
||
switch (type) {
|
||
case 'logistic':
|
||
this.$Router.push({
|
||
name: 'OrderLogistics',
|
||
params: {
|
||
orderNo: this.orderDetail.order_no,
|
||
},
|
||
});
|
||
break;
|
||
case 'sign':
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '是否确认收到货物并签收该订单',
|
||
confirmText: '确认签收',
|
||
confirmColor: "#34CE98",
|
||
cancelText: '再想想',
|
||
cancelColor: "#666666",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
sign(this.orderDetail.order_no).then(res => {
|
||
this.getInfo();
|
||
return;
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.pin-detail {
|
||
background-color: $window-color;
|
||
min-height: 100vh;
|
||
position: relative;
|
||
|
||
.goods {
|
||
padding: $padding;
|
||
border-top: solid 20rpx #f9f9f9;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
|
||
.cover {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.info {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
font-size: 32rpx;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
color: #454545;
|
||
}
|
||
|
||
.subtitle {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.hasPined {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
color: #d81e06;
|
||
background-color: rgba(255, 0, 0, .1);
|
||
padding: 4rpx 24rpx;
|
||
border-radius: 30rpx;
|
||
|
||
image {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
margin: 6rpx;
|
||
}
|
||
}
|
||
|
||
.tuan {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
|
||
.price {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
margin-left: 10rpx;
|
||
|
||
.now {
|
||
font-size: 38rpx;
|
||
font-weight: bold;
|
||
color: #d81e06;
|
||
|
||
span {
|
||
font-weight: normal;
|
||
font-size: 24rpx;
|
||
padding-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.old {
|
||
font-weight: normal;
|
||
font-size: 26rpx;
|
||
color: #999;
|
||
margin-left: 30rpx;
|
||
text-decoration: line-through;
|
||
padding-top: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pin {
|
||
margin-top: $margin - 10;
|
||
background-color: #fff;
|
||
padding: $padding;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
color: #454545;
|
||
|
||
span {
|
||
color: #d81e06;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
padding: 0 6rpx;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
color: #454545;
|
||
font-size: 28rpx;
|
||
margin-top: $margin*2 - 20;
|
||
|
||
.line {
|
||
flex: 1;
|
||
margin: 0 $margin - 10;
|
||
}
|
||
}
|
||
|
||
.avatars {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
margin-top: $margin;
|
||
|
||
image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
// padding: 20rpx;
|
||
border-radius: 50%;
|
||
margin: 10rpx 20rpx;
|
||
border: solid 2rpx #f9f9f9;
|
||
}
|
||
|
||
.pin {
|
||
position: relative;
|
||
|
||
&::after {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
content: '拼主';
|
||
background: orange;
|
||
padding: 4rpx 0;
|
||
font-size: 20rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.warn {
|
||
text-align: center;
|
||
padding: $padding - 10 $padding + 20;
|
||
color: grey;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.order {
|
||
background-color: #fff;
|
||
padding: $padding;
|
||
margin-top: 20rpx;
|
||
padding-bottom: 150rpx;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
color: #454545;
|
||
font-weight: bold;
|
||
border-bottom: solid 1rpx #f9f9f9;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.order-item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
;
|
||
box-sizing: border-box;
|
||
color: #454545;
|
||
padding: $padding 0;
|
||
border-bottom: solid 1rpx #f9f9f9;
|
||
|
||
.order-item-title {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.order-item-detail {
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
background-color: #fff;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
padding: 0 $padding + 20 $padding $padding + 20;
|
||
|
||
.btn-item {
|
||
font-size: 26rpx;
|
||
margin-left: $margin/2;
|
||
color: #333;
|
||
line-height: 56rpx;
|
||
border: solid 1rpx #ddd;
|
||
padding: 0 ($margin - 10);
|
||
border-radius: 28rpx;
|
||
display: inline-block;
|
||
margin-top: $margin;
|
||
}
|
||
|
||
.success {
|
||
color: #34CE98;
|
||
border-color: #34CE98;
|
||
}
|
||
}
|
||
}
|
||
</style>
|