558 lines
13 KiB
Vue
558 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<navBar
|
|||
|
|
:navTitle="seriesName"
|
|||
|
|
:stickyShow="stickyShow"
|
|||
|
|
:color="'#000000'"
|
|||
|
|
:backBackGroundColor="'#699A70'"
|
|||
|
|
>
|
|||
|
|
</navBar>
|
|||
|
|
<view class="top-img">
|
|||
|
|
<image :src="collectionImg"></image>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view
|
|||
|
|
class=""
|
|||
|
|
style="margin: auto; width: 500rpx"
|
|||
|
|
v-if="physical && status === 2"
|
|||
|
|
>
|
|||
|
|
<u-button
|
|||
|
|
type="primary"
|
|||
|
|
:text="$t('apply.logistics')"
|
|||
|
|
class="apply"
|
|||
|
|
@click="apply"
|
|||
|
|
></u-button>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-box">
|
|||
|
|
<view class="title">{{ $t("logistics.info") }}</view>
|
|||
|
|
<view class="address-box">
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("telephone") }}</text>
|
|||
|
|
<text class="value" @click="goPhone">(852) 5491 1547</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="address-box" v-if="status > 3">
|
|||
|
|
<view class="item bm">
|
|||
|
|
<text class="label">{{ $t("consignee.name") }}</text>
|
|||
|
|
<text class="value">{{ express.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item bm">
|
|||
|
|
<text class="label">{{ $t("consignee.address") }}</text>
|
|||
|
|
<text class="value">{{ express.address }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("consignee.phone") }}</text>
|
|||
|
|
<text class="value">{{ express.telNum }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="info-box">
|
|||
|
|
<view class="title">{{ $t("realHashTitle") }}</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("realHash") }}</text>
|
|||
|
|
<text class="value">{{ realHash }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="info-box">
|
|||
|
|
<view class="title">{{ $t("release.info") }}</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("series.issuer") }}</text>
|
|||
|
|
<text class="value">{{ detail.publisher || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("release.time") }}</text>
|
|||
|
|
<text class="value">{{ detail.published_time || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("brand.side") }}</text>
|
|||
|
|
<text class="value">{{ detail.brand_name || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("series.hash") }}</text>
|
|||
|
|
<text class="value">{{ detail.brand_hash || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-box">
|
|||
|
|
<view class="title">{{ $t("circulation.info") }}</view>
|
|||
|
|
<view class="detail">
|
|||
|
|
<view class="item" v-for="(item, index) in flows" :key="index">
|
|||
|
|
<view class="left">
|
|||
|
|
{{ item.createdAt }}
|
|||
|
|
<!-- <view class="" style="font-size: 10rpx;">
|
|||
|
|
星期二 下午 5:07
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="cricle2" v-if="item.status === 1"></view>
|
|||
|
|
<view class="cricle" v-else></view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("possessor") }}</text>
|
|||
|
|
<text class="value">{{ item.holdName || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("collection.status") }}</text>
|
|||
|
|
<text class="value">{{
|
|||
|
|
item.status == 1 ? $t("in.library") : $t("been.applied")
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("circulation.type") }}</text>
|
|||
|
|
<text class="value">{{
|
|||
|
|
item.type == 1 ? $t("on.line") : "-"
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<text class="label">{{ $t("circulation.time") }}</text>
|
|||
|
|
<text class="value">{{ item.createdAt || "-" }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="item" v-if="item.flowHash">
|
|||
|
|
<text class="label">{{ $t("transaction.hash") }}</text>
|
|||
|
|
<text class="value" style="font-size: 24rpx">{{
|
|||
|
|
item.flowHash || "-"
|
|||
|
|
}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="text-align: center; margin-top: 30rpx">
|
|||
|
|
<image src="@/static/image/home/fontree.png" mode="" class="logo"></image>
|
|||
|
|
</view>
|
|||
|
|
<u-popup
|
|||
|
|
:show="showApply"
|
|||
|
|
mode="center"
|
|||
|
|
@close="closeApply"
|
|||
|
|
bgColor="transparent"
|
|||
|
|
>
|
|||
|
|
<view class="popup-top"> *{{ $t("apply.tips") }} </view>
|
|||
|
|
<view class="popup-box">
|
|||
|
|
<view class="title">{{ $t("input.address") }}</view>
|
|||
|
|
<view class="">
|
|||
|
|
<view class="input-box">
|
|||
|
|
<view class="label">{{ $t("consignee.name") }}</view>
|
|||
|
|
<view class="input">
|
|||
|
|
<u--input
|
|||
|
|
border="none"
|
|||
|
|
shape="circle"
|
|||
|
|
v-model="name"
|
|||
|
|
:placeholder="$t('input.pla')"
|
|||
|
|
></u--input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="input-box">
|
|||
|
|
<view class="label">{{ $t("consignee.address") }}</view>
|
|||
|
|
<view class="input">
|
|||
|
|
<u--textarea
|
|||
|
|
v-model="address"
|
|||
|
|
border="none"
|
|||
|
|
:placeholder="$t('input.pla')"
|
|||
|
|
autoHeight
|
|||
|
|
></u--textarea>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="input-box">
|
|||
|
|
<view class="label">{{ $t("consignee.phone") }}</view>
|
|||
|
|
<view class="input">
|
|||
|
|
<u--input
|
|||
|
|
border="none"
|
|||
|
|
shape="circle"
|
|||
|
|
v-model="telNum"
|
|||
|
|
:placeholder="$t('input.pla')"
|
|||
|
|
></u--input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btns">
|
|||
|
|
<u-button
|
|||
|
|
:text="$t('navbar.back')"
|
|||
|
|
color="#EDC466"
|
|||
|
|
@click="closeApply"
|
|||
|
|
style="width: 260rpx; height: 56rpx; border-radius: 40rpx"
|
|||
|
|
></u-button>
|
|||
|
|
<u-button
|
|||
|
|
:text="$t('apply.btn')"
|
|||
|
|
color="#699A70"
|
|||
|
|
@click="applyCom"
|
|||
|
|
style="width: 260rpx; height: 56rpx; border-radius: 40rpx"
|
|||
|
|
></u-button>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
stickyShow: false,
|
|||
|
|
showApply: false,
|
|||
|
|
address: "",
|
|||
|
|
name: "",
|
|||
|
|
telNum: "",
|
|||
|
|
CollectionsUID: "",
|
|||
|
|
express: {},
|
|||
|
|
flows: [],
|
|||
|
|
detail: {},
|
|||
|
|
seriesName: "",
|
|||
|
|
collectionImg: "",
|
|||
|
|
ID: "",
|
|||
|
|
status: "",
|
|||
|
|
realHash: "",
|
|||
|
|
physical: "",
|
|||
|
|
//订单状态(1-待支付 2-成功 3-失败，4-已申请快递，5后台批准快递 6-退款)
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onPageScroll(e) {
|
|||
|
|
this.stickyShow = e.scrollTop > 5 ? true : false;
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
console.log(11111111, this.flows);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
apply() {
|
|||
|
|
this.showApply = true;
|
|||
|
|
},
|
|||
|
|
closeApply() {
|
|||
|
|
this.showApply = false;
|
|||
|
|
this.name = "";
|
|||
|
|
this.address = "";
|
|||
|
|
this.telNum = "";
|
|||
|
|
},
|
|||
|
|
async applyCom() {
|
|||
|
|
let name = this.$common.vefEmpty(
|
|||
|
|
this.name,
|
|||
|
|
this.$t("error.consignee.name")
|
|||
|
|
);
|
|||
|
|
let address = this.$common.vefEmpty(
|
|||
|
|
this.address,
|
|||
|
|
this.$t("error.consignee.address")
|
|||
|
|
);
|
|||
|
|
let telNum = this.$common.vefEmpty(
|
|||
|
|
this.telNum,
|
|||
|
|
this.$t("error.consignee.phone")
|
|||
|
|
);
|
|||
|
|
if (!name || !address || !telNum) return;
|
|||
|
|
let data = {
|
|||
|
|
ID: Number(this.ID),
|
|||
|
|
express: {
|
|||
|
|
address: this.address,
|
|||
|
|
name: this.name,
|
|||
|
|
telNum: this.telNum,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
let res = await this.$api.mine.paymentApproval(data);
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
uni.$u.toast(this.$t("apply.succes"));
|
|||
|
|
this.status = 4;
|
|||
|
|
this.express = res.data.express;
|
|||
|
|
this.flows = res.data.flows;
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(this.$t("apply.error"));
|
|||
|
|
}
|
|||
|
|
this.showApply = false;
|
|||
|
|
this.name = "";
|
|||
|
|
this.address = "";
|
|||
|
|
this.telNum = "";
|
|||
|
|
},
|
|||
|
|
goPhone(val) {
|
|||
|
|
// 拨打电话
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: val,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
async getDetail() {
|
|||
|
|
let data = {
|
|||
|
|
CollectionsUID: this.CollectionsUID,
|
|||
|
|
};
|
|||
|
|
let res = await this.$api.mine.certDetail(data);
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
this.detail = res.data;
|
|||
|
|
} else {
|
|||
|
|
uni.$u.toast(this.$t("load.failed"));
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
const item = JSON.parse(decodeURIComponent(option.data));
|
|||
|
|
this.CollectionsUID = item.CollectionsUID;
|
|||
|
|
this.physical = item.physical;
|
|||
|
|
this.ID = item.payDetail.ID;
|
|||
|
|
this.express = item.payDetail.express;
|
|||
|
|
this.flows = item.payDetail.flows;
|
|||
|
|
this.status = item.payDetail.status;
|
|||
|
|
this.realHash = item.payDetail.realHash;
|
|||
|
|
this.collectionImg = item.collectionImg;
|
|||
|
|
console.log(this.collectionImg);
|
|||
|
|
this.seriesName = item.seriesName;
|
|||
|
|
this.getDetail();
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
page {
|
|||
|
|
background: url("@/static/image/home/detail-kind-bg.png") no-repeat;
|
|||
|
|
// background-size: 100% 100%;
|
|||
|
|
// background-attachment:fixed;
|
|||
|
|
// height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-img {
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: contain;
|
|||
|
|
width: 660rpx;
|
|||
|
|
height: 660rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
margin: 44rpx 44rpx 32rpx 46rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.apply {
|
|||
|
|
width: 500rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 40rpx !important;
|
|||
|
|
// background: #558BF2;
|
|||
|
|
background: #699a70;
|
|||
|
|
border-color: #699a70;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box {
|
|||
|
|
margin: 0 44rpx 0 46rpx;
|
|||
|
|
margin-bottom: 46rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
// padding: 38rpx 32rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
color: #434343;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
// background: rgba(255,255,255,0.3);
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
margin: 32rpx 0;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #434343;
|
|||
|
|
padding-right: 40rpx;
|
|||
|
|
width: 130rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
color: #878787;
|
|||
|
|
width: 450rpx;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
overflow: hidden;
|
|||
|
|
word-break: break-all;
|
|||
|
|
white-space: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.address-box {
|
|||
|
|
// background: rgba(255,255,255,0.3);
|
|||
|
|
background: #ffffff;
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
|
|||
|
|
.bm {
|
|||
|
|
border-bottom: 1px solid #dedede;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin: 15rpx 0;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
padding-right: 40rpx;
|
|||
|
|
width: 150rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #434343;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
text-align: right;
|
|||
|
|
width: 400rpx;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
overflow: hidden;
|
|||
|
|
word-break: break-all;
|
|||
|
|
white-space: normal;
|
|||
|
|
color: #878787;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detail {
|
|||
|
|
// background: rgba(255,255,255,0.3);
|
|||
|
|
padding: 24rpx 32rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.left {
|
|||
|
|
font-size: 16rpx;
|
|||
|
|
padding-right: 30rpx;
|
|||
|
|
color: #434343;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right {
|
|||
|
|
border-left: 1rpx solid #464646;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: #434343;
|
|||
|
|
padding-right: 20rpx;
|
|||
|
|
width: 130rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
color: #434343;
|
|||
|
|
width: 260rpx;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
overflow: hidden;
|
|||
|
|
word-break: break-all;
|
|||
|
|
white-space: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cricle {
|
|||
|
|
width: 22rpx;
|
|||
|
|
height: 22rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: -14rpx;
|
|||
|
|
background: #e4e4e4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cricle2 {
|
|||
|
|
width: 21rpx;
|
|||
|
|
height: 21rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: -13rpx;
|
|||
|
|
background: #699a70;
|
|||
|
|
border: 1px solid #699a70;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
width: 202rpx;
|
|||
|
|
height: 56rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-box {
|
|||
|
|
background: rgba(0, 0, 0, 0.8);
|
|||
|
|
width: 582rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 30rpx 0;
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
margin-bottom: 100rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
// align-items: center;
|
|||
|
|
padding: 0 34rpx 34rpx 38rpx;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input {
|
|||
|
|
width: 340rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
/deep/ .input-placeholder {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .uni-input-input {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #fff;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .u-textarea {
|
|||
|
|
background: transparent;
|
|||
|
|
width: 340rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/deep/ .u-textarea__field {
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btns {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup-top {
|
|||
|
|
width: 582rpx;
|
|||
|
|
padding: 22rpx 0;
|
|||
|
|
background: rgba(255, 255, 255, 0.3);
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|