You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
296 lines
10 KiB
296 lines
10 KiB
<script setup lang="ts"> |
|
import { |
|
getMerCategoryListApi, |
|
getMerSettledApplyApi, |
|
getMerTypeListApi, |
|
sendSettledCodeApi, |
|
} from '~/server/merchantApi' |
|
import {ref, reactive, watch} from 'vue' |
|
import type { FormInstance, FormRules } from 'element-plus' |
|
|
|
// 申请信息 |
|
const useStore = useAppStore() |
|
const applicationDatas = reactive<ApplicationDataQuery>(<ApplicationDataQuery>useStore.applicationData) |
|
|
|
//获取浏览器值 |
|
const route = useRoute() |
|
const type = ref<string>(<string>route.query.type) //type为0是新增， |
|
|
|
//表单数据 |
|
const merchantForm = reactive<FormMerSettledApply>(type.value ==='0'?Object.assign(merchantFormDefault()):applicationDatas) |
|
|
|
//回显图片数据 |
|
const pictureList = ref<ItemObject[]>([]) |
|
//营业执照图片 |
|
const picList = ref<string[]>(merchantForm.qualificationPicture?JSON.parse(merchantForm.qualificationPicture):[]) |
|
|
|
//获取回显图片列表 |
|
const getPicList = ()=>{ |
|
if(picList.value.length){ |
|
picList.value.map(item=>{ |
|
pictureList.value.push({ |
|
name: '', |
|
url:item |
|
}) |
|
}) |
|
}else{ |
|
pictureList.value = [] |
|
} |
|
} |
|
getPicList() |
|
|
|
watch( |
|
() => route.query.type, |
|
(newValue) => { |
|
Object.assign(merchantForm, newValue ==='0'?Object.assign(merchantFormDefault()):applicationDatas) |
|
picList.value = merchantForm.qualificationPicture?JSON.parse(merchantForm.qualificationPicture):[] |
|
getPicList() |
|
|
|
}, |
|
) |
|
|
|
|
|
|
|
const loading = ref<boolean>(false) |
|
|
|
//商户分类 |
|
const { data: classOptions } = useAsyncData(async () => getMerCategoryListApi()) |
|
|
|
//商户类型 |
|
const { data: typeOptions } = useAsyncData(async () => getMerTypeListApi()) |
|
|
|
//店铺类型选择 |
|
const merchantTypeInfo = ref<string>('') // 店铺类型说明 |
|
const onSelectedType = (id: number) => { |
|
let obj = {} |
|
obj = typeOptions.value.find((item: any) => { |
|
return item.id === id |
|
}) |
|
merchantTypeInfo.value = obj.info // 店铺类型说明 |
|
} |
|
|
|
//商户分类选择 |
|
const onSelectedCategory = (id: number) => { |
|
let obj = {} |
|
obj = classOptions.value.find((item: any) => { |
|
return item.id === id |
|
}) |
|
merchantForm.handlingFee = obj.handlingFee |
|
} |
|
|
|
|
|
/** |
|
* 获取验证码 |
|
*/ |
|
const verifyRef = shallowRef() |
|
const handleCode = () => { |
|
if (!merchantForm.phone) return feedback.msgWarning('请填写手机号') |
|
verifyRef.value.show() |
|
} |
|
|
|
/** |
|
* 图形验证成功后的回调 |
|
*/ |
|
const { disabled, text, handleCodeSend } = useSmsCode() |
|
const handlerOnVerSuccess = async (e: CaptchaVerification) => { |
|
const res = await sendSettledCodeApi({ phone: merchantForm.phone }) |
|
if (res) { |
|
feedback.msgSuccess('发送成功') |
|
handleCodeSend() |
|
} |
|
} |
|
|
|
/** |
|
* 图片上传成功获取数据 |
|
*/ |
|
import {UploadImageData, CaptchaVerification, ItemObject} from '~/types/global' |
|
const handleComplete = (res: UploadImageData) => { |
|
picList.value.push(res.url) |
|
} |
|
|
|
//删除图片成功回调 |
|
const handleRemoveComplete =(idx: number) =>{ |
|
picList.value.splice(idx,1) |
|
} |
|
|
|
/** |
|
* 表单提交 |
|
*/ |
|
import { PhoneReg } from '~/utils/validate' |
|
import feedback from '~/utils/feedback' |
|
import {ApplicationDataQuery, FormMerSettledApply} from '~/types/merchant' |
|
import {merchantFormDefault} from "~/pages/merchant/defaultMerchant"; |
|
import {useAppStore} from "~/stores/app"; |
|
const isAgreement = ref<boolean>(false) |
|
const merchantFormRef = ref<FormInstance>() |
|
const successInfo = reactive({ |
|
title: '恭喜您！已成功提交申请', |
|
tips: '我们会尽快确认您的入驻申请，请留意审核状态', |
|
url: '/merchant/application_record', |
|
}) |
|
|
|
// 手机号码验证 |
|
const checkPhone = (rule: any, value: any, callback: any) => { |
|
if (!value) { |
|
return callback(new Error('请输入手机号码')) |
|
} |
|
setTimeout(() => { |
|
if (PhoneReg.test(value)) { |
|
callback() |
|
} else { |
|
callback(new Error('请输入有效的电话号码')) |
|
} |
|
}, 150) |
|
} |
|
const rules: FormRules = { |
|
realName: [{ required: true, message: '请填写商户姓名', trigger: 'blur' }], |
|
name: [{ required: true, message: '请填写商户名称', trigger: 'blur' }], |
|
captcha: [{ required: true, message: '请填写验证码', trigger: 'blur' }], |
|
categoryId: [{ required: true, message: '请选择商户分类', trigger: 'change' }], |
|
typeId: [{ required: true, message: '请选择商户类型', trigger: 'change' }], |
|
phone: [{ required: true, validator: checkPhone, trigger: 'blur' }], |
|
} |
|
const successDialogRef = shallowRef() //成功弹窗 |
|
const btnloading = ref<boolean>(false) |
|
const submitForm = async (formEl: FormInstance | undefined) => { |
|
if (!formEl) return |
|
await formEl.validate(async(valid, fields) => { |
|
if (valid) { |
|
if (picList.value.length === 0) return feedback.msgWarning('请上传营业执照') |
|
if (!isAgreement.value) return feedback.msgWarning('请先阅读并勾选同意协议') |
|
merchantForm.qualificationPicture = JSON.stringify(picList.value) |
|
try { |
|
btnloading.value = true |
|
await getMerSettledApplyApi(merchantForm) |
|
btnloading.value = false |
|
successDialogRef.value.open() |
|
}catch (e) { |
|
btnloading.value = false |
|
} |
|
|
|
} else { |
|
console.log('error submit!', fields) |
|
} |
|
}) |
|
} |
|
</script> |
|
|
|
<template> |
|
<div class="wrapper_1200" v-loading="loading"> |
|
<page-header title="商户入驻申请"></page-header> |
|
<div class="w-100% borRadius bg-#FFF pt-50px pb-20px pl-170px pr-180px relative"> |
|
<nuxt-link :to="{ path: '/merchant/application_record' }"> |
|
<div class="absolute text-14px font-color right-20px top-30px"> |
|
<span class="iconfont icon-shenqingjilu"></span> 申请记录 |
|
</div> |
|
</nuxt-link> |
|
<div class="fontColor333 text-24px mb50px text-center">入驻申请</div> |
|
<el-form ref="merchantFormRef" :model="merchantForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="large"> |
|
<el-form-item label="商户名称" prop="name"> |
|
<el-input placeholder="填写商户名称" v-model="merchantForm.name" maxlength="16"></el-input> |
|
</el-form-item> |
|
<el-form-item label="商户分类" prop="categoryId"> |
|
<el-select style="width: 100%" v-model="merchantForm.categoryId" placeholder="选择商户分类" @change="onSelectedCategory($event)"> |
|
<el-option v-for="item in classOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="商户类型" prop="typeId"> |
|
<el-select |
|
style="width: 100%" |
|
v-model="merchantForm.typeId" |
|
@change="onSelectedType($event)" |
|
placeholder="选择商户类型" |
|
> |
|
<el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option> |
|
</el-select> |
|
</el-form-item> |
|
<el-form-item label="关键字" prop="keywords"> |
|
<el-input placeholder="填写关键字" type="textarea" v-model="merchantForm.keywords"></el-input> |
|
</el-form-item> |
|
<el-form-item label="营业执照" required> |
|
<div> |
|
<div> |
|
<span class="text-12px text-#666">请上传营业执照及行业相关资质证明图片</span> |
|
<span class="text-12px font-color" v-show="merchantTypeInfo">{{ '（ ' + merchantTypeInfo + ' ）' }}</span> |
|
</div> |
|
<div class="text-12px text-#999 mb-20px lh-12px">(图片最多可上传5张，格式支持JPG、PNG、JPEG)</div> |
|
<upload-from @handleComplete="handleComplete" :pictureList="pictureList" @handleRemoveComplete="handleRemoveComplete"></upload-from> |
|
</div> |
|
</el-form-item> |
|
<el-form-item label="商户姓名" prop="realName"> |
|
<el-input placeholder="填写商户姓名" v-model="merchantForm.realName"></el-input> |
|
</el-form-item> |
|
<el-form-item label="联系电话" prop="phone"> |
|
<el-input placeholder="填写联系电话" v-model="merchantForm.phone"></el-input> |
|
</el-form-item> |
|
<el-form-item label="验证码" prop="captcha"> |
|
<div class="w-100% acea-row row-between-wrapper"> |
|
<el-input type="text" auto-complete="on" placeholder="请输入验证码" v-model="merchantForm.captcha"> |
|
<template #suffix> |
|
<el-button text |
|
class="code font-color" |
|
:disabled="disabled" |
|
:class="disabled === true ? 'on' : ''" |
|
@click="handleCode" |
|
> |
|
{{ text }} |
|
</el-button> |
|
</template> |
|
</el-input> |
|
</div> |
|
</el-form-item> |
|
<el-form-item> |
|
<div class="checkbox-wrapper item_protocol acea-row row-middle"> |
|
<label class="well-check acea-row row-middle"> |
|
<input type="checkbox" name="" value="" :checked="isAgreement" @click="isAgreement = !isAgreement" /> |
|
<i class="icon cursors mr-7px"></i> |
|
<span>我已阅读并同意</span> |
|
</label> |
|
<nuxt-link |
|
:to="{ path: `/users/agreement_rules`, query: { type: 'merincomminginfo' } }" |
|
target="_blank" |
|
class="show_protocol font-color" |
|
>《商户入驻协议》 |
|
</nuxt-link> |
|
</div> |
|
</el-form-item> |
|
<el-form-item> |
|
<el-button type="success" :loading="btnloading" round color="#E93323" @click="submitForm(merchantFormRef)">提交申请</el-button> |
|
</el-form-item> |
|
</el-form> |
|
</div> |
|
<success-dialog ref="successDialogRef" :successInfo="successInfo"></success-dialog> |
|
<VerifitionVerify ref="verifyRef" :phone="merchantForm.phone" @success="handlerOnVerSuccess"></VerifitionVerify> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
@import '@/assets/scss/checkbox.scss'; |
|
:deep(.el-dialog__body){ |
|
img{ |
|
width: 100%; |
|
} |
|
} |
|
:deep(.el-upload), :deep(.el-upload-list__item){ |
|
width: 138px !important; |
|
height: 138px !important; |
|
} |
|
:deep(.--el-color-primary) { |
|
color: #e93323 !important; |
|
} |
|
.code { |
|
height: 96%; |
|
border: 0; |
|
background-color: #fff; |
|
color: #e93323 !important; |
|
|
|
img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
&.on { |
|
color: #ccc !important; |
|
} |
|
} |
|
</style>
|
|
|