Payment/src/views/mobile/index.vue

<script setup lang="ts">
import { showConfirm } from '@/components/Toast'
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { openPay, getOrderInfo, wxLogin } from '@/api/api'
import { useRoute } from 'vue-router'
import { GetRequest, getWeChatCode } from '@/utils/index'
const payType = ref('0')
const route = useRoute()
const orderDetal = ref({})
const orderSn = ref(route.query.id || GetRequest('id'))
const { getToken, openId, isEur, info, setUserData } = useUserStore()
const is_weixn = computed(() => {
  var wx = window.navigator.userAgent.toLowerCase()
  if (wx.match(/MicroMessenger/i) == 'micromessenger') {
    return true // 是微信端
  } else {
    return false
  }
})
// let PAYSID = {
//   wechatPay: is_weixn.value ? 1 : 0,
//   alipay: 4,
//   paypal: 5
// }
//判断是否微信
onMounted(() => {
  console.log('useUserStore', getToken, openId, isEur, info, is_weixn)
  getDetial()
})
async function handelPay() {
  let apiData = {
    orderSn: orderSn.value,
    payType: is_weixn.value ? '1' : payType.value,
    openId: 'dolor exercitation velit'
  }
  console.log('handelPay', apiData)
  const res = await openPay(apiData)
  // console.log('apiData', res)
  if (is_weixn.value) {
    //微信内支付
    onBridgeReady(res)
  } else if (res.form || res.h5Url) {
    console.log('payType', res.form || res.h5Url)
    window.location.href = res.form || res.h5Url
  } else {
    showConfirm({
      text: '支付异常',
      type: 'err',
      callback: (val) => {
        console.log('我的测试计划', val)
      }
    })
  }
}
// 调微信支付
function onBridgeReady(obj) {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest',
    {
      appId: obj.appid,
      //公众号名称，由商户传入
      timeStamp: obj.timeStamp + '',
      //时间戳，自1970年以来的秒数
      nonceStr: obj.nonceStr,
      //随机串
      package: `prepay_id=${obj.prepayId}`,
      signType: obj.signType,
      //微信签名方式：
      paySign: obj.paySign
    },
    function (res) {
      if (res.err_msg == 'get_brand_wcpay_request:ok') {
        // 使用以上方式判断前端返回,微信团队郑重提示：
        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        showConfirm({
          text: '成功了',
          type: 'warn',
          callback: (val) => {
            console.log('我的测试计划', val)
          }
        })
        console.log('成功了', res)
      } else {
        console.log('失败了', res)
        showConfirm({
          text: '失败了',
          type: 'warn',
          callback: (val) => {
            console.log('我的测试计划', val)
          }
        })
      }
    }
  )
}
function handleType(params: string) {
  payType.value = params
}
function getDetial() {
  getOrderInfo(orderSn.value).then((res) => {
    orderDetal.value = res
    handleWxlogin(res.wxAppId)
  })
}
async function handleWxlogin(wxAppId: string) {
  const code = GetRequest('code')
  if (!openId && !code) {
    //微信登录
    getWeChatCode(wxAppId)
  } else if (code) {
    //存在code 换取openid
    const res = wxLogin({ code, orderSn: orderSn.value })
    if (!res.errmsg) {
      setUserData(res.openid, 'openId')
    }
  }
}
async function handleOpenPay() {
  openPay({
    orderSn: GetRequest('orderSn'),
    payType: payType.value,
    openId: ''
  }).then((res) => {
    let url = res.qrCodeUrl
  })
}
</script>
<template>
  <div class="mobilePage">
    <div class="pageTitle">支付中心</div>
    <div class="contentInfo">
      <div class="info">
        <div class="cell">
          <span>当前账号</span>
          <span>15915816041</span>
        </div>
        <div class="cell">
          <span>购买会员</span>
          <span>专业会员 1 ，有效期1年</span>
        </div>
      </div>
      <div class="payType">
        <div class="cell" @click="handleType('0')">
          <span>
            <img class="payTypeImg" src="@/assets/images/wechat56.png" alt="" />
            微信支付
          </span>
          <div class="select" :class="{ active: payType == '0' }"></div>
        </div>
        <div class="cell" @click="handleType('4')" v-if="!is_weixn">
          <span>
            <img class="payTypeImg" src="@/assets/images/alipay56.png" alt="" />
            支付宝支付
          </span>
          <div class="select" :class="{ active: payType == '4' }"></div>
        </div>
        <div class="cell" @click="handleType('5')" v-if="isEur">
          <span>
            <img class="payTypeImg" src="@/assets/images/paypal.png" alt="" />
            paypal
          </span>
          <div class="select" :class="{ active: payType == '5' }"></div>
        </div>
      </div>
    </div>
    <div class="bottomInfo">
      <div class="price">
        应付金额<span>¥{{ orderDetal?.orderMoney || 0.0 }}</span>
      </div>
      <div class="payBut" @click="handelPay">付款</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mobilePage {
  background: #f7f7f7;
  min-height: calc(100vh - 50px);
  max-width: 100vw;
  display: block;
  .pageTitle {
    width: calc(100% - 40px);
    padding: 23px 20px;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #e6e6e6;
    margin-bottom: 10px;
  }
  .contentInfo {
    .cell {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
      padding: 15px 20px;
      border-bottom: 1px solid #ebedf0;
      align-items: center;
      &:last-child {
        border-bottom: none;
      }
      .select {
        border-radius: 50%;
        height: 20px;
        width: 20px;
        border: 1px solid #d5d8de;
      }
      .active {
        background: url('@/assets/images/active.png');
        background-position: center center;
        background-size: 22px;
        height: 22px;
        width: 22px;
        border: none;
      }
      .payTypeImg {
        height: 18px;
        width: 20px;
        margin-right: 8px;
        position: relative;
        top: 3px;
      }
    }
  }
  .bottomInfo {
    height: 56px;
    width: 100%;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;
    position: fixed;
    bottom: 0px;
    .price {
      padding: 5px 20px;
      span {
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff0000;
        line-height: 19px;
        letter-spacing: 4px;
      }
    }
    .payBut {
      background: @primary-color;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      width: 120px;
      line-height: 56px;
      height: 100%;
      color: #fff;
      text-align: center;
    }
  }
  .info {
    margin-bottom: 10px;
    font-size: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #202020;
    line-height: 19px;
  }
}
</style>