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>
        <!-- todo: fetch -->
        <view class="highlight">24.00</view>
      </view>
      <view class="flex flex-column contact">
        <view>联系客服获取抵扣码</view>
        <!-- todo: check key -->
        <image class="qr" :src="configList.service" :show-menu-by-longpress="true"></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="selectedId" 
                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>
                      <!-- todo: check value -->
                      <uv-radio :name="1"></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>
                      <!-- todo: check value -->
                      <uv-radio :name="0"></uv-radio>
                    </view>
                  </view>
                </view>
              </uv-radio-group>
            </view>
          </uv-form-item>
        </view>
        <view class="form-item is-child">
          <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 {
        id: null,
        form: {
          payment: null,
          code: null,
				},
        rules: {
          'payment': {
            type: 'string',
            required: false,
            message: '请选择支付方式',
          },
          'code': {
            type: 'string',
            required: true,
            message: '请输入兑换码',
          },
        },
        formItemStyle: { padding: 0 },
			}
		},
    onLoad(arg) {
      const { id } = arg
      this.id = id
    },
    methods: {
      onPay() {
        // todo

        // todo: check code is error
        // if error
        // this.$refs.codeErrorPopup.open()
        
				uni.navigateTo({
					url: `/pages_order/report/userInfo?id=${this.id}`
				})
      },
    },
  }
</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>