mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
refactor: 重构组件逻辑与样式优化
- 在 App.vue 中重构站点信息的获取与应用逻辑，提升代码可读性与维护性。 - 更新 Search.vue 组件，优化搜索框的样式与结构，增强用户体验。 - 在 element.scss 中注释掉不再使用的样式，并新增确认收货按钮的样式。 - 改进多个页面的布局与样式，确保响应式设计的一致性与美观性。 - 更新订单相关组件的按钮样式，提升视觉一致性与可用性。
This commit is contained in:
田香琪
@@ -94,6 +94,22 @@
|
||||
<el-form-item>
|
||||
<el-button class="search-btn" type="primary" @click="handleSearch">搜索</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="canUploadImages">
|
||||
<el-upload
|
||||
ref="up"
|
||||
:action="commonUrl + '/common/common/upload/file'"
|
||||
:data="uploadData"
|
||||
:headers="accessToken"
|
||||
:before-upload="beforeUpload"
|
||||
:on-error="handleError"
|
||||
:on-success="handleSuccess"
|
||||
:show-file-list="false"
|
||||
multiple
|
||||
style="display: inline-block"
|
||||
>
|
||||
<el-button>上传图片</el-button>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
</div>
|
||||
@@ -136,25 +152,10 @@
|
||||
</el-col>
|
||||
<el-col :span="canShowGroups ? (isComponent ? 19 : 20) : 24">
|
||||
<div class="pic-list">
|
||||
<div>
|
||||
<div v-if="!isComponent">
|
||||
<div class="oss-operation padding-row" style="display: flex; flex-direction: row-reverse">
|
||||
<div>
|
||||
<el-upload
|
||||
v-if="canUploadImages"
|
||||
ref="up"
|
||||
:action="commonUrl + '/common/common/upload/file'"
|
||||
:data="uploadData"
|
||||
:headers="accessToken"
|
||||
:before-upload="beforeUpload"
|
||||
:on-error="handleError"
|
||||
:on-success="handleSuccess"
|
||||
:show-file-list="false"
|
||||
multiple
|
||||
style="display: inline-block"
|
||||
>
|
||||
<el-button>上传图片</el-button>
|
||||
</el-upload>
|
||||
<el-button v-if="!isComponent && showType == 'list'" @click="removeAll">批量删除</el-button>
|
||||
<el-button v-if="showType == 'list'" @click="removeAll">批量删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -162,37 +163,39 @@
|
||||
<el-checkbox-group v-model="selectedOss" @change="selectOssChange">
|
||||
<div class="img-box">
|
||||
<div v-for="(item, index) in data" :key="index" class="img-item">
|
||||
<el-checkbox :value="item.id + ',' + item.url" class="check-box">
|
||||
<div
|
||||
class="card"
|
||||
@mouseenter="onMouseOver(item, index)"
|
||||
@mouseleave="onMouseOut(item, index)"
|
||||
>
|
||||
<img :src="item.url" alt="" />
|
||||
<div v-if="item.isShowPreview" class="preview">
|
||||
<div @click.prevent="download(item)">
|
||||
<el-tooltip content="下载" placement="top">
|
||||
<el-icon :size="18"><Download /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div @click.prevent="remove(item)">
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-icon :size="18"><Delete /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div @click.prevent="showPic(item)">
|
||||
<el-tooltip content="预览" placement="top">
|
||||
<el-icon :size="22"><View /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div
|
||||
class="card"
|
||||
:class="{ 'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url) }"
|
||||
@mouseenter="onMouseOver(item, index)"
|
||||
@mouseleave="onMouseOut(item, index)"
|
||||
>
|
||||
<el-checkbox
|
||||
:value="item.id + ',' + item.url"
|
||||
class="card-checkbox"
|
||||
@click.stop
|
||||
/>
|
||||
<img :src="item.url" alt="" />
|
||||
<div v-if="item.isShowPreview" class="preview">
|
||||
<div @click.prevent="download(item)">
|
||||
<el-tooltip content="下载" placement="top">
|
||||
<el-icon :size="18"><Download /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div @click.prevent="remove(item)">
|
||||
<el-tooltip content="删除" placement="top">
|
||||
<el-icon :size="18"><Delete /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div @click.prevent="showPic(item)">
|
||||
<el-tooltip content="预览" placement="top">
|
||||
<el-icon :size="22"><View /></el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox>
|
||||
<div>
|
||||
<el-tooltip :content="item.name" placement="bottom">
|
||||
<div class="text">{{ item.name }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-tooltip :content="item.name" placement="bottom">
|
||||
<div class="text">{{ item.name }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
@@ -533,7 +536,7 @@ export default {
|
||||
name: "",
|
||||
fileKey: "",
|
||||
fileType: "",
|
||||
userEnums: "MANAGER",
|
||||
userEnums: "STORE",
|
||||
pageNumber: 1, // 当前页数
|
||||
pageSize: 20, // 页面大小
|
||||
sort: "createTime", // 默认排序字段
|
||||
@@ -972,7 +975,7 @@ export default {
|
||||
return this.activeRoleTab === "MANAGER";
|
||||
},
|
||||
canUploadImages() {
|
||||
return this.activeRoleTab === "MANAGER";
|
||||
return this.activeRoleTab === "MANAGER" || this.activeRoleTab === "STORE";
|
||||
},
|
||||
uploadData() {
|
||||
return {
|
||||
@@ -985,10 +988,6 @@ export default {
|
||||
|
||||
methods: {
|
||||
beforeUpload(file) {
|
||||
if (!this.canUploadImages) {
|
||||
this.$Message.warning("仅管理员模块支持上传图片");
|
||||
return false;
|
||||
}
|
||||
const maxSize = 20480 * 1024;
|
||||
if (file && file.size > maxSize) {
|
||||
this.handleMaxSize(file);
|
||||
@@ -1408,10 +1407,6 @@ export default {
|
||||
},
|
||||
// 上传成功回调
|
||||
handleSuccess(res, file) {
|
||||
if (!this.canUploadImages) {
|
||||
this.$Message.warning("仅管理员模块支持上传图片");
|
||||
return;
|
||||
}
|
||||
if (res.success) {
|
||||
this.$Message.success("上传文件 " + file.name + " 成功");
|
||||
this.getDataList();
|
||||
|
||||
Reference in New Issue
Block a user