增加支付状态页paystate

src/assets/css/ammeter.css

@@ -3,14 +3,11 @@
     padding: 0;
 }
 
-.color-red{
+.color-red {
     color: #ac1a32
 }
 
-.color-bigred,
-.van-dropdown-menu__title--active,
-.van-dropdown-item__option--active, 
-.van-dropdown-item__option--active .van-dropdown-item__icon  {
+.color-bigred, .van-dropdown-menu__title--active, .van-dropdown-item__option--active, .van-dropdown-item__option--active .van-dropdown-item__icon {
     color: #e7352f
 }
 
@@ -104,7 +101,7 @@
     margin: 10px 0;
     display: flex;
     height: 60px;
-    background:#eee;
+    background: #eee;
 }
 
 .fyyinput input {
@@ -166,26 +163,59 @@
     border-bottom: 1px #999 solid;
     border-right: 1px #999 solid;
 }
-.m-left10{
-    margin-left:10px;
+
+.m-left10 {
+    margin-left: 10px;
 }
-.fyypay .van-cell-group p{
+
+.fyypay .van-cell-group p {
     text-align: right;
 }
-.fyypay .van-cell-group{
-    margin-bottom:20px
+
+.fyypay .van-cell-group {
+    margin-bottom: 20px
 }
-.fyyradio-pay .van-cell img{
-    width:40%
+
+.fyyradio-pay .van-cell img, .paystate img {
+    width: 40%
 }
-.fyyradio-pay .van-cell{
-    border:1px #ccc solid;
-    padding:15px 20px;
-    line-height:0;
-    margin-top:10px;
+
+.fyyradio-pay .van-cell {
+    border: 1px #ccc solid;
+    padding: 15px 20px;
+    line-height: 0;
+    margin-top: 10px;
     border-radius: 4px;
 }
-.van-radio__icon--checked .van-icon{
-    background-color:#e7352f;
-    border-color:#e7352f;
+
+.van-radio__icon--checked .van-icon {
+    background-color: #e7352f;
+    border-color: #e7352f;
+}
+
+.paystate {
+    text-align: center
+}
+
+.paystate img {
+    padding: 60px 0
+}
+
+.paystate h1 {
+    margin-bottom: 10px
+}
+
+.paybutton button {
+    width: 100%;
+    margin-top: 15px;
+    border-radius: 4px;
+}
+
+.van-button--bigred {
+    color: #fff
+}
+
+.paybutton .van-button.van-button--default {
+    color: #333;
+    border: 1px #999 solid;
 }

src/components/Paystate.vue

@@ -0,0 +1,33 @@
+<template id='Paystate'>
+  <div>
+    <van-nav-bar title="充值状态" left-arrow @click-left="back"></van-nav-bar>
+    <div class="fyycontent">
+      <div class="paystate">
+        <img src="@/assets/img/payyes.png" />
+        <h1>支付成功</h1>
+        <p>支付方式：微信支付</p>
+      </div>
+    </div>
+    <div class="fyyfooter paybutton">
+      <router-link to="/Paylist">
+        <van-button type="bigred">充值记录</van-button>
+      </router-link>
+      <router-link to="/">
+        <van-button type="default">返回首页</van-button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    back() {
+      this.$router.push("/Pay");
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>

src/main.js

@@ -14,7 +14,9 @@ import { Cell, CellGroup } from 'vant'
 import { Toast } from 'vant'
 import AxiosPlugin from './plugins/AxiosPlugin'
 import { RadioGroup, Radio } from 'vant'
+import { Image } from 'vant'
 
+Vue.use(Image)
 Vue.use(RadioGroup)
 Vue.use(Radio)
 Vue.use(Cell).use(CellGroup)
@@ -24,7 +26,6 @@ Vue.use(Button)
 Vue.use(NavBar)
 Vue.use(DropdownMenu).use(DropdownItem)
 Vue.use(Toast)
-
 Vue.use(AxiosPlugin)
 
 Vue.config.productionTip = false

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Home from '@/components/Home'
 import Pay from '@/components/Pay'
 import Paylist from '@/components/Paylist'
+import Paystate from '@/components/Paystate'
 import 'vant/lib/index.css'
 
 Vue.use(Router)
@@ -23,6 +24,11 @@ export default new Router({
       path: '/Paylist',
       name: 'Paylist',
       component: Paylist
+    },
+    {
+      path: '/Paystate',
+      name: 'Paystate',
+      component: Paystate
     }
   ]
 })