epay-mobile/src/components/Home.vue

<template id="Home">
  <div>
    <van-nav-bar title="电量查询">
    </van-nav-bar>
    <div class="fyycontent">
      <van-cell-group>
        <van-cell>
          <span class="iconfont color-red fyy-icon">&#xe63f;</span>
          请选择园区
        </van-cell>
        <van-dropdown-menu>
          <van-dropdown-item v-model="selectedAreaId" :options="areaList" @change="areaChange"/>
        </van-dropdown-menu>
      </van-cell-group>
      <van-cell-group>
        <van-cell>
          <span class="iconfont color-red fyy-icon">&#xe642;</span>
          请选择楼栋号
        </van-cell>
        <van-dropdown-menu>
          <van-dropdown-item v-model="selectedBuildingId" :options="buildingList" @change="buildingChange"/>
        </van-dropdown-menu>
      </van-cell-group>
      <van-cell-group>
        <van-cell>
          <span class="iconfont color-red fyy-icon">&#xe643;</span>
          请选择房间号
        </van-cell>
        <van-dropdown-menu>
          <van-dropdown-item v-model="selectedRoomId" :options="roomList" @change="roomChange"/>
        </van-dropdown-menu>
      </van-cell-group>
      <div class="fyy-button">
        <van-button type="primary" @click="queryPower(selectedRoomId)">查询</van-button>
        <p>
          剩余电量：<span v-html="remainingPower" class="power"></span>
          <span v-if="remainingPower!=null">度</span>
          &nbsp;
          当前状态：<span v-html="stateText"></span>
        </p>
      </div>
    </div>
    <div class="fyyfooter">
      <van-button type="bigred" @click="recharge()">充值</van-button>
    </div>
  </div>
</template>
<script>
import remoteApi from '@/api/remoteApi'
import Cookies from 'js-cookie'
import { Dialog } from 'vant'

export default {
  data() {
    return {
      remainingPower: null,
      state:null,
      selectedAreaId: null,
      selectedBuildingId: null,
      selectedRoomId: null,
      areaList: [],
      buildingList: [],
      roomList: []
    };
  },
  computed: {
    stateText (){
      if(this.state==null){
        return "未知";
      }
      else if(this.state==1){
        return "断电";
      }
      else if(this.state==0){
        return "通电";
      }
    }
  },
  mounted (){
    var self = this

    remoteApi.queryRoomList(1,null).then((resp)=>{
      console.log(resp);

      if(resp.result){
        self.areaList = resp.data.map((e)=>{
          return {
            value : e.id,
            text : e.name
          }
        });

        self.selectedAreaId = Cookies.get("selectedAreaId");
        
        return self.areaChange(self.selectedAreaId);
      }
    }).then((resp)=>{
        self.selectedBuildingId = Cookies.get("selectedBuildingId");

        return self.buildingChange(self.selectedBuildingId);
    }).then((resp)=>{
        self.selectedRoomId = Cookies.get("selectedRoomId");
    });
  },
  methods: {
    areaChange (value) {
      var self = this

      return remoteApi.queryRoomList(2,value).then((resp)=>{
        console.log(resp);

        if(resp.result){
          self.buildingList = resp.data.map((e)=>{
            return {
              value : e.id,
              text : e.name
            }
          });
        }
      });
    },
    queryPower (roomId) {
      var self = this

      self.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        duration: 10000
      });
      
      Cookies.set("selectedAreaId",self.selectedAreaId,{ expires: 7 })
      Cookies.set("selectedBuildingId",self.selectedBuildingId,{ expires: 7 })
      Cookies.set("selectedRoomId",self.selectedRoomId,{ expires: 7 })

      remoteApi.queryPower(roomId).then((resp)=>{
        console.log(resp);

        self.$toast.clear();

        if(resp.result){
          self.$toast.success('查询成功!')

          self.remainingPower = resp.data.remain
          self.state = resp.data.state
        }
        else {
          self.$toast.fail(resp.message)
        }
      });
    },
    buildingChange (value) {
      var self = this

      return remoteApi.queryRoomList(3,value).then((resp)=>{
        console.log(resp);

        if(resp.result){
          self.roomList = resp.data.map((e)=>{
            return {
              value : e.id,
              text : e.name
            }
          });
        }
      });
    },
    roomChange (roomId) {
      this.queryPower(roomId);
    },
    recharge (){
      if(this.selectedRoomId == null) {
        this.$toast.fail("请先选择房间!");
      }
      else{
        this.$router.push({
          path : '/Pay',
          query: {
            roomId : this.selectedRoomId 
          }
        });
      }
    }
  }
};
</script>
<style scoped>
.power{
  font-size:150%;
}
</style>