511

src/components/AllorderInfo.vue

@@ -6,18 +6,18 @@
                     <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
                     <p>光之城卡牌</p>
                 </div>
-                <div class="box-tit-seller">待支付</div>
+                <!-- <div class="box-tit-seller" v-for="(item, index) in tabs" :key="index">{{ item }}</div> -->
             </div>
-            <div class="box-con-Cards">
-                <img src="../static/imgs/4.jpeg" alt="" />
+            <div class="box-con-Cards" v-for="(item, index) in orderList" :key="index.id" @click="allorder">
+                <img :src="item.images" alt="" />
                 <div class="box-con-right">
-                    <p class="box-con-tit">1105皇权破晓</p>
+                    <p class="box-con-tit">{{ item.caseName }}</p>
                     <div class="box-con-today">
-                        <p>卡盒选号: 卡包02—A</p>
+                        <p>卡盒选号:{{ item.boxName }}</p>
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
-                            <p>¥320</p>
+                            <p>¥{{ item.money }}</p>
                         </div>
                         <p>×1</p>
                     </div>
@@ -25,23 +25,18 @@
             </div>
             <div class="box-num">
                 <span>实际支付</span>
-                <span class="num">¥970</span>
+                <span class="num">¥{{ all.total }}</span>
             </div>
             <div class="box-bor"></div>
             <div class="box-butm">
-                <!-- 灰色线 -->
-                <!-- <div class="box-but">取消订单</div>
-                <div class="box-but">查看物流</div>
-                <div class="box-but">联系卖家</div>
-                <div class="box-but">查看进度</div>
-                <div class="box-but">删除订单</div> -->
-                <!-- 背景橘色 -->
-                <!-- <div class="box-but2">联系买家</div>
-                <div class="box-but2">立即发货</div>
-                <div class="box-but2">立即处理</div> -->
-                <!-- 橘色线 -->
-                <!-- <div class="box-but3">联系买家</div>
-                <div class="box-but3">查看物流</div> -->
+                <div v-if="this.status == 'CREATED'" class="box-but">取消订单</div>
+                <div v-if="this.status == 'CREATED'" class="box-but2">立即支付</div>
+                <div v-if="this.status == 'PAYED'" class="box-but">申请退款</div>
+                <div v-if="this.status == 'PAYED'" class="box-but3">提醒发货</div>
+                <div v-if="this.status == 'SEND'" class="box-but">查看物流</div>
+                <div v-if="this.status == 'SEND'" class="box-but2">立即支付</div>
+                <div v-if="this.status == 'COMPETED'" class="box-but">申请售后</div>
+                <div v-if="this.status == 'COMPETED'" class="box-but3">提醒发货</div>
             </div>
         </div>
     </div>
@@ -52,11 +47,31 @@ export default {
         all: {
             type: Object,
             default: () => {
-                return {};
+                return {
+                    orderList: []
+                };
             }
         }
     },
-    data() {}
+    data() {
+        return {
+            active: '待支付',
+            tabs: ['待支付', '待发货', '待发货', '已完成']
+        };
+    },
+    methods: {
+        allFn() {
+            this.orderList = this.all.orderBoxDTOS;
+            this.status = this.all.status;
+            this.id = this.all.orderInfoId;
+        },
+        allorder() {
+            this.navigateTo('/pages/orderdetails?id=' + this.id);
+        }
+    },
+    created() {
+        this.allFn();
+    }
 };
 </script>
 

src/mixins/allPage.js

@@ -16,7 +16,7 @@ export default {
                 },
                 {
                     value: 'SEND',
-                    label: '待签收'
+                    label: '待收货'
                 },
                 {
                     value: 'TAKEN',

src/pages/allorder.vue

@@ -17,7 +17,7 @@
                 {{ item }}
             </div>
         </div>
-        <div v-for="(item, index) in List" :key="index + 2">
+        <div v-for="(item, index) in allList" :key="index + 2">
             <allorder-info :all="item"></allorder-info>
         </div>
         <van-empty v-if="empty" image="/native/imgs/kong_png_xiaoxiliebiao.png" description="暂无卡包信息哦～">
@@ -35,7 +35,7 @@ export default {
             active: '全部',
             tabs: ['全部', '待支付', '待发货', '待签收', '已完成'],
             empty: false,
-            List: []
+            allList: []
         };
     },
     methods: {
@@ -44,29 +44,20 @@ export default {
             this.allFn();
         },
         allFn() {
+            this.allList = [];
             this.showLoading();
             this.list = [];
             this.empty = false;
             let userId = this.$store.state.userInfo.id;
             this.$http
-                .post(
-                    '/orderInfo/all',
-                    {
-                        query: {
-                            caseStatus: this.allStatus(this.active),
-                            userId
-                        }
-                    },
-                    {
-                        header: {
-                            'Content-Type': 'application/json'
-                        }
-                    }
-                )
+                .get('/orderInfo/showMyOrderInfos', {
+                    orderStatus: this.allStatus(this.active),
+                    userId
+                })
                 .then(res => {
-                    console.log(res);
                     this.hideLoading();
-                    this.List = res;
+                    console.log(res);
+                    this.allList = res;
                     if (res.length === 0) {
                         this.empty = true;
                     }

src/pages/confirmorder.vue

@@ -132,7 +132,6 @@ export default {
                     boxIds
                 })
                 .then(res => {
-                    console.log(res.total);
                     this.total = res.total;
                     this.Boxes = res.selectedBoxes;
                     this.cardCaseInfo = res.selectedCase.collection;

src/pages/orderdetails.vue

@@ -8,25 +8,27 @@
 <template>
     <div class="container">
         <div class="box-top">
-            <p>卖家已发货</p>
-            <h3>宝贝正在飞奔到你的怀中!</h3>
+            <p>{{ this.status.label }}</p>
+            <h3>{{ this.status.name }}!</h3>
         </div>
         <div class="box-adderss">
-            <div class="box-adderss-con">
-                <img src="../static/imgs/dingdan_icon_wuliu@3x.png" alt="" />
-                <div class="box-con-top">
-                    <p>南京市场八部的 王智元 揽件</p>
-                    <span class="box-adderss-span">2019-05-20 08:45:56</span>
+            <div v-if="this.status.orderStatus !== 'CREATED' && this.status.orderStatus !== 'PAYED'">
+                <div class="box-adderss-con">
+                    <img src="../static/imgs/dingdan_icon_wuliu@3x.png" alt="" />
+                    <div class="box-con-top">
+                        <p>{{ this.stepsShow.status }}</p>
+                        <p class="box-adderss-span">{{ this.stepsShow.time }}</p>
+                    </div>
+                    <div class="box-adderss-right" @click="logistics">></div>
                 </div>
-                <div class="box-adderss-right" @click="logistics">></div>
+                <div class="box-border"></div>
             </div>
-            <div class="box-border"></div>
             <div class="box-adderss-con">
                 <img src="../static/imgs/dingdan_icon_dizhi@3x.png" alt="" />
                 <div class="box-con-top">
-                    <span>小明</span>
-                    <span class="box-con-span">17635849638</span>
-                    <p>江苏省南京市玄武区中山路18号德基广场</p>
+                    <span>{{ this.addressList.name }}</span>
+                    <span class="box-con-span">{{ this.addressList.phone }}</span>
+                    <p>{{ addressList.province + addressList.city + addressList.district + addressList.detail }}</p>
                 </div>
             </div>
         </div>
@@ -73,7 +75,7 @@
         <div class="box-buttom">
             <div class="box-buttom-con">
                 <p>实际支付</p>
-                <p class="box-buttom-p">¥970</p>
+                <p class="box-buttom-p">¥{{ total }}</p>
             </div>
         </div>
         <div class="box-buttom">
@@ -90,64 +92,128 @@
         </div>
         <div class="box-border-but"></div>
         <!-- 下单时间 -->
-        <div class="box-footer">
-            <div class="box-footer-con">
-                <p>订单编号</p>
-                <div class="box-footer-cr">
-                    <span @click="copy">复制</span>
-                    <p class="box-footer-p">2019052035464</p>
+        <div v-if="showTimeTab">
+            <div class="box-footer">
+                <div class="box-footer-con">
+                    <p>订单编号</p>
+                    <div class="box-footer-cr">
+                        <span @click="copy">复制</span>
+                        <p class="box-footer-p">2019052035464</p>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div class="box-footer">
-            <div class="box-footer-con">
-                <p>创建时间</p>
-                <p class="box-footer-p">{{ cardCaseInfo.createdAt }}</p>
+            <div class="box-footer">
+                <div class="box-footer-con">
+                    <p>创建时间</p>
+                    <p class="box-footer-p">{{ cardCaseInfo.createdAt }}</p>
+                </div>
             </div>
-        </div>
-        <div class="box-footer">
-            <div class="box-footer-con">
-                <p>付款时间</p>
-                <p class="box-footer-p">2021-05-20 07:54:36</p>
+            <div class="box-footer">
+                <div class="box-footer-con">
+                    <p>付款时间</p>
+                    <p class="box-footer-p">2021-05-20 07:54:36</p>
+                </div>
             </div>
-        </div>
-        <div class="box-footer">
-            <div class="box-footer-con">
-                <p>成交时间</p>
-                <p class="box-footer-p">2021-05-20 07:54:46</p>
+            <div class="box-footer">
+                <div class="box-footer-con">
+                    <p>成交时间</p>
+                    <p class="box-footer-p">2021-05-20 07:54:46</p>
+                </div>
             </div>
         </div>
         <div class="box-footer-nav">
-            <van-notice-bar color="#FF6C00" text="为了保障您的售后服务，收货时请拍摄完整的快递开封视频避免纠纷" />
+            <van-notice-bar
+                v-if="this.status.orderStatus === 'SEND'"
+                color="#FF6C00"
+                text="为了保障您的售后服务，收货时请拍摄完整的快递开封视频避免纠纷"
+            />
             <div class="box-btn">
-                <div class="box-btn-left" :style="{ backgroundImage: `url(/native/imgs/btn_02@3x.png)` }">
+                <!-- 已完成 -->
+                <div
+                    v-if="this.status.orderStatus === 'COMPETED'"
+                    class="box-btn-left"
+                    :style="{ backgroundImage: `url(/native/imgs/btn_02@3x.png)` }"
+                >
                     删除订单
                 </div>
-                <div class="box-btn-right" :style="{ backgroundImage: `url(/native/imgs/btn_01@3x.png)` }">
+                <div
+                    v-if="this.status.orderStatus === 'COMPETED'"
+                    class="box-btn-right"
+                    :style="{ backgroundImage: `url(/native/imgs/btn_01@3x.png)` }"
+                >
                     申请售后
                 </div>
+                <!-- 已发货 -->
+                <div
+                    v-if="this.status.orderStatus === 'SEND'"
+                    class="box-btn-left"
+                    :style="{ backgroundImage: `url(/native/imgs/btn_02@3x.png)` }"
+                >
+                    查看物流
+                </div>
+                <div
+                    v-if="this.status.orderStatus === 'SEND'"
+                    class="box-btn-right"
+                    :style="{ backgroundImage: `url(/native/imgs/btn_01@3x.png)` }"
+                >
+                    确认收货
+                </div>
+                <!-- 待支付 -->
+                <div
+                    v-if="this.status.orderStatus === 'CREATED'"
+                    class="box-btn-left2"
+                    :style="{ backgroundImage: `url(/native/imgs/btn_03@3x.png)` }"
+                >
+                    取消订单
+                </div>
+                <div
+                    v-if="this.status.orderStatus === 'CREATED'"
+                    class="box-btn-right"
+                    :style="{ backgroundImage: `url(/native/imgs/btn_01@3x.png)` }"
+                >
+                    立即支付
+                </div>
+                <!-- 已取消 -->
+                <div
+                    v-if="this.status.orderStatus === 'CANCELED'"
+                    class="box-btn-left2"
+                    :style="{ backgroundImage: `url(/native/imgs/btn_03@3x.png)` }"
+                >
+                    取消订单
+                </div>
+                <div
+                    v-if="this.status.orderStatus === 'CANCELED'"
+                    class="box-btn-right"
+                    :style="{ backgroundImage: `url(/native/imgs/btn_01@3x.png)` }"
+                >
+                    立即支付
+                </div>
             </div>
         </div>
-        <van-dialog use-slot title="快递详情" :showConfirmButton="false" :show="show">
-            <div v-for="(item, index) in steps" :key="index">
-                <div class="dialog-con">
-                    <div>
-                        <span>物流快递：百世快递</span>
-                    </div>
-                    <div>
-                        <span>物流单号：46313451613311020</span>
-                        <span class="dialog-cv">复制</span>
-                    </div>
-                    <div class="dialog-border"></div>
+        <van-dialog
+            custom-style="height:450px;overflow-y: auto;"
+            use-slot
+            title="快递详情"
+            :showConfirmButton="false"
+            :show="show"
+        >
+            <div class="dialog-con">
+                <div>
+                    <span>物流快递：{{ this.logisTics.expName }}</span>
                 </div>
-                <div class="steps-con">
-                    <div class="steps-time">{{ item.time }}</div>
-                    <van-steps :steps="steps" direction="vertical">
-                        <div>{{ item.text }}</div>
-                        <div>{{ item.desc }}</div>
-                    </van-steps>
+                <div>
+                    <span>物流单号：{{ this.logisTics.number }}</span>
+                    <span class="dialog-cv">复制</span>
                 </div>
+                <div class="dialog-border"></div>
             </div>
+            <!-- <div class="steps-con" v-for="(item, index) in stepsList" :key="index.id"> -->
+            <!-- <div class="steps-time"></div> -->
+            <van-steps :steps="stepsList" direction="vertical">
+                <div>{{ stepsList.text }}</div>
+                <div>{{ stepsList.desc }}</div>
+            </van-steps>
+            <!-- </div> -->
         </van-dialog>
     </div>
 </template>
@@ -161,27 +227,66 @@ export default {
             Boxes: [],
             cardCaseInfo: {},
             total: '',
-            steps: [
-                {
-                    text: '江苏省南京市玄武区派件员 王智元',
-                    desc: '15686868686正在为你派件',
-                    activeColor: '#000',
-                    time: '02-20 08:28'
-                }
-            ]
+            addressList: [],
+            name: '',
+            showTimeTab: false,
+            orderInfoId: '',
+            records: [],
+            status: [],
+            logisTics: [],
+            stepsList: [],
+            stepsShow: []
         };
     },
     methods: {
         logistics() {
             this.show = true;
-            console.log(this.steps);
         },
         getFn() {
             this.$http.get('/orderInfo/get/' + this.$mp.query.id).then(res => {
-                console.log(res);
+                this.status = res;
+                this.addressList = res.address;
                 this.total = res.total;
                 this.Boxes = res.cardBoxList;
+                this.orderInfoId = res.id;
+                console.log(this.orderInfoId);
                 this.cardCaseInfo = res.cardCase.collection;
+                if (this.status.orderStatus === 'CREATED') {
+                    this.status.label = '待支付';
+                    this.status.name = '请尽快支付，04分56秒 后未支付将自动取消订单';
+                }
+                if (this.status.orderStatus === 'CANCELED') {
+                    this.status.label = '已取消';
+                    this.status.name = '很遗憾，订单已取消';
+                }
+                if (this.status.orderStatus === 'PAYED') {
+                    this.status.label = '代发货';
+                    this.status.name = '很快就发货了，请耐心等待哦！';
+                    this.showTimeTab = true;
+                }
+                if (this.status.orderStatus === 'COMPETED') {
+                    this.status.label = '已完成';
+                    this.status.name = '交易成功啦！快去把好物分享给小伙伴吧';
+                    this.showTimeTab = true;
+                }
+                if (this.status.orderStatus === 'SEND') {
+                    this.status.label = '卖家已发货';
+                    this.status.name = '宝贝正在飞奔到你的怀中！';
+                    this.showTimeTab = true;
+                }
+            });
+            this.$http.get('/orderInfo/checkLogistic', { orderInfoId: this.$mp.query.id }).then(res => {
+                this.logisTics = res.logistic.result;
+                let steps = [];
+                res.logistic.result.list.forEach(item => {
+                    let newStep = {
+                        desc: item.status,
+                        text: item.time
+                    };
+                    steps.push(newStep);
+                });
+                this.stepsList = steps;
+                this.stepsShow = res.logistic.result.list[0];
             });
         },
         copy() {
@@ -209,11 +314,10 @@ export default {
     /deep/ .van-step__circle-container {
         height: 0;
     }
-    padding-bottom: 150px;
+    padding-bottom: 140px;
     .box-top {
         height: 102px;
         background: #ff6c00;
-        margin-bottom: 20px;
         p {
             height: 34px;
             font-size: 24px;
@@ -232,8 +336,7 @@ export default {
         }
     }
     .box-adderss {
-        margin: 0 20px;
-        height: 161px;
+        margin: 21px 20px;
         .box-adderss-con {
             display: flex;
             img {
@@ -242,27 +345,26 @@ export default {
                 margin-right: 7px;
             }
             .box-adderss-right {
+                font-weight: bold;
                 width: 6px;
                 height: 11px;
-                margin: 15px 0 0 118px;
+                margin: 15px 0 0 0;
             }
             .box-con-top {
                 span {
-                    height: 24px;
                     font-size: 14px;
                     font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                 }
                 p {
-                    height: 24px;
                     font-size: 14px;
                     font-weight: bold;
                     color: #000000;
                     line-height: 24px;
+                    width: 300px;
                 }
                 .box-adderss-span {
-                    height: 24px;
                     font-size: 13px;
                     font-weight: 400;
                     color: #c8c9cc;
@@ -452,7 +554,6 @@ export default {
     }
     .box-footer-nav {
         .bottom();
-        height: 104px;
         position: fixed;
         bottom: 0;
         width: 100%;
@@ -484,6 +585,17 @@ export default {
                 text-align: center;
                 line-height: 48px;
             }
+            .box-btn-left2 {
+                width: 163px;
+                height: 48px;
+                background-position: center;
+                background-size: 100% 100%;
+                font-size: 16px;
+                font-weight: 400;
+                color: #c8c9cc;
+                text-align: center;
+                line-height: 48px;
+            }
             .box-btn-right {
                 width: 163px;
                 height: 48px;