assessment-front/pages_order/report/userInfo.vue

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

    <view class="status">
      <view class="flex status-content">
        <!-- todo: 缺切图 -->
        <image class="icon" src="@/pages_order/static/report/icon-info.png" mode="widthFix"></image>
        <view>支付成功</view>
      </view>
    </view>

    <view class="tips">
      <view class="flex tips-content">
        <uv-icon name="error-circle" color="#014FA2" size="36rpx"></uv-icon>
        <view>请如实填写以下信息，方可获取答题情况生成风险测评报告！</view>
      </view>
    </view>
    
    <view class="form">
      <view class="flex form-header">
        <view class="line"></view>
        <view>基本信息</view>
      </view>

      <uv-form 
        ref="form"
        :model="form"
        :rules="rules"
        errorType="toast"
      >
        <view class="form-item">
          <uv-form-item prop="name" :customStyle="formItemStyle">
            <view class="flex row">
              <view class="row-label">姓名</view>
              <view class="row-content">
                <input 
                  v-model="form.name" 
                  placeholder="请输入您的姓名"
                  :placeholderStyle="placeholderStyle"
                />
              </view>
            </view>
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item prop="phone" :customStyle="formItemStyle">
            <view class="flex row">
              <view class="row-label">手机号码</view>
              <view class="row-content">
                <input 
                  v-model="form.phone" 
                  placeholder="请输入您的手机号"
                  :placeholderStyle="placeholderStyle"
                />
              </view>
            </view>
          </uv-form-item>
        </view>
        <view class="form-item">
          <uv-form-item prop="company" :customStyle="formItemStyle">
            <view class="flex row">
              <view class="row-label is-required">公司名称</view>
              <view class="row-content">
                <input 
                  v-model="form.company" 
                  placeholder="请选输入公司全称"
                  :placeholderStyle="placeholderStyle"
                />
              </view>
            </view>
          </uv-form-item>
        </view>
      </uv-form>
    </view>

    <view class="bottom">
      <button :class="['btn', disabled ? 'is-disabled' : '']" :disabled="disabled" @click="onCreateReport">生成报告</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        id: null,
        form: {
          name: null,
          phone: null,
          company: null,
        },
        rules: {
          'company': {
            type: 'string',
            required: true,
            message: '请填写公司名称~',
          },
        },
        formItemStyle: { padding: 0 },
        placeholderStyle: 'color: #BDBDBD; font-size: 28rpx; font-weight: 400;'
      }
    },
    computed: {
      disabled() {
        const { name, phone, company } = this.form

        return !name || !phone || !company
      }
    },
    onLoad(arg) {
      const { id } = arg
      this.id = id
    },
      methods: {
        onCreateReport() {
          // todo
          
          uni.navigateTo({
            url: `/pages_order/report/index?id=${this.id}`
          })
        },
      },
  }
</script>

<style scoped lang="scss">

  .status {
    width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;

    &-content {
      width: 100%;
      padding: 157rpx 0 84rpx 0;
      box-sizing: border-box;
      column-gap: 18rpx;
      font-size: 48rpx;
      font-weight: 600;
      color: #000000;
      border-bottom: 1rpx dashed #E2EAF1;
    }
  }

  .tips {
    width: 100%;
    padding: 68rpx 24rpx 35rpx 24rpx;
    box-sizing: border-box;

    &-content {
      justify-content: flex-start;
      column-gap: 15rpx;
      width: 100%;
      padding: 13rpx 22rpx;
      box-sizing: border-box;
      font-size: 22rpx;
      line-height: 40rpx;
      color: #014FA2;
      background: rgba($color: #014FA2, $alpha: 0.16);
      border-radius: 11rpx;

      .icon {
        width: 36rpx;
        height: auto;
      }
    }
  }

  .form {
    padding: 0 18rpx;

    &-header {
      margin-bottom: 28rpx;
      padding: 0 18rpx;
      justify-content: flex-start;
      column-gap: 7rpx;
      font-size: 30rpx;
      font-weight: 600;
      color: #000000;

      .line {
        width: 9rpx;
        height: 33rpx;
        background: #014FA2;
        border-radius: 6rpx;
      }
    }

    &-item {
      border-bottom: 0.5rpx solid rgba($color: #707070, $alpha: 0.14);
    }
  }

  .row {
    justify-content: space-between;
    padding: 36rpx 30rpx 22rpx 24rpx;

    &-label {
      position: relative;
      font-size: 30rpx;
      color: #000000;

      &.is-required:after {
        content: '*';
        position: absolute;
        top: 0;
        left: 0;
        font-size: 15rpx;
        line-height: 42rpx;
        color: #FF3838;
      }
    }

    &-content {
      /deep/ input {
        text-align: right;
      }
    }
  }
  
  .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;

      &.is-disabled {
        background: #999999;
      }
    }
  }
</style>