511

project.config.json

@@ -123,7 +123,7 @@
                 {
                     "id": -1,
                     "name": "订单详情",
-                    "pathName": "/pages/order",
+                    "pathName": "/pages/orderdetails",
                     "scene": null
                 },
                 {
@@ -147,13 +147,13 @@
                 {
                     "id": -1,
                     "name": "收货地址",
-                    "pathName": "/pages/add",
+                    "pathName": "/pages/address",
                     "scene": null
                 },
                 {
                     "id": -1,
                     "name": "确认订单",
-                    "pathName": "/pages/address",
+                    "pathName": "/pages/confirmorder",
                     "scene": null
                 },
                 {

src/components/CardCase.vue

@@ -21,7 +21,10 @@
                             v-for="item in card"
                             :key="item.id"
                             class="card-item"
-                            :class="{ used: item.caseStatus !== 'WAIT', active: chooseIds.includes(item.id) }"
+                            :class="{
+                                used: item.caseStatus !== 'WAIT' || item.userId,
+                                active: chooseIds.includes(item.id)
+                            }"
                             @click="choose(item.id)"
                         >
                             {{ item.boxCode }}

src/main.js

@@ -32,13 +32,13 @@ export default {
         // pages 的首个页面会被编译成首页
         pages: [
             'pages/Home',
-            'pages/address',
+            'pages/confirmorder',
             'pages/mine',
             'pages/receiving',
-            'pages/add',
+            'pages/address',
             'pages/details',
             'pages/news',
-            'pages/order',
+            'pages/orderdetails',
             'pages/chat',
             'pages/allorder',
             'pages/follow',

src/pages/add.vue

@@ -1,157 +0,0 @@
-<config>
-{
-    "navigationBarTitleText": "收货地址",
-    "navigationBarBackgroundColor": "#ffffff",
-    "navigationBarTextStyle": "black",
-    "backgroundTextStyle":"light"
-}
-</config>
-<template>
-    <div class="container">
-        <div class="box" v-for="(item, index) in addressList" :key="index">
-            <div class="box-con">
-                <div @click="add(item)">
-                    <div class="box-con-top">
-                        <p>收货人</p>
-                        <span class="box-con-span">{{ item.name }}</span>
-                        <span class="box-con-code">{{ item.phone }}</span>
-                    </div>
-                    <div class="box-con-top">
-                        <p>收货地址</p>
-                        <span class="box-con-sp">{{ item.city + item.province + item.district + item.detail }}</span>
-                    </div>
-                </div>
-                <div class="box-con-buttom">
-                    <div class="box-con-default" v-if="item.enabled == true">默认</div>
-                    <div class="box-con-edit">编辑</div>
-                </div>
-            </div>
-        </div>
-        <van-goods-action>
-            <div class="container-but" @click="address">新增地址</div>
-        </van-goods-action>
-    </div>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            addressList: []
-        };
-    },
-    methods: {
-        addRess() {
-            this.$http.get('/address/showMy').then(res => {
-                console.log(res);
-                this.addressList = res;
-            });
-        },
-        address() {
-            console.log(111);
-            wx.redirectTo({
-                url: './receiving'
-            });
-        },
-        // 添加到确认订单
-        add(item) {
-            wx.redirectTo({
-                url: `./address?address=${JSON.stringify(item)}`
-            });
-        }
-    },
-    created() {
-        this.addRess();
-    }
-};
-</script>
-<style lang="less" scoped>
-.container {
-    background: #f5f7fa;
-    padding-top: 8px;
-    padding-bottom: 100px;
-    .box {
-        padding: 8px 20px;
-        .box-con {
-            background: #ffffff;
-            border-radius: 12px;
-            padding: 16px 0 16px 16px;
-            .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 {
-                    width: 235px;
-                    height: 24px;
-                    font-size: 14px;
-                    font-weight: bold;
-                    color: #000000;
-                    line-height: 24px;
-                }
-            }
-            .box-con-buttom {
-                display: flex;
-                margin: 40px 10px 0 0;
-                justify-content: flex-end;
-                .box-con-default {
-                    width: 60px;
-                    height: 32px;
-                    border-radius: 4px;
-                    text-align: center;
-                    line-height: 32px;
-                    border: 1px solid #000;
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #c8c9cc;
-                    margin-right: 16px;
-                }
-                .box-con-edit {
-                    width: 60px;
-                    height: 32px;
-                    background: #ffffff;
-                    border-radius: 4px;
-                    border: 1px solid #ff6c00;
-                    font-size: 13px;
-                    font-weight: bold;
-                    text-align: center;
-                    line-height: 32px;
-                    color: #ff6c00;
-                }
-            }
-        }
-    }
-    .container-but {
-        width: 290px;
-        height: 48px;
-        background: #ff6c00;
-        border-radius: 12px;
-        font-size: 16px;
-        font-weight: 400;
-        color: #ffffff;
-        text-align: center;
-        line-height: 48px;
-        margin: 6px 43px;
-    }
-}
-</style>

src/pages/address.vue

@@ -1,374 +1,159 @@
 <config>
 {
-    "navigationBarTitleText": "确认订单",
+    "navigationBarTitleText": "收货地址",
     "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle":"light"
 }
 </config>
 <template>
     <div class="container">
-        <div class="box-top">
-            <p>平台担保交易，确认收货后，钱款才会打入对方账户</p>
-        </div>
-        <div class="box-address">
-            <div class="box-lr">
-                <span class="box-lr-sp" v-if="!addressList">选择收获地址</span>
-                <div class="box-con2" v-else>
+        <div class="box" v-for="(item, index) in addressList" :key="index">
+            <div class="box-con">
+                <div @click="add(item)">
                     <div class="box-con-top">
                         <p>收货人</p>
-                        <span class="box-con-span">{{ addressList.name }}</span>
-                        <span class="box-con-code">{{ addressList.phone }}</span>
+                        <span class="box-con-span">{{ item.name }}</span>
+                        <span class="box-con-code">{{ item.phone }}</span>
                     </div>
                     <div class="box-con-top">
                         <p>收货地址</p>
-                        <span class="box-con-sp">
-                            {{ addressList.province + addressList.city + addressList.district + addressList.detail }}
-                        </span>
+                        <span class="box-con-sp">{{ item.province + item.city + item.district + item.detail }}</span>
                     </div>
                 </div>
-                <p class="box-p" @click="address">></p>
-            </div>
-        </div>
-        <img src="../static/imgs/img_dizhitiao@3x.png" alt="" />
-        <div class="box-tit">
-            <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
-            <p>光之城卡牌</p>
-        </div>
-        <div class="box-con">
-            <div class="box-con-Cards">
-                <img src="../static/imgs/home_top_bg.png" 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 class="box-con-buttom">
+                    <div class="box-con-default" v-if="item.enabled == true">默认</div>
+                    <div class="box-con-edit">编辑</div>
                 </div>
             </div>
         </div>
-        <div class="box-buttom">
-            <div class="box-buttom-con">
-                <p>商品价格</p>
-                <p class="box-buttom-p">¥960</p>
-            </div>
-        </div>
-        <div class="box-buttom">
-            <div class="box-buttom-con">
-                <p>邮费</p>
-                <p class="box-buttom-p">¥10</p>
-            </div>
-        </div>
-        <div class="box-buttom">
-            <div class="box-buttom-con">
-                <p>支付方式</p>
-                <p class="box-buttom-p">微信支付</p>
-            </div>
-        </div>
-        <div class="box-buttom">
-            <div class="box-buttom-con">
-                <p>订单留言</p>
-                <div class="box-buttom-p2">选填，备注对本次交易的说明</div>
-            </div>
-        </div>
-        <div class="box-total">
-            <div class="box-con-num">
-                <span>总计</span>
-                <img src="../static/imgs/icon_jiage.png" alt="" />
-                <p>1320</p>
-            </div>
-            <van-button type="warning" @click="order">确认订单</van-button>
-        </div>
+        <van-goods-action>
+            <div class="container-but" @click="address">新增地址</div>
+        </van-goods-action>
     </div>
 </template>
 <script>
 export default {
     data() {
         return {
-            addressList: undefined,
-            userAddressId: ''
+            addressList: []
         };
     },
     methods: {
+        addRess() {
+            this.$http.get('/address/showMy').then(res => {
+                console.log(res);
+                this.addressList = res;
+            });
+        },
         address() {
+            console.log(111);
             wx.redirectTo({
-                url: './add'
+                url: './receiving'
             });
         },
-        order() {
-            let caseId = this.$mp.query.caseId;
-            let boxIds = this.$mp.query.boxIds;
-            console.log(caseId);
-            console.log('===========');
-            console.log(boxIds);
-            console.log('===========');
-            console.log(this.userAddressId);
-            this.$http
-                .post('/orderInfo/createOrderInfo', {
-                    caseId,
-                    remark: '',
-                    boxIds,
-                    userAddressId: this.userAddressId
-                })
-                .then(res => {
-                    console.log(res);
-                });
-            // wx.redirectTo({
-            //     url: './order'
-            // });
+        // 添加到确认订单
+        add(item) {
+            let pages = getCurrentPages();
+            let prevPage = pages[pages.length - 2];
+            prevPage.rootVM.userAddressId = item.id;
+            prevPage.rootVM.addressList = item;
+            wx.navigateBack();
         }
     },
-    onLoad(option) {
-        if (option.address) {
-            let data = JSON.parse(option.address);
-            this.addressList = data;
-            this.userAddressId = data.id;
-        }
+    created() {
+        this.addRess();
     }
 };
 </script>
 <style lang="less" scoped>
 .container {
+    background: #f5f7fa;
+    padding-top: 8px;
     padding-bottom: 100px;
-    // 按钮
-    /deep/ .van-button {
-        height: 48px;
-        width: 210px;
-        background: #ff6c00;
-        border-radius: 12px;
-        font-size: 16px;
-        font-weight: 400;
-        color: #ffffff;
-        margin-right: 16px;
-    }
-    .box-top {
-        height: 44px;
-        background: #ff6c00;
-        opacity: 0.46;
-        p {
-            margin: 0 38px;
-            line-height: 18px;
-            text-align: center;
-            width: 299px;
-            height: 18px;
-            font-size: 13px;
-            font-weight: 400;
-            color: #000000;
-            line-height: 48px;
-        }
-    }
-    .box-address {
-        .box-lr {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin: 0 23px;
-            height: 120px;
-            .box-con2 {
-                .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 {
-                        width: 235px;
-                        height: 24px;
-                        font-size: 14px;
-                        font-weight: bold;
-                        color: #000000;
-                        line-height: 24px;
-                    }
+    .box {
+        padding: 8px 20px;
+        .box-con {
+            background: #ffffff;
+            border-radius: 12px;
+            padding: 16px 0 16px 16px;
+            .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-lr-sp {
-                font-size: 16px;
-                font-weight: 400;
-                color: #c8c9cc;
-                line-height: 120px;
-            }
-            .box-p {
-                line-height: 120px;
-                font-weight: bold;
-            }
-        }
-    }
-    img {
-        width: 100%;
-        height: 6px;
-        background: #ffffff;
-    }
-    .box-tit {
-        display: flex;
-        align-items: center;
-        margin: 20px 0 0 20px;
-        img {
-            width: 17px;
-            height: 17px;
-        }
-        p {
-            height: 22px;
-            font-size: 14px;
-            font-weight: bold;
-            color: #000000;
-            line-height: 22px;
-            margin-left: 2px;
-        }
-    }
-    .box-con {
-        height: 160px;
-        background: #ffffff;
-        border-radius: 12px;
-        .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 {
+                .box-con-span {
                     height: 24px;
-                    font-size: 16px;
+                    font-size: 14px;
                     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 {
+                .box-con-code {
                     height: 24px;
                     font-size: 14px;
-                    font-weight: 400;
-                    color: #303133;
+                    font-weight: bold;
+                    color: #000000;
                     line-height: 24px;
+                    margin-left: 14px;
                 }
-            }
-            .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 {
+                .box-con-sp {
+                    width: 235px;
                     height: 24px;
                     font-size: 14px;
-                    font-weight: 400;
-                    color: #c8c9cc;
+                    font-weight: bold;
+                    color: #000000;
                     line-height: 24px;
                 }
             }
-        }
-    }
-    .box-buttom {
-        margin: 35px 20px;
-        .box-buttom-con {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            p {
-                height: 20px;
-                font-size: 14px;
-                font-weight: bold;
-                color: #000000;
-                line-height: 20px;
-            }
-            .box-buttom-p {
-                height: 22px;
-                font-size: 16px;
-                font-weight: bold;
-                color: #000000;
-                line-height: 22px;
-            }
-            .box-buttom-p2 {
-                height: 22px;
-                font-size: 13px;
-                font-weight: 400;
-                color: #c8c9cc;
+            .box-con-buttom {
+                display: flex;
+                margin: 40px 10px 0 0;
+                justify-content: flex-end;
+                .box-con-default {
+                    width: 60px;
+                    height: 32px;
+                    border-radius: 4px;
+                    text-align: center;
+                    line-height: 32px;
+                    border: 1px solid #000;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #c8c9cc;
+                    margin-right: 16px;
+                }
+                .box-con-edit {
+                    width: 60px;
+                    height: 32px;
+                    background: #ffffff;
+                    border-radius: 4px;
+                    border: 1px solid #ff6c00;
+                    font-size: 13px;
+                    font-weight: bold;
+                    text-align: center;
+                    line-height: 32px;
+                    color: #ff6c00;
+                }
             }
         }
     }
-    .box-total {
-        .bottom();
-        display: flex;
-        height: 60px;
-        align-items: center;
-        justify-content: space-between;
-        background: #ffffff;
-        width: 100%;
-        position: fixed;
-        bottom: 0;
-        .box-con-num {
-            display: flex;
-            align-items: center;
-            margin-left: 16px;
-            span {
-                height: 22px;
-                font-size: 13px;
-                font-weight: 400;
-                color: #c8c9cc;
-                line-height: 22px;
-            }
-            img {
-                width: 10px;
-                height: 10px;
-                margin: 7px 0 0 5px;
-            }
-            p {
-                height: 22px;
-                font-size: 24px;
-                font-weight: normal;
-                color: #f42202;
-                line-height: 22px;
-            }
-        }
+    .container-but {
+        width: 290px;
+        height: 48px;
+        background: #ff6c00;
+        border-radius: 12px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        text-align: center;
+        line-height: 48px;
+        margin: 6px 43px;
     }
 }
 </style>

src/pages/confirmorder.vue

@@ -0,0 +1,392 @@
+<config>
+{
+    "navigationBarTitleText": "确认订单",
+    "navigationBarBackgroundColor": "#ffffff",
+}
+</config>
+<template>
+    <div class="container">
+        <div class="box-top">
+            <p>平台担保交易，确认收货后，钱款才会打入对方账户</p>
+        </div>
+        <div class="box-address">
+            <div class="box-lr" @click="address">
+                <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">></p>
+            </div>
+        </div>
+        <img src="../static/imgs/img_dizhitiao@3x.png" alt="" />
+        <div class="box-tit">
+            <img src="/native/tabbar/icon_kapai_shangjia_da.png" alt="" />
+            <p>光之城卡牌</p>
+        </div>
+        <div v-for="(item, index) in Boxes" :key="index.id">
+            <div class="box-con">
+                <div class="box-con-Cards">
+                    <img :src="cardCaseInfo.images" alt="" />
+                    <div class="box-con-right">
+                        <p class="box-con-tit">{{ cardCaseInfo.name }}</p>
+                        <div class="box-con-today">
+                            <p>卡盒选号: {{ item.groupCode + item.boxCode }}</p>
+                        </div>
+                        <div class="box-con-money">
+                            <div class="box-con-num">
+                                <p>¥{{ item.boxPrice }}</p>
+                            </div>
+                            <p>×1</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="box-buttom">
+            <div class="box-buttom-con">
+                <p>商品价格</p>
+                <p class="box-buttom-p">¥{{ total }}</p>
+            </div>
+        </div>
+        <div class="box-buttom">
+            <div class="box-buttom-con">
+                <p>邮费</p>
+                <p class="box-buttom-p">¥10</p>
+            </div>
+        </div>
+        <div class="box-buttom">
+            <div class="box-buttom-con">
+                <p>支付方式</p>
+                <p class="box-buttom-p">微信支付</p>
+            </div>
+        </div>
+        <div class="box-buttom">
+            <div class="box-buttom-con">
+                <p>订单留言</p>
+                <div class="box-buttom-p2">选填，备注对本次交易的说明</div>
+            </div>
+        </div>
+        <div class="box-total">
+            <div class="box-con-num">
+                <span>总计</span>
+                <img src="../static/imgs/icon_jiage.png" alt="" />
+                <p>{{ total }}</p>
+            </div>
+            <van-button type="warning" @click="order">确认订单</van-button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            addressList: undefined,
+            userAddressId: '',
+            caseId: 0,
+            boxIds: [],
+            Boxes: [],
+            cardCaseInfo: {},
+            total: ''
+        };
+    },
+    methods: {
+        address() {
+            this.navigateTo('/pages/address');
+        },
+        order() {
+            if (!this.addressList) {
+                wx.showToast({
+                    icon: 'none',
+                    title: '请选择地址'
+                });
+                return;
+            }
+            this.$http
+                .post('/orderInfo/createOrderInfo', {
+                    caseId: this.caseId,
+                    remark: '',
+                    boxIds: this.boxIds,
+                    userAddressId: this.userAddressId
+                })
+                .then(res => {
+                    this.id = res.id;
+                    this.navigateTo('/pages/orderdetails?id=' + this.id);
+                });
+        },
+        getFn() {
+            let caseId = this.$mp.query.caseId;
+            let boxIds = this.$mp.query.boxIds;
+            this.$http
+                .get('/orderInfo/showPreview', {
+                    caseId,
+                    boxIds
+                })
+                .then(res => {
+                    console.log(res.total);
+                    this.total = res.total;
+                    this.Boxes = res.selectedBoxes;
+                    this.cardCaseInfo = res.selectedCase.collection;
+                });
+        }
+    },
+    onLoad(option) {
+        this.caseId = option.caseId;
+        this.boxIds = option.boxIds.split(',');
+    },
+    created() {
+        this.getFn();
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    padding-bottom: 100px;
+    // 按钮
+    /deep/ .van-button {
+        height: 48px;
+        width: 210px;
+        background: #ff6c00;
+        border-radius: 12px;
+        font-size: 16px;
+        font-weight: 400;
+        color: #ffffff;
+        margin-right: 16px;
+    }
+    .box-top {
+        height: 44px;
+        background: #ff6c00;
+        opacity: 0.46;
+        p {
+            margin: 0 38px;
+            line-height: 18px;
+            text-align: center;
+            width: 299px;
+            height: 18px;
+            font-size: 13px;
+            font-weight: 400;
+            color: #000000;
+            line-height: 48px;
+        }
+    }
+    .box-address {
+        .box-lr {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 0 23px;
+            height: 120px;
+            .box-con2 {
+                .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 {
+                        width: 235px;
+                        height: 24px;
+                        font-size: 14px;
+                        font-weight: bold;
+                        color: #000000;
+                        line-height: 24px;
+                    }
+                }
+            }
+            .box-lr-sp {
+                font-size: 16px;
+                font-weight: 400;
+                color: #c8c9cc;
+                line-height: 120px;
+            }
+            .box-p {
+                line-height: 120px;
+                font-weight: bold;
+            }
+        }
+    }
+    img {
+        width: 100%;
+        height: 6px;
+        background: #ffffff;
+    }
+    .box-tit {
+        display: flex;
+        align-items: center;
+        margin: 20px 0 0 20px;
+        img {
+            width: 17px;
+            height: 17px;
+        }
+        p {
+            height: 22px;
+            font-size: 14px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 22px;
+            margin-left: 2px;
+        }
+    }
+    .box-con {
+        height: 160px;
+        background: #ffffff;
+        border-radius: 12px;
+        .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-buttom {
+        margin: 35px 20px;
+        .box-buttom-con {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            p {
+                height: 20px;
+                font-size: 14px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 20px;
+            }
+            .box-buttom-p {
+                height: 22px;
+                font-size: 16px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 22px;
+            }
+            .box-buttom-p2 {
+                height: 22px;
+                font-size: 13px;
+                font-weight: 400;
+                color: #c8c9cc;
+            }
+        }
+    }
+    .box-total {
+        .bottom();
+        display: flex;
+        height: 60px;
+        align-items: center;
+        justify-content: space-between;
+        background: #ffffff;
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        .box-con-num {
+            display: flex;
+            align-items: center;
+            margin-left: 16px;
+            span {
+                height: 22px;
+                font-size: 13px;
+                font-weight: 400;
+                color: #c8c9cc;
+                line-height: 22px;
+            }
+            img {
+                width: 10px;
+                height: 10px;
+                margin: 7px 0 0 5px;
+            }
+            p {
+                height: 22px;
+                font-size: 24px;
+                font-weight: normal;
+                color: #f42202;
+                line-height: 22px;
+            }
+        }
+    }
+}
+</style>

src/pages/details.vue

@@ -145,7 +145,9 @@ export default {
                 });
                 return;
             }
-            this.navigateTo('/pages/address?caseId=' + this.cardCaseInfo.cardCaseId + '&boxIds=' + this.chooseIds);
+            this.navigateTo(
+                '/pages/confirmorder?caseId=' + this.cardCaseInfo.cardCaseId + '&boxIds=' + this.chooseIds.join(',')
+            );
         },
         loginMethods() {
             this.caseId = this.$mp.options.id;

src/pages/order.vue → src/pages/orderdetails.vue

@@ -38,19 +38,21 @@
             </div>
             <div class="box-tit-seller">联系卖家</div>
         </div>
-        <div class="box-con">
-            <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 v-for="(item, index) in Boxes" :key="index.id">
+            <div class="box-con">
+                <div class="box-con-Cards">
+                    <img :src="cardCaseInfo.images" alt="" />
+                    <div class="box-con-right">
+                        <p class="box-con-tit">{{ cardCaseInfo.name }}</p>
+                        <div class="box-con-today">
+                            <p>卡盒选号: {{ item.groupCode + item.boxCode }}</p>
+                        </div>
+                        <div class="box-con-money">
+                            <div class="box-con-num">
+                                <p>¥{{ item.boxPrice }}</p>
+                            </div>
+                            <p>×1</p>
                         </div>
-                        <p>×1</p>
                     </div>
                 </div>
             </div>
@@ -59,7 +61,7 @@
         <div class="box-buttom">
             <div class="box-buttom-con">
                 <p>商品价格</p>
-                <p class="box-buttom-p">¥960</p>
+                <p class="box-buttom-p">¥{{ total }}</p>
             </div>
         </div>
         <div class="box-buttom">
@@ -100,7 +102,7 @@
         <div class="box-footer">
             <div class="box-footer-con">
                 <p>创建时间</p>
-                <p class="box-footer-p">2021-05-20 07:52:36</p>
+                <p class="box-footer-p">{{ cardCaseInfo.createdAt }}</p>
             </div>
         </div>
         <div class="box-footer">
@@ -156,6 +158,9 @@ export default {
     data() {
         return {
             show: false,
+            Boxes: [],
+            cardCaseInfo: {},
+            total: '',
             steps: [
                 {
                     text: '江苏省南京市玄武区派件员 王智元',
@@ -171,6 +176,14 @@ export default {
             this.show = true;
             console.log(this.steps);
         },
+        getFn() {
+            this.$http.get('/orderInfo/get/' + this.$mp.query.id).then(res => {
+                console.log(res);
+                this.total = res.total;
+                this.Boxes = res.cardBoxList;
+                this.cardCaseInfo = res.cardCase.collection;
+            });
+        },
         copy() {
             // wx.setClipboardData({
             //     data: this.orderInfo.id + '',
@@ -185,6 +198,9 @@ export default {
             //     }
             // });
         }
+    },
+    created() {
+        this.getFn();
     }
 };
 </script>

src/pages/receiving.vue

@@ -132,9 +132,7 @@ export default {
                         title: '保存成功'
                     });
                     setTimeout(() => {
-                        wx.redirectTo({
-                            url: './add'
-                        });
+                        this.navigateTo('/pages/address');
                     }, 1500);
                 })
                 .catch(e => {