ohplay_public/src/views/mobile/repair.vue

<template>
  <div class='app-container' v-loading="loading">
    <el-form :model="data.form" :rules="data.rules" ref="form" label-width="auto">
      <el-form-item label="收货人" prop="receiverName">
        <el-input v-model="data.form.receiverName" placeholder="请输入收货人" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="data.form.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item class="address" label="收货地址" required>
        <el-form-item prop="province">
          <el-select v-model="data.form.province" placeholder="省">
            <el-option v-for="item in addressOptions" :key="item.id" :value="item.name" :label="item.name" />
          </el-select>
        </el-form-item>
        <span>/</span>
        <el-form-item prop="city">
          <el-select v-model="data.form.city" placeholder="市">
            <el-option v-for="item in cityOptions" :key="item.id" :value="item.name" :label="item.name" />
          </el-select>
        </el-form-item>
        <span>/</span>
        <el-form-item>
          <el-select v-model="data.form.district" placeholder="区">
            <el-option v-for="item in areaOptions" :key="item.id" :value="item.name" :label="item.name" />
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="data.form.address" type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item label="物流公司" prop="logisticsName">
        <el-select v-model="data.form.logisticsName">
          <el-option v-for="(item, index) in expressOptions" :key="index" :value="index" :label="item"  />  
        </el-select>
      </el-form-item>
      <el-form-item label="快递单号" prop="logisticsCode">
        <el-input v-model="data.form.logisticsCode" placeholder="请输入快递单号（示例：SF）" />
      </el-form-item>
      <el-form-item label="产品型号" prop="specCode">
        <el-select v-model="data.form.specCode" filterable remote :remote-method="remoteMethod" placeholder="请选择产品型号">
          <el-option v-for="item in goodsOptions" :key="item.goodsId" :value="item.goodsId" :label="item.goodsName" />
        </el-select>
      </el-form-item>
      <el-form-item label="维修类型" prop="typeOfRepair">
        <el-select v-model="data.form.typeOfRepair" placeholder="请选择维修类型">
          <el-option v-for="item in repairTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="维修数量" prop="repairQuantity">
        <el-input-number v-model="data.form.repairQuantity" :min="1" />
      </el-form-item>
      <el-form-item label="故障描述" prop="faultDescription">
        <el-input v-model="data.form.faultDescription" type="textarea" :autosize="{ minRows: 5 }"
          placeholder="请输入故障描述" />
      </el-form-item>
      <el-form-item label="购买渠道" prop="shopCode">
        <el-select v-model="data.form.shopCode" prop="shopCode" placeholder="请选择购买渠道" @change="handleChangeShopCode">
          <el-option v-for="item in storeOptions" :key="item.storeCode" :value="item.storeCode"
            :label="item.storeName" />
        </el-select>
      </el-form-item>
      <el-form-item label="购买凭证" prop="proofPurchase">
        <CustomUpload list-type="picture-card" :src="data.form.proofPurchase" @upload="upload" />
        <div>
          <div>示例：</div>
          <el-image :src="data.img[0]" :preview-src-list="data.img" />
        </div>
      </el-form-item>
    </el-form>
    <el-button class="submit" type="primary" round @click="getSubmit">提交</el-button>
  </div>
</template>

<script setup>
import Steps from '@/components/Steps'
import { submit } from '@/api/mobile/repair'
import { useAddress, useStore, useGoods, useExpress, useCommon } from '@/hooks/index'
const { addressOptions, getAddress } = useAddress()
const { storeOptions, getStore } = useStore()
const { goodsForm, goodsOptions, getGoods } = useGoods()
const { expressOptions, getExpress } = useExpress()
const { repairTypeOptions } = useCommon()
const { proxy } = getCurrentInstance()

document.title = '维修申请'

const data = reactive({
  form: {
    province: "",
    city: "",
    district: "",
    repairQuantity: 1
  },
  // 校验
  rules: {
    shopCode: [{ required: true, message: '请选择购买渠道', trigger: 'change' }],
    receiverName: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
    mobile: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    province: [{ required: true, message: '请选择省', trigger: 'change' }],
    city: [{ required: true, message: '请选择市', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    typeOfRepair: [{ required: true, message: '请选择维修类型', trigger: 'change' }],
    repairQuantity: [{ required: true, message: '请输入维修数量', trigger: 'blur' }],
    specCode: [{ required: true, message: '请选择产品型号', trigger: 'change' }],
    faultDescription: [{ required: true, message: '请输入故障描述', trigger: 'blur' }],
    logisticsName: [{ required: true, message: '请输入物流公司', trigger: 'blur' }],
    logisticsCode: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
    proofPurchase: [{ required: true, message: '请上传购买凭证', trigger: 'change' }]
  },
  // 购买凭证模板
  img: [new URL(`../../assets/images/example.jpg`, import.meta.url).href]
})

// 遮罩层
const loading = ref(false)

// 计算属性
const cityOptions = computed(() => {
  data.form.city = ""
  data.form.district = ""
  return data.form.province ? addressOptions.value.find(i => i.name == data.form.province).childList : []
})

const areaOptions = computed(() => {
  data.form.district = ""
  return data.form.city ? cityOptions.value.find(i => i.name == data.form.city).childList : []
})

// 搜索产品型号
const remoteMethod = (e) => {
  goodsForm.value.goodsName = e
  goodsForm.value.goodsType = 2
  getGoods()
}

// 上传图片
const upload = (file) => {
  data.form.proofPurchase = file.data.url
}

// 购买渠道
const handleChangeShopCode = (e) => {
  data.form.shopNick = storeOptions.value.find(i => i.storeCode == e).storeName
}

// 提交
const getSubmit = () => {
  proxy.$refs.form.validate((valid) => {
    if (valid) {
      loading.value = true
      submit(data.form).then(res => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess('提交成功！')
          proxy.$refs.form.resetFields()
          data.form = {
            province: "",
            city: "",
            district: "",
            repairQuantity: 1
          }
          loading.value = false
        }
      })
    } else {
      return false
    }
  })
}

getAddress()
getStore()
getExpress()
</script>

<style lang="scss" scoped>
.el-form {
  .el-image {
    width: 146px;
  }

  .address {
    width: 100%;
    display: flex;
    align-items: center;

    .el-form-item {
      width: 100%;
      flex: 1;
    }

    span {
      margin: 0 4px
    }
  }
}

.submit {
  width: 100%;
  height: 40px;
}
</style>