health-front/pages_order/comment/commentWrite.vue

<template>
  <view class="page__view">

		<navbar :title="title" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#F3F2F7" />

    <view class="main form">

      <uv-form 
        ref="form"
        :model="form"
        :rules="rules"
        errorType="toast"
      >
        <view class="card info">
          <view class="card-header">评价信息</view>
          <view class="form-item">
            <uv-form-item prop="content" :customStyle="formItemStyle">
              <view class="form-item-label">评价内容</view>
              <view class="form-item-content">
                <formTextarea v-model="form.content"></formTextarea>
              </view>
            </uv-form-item>
          </view>
          <view class="form-item">
            <uv-form-item prop="images" :customStyle="formItemStyle">
              <view class="form-item-label">上传图片/视频（选填）</view>
              <view class="form-item-content">
                <formUpload v-model="form.images"></formUpload>
              </view>
            </uv-form-item>
          </view>
        </view>

        <view class="card">
          <view class="form-item">
            <uv-form-item prop="productServeScore" :customStyle="formItemStyle">
              <view class="flex row">
                <view class="form-item-label">产品服务度</view>
                <view class="form-item-content">
                  <uv-rate v-model="form.productServeScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
                </view>
              </view>
            </uv-form-item>
          </view>
          <view class="form-item">
            <uv-form-item prop="questionExperienceScore" :customStyle="formItemStyle">
              <view class="flex row">
                <view class="form-item-label">问卷体验</view>
                <view class="form-item-content">
                  <uv-rate v-model="form.questionExperienceScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
                </view>
              </view>
            </uv-form-item>
          </view>
          <view class="form-item">
            <uv-form-item prop="deliverySpeedScore" :customStyle="formItemStyle">
              <view class="flex row">
                <view class="form-item-label">物流速度</view>
                <view class="form-item-content">
                  <uv-rate v-model="form.deliverySpeedScore" size="48rpx" gutter="16rpx" activeColor="#F7BA1E" :allowHalf="true" :minCount="0.5" ></uv-rate>
                </view>
              </view>
            </uv-form-item>
          </view>
        </view>
      </uv-form>
    </view>

    <view class="bottom">
      <button class="btn" @click="onSubmit">提交申请</button>
    </view>
  </view>
</template>

<script>
	import { mapState } from 'vuex'

  import formTextarea from '@/pages_order/components/formTextarea.vue'
  import formUpload from '@/pages_order/components/formUpload.vue'

  export default {
    components: {
      formTextarea,
      formUpload,
    },
    data() {
      return {
        form: {
          content: null,
          images: [],
          productServeScore: null,
          questionExperienceScore: null,
          deliverySpeedScore: null,
        },
        rules: {
          'content': {
            type: 'string',
            required: true,
            message: '请输入评价',
          },
          'productServeScore': {
            type: 'number',
            required: true,
            message: '请为【产品服务度】打分',
          },
          'questionExperienceScore': {
            type: 'number',
            required: true,
            message: '请为【问卷体验】打分',
          },
          'deliverySpeedScore': {
            type: 'number',
            required: true,
            message: '请为【物流速度】打分',
          },
        },
        formItemStyle: { padding: 0 },
      }
    },
		computed: {
			...mapState(['userInfo']),
		},
    methods: {
      async onSubmit() {
        try {
          const res = await this.$refs.form.validate()

          console.log('onSubmit res', res)

          // todo
          
          setTimeout(() => {
            this.$utils.navigateBack()
          }, 800)
          
          // this.$utils.redirectTo(`/pages_order/comment/commentRecords?creator=${userInfo.id}`)

        } catch (err) {
          console.log('onSubmit err', err)
        }
      },
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    width: 100vw;
		min-height: 100vh;
    background-color: $uni-bg-color;
    position: relative;
    
    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }
  }

  .main {
    padding: calc(var(--status-bar-height) + 144rpx) 32rpx 236rpx 32rpx;
	}

  .card {
    padding: 32rpx;
    background: #FAFAFF;
    border: 2rpx solid #FFFFFF;
    border-radius: 32rpx;

    & + & {
      margin-top: 40rpx;
    }

    &-header {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      line-height: 1.4;
      color: #252545;
      margin-bottom: 32rpx;
    }
  }

  .form {
    &-item {
      border-bottom: 2rpx solid #EEEEEE;

      &:last-child {
        border: none;
      }

      & + & {
        margin-top: 32rpx;
      }

      &-label {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 26rpx;
        line-height: 1.4;
        color: #181818;
      }
    }
  }

  .info {
    .form-item + .form-item {
      margin-top: 40rpx;
    }
    .form-item-content {
      margin-top: 16rpx;
    }
  }

  .row {
    justify-content: space-between;
  }

  .bottom {
		position: fixed;
		left: 0;
		bottom: 0;

		width: 100vw;
		height: 200rpx;
		padding: 24rpx 40rpx;
		background: #FFFFFF;
		box-sizing: border-box;

    .btn {
      width: 100%;
      padding: 16rpx 0;
      box-sizing: border-box;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      line-height: 1;
      color: #FFFFFF;
      background-image: linear-gradient(to right, #4B348F, #845CFA);
      border-radius: 41rpx;
    }
	}

</style>