提交

src/main.js

@@ -31,7 +31,8 @@ export default {
             'pages/receiving',
             'pages/add',
             'pages/details',
-            'pages/news'
+            'pages/news',
+            'pages/order'
         ],
         tabBar: {
             color: '#333',
@@ -50,7 +51,7 @@ export default {
                     selectedIconPath: 'native/imgs/tabbar_icon_05_pre.png'
                 },
                 {
-                    pagePath: 'pages/my/my',
+                    pagePath: 'pages/order',
                     text: '我的',
                     iconPath: 'native/imgs/tabbar_icon_04.png',
                     selectedIconPath: 'native/imgs/tabbar_icon_04_pre.png'
@@ -88,7 +89,10 @@ export default {
             'van-stepper': '/vant/stepper/index',
             'van-steps': '/vant/steps/index',
             'van-rate': '/vant/rate/index',
-            'van-popup': '/vant/popup/index'
+            'van-popup': '/vant/popup/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'
         }
     }
 };

src/pages/Home.vue

@@ -10,11 +10,11 @@
 <template>
     <div class="container">
         <div class="container-bg">
-            <div class="mytest"><img class="mytest" src="../static/imgs/home_top_bg.png" alt="" /></div>
+            <div class="mytest"><img class="mytest" src="../static/imgs/home_top_bg@3x.png" alt="" /></div>
             <span>游戏王OCG</span>
             <div class="box-top">
                 <div class="box-img">
-                    <p class="box-top-img"><img src="../static/imgs/home_icon_qihuan.png" alt="" /></p>
+                    <p class="box-top-img"><img src="../static/imgs/home_icon_qihuan@3x.png" alt="" /></p>
                     <p class="box-top-sp">切换卡片</p>
                 </div>
             </div>
@@ -78,7 +78,7 @@
                     </div>
                     <div class="box-con-money">
                         <div class="box-con-num">
-                            <img src="../static/imgs/icon_jiage.png" alt="" />
+                            <img src="../static/imgs/icon_jiage@3x.png" alt="" />
                             <p>1020</p>
                         </div>
                         <van-button type="warning" @click="Details">立即拼箱</van-button>
@@ -300,8 +300,9 @@ export default {
                     display: flex;
                     align-items: center;
                     img {
-                        width: 16px;
-                        height: 16px;
+                        width: 10px;
+                        height: 10px;
+                        margin-top: 8px;
                     }
                     p {
                         height: 22px;

src/pages/address.vue

@@ -17,7 +17,7 @@
                 <span @click="address">></span>
             </div>
         </div>
-        <img src="/native/tabbar/img_dizhitiao.png" alt="" />
+        <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>
@@ -73,6 +73,14 @@
             </div>
             <van-button type="warning">确认订单</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>
@@ -91,12 +99,17 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
+    // position: relative;
     // 按钮
     /deep/ .van-button {
         height: 48px;
-        // background: #ff6c00;
-        // background: #ff6c00;
+        width: 210px;
+        background: #ff6c00;
         border-radius: 12px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
     }
     .box-top {
         height: 44px;
@@ -151,7 +164,6 @@ export default {
             height: 17px;
         }
         p {
-            // width: 70px;
             height: 22px;
             font-size: 14px;
             font-family: PingFangSC-Regular, PingFang SC;
@@ -247,7 +259,7 @@ export default {
         }
     }
     .box-buttom {
-        margin: 40px 20px;
+        margin: 35px 20px;
         .box-buttom-con {
             display: flex;
             align-items: center;
@@ -280,8 +292,13 @@ export default {
     .box-total {
         margin: 34px 20px 10px 20px;
         display: flex;
+        height: 60px;
         align-items: center;
         justify-content: space-between;
+        // position: absolute;
+        // bottom: 0;
+        // right: 0;
+        // left: 0;
         .box-con-num {
             display: flex;
             align-items: center;
@@ -292,12 +309,11 @@ export default {
                 font-weight: 400;
                 color: #c8c9cc;
                 line-height: 22px;
-                // background: yellow;
             }
             img {
                 width: 10px;
                 height: 10px;
-                margin-left: 5px;
+                margin: 7px 0 0 5px;
             }
             p {
                 height: 22px;

src/pages/details.vue

@@ -8,14 +8,14 @@
 </config>
 <template>
     <div class="container">
-        <div><img src="../static/imgs/home_top_bg.png" alt="" /></div>
+        <div><img src="../static/imgs/home_top_bg@3x.png" alt="" /></div>
         <div class="box-tit">1105皇权破晓 卡包拼箱 全80种</div>
         <div class="box-live">
             <img src="../native/imgs/icon_kapai_zhibo@3x.png" alt="" />
             <p>直播未开始</p>
         </div>
         <div class="box-money">
-            <img src="../static/imgs/icon_jiage.png" alt="" />
+            <img src="../static/imgs/icon_jiage@3x.png" alt="" />
             <p>320</p>
         </div>
         <div class="box-con">
@@ -31,13 +31,13 @@
         <div class="box-con2">
             <div class="box-con2-shop">
                 <div class="box-con2-tit">
-                    <img src="../static/imgs/icon_jiage.png" alt="" />
+                    <img src="../native/tabbar/mine_on.png" alt="" />
                     <div class="logo-shop">
                         <p>光之城官方卡牌店铺</p>
                         <span>浙江 杭州</span>
                     </div>
                 </div>
-                <div class="logo-btn" @click="address">进入店铺</div>
+                <div class="logo-btn">进入店铺</div>
             </div>
         </div>
         <h3>拼箱详情</h3>
@@ -46,7 +46,7 @@
             其中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.png" alt="" />
+        <img class="container-img" src="../static/imgs/home_top_bg@3x.png" alt="" />
         <h3>拼箱规则</h3>
         <div class="box-details">
             1.拼箱是一种类似拼团的玩法，用户选号后支付，当箱中的全部号码都被购买完毕，才算拼箱成功。如果在有限时间内拼箱没有成团，系统会把钱退回给买家
@@ -54,13 +54,31 @@
             3.拼箱商品支付成功后不支持退款退货，请谨慎、理智购买
         </div>
         <!-- <van-button disabled type="info">禁用状态</van-button> -->
-        <van-goods-action>
-            <van-goods-action-icon icon="chat-o" text="客服" dot />
-            <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
-            <van-goods-action-icon icon="shop-o" text="店铺" />
-            <van-goods-action-button text="加入购物车" type="warning" />
-            <van-goods-action-button text="立即购买" />
-        </van-goods-action>
+        <!-- <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-footer-con">
+                <div class="box-footer-left">
+                    <div>
+                        <img src="../static/imgs/icon_kefu@3x.png" alt="" />
+                        <p>客服</p>
+                    </div>
+                    <div class="box-follow">
+                        <img src="../static/imgs/icon_guanzhu@3x.png" alt="" />
+                        <p>关注</p>
+                    </div>
+                </div>
+                <div class="box-footer-right">
+                    <van-button type="warning" @click="address">立即购买</van-button>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script>
@@ -79,7 +97,17 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
-    padding: 15px 20px 0 20px;
+    /deep/ .van-button {
+        width: 210px;
+        height: 48px;
+        background: #ff6c00;
+        border-radius: 12px;
+        font-size: 16px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+    }
+    padding: 15px 20px 145px 20px;
     img {
         width: 335px;
         height: 335px;
@@ -272,5 +300,53 @@ export default {
         height: 193px;
         border-radius: 12px;
     }
+    .box-footer {
+        width: 100%;
+        height: 82px;
+        background: #ffffff;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        // display: flex;
+        padding: 22px 20px;
+        p {
+            height: 28px;
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+            line-height: 28px;
+            margin-bottom: 16px;
+        }
+        .box-footer-con {
+            display: flex;
+            // justify-content: space-between;
+            margin-top: 22px;
+            .box-footer-left {
+                display: flex;
+                text-align: center;
+                img {
+                    width: 24px;
+                    height: 24px;
+                }
+                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;
+            }
+        }
+    }
 }
 </style>

src/pages/order.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+        消息
+    </div>
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {};
+    }
+};
+</script>
+<style lang="less" scoped></style>

src/pages/receiving.vue

@@ -20,7 +20,7 @@
                 <p>设为默认地址</p>
             </div>
             <div class="box-but-con">
-                <div class="container-but">确认</div>
+                <div class="container-but" @click="address">确认</div>
                 <div class="container-cancel">获取微信地址</div>
             </div>
         </div>
@@ -36,7 +36,13 @@ export default {
             detailed: ''
         };
     },
-    methods: {}
+    methods: {
+        address() {
+            wx.redirectTo({
+                url: './address'
+            });
+        }
+    }
 };
 </script>
 <style lang="less" scoped>