ohplay_public/src/views/mobile/replace.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="contact">
        <el-input v-model="data.form.contact" 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="provinceName">
          <el-select v-model="data.form.provinceName" 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="cityName">
          <el-select v-model="data.form.cityName" 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.areaName" 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="buyerExpressName">
        <el-input v-model="data.form.logisticsName" placeholder="请输入物流公司" />
      </el-form-item>
      <el-form-item label="快递单号" prop="buyerExpressNo">
        <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="quantity">
        <el-input-number v-model="data.form.quantity" :min="1" />
      </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/replace'
import { useAddress, useStore, useGoods } from '@/hooks/index'
const { addressOptions, getAddress } = useAddress()
const { storeOptions, getStore } = useStore()
const { goodsForm, goodsOptions, getGoods } = useGoods()
const { proxy } = getCurrentInstance()

document.title = '换新申请'

const data = reactive({
  // 表单
  form: {
    quantity: 1,
    oid: "",
    outSkuId: 564,
    provinceName: "",
    cityName: "",
    areaName: ""
  },
  // 校验
  rules: {
    shopCode: [{ required: true, message: '请选择购买渠道', trigger: 'change' }],
    contact: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
    mobile: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
    provinceName: [{ required: true, message: '请选择省', trigger: 'change' }],
    cityName: [{ required: true, message: '请选择市', trigger: 'change' }],
    address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
    logisticsName: [{ required: true, message: '请输入物流公司', trigger: 'blur' }],
    logisticsCode: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
    specCode: [{ required: true, message: '请选择产品型号', trigger: 'change' }],
    quantity: [{ 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.cityName = ""
  data.form.areaName = ""
  return data.form.provinceName ? addressOptions.value.find(i => i.name == data.form.provinceName).childList : []
})

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

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

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

watch(() => data.form.contact, (val) => {
  data.form.buyerNick = val
})

// 购买渠道
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({ exchangeApplyOrderList: [data.form] }).then(res => {
        if (res.code === 0) {
          proxy.$modal.msgSuccess('提交成功！')
          proxy.$refs.form.resetFields()
          data.form = {
            quantity: 1,
            oid: "",
            outSkuId: 564,
            provinceName: "",
            cityName: "",
            areaName: ""
          }
          loading.value = false
        }
      })
    } else {
      return false
    }
  })
}

getAddress()
getStore()
</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>