front-end/hdApp/src/pagesPurchase/wechatPay.vue

<template>
    <div class="app-content awaitPayYe awaitPayYe">
    <div class="callback-wrap">
      <div class="bg_01"></div>
      <div class="callback-blo">
        <block>
          <div class="icon">
            <i class="iconfont icondaizhifu"></i>
          </div>
        </block>
        <view class="wait">待付款</view>
        <block>
          <div class="price" v-if="info.reachDiscountPrice >0 || info.orderReachDiscountPrice>0">
            <span class="app-size-36 app-bold" style="text-decoration:line-through;color:#8a7f7f;">￥{{ parseFloat((Number(info.reachDiscountPrice)+Number(realPrice)+Number(info.orderReachDiscountPrice)).toFixed(2)) }}</span>
          </div>

          <div class="order-num app-color-3" style="color:red;font-size:30upx;margin-top:10upx;margin-bottom:10upx;font-weight:bold;" 
          v-if="info.reachDiscountPrice && Number(info.reachDiscountPrice)>0">花材优惠 -￥{{ parseFloat(info.reachDiscountPrice) }}</div>

          <div class="order-num app-color-3" style="color:red;font-size:30upx;margin-top:10upx;margin-bottom:10upx;font-weight:bold;" 
          v-if="info.orderReachDiscountPrice && Number(info.orderReachDiscountPrice)>0">整单优惠 -￥{{ parseFloat(info.orderReachDiscountPrice) }}</div>

          <div class="price">
            <span class="app-size-36 app-bold">￥{{ realPrice || '0.00'}}</span>
          </div>
          <div class="order-num app-color-3" style="margin-top:12upx;">订单号 {{ orderSn || ''}}</div>
          <div v-if="remainPayTime > 0" class="order-num app-color-3" style="margin-top:18upx;font-size:26upx;"><span style="font-weight:bold;padding-right:8upx;">{{remainPayTime}}</span>秒后失效</div>
          <div v-else class="order-num app-color-3" style="margin-top:12upx;font-size:26upx;">订单已失效</div>
        </block>
        <block>
        <!-- #ifdef MP-WEIXIN -->
        <div class="call-one-btn">
          <view v-if="Number(balance) >= Number(realPrice)">
            <button v-if="getPayType == 1" class="button-com pay-wx" :class="[remainPayTime >0 ? 'green':'default']" :disabled="remainPayTime >0 ? false : true" @click="wxPayFn">微信支付</button>
            <button v-else class="button-com pay-wx" :class="[remainPayTime >0 ? 'green':'default']" :disabled="remainPayTime >0 ? false : true" @click="wxPayFnOld">微信支付</button>
          </view>
          <view v-else>
            <button v-if="getPayType == 1" class="button-com pay-wx" :class="[remainPayTime >0 ? 'green':'default']" :disabled="remainPayTime >0 ? false : true" @click="wxPayFn">微信支付</button>
            <button v-else class="button-com pay-wx" :class="[remainPayTime >0 ? 'green':'default']" :disabled="remainPayTime >0 ? false : true" @click="wxPayFnOld">微信支付</button>
          </view>
          <button class="button-com pay-wx" :class="[remainPayTime >0 ? 'green':'default']" :disabled="remainPayTime >0 ? false : true" @click="debtPay" v-if="hasDebtPay === '1'">赊账</button>

          <view style="margin-top:30upx;text-align: center;">
            <image :src="aliPayCodeImg" mode="heightFix" style="width:290upx;height:290upx;margin:0 auto;"></image>
            <view style="margin-top:10upx;font-size:32upx;">支付宝扫此二维码付款</view>
          </view>
          <button class="button-com ali-btn" @click="savePayCode" style="margin-top:10upx;">保存二维码</button>
          <button class="button-com ali-btn" @click="goDetail" style="margin-top:10upx;">我已经付款</button>
          <view style="margin-top:25upx;font-size:32upx;text-decoration: underline;" @click="teachPayFn()">不会用支付宝付款？点这里教您</view>
        </div>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <div class="call-one-btn">
          <view>
            <button class="button-com pay-wx" :class="[remainPayTime >0 ? 'green':'default']" :disabled="remainPayTime >0 ? false : true" @click="appWxPayFn">微信支付</button>
          </view>
          <button class="button-com pay-wx" :class="[remainPayTime >0 ? 'ali-btn':'default']" :disabled="remainPayTime >0 ? false : true" @click="appAliPayFn">支付宝支付</button>
          <button class="button-com pay-wx" :class="[remainPayTime >0 ? 'green':'default']" :disabled="remainPayTime >0 ? false : true" @click="debtPay" v-if="hasDebtPay === '1'">赊账</button>
        </div>
        <!-- #endif -->
        </block>
      </div>
    </div>
    <keyboard-module :show="keyShow" @comfirm="hideKeyFn" @clickKey="clickKeyFn" :psdShow="true" :type="typeNum" @closeKey="closeKeyFn" />
    <alert-module>
      <div class="go-login-module">
        <div>请先设置支付密码！</div>
      </div>
    </alert-module>
  </div>
</template>

<script>
import { purchaseBalancePay, purchaseDebtPay, purchaseWxPay,purchaseAliPay,getDetail } from "@/api/purchase";
import keyboardModule from './components/keyboard'
import { mapGetters } from "vuex";
import wexinPay from "@/utils/pay/wxPay";
import { postWxCode } from '@/api/mini'
import { updateMiniOpenId } from '@/api/admin'
import { getAliPayCode } from '@/api/purchase'
export default {
  name: "wechatPay",
  components: {
    keyboardModule
  },
  data () {
    return {
      options: {},
      type: '',
      keyShow: false,
      modalForm: {
        payPassword: ''
      },
      psdKey: '',
      orderSn: '',
      realPrice: '',
      typeNum: '1',
      pageId: '',
      remainPayTime:120,
      hasDebtPay:0,
      balance:0,
      getPayType:1,
      info:[],
      hasRequestApi:false,
      needCheck:0,
      aliPayCodeImg:''
    };
  },
  onLoad (options) {
    this.id = options.id
    this.aliPayCodeImg = `${this.$constant.imgUrl}/default-img.png`
  },
  computed: {
    ...mapGetters(["getLoginInfo"]),
    ...mapGetters({ dictInfo:"getDictionariesInfo" }),
  },
  onShow(){
    let that = this
    if(that.needCheck == 1){
      that.needCheck = 0
      that.$util.confirmModal({content:'已付款成功？',okText:'是的',cancelText:'没有'},() => {
        that.pageTo({ url: '/pagesPurchase/particulars?id=' + that.id, type: 2 })
      })
    }
  },
  methods: {
    openAliPay(){
      this.$msg('商家还未开通此功能')
    },
    teachPayFn() {
				this.pageTo({ url: "/admin/ghs/teachPay"})
		},
    goDetail(){
      this.$util.pageTo({url: "/pagesPurchase/purDetails?id="+this.info.id,type:2})
    },
    savePayCode(){
      let url = this.aliPayCodeImg
      uni.downloadFile({
        url: url,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function (data) {
                uni.showToast({title:'下载成功'})
              }
            });
          }
        }
      })
    },
    getAliPayCodeFn(orderSn){
      getAliPayCode({orderSn:orderSn}).then(res=>{
        if(res.code == 1){
          if(res.data.imgUrl){
            this.aliPayCodeImg = res.data.imgUrl
          }
        }
      })
    },
    init(){
      let that = this
      getDetail({id:this.option.id}).then(res=>{
        if(res.code == 1){
          this.realPrice = res.data.realPrice ? parseFloat(res.data.realPrice) : ''
          this.orderSn = res.data.orderSn
          this.getPayType = res.data.getPayType
          that.hasDebtPay = res.data.hasDebtPay
          that.balance = res.data.balance
          this.info = res.data
          that.remainPayTime = res.data.remainPayTime
          if(that.remainPayTime > 0){
            let t =setInterval(function(){
              if(that.remainPayTime > 0){
                that.remainPayTime--
              }else{
                clearInterval(t);
              }
            },1000);
          }
          // #ifdef MP-WEIXIN
          that.getAliPayCodeFn(this.orderSn)
          // #endif
        }
      })
    },
    debtPay(){
      let that = this
      that.confirmDebtPay()
    },
    confirmDebtPay() {
      let that = this
      that.$util.confirmModal({content:'确认赊账？'},() => {
        uni.showLoading({mask:true})
        purchaseDebtPay({ orderSn: that.orderSn }).then(res => {
          uni.hideLoading()
          if(res.code == 1){
            that.pageTo({ url: '/pagesPurchase/particulars?id=' + res.data.id, type: 2 })
          }
        })
      })      
    },
    appAliPayFn(){
      let that = this
      // #ifdef MP-WEIXIN
      // #endif
      // #ifdef APP-PLUS
      uni.showLoading()
      let id = this.option.id ? this.option.id : 0   
      purchaseAliPay({ orderSn: this.orderSn }).then(res => {
        uni.hideLoading()
        if(res.code == 1){
          if(res.data.payUrl){
            that.orderSn = res.data.orderSn
            that.needCheck = 1
            plus.runtime.openWeb(res.data.payUrl)
          }
        }
      })
      // #endif
    },
    appWxPayFn(){
        let that = this
        // #ifdef APP-PLUS
        uni.showLoading()
        let id = this.option.id ? this.option.id : 0
        let realPrice = this.option.realPrice ? this.option.realPrice : 0
        let orderSn = this.option.orderSn ? this.option.orderSn : ''
        if(plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
          plus.share.getServices(function(s){
            var sweixin
            for (var i = 0; i < s.length; i++) {
              var t = s[i];
              if (t.id == 'weixin') {
                  sweixin = t;
              }
            }
            let miniOriginalId = that.dictInfo.miniOriginalId && that.dictInfo.miniOriginalId.current && that.dictInfo.miniOriginalId.current.hd ? that.dictInfo.miniOriginalId.current.hd : ''
            if (sweixin && sweixin.nativeClient) {
              sweixin.launchMiniProgram({
                id: miniOriginalId,
                path: '/pagesPurchase/wechatPay?id='+id+'&realPrice='+realPrice+'&orderSn='+orderSn,
                type: 0
              });
              that.needCheck = 1
              uni.hideLoading()
            } else {
              that.$msg("没有找到微信服务")
              //that.$msg("获取微信失败：" + e.message)
              //console.log(JSON.stringify(e));
            }
          }, function(e){
              that.$msg("没有找到微信服务哦")
              //that.$msg("获取微信失败：" + e.message)
              //console.log(JSON.stringify(e));
          });
        } else {
          that.$msg("请安装微信，再打开小程序")
          return false
        }
        // #endif
    },
    wxPayFn () {
      let that = this
      //解决重复提交问题
      if(this.hasRequestApi == true){
        this.$msg('正在请求，请5秒后重试')
        return false
      }
      that.hasRequestApi = true
      setTimeout(() => {
        that.hasRequestApi = false
      },7000)

      uni.showLoading({title: '加载中',mask:true})
      uni.login({
        provider: 'weixin',
        success: res => {
          uni.setStorageSync('code', res.code)
          postWxCode({ code: res.code }).then(subRes => {
            if(subRes.data.currentMiniOpenId){
              let currentMiniOpenId = subRes.data.currentMiniOpenId
              purchaseWxPay({ orderSn: this.orderSn,currentMiniOpenId:currentMiniOpenId }).then(res => {
                uni.hideLoading()
                if(res.code == 1){
                    this.pageId = res.data.id
                    this.orderSn = res.data.orderSn
                    wexinPay(res.data, this.getSuccess, this.getError)
                    // #ifdef MP-WEIXIN
                    this.getAliPayCodeFn(this.orderSn)
                    // #endif
                }
              })
            }
          })
        }
      })
    },
    wxPayFnOld () {
      let that = this
      uni.showLoading({title: '加载中',mask:true})
      purchaseWxPay({ orderSn: this.orderSn }).then(res => {
        uni.hideLoading()
        if(res.code == 1){
          if(res.data.hasNoMiniOpenId && res.data.hasNoMiniOpenId == 1){
              //没有miniOpenId，补miniOpenId
              uni.login({
                provider: 'weixin',
                success: res => {
                  uni.setStorageSync('code', res.code)
                  postWxCode({ code: res.code }).then(subRes => {
                    if(subRes.data.currentMiniOpenId){
                      let currentMiniOpenId = subRes.data.currentMiniOpenId
                      updateMiniOpenId({miniOpenId:currentMiniOpenId}).then(subRes=>{
                        if(subRes.code == 1){
                            that.$util.confirmModal({content:'网络开小差了，请继续',okText:'确认',singer:true},() => {
                              that.wxPayFn()
                            })
                        }
                      })
                    }
                  })
                }
              })
          }else{
            this.pageId = res.data.id
            wexinPay(res.data, this.getSuccess, this.getError)
          }
        }
      })
    },
    getSuccess () {
      let that = this
      that.pageTo({ url: '/pagesPurchase/particulars?id=' + that.pageId, type: 2 })
    },
    // 关闭键盘
    closeKeyFn () {
      this.keyShow = false
    },
    getError () {
    },
    balancePay () {
      let self = this
      if(Number(this.balance) < Number(this.realPrice)){
        this.$msg('余额不足')
        return false;
      }
      if (this.getLoginInfo.payPassword) {
        self.keyShow = true
      } else {
        uni.showModal({
          title: '',
          content: '请先设置支付密码',
          success: function (res) {
            if (res.confirm) {
              self.pageTo({
                url: '/pagesPurchase/setPsd'
              })
            }
          }
        });
      }
    },
    // 点击数字键盘
    clickKeyFn (val) {
      this.psdKey = val
      console.log(this.psdKey)
    },
    // 点击了完成
    hideKeyFn () {
      uni.showLoading({title: '加载中',mask:true})
      if (this.psdKey.length === 6) {
        let data = {
          orderSn: this.orderSn,
          password: this.psdKey
        }
        purchaseBalancePay(data).then(res => {
          //关闭加载中
          uni.hideLoading()
          if(res.code == 1){
            this.pageTo({
              url: '/pagesPurchase/particulars?id=' + res.data.id,
              type: 2
            })
          }
        }).catch(err => {})
      } else {
        this.$msg('请输入六位数支付密码')
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.app-content {
  .ali-btn{
    background-color:#3385ff;
    border:1upx solid #3385ff;
    color:white;
  }
  .callback-wrap {
    padding-top: 50upx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
    .bg_01 {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 290upx;
      background: #3385ff;
      border-radius: 0upx 0upx 83upx 83upx;
      z-index: 1;
    }
    .callback-blo {
      position: absolute;
      z-index: 9;
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      margin: 0 auto;
      padding: 70upx 0;
      background-color: #fff;
      box-shadow: 2upx 2upx 16upx 0upx rgba(181, 181, 181, 0.29);
      border-radius: 10upx;
      text-align: center;
      // 使用icon
      .icon {
        .iconfont {
          font-size: 120upx;
        }
      }
      // 一个按钮
      .call-one-btn {
        .button-com {
          width: 70%;
          padding-top:26upx;
          padding-bottom:26upx;
          font-size: 32upx;
          margin-top:28upx;
        }
      }
    }
  }
}
.awaitPayWx,
.awaitPayYe {
  .status-text {
    margin-top: 22upx;
    margin-bottom: 52upx;
    color: #ffa92e;
  }
  .surplus {
    margin-top: 22upx;
    margin-bottom: 38upx;
  }
  .icon {
    .iconfont {
      color: #ffa92e;
    }
  }
}
.wait {
  color:#ffa92e;
  font-size:36upx;
  font-weight:700;
  margin: 20upx 0;
}
.balance{
  margin-top:20upx;
}
</style>