完成余额、充值、明细页面

src/assets/scss/common.scss

@@ -0,0 +1,19 @@
+.headerBox {
+    height: 44px;
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    background: rgba(242, 46, 60, 1);
+    text-align: center;
+    line-height: 44px;
+    color: #FFF;
+    font-size: 18px;
+    padding: 0 10px;
+    z-index: 9;
+    .van-icon {
+        float: left;
+        line-height: 44px;
+    }
+}

src/main.js

@@ -5,6 +5,7 @@ import router from './router'
 import store from './store'
 import Vant from 'vant';
 import 'vant/lib/index.css';
+import './assets/scss/common.scss';
 import querystring from 'querystring';
 import './plugins/element.js'
 document.title = '永天科技邀请函'

src/router/index.js

@@ -8,6 +8,21 @@ const routes = [{
     name: 'Home',
     component: () =>
         import ( /* webpackChunkName: "about" */ '../views/home')
+}, {
+    path: '/balance',
+    name: 'balance',
+    component: () =>
+        import ( /* webpackChunkName: "about" */ '../views/balance')
+}, {
+    path: '/recharge',
+    name: 'recharge',
+    component: () =>
+        import ( /* webpackChunkName: "about" */ '../views/recharge')
+}, {
+    path: '/record',
+    name: 'record',
+    component: () =>
+        import ( /* webpackChunkName: "about" */ '../views/record')
 }, ]
 
 const router = new VueRouter({

src/views/balance/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="mianBox">
+    <van-row class="headerBox">
+      <van-icon name="arrow-left" @click="$router.go(-1)" />
+      账户余额
+    </van-row>
+    <van-row class="contentBox">
+        <van-col :span="24">账户余额(元)</van-col>
+        <van-col :span="24">838.00</van-col>
+    </van-row>
+    <van-button round type="danger" @click="$router.push('/recharge')">充值</van-button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox{
+    height: 100%;
+    width: 100%;
+    color: #000;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .contentBox{
+        padding-bottom: 200px;
+        box-sizing: border-box;
+        &>.van-col:nth-child(1){
+            text-align: center;
+            font-size: 18px;
+        }
+        &>.van-col:nth-child(2){
+            text-align: center;
+            font-size: 35px;
+            margin-top: 23px;
+        }
+    }
+    &>.van-button{
+        position: absolute;
+        bottom: 25px;
+        width: 350px;
+        height: 50px;
+        font-size: 18px;
+    }
+}
+</style>

src/views/home/index.vue

@@ -1,19 +1,76 @@
 <template>
-  <div>
-
+  <div class="mianBox">
+    <van-row class="headerBox">
+      <van-icon name="arrow-left" @click="$router.go(-1)" />
+      一卡通
+    </van-row>
+    <van-row class="contentBox">
+      <van-row @click="$router.push('/balance')">
+        <van-col :span="24">账户余额</van-col>
+        <van-col :span="24">个人账户余额信息</van-col>
+      </van-row>
+      <van-row @click="$router.push('/recharge')">
+        <van-col :span="24">充值</van-col>
+        <van-col :span="24">对余额进行充值</van-col>
+      </van-row>
+      <van-row @click="$router.push('/record')">
+        <van-col :span="24">消费记录</van-col>
+        <van-col :span="24">查看消费记录和充值记录</van-col>
+      </van-row>
+    </van-row>
   </div>
 </template>
 
 <script>
 export default {
-    data(){
-        return{
-            
-        }
-    }
-}
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
 </script>
 
 <style lang="scss" scoped>
-
+.mianBox{
+    height: 100%;
+    width: 100%;
+    color: #FFF;
+    padding-top: 44px;
+    box-sizing: border-box;
+    .contentBox{
+      width: 100%;
+      height: auto;
+      padding: 15px 10px;
+      box-sizing: border-box;
+      &>.van-row{
+        height: 90px;
+        width: 350px;
+        margin-bottom: 15px;
+        padding-left: 85px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        .van-col{
+          padding: 7px 0;
+        }
+        &>.van-col:nth-child(1){
+          font-size: 18px;
+        }
+        &>.van-col:nth-child(2){
+          font-size: 14px;
+        }
+      }
+      &>.van-row:nth-child(1){
+        background: url('../../assets/image/balance.png') no-repeat 100%;
+      }
+      &>.van-row:nth-child(2){
+        background: url('../../assets/image/recharge.png') no-repeat 100%;
+      }
+      &>.van-row:nth-child(3){
+        background: url('../../assets/image/record.png') no-repeat 100%;
+      }
+    }
+}
 </style>

src/views/recharge/index.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="mianBox">
+    <van-row class="headerBox">
+      <van-icon name="arrow-left" @click="$router.go(-1)" />
+      选择充值方式
+    </van-row>
+    <van-row class="contentBox">
+      <van-row>
+        <van-col @click="openApp({app:'weixin://scanqrcode',downA:'https://dldir1.qq.com/weixin/android/weixin8011android1980_arm64.apk',downI:'https://itunes.apple.com/cn/app/wei/id414478124',})"></van-col>
+        <van-col @click="openApp({app:'alipayqr://platformapi/startapp?saId=10000007',downA:'https://t.alipayobjects.com/L1/71/100/and/alipay_wap_main.apk',downI:'https://itunes.apple.com/cn/app/id333206289?mt=8',})"></van-col>
+        <van-col @click="openApp({app:'ysf',downA:'',downI:'',})"></van-col>
+      </van-row>
+      <van-row>
+        请选择微信、支付宝或云闪付进行充值。
+      </van-row>
+    </van-row>
+  </div>
+</template>
+
+<script>
+import { Dialog, Notify } from "vant";
+export default {
+  components: {
+    [Notify.Component.name]: Notify.Component,
+    [Dialog.Component.name]: Dialog.Component,
+  },
+  data() {
+    return {
+      iosApp: "",
+    };
+  },
+  mounted() {
+    if (this.isWeixin()) {
+      this.iosApp = true;
+    } else {
+      //显示手动打开外置浏览器提示
+      this.iosApp = false;
+    }
+  },
+  methods: {
+    isWeixin() {
+      return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
+    },
+    openApp(url = "") {
+      if (!url) return;
+      if (url.app === 'ysf') return Notify({ type: 'primary', message: '暂不可用' });
+      if (this.iosApp) return Notify({ type: 'primary', message: '请使用浏览器打开' });
+      // 非微信浏览器
+      window.navigator.userAgent.toLowerCase();
+      if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
+        window.location.href = url.app;
+        const loadDateTime = +new Date();
+        window.setTimeout( ()=> {
+          const timeOutDateTime = +new Date();
+          if (timeOutDateTime - loadDateTime > 5000) {
+            window.location.href = url.downI;
+          } else {
+            window.close();
+            Dialog.confirm({
+              title: '提示',
+              message: '是否已完成充值？',
+            }).then(() => {
+              this.$router.push('/record')
+            }).catch((e) => {
+              console.log(e)
+            });
+          }
+        }, 2000);
+      } else if (navigator.userAgent.match(/android/i)) {
+        try {
+          window.location.href = url.app;
+          setTimeout(function () {
+            window.location.href = url.downA;
+          }, 500);
+        } catch (e) {
+          console.log(e)
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  height: 100%;
+  width: 100%;
+  color: #000;
+  padding-top: 44px;
+  box-sizing: border-box;
+  .contentBox {
+    width: 100%;
+    height: auto;
+    padding: 15px 10px;
+    box-sizing: border-box;
+    &>.van-row:nth-child(1){
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 86px;
+      width: 100%;
+      &::after{
+        display: none;
+      }
+      &>.van-col:nth-child(1){
+        background: url('../../assets/image/wx.png') no-repeat;
+      }
+      &>.van-col:nth-child(2){
+        background: url('../../assets/image/zfb.png') no-repeat;
+      }
+      &>.van-col:nth-child(3){
+        background: url('../../assets/image/ysf.png') no-repeat;
+      }
+      &>.van-col{
+        width: 86px;
+        height: 86px;
+        background-size: 100% 100%;
+      }
+    }
+    &>.van-row:nth-child(2){
+      margin-top: 20px;
+      font-size: 16px;
+      color: #CCC;
+    }
+  }
+}
+</style>

src/views/record/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="mianBox">
+    <van-row class="headerBox">
+      <van-icon name="arrow-left" @click="$router.go(-1)" />
+      选择充值方式
+    </van-row>
+    <van-row class="contentBox">
+      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad"
+        >
+            <van-row class="listBoxCell" v-for="item in list" :key="item">
+                <van-col span="18">
+                    <van-row class="jlName">充值记录</van-row>
+                    <van-row class="jlTime">时间：2021-03-08 12:37</van-row>
+                </van-col>
+                <van-col span="6" class="jlMoney" :class="item%2?'just':'negative'">+200元</van-col>
+            </van-row>
+        </van-list>
+      </van-pull-refresh>
+    </van-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [],
+      loading: false,
+      finished: false,
+      refreshing: false,
+    };
+  },
+  methods: {
+    onLoad() {
+      setTimeout(() => {
+        if (this.refreshing) {
+          this.list = [];
+          this.refreshing = false;
+        }
+
+        for (let i = 0; i < 10; i++) {
+          this.list.push(this.list.length + 1);
+        }
+        this.loading = false;
+
+        if (this.list.length >= 40) {
+          this.finished = true;
+        }
+      }, 1000);
+    },
+    onRefresh() {
+      // 清空列表数据
+      this.finished = false;
+
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.loading = true;
+      this.onLoad();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mianBox {
+  width: 100vw;
+  padding-top: 44px;
+  height: 100vh;
+  color: #000;
+  box-sizing: border-box;
+  .contentBox {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    padding: 0 10px;
+    box-sizing: border-box;
+    .listBoxCell{
+        height: 75px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid rgba(237,237,237,1);
+        .jlName{
+            font-size: 16px;
+            color: #000;
+        }
+        .jlTime{
+            margin-top: 10px;
+            font-size: 12px;
+            color: #ccc;
+        }
+        .jlMoney{
+            text-align: right;
+            font-size: 16px;
+        }
+        .jlMoney.just{
+            color: rgba(56,129,253,1); 
+        }
+        .jlMoney.negative{
+            color: rgba(242,46,60,1);
+        }
+    }
+  }
+}
+</style>

vue.config.js

@@ -36,7 +36,7 @@ module.exports = {
                 plugins: [
                     require('postcss-px-to-viewport')({
                         unitToConvert: 'px', // 需要转换的单位，默认为"px"
-                        viewportWidth: 750, //  设计稿的视口宽度
+                        viewportWidth: 375, //  设计稿的视口宽度
                         unitPrecision: 5, // 单位转换后保留的精度
                         propList: ['*'], // 能转化为vw的属性列表
                         viewportUnit: 'vw', //  希望使用的视口单位
@@ -49,7 +49,7 @@ module.exports = {
                         include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
                         landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
                         landscapeUnit: 'vw', // 横屏时使用的单位
-                        landscapeWidth: 568 // 横屏时使用的视口宽度
+                        landscapeWidth: 667 // 横屏时使用的视口宽度
                     })
                 ]
             }