epay-mobile/src/components/Pay.vue

<template id='Pay'>
  <div>
    <van-nav-bar title="电量充值" left-arrow @click-left="back">
      <span @click="go" class="iconfont" slot="right">&#xe646;</span>
    </van-nav-bar>
    <div class="fyycontent fyypay">
      <van-cell-group>
        <van-cell>
          <span class="iconfont color-red fyy-icon">&#xe640;</span>
          <span v-html="area.name"></span>
          <span class="m-left10" v-html="building.name"></span>
          <span class="m-left10" v-html="room.name">601</span>
        </van-cell>
        <div class="fyyinput">
          <input type="text" placeholder="请输入要充值的电量度数" v-model="kwh"/>
          <span class="input-right">度</span>
        </div>
        <p class="fyy-h6">价格标准：<span v-html="price"></span>元/度</p>
      </van-cell-group>
      <van-cell-group>
        <van-cell>
          <span class="iconfont color-red fyy-icon">&#xe648;</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'">
              <img src="@/assets/img/weixin.png" />
              <van-radio slot="right-icon" name="2" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </van-cell-group>
    </div>
    <div class="fyyfooter">
      <p class="fyy-h5">
        核计：
        <span class="fyy-h3 color-red" v-html="total"></span>元
      </p>
      <router-link to="/Pay">
        <van-button type="bigred" @click="pay">支付</van-button>
      </router-link>
    </div>
  </div>
</template>

<script>
import remoteApi from '@/api/remoteApi'
import wx from 'weixin-js-sdk'
import hex_sha1 from 'hex-sha1'

export default {
  data() {
    return {
      area:{},
      building:{},
      room:{},
      price:0,
      roomId : null,
      kwh : 0,
      payType: '1'
    }
  },
  methods: {
    go() {
      this.$router.push("/Paylist")
    },
    back() {
      this.$router.push("/")
    },
    pay() {
      
    }
  },
  computed: {
    total (){
      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;

    this.$toast.loading({
      message: '加载中...',
      forbidClick: true,
      loadingType: 'spinner',
      duration: 10000
    });

    var self = this;

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

      this.$toast.clear();

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

        var jsonData = resp.data
        self.area = jsonData.area
        self.building = jsonData.building
        self.room = jsonData.room
        self.price = parseFloat(jsonData.price)
      }
      else {
        self.$toast.fail(resp.message)
      }
    });
  }
}
</script>

<style scoped>
</style>