|
@@ -12,7 +12,7 @@
|
|
|
<span class="m-left10" v-html="room.name">601</span>
|
|
|
</van-cell>
|
|
|
<div class="fyyinput">
|
|
|
- <input type="text" placeholder="请输入要充值的电量度数" v-model="kwh"/>
|
|
|
+ <input type="number" placeholder="请输入要充值的电量度数" v-model="kwh"/>
|
|
|
<span class="input-right">度</span>
|
|
|
</div>
|
|
|
<p class="fyy-h6">价格标准:<span v-html="price"></span>元/度</p>
|
|
@@ -22,16 +22,15 @@
|
|
|
<span class="iconfont color-red fyy-icon"></span>
|
|
|
选择支付方式
|
|
|
</van-cell>
|
|
|
-
|
|
|
<van-radio-group v-model="payType" class="fyyradio-pay">
|
|
|
<van-cell-group>
|
|
|
- <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="payType = '2'">
|
|
|
+ <van-cell clickable @click="payType = 'weipay'">
|
|
|
<img src="@/assets/img/weixin.png" />
|
|
|
- <van-radio slot="right-icon" name="2" />
|
|
|
+ <van-radio slot="right-icon" name='weipay'/>
|
|
|
+ </van-cell>
|
|
|
+ <van-cell clickable @click="payType = 'alipay'">
|
|
|
+ <img src="@/assets/img/zhifubao.png" />
|
|
|
+ <van-radio slot="right-icon" name='alipay'/>
|
|
|
</van-cell>
|
|
|
</van-cell-group>
|
|
|
</van-radio-group>
|
|
@@ -51,8 +50,6 @@
|
|
|
|
|
|
<script>
|
|
|
import remoteApi from '@/api/remoteApi'
|
|
|
-import wx from 'weixin-js-sdk'
|
|
|
-import hex_sha1 from 'hex-sha1'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
@@ -63,7 +60,7 @@ export default {
|
|
|
price:0,
|
|
|
roomId : null,
|
|
|
kwh : 0,
|
|
|
- payType: '1'
|
|
|
+ payType: 'weipay'
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -74,58 +71,45 @@ export default {
|
|
|
this.$router.push("/")
|
|
|
},
|
|
|
pay() {
|
|
|
-
|
|
|
+ var self = this
|
|
|
+
|
|
|
+ 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()
|
|
|
+
|
|
|
+ if(resp.result) {
|
|
|
+ var appId = resp.data.appId
|
|
|
+ var redirectUri = encodeURIComponent(window.location.href.split('#')[0] + '#WXPay')
|
|
|
+ var state = resp.data.recordId
|
|
|
+
|
|
|
+ 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.$toast.fail(resp.message)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
total (){
|
|
|
- return (this.kwh* this.price).toFixed(2);
|
|
|
+ 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}×tamp=${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;
|
|
|
+ // 当前页面是否获取到了openid?
|
|
|
+ this.roomId = this.$route.query.roomId;
|
|
|
|
|
|
this.$toast.loading({
|
|
|
message: '加载中...',
|
|
@@ -136,13 +120,13 @@ export default {
|
|
|
|
|
|
var self = this;
|
|
|
|
|
|
- remoteApi.queryRoomDetail(roomId).then((resp)=>{
|
|
|
+ remoteApi.queryRoomDetail(this.roomId).then((resp)=>{
|
|
|
console.log(resp);
|
|
|
|
|
|
this.$toast.clear();
|
|
|
|
|
|
if(resp.result){
|
|
|
- self.$toast.success('查询成功!')
|
|
|
+ //self.$toast.success('查询成功!')
|
|
|
|
|
|
var jsonData = resp.data
|
|
|
self.area = jsonData.area
|