|
|
@@ -0,0 +1,278 @@
|
|
|
+<template>
|
|
|
+ <div class="order">
|
|
|
+ <div class="order-content">
|
|
|
+ <div class="order-top">
|
|
|
+ <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
|
|
|
+ <div class="text2">
|
|
|
+ {{ getLabelName(info.status, statusOptions, 'text') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <driver />
|
|
|
+ <template v-if="info.contactName">
|
|
|
+ <div class="address" v-if="info.courierId">
|
|
|
+ <img src="../../assets/dingdan_icon_wuliu.png" alt="" />
|
|
|
+ <div class="text1">快递编号</div>
|
|
|
+ <div class="text2" @click="copyWuliu">
|
|
|
+ <span>{{ info.courierId }}</span>
|
|
|
+ <img src="../../assets/icon-miaoshu.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="address">
|
|
|
+ <img src="../../assets/dingdan_icon_dizhi.png" alt="" />
|
|
|
+ <div class="text1">{{ info.contactName }} {{ info.contactPhone }}</div>
|
|
|
+ <div class="text1">{{ info.address }}</div>
|
|
|
+ </div>
|
|
|
+ <driver />
|
|
|
+ </template>
|
|
|
+ <div class="product">
|
|
|
+ <div class="product-name">兑换的衍生品</div>
|
|
|
+ <div class="product-info">
|
|
|
+ <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />
|
|
|
+ <div class="product-content">
|
|
|
+ <div class="text1 van-multi-ellipsis--l2">{{ info.name }}</div>
|
|
|
+ <div class="text2" v-if="info.number">编号:{{ info.number }}</div>
|
|
|
+ <div class="flex1"></div>
|
|
|
+ <!-- <div class="price">¥{{ info.price }}</div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="info-item">
|
|
|
+ <div class="text1">作品费用</div>
|
|
|
+ <div class="text1">¥{{ info.price }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text1">GAS费用</div>
|
|
|
+ <div class="text1">¥{{ info.gasPrice }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item" v-if="info.couponId">
|
|
|
+ <div class="text1">藏品兑换券</div>
|
|
|
+ <div class="text1 prim">已选择兑换券</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text1">实际支付</div>
|
|
|
+ <div class="text1 prim priceColor" style="font-weight: bold;">
|
|
|
+ ¥{{ info.couponId ? 0 : info.totalPrice }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info-item" v-if="info.txHash">
|
|
|
+ <div class="text1">链上hash</div>
|
|
|
+ <div class="van-ellipsis">{{ getShort(info.txHash) }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-item" v-if="info.gasUsed">
|
|
|
+ <div class="text1">消耗gas</div>
|
|
|
+ <div class="text1">{{ info.gasUsed }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="info-item">
|
|
|
+ <div class="text1">支付方式</div>
|
|
|
+ <div class="text1">{{ getLabelName(info.payMethod, payMethodOptions) }}支付</div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div class="tips-item">
|
|
|
+ <div class="text1">订单编号</div>
|
|
|
+ <div class="text2">
|
|
|
+ <van-button @click="copy" color="#939599" plain size="mini">复制</van-button>
|
|
|
+ <span>{{ info.id }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tips-item">
|
|
|
+ <div class="text1">创建时间</div>
|
|
|
+ <div class="text2">
|
|
|
+ {{ info.createdAt }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="tips-item">
|
|
|
+ <div class="text1">付款时间</div>
|
|
|
+ <div class="text2">
|
|
|
+ {{ info.payTime }}
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <order-open ref="box" :id="info.id" :imgSrc="getImg(changeImgs(collection.pic))"></order-open>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import OrderOpen from '../../components/order/OrderOpen.vue';
|
|
|
+import post from '../../mixins/post';
|
|
|
+import product from '../../mixins/product';
|
|
|
+export default {
|
|
|
+ components: { OrderOpen },
|
|
|
+ name: 'detail',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ info: {},
|
|
|
+ collection: {}
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mixins: [post, product],
|
|
|
+ mounted() {
|
|
|
+ this.$toast.loading({
|
|
|
+ message: '加载中...',
|
|
|
+ forbidClick: true
|
|
|
+ });
|
|
|
+ this.$http.get('/assetPost/get/' + this.$route.query.id).then(res => {
|
|
|
+ this.info = res;
|
|
|
+ this.$toast.clear();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ copy() {
|
|
|
+ this.$copyText(this.info.id).then(
|
|
|
+ e => {
|
|
|
+ this.$toast.success('复制成功');
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ e => {
|
|
|
+ this.$toast('复制失败');
|
|
|
+ console.log(e);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.order {
|
|
|
+ padding-bottom: 100px;
|
|
|
+ color: @text0;
|
|
|
+ background-color: @bg3;
|
|
|
+}
|
|
|
+.order-content {
|
|
|
+ background-color: @bg;
|
|
|
+}
|
|
|
+.order-top {
|
|
|
+ padding: 26px 16px 20px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: @prim;
|
|
|
+ line-height: 34px;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: @text0;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.product {
|
|
|
+ padding: 0 16px 20px;
|
|
|
+ border-bottom: 1px solid @bg3;
|
|
|
+ .product-name {
|
|
|
+ padding: 15px 0 12px;
|
|
|
+ }
|
|
|
+ .product-info {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .van-image {
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .product-content {
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-left: 10px;
|
|
|
+ .text1 {
|
|
|
+ font-size: @font2;
|
|
|
+ font-weight: bold;
|
|
|
+ color: @text0;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: @font2;
|
|
|
+ color: @text3;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: @font2;
|
|
|
+ font-weight: bold;
|
|
|
+ color: @text0;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.info-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 16px;
|
|
|
+ height: 48px;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid @bg3;
|
|
|
+ font-size: @font2;
|
|
|
+ .text1 {
|
|
|
+ flex-shrink: 0;
|
|
|
+ &:first-child {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.prim {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.tips-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 40px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 13px;
|
|
|
+ color: @text3;
|
|
|
+ line-height: 24px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 13px;
|
|
|
+ span {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-button {
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 5px;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.address {
|
|
|
+ position: relative;
|
|
|
+ padding: 20px 24px 16px 48px;
|
|
|
+ & > img {
|
|
|
+ position: absolute;
|
|
|
+ left: 18px;
|
|
|
+ top: 22px;
|
|
|
+ width: 20px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.address + .address {
|
|
|
+ border-top: 1px solid @tabBorder;
|
|
|
+}
|
|
|
+</style>
|