增加支付方式选择

src/assets/css/ammeter.css

@@ -3,14 +3,14 @@
     padding: 0;
 }
 
-.color-red,
-.van-dropdown-menu__title--active,
-.van-dropdown-item__option--active, 
-.van-dropdown-item__option--active .van-dropdown-item__icon {
+.color-red{
     color: #ac1a32
 }
 
-.color-bigred {
+.color-bigred,
+.van-dropdown-menu__title--active,
+.van-dropdown-item__option--active, 
+.van-dropdown-item__option--active .van-dropdown-item__icon  {
     color: #e7352f
 }
 
@@ -101,8 +101,10 @@
 .fyyinput {
     border: 1px #999 solid;
     border-radius: 4px;
-    margin: 20px 0 10px;
+    margin: 10px 0;
     display: flex;
+    height: 60px;
+    background:#eee;
 }
 
 .fyyinput input {
@@ -110,17 +112,18 @@
     border: 0;
     padding: 0 15px;
     text-align: center;
+    background: #eee;
 }
 
 .input-right {
-    line-height: 38px;
+    line-height: 58px;
     flex: 0.1
 }
 
 .fyyfooter p {
     text-align: right;
     margin-bottom: 15px;
-    font-size: 14px
+    font-size: 14px;
 }
 
 .paylist-body {
@@ -162,4 +165,27 @@
     border-left: 1px #999 solid;
     border-bottom: 1px #999 solid;
     border-right: 1px #999 solid;
+}
+.m-left10{
+    margin-left:10px;
+}
+.fyypay .van-cell-group p{
+    text-align: right;
+}
+.fyypay .van-cell-group{
+    margin-bottom:20px
+}
+.fyyradio-pay .van-cell img{
+    width:40%
+}
+.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;
 }

src/components/Pay.vue

@@ -3,11 +3,11 @@
     <van-nav-bar title="电量充值" left-arrow @click-left="back">
       <span @click="go" class="iconfont" slot="right">&#xe646;</span>
     </van-nav-bar>
-    <div class="fyycontent">
+    <div class="fyycontent fyypay">
       <van-cell-group>
         <van-cell>
-          <span class="iconfont color-red fyy-icon">&#xe647;</span>
-          请选择园区
+          <span class="iconfont color-red fyy-icon">&#xe640;</span>
+          创业学校园区A<span class="m-left10">1栋楼</span><span class="m-left10">601</span>
         </van-cell>
         <div class="fyyinput">
           <input type="text" placeholder="请输入要充值的电量度数" />
@@ -15,6 +15,25 @@
         </div>
         <p class="fyy-h6">价格标准：0.56元/度</p>
       </van-cell-group>
+      <van-cell-group>
+        <van-cell>
+          <span class="iconfont color-red fyy-icon">&#xe648;</span>
+          选择支付方式
+        </van-cell>
+        
+        <van-radio-group v-model="radio" class="fyyradio-pay">
+          <van-cell-group>
+            <van-cell clickable @click="radio = '1'">
+              <img src="@/assets/img/zhifubao.png" />
+              <van-radio slot="right-icon" name="1" />
+            </van-cell>
+            <van-cell clickable @click="radio = '2'">
+              <img src="@/assets/img/weixin.png" />
+              <van-radio slot="right-icon" name="2" />
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+      </van-cell-group>
     </div>
     <div class="fyyfooter">
       <p class="fyy-h5">
@@ -37,6 +56,11 @@ export default {
     back() {
       this.$router.push("/")
     }
+  },
+  data() {
+    return {
+      radio: '1'
+    }
   }
 }
 </script>

src/main.js

@@ -15,8 +15,11 @@ import { Toast } from 'vant'
 
 import axios from 'axios'
 import AxiosPlugin from './plugins/AxiosPlugin'
+import { RadioGroup, Radio } from 'vant'
 
-Vue.use(Cell).use(CellGroup);
+Vue.use(RadioGroup)
+Vue.use(Radio)
+Vue.use(Cell).use(CellGroup)
 Vue.use(Field)
 Vue.use(Collapse).use(CollapseItem)
 Vue.use(Button)