订单

src/main/pc-space/src/components/CouponInfo copy.vue

@@ -0,0 +1,239 @@
+<template>
+    <div class="page" v-if="list">
+        <div v-if="!empty" class="used">
+            可用兑换券
+            <span>（{{ list.length }}）</span>
+        </div>
+        <div v-for="(item, index) in list" :key="index">
+            <div class="coupon" @click="choose">
+                <div class="box">
+                    <img class="img" src="../assets/icon_youhuiquan_01@3x.png" alt="" />
+                    <div class="coupon-top">
+                        <div class="text1">{{ item.name }}</div>
+                        <div class="text2" v-if="item.limited">仅限规定商品可用</div>
+                    </div>
+                </div>
+                <div class="box1">
+                    <div style="width: 100%;">
+                        <div class="top">
+                            <span class="text3 name1"
+                                >兑换券编码<span class="text4"> {{ item.id }}</span></span
+                            >
+                            <!-- <div class="text6" v-if="item.used">已使用</div> -->
+                        </div>
+
+                        <div class="top1">
+                            <div class="text5">有效期至:{{ item.expiration }}</div>
+                            <div class="btn">立即使用</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-if="!empty" class="used">以下兑换券已过期/已使用</div>
+        <div v-for="item in list2" :key="item.id">
+            <div class="coupon">
+                <div class="box">
+                    <img class="img" src="../assets/icon_youhuiquan_01@3x (2).png" alt="" />
+                    <div class="coupon-top">
+                        <div class="text1">{{ item.name }}</div>
+                        <div class="text2" v-if="item.limited">仅限规定商品可用</div>
+                    </div>
+                </div>
+                <div class="box1">
+                    <div style="width: 100%;">
+                        <div class="top">
+                            <span class="text3 name1"
+                                >兑换券编码<span class="text4"> {{ item.id }}</span></span
+                            >
+                            <div class="text6">{{ checkTime(item) ? '已使用' : '已过期' }}</div>
+                        </div>
+
+                        <div class="top1">
+                            <div class="text5">有效期至:{{ item.expiration }}</div>
+                            <div class="btn2">立即使用</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <el-empty v-if="empty" description="暂无兑换券哦"></el-empty>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import coupon from '../mixins/coupon';
+export default {
+    mixins: [coupon],
+    data() {
+        return {
+            list: [],
+            list2: [],
+            empty: false,
+            chooseId: 0
+        };
+    },
+    computed: {
+        ...mapState(['couponInfo', 'userInfo'])
+    },
+    mounted() {
+        if (this.isLogin) {
+            this.add();
+        }
+    },
+    methods: {
+        add() {
+            this.$http
+                .post(
+                    '/userCoupon/all',
+                    {
+                        query: {
+                            userId: this.userInfo.id
+                            // used: false
+                        }
+                    },
+                    {
+                        body: 'json'
+                    }
+                )
+                .then(res => {
+                    this.list = res.content.filter(item => {
+                        return !item.used && this.checkTime(item);
+                    });
+                    this.list2 = res.content.filter(item => {
+                        return item.used || !this.checkTime(item);
+                    });
+                    if (this.list.length === 0) {
+                        this.empty = true;
+                    }
+                });
+        },
+        choose(info) {
+            this.$router.push('/collection');
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.list {
+    padding: 24px 0 50px;
+}
+.used {
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #939599;
+    line-height: 24px;
+    margin: 60px 0 20px 10px;
+}
+.coupon {
+    border-radius: 8px;
+    display: flex;
+    padding: 0 10px;
+    margin-bottom: 16px;
+    .box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .img {
+            width: 189px;
+            height: 120px;
+        }
+        .coupon-top {
+            padding: 16px 0;
+            position: absolute;
+            z-index: 2;
+            .text1 {
+                text-align: center;
+                font-size: 24px;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: bold;
+                color: #1a1a1a;
+                line-height: 36px;
+            }
+            .text2 {
+                font-size: 12px;
+                font-weight: 400;
+                color: #1a1a1a;
+                line-height: 22px;
+                text-align: center;
+            }
+        }
+    }
+    .box1 {
+        background: @bg2;
+        border-radius: 0 8px 8px 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        padding-left: 16px;
+        .top {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .text3 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+                &.name1 {
+                    padding-top: 15px;
+                }
+            }
+            .text4 {
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 24px;
+                text-align: bottom;
+            }
+            .text6 {
+                width: 49px;
+                height: 18px;
+                background: #939599;
+                text-align: center;
+                font-size: 11px;
+                margin-top: -18px;
+                color: #ffffff;
+                border-radius: 0px 8px 0px 8px;
+            }
+        }
+        .top1 {
+            display: flex;
+            justify-content: space-between;
+            .text5 {
+                font-size: 11px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 16px;
+                margin-top: 45px;
+            }
+            .btn {
+                width: 180px;
+                height: 28px;
+                background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+                border-radius: 14px;
+                font-size: 12px;
+                color: #1a1a1a;
+                line-height: 28px;
+                text-align: center;
+                cursor: pointer;
+                margin: 11px 20px 0 0;
+            }
+            .btn2 {
+                width: 180px;
+                height: 28px;
+                font-size: 12px;
+                color: #ffffff;
+                background: #939599;
+                border-radius: 14px;
+                line-height: 28px;
+                text-align: center;
+                margin: 11px 20px 0 0;
+            }
+        }
+    }
+}
+</style>

src/main/pc-space/src/components/CouponInfo.vue

@@ -1,63 +1,25 @@
 <template>
-    <div class="page" v-if="list">
-        <div v-if="!empty" class="used">
-            可用兑换券
-            <span>（{{ list.length }}）</span>
+    <div class="coupon">
+        <div class="coupon-top">
+            <div class="text1">{{ info.name }}</div>
+            <div class="text2" v-if="info.limited">仅限规定商品可用</div>
         </div>
-        <div v-for="(item, index) in list" :key="index">
-            <div class="coupon" @click="choose">
-                <div class="box">
-                    <img class="img" src="../assets/icon_youhuiquan_01@3x.png" alt="" />
-                    <div class="coupon-top">
-                        <div class="text1">{{ item.name }}</div>
-                        <div class="text2" v-if="item.limited">仅限规定商品可用</div>
-                    </div>
+        <div class="box1">
+            <div style="width: 100%">
+                <div class="top">
+                    <span class="text3 name1"
+                        >兑换券编码<span class="text4"> {{ info.id }}</span></span
+                    >
                 </div>
-                <div class="box1">
-                    <div style="width: 100%;">
-                        <div class="top">
-                            <span class="text3 name1"
-                                >兑换券编码<span class="text4"> {{ item.id }}</span></span
-                            >
-                            <!-- <div class="text6" v-if="item.used">已使用</div> -->
-                        </div>
 
-                        <div class="top1">
-                            <div class="text5">有效期至:{{ item.expiration }}</div>
-                            <div class="btn">立即使用</div>
-                        </div>
-                    </div>
+                <div class="top1">
+                    <div class="text5">有效期至:{{ info.expiration }}</div>
                 </div>
             </div>
         </div>
-        <div v-if="!empty" class="used">以下兑换券已过期/已使用</div>
-        <div v-for="item in list2" :key="item.id">
-            <div class="coupon">
-                <div class="box">
-                    <img class="img" src="../assets/icon_youhuiquan_01@3x (2).png" alt="" />
-                    <div class="coupon-top">
-                        <div class="text1">{{ item.name }}</div>
-                        <div class="text2" v-if="item.limited">仅限规定商品可用</div>
-                    </div>
-                </div>
-                <div class="box1">
-                    <div style="width: 100%;">
-                        <div class="top">
-                            <span class="text3 name1"
-                                >兑换券编码<span class="text4"> {{ item.id }}</span></span
-                            >
-                            <div class="text6">{{ checkTime(item) ? '已使用' : '已过期' }}</div>
-                        </div>
+        <div class="status" v-if="info.used">{{ checkTime(info) ? '已使用' : '已过期' }}</div>
 
-                        <div class="top1">
-                            <div class="text5">有效期至:{{ item.expiration }}</div>
-                            <div class="btn2">立即使用</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <el-empty v-if="empty" description="暂无兑换券哦"></el-empty>
+        <el-button class="btn2" type="primary" size="small" @click="choose">立即使用</el-button>
     </div>
 </template>
 
@@ -66,49 +28,18 @@ import { mapState } from 'vuex';
 import coupon from '../mixins/coupon';
 export default {
     mixins: [coupon],
-    data() {
-        return {
-            list: [],
-            list2: [],
-            empty: false,
-            chooseId: 0
-        };
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
     },
     computed: {
         ...mapState(['couponInfo', 'userInfo'])
     },
-    mounted() {
-        if (this.isLogin) {
-            this.add();
-        }
-    },
     methods: {
-        add() {
-            this.$http
-                .post(
-                    '/userCoupon/all',
-                    {
-                        query: {
-                            userId: this.userInfo.id
-                            // used: false
-                        }
-                    },
-                    {
-                        body: 'json'
-                    }
-                )
-                .then(res => {
-                    this.list = res.content.filter(item => {
-                        return !item.used && this.checkTime(item);
-                    });
-                    this.list2 = res.content.filter(item => {
-                        return item.used || !this.checkTime(item);
-                    });
-                    if (this.list.length === 0) {
-                        this.empty = true;
-                    }
-                });
-        },
         choose(info) {
             this.$router.push('/collection');
         }
@@ -131,39 +62,36 @@ export default {
 .coupon {
     border-radius: 8px;
     display: flex;
-    padding: 0 10px;
     margin-bottom: 16px;
-    .box {
+    background: @bg2;
+    overflow: hidden;
+    padding-right: 20px;
+    .coupon-top {
+        box-sizing: border-box;
+        width: 189px;
+        padding: 16px 0;
+        z-index: 2;
+        background-color: #f7931a;
         display: flex;
-        align-items: center;
+        flex-direction: column;
         justify-content: center;
-        .img {
-            width: 189px;
-            height: 120px;
+        .text1 {
+            text-align: center;
+            font-size: 24px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: bold;
+            color: #fff;
+            line-height: 36px;
         }
-        .coupon-top {
-            padding: 16px 0;
-            position: absolute;
-            z-index: 2;
-            .text1 {
-                text-align: center;
-                font-size: 24px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: bold;
-                color: #1a1a1a;
-                line-height: 36px;
-            }
-            .text2 {
-                font-size: 12px;
-                font-weight: 400;
-                color: #1a1a1a;
-                line-height: 22px;
-                text-align: center;
-            }
+        .text2 {
+            font-size: 12px;
+            font-weight: 400;
+            color: #fff;
+            line-height: 22px;
+            text-align: center;
         }
     }
     .box1 {
-        background: @bg2;
         border-radius: 0 8px 8px 0;
         width: 100%;
         display: flex;
@@ -185,7 +113,7 @@ export default {
             .text4 {
                 font-size: 14px;
                 font-weight: 400;
-                color: #ffffff;
+                color: #26273c;
                 line-height: 24px;
                 text-align: bottom;
             }
@@ -203,6 +131,7 @@ export default {
         .top1 {
             display: flex;
             justify-content: space-between;
+            padding-bottom: 15px;
             .text5 {
                 font-size: 11px;
                 font-weight: 400;
@@ -222,18 +151,24 @@ export default {
                 cursor: pointer;
                 margin: 11px 20px 0 0;
             }
-            .btn2 {
-                width: 180px;
-                height: 28px;
-                font-size: 12px;
-                color: #ffffff;
-                background: #939599;
-                border-radius: 14px;
-                line-height: 28px;
-                text-align: center;
-                margin: 11px 20px 0 0;
-            }
         }
     }
+
+    .btn2 {
+        width: 180px;
+        border-radius: 14px;
+        align-self: center;
+    }
+    .status {
+        position: absolute;
+        right: -5px;
+        top: -2px;
+        border-radius: 0 8px 0 8px;
+        background-color: #939599;
+        font-size: 12px;
+        color: #fff;
+        padding: 2px 15px;
+        transform: scale(0.8);
+    }
 }
 </style>

src/main/pc-space/src/mixins/common.js

@@ -132,12 +132,12 @@ export default {
                 return Promise.reject();
             }
         },
-        getLabelName(val = '', list = []) {
+        getLabelName(val = '', list = [], key = 'label') {
             let info = list.find(item => {
                 return item.value === val;
             });
 
-            return info ? info.label : '';
+            return info ? info[key] : '';
         },
         scrollRefreash() {
             this.$toast.clear();

src/main/pc-space/src/mixins/coupon.js

@@ -4,11 +4,15 @@ dayjs.extend(isSameOrBefore);
 export default {
     methods: {
         checkTime(info) {
-            return dayjs().isSameOrBefore(info.expiration);
+            return dayjs().isSameOrBefore(dayjs(info.expiration, 'YYYY-MM-DD HH:mm:ss'));
         },
         checkUse(info, collectionId = 0) {
             if (collectionId && info.limited) {
-                return [...info.collectionIds].includes(collectionId);
+                return [...info.collectionIds]
+                    .map(item => {
+                        return Number(item);
+                    })
+                    .includes(Number(collectionId));
             } else {
                 return true;
             }

src/main/pc-space/src/mixins/post.js

@@ -0,0 +1,16 @@
+export default {
+    data() {
+        return {
+            statusOptions: [
+                { label: '待发货', value: 'DELIVERY', text: '付款成功！等待平台发货' },
+                { label: '待收货', value: 'RECEIVE', text: '订单已发货！' },
+                { label: '已完成', value: 'FINISH', text: '支付成功，等待平台确认交易' },
+                { label: '已取消', value: 'CANCELLED', text: '订单已取消' }
+            ],
+            payMethodOptions: [
+                { label: '微信', value: 'WEIXIN' },
+                { label: '支付宝', value: 'ALIPAY' }
+            ]
+        };
+    }
+};

src/main/pc-space/src/mixins/product.js

@@ -85,6 +85,12 @@ export default {
             setTimeout(() => {
                 this.getTime(startTime);
             }, 1000);
-        }
+        },
+        getShort(str = '') {
+            if (str) {
+                str = '...' + str.substr(-20, 20);
+            }
+            return str;
+        },
     }
 };

src/main/pc-space/src/router/index.js

@@ -125,6 +125,15 @@ const routes = [
                             checkLogin: true
                         }
                     },
+                    {
+                        path: '/postOrder',
+                        name: 'postOrder',
+                        component: () => import('../views/user/PostOrder.vue'),
+                        meta: {
+                            title: '藏品订单',
+                            checkLogin: true
+                        }
+                    },
                     {
                         path: '/payrecord',
                         name: 'payrecord',

src/main/pc-space/src/views/My.vue

@@ -25,15 +25,19 @@ el-table__row<template>
                 </el-option>
             </el-select>
         </div>
+        <div class="search-list" style="min-height: 101px;" v-else></div>
         <div class="list" v-loading="fetchingData">
             <template v-if="select === '0' || select === '1'">
                 <asset-info v-for="(item, index) in list" :key="item.id" :info.sync="list[index]"></asset-info>
             </template>
             <template v-if="select === '2'">
-                <coupon-info></coupon-info>
+                <coupon-info v-for="(item, index) in list" :key="item.id" :info="list[index]"></coupon-info>
             </template>
 
-            <el-empty v-if="empty && select !== '2'" description="还没有该类型的藏品哦～"></el-empty>
+            <el-empty
+                v-if="empty"
+                :description="`${select === '2' ? '还没有优惠券哦～' : '还没有该类型的藏品哦～'}`"
+            ></el-empty>
         </div>
 
         <div class="pagination-wrapper">
@@ -159,8 +163,8 @@ export default {
             } else if (this.select === '2') {
                 return {
                     query: {
-                        userId: this.$store.state.userInfo.id,
-                        used: false
+                        userId: this.$store.state.userInfo.id
+                        // used: false
                         // status: 'creator'
                     }
                 };

src/main/pc-space/src/views/Send.vue

@@ -520,7 +520,7 @@ export default {
 
         &.is-checked {
             .el-radio__inner {
-                background-image: linear-gradient(135deg, @prim 20%, @warn 100%);
+                background: @prim !important;
                 border-width: 0;
             }
         }

src/main/pc-space/src/views/Submit.vue

@@ -1,6 +1,13 @@
 <template>
     <div>
-        <el-dialog center title="支付订单" :visible.sync="show" width="680px" :before-close="handleClose">
+        <el-dialog
+            center
+            title="支付订单"
+            append-to-body
+            :visible.sync="show"
+            width="680px"
+            :before-close="handleClose"
+        >
             <div class="border"></div>
             <div class="page" v-loading="loading">
                 <div v-if="list[0]">
@@ -47,11 +54,11 @@
                     </div>
                 </div>
                 <div class="border"></div>
-                <div class="payMethods">
+                <div class="payType">
                     <div class="title">选择支付方式</div>
                     <div class="pay-list">
                         <div class="pay-info">
-                            <el-radio-group v-model="payMethods">
+                            <el-radio-group v-model="payType">
                                 <el-radio
                                     :disabled="flag"
                                     v-for="item in payList"
@@ -69,13 +76,13 @@
                     <div v-if="status === 'NOT_PAID'">
                         <div class="qrcode">
                             <vue-qrcode
-                                v-if="payMethods === 'WEIXIN'"
+                                v-if="payType === 'WEIXIN'"
                                 :value="payUrl"
                                 :options="{ width: 140, margin: 1 }"
                                 class="code"
                             ></vue-qrcode>
                             <vue-qrcode
-                                v-if="payMethods === 'ALIPAY'"
+                                v-if="payType === 'ALIPAY'"
                                 :value="payUrl2"
                                 :options="{ width: 140, margin: 1 }"
                                 class="code"
@@ -105,7 +112,7 @@
                 <el-button type="primary" class="pay" @click="submit">确认</el-button>
             </span>
         </el-dialog>
-        <el-dialog center title="兑换券" :visible.sync="show2" width="680px">
+        <el-dialog center title="兑换券" append-to-body :visible.sync="show2" width="680px">
             <div class="border"></div>
             <div style="padding: 30px 0 20px 0" class="page">
                 <div v-for="(item, index) in listAll" :key="index" @click="IdFn(item)">
@@ -156,7 +163,7 @@ export default {
             chooseId: '',
             org: '',
             empty: false,
-            payMethods: 'WEIXIN',
+            payType: 'WEIXIN',
             flag: false,
             minters: 0,
             seconds: 0,
@@ -164,16 +171,17 @@ export default {
             closeTime: '',
             list: [],
             listAll: [],
+            payChannel: null,
             payList: [
-                {
-                    icon: require('../assets/weixin.png'),
-                    name: '微信',
-                    type: 'WEIXIN'
-                },
                 {
                     icon: require('../assets/alipay.png'),
                     name: '支付宝',
                     type: 'ALIPAY'
+                },
+                {
+                    icon: require('../assets/weixin.png'),
+                    name: '微信',
+                    type: 'WEIXIN'
                 }
 
                 // {
@@ -188,7 +196,10 @@ export default {
             id: 0,
             status: '',
             payUrl: '',
-            payUrl2: ''
+            payUrl2: '',
+            enable_wx_lite: false,
+            enable_wx_pub: false,
+            orderInfo: {}
         };
     },
     computed: {
@@ -275,7 +286,9 @@ export default {
                     '/userCoupon/all',
                     {
                         query: {
-                            userId: this.userInfo.id
+                            userId: this.userInfo.id,
+                            used: false,
+                            projectId: this.$store.state.projectId
                         }
                     },
                     {
@@ -283,13 +296,14 @@ export default {
                     }
                 )
                 .then(res => {
-                    this.list = res.content.filter(item => {
-                        return !item.used && this.checkTime(item) && this.checkUse(item, this.$route.query.id);
-                    });
-                    this.listAll = res.content.filter(item => {
-                        return !item.used && this.checkTime(item) && this.checkUse(item, this.$route.query.id);
-                    });
-                    // console.log(this.listAll);
+                    if (!res.empty) {
+                        this.list = res.content.filter(item => {
+                            return !item.used && this.checkTime(item) && this.checkUse(item, this.$route.query.id);
+                        });
+                        this.listAll = res.content.filter(item => {
+                            return !item.used && this.checkTime(item) && this.checkUse(item, this.$route.query.id);
+                        });
+                    }
                 });
         },
         IdFn(e) {
@@ -316,13 +330,26 @@ export default {
             this.payTimeout = setInterval(() => {
                 this.$http.get('/order/get/' + this.id).then(res => {
                     // console.log(res);
-                    if (res.status === 'FINISH') {
+                    if (res.status === 'PROCESSING' || res.status === 'FINISH' || res.status === 'CANCELLED') {
                         clearInterval(this.payTimeout);
                         this.show = false;
                         this.flag = false;
-                        setTimeout(() => {
-                            this.init2();
-                        }, 1000);
+                        this.$confirm(
+                            res.status === 'CANCELLED' ? '订单支付失败,点击重新下单' : '订单已支付,点击查看订单详情',
+                            '提示',
+                            {
+                                confirmButtonText: res.status === 'CANCELLED' ? '重新下单' : '查看订单',
+                                cancelButtonText: '取消',
+                                customClass: 'myClass',
+                                center: true
+                            }
+                        ).then(() => {
+                            if (res.status === 'CANCELLED') {
+                                this.$router.back();
+                            } else {
+                                this.$router.replace('/collectionorder?orderId=' + res.id);
+                            }
+                        });
                     }
                 });
             }, 1000);
@@ -337,7 +364,7 @@ export default {
         },
         submit() {
             // console.log(this.$baseUrl);
-            // if (this.payMethods === 'DCEP') {
+            // if (this.payType === 'DCEP') {
             //     this.wait();
             // }
             this.flag = true;
@@ -348,37 +375,44 @@ export default {
             this.$http
                 .post(url)
                 .then(res => {
+                    this.orderInfo = res;
+                    if (this.money) {
+                        if (this.payType === 'WEIXIN') {
+                            return this.$http
+                                .get('/payOrder/weixin', {
+                                    id: res.id
+                                })
+                                .then(res => {
+                                    this.payUrl = res.wx_h5_pay_url;
+                                });
+                        }
+                        if (this.payType === 'ALIPAY') {
+                            return this.$http
+                                .get('/payOrder/alipay_qr', {
+                                    id: res.id
+                                })
+                                .then(res => {
+                                    this.payUrl2 = res;
+                                });
+                        }
+                    } else {
+                        return Promise.resolve();
+                    }
+                })
+                .then(() => {
                     if (this.money) {
                         // 没有兑换券
-                        this.initTime(res.id, res.createdAt);
-                        this.status = res.status;
-                        this.id = res.id;
+                        this.initTime(this.orderInfo.id, this.orderInfo.createdAt);
+                        this.status = this.orderInfo.status;
+                        this.id = this.orderInfo.id;
                         this.payWatch();
                     } else {
                         // 兑换券
                         this.$message.success('支付成功');
                         setTimeout(() => {
-                            this.$router.replace('/collectionorder');
+                            this.$router.replace('/collectionorder?orderId=' + this.orderInfo.id);
                         }, 1000);
                     }
-                    if (this.payMethods === 'WEIXIN') {
-                        this.$http
-                            .get('/payOrder/weixin', {
-                                id: res.id
-                            })
-                            .then(res => {
-                                this.payUrl = res.wx_h5_pay_url;
-                            });
-                    }
-                    if (this.payMethods === 'ALIPAY') {
-                        this.$http
-                            .get('/payOrder/alipay_qr', {
-                                id: res.id
-                            })
-                            .then(res => {
-                                this.payUrl2 = res;
-                            });
-                    }
                 })
                 .catch(e => {
                     if (e) {
@@ -397,6 +431,20 @@ export default {
                 })
                 .then(res => {
                     this.gas = res.value;
+                    return this.$http.get('/sysConfig/get/enable_wx_lite').then(res => {
+                        this.enable_wx_lite = res.value === '1';
+                        return Promise.resolve();
+                    });
+                })
+                .then(() => {
+                    if (!(this.enable_wx_lite || this.enable_wx_pub)) {
+                        this.payList.splice(1, 1);
+                        this.payType = 'ALIPAY';
+                    } else if (this.enable_wx_pub) {
+                        this.payChannel = 'wx_pub';
+                    } else {
+                        this.payChannel = 'wx_lite';
+                    }
                     this.loading = false;
                 })
                 .catch(e => {
@@ -426,7 +474,7 @@ export default {
     padding: 4px 20px 0;
 }
 /deep/ .el-radio__inner {
-    background-color: #fff !important;
+    background-color: #fff;
 }
 .border {
     height: 1px;
@@ -536,15 +584,13 @@ export default {
             .text1 {
                 text-align: center;
                 font-size: 24px;
-                font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: bold;
-                color: #1a1a1a;
+                color: #fff;
                 line-height: 36px;
             }
             .text2 {
                 font-size: 12px;
-                font-weight: 400;
-                color: #1a1a1a;
+                color: #fff;
                 line-height: 22px;
                 text-align: center;
             }
@@ -628,8 +674,8 @@ export default {
         }
 
         &.is-checked {
-            .el-radio__inner {
-                background-image: linear-gradient(135deg, @prim 20%, @warn 100%);
+            .el-radio.is-checked .el-radio__inner {
+                background-color: @prim!important;
                 border-width: 0;
             }
         }
@@ -637,7 +683,7 @@ export default {
     &.is-checked {
         background: rgba(253, 251, 96, 0.12);
         border-radius: 4px;
-        border: 1px solid #ff4f50;
+        border: 1px solid @prim;
         // .line(@bg:#E0FFF8,@radius:4px);
         // border-width: 0;
         .el-radio__label {
@@ -651,7 +697,7 @@ export default {
     line-height: 24px;
     padding-bottom: 20px;
 }
-.payMethods {
+.payType {
     padding: 30px 0;
 }
 /deep/.el-radio.is-bordered + .el-radio.is-bordered {
@@ -673,13 +719,9 @@ export default {
     }
 }
 .pay {
-    background-image: linear-gradient(135deg, @prim, @warn);
-    border-width: 0;
+    // background-image: linear-gradient(135deg, @prim, @warn);
+    // border-width: 0;
     width: 200px;
-    color: #000;
-    &:hover {
-        background-image: linear-gradient(135deg, darken(@prim, 20), darken(@warn, 20));
-    }
 }
 .qrcode {
     width: 160px;

src/main/pc-space/src/views/user/CollectionOrder.vue

@@ -28,13 +28,14 @@
                 :data="tableData"
                 :border="false"
                 :highlight-current-row="false"
-                style="width: 100%; background: #fff; font-weight: normal;"
+                @row-click="rowClick"
+                style="width: 100%; background: #fff; font-weight: normal"
             >
                 <el-table-column prop="name" label="藏品信息" width="208">
                     <template slot-scope="scope">
-                        <div style="display: flex; align-items: center;">
+                        <div style="display: flex; align-items: center">
                             <img
-                                style="width: 60px; height: 60px; border-radius: 4px;"
+                                style="width: 60px; height: 60px; border-radius: 4px"
                                 :src="getImg(scope.row.pic[0].url, '', 300)"
                                 alt=""
                             />
@@ -74,14 +75,14 @@
                 </el-table-column>
                 <el-table-column prop="price" label="金额" width="90">
                     <template slot-scope="scope">
-                        <div style="display: flex;">
+                        <div style="display: flex">
                             <img
-                                style="width: 8px; height: 8px; margin-top: 10px;"
+                                style="width: 8px; height: 8px; margin-top: 10px"
                                 src="../../assets/img/icon_jiage@3x.png"
                                 alt=""
                             />
                             <div
-                                style="color: #FF6E91; font-size: 20px; font-family: OSP-DIN, OSP; font-weight: normal;"
+                                style="color: #ff6e91; font-size: 20px; font-family: OSP-DIN, OSP; font-weight: normal"
                             >
                                 {{ scope.row.price }}
                             </div>
@@ -99,7 +100,7 @@
                 <el-table-column fixed="right" label="操作">
                     <template slot-scope="scope">
                         <img
-                            style="width: 24px; height: 24px; cursor: pointer;"
+                            style="width: 24px; height: 24px; cursor: pointer"
                             @click="handleClick(scope.row)"
                             src="../../assets/user/icon_shanchu@3x.png"
                             alt=""
@@ -120,13 +121,16 @@
             >
             </el-pagination>
         </div>
+        <collection-order-detail ref="detail" :orderId="orderId"></collection-order-detail>
     </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import list from '../../mixins/list';
+import CollectionOrderDetail from './CollectionOrderDetail.vue';
 export default {
+    components: { CollectionOrderDetail },
     data() {
         return {
             tableData: [],
@@ -154,7 +158,8 @@ export default {
             statusOptions: [
                 { label: '已完成', value: 'FINISH' },
                 { label: '交易中', value: 'PROCESSING' }
-            ]
+            ],
+            orderId: 0
         };
     },
     mixins: [list],
@@ -185,8 +190,15 @@ export default {
     },
     mounted() {
         this.getData();
+        if (this.$route.query.orderId) {
+            this.showOrder(Number(this.$route.query.orderId));
+        }
     },
     methods: {
+        showOrder(orderId) {
+            this.orderId = orderId;
+            this.$refs.detail.init(orderId);
+        },
         statusFormatter(row, column, cellValue, index) {
             let selectedOption = this.statusOptions.find(i => i.value === cellValue);
             if (selectedOption) {
@@ -227,6 +239,9 @@ export default {
                         }, 1000);
                     });
             });
+        },
+        rowClick(row) {
+            this.showOrder(row.id);
         }
     }
 };

src/main/pc-space/src/views/user/CollectionOrderDetail.vue

@@ -0,0 +1,222 @@
+<template>
+    <el-dialog title="订单详情" center append-to-body :visible.sync="show" width="680px" @close="show = false">
+        <div class="order">
+            <div class="order-top">
+                <div class="text1">{{ getLabelName(info.status, statusOptions) }}</div>
+            </div>
+            <div class="product-name">订单藏品</div>
+            <div class="product">
+                <el-image class="product-img" :src="getImg(changeImgs(info.pic))" fit="cover" :lazy="true"></el-image>
+                <div class="text1">{{ 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 class="order-info">
+                <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="text2">
+                        <el-button @click="copy(info.txHash)" type="info" plain size="mini">复制</el-button>
+                        <span>{{ getShort(info.txHash) }}</span>
+                    </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">
+                        <el-button @click="copy(info.id)" type="info" plain size="mini">复制</el-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>
+        </div>
+
+        <order-open ref="box" :id="info.id" :imgSrc="getImg(changeImgs(collection.pic))"></order-open>
+    </el-dialog>
+</template>
+
+<script>
+import order from '../../mixins/order';
+import product from '../../mixins/product';
+import OrderOpen from './OrderOpen.vue';
+export default {
+    components: { OrderOpen },
+    data() {
+        return {
+            show: false,
+            info: {},
+            orderId: 0,
+            collection: {}
+        };
+    },
+    mixins: [order, product],
+    methods: {
+        init(id) {
+            this.show = true;
+            this.orderId = id;
+            this.$http
+                .get('/order/get/' + this.orderId)
+                .then(res => {
+                    this.info = res;
+                    if (res.winCollectionId) {
+                        return this.$http.get('/collection/get/' + res.winCollectionId);
+                    } else {
+                        return Promise.reject();
+                    }
+                })
+                .then(res => {
+                    this.collection = res;
+                    if (!this.info.opened) {
+                        this.$refs.box.show = true;
+                    }
+                    // if (dayjs().isBefore(dayjs(this.info.payTime).add(3, 'minute')) && this.info.type === 'BLIND_BOX') {
+                    //     this.$refs.box.show = true;
+                    // }
+                });
+        },
+        copy(text) {
+            this.$copyText(text).then(
+                e => {
+                    this.$message.success('复制成功');
+                },
+                e => {
+                    this.$message.warning('复制失败');
+                }
+            );
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.order-top {
+    padding: 16px 0;
+    border-bottom: 1px solid @border1;
+    .text1 {
+        font-size: 18px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #ff6e91;
+    }
+}
+.product-name {
+    padding: 20px 0 12px;
+    font-size: 16px;
+    line-height: 24px;
+    color: @text0;
+}
+.product {
+    .flex();
+    .product-img {
+        width: 80px;
+        height: 80px;
+    }
+    .text1 {
+        font-size: 14px;
+        line-height: 20px;
+        color: #000000;
+        opacity: 1;
+        margin: 10px 6px;
+    }
+
+    .text2 {
+        font-size: 13px;
+        line-height: 24px;
+        color: #939599;
+    }
+
+    .price {
+        color: #ff5daf;
+        font-size: 16px;
+    }
+}
+
+.info-item {
+    .flex();
+    justify-content: space-between;
+    height: 64px;
+    .text1 {
+        font-size: 13px;
+        line-height: 24px;
+        color: #939599;
+
+        &.prim {
+            color: @prim;
+        }
+    }
+    .text2 {
+        font-size: 13px;
+        line-height: 24px;
+        color: @text0;
+
+        .el-button {
+            margin-right: 20px;
+        }
+    }
+}
+
+.tips-item {
+    .flex();
+    justify-content: space-between;
+    height: 36px;
+    .text1 {
+        font-size: 13px;
+        line-height: 24px;
+        color: #939599;
+
+        &.prim {
+            color: @prim;
+        }
+    }
+    .text2 {
+        font-size: 13px;
+        line-height: 24px;
+        color: @text0;
+
+        .el-button {
+            margin-right: 20px;
+        }
+    }
+}
+</style>

src/main/pc-space/src/views/user/OrderOpen.vue

@@ -0,0 +1,294 @@
+<template>
+    <div class="overlay" v-if="show" z-index="99" @click="show = false">
+        <div class="content" @click.stop="open">
+            <img class="bg" ref="bg" src="../../assets/open1.png" alt="" />
+
+            <div class="box">
+                <img class="img1" src="../../assets/box1.png" alt="" />
+                <img class="img2" ref="img2" src="../../assets/box2.png" alt="" />
+                <img class="img3" ref="img3" src="../../assets/png-kapian.png" alt="" />
+                <img class="guang" src="../../assets/png-guang.png" alt="" />
+            </div>
+
+            <div class="product" ref="product">
+                <img class="productBg" src="../../assets/png-cangping-bg.png" alt="" />
+                <img class="productImg" :src="imgSrc" />
+            </div>
+
+            <div class="text1" v-if="!showProduct">点击打开盲盒</div>
+
+            <div class="text" v-else>藏品正在生成中<br />约1~3分钟，完成后会出现在你的藏品室</div>
+
+            <img src="../../assets/icon_fenxiang_close.png" @click="show = false" alt="" class="close" />
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        imgSrc: {
+            type: String,
+            defalut: ''
+        },
+        id: {
+            type: Number,
+            defalut: 0
+        }
+    },
+    data() {
+        return {
+            show: false,
+            showProduct: false
+        };
+    },
+    methods: {
+        open() {
+            if (this.showProduct) {
+                this.show = false;
+            } else {
+                this.$http.post('/order/open?id=' + this.id);
+                this.addClass('img2', 'animate__rollOut', false)
+                    .then(() => {
+                        return this.addClass('img3', 'animate__bounceOutUp', false);
+                    })
+                    .then(() => {
+                        setTimeout(() => {
+                            this.addClass('bg', 'bg1');
+                        }, 300);
+                        return this.addClass('product', 'animate__bounceInDown', true);
+                    })
+                    .then(() => {
+                        this.showProduct = true;
+                    });
+            }
+        },
+        //组件名，动画名，展示（true:出现，false:消失）
+        addClass(elName = '', className = '', show = '') {
+            this.$refs[elName].className = this.$refs[elName].className + ` ${className}`;
+            if (show === true) {
+                this.$refs[elName].style.display = 'block';
+            }
+            return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                    if (show === false) {
+                        this.$refs[elName].style.display = 'none';
+                    }
+                    resolve();
+                }, 600);
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: fade(@text0, 30%);
+}
+.content {
+    position: absolute;
+    width: 100vw;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    .flex-col();
+    align-items: center;
+    justify-content: center;
+
+    .bg {
+        width: 100%;
+        display: block;
+        transition: transform ease-in-out 0.3s;
+        &.bg1 {
+            transform: scale(2);
+        }
+    }
+
+    .text {
+        text-align: center;
+        font-size: 12px;
+        color: #939599;
+        line-height: 17px;
+        margin-top: 60px;
+    }
+
+    .text1 {
+        font-size: 12px;
+        color: #939599;
+        line-height: 17px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        bottom: 100px;
+        z-index: 3;
+    }
+
+    .close {
+        width: 40px;
+        height: 40px;
+        margin-top: 30px;
+        position: relative;
+        z-index: 5;
+    }
+}
+
+.box {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .img1 {
+        width: 280px;
+        display: block;
+    }
+    .img2 {
+        width: 280px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 3;
+    }
+    .guang {
+        width: 280px;
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 1;
+    }
+    .img3 {
+        width: 66px;
+        height: 130px;
+        position: absolute;
+        left: calc(50% - 33px);
+        top: calc(40% - 65px);
+        z-index: 2;
+        opacity: 0;
+    }
+}
+
+.product {
+    position: fixed;
+    left: calc(50vw - 300px);
+    display: none;
+    .productBg {
+        width: 600px;
+        display: block;
+    }
+    .productImg {
+        width: 460px;
+        height: 460px;
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: calc(50vh - 320px);
+        border-radius: 30px;
+        object-fit: cover;
+    }
+}
+
+.animate__rollOut {
+    animation: rollOut ease-in-out 0.8s;
+}
+
+@keyframes rollOut {
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
+        transform: translate3d(100%, 0, 0) rotate(120deg);
+    }
+}
+
+.animate__bounceOutUp {
+    animation: bounceOutUp ease-in-out 0.8s;
+}
+
+@keyframes bounceOutUp {
+    20% {
+        -webkit-transform: translate3d(0, -10px, 0) scaleY(0.585);
+        transform: translate3d(0, -10px, 0) scaleY(0.585);
+    }
+    40%,
+    45% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 20px, 0) scaleY(0.5);
+        transform: translate3d(0, 20px, 0) scaleY(0.5);
+    }
+    to {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
+        transform: translate3d(0, -2000px, 0) scaleY(3);
+    }
+}
+
+.animate__bounceInDown {
+    animation: bounceInDown ease-in-out 0.8s;
+}
+
+@keyframes bounceInDown {
+    0%,
+    60%,
+    75%,
+    90%,
+    to {
+        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
+        transform: translate3d(0, -3000px, 0) scaleY(3);
+    }
+    60% {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
+        transform: translate3d(0, 25px, 0) scaleY(0.9);
+    }
+    75% {
+        -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
+        transform: translate3d(0, -10px, 0) scaleY(0.95);
+    }
+    90% {
+        -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
+        transform: translate3d(0, 5px, 0) scaleY(0.985);
+    }
+    to {
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+    }
+}
+
+.animate__heartBeat {
+    animation: heartBeat ease-in-out 0.8s;
+}
+@keyframes heartBeat {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    14% {
+        -webkit-transform: scale(1.3);
+        transform: scale(1.3);
+    }
+    28% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    42% {
+        -webkit-transform: scale(1.3);
+        transform: scale(1.3);
+    }
+    70% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+</style>

src/main/pc-space/src/views/user/OrderValue.vue

@@ -21,7 +21,8 @@
                 :header-cell-style="{ background: '#fff' }"
                 :data="tableData"
                 :border="false"
-                style="width: 100%; background: #fff;"
+                :highlight-current-row="true"
+                style="width: 100%; background: #fff"
             >
                 <el-table-column prop="name" label="商品信息" width="228">
                     <template slot-scope="scope">
@@ -40,17 +41,17 @@
                     </template>
                 </el-table-column>
                 <el-table-column prop="id" label="订单编号" width="134"> </el-table-column>
-                <el-table-column style="color: #fdfb60;" prop="payTime" label="交易时间" width="190"> </el-table-column>
+                <el-table-column style="color: #fdfb60" prop="payTime" label="交易时间" width="190"> </el-table-column>
                 <el-table-column prop="totalPrice" label="实际金额" width="140">
                     <template slot-scope="scope">
-                        <div style="display: flex;">
+                        <div style="display: flex">
                             <img
-                                style="width: 8px; height: 8px; margin-top: 10px;"
+                                style="width: 8px; height: 8px; margin-top: 10px"
                                 src="../../assets/user/icon_jiage@3x (5).png"
                                 alt=""
                             />
                             <div
-                                style="color: #26273c; font-size: 20px; font-family: OSP-DIN, OSP; font-weight: normal;"
+                                style="color: #26273c; font-size: 20px; font-family: OSP-DIN, OSP; font-weight: normal"
                             >
                                 {{ scope.row.totalPrice }}
                             </div>
@@ -61,14 +62,14 @@
                 </el-table-column>
                 <el-table-column prop="price" label="收益金额">
                     <template slot-scope="scope">
-                        <div style="display: flex;">
+                        <div style="display: flex">
                             <img
-                                style="width: 8px; height: 8px; margin-top: 10px;"
+                                style="width: 8px; height: 8px; margin-top: 10px"
                                 src="../../assets/img/icon_jiage@3x.png"
                                 alt=""
                             />
                             <div
-                                style="color: #ff6e91; font-size: 20px; font-family: OSP-DIN, OSP; font-weight: normal;"
+                                style="color: #ff6e91; font-size: 20px; font-family: OSP-DIN, OSP; font-weight: normal"
                             >
                                 {{ scope.row.price }}
                             </div>

src/main/pc-space/src/views/user/Personal.vue

@@ -30,12 +30,13 @@
                 <el-menu-item index="/payrecord">支付记录</el-menu-item>
                 <el-menu-item index="/transactionordes">交易记录</el-menu-item>
                 <el-menu-item index="/ordervalue">价值证明</el-menu-item>
-                <!-- <el-submenu index="3">
+                <el-submenu index="3">
                     <template slot="title">
-                        <img class="icon" src="../../assets/user/gongxu_icon_xuqiuxinxi@3x.png" alt="" />
-                        <span>铸造信息</span>
+                        <img class="icon" src="../../assets/user/icon_zhuzaoxinxi@3x.png" alt="" />
+                        <span>衍生信息</span>
                     </template>
-                </el-submenu> -->
+                </el-submenu>
+                 <el-menu-item index="/postOrder">衍生品订单</el-menu-item>
             </el-menu>
             <div class="main">
                 <router-view />

src/main/pc-space/src/views/user/PostOrder.vue

@@ -0,0 +1,377 @@
+<template>
+    <div class="container">
+        <div class="top">
+            <el-radio-group class="menu" v-model="type" size="normal">
+                <el-radio-button v-for="(item, index) in typeList" :key="index" :label="item.value">
+                    <div class="radio-item">
+                        <span>{{ item.label }}</span>
+                    </div>
+                </el-radio-button>
+            </el-radio-group>
+            <div class="search-list">
+                <el-input
+                    class="search"
+                    prefix-icon="el-icon-search"
+                    placeholder="请输入您想找到的商品名称…"
+                    v-model="search"
+                    clearable
+                    @change="onSearch"
+                >
+                </el-input>
+            </div>
+        </div>
+        <div class="border"></div>
+        <template>
+            <el-table
+                class="customer-table"
+                :header-cell-style="{ background: '#fff' }"
+                :data="tableData"
+                :border="false"
+                :highlight-current-row="false"
+                @row-click="rowClick"
+                style="width: 100%; background: #fff; font-weight: normal"
+            >
+                <el-table-column prop="name" label="藏品信息" width="208">
+                    <template slot-scope="scope">
+                        <div style="display: flex; align-items: center">
+                            <img
+                                style="width: 60px; height: 60px; border-radius: 4px"
+                                :src="getImg(scope.row.pic[0].url, '', 300)"
+                                alt=""
+                            />
+                            <div
+                                style="
+                                    margin-left: 10px;
+                                    width: 113px;
+                                    display: flex;
+                                    align-items: center;
+                                    height: 48px;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                "
+                            >
+                                {{ scope.row.name }}
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="price" label="金额" width="90">
+                    <template slot-scope="scope">
+                        <div style="display: flex">
+                            <img
+                                style="width: 8px; height: 8px; margin-top: 10px"
+                                src="../../assets/img/icon_jiage@3x.png"
+                                alt=""
+                            />
+                            <div
+                                style="color: #ff6e91; font-size: 20px; font-family: OSP-DIN, OSP; font-weight: normal"
+                            >
+                                {{ scope.row.price || 0 }}
+                            </div>
+                        </div>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="contactName" label="收货人" width="158"> </el-table-column>
+                <el-table-column prop="id" label="订单编号" width="100"> </el-table-column>
+                <el-table-column prop="createdAt" label="成交时间" width="158"> </el-table-column>
+                <el-table-column prop="status" label="状态" width="108" :formatter="statusFormatter">
+                    <template slot-scope="scope">
+                        <div :style="{ color: '#9971EE' }">{{ getLabelName(scope.row.status, statusOptions) }}</div>
+                    </template>
+                </el-table-column>
+                <el-table-column fixed="right" label="操作">
+                    <template slot-scope="scope">
+                        <img
+                            style="width: 24px; height: 24px; cursor: pointer"
+                            @click="handleClick(scope.row)"
+                            src="../../assets/user/icon_shanchu@3x.png"
+                            alt=""
+                        />
+                    </template>
+                </el-table-column>
+            </el-table>
+        </template>
+        <div class="pagination-wrapper">
+            <el-pagination
+                @size-change="onSizeChange"
+                @current-change="onCurrentChange"
+                :current-page="page"
+                :page-sizes="[10, 20, 30, 40, 50]"
+                :page-size="pageSize"
+                layout="total, prev, pager, next"
+                :total="totalElements"
+            >
+            </el-pagination>
+        </div>
+        <post-order-detail ref="detail" :orderId="orderId"></post-order-detail>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import list from '../../mixins/list';
+import post from '../../mixins/post';
+import PostOrderDetail from './PostOrderDetail.vue';
+export default {
+    components: { PostOrderDetail },
+    data() {
+        return {
+            tableData: [],
+            typeList: [
+                {
+                    label: '全部',
+                    value: 'DELIVERY,RECEIVE,FINISH,CANCELLED'
+                },
+                {
+                    label: '运输中',
+                    value: 'DELIVERY,RECEIVE'
+                },
+                {
+                    label: '已完成',
+                    value: 'FINISH'
+                }
+            ],
+            type: 'DELIVERY,RECEIVE,FINISH,CANCELLED',
+            url: '/assetPost/all',
+            // /asset/all
+            search: '',
+            name1: '',
+            list: [],
+            lists: [],
+            orderId: 0
+        };
+    },
+    mixins: [list, post],
+    computed: {
+        ...mapState(['userInfo']),
+        status() {
+            return this.tableData.map(item => {
+                if (item.status === 'FINISH') {
+                    return '已完成';
+                } else {
+                    return '交易中';
+                }
+            });
+        }
+    },
+    watch: {
+        type() {
+            this.$router
+                .replace({
+                    query: {
+                        userId: this.userInfo.id,
+                        type: this.type
+                    }
+                })
+                .catch(() => {});
+            this.getData();
+        }
+    },
+    mounted() {
+        this.getData();
+        if (this.$route.query.orderId) {
+            this.showOrder(Number(this.$route.query.orderId));
+        }
+    },
+    methods: {
+        showOrder(orderId) {
+            this.orderId = orderId;
+            this.$refs.detail.init(orderId);
+        },
+        statusFormatter(row, column, cellValue, index) {
+            let selectedOption = this.statusOptions.find(i => i.value === cellValue);
+            if (selectedOption) {
+                return selectedOption.label;
+            }
+            return '';
+        },
+        beforeData() {
+            return {
+                search: this.search,
+                query: {
+                    userId: this.userInfo.id,
+                    status: this.type,
+                    hide: false,
+                    del: false
+                }
+            };
+        },
+        setList(list) {
+            this.tableData = list;
+        },
+        handleClick(row) {
+            this.$confirm('确定删除该订单吗？', '警告', {
+                confirmButtonText: '确定',
+                cancelButtonText: '退出',
+                customClass: 'myClass',
+                type: 'warning'
+            }).then(() => {
+                this.$http
+                    .post('/order/hide/', {
+                        id: row.id
+                    })
+                    .then(() => {
+                        //hide:false
+                        this.$message.success('删除成功');
+                        setTimeout(() => {
+                            this.getData();
+                        }, 1000);
+                    });
+            });
+        },
+        rowClick(row) {
+            this.showOrder(row.id);
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .el-table__header {
+    background: @bg2 !important;
+}
+/deep/ .el-table__row {
+    background: @bg2 !important;
+    .cell {
+        color: @text0;
+    }
+}
+/deep/ .el-table__empty-text {
+    padding-top: 150px;
+}
+/deep/ .el-table__empty-block {
+    background: @bg2 !important;
+}
+.pagination-wrapper {
+    .pagination();
+}
+.search {
+    width: 280px;
+    height: 42px;
+    border-radius: 8px;
+
+    /deep/.el-input__inner {
+        border: 1px solid #ebeff1;
+        background-color: transparent;
+        color: @text0;
+        border-radius: 8px;
+        &:focus {
+            border-color: @prim;
+        }
+    }
+}
+/deep/ .el-table {
+    margin-left: -10px;
+}
+.customer-table {
+    font-weight: normal;
+}
+/deep/.menu {
+    .el-radio-button__inner {
+        border-color: #ebeff1;
+        background-color: transparent;
+        color: #949699;
+        width: 140px;
+        height: 42px;
+        font-weight: normal;
+        span {
+            font-size: 16px !important;
+        }
+    }
+    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
+        background: @prim;
+        color: #fff;
+        border-color: @prim;
+        font-weight: bold;
+    }
+    .el-radio-button {
+        font-size: 16px !important;
+        &:last-child {
+            .el-radio-button__inner {
+                border-radius: 0 8px 8px 0;
+            }
+        }
+        &:first-child {
+            .el-radio-button__inner {
+                border-radius: 8px 0 0 8px;
+            }
+        }
+    }
+}
+/deep/ .el-empty {
+    margin: 0 auto;
+}
+.search-list {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .select {
+        background-color: transparent !important;
+        /deep/.el-input__inner {
+            background-color: transparent;
+            color: #fff;
+        }
+    }
+}
+.container {
+    padding: 30px 16px 0;
+
+    .top {
+        .flex();
+        justify-content: space-between;
+    }
+    .border {
+        height: 1px;
+        background: @border1;
+        border-radius: 1px;
+        margin: 24px 0 24px;
+    }
+}
+</style>
+<style lang="less">
+.customer-table th {
+    font-weight: normal !important;
+    border: none !important;
+    padding: 0 !important;
+    line-height: 24px;
+}
+.customer-table th > .cell {
+    font-weight: normal !important;
+}
+.customer-table td,
+.customer-table th.is-leaf {
+    border: none;
+    padding: 16px 0;
+}
+//表格最外边框
+.el-table--border,
+.el-table--group {
+    border: none;
+}
+// 头部边框
+.customer-table thead tr th.is-leaf {
+    font-weight: bold !important;
+    border: 1px solid #ebeef5;
+    border-right: none;
+}
+.customer-table thead tr th:nth-last-of-type(2) {
+    border-right: 1px solid #ebeef5;
+}
+// 表格最外层边框-底部边框
+.el-table--border::after,
+.el-table--group::after {
+    width: 0;
+}
+.customer-table::before {
+    width: 0;
+}
+.customer-table .el-table__fixed-right::before,
+.el-table__fixed::before {
+    width: 0;
+}
+//表格有滚动时表格头边框
+.el-table--border th.gutter:last-of-type {
+    border: 1px solid #ebeef5;
+    border-left: none;
+}
+</style>

src/main/pc-space/src/views/user/PostOrderDetail.vue

@@ -0,0 +1,205 @@
+<template>
+    <el-dialog title="订单详情" center append-to-body :visible.sync="show" width="680px" @close="show = false">
+        <div class="order">
+            <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">
+                    <div class="text2">发货物流</div>
+                    <div class="text1">
+                        <span>快递名称</span>
+                        {{ info.courier }}
+                    </div>
+                    <div class="text1">
+                        <span>快递编号</span>
+                        {{ info.courierId }}
+                        <el-button type="info" size="mini" plain @click="copy(info.courierId)">复制</el-button>
+                    </div>
+                </div>
+                <div class="address">
+                    <div class="text2">收货地址</div>
+                    <div class="text1"><span>收货人</span>{{ info.contactName }} {{ info.contactPhone }}</div>
+                    <div class="text1"><span>收货地址</span>{{ info.address }}</div>
+                </div>
+            </template>
+            <div class="product-name">兑换的衍生品</div>
+            <div class="product">
+                <el-image class="product-img" :src="getImg(changeImgs(info.pic))" fit="cover" :lazy="true"></el-image>
+                <div class="text1">{{ info.name }}</div>
+                <div class="text2" v-if="info.number">编号:{{ info.number }}</div>
+                <div class="flex1"></div>
+            </div>
+
+            <div class="order-info">
+                <div class="tips-item">
+                    <div class="text1">订单编号</div>
+                    <div class="text2">
+                        <el-button @click="copy(info.id)" type="info" plain size="mini">复制</el-button>
+                        <span>{{ info.id }}</span>
+                    </div>
+                </div>
+                <div class="tips-item">
+                    <div class="text1">创建时间</div>
+                    <div class="text2">
+                        {{ info.createdAt }}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import post from '../../mixins/post';
+import product from '../../mixins/product';
+export default {
+    data() {
+        return {
+            show: false,
+            info: {},
+            orderId: 0
+        };
+    },
+    mixins: [post, product],
+    methods: {
+        init(id) {
+            this.show = true;
+            this.orderId = id;
+            this.$http.get('/assetPost/get/' + this.orderId).then(res => {
+                this.info = res;
+            });
+        },
+        copy(text) {
+            this.$copyText(text).then(
+                e => {
+                    this.$message.success('复制成功');
+                },
+                e => {
+                    this.$message.warning('复制失败');
+                }
+            );
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.product-name {
+    padding: 20px 0 12px;
+    font-size: 16px;
+    line-height: 24px;
+    color: @text0;
+}
+.product {
+    .flex();
+    .product-img {
+        width: 80px;
+        height: 80px;
+    }
+    .text1 {
+        font-size: 14px;
+        line-height: 20px;
+        color: #000000;
+        opacity: 1;
+        margin: 10px 6px;
+    }
+
+    .text2 {
+        font-size: 13px;
+        line-height: 24px;
+        color: #939599;
+    }
+
+    .price {
+        color: #ff5daf;
+        font-size: 16px;
+    }
+}
+
+.info-item {
+    .flex();
+    justify-content: space-between;
+    height: 64px;
+    .text1 {
+        font-size: 13px;
+        line-height: 24px;
+        color: #939599;
+
+        &.prim {
+            color: @prim;
+        }
+    }
+}
+
+.tips-item {
+    .flex();
+    justify-content: space-between;
+    height: 36px;
+    .text1 {
+        font-size: 13px;
+        line-height: 24px;
+        color: #939599;
+
+        &.prim {
+            color: @prim;
+        }
+    }
+    .text2 {
+        font-size: 13px;
+        line-height: 24px;
+        color: @text0;
+
+        .el-button {
+            margin-right: 20px;
+        }
+    }
+}
+.order-top {
+    padding: 16px 0;
+    border-bottom: 1px solid @border1;
+    .text1 {
+        font-size: 18px;
+        font-weight: bold;
+        line-height: 24px;
+        color: #ff6e91;
+    }
+    .text2 {
+        font-size: 12px;
+        color: @text3;
+        margin-top: 12px;
+    }
+}
+
+.address {
+    position: relative;
+    padding: 20px 0 27px;
+    border-bottom: 1px solid @border1;
+    .text1 {
+        font-size: 14px;
+        line-height: 24px;
+        color: @text0;
+        span {
+            color: @text3;
+            min-width: 145px;
+            display: inline-block;
+        }
+    }
+    .text2 {
+        font-size: 16px;
+        line-height: 24px;
+        color: @text0;
+        padding-bottom: 25px;
+    }
+    .text1 + .text1 {
+        margin-top: 13px;
+    }
+}
+.order-info {
+    padding-top: 20px;
+}
+</style>