物业报事微信h5前端缴费支付修改

PropertyH5/config/index.js

@@ -20,7 +20,17 @@ module.exports = {
           pathRewrite: {
               '^/api': ''
           }
-      }
+      },
+      '/uploadimg': {   
+        target:'http://localhost/wycore/uploadimg',    //物业系统webapi
+        //target:'http://localhost:58332/api',    //物业系统webapi
+        //target: 'http://222.223.237.11:8189/WorkFlowWebService60NodeJS/query.asmx',    //东龙webservice
+      
+        changeOrigin: true,
+        pathRewrite: {
+            '^/uploadimg': ''
+        }
+    }
     },
 
     // Various Dev Server settings

PropertyH5/package-lock.json

@@ -7882,6 +7882,11 @@
       "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
       "dev": true
     },
+    "qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE="
+    },
     "qs": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",

PropertyH5/package.json

@@ -17,6 +17,7 @@
     "css-loader": "^3.2.0",
     "decimal.js": "^10.2.1",
     "js-cookie": "^3.0.1",
+    "qrcodejs2": "0.0.2",
     "swiper": "^6.6.1",
     "vant": "^2.12.9",
     "vue": "^2.5.2",

PropertyH5/src/common/api/loginApi.js

@@ -86,6 +86,24 @@ export function GetRepairDetail(code) {
   })
 }
 
+/* 绑定房屋信息 */
+export function BindHouse(phone) {
+  return request({
+    url: '/Meter/BindHouse',
+    method: 'get',
+    params:{phone}
+  })
+}
+
+/* 生成微信支付二维码 */
+export function MakePayUrl(data) {
+  return request({
+    url: '/Meter/MakePayUrl',
+    method: 'post',
+    data
+  })
+}
+
 /* 登出 */
 export function logout(userid) {
   return request({

PropertyH5/src/common/util.js

@@ -141,3 +141,8 @@ export function getViewportSize () {
         height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
     };
 }
+/*获取域名和端口*/
+export function getHost(){
+    var host="http://"+window.location.hostname+":"+window.location.port;
+    return host;
+}

PropertyH5/src/components/BindHouse.vue

@@ -0,0 +1,151 @@
+<template>
+  <div>
+    <van-nav-bar
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+      style="background-color: #1989fa"
+    >
+      <template #title>
+        <van-col style="color: #ffffff">选择绑定</van-col>
+      </template>
+      <template #left>
+        <i
+          class="fa fa-arrow-circle-left"
+          aria-hidden="true"
+          style="color: #ffffff; font-size: 18px"
+        ></i>
+      </template>
+      <template #right>
+        <van-icon name="replay" size="18" color="#ffffff" />
+      </template>
+    </van-nav-bar>
+
+     <van-cell
+          v-for="item in info"
+          :key="item.hcode"
+         
+          border
+        >
+          <template #default>
+           
+            <van-row class="borderTop"  >
+              <van-col span="24">
+                <van-row>
+                  <van-col span="5" class="title1">业主</van-col>
+                  <van-col span="19">{{ item.ownername }}</van-col>
+                </van-row>
+                  <van-row>
+                  <van-col span="5" class="title1">房屋</van-col>
+                  <van-col span="19">{{ item.hname }}</van-col>
+                </van-row>
+                 <van-row>
+                  <van-col span="5" class="title1">楼栋</van-col>
+                  <van-col span="19">{{ item.bname }}</van-col>
+                </van-row>
+               
+               <van-row>
+                  <van-col span="24" class="title1">
+                      <van-button @click="bind(item.hcode)" type="info">绑定</van-button>
+                  </van-col>                 
+                </van-row>
+              </van-col>
+           
+            </van-row>
+          </template>
+        </van-cell>
+     
+  </div>
+</template>
+
+<script>
+import { BindHouse } from "@/common/api/loginApi.js";
+export default {
+  name: "login",
+  data() {
+    return {
+      info: [], //房产信息
+      
+    
+     
+    };
+  },
+  created: function () {
+    console.info("created");
+    //console.info(this.$util);
+    this.$util.persistLogin(this);
+    this.BindHouse();
+  },
+  methods: {
+    BindHouse: function () {  //获取房产信息
+      var that = this;
+      let phone=that.$store.state.data.tel;
+      if(that.$util.isEmpty(phone))
+      {
+        that.$router.push('/');
+        return;
+      }
+      BindHouse(phone).then((res) => {
+        console.info("BindHouse", res);
+        if (!res.isSuccess) {
+          that.$toast(res.errMsg);
+          return;
+        }
+        res.data.forEach(function(item,index,arr) {
+          that.$set(that.info,index,item);
+        });
+        
+        //that.loading = false;
+        //that.finished = true;
+      });
+    },
+   
+    onClickLeft() {
+      // this.$toast('返回')
+      console.info("left");
+      this.$router.go(-1);
+    },
+    onClickRight() {
+      this.$router.go(0);
+    },
+    bind:function(hcode){   //绑定房屋信息
+       let that=this;
+        this.info.forEach(function(item,index,arr){
+             if(item.hcode==hcode){
+                 var obj=JSON.parse(that.$cookie.get('obj'));
+                 console.info('bind obj',obj);
+                //设置状态中的各种值
+                that.$store.commit('setResult',obj.isSuccess);
+                that.$store.commit('setCode',obj.code);
+                that.$store.commit('setMsg',obj.errMsg);
+                that.$store.commit('setData',item); 
+                that.$store.commit('setToken',obj.tnToken);
+                //console.info('cookie',this.$cookie)
+                that.$cookie.set('obj',JSON.stringify(obj) );      //设置cookie
+                that.$router.push('/saleindex');
+             }
+        });
+    }
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.title1 {
+  color: #999;
+}
+.value1 {
+  color: #999;
+  font-size: 15px;
+}
+.borderTop{
+    margin-top:50px;
+}
+.paddingLeft15{
+    padding-left: 15px;
+    text-align: left;
+    height: 50px;
+    line-height: 50px;
+    font-size: 28px;
+}
+</style>

PropertyH5/src/components/GetOwnerHouse.vue

@@ -20,13 +20,13 @@
       </template>
     </van-nav-bar>
 
-            <van-row class="borderTop">
+            <van-row class="borderTop"   v-for="item in info" :key="item.hcode">
               <van-col span="24">
                 <van-row>                 
-                  <van-col span="19" class="paddingLeft15"><van-icon name="friends" color="#ff6600" />{{ info.bname }}</van-col>
+                  <van-col span="19" class="paddingLeft15"><van-icon name="friends" color="#ff6600" />{{ item.bname }}</van-col>
                 </van-row>
                  <van-row>                
-                  <van-col span="19"  class="paddingLeft15"><van-icon name="location"  color="#ff6600"/>{{ info.hname }}</van-col>
+                  <van-col span="19"  class="paddingLeft15"><van-icon name="location"  color="#ff6600"/>{{ item.hname }}</van-col>
                 </van-row>
               </van-col>
            
@@ -41,11 +41,10 @@ export default {
   name: "login",
   data() {
     return {
-      info: {}, //房产信息
+      info: [], //房产信息
       
     
-      loading: false,
-      finished: false,
+     
     };
   },
   created: function () {
@@ -69,18 +68,15 @@ export default {
           that.$toast(res.errMsg);
           return;
         }
-        that.info=res.data[0];
-        that.loading = false;
-        that.finished = true;
+        res.data.forEach(function(item,index,arr) {
+          that.$set(that.info,index,item);
+        });
+        
+        //that.loading = false;
+        //that.finished = true;
       });
     },
-    // 单选按钮点击事件
-    jiaofei: function (event, id) {
-      //console.info("click1 event", event);
-      //console.info("click1 value", id);
-      //console.info("click1", e.target.innerText);
-       this.$toast("缴费业务未开通");
-    },
+   
     onClickLeft() {
       // this.$toast('返回')
       console.info("left");
@@ -100,7 +96,7 @@ export default {
 }
 .value1 {
   color: #999;
-  font-size: 18px;
+  font-size: 15px;
 }
 .borderTop{
     margin-top:50px;

PropertyH5/src/components/GetRepairDetail.vue

@@ -6,7 +6,7 @@
       style="background-color: #1989fa"
     >
       <template #title>
-        <van-col style="color: #ffffff">报修详情</van-col>
+        <van-col style="color: #ffffff">{{baoshi}}详情</van-col>
       </template>
       <template #left>
         <i
@@ -38,22 +38,22 @@
                   <van-col span="19">{{ ownername }}</van-col>
                 </van-row>
                   <van-row>
-                  <van-col span="5" class="title1">报事位置</van-col>
+                  <van-col span="5" class="title1">{{baoshi}}位置</van-col>
                   <van-col span="19">{{ data.vplace }}</van-col>
                 </van-row>
                   <van-row>
-                  <van-col span="5" class="title1">报事内容</van-col>
+                  <van-col span="5" class="title1">{{baoshi}}内容</van-col>
                   <van-col span="19">{{ data.vcontent }}</van-col>
                 </van-row>
                 <van-row>
-                  <van-col span="5" class="title1">维修类型</van-col>
+                  <van-col span="5" class="title1">{{baoxiu}}类型</van-col>
                   <van-col span="19">{{ data.billtypeName }}</van-col>
                 </van-row>
-                  <van-row>
-                  <van-col span="5" class="title1">报修时间</van-col>
+                  <van-row >
+                  <van-col span="5" class="title1">{{baoxiu}}时间</van-col>
                   <van-col span="19">{{ data.dapplydate }}</van-col>
                 </van-row>
-                 <van-row>
+                 <van-row v-show="isBaoxiuDate">
                   <van-col span="5" class="title1">维修时间</van-col>
                   <van-col span="19">{{ data.drequiredate }}</van-col>
                 </van-row>
@@ -63,7 +63,14 @@
                   <van-col span="19" >{{data.vbillstatusName}}</van-col>
                 </van-row>
               </van-col>
-           
+               <van-row>
+                  <van-col span="5" class="title1">图片</van-col>
+                  <van-col span="19" >
+                      <van-uploader v-model="fileList" multiple disabled  :deletable='false'/>
+                  </van-col>
+                </van-row>
+              </van-col>
+            
             </van-row>
           </template>
         </van-cell>
@@ -77,13 +84,14 @@ export default {
   name: "login",
   data() {
     return {
-        hname:'',
-        ownername:'',
-     data: {}, //报修详情信息
-      radio: "", //单选框
+      hname:'',
+      ownername:'',
+      data: {},       //报修详情信息
+      fileList: [], //图片列表
+      baoshi:'',
+      baoxiu:'',
+      isBaoxiuDate:true,
     
-      loading: false,
-      finished: false,
     };
   },
   created: function () {
@@ -112,11 +120,21 @@ export default {
           return;
         }
         this.data=res.data;
-         
+          if(this.data.billtype==3){
+            this.baoshi='投诉';
+            this.baoxiu='投诉';
+            this.isBaoxiuDate=false;
+          }
+          else{
+            this.baoshi='报事';
+            this.baoxiu='报修';
+            this.isBaoxiuDate=true;
+          }
           if(this.data.billtype==2){
               this.data.billtypeName='整改通知单';
           }
           else if(this.data.billtype==3){
+            
               this.data.billtypeName='投诉单';
           }
            else if(this.data.billtype==4){
@@ -139,18 +157,16 @@ export default {
            else{
               this.data.vbillstatusName='已报事未处理';
           }
-          
-         
+          this.data.dapplydate=this.$util.getDate(this.data.dapplydate);
+          res.data.fileList.forEach(function(item,index,array) {
+             
+            that.$set(that.fileList,index, item);
+          });
+         console.info('filelist',that.fileList);
         
       });
     },
-    // 单选按钮点击事件
-    jiaofei: function (event, id) {
-      //console.info("click1 event", event);
-      //console.info("click1 value", id);
-      //console.info("click1", e.target.innerText);
-       this.$toast("缴费业务未开通");
-    },
+   
     onClickLeft() {
       // this.$toast('返回')
       console.info("left");
@@ -168,6 +184,8 @@ export default {
 <style scoped>
 .title1 {
   color: #999;
+  height: 30px;
+  line-height: 30px;
 }
 .value1 {
   color: #999;

PropertyH5/src/components/Getfdc_pm_unfare.vue

@@ -57,7 +57,7 @@
                   <van-col span="19">{{ item.dbegindate }}至{{item.denddate}}</van-col>
                 </van-row>
                 <van-row>                 
-                  <van-col span="24"><van-button type="info" @click="jiaofei" >缴费</van-button></van-col>
+                  <van-col span="24"><van-button type="info" @click="jiaofei(item.farerowid)" >缴费</van-button></van-col>
                 </van-row>
               </van-col>
            
@@ -111,11 +111,16 @@ export default {
       });
     },
     // 单选按钮点击事件
-    jiaofei: function (event, id) {
-      //console.info("click1 event", event);
-      //console.info("click1 value", id);
-      //console.info("click1", e.target.innerText);
-       this.$toast("缴费业务未开通");
+    jiaofei: function (farerowid) {
+      let that=this;
+      console.info("缴费点击事件 farerowid", farerowid);
+      this.listdata.forEach(function(item,index,arr){
+        if(item.farerowid==farerowid){
+          that.$cookie.set('jiaofei',JSON.stringify(item));
+          that.$router.push('SelectPayType');
+        }
+      })
+      
     },
     onClickLeft() {
       // this.$toast('返回')

PropertyH5/src/components/MakePayUrl.vue

@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <van-nav-bar
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+      style="background-color: #1989fa"
+    >
+      <template #title>
+        <van-col style="color: #ffffff">微信二维码缴费</van-col>
+      </template>
+      <template #left>
+        <i
+          class="fa fa-arrow-circle-left"
+          aria-hidden="true"
+          style="color: #ffffff; font-size: 18px"
+        ></i>
+      </template>
+      <template #right>
+        <van-icon name="replay" size="18" color="#ffffff" />
+      </template>
+    </van-nav-bar>
+
+     
+      <van-cell
+          
+          border
+        >
+          <template #default>
+           
+            <van-row class="borderTop">
+              <van-col span="24">
+                <van-row>
+                  <van-col span="5" class="title1">租户</van-col>
+                  <van-col span="19">{{ info.ownername }}</van-col>
+                </van-row>
+                 <van-row>
+                  <van-col span="5" class="title1">房屋</van-col>
+                  <van-col span="19">{{ info.hname }}</van-col>
+                </van-row>
+               <van-row>
+                  <van-col span="5" class="title1">费用类型</van-col>
+                  <van-col span="19" >{{info.billitemname}}</van-col>
+                </van-row>
+                 <van-row>
+                  <van-col span="5" class="title1">欠费金额</van-col>
+                  <van-col span="19" >{{info.nneedpaymny}}元</van-col>
+                </van-row>
+               
+                <van-row>                 
+                  <van-col span="24">
+                         <div class="qrcode" id="qrcode"></div>
+                  </van-col>
+                </van-row>
+              </van-col>
+           
+            </van-row>
+          </template>
+        </van-cell>
+     
+  </div>
+</template>
+
+<script>
+import { MakePayUrl } from "@/common/api/loginApi.js";
+import QRCode from 'qrcodejs2'  // 引入qrcode
+export default {
+  name: "login",
+  data() {
+    return {
+      info: {}, //欠费信息
+      payUrl:''
+     
+    };
+  },
+  created: function () {
+    console.info("created");
+    //console.info(this.$util);
+    this.$util.persistLogin(this);
+    this.GetJiaofeiInfo();
+    this.MakePayUrl();
+  },
+  methods: {
+    GetJiaofeiInfo: function () {
+      var that = this;
+       let info=JSON.parse(that.$cookie.get('jiaofei'));
+       this.info=info;
+    },
+    MakePayUrl:function(){
+        let that=this;
+       let data={
+           farwarid:this.info.farerowid,
+           money:this.info.nneedpaymny+'',
+           ownername:this.info.ownername,
+           hname:this.info.hname
+       };
+       console.info('MakePayUrl data',data);
+       MakePayUrl(data).then(res=>{
+           console.info('data',res);
+           if(!res.isSuccess){
+               that.$toast(res.errMsg);
+           }
+           else{
+               if(!that.$util.isEmpty(res.data)){
+                  that.payUrl=res.data;
+                  that.qrcode();
+                  console.info('payUrl',that.payUrl);
+               }
+               else{
+                   //that.payUrl='http://www.baidu.com';
+                   console.info('payUrl',that.payUrl);
+                   //that.qrcode();
+
+                   that.$toast("未获取到支付二维码");
+               }
+           }
+       })
+    },
+    onClickLeft() {
+      // this.$toast('返回')
+      console.info("left");
+      this.$router.go(-1);
+    },
+    onClickRight() {
+      this.$router.go(0);
+    },
+    qrcode() {
+        let url=this.payUrl;
+      let qrcode = new QRCode('qrcode', {
+        width: 132,  
+        height: 132,
+        text: url, // 二维码地址
+      })
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.title1 {
+  color: #999;
+}
+.value1 {
+  color: #999;
+  font-size: 18px;
+}
+</style>

PropertyH5/src/components/SelectPayType.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <van-nav-bar
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+      style="background-color: #1989fa"
+    >
+      <template #title>
+        <van-col style="color: #ffffff">选择支付方式</van-col>
+      </template>
+      <template #left>
+        <i
+          class="fa fa-arrow-circle-left"
+          aria-hidden="true"
+          style="color: #ffffff; font-size: 18px"
+        ></i>
+      </template>
+      <template #right>
+        <van-icon name="replay" size="18" color="#ffffff" />
+      </template>
+    </van-nav-bar>
+    <van-col span="24">
+     <van-field name="radio" label="支付方式">
+    <template #input>
+        <van-radio-group v-model="radio" direction="vertical">
+        <van-radio name="1" class="title1">微信支付</van-radio>
+        <van-radio name="2" class="title1">支付宝</van-radio>
+        </van-radio-group>
+    </template>
+    </van-field>
+    </van-col>
+     <van-col span="24"><van-button type="info" @click="select()" >确定</van-button></van-col>
+  </div>
+</template>
+
+<script>
+import { BindHouse } from "@/common/api/loginApi.js";
+export default {
+  name: "login",
+  data() {
+    return {
+      radio: '1',
+      
+    
+     
+    };
+  },
+  created: function () {
+    console.info("created");
+    //console.info(this.$util);
+    this.$util.persistLogin(this);
+     
+    
+  },
+  methods: {
+    select: function () {  //获取房产信息
+      var that = this;
+      console.info('radio',this.radio);
+      if(this.radio=="1"){
+         this.$router.push('MakePayUrl');
+      }
+      else{
+          this.$toast('支付宝支付尚未开通');
+      }
+      
+    },
+   
+    onClickLeft() {
+      // this.$toast('返回')
+      console.info("left");
+      this.$router.go(-1);
+    },
+    onClickRight() {
+      this.$router.go(0);
+    },
+     
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.title1 {
+   
+  height: 30px;
+  line-height: 30px;
+}
+.value1 {
+  color: #999;
+  font-size: 15px;
+}
+.borderTop{
+    margin-top:50px;
+}
+.paddingLeft15{
+    padding-left: 15px;
+    text-align: left;
+    height: 50px;
+    line-height: 50px;
+    font-size: 28px;
+}
+</style>

PropertyH5/src/components/login.vue

@@ -66,7 +66,7 @@ export default {
         this.$store.commit('setToken',obj.tnToken);
         //console.info('cookie',this.$cookie)
         this.$cookie.set('obj',JSON.stringify(obj) );      //设置cookie
-        this.$router.push('/saleindex');
+        this.$router.push('/BindHouse');
       });
     },
     onClickLeft () {

PropertyH5/src/router/index.js

@@ -10,6 +10,9 @@ import GetComplaintList from "@/components/GetComplaintList.vue";
 import Insertfdc_pm_repair from "@/components/Insertfdc_pm_repair.vue";
 import GetRepairDetail from "@/components/GetRepairDetail.vue";
 import Insertfdc_pm_repairByTousu from "@/components/Insertfdc_pm_repairByTousu.vue";
+import BindHouse from "@/components/BindHouse.vue";
+import SelectPayType from "@/components/SelectPayType.vue";
+import MakePayUrl from "@/components/MakePayUrl.vue";
 
 Vue.use(Router)
 //console.info("获取根目录", window.location.pathname);
@@ -70,5 +73,20 @@ export default new Router({
       name: 'Insertfdc_pm_repairByTousu',
       component: Insertfdc_pm_repairByTousu
     },
+    {     //绑定房屋信息
+      path: '/BindHouse',
+      name: 'BindHouse',
+      component: BindHouse
+    },
+    {     //选择支付类型
+      path: '/SelectPayType',
+      name: 'SelectPayType',
+      component: SelectPayType
+    },
+    {     //生成微信支付二维码
+      path: '/MakePayUrl',
+      name: 'MakePayUrl',
+      component: MakePayUrl
+    },
   ]
 })