完成支付交互逻辑。

src/api/remoteApi.js

@@ -12,6 +12,9 @@ var remoteApi = {
     },
     queryPower: function(roomId){
         return request.get(basePath + `/mobileApi/queryPower?roomId=${roomId}`);
+    },
+    queryRoomDetail : function(roomId){
+        return request.get(basePath + `/mobileApi/queryRoomDetail?roomId=${roomId}`);
     }
 }
 

src/components/Home.vue

@@ -161,8 +161,6 @@ export default {
         this.$router.push({
           path : '/Pay',
           query: {
-            areaId : this.selectedAreaId,
-            buildingId: this.selectedBuildingId,
             roomId : this.selectedRoomId 
           }
         });

src/components/Pay.vue

@@ -7,13 +7,15 @@
       <van-cell-group>
         <van-cell>
           <span class="iconfont color-red fyy-icon">&#xe640;</span>
-          创业学校园区A<span class="m-left10">1栋楼</span><span class="m-left10">601</span>
+          <span v-html="area.name"></span>
+          <span class="m-left10" v-html="building.name"></span>
+          <span class="m-left10" v-html="room.name">601</span>
         </van-cell>
         <div class="fyyinput">
-          <input type="text" placeholder="请输入要充值的电量度数" />
+          <input type="text" placeholder="请输入要充值的电量度数" v-model="kwh"/>
           <span class="input-right">度</span>
         </div>
-        <p class="fyy-h6">价格标准：0.56元/度</p>
+        <p class="fyy-h6">价格标准：<span v-html="price"></span>元/度</p>
       </van-cell-group>
       <van-cell-group>
         <van-cell>
@@ -21,13 +23,13 @@
           选择支付方式
         </van-cell>
         
-        <van-radio-group v-model="radio" class="fyyradio-pay">
+        <van-radio-group v-model="payType" class="fyyradio-pay">
           <van-cell-group>
-            <van-cell clickable @click="radio = '1'">
+            <van-cell clickable @click="payType = '1'">
               <img src="@/assets/img/zhifubao.png" />
               <van-radio slot="right-icon" name="1" />
             </van-cell>
-            <van-cell clickable @click="radio = '2'">
+            <van-cell clickable @click="payType = '2'">
               <img src="@/assets/img/weixin.png" />
               <van-radio slot="right-icon" name="2" />
             </van-cell>
@@ -38,7 +40,7 @@
     <div class="fyyfooter">
       <p class="fyy-h5">
         核计：
-        <span class="fyy-h3 color-red">56.00</span>元
+        <span class="fyy-h3 color-red" v-html="total"></span>元
       </p>
       <router-link to="/Pay">
         <van-button type="bigred">支付</van-button>
@@ -48,7 +50,20 @@
 </template>
 
 <script>
+import remoteApi from '@/api/remoteApi'
+
 export default {
+  data() {
+    return {
+      area:{},
+      building:{},
+      room:{},
+      price:0,
+      roomId : null,
+      kwh : 0,
+      payType: '1'
+    }
+  },
   methods: {
     go() {
       this.$router.push("/Paylist")
@@ -57,10 +72,41 @@ export default {
       this.$router.push("/")
     }
   },
-  data() {
-    return {
-      radio: '1'
+  computed: {
+    total (){
+      return (this.kwh* this.price).toFixed(2);
     }
+  },
+  mounted () {
+    var roomId = this.$route.query.roomId;
+
+    this.$toast.loading({
+      message: '加载中...',
+      forbidClick: true,
+      loadingType: 'spinner',
+      duration: 10000
+    });
+
+    var self = this;
+
+    remoteApi.queryRoomDetail(roomId).then((resp)=>{
+      console.log(resp);
+
+      this.$toast.clear();
+
+      if(resp.result){
+        self.$toast.success('查询成功!')
+
+        var jsonData = resp.data
+        self.area = jsonData.area
+        self.building = jsonData.building
+        self.room = jsonData.room
+        self.price = parseFloat(jsonData.price)
+      }
+      else {
+        self.$toast.fail(resp.message)
+      }
+    });
   }
 }
 </script>

src/main.js

@@ -12,8 +12,6 @@ import { Collapse, CollapseItem } from 'vant'
 import { Field } from 'vant'
 import { Cell, CellGroup } from 'vant'
 import { Toast } from 'vant'
-
-import axios from 'axios'
 import AxiosPlugin from './plugins/AxiosPlugin'
 import { RadioGroup, Radio } from 'vant'