pco/app/pages/wx/payOrder.vue

<template>
  <view>
    <view class="box">
      <view class="item">
        <view class="l">订单号：</view>
        <view class="r">
          {{ form.no }}
        </view>
      </view>
      <view class="item-line">
        收费明细
      </view>
      <view class="item" v-for="item in form.items" :key="item.id">
        <view class="l" style="flex: 7;">{{ item.itemTypeName }}：</view>
        <view class="r">
          {{ item.itemName }}({{ item.itemPrice }}x{{ item.num }}={{ item.total }}元)
        </view>
      </view>
      <view class="item">
        <view class="l" style="flex: 7;">业务费：</view>
        <view class="r">
          {{ form.itemPrice }}
          <text>(元)</text>
        </view>
      </view>
      <view class="item">
        <view class="l" style="flex: 7;">业务项：</view>
        <view class="r">
          {{ form.goodsName }}
          <text>(元)</text>
        </view>
      </view>
      <view class="item">
        <view class="l" style="flex: 7;">合计费用：</view>
        <view class="r">
          {{ form.totalMoney }}元
        </view>
      </view>
      <view class="item">
        <view class="l" style="flex: 7;">状态：</view>
        <view class="r">
          <text v-if="form.adminConfirmInput==0">未确认</text>
          <text v-else>已确认</text>
        </view>
      </view>
    </view>
    <view v-if="form.adminConfirmInput==0">
      <u-button type="info" v-if="customerId!=='1'">待确认</u-button>
      <u-button type="primary" @click="adminConfirmFn">确认账单</u-button>
    </view>
    <view v-else>
      <u-button type="primary" v-if="form.payStatus==1&&customerId!=='1'&&form.adminConfirmInput==1"
                @click="confirmFn">支付账单
      </u-button>
      <u-button type="info" v-if="form.payStatus==3">已支付</u-button>
    </view>
  </view>
</template>

<script>
var jweixin = require('@/components/jweixin-module/index.js');
export default {
  data() {
    return {
      customerId: '',
      perList: [],
      wx: {
        id: '',
        code: '',
        openid: ''
      },
      form: {
        partMoney: 0
      },
    }
  },
  onBackPress() {
    this.$common.to('/pages/business-order/business-order')
    return false;
  },
  onLoad(options) {
    this.wx.id = options.state;
    this.wx.code = options.code;
    this.getOpenidByCode();
    this.getWxConfig();
  },
  onShow() {
    this.perList = uni.getStorageSync('perList')
    let info = uni.getStorageSync('userInfo');
    this.customerId = info.customerId;

    this.getBusinessById();
  },
  methods: {
    adminConfirmFn() {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '是否确认该业务账单?',
        success(res) {
          if (res.confirm) {
            that.$api.adminConfirm({
              ids: that.form.id
            }).then(resp => {
              if (resp.code == 200) {
                that.$common.toast('已确认');
                setTimeout(() => {
                  that.$common.to('/pages/index/index');
                }, 1500)
              }
            })
          }
        }
      })
    },
    getWxConfig() {
      let url = window.location.href;
      this.$api.getWxConfig({
        url: url
      }).then(resp => {
        jweixin.config({
          //debug: true,
          appId: resp.data.appId,
          timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
          signature: resp.data.sign, // 必填，签名
          jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
        });
        jweixin.ready(function () {
          console.log('111')

        });
        jweixin.error(function (res) {
          console.log(res)
        });
      })
    },
    getOpenidByCode() {
      let storeOpenid = uni.getStorageSync('openid');
      this.$api.getOpenidByCode({
        code: this.wx.code,
        openid: storeOpenid
      }).then(resp => {
        let openid = resp.data;
        this.wx.openid = openid;
        if (openid) {
          uni.setStorageSync('openid', openid)
        }

      })
    },
    getBusinessById() {
      this.$api.getBusinessById({
        id: this.wx.id
      }).then(resp => {
        this.form = resp.data;
      })
    },
    confirmFn() {
      let p = {
        b: this.wx.id,
        money: this.form.totalMoney,
        tradeType: "JSAPI",
        openid: this.wx.openid
      }
      p.desc = "A1-" + this.form.goodsName + this.form.no;
      p.businessType = 'PORT_OPERATION_FEE';
      this.$api.getPrePay(this.$common.removeNull(p)).then(resp => {
        let data = resp.data;
        let that = this;
        jweixin.chooseWXPay({
          timestamp: data
              .timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
          paySign: data.paySign, // 支付签名
          success: function (res) {
            if (res.errMsg === "chooseWXPay:ok") {
              that.checkPayResult(data.outTradeNo);
            }
          }
        });
      })
    },
    checkPayResult(outTradeNo) {
      this.$common.showLoading('正在确认结果...')
      this.$api.checkPayResult({
        outTradeNo: outTradeNo
      }).then(resp => {
        let data = resp.data;
        if (data.orderStatus == 'SUCCESS' || data.orderStatus == 'FINISH') {
          this.$common.toast('支付成功')
        } else {
          this.$common.toast('支付失败')
        }
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.item-line {
  color: #a2a2a2;
  padding: 5px 0 10px 29px;
  border-bottom: 1px solid #E5E5E5;
}

@import '@/common/common.scss'
</style>