510

project.config.json

@@ -149,6 +149,12 @@
                     "name": "确认订单",
                     "pathName": "/pages/address",
                     "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我买到的",
+                    "pathName": "/pages/allorder",
+                    "scene": null
                 }
             ]
         }

src/components/AllorderInfo.vue

@@ -0,0 +1,224 @@
+<template>
+    <div class="box-con">
+        <div class="box-con2">
+            <div class="box-tit">
+                <div>
+                    <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+                    <p>光之城卡牌</p>
+                </div>
+                <div class="box-tit-seller">待支付</div>
+            </div>
+            <div class="box-con-Cards">
+                <img src="../static/imgs/4.jpeg" alt="" />
+                <div class="box-con-right">
+                    <p class="box-con-tit">1105皇权破晓</p>
+                    <div class="box-con-today">
+                        <p>卡盒选号: 卡包02—A</p>
+                    </div>
+                    <div class="box-con-money">
+                        <div class="box-con-num">
+                            <p>¥320</p>
+                        </div>
+                        <p>×1</p>
+                    </div>
+                </div>
+            </div>
+            <div class="box-num">
+                <span>实际支付</span>
+                <span class="num">¥970</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>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        all: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    data() {}
+};
+</script>
+
+<style lang="less" scoped>
+.box-con {
+    background: #ffffff;
+    border-radius: 12px;
+    margin: 8px 16px;
+    padding-bottom: 5px;
+    .box-con2 {
+        margin: 16px 16px;
+        .box-tit {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding-top: 16px;
+            div {
+                display: flex;
+                align-items: center;
+                img {
+                    width: 17px;
+                    height: 17px;
+                }
+                p {
+                    height: 22px;
+                    font-size: 14px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 22px;
+                    margin-left: 2px;
+                }
+            }
+            .box-tit-seller {
+                height: 22px;
+                font-size: 14px;
+                font-weight: bold;
+                color: #ff6c00;
+                line-height: 22px;
+            }
+        }
+        .box-con-Cards {
+            margin: 16px 0 20px 20px;
+            display: flex;
+            img {
+                width: 90px;
+                height: 130px;
+                border-radius: 6px;
+            }
+            .box-con-right {
+                width: 237px;
+                margin-left: 8px;
+                .box-con-tit {
+                    height: 24px;
+                    font-size: 16px;
+                    font-weight: bold;
+                    color: #000000;
+                    line-height: 24px;
+                    margin: 5px 0 10px 0;
+                }
+            }
+            .box-con-today {
+                display: flex;
+                height: 30px;
+                background: #f5f7fa;
+                border-radius: 6px;
+                width: 142px;
+                align-items: center;
+                p {
+                    height: 24px;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #303133;
+                    line-height: 24px;
+                }
+            }
+            .box-con-money {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-top: 28px;
+                .box-con-num {
+                    display: flex;
+                    align-items: center;
+                    img {
+                        width: 16px;
+                        height: 16px;
+                    }
+                    p {
+                        height: 22px;
+                        font-size: 14px;
+                        font-weight: normal;
+                        color: #c8c9cc;
+                        line-height: 22px;
+                    }
+                }
+                p {
+                    height: 24px;
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #c8c9cc;
+                    line-height: 24px;
+                }
+            }
+        }
+        .box-num {
+            text-align: right;
+            span {
+                font-size: 14px;
+                font-weight: bold;
+                color: #000000;
+            }
+            .num {
+                font-size: 16px;
+                font-weight: bold;
+                color: #f42202;
+                padding-left: 10px;
+            }
+        }
+        .box-bor {
+            width: 303px;
+            height: 1px;
+            background: #f5f7fa;
+            margin: 19px 0 16px 0;
+        }
+        .box-butm {
+            display: flex;
+            justify-content: flex-end;
+            .box-but {
+                width: 80px;
+                height: 36px;
+                border-radius: 8px;
+                border: 1px solid #c8c9cc;
+                font-size: 14px;
+                font-weight: 400;
+                color: #c8c9cc;
+                line-height: 36px;
+                text-align: center;
+                margin-right: 12px;
+            }
+            .box-but2 {
+                width: 80px;
+                height: 36px;
+                background: #ff6c00;
+                border-radius: 8px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ffffff;
+                line-height: 36px;
+                text-align: center;
+            }
+            .box-but3 {
+                width: 80px;
+                height: 36px;
+                border-radius: 8px;
+                border: 1px solid #ff6c00;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ff6c00;
+                line-height: 36px;
+                text-align: center;
+            }
+        }
+    }
+}
+</style>

src/components/CardCase.vue

@@ -115,7 +115,7 @@ export default {
             this.$emit('update:chooseIds', list);
         },
         confirm() {
-            this.$emit('update:name', `已选6包，共1920元，邮费10元`);
+            this.$emit('update:name', `已选${this.chooseIds.length}包，共${this.money}元，邮费10元`);
             this.show = false;
         }
     }

src/mixins/allPage.js

@@ -0,0 +1,59 @@
+export default {
+    data() {
+        return {
+            caseStatusList: [
+                {
+                    value: 'CREATED',
+                    label: '待支付'
+                },
+                {
+                    value: 'CANCELED',
+                    label: '已取消'
+                },
+                {
+                    value: 'PAYED',
+                    label: '待发货'
+                },
+                {
+                    value: 'SEND',
+                    label: '待签收'
+                },
+                {
+                    value: 'TAKEN',
+                    label: '已收货'
+                },
+                {
+                    value: 'REFUND',
+                    label: '申请退款'
+                },
+                {
+                    value: 'REFUNDED',
+                    label: '已退款'
+                },
+                {
+                    value: 'COMPETED',
+                    label: '已完成'
+                },
+                {
+                    value: '',
+                    label: '全部'
+                }
+            ]
+        };
+    },
+    methods: {
+        allStatus(label) {
+            if (label) {
+                return (
+                    [...this.caseStatusList].find(item => {
+                        return item.label === label;
+                    }) || {
+                        value: ''
+                    }
+                ).value;
+            } else {
+                return '';
+            }
+        }
+    }
+};

src/mixins/cardPage.js

@@ -31,7 +31,9 @@ export default {
                 return (
                     [...this.caseStatusList].find(item => {
                         return item.label === label;
-                    }) || { value: '' }
+                    }) || {
+                        value: ''
+                    }
                 ).value;
             } else {
                 return '';

src/pages/add.vue

@@ -10,7 +10,7 @@
     <div class="container">
         <div class="box" v-for="(item, index) in addressList" :key="index">
             <div class="box-con">
-                <div @click="add">
+                <div @click="add(item)">
                     <div class="box-con-top">
                         <p>收货人</p>
                         <span class="box-con-span">{{ item.name }}</span>
@@ -53,9 +53,9 @@ export default {
             });
         },
         // 添加到确认订单
-        add() {
+        add(item) {
             wx.redirectTo({
-                url: './address'
+                url: `./address?address=${JSON.stringify(item)}`
             });
         }
     },

src/pages/address.vue

@@ -11,8 +11,21 @@
         </div>
         <div class="box-address">
             <div class="box-lr">
-                <span class="box-lr-sp">{{ addres ? addres : '选择收获地址' }}</span>
-                <span @click="address">></span>
+                <span class="box-lr-sp" v-if="!addressList">选择收获地址</span>
+                <div class="box-con2" v-else>
+                    <div class="box-con-top">
+                        <p>收货人</p>
+                        <span class="box-con-span">{{ addressList.name }}</span>
+                        <span class="box-con-code">{{ addressList.phone }}</span>
+                    </div>
+                    <div class="box-con-top">
+                        <p>收货地址</p>
+                        <span class="box-con-sp">
+                            {{ addressList.province + addressList.city + addressList.district + addressList.detail }}
+                        </span>
+                    </div>
+                </div>
+                <p class="box-p" @click="address">></p>
             </div>
         </div>
         <img src="../static/imgs/img_dizhitiao@3x.png" alt="" />
@@ -75,7 +88,7 @@
 export default {
     data() {
         return {
-            addres: ''
+            addressList: undefined
         };
     },
     methods: {
@@ -89,6 +102,12 @@ export default {
                 url: './order'
             });
         }
+    },
+    onLoad(option) {
+        if (option.address) {
+            let data = JSON.parse(option.address);
+            this.addressList = data;
+        }
     }
 };
 </script>
@@ -123,21 +142,57 @@ export default {
         }
     }
     .box-address {
-        height: 120px;
+        // height: 120px;
         .box-lr {
             display: flex;
             align-items: center;
             justify-content: space-between;
             margin: 0 23px;
+            height: 120px;
+            .box-con2 {
+                margin-top: 30px;
+                .box-con-top {
+                    display: flex;
+                    margin-bottom: 8px;
+                    p {
+                        width: 68px;
+                        height: 24px;
+                        font-size: 14px;
+                        font-weight: 400;
+                        color: #c8c9cc;
+                        line-height: 24px;
+                    }
+                    .box-con-span {
+                        height: 24px;
+                        font-size: 14px;
+                        font-weight: bold;
+                        color: #000000;
+                        line-height: 24px;
+                    }
+                    .box-con-code {
+                        height: 24px;
+                        font-size: 14px;
+                        font-weight: bold;
+                        color: #000000;
+                        line-height: 24px;
+                        margin-left: 14px;
+                    }
+                    .box-con-sp {
+                        height: 24px;
+                        font-size: 14px;
+                        font-weight: bold;
+                        color: #000000;
+                        line-height: 24px;
+                    }
+                }
+            }
             .box-lr-sp {
-                height: 26px;
                 font-size: 16px;
                 font-weight: 400;
                 color: #c8c9cc;
                 line-height: 120px;
             }
-            span {
-                height: 11px;
+            .box-p {
                 line-height: 120px;
                 font-weight: bold;
             }

src/pages/allorder.vue

@@ -2,482 +2,97 @@
 {
     "navigationBarTitleText": "我买到的",
     "navigationBarBackgroundColor": "#ffffff",
-    "navigationBarTextStyle": "black",
-    "backgroundTextStyle":"light"
 }
 </config>
 <template>
     <div class="container">
-        <van-tabs @click="onClick">
-            <van-tab title="全部">
-                <!-- 待支付 -->
-                <div class="box-con">
-                    <div class="box-con2">
-                        <div class="box-tit">
-                            <div>
-                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-                                <p>光之城卡牌</p>
-                            </div>
-                            <div class="box-tit-seller">待支付</div>
-                        </div>
-                        <div class="box-con-Cards">
-                            <img src="../static/imgs/4.jpeg" alt="" />
-                            <div class="box-con-right">
-                                <p class="box-con-tit">1105皇权破晓</p>
-                                <div class="box-con-today">
-                                    <p>卡盒选号: 卡包02—A</p>
-                                </div>
-                                <div class="box-con-money">
-                                    <div class="box-con-num">
-                                        <p>¥320</p>
-                                    </div>
-                                    <p>×1</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box-num">
-                            <span>实际支付</span>
-                            <span class="num">¥970</span>
-                        </div>
-                        <div class="box-bor"></div>
-                        <div class="box-butm">
-                            <div class="box-but">取消订单</div>
-                            <div class="box-but2">立即支付</div>
-                        </div>
-                    </div>
-                </div>
-                <!-- 代发货 -->
-                <div class="box-con">
-                    <div class="box-con2">
-                        <div class="box-tit">
-                            <div>
-                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-                                <p>光之城卡牌</p>
-                            </div>
-                            <div class="box-tit-seller">待发货</div>
-                        </div>
-                        <div class="box-con-Cards">
-                            <img src="../static/imgs/1.jpeg" alt="" />
-                            <div class="box-con-right">
-                                <p class="box-con-tit">1105皇权破晓</p>
-                                <div class="box-con-today">
-                                    <p>卡盒选号: 卡包02—A</p>
-                                </div>
-                                <div class="box-con-money">
-                                    <div class="box-con-num">
-                                        <p>¥320</p>
-                                    </div>
-                                    <p>×1</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box-num">
-                            <span>实际支付</span>
-                            <span class="num">¥970</span>
-                        </div>
-                        <div class="box-bor"></div>
-                        <div class="box-butm">
-                            <div class="box-but3">查看订单</div>
-                        </div>
-                    </div>
-                </div>
-                <!-- 待收货 -->
-                <div class="box-con">
-                    <div class="box-con2">
-                        <div class="box-tit">
-                            <div>
-                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-                                <p>光之城卡牌</p>
-                            </div>
-                            <div class="box-tit-seller">待收货</div>
-                        </div>
-                        <div class="box-con-Cards">
-                            <img src="../static/imgs/2.jpeg" alt="" />
-                            <div class="box-con-right">
-                                <p class="box-con-tit">1105皇权破晓</p>
-                                <div class="box-con-today">
-                                    <p>卡盒选号: 卡包02—A</p>
-                                </div>
-                                <div class="box-con-money">
-                                    <div class="box-con-num">
-                                        <p>¥320</p>
-                                    </div>
-                                    <p>×1</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box-num">
-                            <span>实际支付</span>
-                            <span class="num">¥970</span>
-                        </div>
-                        <div class="box-bor"></div>
-                        <div class="box-butm">
-                            <div class="box-but">查看物流</div>
-                            <div class="box-but2">确认收货</div>
-                        </div>
-                    </div>
-                </div>
-                <!-- 已完成 -->
-                <div class="box-con">
-                    <div class="box-con2">
-                        <div class="box-tit">
-                            <div>
-                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-                                <p>光之城卡牌</p>
-                            </div>
-                            <div class="box-tit-seller">已完成</div>
-                        </div>
-                        <div class="box-con-Cards">
-                            <img src="../static/imgs/3.jpeg" alt="" />
-                            <div class="box-con-right">
-                                <p class="box-con-tit">1105皇权破晓</p>
-                                <div class="box-con-today">
-                                    <p>卡盒选号: 卡包02—A</p>
-                                </div>
-                                <div class="box-con-money">
-                                    <div class="box-con-num">
-                                        <p>¥320</p>
-                                    </div>
-                                    <p>×1</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box-num">
-                            <span>实际支付</span>
-                            <span class="num">¥970</span>
-                        </div>
-                        <div class="box-bor"></div>
-                        <div class="box-butm">
-                            <div class="box-but">申请售后</div>
-                            <div class="box-but3">查看订单</div>
-                        </div>
-                    </div>
-                </div>
-            </van-tab>
-            <van-tab title="待支付">
-                <div class="box-con">
-                    <div class="box-con2">
-                        <div class="box-tit">
-                            <div>
-                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-                                <p>光之城卡牌</p>
-                            </div>
-                            <div class="box-tit-seller">待支付</div>
-                        </div>
-                        <div class="box-con-Cards">
-                            <img src="../static/imgs/4.jpeg" alt="" />
-                            <div class="box-con-right">
-                                <p class="box-con-tit">1105皇权破晓</p>
-                                <div class="box-con-today">
-                                    <p>卡盒选号: 卡包02—A</p>
-                                </div>
-                                <div class="box-con-money">
-                                    <div class="box-con-num">
-                                        <p>¥320</p>
-                                    </div>
-                                    <p>×1</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box-num">
-                            <span>实际支付</span>
-                            <span class="num">¥970</span>
-                        </div>
-                        <div class="box-bor"></div>
-                        <div class="box-butm">
-                            <div class="box-but">取消订单</div>
-                            <div class="box-but2">立即支付</div>
-                        </div>
-                    </div>
-                </div>
-            </van-tab>
-            <van-tab title="待发货">
-                <div class="box-con">
-                    <div class="box-con2">
-                        <div class="box-tit">
-                            <div>
-                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-                                <p>光之城卡牌</p>
-                            </div>
-                            <div class="box-tit-seller">待发货</div>
-                        </div>
-                        <div class="box-con-Cards">
-                            <img src="../static/imgs/1.jpeg" alt="" />
-                            <div class="box-con-right">
-                                <p class="box-con-tit">1105皇权破晓</p>
-                                <div class="box-con-today">
-                                    <p>卡盒选号: 卡包02—A</p>
-                                </div>
-                                <div class="box-con-money">
-                                    <div class="box-con-num">
-                                        <p>¥320</p>
-                                    </div>
-                                    <p>×1</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box-num">
-                            <span>实际支付</span>
-                            <span class="num">¥970</span>
-                        </div>
-                        <div class="box-bor"></div>
-                        <div class="box-butm">
-                            <div class="box-but3">查看订单</div>
-                        </div>
-                    </div>
-                </div>
-            </van-tab>
-            <van-tab title="待收货">
-                <div class="box-con">
-                    <div class="box-con2">
-                        <div class="box-tit">
-                            <div>
-                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-                                <p>光之城卡牌</p>
-                            </div>
-                            <div class="box-tit-seller">待收货</div>
-                        </div>
-                        <div class="box-con-Cards">
-                            <img src="../static/imgs/2.jpeg" alt="" />
-                            <div class="box-con-right">
-                                <p class="box-con-tit">1105皇权破晓</p>
-                                <div class="box-con-today">
-                                    <p>卡盒选号: 卡包02—A</p>
-                                </div>
-                                <div class="box-con-money">
-                                    <div class="box-con-num">
-                                        <p>¥320</p>
-                                    </div>
-                                    <p>×1</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box-num">
-                            <span>实际支付</span>
-                            <span class="num">¥970</span>
-                        </div>
-                        <div class="box-bor"></div>
-                        <div class="box-butm">
-                            <div class="box-but">查看物流</div>
-                            <div class="box-but2">确认收货</div>
-                        </div>
-                    </div>
-                </div>
-            </van-tab>
-            <van-tab title="已完成">
-                <div class="box-con">
-                    <div class="box-con2">
-                        <div class="box-tit">
-                            <div>
-                                <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-                                <p>光之城卡牌</p>
-                            </div>
-                            <div class="box-tit-seller">已完成</div>
-                        </div>
-                        <div class="box-con-Cards">
-                            <img src="../static/imgs/3.jpeg" alt="" />
-                            <div class="box-con-right">
-                                <p class="box-con-tit">1105皇权破晓</p>
-                                <div class="box-con-today">
-                                    <p>卡盒选号: 卡包02—A</p>
-                                </div>
-                                <div class="box-con-money">
-                                    <div class="box-con-num">
-                                        <p>¥320</p>
-                                    </div>
-                                    <p>×1</p>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="box-num">
-                            <span>实际支付</span>
-                            <span class="num">¥970</span>
-                        </div>
-                        <div class="box-bor"></div>
-                        <div class="box-butm">
-                            <div class="box-but">申请售后</div>
-                            <div class="box-but3">查看订单</div>
-                        </div>
-                    </div>
-                </div>
-            </van-tab>
-        </van-tabs>
+        <div class="box-tab">
+            <div
+                class="tab-item"
+                :class="{ active: item === active }"
+                v-for="(item, index) in tabs"
+                :key="index"
+                @click="chageFn(item)"
+            >
+                {{ item }}
+            </div>
+        </div>
+        <div v-for="(item, index) in List" :key="index + 2">
+            <allorder-info :all="item"></allorder-info>
+        </div>
+        <van-empty v-if="empty" image="/native/imgs/kong_png_xiaoxiliebiao.png" description="暂无卡包信息哦～">
+        </van-empty>
     </div>
 </template>
 <script>
+import AllorderInfo from '../components/AllorderInfo.vue';
+import allPage from '../mixins/allPage';
 export default {
+    components: { AllorderInfo },
+    mixins: [allPage],
     data() {
-        return {};
+        return {
+            active: '全部',
+            tabs: ['全部', '待支付', '待发货', '待签收', '已完成'],
+            empty: false,
+            List: []
+        };
     },
     methods: {
-        onClick(event) {}
+        chageFn(item) {
+            this.active = item;
+            this.allFn();
+        },
+        allFn() {
+            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'
+                        }
+                    }
+                )
+                .then(res => {
+                    console.log(res);
+                    this.hideLoading();
+                    this.List = res;
+                    if (res.length === 0) {
+                        this.empty = true;
+                    }
+                });
+        },
+        loginMethods() {
+            this.allFn();
+        }
     }
 };
 </script>
 <style lang="less" scoped>
 .container {
     background: #f5f7fa;
-    /deep/ .van-tabs__line {
-        width: 0px;
-        height: 0px;
-    }
-    .box-con {
+    .box-tab {
         background: #ffffff;
-        border-radius: 12px;
-        margin: 8px 16px;
-        padding-bottom: 5px;
-        .box-con2 {
-            margin: 16px 16px;
-            .box-tit {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding-top: 16px;
-                div {
-                    display: flex;
-                    align-items: center;
-                    img {
-                        width: 17px;
-                        height: 17px;
-                    }
-                    p {
-                        height: 22px;
-                        font-size: 14px;
-                        font-weight: bold;
-                        color: #000000;
-                        line-height: 22px;
-                        margin-left: 2px;
-                    }
-                }
-                .box-tit-seller {
-                    height: 22px;
-                    font-size: 14px;
-                    font-weight: bold;
-                    color: #ff6c00;
-                    line-height: 22px;
-                }
-            }
-            .box-con-Cards {
-                margin: 16px 0 20px 20px;
-                display: flex;
-                img {
-                    width: 90px;
-                    height: 130px;
-                    border-radius: 6px;
-                }
-                .box-con-right {
-                    width: 237px;
-                    margin-left: 8px;
-                    .box-con-tit {
-                        height: 24px;
-                        font-size: 16px;
-                        font-weight: bold;
-                        color: #000000;
-                        line-height: 24px;
-                        margin: 5px 0 10px 0;
-                    }
-                }
-                .box-con-today {
-                    display: flex;
-                    height: 30px;
-                    background: #f5f7fa;
-                    border-radius: 6px;
-                    width: 142px;
-                    align-items: center;
-                    p {
-                        height: 24px;
-                        font-size: 14px;
-                        font-weight: 400;
-                        color: #303133;
-                        line-height: 24px;
-                    }
-                }
-                .box-con-money {
-                    display: flex;
-                    align-items: center;
-                    justify-content: space-between;
-                    margin-top: 28px;
-                    .box-con-num {
-                        display: flex;
-                        align-items: center;
-                        img {
-                            width: 16px;
-                            height: 16px;
-                        }
-                        p {
-                            height: 22px;
-                            font-size: 14px;
-                            font-weight: normal;
-                            color: #c8c9cc;
-                            line-height: 22px;
-                        }
-                    }
-                    p {
-                        height: 24px;
-                        font-size: 14px;
-                        font-weight: 400;
-                        color: #c8c9cc;
-                        line-height: 24px;
-                    }
-                }
-            }
-            .box-num {
-                text-align: right;
-                span {
-                    font-size: 14px;
-                    font-weight: bold;
-                    color: #000000;
-                }
-                .num {
-                    font-size: 16px;
-                    font-weight: bold;
-                    color: #f42202;
-                    padding-left: 10px;
-                }
-            }
-            .box-bor {
-                width: 303px;
-                height: 1px;
-                background: #f5f7fa;
-                margin: 19px 0 16px 0;
-            }
-            .box-butm {
-                display: flex;
-                justify-content: flex-end;
-                .box-but {
-                    width: 80px;
-                    height: 36px;
-                    border-radius: 8px;
-                    border: 1px solid #c8c9cc;
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #c8c9cc;
-                    line-height: 36px;
-                    text-align: center;
-                    margin-right: 12px;
-                }
-                .box-but2 {
-                    width: 80px;
-                    height: 36px;
-                    background: #ff6c00;
-                    border-radius: 8px;
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #ffffff;
-                    line-height: 36px;
-                    text-align: center;
-                }
-                .box-but3 {
-                    width: 80px;
-                    height: 36px;
-                    border-radius: 8px;
-                    border: 1px solid #ff6c00;
-                    font-size: 14px;
-                    font-weight: 400;
-                    color: #ff6c00;
-                    line-height: 36px;
-                    text-align: center;
-                }
+        .flex();
+        padding-left: 16px;
+        .tab-item {
+            font-size: 14px;
+            color: #000;
+            line-height: 24px;
+            padding: 18px 30px 18px 0;
+
+            &.active {
+                color: #ff6c00;
             }
         }
     }

src/pages/details.vue

@@ -30,11 +30,11 @@
         <div class="box-con">
             <div class="box-con-left">
                 <p>距拼箱结束</p>
-                <span>{{ cardCaseInfo.endTime }}</span>
+                <van-count-down class="val" :time="time" format="DD 天 HH:mm:ss" />
             </div>
             <div class="box-con-right">
                 <p>拼箱进度</p>
-                <span>{{ cardCaseInfo.preorder }}</span>
+                <span>{{ cardCaseInfo.preorder || 0 }}/{{ cardCaseInfo.total || 0 }}</span>
             </div>
         </div>
         <div class="box-con2">
@@ -95,6 +95,7 @@
 </template>
 <script>
 import CardCase from '../components/CardCase';
+import dayjs from 'dayjs';
 export default {
     data() {
         return {
@@ -106,6 +107,17 @@ export default {
             chooseIds: []
         };
     },
+    computed: {
+        time() {
+            if (this.cardCaseInfo.endTime) {
+                let date = dayjs(this.cardCaseInfo.endTime, 'YYYY-MM-DD HH:mm:ss');
+                console.log(date);
+                return date.diff(dayjs());
+            } else {
+                return 0;
+            }
+        }
+    },
     methods: {
         address() {
             wx.redirectTo({
@@ -216,11 +228,10 @@ export default {
                 text-align: center;
                 margin-top: 15px;
             }
-            span {
+            .val {
                 height: 26px;
                 font-size: 16px;
                 font-weight: 500;
-                // color: #ff6c00;
                 color: #000000;
                 line-height: 26px;
                 text-align: center;