526

src/pages/Applydetails.vue

@@ -7,38 +7,51 @@
 <template>
     <div class="apply">
         <div class="top">
-            <img src="../native/imgs/icon_tuikuan_chenggong@3x.png" alt="" />
-            <p>退款成功</p>
-            <span
+            <img
+                v-if="ApplydetailList.orderStatus === 'REFUNDED'"
+                src="../native/imgs/icon_tuikuan_chenggong@3x.png"
+                alt=""
+            />
+            <img
+                v-if="ApplydetailList.orderStatus === 'REFUND'"
+                src="../native/imgs/icon_tuikuan_zhong@3x.png"
+                alt=""
+            />
+            <p>{{ label }}</p>
+            <span v-if="ApplydetailList.orderStatus === 'REFUNDED'"
                 >申请成功，退款将在72小时内按照原支付
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;渠道返回，请注意查收</span
             >
+            <span v-if="ApplydetailList.orderStatus === 'REFUND'">
+                退款审核中，请耐心等待，退款将在72小 &nbsp;&nbsp;时内按照原支付渠道返回，请注意查收</span
+            >
         </div>
         <div class="bor"></div>
         <div class="con">
             <div class="price">
                 <p>退款总金额</p>
-                <span>¥970</span>
+                <span>¥{{ ApplydetailList.total }}</span>
             </div>
+            <div class="border"></div>
             <div class="box-tit">
                 <div>
-                    <img src="/native/tabbar/icon_kapai_shangjia_da@3x.png" alt="" />
-                    <p>光之城卡牌</p>
+                    <img :src="store.logo" alt="" />
+                    <p>{{ store.storeName }}</p>
                 </div>
                 <div class="box-tit-seller">联系卖家</div>
             </div>
-            <div>
+            <div v-for="(item, index) in Boxes" :key="index.id">
                 <div class="box-con">
                     <div class="box-con-Cards">
-                        <img src="../native/imgs/marker.png" alt="" />
+                        <img :src="cardCaseInfo.images[0]" alt="" />
                         <div class="box-con-right">
-                            <p class="box-con-tit">1105皇权破晓</p>
+                            <p class="box-con-tit">{{ cardCaseInfo.name }}</p>
                             <div class="box-con-today">
-                                <p>卡盒选号:卡包02—A</p>
+                                <p>卡盒选号: {{ item.groupCode + item.boxCode }}</p>
                             </div>
                             <div class="box-con-money">
                                 <div class="box-con-num">
-                                    <p>¥320</p>
+                                    <p>¥{{ item.boxPrice }}</p>
                                 </div>
                                 <p>×1</p>
                             </div>
@@ -46,12 +59,87 @@
                     </div>
                 </div>
             </div>
+            <div class="border2"></div>
+            <div class="box-buttom">
+                <div class="box-buttom-con">
+                    <p>退款原因</p>
+                    <span>多拍/错拍/不想要</span>
+                </div>
+            </div>
+            <div class="box-buttom">
+                <div class="box-buttom-con">
+                    <p>申请时间</p>
+                    <span>{{ ApplydetailList.createdAt }}</span>
+                </div>
+            </div>
+            <div class="box-buttom">
+                <div class="box-buttom-con">
+                    <p>订单编号</p>
+                    <div class="box-footer-cr">
+                        <span @click="orderCopy">复制</span>
+                        <p class="box-footer-p">{{ ApplydetailList.transactionId }}</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 <script>
 export default {
-    data() {}
+    data() {
+        return {
+            ApplydetailList: [],
+            cardBoxList: [],
+            orderBoxDTOS: [],
+            store: {},
+            cardCaseInfo: {},
+            Boxes: []
+        };
+    },
+    created() {
+        this.Applydetail();
+    },
+    methods: {
+        Applydetail() {
+            this.showLoading();
+            this.$http
+                .get('/orderInfo/get/' + this.$mp.query.id)
+                .then(res => {
+                    this.hideLoading();
+                    this.cardCaseInfo = res.cardCase.collection;
+                    this.ApplydetailList = res;
+                    this.store = res.store;
+                    this.cardBoxList = res.cardBoxList;
+                    this.Boxes = res.cardBoxList;
+                    if (this.ApplydetailList.orderStatus === 'REFUND') {
+                        this.label = '退款审核中';
+                    }
+                    if (this.ApplydetailList.orderStatus === 'REFUNDED') {
+                        this.label = '退款成功';
+                    }
+                })
+                .catch(e => {
+                    this.hideLoading();
+                    if (e.error) {
+                        this.toast(e.rror);
+                    }
+                });
+        },
+        orderCopy() {
+            wx.setClipboardData({
+                data: this.ApplydetailList.transactionId + '',
+                success(res) {
+                    wx.getClipboardData({
+                        success(res) {
+                            wx.showToast({
+                                title: '订单编号复制成功'
+                            });
+                        }
+                    });
+                }
+            });
+        }
+    }
 };
 </script>
 <style lang="less" scoped>
@@ -68,7 +156,8 @@ export default {
             font-weight: bold;
             color: #000000;
             line-height: 24px;
-            margin: 20px 0 16px 98px;
+            text-align: center;
+            margin: 20px 0 16px 0px;
         }
         span {
             width: 255px;
@@ -113,7 +202,7 @@ export default {
                     font-size: 14px;
                     font-weight: bold;
                     color: #000000;
-                    margin-left: 2px;
+                    margin-left: 9px;
                 }
             }
             .box-tit-seller {
@@ -124,7 +213,6 @@ export default {
             }
         }
         .box-con {
-            height: 160px;
             background: #ffffff;
             border-radius: 12px;
             .box-con-Cards {
@@ -135,7 +223,7 @@ export default {
                     border-radius: 6px;
                 }
                 .box-con-right {
-                    width: 237px;
+                    width: 78%;
                     margin-left: 8px;
                     .box-con-tit {
                         font-size: 16px;
@@ -150,6 +238,7 @@ export default {
                     background: #f5f7fa;
                     border-radius: 6px;
                     width: 142px;
+                    margin: 4px 0 11px 0;
                     p {
                         font-size: 14px;
                         font-weight: 400;
@@ -159,7 +248,6 @@ export default {
                 .box-con-money {
                     .flex();
                     justify-content: space-between;
-                    margin-top: 28px;
                     .box-con-num {
                         .flex();
                         img {
@@ -180,6 +268,61 @@ export default {
                 }
             }
         }
+        .border {
+            height: 1px;
+            background: #f5f7fa;
+        }
+        .border2 {
+            margin: 20px 0 14px 0;
+            height: 1px;
+            background: #f5f7fa;
+        }
+        .box-buttom {
+            margin-bottom: 16px;
+            .box-buttom-con {
+                .flex();
+                justify-content: space-between;
+                p {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                }
+                span {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #000000;
+                    line-height: 22px;
+                }
+                .box-footer-cr {
+                    display: flex;
+                    span {
+                        width: 38px;
+                        height: 18px;
+                        border-radius: 2px;
+                        border: 2px solid #c8c9cc;
+                        font-size: 12px;
+                        font-weight: 400;
+                        color: #c8c9cc;
+                        line-height: 18px;
+                        text-align: center;
+                        margin-right: 3px;
+                    }
+                }
+                p {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #939599;
+                    line-height: 24px;
+                }
+                .box-footer-p {
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #000000;
+                    line-height: 22px;
+                }
+            }
+        }
     }
 }
 </style>