|
@@ -10,45 +10,44 @@
|
|
|
</el-step>
|
|
|
</el-steps>
|
|
|
</div>
|
|
|
- <el-form label-width="auto">
|
|
|
- <el-form-item label="收货人">
|
|
|
- <el-input v-model="data.form.name" placeholder="请输入收货人名称" />
|
|
|
+ <el-form :model="data.form" :rules="data.rules" ref="form" label-width="auto">
|
|
|
+ <el-form-item label="买家昵称" prop="buyerNick">
|
|
|
+ <el-input v-model="data.form.buyerNick" placeholder="请输入买家昵称" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="手机号">
|
|
|
+ <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 label="收货地址">
|
|
|
+ <el-form-item label="收货地址" prop="provinceName">
|
|
|
<div class="address">
|
|
|
- <el-select v-model="data.form.province" placeholder="省">
|
|
|
- <el-option v-for="item in addressOptions" :key="item.id" :value="item.id" :label="item.name" />
|
|
|
+ <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>
|
|
|
<span>/</span>
|
|
|
- <el-select v-model="data.form.city" placeholder="市">
|
|
|
- <el-option v-for="item in cityOptions" :key="item.id" :value="item.id" :label="item.name" />
|
|
|
+ <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>
|
|
|
<span>/</span>
|
|
|
- <el-select v-model="data.form.area" placeholder="区">
|
|
|
- <el-option v-for="item in areaOptions" :key="item.id" :value="item.id" :label="item.name" />
|
|
|
+ <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>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="详细地址">
|
|
|
- <el-input v-model="data.form.detailAddress" type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入详细地址" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="物流公司">
|
|
|
- <el-input v-model="data.form.logisticsName" placeholder="请输入物流公司" />
|
|
|
+ <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="快递单号">
|
|
|
- <el-input v-model="data.form.logisticsCode" placeholder="请输入快递单号" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="产品问题">
|
|
|
- <el-input v-model="data.form.buyerMessage" type="textarea" :autosize="{ minRows: 5 }" placeholder="请输入产品问题" />
|
|
|
+ <el-form-item label="数量" prop="quantity">
|
|
|
+ <el-input-number v-model="data.form.quantity" :min="0" />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
+ <el-button class="submit" type="primary" round @click="getSubmit">提交</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { submit } from '@/api/mobile/apply'
|
|
|
import { useAddress } from '@/hooks/index'
|
|
|
const { addressOptions, getAddress } = useAddress()
|
|
|
|
|
@@ -56,74 +55,88 @@ const { proxy } = getCurrentInstance()
|
|
|
|
|
|
const data = reactive({
|
|
|
// 表单
|
|
|
- form: {},
|
|
|
+ form: {
|
|
|
+ shopCode: "A100001",
|
|
|
+ quantity: 0,
|
|
|
+ oid: "",
|
|
|
+ outSkuId: 564
|
|
|
+ },
|
|
|
// 进度条
|
|
|
steps: ['待质检', '质检完成', '待维修', '维修中', '维修完成', '已发货'],
|
|
|
- options: [{
|
|
|
- value: 1,
|
|
|
- label: '韵达快递'
|
|
|
- }, {
|
|
|
- value: 2,
|
|
|
- label: '京东快递'
|
|
|
- }, {
|
|
|
- value: 1,
|
|
|
- label: '圆通快递'
|
|
|
- }, {
|
|
|
- value: 1,
|
|
|
- label: '顺丰快递'
|
|
|
- }],
|
|
|
- // 例图
|
|
|
- imgUrl: [new URL(`@/assets/images/example.jpg`, import.meta.url).href],
|
|
|
+ // 校验
|
|
|
+ rules: {
|
|
|
+ buyerNick: [{ required: true, message: '请输入买家昵称', trigger: 'blur' }],
|
|
|
+ contact: [{ required: true, message: '请输入收货人姓名', trigger: 'blur' }],
|
|
|
+ mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
|
|
|
+ provinceName: [{ required: true, message: '请选择收货地址', trigger: 'blur' }],
|
|
|
+ address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
|
|
|
+ quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
// 计算属性
|
|
|
const cityOptions = computed(() => {
|
|
|
- return data.form.province ? addressOptions.value.find(i => i.id === data.form.province).childList : []
|
|
|
+ return data.form.provinceName ? addressOptions.value.find(i => i.name == data.form.provinceName).childList : []
|
|
|
})
|
|
|
|
|
|
const areaOptions = computed(() => {
|
|
|
- return data.form.city ? cityOptions.value.find(i => i.id === data.form.city).childList : []
|
|
|
+ return data.form.cityName ? cityOptions.value.find(i => i.name == data.form.cityName).childList : []
|
|
|
})
|
|
|
|
|
|
-
|
|
|
-// 维修申请 或 换新申请
|
|
|
-const type = proxy.$route.query.type
|
|
|
-
|
|
|
// 提交
|
|
|
const getSubmit = () => {
|
|
|
- submit(data.form).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
-
|
|
|
+ proxy.$refs.form.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ submit({ exchangeApplyOrderList: [data.form] }).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ proxy.$modal.msgSuccess('提交成功!')
|
|
|
+ proxy.$refs.form.resetFields()
|
|
|
+ data.form = {
|
|
|
+ shopCode: "A100001",
|
|
|
+ quantity: 0,
|
|
|
+ oid: "",
|
|
|
+ outSkuId: 564
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- document.title = type == 1 ? '维修申请' : '换新申请'
|
|
|
- console.log(data.form);
|
|
|
+ document.title = '换新申请'
|
|
|
getAddress()
|
|
|
- // data.form = type == 1 ? {
|
|
|
-
|
|
|
- // } : {
|
|
|
- // shopCode: "A1000002",
|
|
|
- // sourcePlatformCode: "MUZEN",
|
|
|
- // sourcePlatformName: "猫王",
|
|
|
- // buyerMessage: undefined,
|
|
|
- // logisticsCode: undefined,
|
|
|
- // logisticsName: undefined,
|
|
|
- // receiverInfo: {
|
|
|
- // name: undefined,
|
|
|
- // mobile: undefined,
|
|
|
- // province: undefined,
|
|
|
- // city: undefined,
|
|
|
- // area: undefined,
|
|
|
- // detailAddress: undefined
|
|
|
- // }
|
|
|
- // }
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+:deep(.el-steps) {
|
|
|
+ .el-step__head {
|
|
|
+ margin-left: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-step__title {
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-step__icon {
|
|
|
+ width: 20px;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-step__main {
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.spot {
|
|
|
+ transform: scale(3);
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+
|
|
|
.el-form {
|
|
|
.info {
|
|
|
line-height: 1;
|
|
@@ -147,28 +160,8 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.spot {
|
|
|
- transform: scale(3);
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.el-steps) {
|
|
|
- .el-step__head {
|
|
|
- margin-left: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .el-step__title {
|
|
|
- font-size: 10px;
|
|
|
- line-height: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .el-step__icon {
|
|
|
- width: 20px;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
-
|
|
|
- .el-step__main {
|
|
|
- margin-top: 30px;
|
|
|
- }
|
|
|
+.submit {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
}
|
|
|
</style>
|