health-front/pages_order/applyService/index.vue

<template>
  <view class="page__view">

		<navbar title="申请售后" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#F3F2F7" />

    <view class="main">
      <view v-if="form.type != 2">
        <view class="product" v-for="item in applyServiceProduct" :key="item.id">
          <productCard :data="item" ></productCard>
        </view>
      </view>

      <uv-form 
        ref="form"
        :model="form"
        :rules="rules"
        errorType="toast"
      >
          <view class="card info">
            <view class="card-header">申请信息</view>
            <!-- 其他 -->
            <template v-if="form.type == 2">
              <view class="form-item">
                <uv-form-item prop="remark" :customStyle="formItemStyle">
                  <view class="form-item-label">备注</view>
                  <view class="form-item-content">
                    <formTextarea v-model="form.remark" height="436rpx"></formTextarea>
                  </view>
                </uv-form-item>
              </view>
            </template>
            <!-- 退货退款, 换货 -->
            <template v-else>
              <view class="form-item">
                <uv-form-item prop="type" :customStyle="formItemStyle">
                  <view class="form-item-label light">申请类型</view>
                  <view class="form-item-content input type">
                    {{ typeDesc }}
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="reason" :customStyle="formItemStyle">
                  <view class="form-item-label">申请原因</view>
                  <view class="form-item-content input">
                    <formInput v-model="form.reason" placeholder="请输入内容"></formInput>
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="num" :customStyle="formItemStyle">
                  <view class="flex row">
                    <view class="form-item-label">退货数量</view>
                    <view class="form-item-content count">
                      <uv-number-box 
                        v-model="form.num"
                        bgColor="transparent"
                        :iconStyle="{
                          background: '#FFFFFF',
                          fontSize: '20rpx',
                          lineHeight: 1,
                          padding: '9px',
                          borderRadius: '50%',
                        }"
                      ></uv-number-box>
                    </view>
                  </view>
                </uv-form-item>
              </view>
              <view class="form-item">
                <uv-form-item prop="price" :customStyle="formItemStyle">
                  <view class="form-item-label">申请金额（元）</view>
                  <view class="form-item-content input">
                    <formInput v-model="form.price" placeholder="请输入内容" type="number"></formInput>
                  </view>
                </uv-form-item>
              </view>
            </template>
            <view class="form-item">
              <uv-form-item prop="images" :customStyle="formItemStyle">
                <view class="form-item-label">上传图片/视频（选填）</view>
                <view class="form-item-content upload">
                  <formUpload v-model="form.images"></formUpload>
                </view>
              </uv-form-item>
            </view>
          </view>
          <view class="card phone">
            <view class="form-item">
              <uv-form-item prop="phone" :customStyle="formItemStyle">
                <view class="flex row">
                  <view class="form-item-label">联系电话</view>
                  <view class="form-item-content">
                    <formInput v-model="form.phone" inputAlign="right"></formInput>
                  </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 productCard from './productCard.vue'
  import formInput from '@/pages_order/components/formInput.vue'
  import formTextarea from '@/pages_order/components/formTextarea.vue'
  import formUpload from '@/pages_order/components/formUpload.vue'

  export default {
    components: {
      productCard,
      formInput,
      formTextarea,
      formUpload,
    },
    data() {
      return {
        id: null,
        typeOptions: [
          {
            id: '001',
            label: '退货退款',
            value: 0,
          },
          {
            id: '002',
            label: '换货',
            value: 1,
          },
          {
            id: '003',
            label: '其他',
            value: 2,
          },
        ],
        form: {
          type: null,
          reason: null,
          num: 1,
          price: null,
          images: [],
          phone: null,
          remark: null,
        },
        rules: {
          'reason': {
            type: 'string',
            required: true,
            message: '请输入申请原因',
          },
          'num': {
            type: 'number',
            required: true,
            message: '请输入退货数量',
          },
          'amount': {
            type: 'number',
            required: true,
            message: '请输入申请金额（元）',
          },
          'phone': {
            type: 'string',
            required: true,
            message: '联系电话',
          },
          'remark': {
            type: 'string',
            required: true,
            message: '请输入备注',
          },
        },
        formItemStyle: { padding: 0 },
      }
    },
    computed: {
			...mapState(['configList', 'userInfo', 'applyServiceProduct']),
      typeDesc() {
        const type = this.form.type
        return this.typeOptions.find(item => item.value === type)?.label
      },
    },
    onLoad(arg) {
      const { id, type } = arg

      this.id = id
      this.form.num = this.applyServiceProduct.length
      this.form.type = this.typeOptions.find(item => item.value == type)?.value
    },
    methods: {
      async onSubmit() {
        try {
          await this.$refs.form.validate()

          const {
            type,
            reason,
            num,
            price,
            images,
            phone,
            remark,
          } = this.form

          let params = {
            orderId: this.id,
            productId: this.applyServiceProduct.map(item => item.productId).join(','),
            type,
          }

          if (type == 2) { // 其他
            params.remark = remark
          } else { // 退货退款, 换货
            params.reason = reason
            params.num = num
            params.price = price
            params.image = images.join(',')
            params.phone = phone
          }

          await this.$fetch('afterSaleOrder', params)
          
					uni.showToast({
						icon: 'success',
						title: '提交成功',
					});
          
          setTimeout(() => {
            this.$utils.navigateBack()
          }, 800)

        } 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 242rpx 32rpx;
	}

  .product {
    & + & {
      margin-top: 32rpx;
    }
  }
  
  .card {
    margin-top: 40rpx;
    padding: 32rpx;
    background: #FAFAFF;
    border: 2rpx solid #FFFFFF;
    border-radius: 32rpx;

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

    &.phone {
      padding-top: 28rpx;
      padding-bottom: 28rpx;
    }
  }

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

      &:last-child {
        border: none;
      }

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

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

        &.light {
          color: #8B8B8B;
        }
      }

      &-content {
        &.input {
          padding: 6rpx 0;
        }

        &.upload,
        &.count {
          padding: 8rpx 0;
        }
      }

      .type {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        line-height: 1.4;
        color: #393939;
      }
    }
  }

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

  .bottom {
		position: fixed;
		left: 0;
		bottom: 0;
    z-index: 2;
    
		width: 100vw;
		// height: 200rpx;
		padding: 24rpx 40rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
		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>