集成支付宝扫码支付

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "hex-sha1": "^1.0.2",
+    "js-cookie": "^2.2.1",
     "vant": "^2.2.14",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
@@ -58,6 +59,7 @@
     "jest-serializer-vue": "^0.3.0",
     "nightwatch": "^0.9.12",
     "node-notifier": "^5.1.2",
+    "node-sass": "^4.7.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
     "portfinder": "^1.0.13",
@@ -65,6 +67,7 @@
     "postcss-loader": "^2.0.8",
     "postcss-url": "^7.2.1",
     "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.6",
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",

src/api/remoteApi.js

@@ -35,6 +35,19 @@ var remoteApi = {
                 recordId,openId
             }
         });
+    },
+    prepareAliPay: function(roomId,buyType,num,amount){
+        var formData = new FormData()
+
+        formData.append("roomId",roomId);
+        formData.append("buyType",buyType);
+        formData.append("num",num);
+        formData.append("amount",amount);
+
+        return request.post(basePath + `/mobileApi/prepareAliPay`,formData);
+    },
+    tradePrecreatePay: function(recordId) {
+        return request.get(basePath + `/aliPay/tradePrecreatePay?recordId=${recordId}`);
     }
 }
 

src/assets/css/ammeter.css

@@ -47,9 +47,9 @@
     padding: 0
 }
 
-.van-overlay {
+/* .van-overlay {
     background: 0
-}
+} */
 
 .van-dropdown-menu {
     height: 40px;
@@ -218,4 +218,12 @@
 .paybutton .van-button.van-button--default {
     color: #333;
     border: 1px #999 solid;
+}
+
+.qrcode{
+    text-align: center;
+}
+
+.qrcode img{
+    margin: auto;
 }

src/components/Home.vue

@@ -1,6 +1,6 @@
 <template id="Home">
   <div>
-    <van-nav-bar title="电量查询" left-arrow>
+    <van-nav-bar title="电量查询">
     </van-nav-bar>
     <div class="fyycontent">
       <van-cell-group>
@@ -47,6 +47,8 @@
 </template>
 <script>
 import remoteApi from '@/api/remoteApi'
+import Cookies from 'js-cookie'
+import { Dialog } from 'vant'
 
 export default {
   data() {
@@ -81,21 +83,30 @@ export default {
       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
 
-      remoteApi.queryRoomList(2,value).then((resp)=>{
+      return remoteApi.queryRoomList(2,value).then((resp)=>{
         console.log(resp);
 
         if(resp.result){
@@ -117,6 +128,10 @@ export default {
         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);
@@ -137,7 +152,7 @@ export default {
     buildingChange (value) {
       var self = this
 
-      remoteApi.queryRoomList(3,value).then((resp)=>{
+      return remoteApi.queryRoomList(3,value).then((resp)=>{
         console.log(resp);
 
         if(resp.result){

src/components/Pay.vue

@@ -42,25 +42,39 @@
         <span class="fyy-h3 color-red" v-html="total"></span>元
       </p>
       <router-link to="/Pay">
-        <van-button type="bigred" @click="pay">支付</van-button>
+        <van-button type="bigred" @click="pay" :loading="paying">支付</van-button>
       </router-link>
     </div>
+
+    <van-dialog
+      v-model="showAlipay"
+      title="支付宝扫码支付"
+      overlay
+      confirm = "paying = false"
+    >
+      <div ref="qrcodeDiv" class="qrcode"></div>
+    </van-dialog>
   </div>
 </template>
 
 <script>
 import remoteApi from '@/api/remoteApi'
+import QRCode from 'qrcodejs2'
+import Cookies from 'js-cookie'
 
 export default {
   data() {
     return {
+      paying: false,
       area:{},
       building:{},
       room:{},
       price:0,
       roomId : null,
       kwh : 0,
-      payType: 'weipay'
+      payType: 'weipay',
+      showAlipay: false,
+      qrCodeUrl: ''
     }
   },
   methods: {
@@ -72,16 +86,17 @@ export default {
     },
     pay() {
       var self = this
+      self.paying = true
+
+      self.$toast.loading({
+        message: '处理中...',
+        forbidClick: true,
+        loadingType: 'spinner',
+        duration: 10000
+      });
 
       if(self.payType=='weipay'){
         //首先要获取openid
-        self.$toast.loading({
-          message: '处理中...',
-          forbidClick: true,
-          loadingType: 'spinner',
-          duration: 10000
-        });
-
         remoteApi.prepareWXPay(self.roomId,self.payType,self.kwh,self.total).then(resp=>{
           self.$toast.clear()
 
@@ -92,10 +107,50 @@ export default {
 
             var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=${state}#wechat_redirect`
             
-            alert(url)
             window.location.href = url
           }
           else{
+            self.paying = false
+            self.$toast.fail(resp.message)
+          }
+        });
+      }
+      else if(self.payType=='alipay') {
+        remoteApi.prepareAliPay(self.roomId,self.payType,self.kwh,self.total).then(resp=>{
+          if(resp.result){
+            var recordId = resp.data.recordId;
+            return remoteApi.tradePrecreatePay(recordId);
+          }
+          else{
+            self.paying = false
+            self.$toast.fail(resp.message)
+          }
+        }).then(resp=>{          
+          self.$toast.clear()
+
+          if(resp==null){
+            return;
+          }
+
+          console.log(resp);
+
+          if(resp.result) {
+            self.showAlipay = true;
+
+            //对话框显示后才能正常获取到$refs.qrcodeDiv
+            self.$nextTick(()=>{
+              var qrcode = new QRCode(self.$refs.qrcodeDiv, {
+                text: resp.data,
+                width: 200,
+                height: 200,
+                colorDark: '#000000',
+                colorLight: '#ffffff',
+                correctLevel: QRCode.CorrectLevel.H
+              })
+            })
+          }
+          else{            
+            self.paying = false
             self.$toast.fail(resp.message)
           }
         });
@@ -111,6 +166,10 @@ export default {
     // 当前页面是否获取到了openid?
     this.roomId = this.$route.query.roomId;
 
+    if(this.roomId==null || this.roomId.length==0){
+      this.roomId = Cookies.get("selectedRoomId");
+    }
+
     this.$toast.loading({
       message: '加载中...',
       forbidClick: true,
@@ -142,5 +201,6 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
 </style>

src/main.js

@@ -14,8 +14,10 @@ import { Cell, CellGroup } from 'vant'
 import { Toast } from 'vant'
 import AxiosPlugin from './plugins/AxiosPlugin'
 import { RadioGroup, Radio } from 'vant'
-import { Image } from 'vant'
+import { Image,Dialog,Overlay } from 'vant'
 
+Vue.use(Overlay)
+Vue.use(Dialog)
 Vue.use(Image)
 Vue.use(RadioGroup)
 Vue.use(Radio)