code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2026-11-06 17:09:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(shopEntry): 优化店铺入驻页面视觉与流程

Browse Source 
- 新增品牌头部与自定义步骤条，已完成步骤支持点击回跳修改
- 审核状态页改用 el-result 图标结果页（审核中/已通过/已拒绝/已关闭）
- 分区标题改为主题色竖线样式，表单加宽，地址选择改为输入框样式
- 上传组件改为虚线卡片，补充上传失败与业务失败的错误提示
- 第2、3步补齐 sessionStorage 草稿保存，表单校验失败自动滚动到错误项
- 地址选择弹窗去除横向滚动，超长名称省略并支持悬停显示
- 注册 ElResult 组件；公司电话/营业执照号/法人证件号放宽为仅必填
This commit is contained in:
pikachu1995@126.com
2026-10-26 16:47:35 +08:00
parent 1395f2ad24
commit 06e02998aa
6 changed files with 620 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
buyer/src/components/map/multiple-map.vue
View File

@@ -9,7 +9,7 @@
<div class="selector">
<div class="selector-item" v-for="(plant, plantIndex) in Object.keys(data)" :key="plantIndex">
<div :class="{ 'active': chiosend[plantIndex].id == item.id }" v-for="(item, index) in data[plant]"
:key="index"
:key="index" :title="item.name"
@click="init(item, plantIndex != Object.keys(data).length - 1 ? Object.keys(data)[plantIndex + 1] : 0, plantIndex)"
class="map-item">
{{ item.name }}
@@ -125,7 +125,8 @@ function finished() {
.selector-item {
width: 100%;
flex: 1;
overflow: auto;
overflow-y: auto;
overflow-x: hidden;
}
.map-item {
@@ -133,6 +134,10 @@ function finished() {
padding: 10px;
border-bottom: 1px solid #eee;
cursor: pointer;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background: #eee;

219
buyer/src/pages/shopEntry/FirstApply.vue
View File

@@ -5,27 +5,33 @@
:model="form"
:rules="rules"
label-width="140px"
scroll-to-error
@submit.prevent
@keydown.enter.prevent
@focusout="saveDraft"
>
<h4>基础信息</h4>
<div class="section-title">基础信息</div>
<el-form-item prop="companyName" label="公司名称">
<el-input
type="text"
v-model="form.companyName"
placeholder="请填写公司信息"
placeholder="请填写公司名称"
/>
</el-form-item>
<el-form-item prop="companyAddressIdPath" label="公司所在地">
<span>{{ form.companyAddressPath || '暂无地址' }}</span>
<el-button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</el-button>
<div class="address-select" @click="openMap">
<el-icon class="addr-icon"><Location /></el-icon>
<span class="addr-text" :class="{ placeholder: !form.companyAddressPath }">
{{ form.companyAddressPath || '请选择公司所在地' }}
</span>
<span class="addr-action">{{ form.companyAddressPath ? '重新选择' : '选择' }}</span>
</div>
</el-form-item>
<el-form-item prop="companyAddress" label="公司详细地址">
<el-input
type="text"
v-model="form.companyAddress"
placeholder="请填写公司详细信息"
placeholder="请填写公司详细地址"
/>
</el-form-item>
<el-form-item prop="employeeNum" label="员工总数">
@@ -71,7 +77,7 @@
/>
</el-form-item>
<h4>营业执照信息</h4>
<div class="section-title">营业执照信息</div>
<el-form-item prop="licenseNum" label="营业执照号">
<el-input
type="text"
@@ -92,25 +98,23 @@
<el-form-item prop="licencePhoto" label="营业执照电子版">
<div class="upload-wrap">
<el-upload
ref="uploadLicence"
v-if="form.licencePhoto.length < 1"
:show-file-list="false"
:on-success="handleSuccess"
accept=".jpg,.jpeg,.png,.gif"
:before-upload="beforeUpload"
:on-error="uploadErr"
:disabled="form.licencePhoto.length >= 1"
:action="action"
:headers="accessToken"
>
<el-button
type="info"
:loading="uploadLoading"
:disabled="form.licencePhoto.length >= 1"
>证照上传</el-button
>
<div class="upload-box">
<el-icon v-if="uploadLoading" class="is-loading"><Loading /></el-icon>
<el-icon v-else><Plus /></el-icon>
<span>上传营业执照</span>
</div>
</el-upload>
<div class="describe">
请压缩图片在2M以内，格式为gif，jpg，png，并确保文字清晰，以免上传或审核失败，仅可上传1张
请压缩图片在2M以内，格式为gif、jpg、png，并确保文字清晰，以免上传或审核失败，仅可上传1张
</div>
<div class="img-list-wrap">
<div
@@ -128,7 +132,7 @@
</div>
</el-form-item>
<h4>法人信息</h4>
<div class="section-title">法人信息</div>
<el-form-item prop="legalName" label="法人姓名">
<el-input
type="text"
@@ -147,7 +151,7 @@
<el-form-item prop="legalPhoto" label="法人证件电子版">
<div class="upload-wrap">
<el-upload
ref="uploadLegal"
v-if="form.legalPhoto.length < 2"
:show-file-list="false"
:on-success="handleSuccess1"
:before-upload="beforeUpload1"
@@ -157,7 +161,11 @@
:action="action"
:headers="accessToken"
>
<el-button type="info" :loading="uploadLoading1">证照上传</el-button>
<div class="upload-box">
<el-icon v-if="uploadLoading1" class="is-loading"><Loading /></el-icon>
<el-icon v-else><Plus /></el-icon>
<span>上传法人证件</span>
</div>
</el-upload>
<div class="describe">
请压缩图片在2M以内，身份证正反面两张照片，确保图片清晰无缺角
@@ -178,9 +186,11 @@
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="loading" @click="next"
>填写财务资质信息</el-button
>
<div class="form-actions">
<el-button type="primary" size="large" :loading="loading" @click="next"
>下一步：填写财务资质信息</el-button
>
</div>
</el-form-item>
</el-form>
<el-dialog title="图片预览" v-model="visible">
@@ -192,8 +202,8 @@
</template>
<script setup>
import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
import { Message, Notice } from "@/utils/message";
import { Delete, View } from '@element-plus/icons-vue';
import { Message } from "@/utils/message";
import { Delete, Loading, Location, Plus, View } from '@element-plus/icons-vue';
import { applyFirst } from '@/api/shopentry';
import * as RegExp from '@/plugins/RegExp.js';
import multipleMap from "@/components/map/multiple-map";
@@ -237,7 +247,7 @@ const form = ref({ // 表单数据
licencePhoto: []
});
const rules = { // 验证规则
companyName: [{ required: true, message: '请填写公司信息' }],
companyName: [{ required: true, message: '请填写公司名称' }],
companyAddressIdPath: [{ required: true, message: '请选择公司所在地' }],
companyAddress: [{ required: true, message: '请填写公司详细地址' }],
employeeNum: [
@@ -254,30 +264,31 @@ const rules = { // 验证规则
{ pattern: RegExp.mobile, message: '请填写正确的号码' }
],
companyPhone: [
{ required: true, message: '请填写公司电话' },
{ pattern: RegExp.mobile, message: '请填写正确的号码' }
{ required: true, message: '请填写公司电话' }
],
companyEmail: [
{ required: true, message: '请填写电子邮箱' },
{ type: 'email', message: '请输入正确的邮箱' }
],
licenseNum: [
{ required: true, message: '请填写营业执照号' },
{ pattern: RegExp.licenseNum, message: '请输入正确的营业执照号' }
{ required: true, message: '请填写营业执照号' }
],
scope: [{ required: true, message: '请填写营业执照所示经营范围' }],
legalPhoto: [{ required: true, message: '请上传法人身份证照片' }],
licencePhoto: [{ required: true, message: '请上传营业执照' }],
legalName: [{ required: true, message: '请输入法人姓名' }],
legalId: [
{ required: true, message: '请输入法人证件号' },
{ pattern: RegExp.IDCard, message: '请输入正确的证件号' }
{ required: true, message: '请输入法人证件号' }
]
};
const uploadLoading1 = ref(false); // 上传loading
const uploadLoading = ref(false); // 上传loading
const contentInitialized = ref(false);
function openMap() {
map.value?.open();
}
// 获取店铺地址
function getAddress(val){
if(val.type === 'select'){
@@ -352,38 +363,34 @@ function validateUploadFile (file) {
}
return true;
}
// 上传成功回调
// 上传成功回调（el-upload 只认 HTTP 状态码，业务失败 success:false 也会进这里，需要判断）
function handleSuccess (res, file) {
uploadLoading.value = false;
form.value.licencePhoto = [res.result];
if (res && res.success && res.result) {
form.value.licencePhoto = [res.result];
} else {
Message.error(res && res.message ? res.message : '上传失败，请重试');
}
}
// 上传成功回调
function handleSuccess1 (res, file) {
uploadLoading1.value = false;
form.value.legalPhoto.push(res.result);
if (res && res.success && res.result) {
form.value.legalPhoto.push(res.result);
} else {
Message.error(res && res.message ? res.message : '上传失败，请重试');
}
}
// 上传失败
function uploadErr () {
// 上传失败（非 2xx：err.message 通常是响应体字符串，尝试解析出服务端提示）
function uploadErr (err) {
uploadLoading.value = false;
uploadLoading1.value = false;
}
// 上传失败回调
function handleFormatError (file) {
uploadLoading.value = false;
uploadLoading1.value = false;
Notice.warning({
title: 'The file format is incorrect',
desc: '上传文件格式不正确'
});
}
// 上传大小限制
function handleMaxSize (file) {
uploadLoading.value = false;
uploadLoading1.value = false;
Notice.warning({
title: 'Exceeding file size limit',
desc: '文件大小不能超过2M'
});
let msg = '上传失败，请重试';
try {
const body = JSON.parse(err && err.message);
if (body && body.message) msg = body.message;
} catch (e) { /* 非 JSON 响应，用默认提示 */ }
Message.error(msg);
}
// 图片查看
function handleView (item) {
@@ -456,19 +463,76 @@ onBeforeUnmount(() => {
});
</script>
<style lang="scss" scoped>
h4 {
margin-bottom: 10px;
padding: 0 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
font-weight: bold;
color: #333;
font-size: 14px;
line-height: 40px;
text-align: left;
.section-title {
display: flex;
align-items: center;
margin: 24px 0 18px;
font-size: 16px;
font-weight: 600;
color: #303133;
&::before {
content: '';
width: 4px;
height: 18px;
border-radius: 2px;
background: $theme_color;
margin-right: 8px;
}
}
.el-input {
width: 300px;
width: 360px;
}
.el-textarea {
width: 640px;
max-width: 100%;
}
.address-select {
display: flex;
align-items: center;
width: 360px;
height: 32px;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
cursor: pointer;
transition: border-color 0.2s;
background: #fff;
&:hover {
border-color: $theme_color;
}
.addr-icon {
color: #909399;
margin-right: 6px;
flex-shrink: 0;
}
.addr-text {
flex: 1;
color: #303133;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.placeholder {
color: #a8abb2;
}
}
.addr-action {
color: $theme_color;
margin-left: 8px;
flex-shrink: 0;
}
}
.form-actions {
margin-top: 8px;
.el-button {
min-width: 240px;
}
}
.img-list-wrap {
display: flex;
@@ -486,6 +550,7 @@ h4 {
position: relative;
overflow: hidden;
border: 1px solid #eee;
border-radius: 8px;
box-sizing: border-box;
background-color: #f5f5f5;
@@ -531,6 +596,32 @@ h4 {
}
}
.upload-box {
width: 120px;
height: 120px;
border: 1px dashed #c0c4cc;
border-radius: 8px;
background: #fafafa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #909399;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
.el-icon {
font-size: 26px;
}
&:hover {
border-color: $theme_color;
color: $theme_color;
}
}
.describe {
display: block;
width: 100%;

82
buyer/src/pages/shopEntry/SecondApply.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="photo-msg">
<el-form ref="secondForm" :model="form" :rules="rules" label-width="140px">
<h4>基础信息</h4>
<el-form ref="secondForm" :model="form" :rules="rules" label-width="140px" scroll-to-error>
<div class="section-title">结算银行信息</div>
<el-form-item prop="settlementBankAccountName" label="银行开户名">
<el-input
type="text"
@@ -32,18 +32,22 @@
</el-form-item>
<el-form-item>
<el-button @click="$emit('change', 0)">返回</el-button>
<el-button type="primary" :loading="loading" @click="next"
>填写其他信息</el-button
>
<div class="form-actions">
<el-button size="large" @click="$emit('change', 0)">上一步</el-button>
<el-button type="primary" size="large" :loading="loading" @click="next"
>下一步：填写其他信息</el-button
>
</div>
</el-form-item>
</el-form>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { applySecond } from '@/api/shopentry';
const SECOND_APPLY_DRAFT_KEY = 'shopEntrySecondDraft';
const emit = defineEmits(['change']);
const props = defineProps({
content: {
@@ -78,7 +82,10 @@ function next() {
applySecond(form)
.then((res) => {
loading.value = false;
if (res.success) emit('change', 2);
if (res.success) {
sessionStorage.removeItem(SECOND_APPLY_DRAFT_KEY);
emit('change', 2);
}
})
.catch(() => {
loading.value = false;
@@ -87,25 +94,62 @@ function next() {
});
}
function restoreDraft() {
const draft = sessionStorage.getItem(SECOND_APPLY_DRAFT_KEY);
if (!draft) return;
try {
Object.assign(form, JSON.parse(draft));
} catch (e) {
sessionStorage.removeItem(SECOND_APPLY_DRAFT_KEY);
}
}
function saveDraft() {
sessionStorage.setItem(SECOND_APPLY_DRAFT_KEY, JSON.stringify(form));
}
onMounted(() => {
if (props.content && Object.keys(props.content).length) {
Object.assign(form, JSON.parse(JSON.stringify(props.content)));
} else {
restoreDraft();
}
});
onBeforeUnmount(() => {
saveDraft();
});
</script>
<style lang="scss" scoped>
h4 {
margin-bottom: 10px;
padding: 0 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
font-weight: bold;
color: #333;
font-size: 14px;
line-height: 40px;
text-align: left;
.section-title {
display: flex;
align-items: center;
margin: 24px 0 18px;
font-size: 16px;
font-weight: 600;
color: #303133;
&::before {
content: '';
width: 4px;
height: 18px;
border-radius: 2px;
background: $theme_color;
margin-right: 8px;
}
}
.el-input {
width: 300px;
width: 360px;
}
.form-actions {
margin-top: 8px;
.el-button {
min-width: 120px;
}
.el-button--primary {
min-width: 240px;
}
}
</style>

243
buyer/src/pages/shopEntry/ShopEntry.vue
View File

@@ -1,14 +1,38 @@
<template>
<div class="shop-entry">
<div style="height: 20px"></div>
<div class="content">
<h1>店铺入驻</h1>
<el-steps :active="currentIndex" class="margin" finish-status="success">
<el-step title="企业资质信息"></el-step>
<el-step title="财务资质信息"></el-step>
<el-step title="其他信息"></el-step>
<el-step title="提交审核"></el-step>
</el-steps>
<div class="page-header">
<div class="header-icon">
<el-icon><Shop /></el-icon>
</div>
<div class="header-text">
<h1>店铺入驻</h1>
<p>完善企业资质信息，快速开启您的电商之旅</p>
</div>
</div>
<div class="steps-bar">
<div
v-for="(step, i) in steps"
:key="i"
class="step-item"
:class="{
active: currentIndex === i,
done: currentIndex > i,
clickable: canClickStep(i),
}"
@click="onStepClick(i)"
>
<div class="step-circle">
<el-icon v-if="currentIndex > i"><Check /></el-icon>
<span v-else>{{ i + 1 }}</span>
</div>
<div class="step-title">{{ step.title }}</div>
<div class="step-desc">{{ step.desc }}</div>
<div class="step-line" v-if="i < steps.length - 1"></div>
</div>
</div>
<div v-if="initLoading" class="step-loading" v-loading="true"></div>
<template v-else>
<first-apply
@@ -30,34 +54,68 @@
></third-apply>
</template>
<div class="success-page" v-if="currentIndex == 3">
<span v-if="storeDisable == '' || storeDisable == 'APPLYING'">入驻申请提交成功，等待平台审核</span>
<span v-if="storeDisable == 'OPEN'">申请已通过，请联系管理员</span>
<span v-if="storeDisable == 'CLOSED'">店铺已关闭，重申请联系管理员</span>
<span v-if="storeDisable == 'REFUSED'">审核未通过,请修改资质信息，如有疑问请联系管理员</span>
<div class="status-page" v-if="currentIndex === 3">
<el-result
v-if="storeDisable === '' || storeDisable === 'APPLYING'"
icon="info"
title="入驻申请提交成功"
sub-title="您的入驻申请已提交，请耐心等待平台审核"
>
<template #extra>
<el-button type="primary" @click="$router.push('/')">返回首页</el-button>
</template>
</el-result>
<el-result
v-else-if="storeDisable === 'OPEN'"
icon="success"
title="申请已通过"
sub-title="您的店铺已开通，如有问题请联系管理员"
>
<template #extra>
<el-button type="primary" @click="$router.push('/')">返回首页</el-button>
</template>
</el-result>
<el-result
v-else-if="storeDisable === 'CLOSED'"
icon="warning"
title="店铺已关闭"
sub-title="如需重新入驻，请联系管理员"
>
<template #extra>
<el-button type="primary" @click="$router.push('/')">返回首页</el-button>
</template>
</el-result>
<el-result
v-else-if="storeDisable === 'REFUSED'"
icon="error"
title="审核未通过"
sub-title="请修改资质信息后重新提交，如有疑问请联系管理员"
>
<template #extra>
<el-button @click="$router.push('/')">返回首页</el-button>
<el-button type="primary" @click="currentIndex = 0">重新申请</el-button>
</template>
</el-result>
</div>
<el-button v-if="currentIndex === 3" @click="$router.push('/')">返回</el-button>
&nbsp;
<el-button type="primary" @click='currentIndex = 0'
v-if="storeDisable === 'REFUSED' && currentIndex === 3">重新申请</el-button>
</div>
<el-dialog title="店铺入驻协议" v-model="showAgreement" width="1200" :show-close="false" :close-on-click-modal="false">
<el-dialog title="店铺入驻协议" v-model="showAgreement" width="900px" :show-close="false" :close-on-click-modal="false">
<div class="agreement-scroll">
<div class="agreeent-con" v-html="agreementCon"></div>
</div>
<template #footer><div style="text-align: center">
<p>
<el-checkbox v-model="checked">我已同意以上协议</el-checkbox>
<el-checkbox v-model="checked">我已阅读并同意以上协议</el-checkbox>
</p>
<el-button type="primary" :disabled="!checked" class="margin" @click="confirmAgreement">同意协议填写资质信息</el-button>
<el-button type="primary" :disabled="!checked" class="margin" @click="confirmAgreement">同意协议，填写资质信息</el-button>
</div></template>
</el-dialog>
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { Check, Shop } from "@element-plus/icons-vue";
import { agreement, applyStatus } from "@/api/shopentry";
import firstApply from "./FirstApply";
import secondApply from "./SecondApply";
@@ -74,6 +132,24 @@ const storeDisable = ref(""); // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒
const initLoading = ref(true);
const agreementAccepted = ref(false); // 是否已同意入驻协议
const steps = [
{ title: "企业资质信息", desc: "填写企业与法人资料" },
{ title: "财务资质信息", desc: "填写结算银行信息" },
{ title: "其他信息", desc: "完善店铺资料" },
{ title: "提交审核", desc: "等待平台审核" },
];
// 已完成步骤可点击回跳；审核状态页仅在 REFUSED 时允许回跳修改
function canClickStep(i) {
if (!agreementAccepted.value || i >= currentIndex.value) return false;
if (currentIndex.value === 3) return storeDisable.value === "REFUSED";
return true;
}
function onStepClick(i) {
if (canClickStep(i)) nextPage(i);
}
function confirmAgreement() {
agreementAccepted.value = true;
showAgreement.value = false;
@@ -193,16 +269,126 @@ onMounted(() => {
min-height: 500px;
border-radius: 20px;
background: #fff;
padding: 10px 20px;
padding: 28px 48px 48px;
}
.page-header {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 20px;
border-bottom: 1px solid #f0f0f0;
.header-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: $theme_color;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
h1 {
margin: 0;
font-size: 22px;
color: #303133;
}
margin-top: 20px;
p {
margin: 4px 0 0;
font-size: 13px;
color: #909399;
}
}
.steps-bar {
display: flex;
align-items: flex-start;
margin: 28px 0 36px;
}
.step-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
&.clickable {
cursor: pointer;
&:hover .step-title {
color: $theme_color;
}
}
&.active .step-circle {
border-color: $theme_color;
background: $theme_color;
color: #fff;
}
&.active .step-title {
color: $theme_color;
}
&.done .step-circle {
border-color: $theme_color;
color: $theme_color;
}
&.done .step-line {
background: $theme_color;
}
}
.step-circle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid #dcdfe6;
background: #fff;
color: #909399;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 600;
position: relative;
z-index: 1;
transition: all 0.25s;
}
.step-title {
margin-top: 10px;
font-size: 14px;
font-weight: 600;
color: #303133;
transition: color 0.25s;
}
.step-desc {
margin-top: 2px;
font-size: 12px;
color: #909399;
}
.step-line {
position: absolute;
top: 18px;
left: calc(50% + 28px);
width: calc(100% - 56px);
height: 2px;
background: #e4e7ed;
transition: background 0.25s;
}
.margin {
margin: 30px 0;
margin: 30px 0 0;
}
.agreeent-con {
max-height: 500px;
@@ -218,12 +404,11 @@ onMounted(() => {
.step-loading {
min-height: 320px;
}
.success-page {
height: 500px;
width: 100%;
line-height: 500px;
text-align: center;
font-size: 20px;
.status-page {
min-height: 420px;
display: flex;
align-items: center;
justify-content: center;
}
.shop-entry {
min-height: 100vh;

211
buyer/src/pages/shopEntry/ThirdApply.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="person-msg">
<el-form ref="thirdFormRef" :model="form" :rules="rules" label-width="140px">
<h4>基础信息</h4>
<el-form ref="thirdFormRef" :model="form" :rules="rules" label-width="140px" scroll-to-error>
<div class="section-title">店铺信息</div>
<el-form-item prop="storeName" label="店铺名称">
<el-input
type="text"
@@ -13,19 +13,22 @@
<el-form-item prop="storeLogo" label="店铺logo">
<div class="upload-wrap">
<el-upload
ref="uploadLogo"
v-if="form.storeLogo.length < 1"
:show-file-list="false"
:on-success="handleSuccess"
accept=".jpg,.jpeg,.png,.gif"
:before-upload="beforeUpload"
:on-error="uploadErr"
:disabled="form.storeLogo.length >= 1"
:action="action"
:headers="accessToken"
>
<el-button type="info" :loading="uploadLoading" :disabled="form.storeLogo.length >= 1">上传logo</el-button>
<div class="upload-box">
<el-icon v-if="uploadLoading" class="is-loading"><Loading /></el-icon>
<el-icon v-else><Plus /></el-icon>
<span>上传logo</span>
</div>
</el-upload>
<div class="describe">请压缩图片在2M以内，格式为gif，jpg，png，仅可上传1张</div>
<div class="describe">请压缩图片在2M以内，格式为gif、jpg、png，仅可上传1张</div>
<div class="img-list-wrap">
<div
class="img-list"
@@ -45,8 +48,8 @@
<el-select
v-model="form.goodsManagementCategory"
multiple
placeholder="请选择"
style="width: 300px"
placeholder="请选择店铺经营类目"
style="width: 360px"
>
<el-option
v-for="item in categoryList"
@@ -58,8 +61,13 @@
</el-form-item>
<el-form-item prop="storeAddressIdPath" label="店铺所在地">
<span>{{ form.storeAddressPath || '暂无地址' }}</span>
<el-button type="default" style="margin-left: 10px;" @click="$refs.map.open()">选择</el-button>
<div class="address-select" @click="openMap">
<el-icon class="addr-icon"><Location /></el-icon>
<span class="addr-text" :class="{ placeholder: !form.storeAddressPath }">
{{ form.storeAddressPath || '请选择店铺所在地' }}
</span>
<span class="addr-action">{{ form.storeAddressPath ? '重新选择' : '选择' }}</span>
</div>
</el-form-item>
<el-form-item prop="storeAddressDetail" label="店铺详细地址">
<el-input
@@ -80,10 +88,12 @@
</el-form-item>
<el-form-item>
<el-button @click="$emit('change', 1)">返回</el-button>
<el-button type="primary" :loading="loading" @click="next"
>提交平台审核</el-button
>
<div class="form-actions">
<el-button size="large" @click="$emit('change', 1)">上一步</el-button>
<el-button type="primary" size="large" :loading="loading" @click="next"
>提交平台审核</el-button
>
</div>
</el-form-item>
</el-form>
<el-dialog title="图片预览" v-model="visible">
@@ -93,9 +103,9 @@
</div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { onBeforeUnmount, onMounted, reactive, ref } from "vue";
import { Message } from "@/utils/message";
import { Delete, View } from '@element-plus/icons-vue';
import { Delete, Loading, Location, Plus, View } from '@element-plus/icons-vue';
import { applyThird } from '@/api/shopentry';
import { getCategory } from '@/api/goods';
@@ -105,6 +115,7 @@ import { buyerUrl } from '@/plugins/request.js';
import multipleMap from "@/components/map/multiple-map";
const THIRD_APPLY_DRAFT_KEY = 'shopEntryThirdDraft';
const emit = defineEmits(['change']);
@@ -116,6 +127,7 @@ const props = defineProps({
});
const thirdFormRef = ref(null);
const map = ref(null);
const loading = ref(false); // 加载状态
const uploadLoading = ref(false); // 上传加载状态
@@ -147,6 +159,10 @@ const rules = { // 验证规则
};
const categoryList = ref([]); // 分类数据
function openMap() {
map.value?.open();
}
// 下一步
function next () {
thirdFormRef.value.validate((valid) => {
@@ -158,7 +174,10 @@ function next () {
applyThird(params)
.then((res) => {
loading.value = false;
if (res.success) emit('change', 3);
if (res.success) {
sessionStorage.removeItem(THIRD_APPLY_DRAFT_KEY);
emit('change', 3);
}
})
.catch(() => {
loading.value = false;
@@ -192,14 +211,24 @@ function validateUploadFile (file) {
}
return true;
}
// 上传成功回调
// 上传成功回调（el-upload 只认 HTTP 状态码，业务失败 success:false 也会进这里，需要判断）
function handleSuccess (res, file) {
uploadLoading.value = false;
form.value.storeLogo = [res.result];
if (res && res.success && res.result) {
form.value.storeLogo = [res.result];
} else {
Message.error(res && res.message ? res.message : '上传失败，请重试');
}
}
// 上传失败
function uploadErr () {
// 上传失败（非 2xx：err.message 通常是响应体字符串，尝试解析出服务端提示）
function uploadErr (err) {
uploadLoading.value = false;
let msg = '上传失败，请重试';
try {
const body = JSON.parse(err && err.message);
if (body && body.message) msg = body.message;
} catch (e) { /* 非 JSON 响应，用默认提示 */ }
Message.error(msg);
}
// 查看图片
function handleView (item) {
@@ -277,28 +306,117 @@ function initFormFromContent (content) {
if (form.value[key] == null) form.value[key] = "";
});
}
function restoreDraft () {
const draft = sessionStorage.getItem(THIRD_APPLY_DRAFT_KEY);
if (!draft) return;
try {
const parsed = JSON.parse(draft);
form.value = {
...createEmptyForm(),
...parsed,
storeLogo: Array.isArray(parsed.storeLogo) ? parsed.storeLogo : [],
goodsManagementCategory: Array.isArray(parsed.goodsManagementCategory)
? parsed.goodsManagementCategory
: [],
};
} catch (e) {
sessionStorage.removeItem(THIRD_APPLY_DRAFT_KEY);
}
}
function saveDraft () {
sessionStorage.setItem(THIRD_APPLY_DRAFT_KEY, JSON.stringify(form.value));
}
initFormFromContent(props.content);
if (Object.keys(props.content).length) {
initFormFromContent(props.content);
} else {
restoreDraft();
}
onMounted(() => {
accessToken.accessToken = storage.getItem('accessToken');
getCategoryList();
});
onBeforeUnmount(() => {
saveDraft();
});
</script>
<style lang="scss" scoped>
h4 {
margin-bottom: 10px;
padding: 0 10px;
border: 1px solid #ddd;
background-color: #f8f8f8;
font-weight: bold;
color: #333;
font-size: 14px;
line-height: 40px;
text-align: left;
.section-title {
display: flex;
align-items: center;
margin: 24px 0 18px;
font-size: 16px;
font-weight: 600;
color: #303133;
&::before {
content: '';
width: 4px;
height: 18px;
border-radius: 2px;
background: $theme_color;
margin-right: 8px;
}
}
.el-input {
width: 300px;
width: 360px;
}
.el-textarea {
width: 640px;
max-width: 100%;
}
.address-select {
display: flex;
align-items: center;
width: 360px;
height: 32px;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
cursor: pointer;
transition: border-color 0.2s;
background: #fff;
&:hover {
border-color: $theme_color;
}
.addr-icon {
color: #909399;
margin-right: 6px;
flex-shrink: 0;
}
.addr-text {
flex: 1;
color: #303133;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
&.placeholder {
color: #a8abb2;
}
}
.addr-action {
color: $theme_color;
margin-left: 8px;
flex-shrink: 0;
}
}
.form-actions {
margin-top: 8px;
.el-button {
min-width: 120px;
}
.el-button--primary {
min-width: 240px;
}
}
.img-list-wrap {
display: flex;
@@ -316,6 +434,7 @@ h4 {
position: relative;
overflow: hidden;
border: 1px solid #eee;
border-radius: 8px;
box-sizing: border-box;
background-color: #f5f5f5;
@@ -362,6 +481,32 @@ h4 {
}
}
.upload-box {
width: 120px;
height: 120px;
border: 1px dashed #c0c4cc;
border-radius: 8px;
background: #fafafa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
color: #909399;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
.el-icon {
font-size: 26px;
}
&:hover {
border-color: $theme_color;
color: $theme_color;
}
}
.describe {
display: block;
width: 100%;

3
buyer/src/plugins/element.js
View File

@@ -37,6 +37,7 @@ import "element-plus/es/components/radio/style/css";
import "element-plus/es/components/radio-button/style/css";
import "element-plus/es/components/radio-group/style/css";
import "element-plus/es/components/rate/style/css";
import "element-plus/es/components/result/style/css";
import "element-plus/es/components/select/style/css";
import "element-plus/es/components/skeleton/style/css";
import "element-plus/es/components/step/style/css";
@@ -94,6 +95,7 @@ import {
ElRadioButton,
ElRadioGroup,
ElRate,
ElResult,
ElSelect,
ElSkeleton,
ElStep,
@@ -149,6 +151,7 @@ const components = [
ElRadioButton,
ElRadioGroup,
ElRate,
ElResult,
ElSelect,
ElSkeleton,
ElStep,