合并

project.config.json

@@ -1,120 +1,150 @@
 {
-  "description": "项目配置文件",
-  "packOptions": {
-    "ignore": []
-  },
-  "setting": {
-    "urlCheck": false,
-    "es6": true,
-    "enhance": false,
-    "postcss": true,
-    "preloadBackgroundData": false,
-    "minified": true,
-    "newFeature": true,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": false,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
+    "description": "项目配置文件",
+    "packOptions": {
+        "ignore": []
     },
-    "enableEngineNative": false,
-    "bundle": false,
-    "useIsolateContext": true,
-    "useCompilerModule": true,
-    "userConfirmedUseCompilerModuleSwitch": false,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true
-  },
-  "compileType": "miniprogram",
-  "libVersion": "2.16.1",
-  "appid": "wx6517cbf58115c508",
-  "projectname": "%E5%8D%A1%E7%89%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F",
-  "cloudfunctionTemplateRoot": "",
-  "watchOptions": {
-    "ignore": []
-  },
-  "debugOptions": {
-    "hidedInDevtools": []
-  },
-  "scripts": {},
-  "simulatorType": "wechat",
-  "simulatorPluginLibVersion": {},
-  "miniprogramRoot": "dist-wechat/",
-  "condition": {
-    "search": {
-      "list": []
-    },
-    "conversation": {
-      "list": []
-    },
-    "plugin": {
-      "list": []
+    "setting": {
+        "urlCheck": false,
+        "es6": true,
+        "enhance": false,
+        "postcss": true,
+        "preloadBackgroundData": false,
+        "minified": true,
+        "newFeature": true,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
+        "showShadowRootInWxmlPanel": true,
+        "scopeDataCheck": false,
+        "uglifyFileName": false,
+        "checkInvalidKey": true,
+        "checkSiteMap": true,
+        "uploadWithSourceMap": true,
+        "compileHotReLoad": false,
+        "useMultiFrameRuntime": true,
+        "useApiHook": true,
+        "useApiHostProcess": false,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        },
+        "enableEngineNative": false,
+        "bundle": false,
+        "useIsolateContext": true,
+        "useCompilerModule": true,
+        "userConfirmedUseCompilerModuleSwitch": false,
+        "userConfirmedBundleSwitch": false,
+        "packNpmManually": false,
+        "packNpmRelationList": [],
+        "minifyWXSS": true
     },
-    "game": {
-      "list": []
+    "compileType": "miniprogram",
+    "libVersion": "2.16.1",
+    "appid": "wx6517cbf58115c508",
+    "projectname": "%E5%8D%A1%E7%89%8C%E5%B0%8F%E7%A8%8B%E5%BA%8F",
+    "cloudfunctionTemplateRoot": "",
+    "watchOptions": {
+        "ignore": []
     },
-    "gamePlugin": {
-      "list": []
+    "debugOptions": {
+        "hidedInDevtools": []
     },
-    "miniprogram": {
-      "list": [
-        {
-          "id": -1,
-          "name": "消息",
-          "pathName": "/pages/news",
-          "scene": null
-        },
-        {
-          "id": -1,
-          "name": "聊天页面",
-          "pathName": "/pages/chat",
-          "scene": null
+    "scripts": {},
+    "simulatorType": "wechat",
+    "simulatorPluginLibVersion": {},
+    "miniprogramRoot": "dist-wechat/",
+    "condition": {
+        "search": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "我的",
-          "pathName": "/pages/mine",
-          "scene": null
+        "conversation": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "个人设置",
-          "pathName": "/pages/setting",
-          "scene": null
+        "plugin": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "我的钱包",
-          "pathName": "/pages/wallet",
-          "scene": null
+        "game": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "授权登陆",
-          "pathName": "/pages/authorized",
-          "scene": null
+        "gamePlugin": {
+            "list": []
         },
-        {
-          "id": -1,
-          "name": "常见问题",
-          "pathName": "/pages/questions",
-          "scene": null
+        "miniprogram": {
+            "list": [
+                {
+                    "id": -1,
+                    "name": "消息",
+                    "pathName": "/pages/news",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "聊天页面",
+                    "pathName": "/pages/chat",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我的",
+                    "pathName": "/pages/mine",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "个人设置",
+                    "pathName": "/pages/setting",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我的钱包",
+                    "pathName": "/pages/wallet",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "授权登陆",
+                    "pathName": "/pages/authorized",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "常见问题",
+                    "pathName": "/pages/questions",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "消息",
+                    "pathName": "/pages/news",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "聊天页面",
+                    "pathName": "/pages/chat",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我的",
+                    "pathName": "/pages/mine",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "订单详情",
+                    "pathName": "/pages/order",
+                    "scene": null
+                },
+                {
+                    "id": -1,
+                    "name": "我买到的",
+                    "pathName": "/pages/allorder",
+                    "scene": null
+                }
+            ]
         }
-      ]
     }
-  }
-}
+}

src/main.js

@@ -40,6 +40,8 @@ export default {
             'pages/news',
             'pages/order',
             'pages/chat',
+            'pages/allorder',
+            'pages/follow',
             'pages/setting',
             'pages/wallet',
             'pages/authorized',
@@ -73,7 +75,6 @@ export default {
         window: {
             backgroundTextStyle: 'light',
             navigationBarBackgroundColor: '#fff',
-            navigationBarTitleText: '卡牌游戏',
             navigationBarTextStyle: 'black'
             // navigationStyle: 'custom'
         },
@@ -106,7 +107,8 @@ export default {
             'van-area': '/vant/area/index',
             'van-goods-action': 'vant/goods-action/index',
             'van-goods-action-icon': 'vant/goods-action-icon/index',
-            'van-goods-action-button': 'vant/goods-action-button/index'
+            'van-goods-action-button': 'vant/goods-action-button/index',
+            'van-calendar': 'vant/calendar/index'
         }
     }
 };

src/pages/Home.vue

@@ -1,7 +1,5 @@
 <config>
 {
-    "navigationBarTitleText": "游戏王OCG",
-    "navigationBarBackgroundColor": "#ffffff",
     "navigationBarTextStyle": "black",
     "backgroundTextStyle":"light",
     "navigationStyle": "custom"
@@ -22,7 +20,7 @@
                 right-icon="back-top"
                 :value="value"
                 shape="round"
-                background="#ff976a"
+                background="none"
                 placeholder="搜索拼箱...."
             />
             <div class="box-tab">
@@ -39,16 +37,15 @@
         </div>
         <div class="box-con" v-if="conduct">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../static/imgs/home_top_bg.png" alt="" /></div>
+                <img src="../static/imgs/2.jpeg" alt="" />
                 <div class="box-con-right">
                     <p class="box-con-tit">DP20 简中 传说之决斗者编3</p>
                     <div class="box-con-today">
-                        <p class="box-con-p">距离结束</p>
-                        <p class="box-con-p2">1天</p>
-                        <p class="box-con-p2">20:35:06</p>
+                        <p>距离结束</p>
+                        <p class="box-con-p2">1天 20:35:06</p>
                     </div>
                     <div class="box-con-today">
-                        <p class="box-con-p">已拼箱</p>
+                        <p>已拼箱</p>
                         <p class="box-con-p2">10/24</p>
                     </div>
                     <div class="box-con-money">
@@ -64,22 +61,21 @@
         </div>
         <div class="box-con" v-if="complete">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../native/imgs/marker.png" alt="" /></div>
+                <img src="../native/imgs/marker.png" alt="" />
                 <div class="box-con-right">
-                    <p class="box-con-tit">DP21 简中 传说之决斗者编3</p>
+                    <p class="box-con-tit">DP20 简中 传说之决斗者编3</p>
                     <div class="box-con-today">
-                        <p class="box-con-p">距离结束</p>
-                        <p class="box-con-p2">10天</p>
-                        <p class="box-con-p2">20:35:06</p>
+                        <p>距离结束</p>
+                        <p class="box-con-p2">1天 20:35:06</p>
                     </div>
                     <div class="box-con-today">
-                        <p class="box-con-p">已拼箱</p>
+                        <p>已拼箱</p>
                         <p class="box-con-p2">10/24</p>
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
-                            <img src="../static/imgs/icon_jiage@3x.png" alt="" />
-                            <p>1020</p>
+                            <img src="../static/imgs/icon_jiage.png" alt="" />
+                            <p>320</p>
                         </div>
                         <van-button type="warning" @click="Details">立即拼箱</van-button>
                     </div>
@@ -89,22 +85,21 @@
         </div>
         <div class="box-con" v-if="overdue">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../static/imgs/megalo_logo.png" alt="" /></div>
+                <img src="../static/imgs/megalo_logo.png" alt="" />
                 <div class="box-con-right">
-                    <p class="box-con-tit">DP22 简中 传说之决斗者编3</p>
+                    <p class="box-con-tit">DP20 简中 传说之决斗者编3</p>
                     <div class="box-con-today">
-                        <p class="box-con-p">距离结束</p>
-                        <p class="box-con-p2">8天</p>
-                        <p class="box-con-p2">20:35:06</p>
+                        <p>距离结束</p>
+                        <p class="box-con-p2">1天 20:35:06</p>
                     </div>
                     <div class="box-con-today">
-                        <p class="box-con-p">已拼箱</p>
+                        <p>已拼箱</p>
                         <p class="box-con-p2">10/24</p>
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
                             <img src="../static/imgs/icon_jiage.png" alt="" />
-                            <p>1320</p>
+                            <p>320</p>
                         </div>
                         <van-button type="warning" @click="Details">立即拼箱</van-button>
                     </div>
@@ -112,6 +107,7 @@
             </div>
             <div class="box-border"></div>
         </div>
+        <van-popup :show="show" position="top" custom-style="height: 20%;" bind:close="onClose">内容</van-popup>
     </div>
 </template>
 
@@ -122,7 +118,8 @@ export default {
             value: '',
             conduct: true,
             complete: false,
-            overdue: false
+            overdue: false,
+            show: false
         };
     },
     methods: {
@@ -160,23 +157,16 @@ export default {
     /deep/ .van-button__text {
         height: 20px;
         font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
         line-height: 20px;
     }
-    // tab卡
-    /deep/ .van-tabs {
-        height: 0;
-    }
     // 搜索
     /deep/ .van-search {
         height: 0;
         margin-left: 5px;
     }
     /deep/ .van-search__content {
-        width: 345px;
-        height: 40px;
         border-radius: 8px;
     }
     .container-bg {
@@ -194,8 +184,7 @@ export default {
     span {
         height: 34px;
         font-size: 24px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: bold;
         color: #ffffff;
         line-height: 34px;
         margin-left: 20px;
@@ -220,7 +209,6 @@ export default {
             .box-top-sp {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #ffffff;
                 line-height: 19px;
@@ -237,7 +225,6 @@ export default {
             width: 42px;
             height: 24px;
             font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #ffffff;
             line-height: 24px;
@@ -251,12 +238,10 @@ export default {
         .box-con-Cards {
             padding: 32px 20px 27px 25px;
             display: flex;
-            .box-con-left {
-                img {
-                    width: 90px;
-                    height: 130px;
-                    border-radius: 6px;
-                }
+            img {
+                width: 90px;
+                height: 130px;
+                border-radius: 6px;
             }
             .box-con-right {
                 width: 237px;
@@ -264,8 +249,7 @@ export default {
                 .box-con-tit {
                     height: 24px;
                     font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin-bottom: 10px;
@@ -273,10 +257,9 @@ export default {
             }
             .box-con-today {
                 display: flex;
-                .box-con-p {
+                p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
@@ -284,7 +267,6 @@ export default {
                 .box-con-p2 {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #ff6c00;
                     line-height: 24px;
@@ -302,12 +284,11 @@ export default {
                     img {
                         width: 10px;
                         height: 10px;
-                        margin-top: 8px;
+                        margin-top: 9px;
                     }
                     p {
                         height: 22px;
                         font-size: 24px;
-                        font-family: OSP-DIN, OSP;
                         font-weight: normal;
                         color: #f42202;
                         line-height: 22px;

src/pages/add.vue

@@ -9,15 +9,36 @@
 <template>
     <div class="container">
         <div class="box">
-            <div class="box-con" @click="add">
-                <div class="box-con-top">
-                    <p>收货人</p>
-                    <span class="box-con-span">小明</span>
-                    <span class="box-con-code">17635849638</span>
+            <div class="box-con">
+                <div @click="add">
+                    <div class="box-con-top">
+                        <p>收货人</p>
+                        <span class="box-con-span">小明</span>
+                        <span class="box-con-code">17635849638</span>
+                    </div>
+                    <div class="box-con-top">
+                        <p>收货地址</p>
+                        <span class="box-con-sp">江苏 南京 玄武区 中山路18号德基广场二楼216</span>
+                    </div>
                 </div>
-                <div class="box-con-top">
-                    <p>收货地址</p>
-                    <span class="box-con-sp">江苏 南京 玄武区 中山路18号德基广场二楼216</span>
+                <div class="box-con-buttom">
+                    <div class="box-con-default">默认</div>
+                    <div class="box-con-edit">编辑</div>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div class="box-con">
+                <div @click="add">
+                    <div class="box-con-top">
+                        <p>收货人</p>
+                        <span class="box-con-span">小明</span>
+                        <span class="box-con-code">17635849638</span>
+                    </div>
+                    <div class="box-con-top">
+                        <p>收货地址</p>
+                        <span class="box-con-sp">江苏 南京 玄武区 中山路18号德基广场二楼216</span>
+                    </div>
                 </div>
                 <div class="box-con-buttom">
                     <div class="box-con-default">默认</div>
@@ -43,16 +64,20 @@ export default {
             });
         },
         // 添加到确认订单
-        add() {}
+        add() {
+            wx.redirectTo({
+                url: './address'
+            });
+        }
     }
 };
 </script>
 <style lang="less" scoped>
 .container {
     background: #f5f7fa;
-    height: 724px;
+    padding-top: 8px;
     .box {
-        padding: 16px 20px;
+        padding: 8px 20px;
         .box-con {
             background: #ffffff;
             border-radius: 12px;
@@ -64,7 +89,6 @@ export default {
                     width: 68px;
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
@@ -72,8 +96,7 @@ export default {
                 .box-con-span {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin-left: 2px;
@@ -81,8 +104,7 @@ export default {
                 .box-con-code {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin-left: 14px;
@@ -90,8 +112,7 @@ export default {
                 .box-con-sp {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin-left: 12px;
@@ -99,8 +120,8 @@ export default {
             }
             .box-con-buttom {
                 display: flex;
-                margin: 40px 0 0 167px;
-                flex-wrap: wrap;
+                margin: 40px 10px 0 0;
+                justify-content: flex-end;
                 .box-con-default {
                     width: 60px;
                     height: 32px;
@@ -109,7 +130,6 @@ export default {
                     line-height: 32px;
                     border: 1px solid #000;
                     font-size: 13px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     margin-right: 16px;
@@ -121,8 +141,7 @@ export default {
                     border-radius: 4px;
                     border: 1px solid #ff6c00;
                     font-size: 13px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
+                    font-weight: bold;
                     text-align: center;
                     line-height: 32px;
                     color: #ff6c00;
@@ -130,18 +149,17 @@ export default {
             }
         }
     }
-}
-.container-but {
-    width: 290px;
-    height: 48px;
-    background: #ff6c00;
-    border-radius: 12px;
-    font-size: 16px;
-    font-family: PingFangSC-Regular, PingFang SC;
-    font-weight: 400;
-    color: #ffffff;
-    text-align: center;
-    line-height: 48px;
-    margin: 6px 43px;
+    .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

@@ -13,7 +13,7 @@
         </div>
         <div class="box-address">
             <div class="box-lr">
-                <span class="box-lr-sp">选择收获地址</span>
+                <span class="box-lr-sp">{{ addres ? addres : '选择收获地址' }}</span>
                 <span @click="address">></span>
             </div>
         </div>
@@ -24,12 +24,11 @@
         </div>
         <div class="box-con">
             <div class="box-con-Cards">
-                <div class="box-con-left"><img src="../static/imgs/home_top_bg.png" alt="" /></div>
+                <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 class="box-con-p">卡盒选号:</p>
-                        <p class="box-con-p2">卡包02—A</p>
+                        <p>卡盒选号: 卡包02—A</p>
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
@@ -61,7 +60,6 @@
         <div class="box-buttom">
             <div class="box-buttom-con">
                 <p>订单留言</p>
-                <!-- <p class="box-buttom-p2">选填，备注对本次交易的说明</p> -->
                 <form class="box-buttom-p2" action="">选填，备注对本次交易的说明</form>
             </div>
         </div>
@@ -71,35 +69,33 @@
                 <img src="../static/imgs/icon_jiage.png" alt="" />
                 <p>1320</p>
             </div>
-            <van-button type="warning">确认订单</van-button>
+            <van-button type="warning" @click="order">确认订单</van-button>
         </div>
-        <!-- <van-goods-action>
-            <div class="box-con-num">
-                <span>总计</span>
-                <img src="../static/imgs/icon_jiage.png" alt="" />
-                <p>1320</p>
-            </div>
-            <van-goods-action-button @click="address" text="确认订单" type="warning" />
-        </van-goods-action> -->
     </div>
 </template>
 <script>
 export default {
     data() {
-        return {};
+        return {
+            addres: ''
+        };
     },
     methods: {
         address() {
             wx.redirectTo({
                 url: './add'
             });
+        },
+        order() {
+            wx.redirectTo({
+                url: './order'
+            });
         }
     }
 };
 </script>
 <style lang="less" scoped>
 .container {
-    // position: relative;
     // 按钮
     /deep/ .van-button {
         height: 48px;
@@ -107,7 +103,6 @@ export default {
         background: #ff6c00;
         border-radius: 12px;
         font-size: 16px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
     }
@@ -122,7 +117,6 @@ export default {
             width: 299px;
             height: 18px;
             font-size: 13px;
-            font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #000000;
             line-height: 48px;
@@ -130,7 +124,6 @@ export default {
     }
     .box-address {
         height: 120px;
-        // background: chocolate;
         .box-lr {
             display: flex;
             align-items: center;
@@ -139,7 +132,6 @@ export default {
             .box-lr-sp {
                 height: 26px;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #c8c9cc;
                 line-height: 120px;
@@ -147,6 +139,7 @@ export default {
             span {
                 height: 11px;
                 line-height: 120px;
+                font-weight: bold;
             }
         }
     }
@@ -166,8 +159,7 @@ export default {
         p {
             height: 22px;
             font-size: 14px;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
+            font-weight: bold;
             color: #000000;
             line-height: 22px;
             margin-left: 2px;
@@ -180,12 +172,10 @@ export default {
         .box-con-Cards {
             margin: 16px 0 20px 20px;
             display: flex;
-            .box-con-left {
-                img {
-                    width: 90px;
-                    height: 130px;
-                    border-radius: 6px;
-                }
+            img {
+                width: 90px;
+                height: 130px;
+                border-radius: 6px;
             }
             .box-con-right {
                 width: 237px;
@@ -193,12 +183,10 @@ export default {
                 .box-con-tit {
                     height: 24px;
                     font-size: 16px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    font-weight: bold;
                     color: #000000;
                     line-height: 24px;
                     margin: 5px 0 10px 0;
-                    // margin-bottom: 10px;
                 }
             }
             .box-con-today {
@@ -208,22 +196,12 @@ export default {
                 border-radius: 6px;
                 width: 142px;
                 align-items: center;
-                .box-con-p {
-                    height: 24px;
-                    font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
-                    font-weight: 400;
-                    color: #303133;
-                    line-height: 24px;
-                }
-                .box-con-p2 {
+                p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #303133;
                     line-height: 24px;
-                    margin-left: 5px;
                 }
             }
             .box-con-money {
@@ -241,7 +219,6 @@ export default {
                     p {
                         height: 22px;
                         font-size: 14px;
-                        font-family: OSP-DIN, OSP;
                         font-weight: normal;
                         color: #c8c9cc;
                         line-height: 22px;
@@ -250,7 +227,6 @@ export default {
                 p {
                     height: 24px;
                     font-size: 14px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #c8c9cc;
                     line-height: 24px;
@@ -267,23 +243,20 @@ export default {
             p {
                 height: 20px;
                 font-size: 14px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
+                font-weight: bold;
                 color: #000000;
                 line-height: 20px;
             }
             .box-buttom-p {
                 height: 22px;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
+                font-weight: bold;
                 color: #000000;
                 line-height: 22px;
             }
             .box-buttom-p2 {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #c8c9cc;
             }
@@ -305,7 +278,6 @@ export default {
             span {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #c8c9cc;
                 line-height: 22px;
@@ -318,7 +290,6 @@ export default {
             p {
                 height: 22px;
                 font-size: 24px;
-                font-family: OSP-DIN, OSP;
                 font-weight: normal;
                 color: #f42202;
                 line-height: 22px;

src/pages/allorder.vue

@@ -0,0 +1,489 @@
+<config>
+{
+    "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>
+</template>
+<script>
+import ProductInfo from '../components/productInfo.vue';
+export default {
+    // components: {
+    //     ProductInfo
+    // },
+    data() {
+        return {};
+    },
+    methods: {
+        onClick(event) {}
+    }
+};
+</script>
+<style lang="less" scoped>
+.container {
+    background: #f5f7fa;
+    /deep/ .van-tabs__line {
+        width: 0px;
+        height: 0px;
+    }
+    .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/pages/details.vue

@@ -8,7 +8,22 @@
 </config>
 <template>
     <div class="container">
-        <div><img src="../static/imgs/home_top_bg@3x.png" alt="" /></div>
+        <!-- <swiper class="cover">
+            <swiper-item v-for="item in packageInfo.img" :key="item">
+                <img class="cover-img" mode="aspectFill" :src="item" />
+            </swiper-item>
+        </swiper> -->
+        <swiper style="height:335px;" :autoplay="true" :indicator-dots="true">
+            <swiper-item>
+                <img src="../static/imgs/1.jpeg" alt="" />
+            </swiper-item>
+            <swiper-item>
+                <img src="../static/imgs/2.jpeg" alt="" />
+            </swiper-item>
+            <swiper-item>
+                <img src="../static/imgs/3.jpeg" alt="" />
+            </swiper-item>
+        </swiper>
         <div class="box-tit">1105皇权破晓 卡包拼箱 全80种</div>
         <div class="box-live">
             <img src="../native/imgs/icon_kapai_zhibo@3x.png" alt="" />
@@ -46,30 +61,44 @@
             其中1种有HR版本，UR卡有UTR版本，UR卡和SR卡有SER版本和PSER版本
             本卡包是1105初回生产限定版的盒内特典包（1盒1包） UR卡8种盒SR卡10种都与1105收录相同，而PSER卡1种是旧卡复刻
         </div>
-        <img class="container-img" src="../static/imgs/home_top_bg@3x.png" alt="" />
+        <img class="container-img" src="../static/imgs/3.jpeg" alt="" />
         <h3>拼箱规则</h3>
         <div class="box-details">
             1.拼箱是一种类似拼团的玩法，用户选号后支付，当箱中的全部号码都被购买完毕，才算拼箱成功。如果在有限时间内拼箱没有成团，系统会把钱退回给买家
             2.带有“直播开箱”的拼箱商品，是指当拼箱成团后，店家会实时直播开箱，原箱开封，把所有卡包拆开确认卡片内容，买家可以在小程序上观看直播
             3.拼箱商品支付成功后不支持退款退货，请谨慎、理智购买
         </div>
-        <!-- <van-button disabled type="info">禁用状态</van-button> -->
-        <!-- <van-goods-action>
-            <van-goods-action-icon icon="chat-o" text="客服" />
-            <van-goods-action-icon icon="shop-o" text="关注" />
-            <van-goods-action-button @click="address" text="立即购买" type="warning" />
-        </van-goods-action> -->
         <div class="box-footer">
-            <!-- <van-goods-action-icon icon="chat-o" text="客服" />
-            <van-goods-action-icon icon="shop-o" text="关注" /> -->
-            <div>请选择卡包</div>
+            <div class="box-cat">
+                <div>{{ selman ? selman : '请选择卡包' }}</div>
+                <div @click="selection">></div>
+            </div>
+            <van-action-sheet :show="show" title="选择卡包">
+                <!-- <view>选择卡包</view> -->
+                <div class="van-box" @click="alls(item)" v-for="(item, index) in list" :key="index">
+                    <p class="van-box-p">卡包 {{ index + 1 }}</p>
+                    <div class="van-con">
+                        <div class="van-con-div">{{ item }}</div>
+                        <div class="van-con-div">{{ item }}</div>
+                        <div class="van-con-div">{{ item }}</div>
+                        <div class="van-con-div">{{ item }}</div>
+                        <div class="van-con-div">{{ item }}</div>
+                        <div class="van-con-div">{{ item }}</div>
+                        <div class="van-con-div">{{ item }}</div>
+                    </div>
+                </div>
+                <div class="van-btn">
+                    <div class="van-cat">已选3包，共970元，邮费10元</div>
+                    <div class="van-buy" @click="buy">确认购买</div>
+                </div>
+            </van-action-sheet>
             <div class="box-footer-con">
                 <div class="box-footer-left">
                     <div>
                         <img src="../static/imgs/icon_kefu@3x.png" alt="" />
                         <p>客服</p>
                     </div>
-                    <div class="box-follow">
+                    <div class="box-follow" @click="follows">
                         <img src="../static/imgs/icon_guanzhu@3x.png" alt="" />
                         <p>关注</p>
                     </div>
@@ -84,13 +113,31 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            show: false,
+            selman: '',
+            list: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H']
+        };
     },
     methods: {
         address() {
             wx.redirectTo({
                 url: './address'
             });
+        },
+        selection() {
+            this.show = true;
+        },
+        buy() {
+            this.show = false;
+        },
+        alls(item) {
+            this.selman = item;
+        },
+        follows() {
+            wx.redirectTo({
+                url: './follow'
+            });
         }
     }
 };
@@ -103,7 +150,6 @@ export default {
         background: #ff6c00;
         border-radius: 12px;
         font-size: 16px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #ffffff;
     }
@@ -116,8 +162,7 @@ export default {
     .box-tit {
         height: 24px;
         font-size: 20px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: bold;
         color: #000000;
         line-height: 24px;
         margin: 20px 0 10px 0;
@@ -138,7 +183,6 @@ export default {
         p {
             height: 22px;
             font-size: 12px;
-            font-family: PingFangSC-Regular, PingFang SC;
             font-weight: 400;
             color: #ffffff;
             line-height: 22px;
@@ -147,7 +191,6 @@ export default {
     }
     .box-money {
         display: flex;
-        // align-items: center;
         margin: 15px 0 30px 0;
         img {
             width: 10px;
@@ -157,7 +200,6 @@ export default {
         p {
             height: 22px;
             font-size: 30px;
-            font-family: OSP-DIN, OSP;
             font-weight: normal;
             color: #f42202;
             line-height: 22px;
@@ -172,12 +214,10 @@ export default {
             height: 80px;
             background: #ff6c00;
             border-radius: 8px;
-            // opacity: 0.15;
             opacity: 0.7;
             p {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: rgba(0, 0, 0, 0.3);
                 line-height: 22px;
@@ -187,7 +227,6 @@ export default {
             span {
                 height: 26px;
                 font-size: 16px;
-                font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
                 // color: #ff6c00;
                 color: #000000;
@@ -201,12 +240,10 @@ export default {
             height: 80px;
             background: #ff6c00;
             border-radius: 8px;
-            // opacity: 0.15;
             opacity: 0.7;
             p {
                 height: 22px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: rgba(0, 0, 0, 0.3);
                 line-height: 22px;
@@ -216,9 +253,7 @@ export default {
             span {
                 height: 26px;
                 font-size: 16px;
-                font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
-                // color: #ff6c00;
                 color: #000000;
                 line-height: 26px;
                 text-align: center;
@@ -248,15 +283,13 @@ export default {
                     p {
                         height: 24px;
                         font-size: 15px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
+                        font-weight: bold;
                         color: #000000;
                         line-height: 24px;
                     }
                     span {
                         height: 22px;
                         font-size: 12px;
-                        font-family: PingFangSC-Regular, PingFang SC;
                         font-weight: 400;
                         color: rgba(0, 0, 0, 0.3);
                         line-height: 22px;
@@ -269,7 +302,6 @@ export default {
                 background: #f5f7fa;
                 border-radius: 8px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #939599;
                 line-height: 34px;
@@ -281,15 +313,13 @@ export default {
         width: 72px;
         height: 28px;
         font-size: 18px;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: bold;
         color: #000000;
         line-height: 28px;
         margin-top: 30px;
     }
     .box-details {
         font-size: 14px;
-        font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
         color: #303133;
         line-height: 28px;
@@ -307,13 +337,22 @@ export default {
         position: fixed;
         bottom: 0;
         left: 0;
-        width: 100%;
-        // display: flex;
         padding: 22px 20px;
+        .box-cat {
+            display: flex;
+            justify-content: space-between;
+            margin-right: 44px;
+            div {
+                height: 28px;
+                font-size: 16px;
+                font-weight: bold;
+                color: #000000;
+                line-height: 28px;
+            }
+        }
         p {
             height: 28px;
             font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
             font-weight: 500;
             color: #000000;
             line-height: 28px;
@@ -321,7 +360,6 @@ export default {
         }
         .box-footer-con {
             display: flex;
-            // justify-content: space-between;
             margin-top: 22px;
             .box-footer-left {
                 display: flex;
@@ -333,20 +371,75 @@ export default {
                 p {
                     height: 14px;
                     font-size: 10px;
-                    font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
                     color: #1a1a1a;
                     line-height: 14px;
                 }
                 .box-follow {
                     margin-left: 30px;
-                    // text-align: center;
                 }
             }
             .box-footer-right {
                 margin-left: 46px;
             }
         }
+        .van-box {
+            width: 335px;
+            height: 100px;
+            background: #f5f7fa;
+            border-radius: 8px;
+            margin: 0 20px 12px 20px;
+            .van-box-p {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 36px;
+                padding-left: 9px;
+            }
+            .van-con {
+                display: flex;
+                .van-con-div {
+                    width: 42px;
+                    height: 42px;
+                    background: #ffffff;
+                    border-radius: 8px;
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #000000;
+                    text-align: center;
+                    line-height: 42px;
+                    margin: 0 10px;
+                }
+            }
+        }
+        .van-btn {
+            display: flex;
+            margin: 0 20px;
+            .van-cat {
+                width: 237px;
+                height: 48px;
+                background: #ff6c00;
+                opacity: 0.7;
+                border-radius: 12px 0px 0px 12px;
+                font-size: 13px;
+                font-weight: 500;
+                color: #ffffff;
+                text-align: center;
+                line-height: 48px;
+            }
+            .van-buy {
+                width: 98px;
+                height: 48px;
+                background: #ff6c00;
+                border-radius: 0px 12px 12px 0px;
+                font-size: 16px;
+                font-weight: 400;
+                color: #ffffff;
+                text-align: center;
+                line-height: 48px;
+            }
+        }
     }
 }
 </style>

src/pages/follow.vue

@@ -0,0 +1,114 @@
+<config>
+{
+    "navigationBarTitleText": "我的关注",
+    "navigationBarBackgroundColor": "#ffffff",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle":"light"
+}
+</config>
+<template>
+    <div class="follow">
+        <div class="box-con-Cards">
+            <img src="../static/imgs/2.jpeg" alt="" />
+            <div class="box-con-right">
+                <p class="box-con-tit">DP20 简中 传说之决斗者编3</p>
+                <div class="box-con-today">
+                    <p>距离结束</p>
+                    <p class="box-con-p2">1天 20:35:06</p>
+                </div>
+                <div class="box-con-today">
+                    <p>已拼箱</p>
+                    <p class="box-con-p2">10/24</p>
+                </div>
+                <div class="box-con-money">
+                    <div class="box-con-num">
+                        <img src="../static/imgs/icon_jiage.png" alt="" />
+                        <p>320</p>
+                    </div>
+                    <van-button>取消关注</van-button>
+                </div>
+            </div>
+        </div>
+        <div class="box-border"></div>
+    </div>
+</template>
+<script>
+export default {
+    data() {}
+};
+</script>
+<style lang="less" scoped>
+.follow {
+    /deep/ .van-button {
+        border-radius: 8px;
+        background: #ffffff;
+        border: 1px solid #c8c9cc;
+        font-size: 14px;
+        font-weight: 400;
+        color: #c8c9cc;
+        line-height: 36px;
+        text-align: center;
+    }
+    .box-con-Cards {
+        padding: 32px 20px 27px 25px;
+        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-bottom: 10px;
+            }
+        }
+        .box-con-today {
+            display: flex;
+            p {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #c8c9cc;
+                line-height: 24px;
+            }
+            .box-con-p2 {
+                height: 24px;
+                font-size: 14px;
+                font-weight: 400;
+                color: #ff6c00;
+                line-height: 24px;
+                margin-left: 1px;
+            }
+        }
+        .box-con-money {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 13px;
+            .box-con-num {
+                display: flex;
+                align-items: center;
+                img {
+                    width: 10px;
+                    height: 10px;
+                    margin-top: 9px;
+                }
+                p {
+                    height: 22px;
+                    font-size: 24px;
+                    font-weight: normal;
+                    color: #f42202;
+                    line-height: 22px;
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/order.vue

@@ -1,6 +1,152 @@
+<config>
+{
+    "navigationBarBackgroundColor": "#ff6c00",
+    "navigationBarTextStyle": "black",
+    "backgroundTextStyle":"light"
+}
+</config>
 <template>
-    <div>
-        消息
+    <div class="container">
+        <div class="box-top">
+            <p>卖家已发货</p>
+            <h3>宝贝正在飞奔到你的怀中!</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>
+                <div class="box-adderss-right" @click="logistics">></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>
+                </div>
+            </div>
+        </div>
+        <div class="box-bg"></div>
+        <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">
+            <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>
+        <div class="box-border-but"></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">¥970</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>
+                <form class="box-buttom-p2" action="">选填，备注对本次交易的说明</form>
+            </div>
+        </div>
+        <div class="box-border-but"></div>
+        <!-- 下单时间 -->
+        <div class="box-footer">
+            <div class="box-footer-con">
+                <p>订单编号</p>
+                <div class="box-footer-cr">
+                    <span>复制</span>
+                    <p class="box-footer-p">2019052035464</p>
+                </div>
+            </div>
+        </div>
+        <div class="box-footer">
+            <div class="box-footer-con">
+                <p>创建时间</p>
+                <p class="box-footer-p">2021-05-20 07:52:36</p>
+            </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>
+        </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>
+        </div>
+        <div class="box-footer-nav">
+            <van-notice-bar color="#FF6C00" text="为了保障您的售后服务，收货时请拍摄完整的快递开封视频避免纠纷" />
+            <div class="box-btn">
+                <div 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>
+            </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>
+                </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>
+            </div>
+        </van-dialog>
     </div>
 </template>
 
@@ -8,8 +154,358 @@
 export default {
     name: '',
     data() {
-        return {};
+        return {
+            show: false,
+            steps: [
+                {
+                    text: '江苏省南京市玄武区派件员 王智元',
+                    desc: '15686868686正在为你派件',
+                    activeColor: '#000',
+                    time: '02-20 08:28'
+                }
+            ]
+        };
+    },
+    methods: {
+        logistics() {
+            this.show = true;
+            console.log(this.steps);
+        }
     }
 };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+    /deep/ .van-step__circle-container {
+        height: 0;
+    }
+    padding-bottom: 120px;
+    .box-top {
+        height: 102px;
+        background: #ff6c00;
+        margin-bottom: 20px;
+        p {
+            height: 34px;
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 34px;
+            padding: 11px 0 0 20px;
+        }
+        h3 {
+            height: 24px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #ffffff;
+            line-height: 24px;
+            margin: 8px 0 0 20px;
+        }
+    }
+    .box-adderss {
+        margin: 0 20px;
+        height: 161px;
+        .box-adderss-con {
+            display: flex;
+            img {
+                width: 22px;
+                height: 22px;
+                margin-right: 7px;
+            }
+            .box-adderss-right {
+                width: 6px;
+                height: 11px;
+                margin: 15px 0 0 118px;
+            }
+            .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;
+                }
+                .box-adderss-span {
+                    height: 24px;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #c8c9cc;
+                    line-height: 24px;
+                }
+                .box-con-span {
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+    .box-border {
+        height: 1px;
+        background: #f5f7fa;
+        margin: 22px 20px;
+    }
+    .box-border-but {
+        height: 1px;
+        background: #f5f7fa;
+        margin: 0 20px;
+    }
+    .box-bg {
+        height: 5px;
+        background: #f5f7fa;
+    }
+    .box-tit {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin: 20px 20px 0 20px;
+        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: 400;
+            color: #ff6c00;
+            line-height: 22px;
+        }
+    }
+    .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-footer {
+        margin: 15px 20px;
+        .box-footer-con {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .box-footer-cr {
+                display: flex;
+                span {
+                    width: 40px;
+                    height: 20px;
+                    border-radius: 2px;
+                    border: 1px solid #c8c9cc;
+                    font-size: 12px;
+                    font-weight: 400;
+                    color: #c8c9cc;
+                    line-height: 20px;
+                    text-align: center;
+                }
+            }
+            p {
+                height: 24px;
+                font-size: 13px;
+                font-weight: 400;
+                color: #939599;
+                line-height: 24px;
+            }
+            .box-footer-p {
+                height: 22px;
+                font-size: 13px;
+                font-weight: 400;
+                color: #000000;
+                line-height: 22px;
+            }
+        }
+    }
+    .box-footer-nav {
+        height: 104px;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background: #ffffff;
+        .box-tit2 {
+            height: 44px;
+            background: #ff6c00;
+            opacity: 0.26;
+            p {
+                text-align: center;
+                font-size: 13px;
+                font-weight: 400;
+                color: #000000;
+                line-height: 44px;
+            }
+        }
+        .box-btn {
+            display: flex;
+            justify-content: space-between;
+            margin: 6px 20px 0 20px;
+            .box-btn-left {
+                width: 163px;
+                height: 48px;
+                background-position: center;
+                background-size: 100% 100%;
+                font-size: 16px;
+                font-weight: 400;
+                color: #ffffff;
+                text-align: center;
+                line-height: 48px;
+            }
+            .box-btn-right {
+                width: 163px;
+                height: 48px;
+                background-position: center;
+                background-size: 100% 100%;
+                font-size: 16px;
+                font-weight: 400;
+                color: #ffffff;
+                text-align: center;
+                line-height: 48px;
+            }
+        }
+    }
+    .dialog-con {
+        margin: 12px 0 0 9px;
+        span {
+            height: 20px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #1a1a1a;
+            line-height: 20px;
+        }
+        .dialog-cv {
+            width: 40px;
+            height: 20px;
+            border-radius: 2px;
+            border: 1px solid #c8c9cc;
+            font-size: 12px;
+            font-weight: 400;
+            color: #c8c9cc;
+            line-height: 20px;
+            text-align: center;
+            margin-left: 8px;
+        }
+        .dialog-border {
+            width: 315px;
+            height: 1px;
+            background: #f2f4f5;
+            margin: 10px 0 15px 0;
+        }
+    }
+    .steps-con {
+        display: flex;
+        .steps-time {
+            width: 37px;
+            height: 34px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #1a1a1a;
+            line-height: 17px;
+            margin: 10px 0 22px 11px;
+        }
+    }
+}
+</style>

src/pages/receiving.vue

@@ -39,7 +39,7 @@ export default {
     methods: {
         address() {
             wx.redirectTo({
-                url: './address'
+                url: './add'
             });
         }
     }
@@ -51,12 +51,10 @@ export default {
         height: 70px;
         line-height: 70px;
         font-size: 14px;
-        font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
         color: #000000;
         // line-height: 24px;
     }
-
     // .van-cell__value {
     //     height: 70px;
     //     line-height: 70px;
@@ -69,31 +67,25 @@ export default {
         background: #f5f7fa;
         width: 100%;
         height: 600px;
-
         .box-img {
             display: flex;
             align-items: center;
             padding: 16px 0 0 20px;
-
             img {
                 width: 16px;
                 height: 16px;
             }
-
             p {
                 height: 18px;
                 font-size: 13px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #000000;
                 line-height: 18px;
                 padding-left: 2px;
             }
         }
-
         .box-but-con {
             margin: 0 43px;
-
             .container-but {
                 margin-top: 30px;
                 width: 290px;
@@ -102,21 +94,18 @@ export default {
                 border-radius: 12px;
                 opacity: 0.3;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #ffffff;
                 text-align: center;
                 line-height: 48px;
                 margin-bottom: 20px;
             }
-
             .container-cancel {
                 width: 290px;
                 height: 48px;
                 border-radius: 12px;
                 border: 1px solid #ff6c00;
                 font-size: 16px;
-                font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: #ff6c00;
                 text-align: center;