assessment-front/pages_order/report/pay.vue

<template>
  <view class="page__view">
		<navbar title="支付" leftClick @leftClick="$utils.navigateBack" />

    <view class="flex flex-column info">
      <view>实付金额</view>
      <view class="flex price">
        <view>¥</view>
        <view class="highlight">{{ payAmount }}</view>
      </view>
      <view class="flex flex-column contact">
        <view>联系客服获取抵扣码</view>
        <image class="qr" :src="configList.customer_service_qrcode" :show-menu-by-longpress="true" mode="widthFix"></image>
      </view>
    </view>
    
    <view class="form">
      <uv-form 
        ref="form"
        :model="form"
        :rules="rules"
        errorType="toast"
      >
        <view class="form-item">
          <uv-form-item prop="payment" :customStyle="formItemStyle">
            <view class="form-item-label">选择支付方式</view>
            <view class="form-item-content">
              <uv-radio-group 
                v-model="form.payment" 
                placement="column"
                shape="circle"
                size="30rpx"
                iconSize="30rpx"
                activeColor="#014FA2"
              >
                <view class="payment">
                  <view class="flex payment-content">
                    <view class="flex payment-content-info">
                      <image class="icon" src="@/pages_order/static/report/icon-wx.png" mode="widthFix"></image>
                      <view>微信支付</view>
                    </view>
                    <view>
                      <uv-radio :name="0"></uv-radio>
                    </view>
                  </view>
                </view>
                <view class="payment">
                  <view class="flex payment-content">
                    <view class="flex payment-content-info">
                      <image class="icon" src="@/pages_order/static/report/icon-coupon.png" mode="widthFix"></image>
                      <view>兑换码抵扣支付</view>
                    </view>
                    <view>
                      <uv-radio :name="1"></uv-radio>
                    </view>
                  </view>
                </view>
              </uv-radio-group>
            </view>
          </uv-form-item>
        </view>
        <view class="form-item is-child" v-if="form.payment == 1">
          <uv-form-item prop="code" :customStyle="formItemStyle">
            <view class="flex row">
              <view class="form-item-label">兑换码</view>
              <view class="form-item-content">
                <input 
                  v-model="form.code" 
                  placeholder="请输入兑换码"
                  placeholderStyle="color: #999999; font-size: 30rpx; font-weight: 400;"
                />
              </view>
            </view>
          </uv-form-item>
        </view>
      </uv-form>
    </view>

    <view class="bottom">
      <button class="btn" @click="onPay">立即支付</button>
    </view>

    <codeErrorPopup ref="codeErrorPopup"></codeErrorPopup>
  </view>
</template>

<script>
  import codeErrorPopup from './codeErrorPopup.vue'

  export default {
    components: {
      codeErrorPopup,
    },
		data() {
			return {
        batchNo: null,
        form: {
          payment: 0,
          code: null,
				},
        rules: {
          'payment': {
            type: 'number',
            required: false,
            message: '请选择支付方式',
          },
          'code': {
            type: 'string',
            required: true,
            message: '请输入兑换码',
          },
        },
        formItemStyle: { padding: 0 },
			}
		},
    computed: {
      payAmount() {
        return Number(this.configList.pay_amount)
      }
    },
    onLoad(arg) {
      const { batchNo } = arg
      this.batchNo = batchNo
    },
    methods: {
      async onPay() {
        try {
          await this.$refs.form.validate()

					const {
						payment,
						code,
					} = this.form

          let payAmount = this.payAmount
          let discountAmount = 0

          if (payment == 1) { // 兑换码
            const infoRes = await this.$fetch('queryCodeById', { code }, false, null, true)
            const { result: infoResult } = infoRes

            if (!infoResult || infoResult?.isUse !== '0') {
              this.$refs.codeErrorPopup.open()
              return
            }

            discountAmount = infoResult.discountAmount
            payAmount -= discountAmount
          }
          
					const params = {
            batchNo: this.batchNo,
						payAmount,
            discountAmount,
						code,
					}

          const result = await this.$fetch('createOrder', params)
          
          await uni.requestPaymentWxPay({ result })
       
          uni.showToast({
            title: '支付成功',
            icon: 'none'
          })
          
          setTimeout(() => {
            uni.redirectTo({
              url: `/pages_order/report/userInfo?batchNo=${this.batchNo}`
            })
          }, 700)
        } catch (err) {

        }
      },
    },
  }
</script>

<style scoped lang="scss">

  .info {
    width: 100%;
    padding: 96rpx 62rpx 51rpx 62rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 50rpx;
    color: #000000;

    .price {
      margin-top: 23rpx;
      align-items: baseline;
      column-gap: 13rpx;
      font-size: 51rpx;
      line-height: 72rpx;
      color: #000000;

      .highlight {
        font-size: 78rpx;
        line-height: 110rpx;
      }
    }

    .contact {
      margin-top: 52rpx;
      row-gap: 40rpx;
      width: 100%;
      padding: 30rpx 0 26rpx 0;
      box-sizing: border-box;
      border: 1rpx dashed #014FA2;

      .qr {
        width: 157rpx;
        height: auto;
      }
    }
  }

  .form {

    &-item {
      &-label {
        padding: 0 38rpx;
        font-size: 28rpx;
        line-height: 50rpx;
        color: #000000;
      }

      &-content {
      }

    }
  }

  .payment {
    &:first-child {
      margin-top: 24rpx;
    }

    & + & {
      border-top: 20rpx solid #F7F7F7;
    }

    &-content {
      justify-content: space-between;
      padding: 32rpx 60rpx 32rpx 50rpx;
      

      &-info {
        column-gap: 15rpx;
        font-size: 30rpx;
        color: #000000;

        .icon {
          width: 58rpx;
          height: auto;
        }
      }
    }
  }
  
  .form-item.is-child {
    padding: 22rpx 60rpx 0 123rpx;

    .form-item-label,
    .form-item-content {
      padding: 0;
    }

    .form-item-label {
      padding-right: 16rpx;
      font-size: 30rpx;
    }

    .form-item-content {
      flex: 1;
      padding: 11rpx;
      background: #F7F7F7;
    }
  }
  
  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 35rpx 56rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 35rpx);
    background: #FFFFFF;
    box-sizing: border-box;

    .btn {
      width: 100%;
      padding: 29rpx 0;
      font-size: 30rpx;
      line-height: 1.5;
      color: #FFFFFF;
      background: #014FA2;
      border-radius: 50rpx;
    }
  }

</style>