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>
|