1

src/main.js

@@ -8,7 +8,7 @@ import 'vant/lib/index.css';
 import './assets/scss/common.scss';
 import querystring from 'querystring';
 import './plugins/element.js'
-document.title = '永天科技邀请函'
+document.title = '东信充值'
 Vue.use(Vant);
 Vue.config.productionTip = false
 Vue.prototype.$qs = querystring

src/router/index.js

@@ -23,6 +23,11 @@ const routes = [{
     name: 'record',
     component: () =>
         import ( /* webpackChunkName: "about" */ '../views/record')
+}, {
+    path: '/amount',
+    name: 'amount',
+    component: () =>
+        import ( /* webpackChunkName: "about" */ '../views/amount')
 }, ]
 
 const router = new VueRouter({

src/views/amount/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="mianBox">
+    <van-row class="headerBox">
+      <van-icon name="arrow-left" @click="$router.go(-1)" />
+      充值
+    </van-row>
+    <van-row class="contentBox">
+      <van-field
+        readonly
+        label="￥"
+        label-width="30px"
+        clickable
+        :value="money"
+        @touchstart.native.stop="show = true"
+      />
+      <van-number-keyboard
+        theme="custom"
+        :show="show"
+        :title="'￥' + money"
+        :hide-on-click-outside="false"
+        :maxlength="8"
+        extra-key="."
+        @input="handleInput"
+        @delete="handleDelete"
+        @close="handleClose"
+        close-button-text="确定"
+        @blur="show = false"
+      ></van-number-keyboard>
+    </van-row>
+    <van-overlay :show="overlayShow" @click="overlayShow = false" />
+  </div>
+</template>
+
+<script>
+import { Field, NumberKeyboard } from "vant";
+export default {
+  data() {
+    return {
+      show: false,
+      overlayShow: false,
+      money: "",
+    };
+  },
+  watch: {
+    money(val) {
+      if (/^0[1-9]/.test(val)) {
+        this.money = val.substring(1);
+      }
+    },
+  },
+  components: {
+    [Field.name]: Field,
+    [NumberKeyboard.name]: NumberKeyboard,
+  },
+  methods: {
+    handleInput(key) {
+      this.money = this.money + "";
+      if (this.money === "" && key === ".") {
+        this.money = "0";
+      } else if (this.money.indexOf(".") !== -1 && key === ".") {
+        return;
+      } else if (
+        this.money.indexOf("0") !== -1 &&
+        this.money.length === 1 &&
+        key === 0
+      ) {
+        return;
+      } else if (/\.\d{2}$/.test(this.money)) {
+        return;
+      }
+      this.money += key;
+    },
+    handleDelete() {
+      this.money = this.money + "";
+      if (!this.money) {
+        return;
+      }
+      this.money = this.money.substring(0, this.money.length - 1);
+    },
+    handleClose() {
+      this.money = Number(this.money);
+      this.overlayShow = true
+    },
+  },
+};
+</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;
+  }
+}
+</style>