assessment-front/pages_order/feedback/index.vue

<template>
  <view class="page__view">
    <navbar title="意见反馈" leftClick @leftClick="$utils.navigateBack" bgColor="transparent" />

    <view class="bg">
      <view class="title">Hello</view>
      <view class="desc">有什么好的建议可以告诉我们哦～</view>
    </view>

    <view class="main">
      <view class="form">
        <uv-form 
          ref="form"
          :model="form"
          :rules="rules"
          errorType="toast"
        >
          <view class="form-item">
            <uv-form-item prop="content" :customStyle="formItemStyle">
              <view class="card feedback">
                <view class="feedback-header">
                  <view class="feedback-header-content">
                    <view>反馈内容</view>
                    <view class="feedback-icon">
                      <uv-icon name="star-fill" color="#FFFFFF" size="26rpx"></uv-icon>
                    </view>
                  </view>
                </view>
                <view>
                  <formTextarea v-model="form.content" placeholder="请填写10个字以上的内容，以便我们为您提供更好的服务"></formTextarea>
                </view>
                <view>
                  <formUpload v-model="form.images"></formUpload>
                </view>
              </view>
            </uv-form-item>
          </view>
          <view class="form-item">
            <uv-form-item prop="phone" :customStyle="formItemStyle">
              <view class="flex card phone">
                <view class="label">联系电话</view>
                <input 
                  v-model="form.phone" 
                  placeholder-style="color: #999999; font-size: 28rpx;"
                  placeholder="请输入手机号" 
                />
              </view>
            </uv-form-item>
          </view>
        </uv-form>
      </view>
    </view>

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

<script>
  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: [],
          phone: null,
				},
        rules: {
          'content': {
            type: 'string',
            required: true,
            message: '请填写10个字以上的内容，以便我们为您提供更好的服务',
          },
          'phone': {
            type: 'string',
            required: true,
            message: '请输入手机号',
          },
        },
        formItemStyle: { padding: 0 },
      }
    },
    methods: {
      async onSubmit() {
        try {

          await this.$refs.form.validate()


          const {
            content,
            images,
            phone,
          } = this.form

          const params = {
            content,
            image: images.join(','),
            phone,
          }

          await this.$fetch('addFeedback', params)
          
          uni.showToast({
            title: '提交成功',
            icon: 'none'
          })

          setTimeout(uni.navigateBack, 1000, -1)
						
        } catch (err) {

        }
      },
    },
  }
</script>

<style scoped lang="scss">

  .page__view {
    background: #F5F5F5;
    
    /deep/ .nav-bar__view {
      position: fixed;
      top: 0;
      left: 0;
    }
  }

  .bg {
    width: 100%;
    height: 501rpx;
    padding-top: 203rpx;
    box-sizing: border-box;
    color: #FFFFFF;
		background: linear-gradient(164deg, #014FA2 30%, #4C8FD6);

    .title {
      padding: 0 73rpx;
      font-size: 64rpx;
      font-weight: 600;
    }

    .desc {
      margin-top: 18rpx;
      padding: 0 68rpx;
      box-sizing: border-box;
      font-size: 28rpx;
    }
  }

  .main {
    width: 100%;
    padding: 0 28rpx;
    box-sizing: border-box;
    background: #F5F5F5;
  }

  .form {
    // transform: translateY(-98rpx);
    transform: translateY(-46rpx);

    &-item {
      & + & {
        margin-top: 36rpx;
      }
    }
  }

  .card {
    position: relative;
    background: #FFFFFF;
    border-radius: 15rpx;
  }

  .feedback {
    padding: 43rpx 31rpx;
  }

  
  .feedback-header {
    position: absolute;
    top: 0;
    left: 12rpx;
    transform: translateY(-100%);
    // margin-left: 12rpx;

    &-content {
      position: relative;
      padding: 9rpx 20rpx 3rpx 20rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #FFFFFF;
      border-top-left-radius: 30rpx;
      background: linear-gradient(to right, #014FA2, #6A9ACE);
    }
  }

  .feedback-icon {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30rpx, -4rpx);
  }

  .phone {
    justify-content: flex-start;
    padding: 44rpx 27rpx;
    column-gap: 31rpx;

    .label {
      font-size: 28rpx;
      color: #000000;
    }
  }
  
	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;

		width: 100vw;
		padding: 56rpx 35rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 35rpx);
		box-sizing: border-box;

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

</style>