front/website
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化官网页头UI设计；vite配置去掉devtool显示；优化开店UI交互和新接口数据补充

Browse Source
This commit is contained in:
mixtan 2025-05-20 17:46:37 +08:00
parent eae915838c
commit 0621e0224e
6 changed files with 397 additions and 309 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -22,6 +22,7 @@ declare module 'vue' {
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElRadio: typeof import('element-plus/es')['ElRadio'] ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow'] ElRow: typeof import('element-plus/es')['ElRow']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']

4
src/api/login.js
View File

@ -88,7 +88,7 @@ export function GetPostion (params){
params.isFilter = true params.isFilter = true
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
http({ http({
url:'/api/mobile/account/shop/merch/baidu/place/v2/suggestion', url:'/api/mobile/shop/merch/baidu/place/v2/suggestion',
method:'get', method:'get',
params, params,
}).then(res=>{ }).then(res=>{
@ -148,7 +148,7 @@ export function merchApply(params){
} }
console.log("这是数据",form); console.log("这是数据",form);
http({ http({
url:'/api/mobile/account/shop/merch/apply', url:'/api/mobile/shop/merch/apply',
method:'post', method:'post',
data:form data:form
}).then(res=>{ }).then(res=>{

17
src/assets/css/index.css
View File

@ -76,16 +76,16 @@ html{
width: 100%; width: 100%;
height: 70px; height: 70px;
background-color: #fff; background-color: #fff;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
z-index: 1000; z-index: 1000;
} }
.header-list .el-row{ .header-list .el-row{
width: 100%; width: 100%;
max-width: 1200px; max-width: 1440px;
margin: auto; margin: auto;
} }
.header-top { .header-top {
max-width: 1200px; max-width: 1440px;
width: 100%; width: 100%;
height: 70px; height: 70px;
margin: auto; margin: auto;
@ -101,8 +101,8 @@ html{
} }
.logo a { .logo a {
background: url("../../assets/image/xiaofa_logo.png"); background: url("../../assets/image/xiaofa_logo.png");
width: 60px; width: 48px;
height: 60px; height: 48px;
display: inline-block; display: inline-block;
background-size: contain; background-size: contain;
outline: none; outline: none;
@ -117,12 +117,12 @@ html{
} }
.header-menu { .header-menu {
display: flex; display: flex;
justify-content: center;
} }
.header-menu li { .header-menu li {
margin: 0 30px; margin: 0 30px;
list-style: none; list-style: none;
position: relative; position: relative;
color: #333;
} }
.header-menu a { .header-menu a {
@ -131,7 +131,6 @@ html{
} }
.header-menu li span { .header-menu li span {
font-size: 16px; font-size: 16px;
font-weight: 700;
} }
/* 伪元素添加下滑选中线 */ /* 伪元素添加下滑选中线 */
.header-menu li:hover span{ .header-menu li:hover span{
@ -157,6 +156,7 @@ html{
.header-right { .header-right {
display: flex; display: flex;
justify-content: flex-end;
} }
.header-right .start { .header-right .start {
@ -170,14 +170,11 @@ html{
margin-right: 20px; margin-right: 20px;
} }
.header-right .login .login-button { .header-right .login .login-button {
border-radius: 20px;
} }
.header-right .logout { .header-right .logout {
margin-right: 20px; margin-right: 20px;
} }
.header-right .logout .logout-button { .header-right .logout .logout-button {
background-color: red;
border-radius: 20px;
border: none; border: none;
} }

8
src/views/HeadMenu.vue
View File

@ -3,7 +3,7 @@
<div class="header-list"> <div class="header-list">
<el-row> <el-row>
<div class="header-top"> <div class="header-top">
<el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4"> <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
<div class="logo"> <div class="logo">
<router-link :to="{ name: 'index' }"></router-link> <router-link :to="{ name: 'index' }"></router-link>
</div> </div>
@ -19,18 +19,18 @@
<div class="header-right"> <div class="header-right">
<!-- 免费开店按钮始终可见 --> <!-- 免费开店按钮始终可见 -->
<div class="start"> <div class="start">
<el-button type="primary" size="default" @click="handleOpenStartPage" class="start-button"> <el-button @click="handleOpenStartPage">
免费开店 免费开店
</el-button> </el-button>
</div> </div>
<!-- 根据登录状态显示不同按钮 --> <!-- 根据登录状态显示不同按钮 -->
<div class="login"> <div class="login">
<el-button type="primary" size="default" @click="openLoginForm" class="login-button"> <el-button type="primary" @click="openLoginForm" class="login-button">
商家登录 商家登录
</el-button> </el-button>
</div> </div>
<div v-if="isLoggedIn" class="logout"> <div v-if="isLoggedIn" class="logout">
<el-button type="primary" size="default" @click="logout" class="logout-button"> <el-button type="danger" plain @click="logout" class="logout-button">
退出登录 退出登录
</el-button> </el-button>
</div> </div>

672
src/views/start/start.vue
View File

@ -1,17 +1,14 @@
<template> <template>
<div class="signUp-container"> <div class="signUp-container">
<h1>免费开店</h1>
<!-- 步骤条 --> <!-- 步骤条 -->
<div class="steps-container" style="margin: 20px;"> <div class="steps-container">
<el-steps :active="active" finish-status="success" align-center> <div class="tit" style="margin-bottom: 0">免费开店资料填写</div>
<el-step title="第一步:填写店铺信息" />
<el-step title="第二步:填写资质信息" />
<el-step title="第三步:填写收款信息" />
</el-steps>
</div> </div>
<div class="form-submit"> <div class="form-submit">
<el-form :model="applyFormData" :rules="rules" ref="formRef" label-width="120px" style="max-width: 600px"> <el-form :model="applyFormData" :rules="rules" ref="formRef" label-width="160px" style="max-width: 600px">
<div v-show="active === 1"> <div class="from_box">
<div class="tit">店铺信息</div>
<!-- 第一步表单内容 --> <!-- 第一步表单内容 -->
<el-form-item label="联系人" prop="contact_name"> <el-form-item label="联系人" prop="contact_name">
<el-input v-model="applyFormData.contact_name" placeholder="请输入联系人姓名" /> <el-input v-model="applyFormData.contact_name" placeholder="请输入联系人姓名" />
@ -20,43 +17,44 @@
<el-input v-model="applyFormData.login_mobile" placeholder="请输入联系人电话" disabled /> <el-input v-model="applyFormData.login_mobile" placeholder="请输入联系人电话" disabled />
</el-form-item> </el-form-item>
<el-form-item label="经营品类" prop="biz_category"> <el-form-item label="经营品类" prop="biz_category">
<el-cascader v-model="applyFormData.biz_category" :options="cascaderOptions" <el-cascader v-model="applyFormData.biz_category" :options="cascaderOptions" placeholder="请选择经营品类"
placeholder="请选择经营品类" :show-all-levels="false" @change="handleChangeBizCategory" :show-all-levels="false" @change="handleChangeBizCategory" clearable />
clearable />
</el-form-item> </el-form-item>
<el-form-item label="门店名称" prop="store_name"> <el-form-item label="门店名称" prop="store_name">
<el-input v-model="applyFormData.store_name" placeholder="请输入门店名称" /> <el-input v-model="applyFormData.store_name" placeholder="请输入门店名称" />
</el-form-item> </el-form-item>
<el-form-item label="地图地址" prop="map_address"> <el-form-item label="所在地区" prop="map_address">
<el-cascader v-model="applyFormData.map_address" :options="cascaderOptions2" <el-cascader v-model="applyFormData.map_address" :options="cascaderOptions2"
@change="handleChange" /> @change="handleChange" />
</el-form-item> </el-form-item>
<el-form-item label="搜索定位" prop="position"> <el-form-item label="详细地址" prop="store_address">
<el-autocomplete v-model="applyFormData.position" :fetch-suggestions="querySearch" <el-input v-model="applyFormData.store_address" placeholder="请输入详细地址" />
value-key="value" :options="autocompleteOptions" @select="handleSelect"> </el-form-item>
<el-form-item label="地图搜索" prop="position">
<el-autocomplete v-model="applyFormData.position" placeholder="搜索地址，更快填写"
:fetch-suggestions="querySearch" value-key="value" :options="autocompleteOptions"
@select="handleSelect">
<template #default="{ item }"> <template #default="{ item }">
<div class="auto-item" v-if="item"> <div class="auto-item" v-if="item">
<div> <div>
<p>{{ item.name }}</p> <!-- 显示名称 --> <p>{{ item.name }}</p>
<!-- 显示名称 -->
</div> </div>
<div> <div>
<span>{{ item.address }}</span> <!-- 显示地址 --> <span>{{ item.address }}</span>
<!-- 显示地址 -->
</div> </div>
</div> </div>
</template> </template>
</el-autocomplete> </el-autocomplete>
</el-form-item> </el-form-item>
<el-form-item label="详细地址" prop="store_address">
<el-input v-model="applyFormData.store_address" placeholder="请输入详细地址" />
</el-form-item>
<el-form-item :label="getLabel('front_facade_image', 1)" prop="front_facade_image"> <el-form-item :label="getLabel('front_facade_image', 1)" prop="front_facade_image">
<el-upload ref="uploadRef" multiple :limit="1" list-type="picture-card" :auto-upload="true" <el-upload ref="uploadRef" multiple :limit="1" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.front_facade_image" :on-remove="(file, fileList) => handleRemove(file, fileList, 'front_facade_image')
:on-remove="(file, fileList) => handleRemove(file, fileList, 'front_facade_image')" " :on-success="(response, file, fileList) =>
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'front_facade_image')" handleUploadSuccess(response, file, fileList, 'front_facade_image')
:on-error="handleUploadError" :on-exceed="handleExceed" :before-upload="beforeUpload" " :on-error="handleUploadError" :on-exceed="handleExceed" :before-upload="beforeUpload" :action="uploadUrl"
:action="uploadUrl" name="upfile" name="upfile" :class="{ 'upload-hidden': isUploadHidden('front_facade_image') }">
:class="{ 'upload-hidden': isUploadHidden('front_facade_image') }">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<Plus /> <Plus />
</el-icon> </el-icon>
@ -64,26 +62,54 @@
</el-form-item> </el-form-item>
<el-form-item :label="getLabel('environment_image', 1)" prop="environment_image"> <el-form-item :label="getLabel('environment_image', 1)" prop="environment_image">
<el-upload ref="uploadRef" multiple :limit="1" list-type="picture-card" :auto-upload="true" <el-upload ref="uploadRef" multiple :limit="1" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.environment_image" v-model="applyFormData.environment_image" :on-remove="(file, fileList) => handleRemove(file, fileList, 'environment_image')
:on-remove="(file, fileList) => handleRemove(file, fileList, 'environment_image')" " :on-success="(response, file, fileList) =>
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'environment_image')" handleUploadSuccess(response, file, fileList, 'environment_image')
:on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" " :on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" name="upfile"
name="upfile" :class="{ 'upload-hidden': isUploadHidden('environment_image') }"> :class="{ 'upload-hidden': isUploadHidden('environment_image') }">
<el-icon> <el-icon>
<Plus /> <Plus />
</el-icon> </el-icon>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
</div> </div>
<div v-show="active === 2">
<el-form-item label="选择身份" prop="entity_type"> <div class="from_box">
<div class="tit">营业信息</div>
<el-form-item label="主体类型" prop="entity_type">
<el-radio-group v-model="applyFormData.entity_type" @change="clearOtherFields"> <el-radio-group v-model="applyFormData.entity_type" @change="clearOtherFields">
<el-radio :value="1">企业</el-radio> <el-radio-button :value="1">企业</el-radio-button>
<el-radio :value="2">个人</el-radio> <el-radio-button :value="2">个人</el-radio-button>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<div v-if="applyFormData.entity_type === 1"> <div v-if="applyFormData.entity_type === 1">
<!-- <el-form-item label="许可证类型" prop="license_type"> <el-form-item :label="getLabel('biz_license_image', 1)" prop="biz_license_image">
<el-upload ref="uploadRef" multiple :limit="1" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.biz_license_image" :on-remove="(file, fileList) => handleRemove(file, fileList, 'biz_license_image')
" :on-success="(response, file, fileList) =>
handleUploadSuccess(response, file, fileList, 'biz_license_image')
" :on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" name="upfile" :class="{
'upload-hidden': isUploadHidden('biz_license_image'),
}">
<el-icon>
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<el-form-item label="公司名称" prop="biz_license_company">
<el-input v-model="applyFormData.biz_license_company" placeholder="请输入公司名称" />
</el-form-item>
<el-form-item label="法人姓名" prop="legal_person_name">
<el-input v-model="applyFormData.legal_person_name" placeholder="请输入法人姓名" />
</el-form-item>
<el-form-item label="注册号" prop="biz_license_number">
<el-input v-model="applyFormData.biz_license_number" placeholder="请输入注册号" />
</el-form-item>
<!-- <el-form-item label="法人手机号" prop="legal_person_mobile">
<el-input v-model="applyFormData.legal_person_mobile" placeholder="请输入法人手机号" />
</el-form-item> -->
<el-form-item label="许可证类型" prop="license_type">
<el-select v-model="applyFormData.license_type" value-key="" placeholder="请选择类型" clearable <el-select v-model="applyFormData.license_type" value-key="" placeholder="请选择类型" clearable
@change=""> @change="">
<el-option v-for="item in optionsPermitType" :key="item.value2" :label="item.label" <el-option v-for="item in optionsPermitType" :key="item.value2" :label="item.label"
@ -91,56 +117,32 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="许可证编号" prop="license_number"> <el-form-item :label="getLabel('license_image', 5)" prop="license_image" v-if="applyFormData.license_type!=1">
<el-input v-model="applyFormData.license_number" placeholder="请输入许可证编号" />
</el-form-item> -->
<!-- <el-form-item label="营业执照编号" prop="biz_license_number">
<el-input v-model="applyFormData.biz_license_number" placeholder="请输入营业执照编号" />
</el-form-item> -->
<el-form-item label="营业执照公司名" prop="biz_license_company">
<el-input v-model="applyFormData.biz_license_company" placeholder="请输入营业执照公司名" />
</el-form-item>
<el-form-item label="负责人姓名" prop="legal_person_name">
<el-input v-model="applyFormData.legal_person_name" placeholder="请输入负责人姓名" />
</el-form-item>
<!-- <el-form-item label="负责人手机号" prop="legal_person_mobile">
<el-input v-model="applyFormData.legal_person_mobile" placeholder="请输入法人手机号" />
</el-form-item> -->
<!-- <el-form-item label="负责身份证号" prop="legal_person_id_number">
<el-input v-model="applyFormData.legal_person_id_number" placeholder="请输入法人身份证号" />
</el-form-item> -->
<el-form-item :label="getLabel('biz_license_image', 1)" prop="biz_license_image">
<el-upload ref="uploadRef" multiple :limit="1" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.biz_license_image"
:on-remove="(file, fileList) => handleRemove(file, fileList, 'biz_license_image')"
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'biz_license_image')"
:on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl"
name="upfile" :class="{ 'upload-hidden': isUploadHidden('biz_license_image') }">
<el-icon>
<Plus />
</el-icon>
</el-upload>
</el-form-item>
<el-form-item :label="getLabel('license_image', 5)" prop="license_image">
<el-upload ref="uploadRef" multiple :limit="5" list-type="picture-card" :auto-upload="true" <el-upload ref="uploadRef" multiple :limit="5" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.license_image" v-model="applyFormData.license_image" :on-remove="(file, fileList) => handleRemove(file, fileList, 'license_image')
:on-remove="(file, fileList) => handleRemove(file, fileList, 'license_image')" " :on-success="(response, file, fileList) =>
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'license_image')" handleUploadSuccess(response, file, fileList, 'license_image')
:on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" " :on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" name="upfile"
name="upfile" :class="{ 'upload-hidden': isUploadHidden('license_image') }"> :class="{ 'upload-hidden': isUploadHidden('license_image') }">
<el-icon> <el-icon>
<Plus /> <Plus />
</el-icon> </el-icon>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="许可证编号" prop="license_number" v-if="applyFormData.license_type!=1">
<el-input v-model="applyFormData.license_number" placeholder="请输入许可证编号" />
</el-form-item>
<!-- 法人身份证正反面 --> <!-- 法人身份证正反面 -->
<el-form-item :label="getLabel('legal_person_id_images', 1)" prop="legal_person_id_images"> <el-form-item :label="getLabel('legal_person_id_images', 1)" prop="legal_person_id_images">
<el-upload ref="uploadRef" :limit="1" list-type="picture-card" :auto-upload="true" <el-upload ref="uploadRef" :limit="1" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.legal_person_id_images" v-model="applyFormData.legal_person_id_images" :on-remove="(file, fileList) => handleRemove(file, fileList, 'legal_person_id_images')
:on-remove="(file, fileList) => handleRemove(file, fileList, 'legal_person_id_images')" " :on-success="(response, file, fileList) =>
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'legal_person_id_images')" handleUploadSuccess(response, file, fileList, 'legal_person_id_images')
:on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" " :on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" name="upfile" :class="{
name="upfile" :class="{ 'upload-hidden': isUploadHidden('legal_person_id_images') }"> 'upload-hidden': isUploadHidden('legal_person_id_images'),
}">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<Plus /> <Plus />
</el-icon> </el-icon>
@ -148,16 +150,21 @@
</el-form-item> </el-form-item>
<el-form-item :label="getLabel('legal_person_id_images2', 1)" prop="legal_person_id_images2"> <el-form-item :label="getLabel('legal_person_id_images2', 1)" prop="legal_person_id_images2">
<el-upload ref="uploadRef" :limit="1" list-type="picture-card" :auto-upload="true" <el-upload ref="uploadRef" :limit="1" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.legal_person_id_images2" v-model="applyFormData.legal_person_id_images2" :on-remove="(file, fileList) =>
:on-remove="(file, fileList) => handleRemove(file, fileList, 'legal_person_id_images2')" handleRemove(file, fileList, 'legal_person_id_images2')
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'legal_person_id_images2')" " :on-success="(response, file, fileList) =>
:on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" handleUploadSuccess(response, file, fileList, 'legal_person_id_images2')
name="upfile" :class="{ 'upload-hidden': isUploadHidden('legal_person_id_images2') }"> " :on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" name="upfile" :class="{
'upload-hidden': isUploadHidden('legal_person_id_images2'),
}">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<Plus /> <Plus />
</el-icon> </el-icon>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item label="法人身份证号码" prop="legal_person_id_number">
<el-input v-model="applyFormData.legal_person_id_number" placeholder="请输入法人身份证号码" />
</el-form-item>
</div> </div>
<div v-if="applyFormData.entity_type === 2"> <div v-if="applyFormData.entity_type === 2">
<el-form-item label="个人身份证号" prop="individual_id_number"> <el-form-item label="个人身份证号" prop="individual_id_number">
@ -166,11 +173,12 @@
<!-- 个人身份证正反面 --> <!-- 个人身份证正反面 -->
<el-form-item :label="getLabel('individual_id_images', 1)" prop="individual_id_images"> <el-form-item :label="getLabel('individual_id_images', 1)" prop="individual_id_images">
<el-upload ref="uploadRef" :limit="1" list-type="picture-card" :auto-upload="true" <el-upload ref="uploadRef" :limit="1" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.individual_id_images" v-model="applyFormData.individual_id_images" :on-remove="(file, fileList) => handleRemove(file, fileList, 'individual_id_images')
:on-remove="(file, fileList) => handleRemove(file, fileList, 'individual_id_images')" " :on-success="(response, file, fileList) =>
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'individual_id_images')" handleUploadSuccess(response, file, fileList, 'individual_id_images')
:on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" " :on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" name="upfile" :class="{
name="upfile" :class="{ 'upload-hidden': isUploadHidden('individual_id_images') }"> 'upload-hidden': isUploadHidden('individual_id_images'),
}">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<Plus /> <Plus />
</el-icon> </el-icon>
@ -179,11 +187,12 @@
<el-form-item :label="getLabel('individual_id_images2', 1)" prop="individual_id_images2"> <el-form-item :label="getLabel('individual_id_images2', 1)" prop="individual_id_images2">
<el-upload ref="uploadRef" :limit="1" list-type="picture-card" :auto-upload="true" <el-upload ref="uploadRef" :limit="1" list-type="picture-card" :auto-upload="true"
v-model="applyFormData.individual_id_images2" v-model="applyFormData.individual_id_images2" :on-remove="(file, fileList) => handleRemove(file, fileList, 'individual_id_images2')
:on-remove="(file, fileList) => handleRemove(file, fileList, 'individual_id_images2')" " :on-success="(response, file, fileList) =>
:on-success="(response, file, fileList) => handleUploadSuccess(response, file, fileList, 'individual_id_images2')" handleUploadSuccess(response, file, fileList, 'individual_id_images2')
:on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" " :on-error="handleUploadError" :before-upload="beforeUpload" :action="uploadUrl" name="upfile" :class="{
name="upfile" :class="{ 'upload-hidden': isUploadHidden('individual_id_images2') }"> 'upload-hidden': isUploadHidden('individual_id_images2'),
}">
<el-icon class="avatar-uploader-icon"> <el-icon class="avatar-uploader-icon">
<Plus /> <Plus />
</el-icon> </el-icon>
@ -191,7 +200,9 @@
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
<div v-show="active === 3">
<div class="from_box">
<div class="tit">结算信息</div>
<el-form-item label="账户姓名" prop="account_holder_name"> <el-form-item label="账户姓名" prop="account_holder_name">
<el-input v-model="applyFormData.account_holder_name" /> <el-input v-model="applyFormData.account_holder_name" />
</el-form-item> </el-form-item>
@ -199,8 +210,7 @@
<el-input v-model="applyFormData.account_number" /> <el-input v-model="applyFormData.account_number" />
</el-form-item> </el-form-item>
<el-form-item label="开户银行" prop="bank_name"> <el-form-item label="开户银行" prop="bank_name">
<el-select v-model="applyFormData.bank_name" placeholder="请选择银行" size="large" <el-select v-model="applyFormData.bank_name" placeholder="请选择银行" size="large" style="width: 240px">
style="width: 240px">
<el-option v-for="bank in bankList2" :key="bank.id" :label="bank.bank_name" <el-option v-for="bank in bankList2" :key="bank.id" :label="bank.bank_name"
:value="bank.bank_name" /> :value="bank.bank_name" />
</el-select> </el-select>
@ -210,109 +220,136 @@
</el-form-item> </el-form-item>
</div> </div>
</el-form> </el-form>
<div class="form-button"> </div>
<el-button v-if="active > 1" style="margin-top: 12px" @click="pre" class="custom-button">上一步</el-button>
<el-button v-if="active < 3" style="margin-top: 12px;float: right;" @click="next" <div class="form-button">
class="custom-button">下一步</el-button> <el-button type="primary" @click="merchToApply" class="custom-button">提交审核</el-button>
<el-button v-if="active === 3" style="margin-top: 12px;float: right;" @click="merchToApply"
class="custom-button">提交</el-button>
</div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue' import { ref, reactive, onMounted, watch } from "vue";
import cityData from '../../stores/cityData'; import cityData from "../../stores/cityData";
import type { CityDataStructure } from '../../stores/cityData'; import type { CityDataStructure } from "../../stores/cityData";
import { ElMessage } from 'element-plus'; import { ElMessage } from "element-plus";
import { useUserStore } from '@/stores/userStore'; import { useUserStore } from "@/stores/userStore";
import { Plus } from '@element-plus/icons-vue' import { Plus } from "@element-plus/icons-vue";
import { GetStoreCategories, transformStoreCategories, GetPostion, GetBank, merchApply, GetAppDistrict } from '@/api/login'; import {
GetStoreCategories,
transformStoreCategories,
GetPostion,
GetBank,
merchApply,
GetAppDistrict,
} from "@/api/login";
const active = ref(1); const active = ref(1);
const formRef = ref(null); const formRef = ref(null);
const applyFormData = reactive({ const applyFormData = reactive({
bank_name: '', bank_name: "",
bank_branch_name: '', bank_branch_name: "",
account_number: '', account_number: "",
account_holder_name: '', account_holder_name: "",
biz_category: null, biz_category: null,
biz_license_company: '', biz_license_company: "",
biz_license_image: '', biz_license_image: "",
biz_license_number: '', biz_license_number: "",
biz_second_category: null, biz_second_category: null,
city_id: null, city_id: null,
contact_name: '', contact_name: "",
county_id: null, county_id: null,
entity_type: 1, entity_type: 1,
environment_image: '', environment_image: "",
front_facade_image: '', front_facade_image: "",
individual_id_images: '', individual_id_images: "",
individual_id_images2: '', individual_id_images2: "",
individual_id_number: '', individual_id_number: "",
legal_person_id_images: '', legal_person_id_images: "",
legal_person_id_images2: '', legal_person_id_images2: "",
legal_person_id_number: '', legal_person_id_number: "",
legal_person_mobile: '', legal_person_mobile: "",
legal_person_name: '', legal_person_name: "",
license_image: [], license_image: [],
license_number: '', license_number: "",
license_type: null, license_type: "1",
login_mobile: localStorage.getItem("mobilePhone"), login_mobile: localStorage.getItem("mobilePhone"),
province_id: null, province_id: null,
store_address: '', store_address: "",
map_address: '', map_address: "",
position: '', position: "",
store_latitude: null, store_latitude: null,
store_longitude: null, store_longitude: null,
store_name: '', store_name: "",
mapAddressLabel: '', mapAddressLabel: "",
license_imageToString: '', license_imageToString: "",
user_status: '' store_area: "",
user_status: "",
}); });
const optionsPermitType = [ const optionsPermitType = [
{ {
value2: '1', value2: "1",
label: '许可证', label: "无需特殊资质",
}, },
{ {
value2: '2', value2: "2",
label: '特许证件', label: "需许可证资质",
}, },
{ {
value2: '3', value2: "3",
label: '其他证件', label: "需特许证件资质",
} },
] ];
const rules = reactive({ const rules = reactive({
contact_name: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }], contact_name: [{ required: true, message: "请输入联系人姓名", trigger: "blur" }],
biz_category: [{ required: true, message: '请选择经营品类', trigger: 'change' }], biz_category: [{ required: true, message: "请选择经营品类", trigger: "change" }],
store_name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }], store_name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
map_address: [{ required: true, message: '请选择地图地址', trigger: 'change' }], map_address: [{ required: true, message: "请选择地图地址", trigger: "change" }],
position: [{ required: true, message: '请选择地图地址', trigger: 'change' }], position: [{ required: true, message: "请选择地图地址", trigger: "change" }],
store_address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }], store_address: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
front_facade_image: [{ required: true, message: '请上传门脸图', trigger: 'change' }], front_facade_image: [
environment_image: [{ required: true, message: '请上传环境图', trigger: 'change' }], { required: true, message: "请上传门脸图", trigger: ["change", "blur"] },
entity_type: [{ required: true, message: '请选择身份', trigger: 'change' }], ],
license_type: [{ required: true, message: '请选择许可证类型', trigger: 'change' }], environment_image: [
license_number: [{ required: true, message: '请输入许可证编号', trigger: 'blur' }], { required: true, message: "请上传环境图", trigger: ["change", "blur"] },
biz_license_number: [{ required: true, message: '请输入营业执照编号', trigger: 'blur' }], ],
biz_license_company: [{ required: true, message: '请输入营业执照公司名', trigger: 'blur' }], entity_type: [{ required: true, message: "请主体类型", trigger: "change" }],
legal_person_name: [{ required: true, message: '请输入负责人姓名', trigger: 'blur' }], // license_type: [{ required: true, message: "请选择许可证类型", trigger: "change" }],
legal_person_mobile: [{ required: true, message: '请输入负责人手机号', trigger: 'blur' }], // license_number: [{ required: true, message: "请输入许可证编号", trigger: "blur" }],
legal_person_id_number: [{ required: true, message: '请输入负责人身份证号', trigger: 'blur' }], biz_license_number: [
biz_license_image: [{ required: true, message: '请上传营业执照', trigger: 'change' }], { required: true, message: "请输入注册号", trigger: "blur" },
],
biz_license_company: [
{ required: true, message: "请输入公司名称", trigger: "blur" },
],
legal_person_name: [{ required: true, message: "请输入法人姓名", trigger: "blur" }],
legal_person_mobile: [
{ required: true, message: "请输入法人手机号", trigger: "blur" },
],
legal_person_id_number: [
{ required: true, message: "请输入法人身份证号", trigger: "blur" },
],
biz_license_image: [{ required: true, message: "请上传营业执照", trigger: "change" }],
// license_image: [{ required: true, message: '请上传许可证', trigger: 'change' }], // license_image: [{ required: true, message: '请上传许可证', trigger: 'change' }],
legal_person_id_images: [{ required: true, message: '请上传负责人身份证正面', trigger: 'change' }], legal_person_id_images: [
legal_person_id_images2: [{ required: true, message: '请上传负责人身份证反面', trigger: 'change' }], { required: true, message: "请上传法人身份证正面", trigger: "change" },
individual_id_number: [{ required: true, message: '请输入个人身份证号', trigger: 'blur' }], ],
individual_id_images: [{ required: true, message: '请上传个人身份证正面', trigger: 'change' }], legal_person_id_images2: [
individual_id_images2: [{ required: true, message: '请上传个人身份证反面', trigger: 'change' }], { required: true, message: "请上传法人身份证反面", trigger: "change" },
bank_name: [{ required: true, message: '请选择银行', trigger: 'change' }], ],
individual_id_number: [
{ required: true, message: "请输入个人身份证号", trigger: "blur" },
],
individual_id_images: [
{ required: true, message: "请上传个人身份证正面", trigger: "change" },
],
individual_id_images2: [
{ required: true, message: "请上传个人身份证反面", trigger: "change" },
],
bank_name: [{ required: true, message: "请选择银行", trigger: "change" }],
// bank_branch_name: [{ required: true, message: '请输入支行名称', trigger: 'blur' }], // bank_branch_name: [{ required: true, message: '请输入支行名称', trigger: 'blur' }],
account_number: [{ required: true, message: '请输入收款账户号码', trigger: 'blur' }], account_number: [{ required: true, message: "请输入收款账户号码", trigger: "blur" }],
account_holder_name: [{ required: true, message: '请输入账户姓名', trigger: 'blur' }] account_holder_name: [{ required: true, message: "请输入账户姓名", trigger: "blur" }],
}); });
const checkForm = async () => { const checkForm = async () => {
@ -322,8 +359,6 @@ const checkForm = async () => {
if (isValid) { if (isValid) {
console.log("可以通过"); console.log("可以通过");
} else {
ElMessage.error('请完善当前页面的表单信息');
} }
}; };
@ -334,9 +369,9 @@ const next = () => {
top: 0, //回到顶部 top: 0, //回到顶部
left: 0, left: 0,
behavior: "smooth", behavior: "smooth",
}) });
} }
} };
const pre = () => { const pre = () => {
if (active.value > 1) { if (active.value > 1) {
active.value--; active.value--;
@ -344,23 +379,23 @@ const pre = () => {
top: 0, //回到顶部 top: 0, //回到顶部
left: 0, left: 0,
behavior: "smooth", behavior: "smooth",
}) });
} }
}; };
const getLabel = (field: string, limit: number) => { const getLabel = (field: string, limit: number) => {
const labels = { const labels = {
front_facade_image: '门脸图', front_facade_image: "门脸图",
environment_image: '环境图', environment_image: "环境图",
biz_license_image: '营业执照', biz_license_image: "营业执照",
license_image: '许可证', license_image: "许可证",
legal_person_id_images: '负责人身份证正面', legal_person_id_images: "法人身份证正面",
legal_person_id_images2: '负责人身份证反面', legal_person_id_images2: "法人身份证反面",
individual_id_images: '个人身份证正面', individual_id_images: "身份证正面",
individual_id_images2: '个人身份证反面' individual_id_images2: "身份证反面",
}; };
if (field === 'license_image') { if (field === "license_image") {
return `${labels[field]}(${applyFormData[field].length}/${limit})`; return `${labels[field]}(${applyFormData[field].length}/${limit})`;
} else { } else {
const count = applyFormData[field] ? 1 : 0; const count = applyFormData[field] ? 1 : 0;
@ -370,7 +405,9 @@ const getLabel = (field: string, limit: number) => {
const userStore = useUserStore(); const userStore = useUserStore();
const showAll = () => { const showAll = () => {
applyFormData.license_imageToString = applyFormData.license_image.map(url => `${url}`).join(','); applyFormData.license_imageToString = applyFormData.license_image
.map((url) => `${url}`)
.join(",");
}; };
const merchToApply = async () => { const merchToApply = async () => {
@ -379,8 +416,8 @@ const merchToApply = async () => {
const res = await merchApply(applyFormData); const res = await merchApply(applyFormData);
if (res && res.status === 200) { if (res && res.status === 200) {
// ElMessage.success('成功入驻'); // ElMessage.success('成功入驻');
location.reload() location.reload();
console.log('成功入驻', res); console.log("成功入驻", res);
} else { } else {
console.log(res.data); console.log(res.data);
@ -397,13 +434,13 @@ const processData = () => {
...province, ...province,
children: cityList[provinceIndex].map((city, cityIndex) => { children: cityList[provinceIndex].map((city, cityIndex) => {
const cityItem = { const cityItem = {
...city ...city,
}; };
if (areaData[provinceIndex] && areaData[provinceIndex][cityIndex]) { if (areaData[provinceIndex] && areaData[provinceIndex][cityIndex]) {
cityItem.children = areaData[provinceIndex][cityIndex]; cityItem.children = areaData[provinceIndex][cityIndex];
} }
return cityItem; return cityItem;
}) }),
}; };
return provinceItem; return provinceItem;
}); });
@ -415,10 +452,10 @@ const cityData2 = ref<CityDataStructure>();
const cascaderOptions3 = ref(); const cascaderOptions3 = ref();
//hover触发选择 //hover触发选择
const cascaderProps = ref({ const cascaderProps = ref({
value: 'value', value: "value",
label: 'label', label: "label",
children: 'children', children: "children",
expandTrigger: 'hover' as const expandTrigger: "hover" as const,
}); });
const handleChangeBizCategory = (value) => { const handleChangeBizCategory = (value) => {
@ -436,67 +473,77 @@ interface Bank {
const bankList2 = ref<Bank[]>([]); const bankList2 = ref<Bank[]>([]);
onMounted(() => { onMounted(() => {
GetStoreCategories().then(res => { GetStoreCategories()
if (res.code === 0 && res.status === 200) { .then((res) => {
cascaderOptions.value = transformStoreCategories(res.data); if (res.code === 0 && res.status === 200) {
} else { cascaderOptions.value = transformStoreCategories(res.data);
} else {
} }
}).catch(err => { })
ElMessage.error('获取店铺分类失败'); .catch((err) => {
}); ElMessage.error("获取店铺分类失败");
});
GetBank({ GetBank({
"keyword": "中国工商银行桂平", // 银行名称关键字,小地方支行，查不到，调整关键字范围，尝试市级银行 keyword: "中国工商银行桂平", // 银行名称关键字,小地方支行，查不到，调整关键字范围，尝试市级银行
"pageNum": 1, pageNum: 1,
"pageSize": 10 pageSize: 10,
}).then(res => { })
if (res.code === 0 && res.status === 200) { .then((res) => {
bankList2.value = res.data; if (res.code === 0 && res.status === 200) {
} else { bankList2.value = res.data;
ElMessage.error('获取银行失败'); } else {
} ElMessage.error("获取银行失败");
}).catch(err => { }
ElMessage.error('获取银行失败'); })
}); .catch((err) => {
ElMessage.error("获取银行失败");
GetAppDistrict().then(res => { });
if (res.code === 0 && res.status === 200) {
cityData2.value = res.data;
console.log(cascaderOptions3.value);
} else {
ElMessage.error('获取银行失败');
}
}).catch(err => {
ElMessage.error('获取银行失败');
});
GetAppDistrict()
.then((res) => {
if (res.code === 0 && res.status === 200) {
cityData2.value = res.data;
console.log(cascaderOptions3.value);
} else {
ElMessage.error("获取银行失败");
}
})
.catch((err) => {
ElMessage.error("获取银行失败");
});
}); });
const handleChange = (value) => { const handleChange = (value) => {
// 假设 cascader 的值是一个数组，格式为 [省份ID, 城市ID, 区县ID] // 假设 cascader 的值是一个数组，格式为 [省份ID, 城市ID, 区县ID]
console.log(11, value);
if (value && value.length === 3) { if (value && value.length === 3) {
const [provinceId, cityId, countyId] = value; const [provinceId, cityId, countyId] = value;
applyFormData.province_id = provinceId; applyFormData.province_id = provinceId;
applyFormData.city_id = cityId; applyFormData.city_id = cityId;
applyFormData.county_id = countyId; applyFormData.county_id = countyId;
// // 获取区县名称（可选）
// const targetOption2 = cascaderOptions2.value
// .flatMap(province => province.children)
// .flatMap(city => city.children)
// .find(county => county.value === countyId);
// const label2 = targetOption?.label || '';
// applyFormData.mapAddressLabel2 = label2;
//找市
const targetOption = cascaderOptions2.value
.flatMap(province => province.children)
.find(city => city.value === cityId)
const label = targetOption?.label || '';
applyFormData.mapAddressLabel = label;
} }
const names = value.map((id, level) => {
const findName = (options, targetId) => {
for (const item of options) {
if (item.value === targetId) {
return item.label;
}
if (item.children) {
const childName = findName(item.children, targetId);
if (childName) return childName;
}
}
return "";
};
return findName(cascaderOptions2.value, id);
});
applyFormData.mapAddressLabel = names?.join("/");
applyFormData.store_area = names?.join("/");
}; };
const autocompleteOptions = ref([]); const autocompleteOptions = ref([]);
@ -511,83 +558,86 @@ const querySearch = async (queryString, cb) => {
query: queryString, query: queryString,
region: applyFormData.mapAddressLabel, region: applyFormData.mapAddressLabel,
city_limit: true, city_limit: true,
ret_coordtype: 'gcj02ll' ret_coordtype: "gcj02ll",
}; };
const response = await GetPostion(params); const res = await GetPostion(params);
console.log("这是response", response); console.log(res);
if (response.status === 200 && response.data.message === 'ok') { if (res?.result?.length) {
const results = response.data.result const results = res.result
.filter(item => "location" in item) .filter((item) => "location" in item)
.map(item => ({ .map((item) => ({
value: item.name, // 确保有 value 属性 value: item.name, // 确保有 value 属性
label: item.name, // 确保有 label 属性 label: item.name, // 确保有 label 属性
name: item.name, name: item.name,
address: item.address || '', // 确保 address 属性存在 address: item.address || "", // 确保 address 属性存在
lat: item.location?.lat || '', // 确保 lat 属性存在 lat: item.location?.lat || "", // 确保 lat 属性存在
lng: item.location?.lng || '' // 确保 lng 属性存在 lng: item.location?.lng || "", // 确保 lng 属性存在
})); }));
cb(results); cb(results);
} else { } else {
ElMessage.error('搜索失败'); ElMessage.error("搜索失败");
cb([]); cb([]);
} }
} catch (error) { } catch (error) {
ElMessage.error('搜索失败'); ElMessage.error("搜索失败");
cb([]); cb([]);
} }
}; };
const handleSelect = (item) => { const handleSelect = (item) => {
applyFormData.position = item.value; applyFormData.position = item.value;
applyFormData.store_address = item.value;
applyFormData.store_address = item.value;
formRef.value.validate();
console.log(item.value); console.log(item.value);
applyFormData.store_latitude = item.lat; applyFormData.store_latitude = item.lat;
applyFormData.store_longitude = item.lng; applyFormData.store_longitude = item.lng;
}; };
const beforeUpload = (file) => { const beforeUpload = (file) => {
const isJPG = file.type === 'image/jpeg'; const isJPG = file.type === "image/jpeg";
const isPNG = file.type === 'image/png'; const isPNG = file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 2; const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isPNG) { if (!isJPG && !isPNG) {
ElMessage.error('上传的图片必须是JPG或PNG格式！'); ElMessage.error("上传的图片必须是JPG或PNG格式！");
return false; return false;
} }
if (!isLt2M) { if (!isLt2M) {
ElMessage.error('上传的图片大小不能超过2MB！'); ElMessage.error("上传的图片大小不能超过2MB！");
return false; return false;
} }
return true; return true;
}; };
const uploadUrl = ref('https://mall.gpxscs.cn/mobile/shop/oss/upload'); const uploadUrl = ref("https://mall.gpxscs.cn/mobile/shop/oss/upload");
const handleRemove = (file, fileList, field) => { const handleRemove = (file, fileList, field) => {
if (field === 'license_image') { if (field === "license_image") {
const removedUrl = file.url; const removedUrl = file.url;
applyFormData[field] = applyFormData[field].filter(url => url !== removedUrl); applyFormData[field] = applyFormData[field].filter((url) => url !== removedUrl);
} else { } else {
applyFormData[field] = ''; applyFormData[field] = "";
} }
}; };
const isUploadHidden = (field: string) => { const isUploadHidden = (field: string) => {
const limits = { const limits = {
license_image: 5 license_image: 5,
}; };
const limit = limits[field] || 1; const limit = limits[field] || 1;
if (field === 'license_image') { if (field === "license_image") {
return applyFormData[field].length >= limit; return applyFormData[field].length >= limit;
} else { } else {
return applyFormData[field] !== '' && applyFormData[field] != null; return applyFormData[field] !== "" && applyFormData[field] != null;
} }
}; };
const handleExceed = (files, fileList) => { const handleExceed = (files, fileList) => {
ElMessage.warning('最多只能上传5张图片'); ElMessage.warning(`最多只能上传1张图片`);
}; };
const handleUploadSuccess = (response, file, fileList, field) => { const handleUploadSuccess = (response, file, fileList, field) => {
@ -595,55 +645,72 @@ const handleUploadSuccess = (response, file, fileList, field) => {
if (response.data && response.data.url) { if (response.data && response.data.url) {
file.url = response.data.url; file.url = response.data.url;
if (field === 'license_image') { if (field === "license_image") {
applyFormData[field].push(file.url); applyFormData[field].push(file.url);
} else { } else {
applyFormData[field] = file.url; applyFormData[field] = file.url;
} }
formRef.value.validate();
} else { } else {
ElMessage.error('文件上传成功，但未返回文件 URL'); ElMessage.error("文件上传成功，但未返回文件 URL");
} }
} else { } else {
ElMessage.error(response.msg || '文件上传失败'); ElMessage.error(response.msg || "文件上传失败");
} }
}; };
const handleUploadError = (error, file) => { const handleUploadError = (error, file) => {
ElMessage.error('文件上传失败'); ElMessage.error("文件上传失败");
}; };
const clearOtherFields = () => { const clearOtherFields = () => {
if (applyFormData.entity_type === 1) { if (applyFormData.entity_type === 1) {
// 清空个人部分的字段 // 清空个人部分的字段
applyFormData.individual_id_number = ''; applyFormData.individual_id_number = "";
applyFormData.individual_id_images = ''; applyFormData.individual_id_images = "";
applyFormData.individual_id_images2 = ''; applyFormData.individual_id_images2 = "";
} else if (applyFormData.entity_type === 2) { } else if (applyFormData.entity_type === 2) {
// 清空企业部分的字段 // 清空企业部分的字段
applyFormData.license_type = null; applyFormData.license_type = null;
applyFormData.license_number = ''; applyFormData.license_number = "";
applyFormData.biz_license_number = ''; applyFormData.biz_license_number = "";
applyFormData.biz_license_company = ''; applyFormData.biz_license_company = "";
applyFormData.legal_person_name = ''; applyFormData.legal_person_name = "";
applyFormData.legal_person_mobile = ''; applyFormData.legal_person_mobile = "";
applyFormData.legal_person_id_number = ''; applyFormData.legal_person_id_number = "";
applyFormData.biz_license_image = ''; applyFormData.biz_license_image = "";
applyFormData.license_image = []; applyFormData.license_image = [];
applyFormData.legal_person_id_images = ''; applyFormData.legal_person_id_images = "";
applyFormData.legal_person_id_images2 = ''; applyFormData.legal_person_id_images2 = "";
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
:deep(.el-upload--picture-card),
:deep(.el-upload-list__item) {
width: 96px;
height: 96px;
}
.signUp-container { .signUp-container {
display: flex; display: flex;
padding: 30px 0px; padding-top: 12px;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #eee;
.tit {
font-size: 16px;
margin-bottom: 15px;
}
.steps-container { .steps-container {
width: 60%; width: 50%;
padding: 15px;
border-radius: 5px;
background: #fff;
margin-bottom: 12px;
} }
:deep(.upload-hidden .el-upload--picture-card) { :deep(.upload-hidden .el-upload--picture-card) {
@ -651,7 +718,26 @@ const clearOtherFields = () => {
} }
.form-submit { .form-submit {
padding: 20px 0; width: 50%;
:deep(.el-form) {
max-width: 100% !important;
}
.from_box {
width: 100%;
padding: 15px;
margin: 0 0 12px;
border-radius: 5px;
background: #fff;
}
}
.form-button {
width: 100%;
text-align: center;
padding: 20px;
background: #fff;
} }
} }
@ -666,16 +752,20 @@ const clearOtherFields = () => {
} }
} }
.el-form-item {
label {
width: 126px !important;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.el-cascader-menu { .el-cascader-menu {
width: 120px; width: 120px;
min-width: 120px; min-width: 120px;
} }
.signUp-container {
.steps-container {
width: 100%;
}
.form-submit {
width: 100%;
}
}
} }
</style> </style>

2
vite.config.ts
View File

@ -16,7 +16,7 @@ export default defineConfig({
// base:'./', // base:'./',
plugins: [ plugins: [
vue(), vue(),
vueDevTools(), // vueDevTools(),
AutoImport({ AutoImport({
resolvers: [ElementPlusResolver()], resolvers: [ElementPlusResolver()],
}), }),