yihuo/pages/sell_detail/checkout.vue

<template>
  <view class="cu-modal bottom-modal" :class="{ show: visible }">
      <view class="mask" @click="close"></view>
      <view class="wrapper cu-dialog">
          <view class="paddingY25 flex-align-center relative">
              <image :src="resource.pay_title_dart" class="title" />
              <image :src="resource.icon_x" class="x" @click="close" />
          </view>
          <view>
              <view class="flex-align paddingB25">
                  <image :src="data.cover" class="logo flex-shrink0 flex-shrink0" />
                  <view class="marginL12 flex1 self-stretch flex-column-between">
                      <view class="color-1 font4 bold">{{ data.name }}</view>
                      <view class="color-theme">
                          <text class="font2">¥</text>
                          <text class="font8 bold">{{ data.price }}</text>
                      </view>
                  </view>
              </view>
              <view
                  v-if="cash && hide"
                  class="flex-align paddingY15"
                  style="border-top: 2rpx solid #eeeeee"
              >
                  <view class="flex1 font4 color-1">
                      使用钱包支付
                      <text class="color-theme">(余额：¥{{ cash.balance }})</text>
                  </view>
                  <switch
                      class="purple"
                      :checked="cashChecked"
                      @change="changeCashChecked"
                  ></switch>
              </view>
          </view>
          <cm-button ::height="44" @click="pay">¥{{ lastPrice }} 立即支付</cm-button>
          <view class="fill"></view>
      </view>
  </view>
</template>

<script>
  import cmButton from '../../components/cm-button.vue'
  import { throttle } from '@/utils'
  import { H5 } from '@/utils/config'
  import resource from '@/utils/resource'
  import { baseEncode } from '../../utils/utils'
  export default {
      components: { cmButton },
      props: {
          data: Object
      },
      data() {
          return {
              resource,
              visible: false,
              checked: true,
              cash: null,
              cashChecked: false,
              lastPrice: null //最终金额
          }
      },
      computed: {
          hide() {
              return !this.$store.state.hide
          },
          payInfo() {
              return this.$store.state.payInfo
          }
      },
      watch: {
          payInfo(val) {
              if (val && val.payResult == 'SUCCESS') {
                  this.paySuccess(val)
              } else if (val && val.payResult !== 'SUCCESS') {
              }
          }
      },
      methods: {
          show(data = {}) {
              this.lastPrice = data.paymentAmount
              if (data.cash && data.cash.balance > data.paymentAmount) {
                  this.cash = data.cash
                  this.cashChecked = true
              } else {
                  this.cash = null
                  this.cashChecked = false
              }
              this.visible = true
          },
          close() {
              this.visible = false
          },
          changeCashChecked(e) {
              this.cashChecked = e.detail.value
          },
          async pay() {
              this.realPay()
          },
          async realPay() {
              let paymentType = this.cashChecked ? 'WALLET' : 'WXPAY_JSAPI'
              const res = await this.$service.sell.apply(this.data.id, paymentType:'ALIPAY_APP', 1)
              //判断是否是微信支付
              if (res) {
                  if (res.paySuccess) {
                      this.close()
                      this.$event.emit(this.$event.key.SELL_REFRESH)
                      this.$router.replace('sell_record', { active: 3 })
                      return
                  }
                  let self = this
                  // 支付宝支付
                  uni.requestPayment({
                      provider: 'alipay',
                      orderInfo: res.payInfo,
                      success: function (res) {
                          self.close()
                          self.$event.emit(self.$event.key.SELL_REFRESH)
                          self.$router.replace('sell_record', { active: 3 })
                      },
                      fail: function (err) {
                          console.log('fail:' + JSON.stringify(err));
                      }
                  });
                  return
              }
          },
          wechatPay(data) {
              let payInfo = data.payInfo
              wx.requestPayment({
                  timeStamp: payInfo.timeStamp,
                  nonceStr: payInfo.nonceStr,
                  package: payInfo.packageValue,
                  signType: payInfo.signType,
                  paySign: payInfo.paySign,
                  success: (res) => {
                      this.close()
                      this.$event.emit(this.$event.key.SELL_REFRESH)
                      this.$router.replace('sell_record', { active: 3 })
                  },
                  fail: (res) => {}
              })
          },
          thirdPay(data) {
              let self = this
              let redirectUrl = data.redirectUrl
              let requestId = data.requestId
              const base64Url = encodeURIComponent(baseEncode(redirectUrl))
              wx.openEmbeddedMiniProgram({
                  path: 'pages/pay/order', // 启动目标页面
                  appId: 'wx0448557563ffc600', // 启动的小程序
                  envVersion: 'release', // develop | trial | release
                  verify: 'binding',
                  extraData: {
                      title: '订单付款', // 导航Title
                      tip: `待支付订单付款`, // 支付提示内容
                      requestId: requestId, // 本次请求ID
                      action: 'epPay', // 支付模式
                      payUrl: base64Url // 支付地址, 需要进行Base64转换
                  },
                  success: (res) => {
                      console.info('启动成功', res)
                  },
                  fail: (err) => {
                      console.info('启动失败', err)
                  }
              })
          },
          paySuccess(payInfo) {
              this.close()
              this.$store.state.payInfo = null
              this.$event.emit(this.$event.key.SELL_REFRESH)
              this.$router.replace('sell_record', { active: 3 })
          }
      }
  }
</script>

<style lang="scss" scoped>
  .mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
  }
  .wrapper {
      padding: 0 28rpx;
      background: #fff;
      overflow: hidden;
      border-top-left-radius: 30rpx !important;
      border-top-right-radius: 30rpx !important;

      .title {
          width: 172rpx;
          height: 28rpx;
      }
      .x {
          position: absolute;
          right: 28rpx;
          top: 50%;
          margin-top: -16rpx;
          width: 32rpx;
          height: 32rpx;
      }
      .logo {
          width: 180rpx;
          height: 180rpx;
          border-radius: 8rpx;
      }
      .fill {
          height: 40rpx;
      }
  }
</style>