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

<template>
  <van-form @submit="onSubmit" style="margin-top: 10px; background: #fff">
    <van-cell-group style="margin: none" inset>
      <van-field
        v-model="formData.companyName"
        label-align="top"
        name="用户名"
        maxlength="50"
        label="公司名称"
        placeholder="请填写公司名称"
        :rules="[{ required: true, message: '请填写公司名称' }]"
      />
      <van-field
        v-model="formData.customerName"
        label-align="top"
        name="联系人"
        maxlength="50"
        label="联系人"
        placeholder="请填写姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="formData.phone"
        label-align="top"
        name="联系电话"
        maxlength="11"
        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码"
        maxlength="50"
        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
        :rules="[{ required: true, message: '请具体描述故障现象，相关操作等。' }]"
        placeholder="请具体描述故障现象，相关操作等。"
      />
      <van-field name="uploader" label="文件上传" label-align="top">
        <template #input>
          <van-uploader :max-count="5" 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" checked-color="#00B3EC">前台送修</van-radio>
            <van-radio :name="1" checked-color="#00B3EC">快递寄送</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-if="formData.sendType == 1"
        v-model="formData.sendTrackingNum"
        label-align="top"
        name="快递单号"
        maxlength="30"
        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" checked-color="#00B3EC">前台取回</van-radio>
            <van-radio :name="1" checked-color="#00B3EC">快递寄回</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-field
        v-if="formData.getType == 1"
        v-model="formData.getAddress"
        label-align="top"
        name="收件地址"
        maxlength="50"
        label="收件地址"
        placeholder="请填写收件地址"
        :rules="[{ required: true, message: '请填写收件地址' }]"
      />
      <van-field
        v-if="formData.getType == 1"
        v-model="formData.getAddrName"
        label-align="top"
        name="收件人"
        maxlength="50"
        label="收件人"
        placeholder="请填写收件人"
        :rules="[{ required: true, message: '请填写收件人' }]"
      />
      <van-field
        v-if="formData.getType == 1"
        v-model="formData.getAddrPhone"
        label-align="top"
        maxlength="11"
        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-cell-group>
    <div style="margin: 16px; background-color: #f5f5f5">
      <van-button 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: '',
});
async function onSubmit() {
  // return new Promise((resolve) => {
  let apiData = {
    ...formData,
    wxOpenId: wxOpenId.value,
    faultImg: formData.faultImg.map((ele) => ele.url),
  };
  const { response } = await cameraRepair(apiData);
  let data = unref(response);
  console.log('onSubmit', formData, data, 'wxOpenId', wxOpenId);
  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;
}
.page {
  .btn-confirm {
    // @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
  }
  .van-cell {
    padding: 20px 0;
  }
  .van-cell__title {
    margin-bottom: 10px;
  }
  .van-radio--horizontal {
    margin-right: 60px;
  }
}
</style>