支付页面修改

src/views/amount/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="mianBox">
+    <van-row class="balance">
+      <van-col span="8">余额：32.00元</van-col>
+    </van-row>
     <van-row class="headerBox">
       <van-icon name="arrow-left" @click="$router.go(-1)" />
       充值
@@ -8,7 +11,8 @@
       <van-field
         readonly
         label="￥"
-        label-width="30px"
+        placeholder="请输入充值金额（ 元 ）"
+        label-width="10px"
         clickable
         :value="money"
         @touchstart.native.stop="show = true"
@@ -28,17 +32,39 @@
       ></van-number-keyboard>
     </van-row>
     <van-overlay :show="overlayShow" @click="overlayShow = false" />
+    <van-row class="select_amount" gutter="26px" >
+        <van-col span="8" @click="btn50"  :style="state1" data="50" >50</van-col>
+        <van-col span="8" @click="btn100"  :style="state2" data="100">100</van-col>
+        <van-col span="8" @click="btn150"  :style="state3" data="150">150</van-col>
+        <van-col span="8" @click="btn200"  :style="state4" data="200">200</van-col>
+        <van-col span="8" @click="btn250"  :style="state5" data="250">250</van-col>
+        <van-col span="8" @click="btn300"  :style="state6" data="300">300</van-col>
+    </van-row>
+    <van-row class="pay_money" type="flex" justify="space-around">
+        <van-col span="12" class="left">应付金额</van-col>
+        <van-col span="12" class="right">￥{{money}}元</van-col>
+    </van-row>
+    <van-row class="tip">
+        我是充值说明提示文字我是充值说明提示文字我是充值说 明提示文字我是充值说明提示文字我是充值说明提示文字 我是充值说明提示文字。
+    </van-row>
+    <van-button class="amount" round type="danger" @click="recharge">立即充值</van-button>
   </div>
 </template>
 
 <script>
-import { Field, NumberKeyboard } from "vant";
+import { Field, NumberKeyboard, Dialog } from "vant";
 export default {
   data() {
     return {
       show: false,
       overlayShow: false,
-      money: "",
+      money: "0",
+      state1:"color:#000;background: #ccc;",
+      state2:"color:#000;background: #ccc;",
+      state3:"color:#000;background: #ccc;",
+      state4:"color:#000;background: #ccc;",
+      state5:"color:#000;background: #ccc;",
+      state6:"color:#000;background: #ccc;",
     };
   },
   watch: {
@@ -51,9 +77,16 @@ export default {
   components: {
     [Field.name]: Field,
     [NumberKeyboard.name]: NumberKeyboard,
+    [Dialog.name]: Dialog,
   },
   methods: {
     handleInput(key) {
+      this.state1 = "color:#000;background: #ccc;",
+      this.state2 = "color:#000;background: #ccc;",
+      this.state3 = "color:#000;background: #ccc;",
+      this.state4 = "color:#000;background: #ccc;",
+      this.state5 = "color:#000;background: #ccc;",
+      this.state6 = "color:#000;background: #ccc;",
       this.money = this.money + "";
       if (this.money === "" && key === ".") {
         this.money = "0";
@@ -75,29 +108,155 @@ export default {
       if (!this.money) {
         return;
       }
-      this.money = this.money.substring(0, this.money.length - 1);
+      this.money = this.money.substring(0, this.money.length - 1) || 0;
     },
     handleClose() {
       this.money = Number(this.money);
-      this.overlayShow = true
+      this.overlayShow = false
+    },
+    recharge(){
+      if(this.money){
+        this.$router.push({path: '/recharge',query:{money:this.money}})
+      }else{
+        Dialog.confirm({
+          title: '提示',
+          message: '充值金额不能为0元！'
+        })
+      }
+      
+    },
+    btn50() {
+      this.state1 = "color:#fff;background:rgba(242, 46, 60, 1);",
+      this.state2 = "color:#000;background: #ccc;",
+      this.state3 = "color:#000;background: #ccc;",
+      this.state4 = "color:#000;background: #ccc;",
+      this.state5 = "color:#000;background: #ccc;",
+      this.state6 = "color:#000;background: #ccc;",
+      this.money = 50
+    },
+    btn100() {
+      this.state1 = "color:#000;background: #ccc;",
+      this.state2 = "color:#fff;background: rgba(242, 46, 60, 1);",
+      this.state3 = "color:#000;background: #ccc;",
+      this.state4 = "color:#000;background: #ccc;",
+      this.state5 = "color:#000;background: #ccc;",
+      this.state6 = "color:#000;background: #ccc;",
+      this.money = 100
+    },
+    btn150() {
+      this.state1 = "color:#000;background: #ccc;",
+      this.state2 = "color:#000;background: #ccc;",
+      this.state3 = "color:#fff;background: rgba(242, 46, 60, 1);",
+      this.state4 = "color:#000;background: #ccc;",
+      this.state5 = "color:#000;background: #ccc;",
+      this.state6 = "color:#000;background: #ccc;",
+      this.money = 150
+    },
+    btn200() {
+      this.state1 = "color:#000;background: #ccc;",
+      this.state2 = "color:#000;background: #ccc;",
+      this.state3 = "color:#000;background: #ccc;",
+      this.state4 = "color:#fff;background: rgba(242, 46, 60, 1);",
+      this.state5 = "color:#000;background: #ccc;",
+      this.state6 = "color:#000;background: #ccc;",
+      this.money = 200
+    },
+    btn250() {
+      this.state1 = "color:#000;background: #ccc;",
+      this.state2 = "color:#000;background: #ccc;",
+      this.state3 = "color:#000;background: #ccc;",
+      this.state4 = "color:#000;background: #ccc;",
+      this.state5 = "color:#fff;background: rgba(242, 46, 60, 1);",
+      this.state6 = "color:#000;background: #ccc;",
+      this.money = 250
+    },
+    btn300() {
+      this.state1 = "color:#000;background: #ccc;",
+      this.state2 = "color:#000;background: #ccc;",
+      this.state3 = "color:#000;background: #ccc;",
+      this.state4 = "color:#000;background: #ccc;",
+      this.state5 = "color:#000;background: #ccc;",
+      this.state6 = "color:#fff;background: rgba(242, 46, 60, 1);",
+      this.money = 300
     },
   },
 };
 </script>
-
 <style lang="scss" scoped>
 .mianBox {
   width: 100vw;
-  padding-top: 44px;
+  padding: 44px 10px 0 10px;
   height: 100vh;
   color: #000;
   box-sizing: border-box;
+  .balance{
+    font-size: 16px;
+    margin:10px 0;
+  }
   .contentBox {
     width: 100%;
-    height: 100%;
+    // height: 100%;
     overflow-y: auto;
-    padding: 0 10px;
     box-sizing: border-box;
+    label{
+      color:rgba(242, 46, 60, 1) !important;
+    }
+    
+    .van-cell{
+      font-size: 16px;
+      padding:10px 6px;
+      border: 1px solid rgba(110, 109, 109, 0.2);
+    }
+    .an-field{
+      background-color: #ccc;
+    }
+  }
+  .select_amount{
+    margin-top:0px;
+    &>.van-col{
+      padding:10px 0;
+      background-color: #ccc;
+      color:#000;
+      text-align: center;
+      font-size: 16px;
+      border-radius: 6px;
+      margin-top:20px;
+      float:left;
+      width:28%;
+    }
+    &>.van-col.active{
+      background: rgba(242, 46, 60, 1);
+      color:#fff;
+    }
+    &>.van-col:nth-child(3n-1),&>.van-col:nth-child(3n){
+      margin-left:8%
+    }
+  }
+  
+  .pay_money{
+    font-size: 16px;
+    margin:16px 0;
+    .left{
+      text-align: left;
+    }
+    .right{
+      text-align: right;
+      color: rgba(242, 46, 60, 1);
+    }
+  }
+  .tip{
+    font-size: 14px;
+    color: #CCC;
+  }
+  &>.van-button{
+      position: absolute;
+      bottom: 25px;
+      width: 350px;
+      height: 50px;
+      font-size: 18px;
+  }
+  .van-field__label{
+    color:rgba(242, 46, 60, 1) !important;
   }
 }
 </style>

src/views/balance/index.vue

@@ -8,7 +8,7 @@
         <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>
+    <van-button class="amount" round type="danger" @click="$router.push('/amount')">充值</van-button>
   </div>
 </template>
 
@@ -51,5 +51,6 @@ export default {
         height: 50px;
         font-size: 18px;
     }
+    
 }
 </style>

src/views/home/index.vue

@@ -12,7 +12,7 @@
         <van-col :span="24">账户余额</van-col>
         <van-col :span="24">个人账户余额信息</van-col>
       </van-row>
-      <van-row @click="$router.push('/recharge')">
+      <van-row @click="$router.push('/amount')">
         <van-image
           :src="require('../../assets/image/recharge.png')"
         />

src/views/recharge/index.vue

@@ -30,7 +30,8 @@ export default {
     return {
       iosApp: "",
       token:'',
-      url:''
+      url:'',
+      money:null
     };
   },
   mounted() {
@@ -41,6 +42,9 @@ export default {
       this.iosApp = false;
     }
   },
+  created(){
+    this.money = this.$route.query.money
+  },
   methods: {
     isWeixin() {
       return navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1;
@@ -59,7 +63,7 @@ export default {
               this.token = res.data.token
               console.log(res1)
             }).then(()=>{
-              let res2 = this.$axios.post('http://172.16.120.104:8085/dxtop/order/callUnifiedPay' , { "money":'10',"topPayType":"A01","payType":'3'}
+              let res2 = this.$axios.post('http://172.16.120.104:8085/dxtop/order/callUnifiedPay' , { "money":this.money,"topPayType":"A01","payType":'3'}
               ,{
                 headers: {
                   "Authorization":this.token  //token换成从缓存获取
@@ -95,7 +99,7 @@ export default {
               this.token = res.data.token
               console.log(res1)
             }).then(()=>{
-              let res2 = this.$axios.post('http://172.16.120.104:8085/dxtop/order/callUnifiedPay' , { "money":'10',"topPayType":"A01","payType":'3'}
+              let res2 = this.$axios.post('http://172.16.120.104:8085/dxtop/order/callUnifiedPay' , { "money":this.money,"topPayType":"A01","payType":'3'}
               ,{
                 headers: {
                   "Authorization":this.token  //token换成从缓存获取