Merge branch 'master' of http://58.54.251.155:9090/zq/epay-mobile

package.json

@@ -15,9 +15,11 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
+    "hex-sha1": "^1.0.2",
     "vant": "^2.2.14",
     "vue": "^2.5.2",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "weixin-js-sdk": "^1.4.0-test"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

src/assets/css/ammeter.css

@@ -3,14 +3,11 @@
     padding: 0;
 }
 
-.color-red{
+.color-red {
     color: #ac1a32
 }
 
-.color-bigred,
-.van-dropdown-menu__title--active,
-.van-dropdown-item__option--active, 
-.van-dropdown-item__option--active .van-dropdown-item__icon  {
+.color-bigred, .van-dropdown-menu__title--active, .van-dropdown-item__option--active, .van-dropdown-item__option--active .van-dropdown-item__icon {
     color: #e7352f
 }
 
@@ -104,7 +101,7 @@
     margin: 10px 0;
     display: flex;
     height: 60px;
-    background:#eee;
+    background: #eee;
 }
 
 .fyyinput input {
@@ -166,26 +163,59 @@
     border-bottom: 1px #999 solid;
     border-right: 1px #999 solid;
 }
-.m-left10{
-    margin-left:10px;
+
+.m-left10 {
+    margin-left: 10px;
 }
-.fyypay .van-cell-group p{
+
+.fyypay .van-cell-group p {
     text-align: right;
 }
-.fyypay .van-cell-group{
-    margin-bottom:20px
+
+.fyypay .van-cell-group {
+    margin-bottom: 20px
 }
-.fyyradio-pay .van-cell img{
-    width:40%
+
+.fyyradio-pay .van-cell img, .paystate img {
+    width: 40%
 }
-.fyyradio-pay .van-cell{
-    border:1px #ccc solid;
-    padding:15px 20px;
-    line-height:0;
-    margin-top:10px;
+
+.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;
+
+.van-radio__icon--checked .van-icon {
+    background-color: #e7352f;
+    border-color: #e7352f;
+}
+
+.paystate {
+    text-align: center
+}
+
+.paystate img {
+    padding: 60px 0
+}
+
+.paystate h1 {
+    margin-bottom: 10px
+}
+
+.paybutton button {
+    width: 100%;
+    margin-top: 15px;
+    border-radius: 4px;
+}
+
+.van-button--bigred {
+    color: #fff
+}
+
+.paybutton .van-button.van-button--default {
+    color: #333;
+    border: 1px #999 solid;
 }

src/components/Pay.vue

@@ -51,6 +51,8 @@
 
 <script>
 import remoteApi from '@/api/remoteApi'
+import wx from 'weixin-js-sdk'
+import hex_sha1 from 'hex-sha1'
 
 export default {
   data() {
@@ -80,6 +82,48 @@ export default {
       return (this.kwh* this.price).toFixed(2);
     }
   },
+  created () {
+    var appId = 'wxe598c699aa68cffe'
+    var timestamp = (new Date()).getTime()
+
+    var fullStr = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
+    var nonceStr = ''
+
+    for(var i=0;i<10;i++){
+      nonceStr += fullStr.charAt(Math.floor(Math.random()*fullStr.length))
+    }
+
+    var url = window.location.href.split('#')[0]
+
+    //服务器端通过access_token获取 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
+    var ticket = 'sM4AOVdWfPE4DxkXGEs8VAMadDORtDxQLtMKXqk9xSQE7OmFwIWBf7X3rxflmFXgENu66LRawd1bYAjz89QM2w'
+
+    //注意这里noncestr中的s是小写
+    var plainText = `noncestr=${nonceStr}&jsapi_ticket=${ticket}&timestamp=${timestamp}&url=${url}`
+    
+    console.log(`plainText="${plainText}"`)
+  
+    var signature = hex_sha1(plainText)
+
+    console.log(`signature=${signature}`)
+
+    wx.config({
+      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
+      appId: appId, // 必填，公众号的唯一标识
+      timestamp: timestamp, // 必填，生成签名的时间戳
+      nonceStr: nonceStr, // 必填，生成签名的随机串
+      signature: signature,// 必填，签名
+      jsApiList: ['checkJsApi','chooseWXPay'] // 必填，需要使用的JS接口列表
+    });
+
+    wx.ready(function(){
+
+    });
+
+    wx.error((error)=>{
+      console.log(error)
+    });
+  },
   mounted () {
     var roomId = this.$route.query.roomId;
 

src/components/Paystate.vue

@@ -0,0 +1,33 @@
+<template id='Paystate'>
+  <div>
+    <van-nav-bar title="充值状态" left-arrow @click-left="back"></van-nav-bar>
+    <div class="fyycontent">
+      <div class="paystate">
+        <img src="@/assets/img/payyes.png" />
+        <h1>支付成功</h1>
+        <p>支付方式：微信支付</p>
+      </div>
+    </div>
+    <div class="fyyfooter paybutton">
+      <router-link to="/Paylist">
+        <van-button type="bigred">充值记录</van-button>
+      </router-link>
+      <router-link to="/">
+        <van-button type="default">返回首页</van-button>
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    back() {
+      this.$router.push("/Pay");
+    }
+  }
+};
+</script>
+
+<style scoped>
+</style>

src/main.js

@@ -14,7 +14,9 @@ import { Cell, CellGroup } from 'vant'
 import { Toast } from 'vant'
 import AxiosPlugin from './plugins/AxiosPlugin'
 import { RadioGroup, Radio } from 'vant'
+import { Image } from 'vant'
 
+Vue.use(Image)
 Vue.use(RadioGroup)
 Vue.use(Radio)
 Vue.use(Cell).use(CellGroup)
@@ -24,7 +26,6 @@ Vue.use(Button)
 Vue.use(NavBar)
 Vue.use(DropdownMenu).use(DropdownItem)
 Vue.use(Toast)
-
 Vue.use(AxiosPlugin)
 
 Vue.config.productionTip = false

src/router/index.js

@@ -3,6 +3,7 @@ import Router from 'vue-router'
 import Home from '@/components/Home'
 import Pay from '@/components/Pay'
 import Paylist from '@/components/Paylist'
+import Paystate from '@/components/Paystate'
 import 'vant/lib/index.css'
 
 Vue.use(Router)
@@ -23,6 +24,11 @@ export default new Router({
       path: '/Paylist',
       name: 'Paylist',
       component: Paylist
+    },
+    {
+      path: '/Paystate',
+      name: 'Paystate',
+      component: Paystate
     }
   ]
 })