aftermarket-h5/src/views/home/submit.vue

<template>
  <van-form @submit="onSubmit" style="margin-top: 10px; background: #fff">
    <van-cell-group inset>
      <van-field
        v-model="formData.companyName"
        label-align="top"
        name="用户名"
        label="公司名称"
        placeholder="请填写公司名称"
        :rules="[{ required: true, message: '请填写公司名称' }]"
      />
      <van-field
        v-model="formData.customerName"
        label-align="top"
        name="联系人"
        label="联系人"
        placeholder="请填写姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="formData.phone"
        label-align="top"
        name="联系电话"
        label="联系电话"
        placeholder="请填写手机号"
        :rules="[{ required: true, message: '请填写手机号' }, {
  // 自定义校验规则
  validator: (value) => {
    return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
  },
  message: '请输入正确格式的手机号码',
  trigger: 'onBlur',
}]"
      />
      <van-field
        v-model="formData.cameraSnCode"
        label-align="top"
        name="产品SN码"
        label="产品SN码"
        placeholder="请填写下划线后的数字母组合"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="formData.faultMsg"
        label-align="top"
        name="故障描述"
        label="故障描述"
        rows="2"
        autosize
        type="textarea"
        maxlength="500"
        show-word-limit
        placeholder="请具体描述故障现象，相关操作等。"
      />
      <van-field name="uploader" label="文件上传" label-align="top">
        <template #input>
          <van-uploader v-model="formData.faultImg" :before-read="beforeRead" :after-read="clzpAfterRead" />
        </template>
      </van-field>
      <van-field name="radio" label="送修方式" label-align="top">
        <template #input>
          <van-radio-group v-model="formData.sendType" direction="horizontal">
            <van-radio :name="0">前台送修</van-radio>
            <van-radio :name="1">快递寄送</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-if="formData.sendType == 1"
        v-model="formData.sendTrackingNum"
        label-align="top"
        name="快递单号"
        label="快递单号"
        placeholder="请填写快递单号"
        :rules="[{ required: true, message: '请填写快递单号' }]"
      />

      <van-field name="radio" label="取回方式" label-align="top">
        <template #input>
          <van-radio-group v-model="formData.getType" direction="horizontal">
            <van-radio :name="0">前台送修</van-radio>
            <van-radio :name="1">快递寄送</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-if="formData.getType == 1"
        v-model="formData.getAddress"
        label-align="top"
        name="收件地址"
        label="收件地址"
        placeholder="请填写收件地址"
        :rules="[{ required: true, message: '请填写收件地址' }]"
      />
      <van-field
        v-if="formData.getType == 1"
        v-model="formData.getAddrName"
        label-align="top"
        name="收件人"
        label="收件人"
        placeholder="请填写收件人"
        :rules="[{ required: true, message: '请填写收件人' }]"
      />
      <van-field
        v-if="formData.getType == 1"
        v-model="formData.getAddrPhone"
        label-align="top"
        name="收件人电话"
        label="收件人电话"
        placeholder="请填写收件人电话"
        :rules="[{ required: true, message: '请填写收件人电话' }, {
  // 自定义校验规则
  validator: (value) => {
    return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
  },
  message: '请输入正确格式的手机号码',
  trigger: 'onBlur',
}]"
      />

      <van-field
        v-model="formData.message"
        label-align="top"
        rows="2"
        autosize
        label="留言"
        type="textarea"
        maxlength="500"
        placeholder="请输入留言"
        show-word-limit
      />
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block color="#00B3EC" type="primary" native-type="submit"> 提交 </van-button>
    </div>
  </van-form>
</template>
  
<script lang="ts" setup name="HomeSubmit">
import { computed, reactive, unref } from 'vue';
import { useUserStore } from '/@/store/modules/user';
import { showToast, showSuccessToast  } from 'vant';
import axios from 'axios';
// import useAxiosApi from '/@/utils/useAxiosApi';
// import { Toast } from '@nutui/nutui';
import { cameraRepair } from '/@/api';
// import { setLang } from '/@/i18n';
// import { useI18n } from 'vue-i18n';
const emit = defineEmits(['setActive'])
// const { locale } = useI18n();
const userStore = useUserStore();
const wxOpenId = computed(() => {
  return userStore.getWxOpenId;
});
const formData = reactive({
  companyName: '',
  customerName: '',
  phone: '',
  cameraSnCode: '',
  faultMsg: '',
  faultImg: <any>[],
  sendType: 0,
  sendTrackingNum: '',
  getAddress: '',
  getAddrName: '',
  getAddrPhone: '',
  getType: 0,
  message:'',
  wxOpenId: wxOpenId.value,
});
async function onSubmit() {
  // return new Promise((resolve) => {
  let apiData = {
    ...formData,
    faultImg:formData.faultImg.map(ele => ele.url)
  }
  const { response } = await cameraRepair(apiData);
  let data = unref(response)
  console.log('onSubmit', formData, data);
  if(data.code == 200){
    showSuccessToast('提交成功')
    emit('setActive',1)
  }

}
//校验图片的格式
function beforeRead(file) {
  if (!/(jpg|jpeg|png|JPG|PNG)/i.test(file.type)) {
    showToast('请上传正确格式的图片');
    return false;
  }
  return true;
}
//照片上传事件方法
function clzpAfterRead(file) {
  // 上传状态提示开启
  file.status = 'uploading';
  file.message = '上传中...';
  // 创建一个空对象实例
  let formData = new FormData();
  // 调用append()方法添加数据
  formData.append('file', file.file);
  axios({
    url:'/service/sale/upload/file',
    method: 'POST',
    data:formData,
    headers:{
      'Content-Type': 'multipart/form-data'
    }
  }).then(res => {
    let { data } = res
    if (data.code == 200) {
      // 上传状态提示关闭
      file.url = data.data
      file.status = 'done';
      showToast('上传成功！');
    }
  });
}
</script>
  <style lang="scss">
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  font-size: 40px;
  img {
    width: 90px;
    height: 90px;
  }
}

.intro-header {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.supportList {
  margin: 0 16px;

  .nut-cell-group__title {
    margin-top: 30px;
  }
  .nut-icon {
    color: green;
  }
}

.btn-wrap {
  margin: 20px;
}
.btn-confirm {
  @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
}
</style>