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

update: 分类管理UI

Browse Source
This commit is contained in:
mixtan 2025-07-20 15:05:59 +08:00
parent af888619ef
commit 2a8b7fd085
5 changed files with 171 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
java-mall-app-shop-admin/pages/warehouse/manage/classifyList.vue
View File

@ -23,76 +23,68 @@
:show-scrollbar="false"
class="classifyList-scroll"
>
<block v-for="(item, index) of classifyList" :key="index">
<tui-collapse
:index="index"
:current="current"
hdBgColor="#fff"
:arrow="item.sub.length > 0 ? true : false"
@click="handerCollApse($event, item)"
>
<template v-slot:title>
<view class="stair-item">
<view class="classify-info">
<view class="stair-name">{{ item.category_name }}</view>
<view class="stair-tips" v-if="item.sub.length > 0">
二级分类{{ item.category_order }}
<view class="myui_card">
<block v-for="(item, index) of classifyList" :key="index">
<tui-collapse
:index="index"
:current="current"
hdBgColor="#fff"
@click="handerCollApse($event, item)"
>
<template v-slot:title>
<view class="stair-item">
<view class="classify-info">
<view class="stair-name">{{ item.category_name }}</view>
<view class="stair-tips" v-if="item.sub.length > 0">
二级分类{{ item.category_order }}
</view>
<view class="stair-tips" v-else>
一级分类{{ item.category_order }} | 暂无子分类
</view>
</view>
<view class="stair-tips" v-else>
一级分类{{ item.category_order }}
</view>
</view>
<view
class="classify-btn-content"
@click.stop="handerSetting($event, item)"
>
<u-button
class="classify-btn-item"
:hairline="true"
:plain="true"
shape="circle"
<view
class="classify-btn-content"
@click.stop="handerSetting($event, item)"
>
设置
</u-button>
<view class="classify-btn-item">
<u-icon name="edit-pen" size="16"> </u-icon>
设置
</view>
</view>
</view>
</view>
</template>
<template v-slot:content v-if="item.sub.length > 0">
<view
class="second-level-item"
v-for="(group, index2) of item.sub"
@click="handerCollApseChildren(group)"
>
</template>
<template v-slot:content v-if="item.sub.length > 0">
<view
class="second-level-item-info"
:style="
item.sub.length >= 2 && index2 !== item.sub.length - 1
? 'padding-bottom: 40rpx'
: ''
"
class="second-level-item"
v-for="(group, index2) of item.sub"
@click="handerCollApseChildren(group)"
>
<view class="second-level-item-info-name">
{{ group.category_name }}
</view>
<view class="second-level-item-info-sort">
排序{{ group.category_order }}
</view>
</view>
<view class="classify-btn-content">
<u-button
class="classify-btn-item"
:hairline="true"
:plain="true"
shape="circle"
@click="handersecondlevelSetting(item, group)"
<view
class="second-level-item-info"
:style="
item.sub.length >= 2 && index2 !== item.sub.length - 1
? 'padding-bottom: 40rpx'
: ''
"
>
设置
</u-button>
<view class="second-level-item-info-name">
{{ group.category_name }}
</view>
<view class="second-level-item-info-sort">
排序{{ group.category_order }}
</view>
</view>
<view class="classify-btn-content">
<view class="classify-btn-item">
<u-icon name="edit-pen" size="16"> </u-icon>
设置
</view>
</view>
</view>
</view>
</template>
</tui-collapse>
</block>
</template>
</tui-collapse>
</block>
</view>
</scroll-view>
</view>
<view class="classifyList-bottom">
@ -104,7 +96,12 @@
shape="circle"
@click="handerAddStairClassify()"
>
<u-icon class="bottom-icon" name="plus-circle"></u-icon>
<u-icon
color="#fff"
size="20"
class="bottom-icon"
name="plus-circle"
></u-icon>
新建分类
</u-button>
</view>
@ -137,7 +134,7 @@
class="stair-bottom-item-tips"
v-if="currStairItem.type_id != 0"
>
已经添加有商品类型无法修改
已有商品类型无法修改
</view>
</view>
<view class="stair-bottom-item" @click="handerShowRightAddSecondLevel">
@ -295,11 +292,11 @@
<text class="u-loadmore-tips">正在加载...</text>
</view>
</block>
<block v-else>
<!-- <block v-else>
<view class="u-loadmore u-loadmore-line">
<text class="u-loadmore-tips">没有更多商品类型了 ~</text>
</view>
</block>
</block> -->
</view>
</scroll-view>
<view class="popup-btn-list">
@ -334,9 +331,12 @@
>
<view class="add-popup-content">
<view class="add-popup-title">新建分类</view>
<view class="add-tips">
注意，确认商品类型后不可修改名称，商品类型，虚拟商品!
</view>
<u-alert
:closable="true"
fontSize="12"
title="注意，确认商品类型后不可修改名称，商品类型，虚拟商品!"
type="warning" :show-icon="true"
></u-alert>
<u--form
labelPosition="left"
:model="form"
@ -392,8 +392,8 @@
v-model="form.category_virtual_enable"
:activeValue="1"
:inactiveValue="0"
activeColor="#5ac725"
inactiveColor="#fe411b"
activeColor="#fe411b"
inactiveColor="#ccc"
></u-switch>
</u-form-item>
</u--form>
@ -773,44 +773,49 @@ export default {
.classifyList-container {
height: calc(100vh - 148rpx);
background: #f5f6fa;
overflow: hidden;
.tips {
padding: 24rpx 40rpx;
font-size: 13px;
padding: 24rpx;
font-size: 24rpx;
background: #fdf6f2;
border: 1px solid #efe8e2;
border-radius: 16rpx;
color: #3a3230;
margin: 32rpx;
margin: 24rpx;
}
.classifyList-content {
margin-top: 32rpx;
margin: 32rpx;
padding: 0 24rpx;
background: #fff;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
.myui_card {
margin: 0 24rpx;
padding: 24rpx;
}
::v-deep .tui-collapse {
margin-bottom: 40rpx;
&:last-child {
margin-bottom: 0;
}
}
.stair-item {
display: flex;
align-items: center;
justify-content: space-between;
margin: 20rpx 0;
margin-left: 40rpx;
&:last-child {
margin-bottom: 0;
}
.classify-info {
padding-left: 32rpx;
.stair-name {
font-size: 17px;
font-weight: 600;
font-size: 28rpx;
}
.stair-tips {
margin: 16rpx 0;
font-size: 15px;
color: #606060;
padding-top: 16rpx;
font-size: 24rpx;
color: #666;
}
}
}
@ -823,7 +828,7 @@ export default {
.classifyList-scroll {
-ms-overflow-style: none; /* IE和Edge */
scrollbar-width: none; /* Firefox */
height: calc(100vh - 230px);
height: calc(100vh - 400rpx);
}
.classifyList-scroll::-webkit-scrollbar {
@ -891,24 +896,19 @@ export default {
.no-commodity-type-tips {
margin: 80rpx auto;
color: red;
color: $base-color;
text-align: center;
}
}
.classify-btn-content {
.classify-btn-item {
margin: 0;
margin-right: 20rpx;
width: 120rpx;
height: 60rpx;
font-size: 24rpx;
border-color: #d2d2d2;
color: #000;
&::after {
border: none;
}
display: flex;
color: #333;
border: 1rpx solid #999;
border-radius: 50rpx;
padding: 10rpx 16rpx;
}
}
@ -923,26 +923,21 @@ export default {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 172rpx;
right: 0;
padding: 20rpx;
background: #fff;
border-top: 2px solid #eeeeee;
border-top: 2rpx solid $uni-border-color;
z-index: 2;
.bottom-list {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 40rpx;
.bottom-btn-item {
margin: 0;
margin-right: 20rpx;
width: 400rpx;
height: 88rpx;
font-size: 32rpx;
border-color: #d2d2d2;
color: #000;
font-size: 28rpx;
border-color: $base-color;
color: #fff;
background: $base-color;
.bottom-icon {
margin-right: 8rpx;
@ -982,8 +977,8 @@ export default {
.btn-item {
width: 46%;
height: 80rpx;
border-color: #909193;
height: 64rpx;
border-color: #909193;
&::after {
border: none;
@ -1037,7 +1032,7 @@ export default {
.btn-item {
width: 46%;
height: 80rpx;
height: 64rpx;
border-color: #909193;
&::after {
@ -1069,7 +1064,7 @@ export default {
.affirm-popup-title {
padding: 40rpx;
text-align: center;
font-weight: bold;
font-weight: bold;
}
.affirm-popup-tips {
@ -1084,7 +1079,7 @@ export default {
.btn-item {
width: 46%;
height: 80rpx;
height: 64rpx;
border-color: #909193;
&::after {
@ -1109,19 +1104,19 @@ export default {
.stair-popup-content {
.stair-bottom-item {
padding: 32rpx;
text-align: center;
padding: 24rpx;
border-bottom: 1px solid #eeeeee;
font-size: 28rpx;
text-align: center;
.stair-bottom-item-tips {
margin-top: 8rpx;
color: #999;
font-size: 24rpx;
color: #cccccc;
}
}
.stair-bottom-item-disabled {
color: #cccccc;
color: #999;
}
.stair-bottom-item-delect {

80
java-mall-app-shop-admin/pages/warehouse/manage/editClassify.vue
View File

@ -21,9 +21,10 @@
</block>
</navBar>
<u-alert
:closable="true"
fontSize="12"
title="注意，确认商品类型后不可修改名称，商品类型，虚拟商品!"
:center="true"
type="error"
type="warning" :show-icon="true"
></u-alert>
<view class="edit-item">
<view class="item-name">一级分类</view>
@ -82,8 +83,8 @@
:disabled="form.type_id != 0"
:activeValue="1"
:inactiveValue="0"
activeColor="#5ac725"
inactiveColor="#fe411b"
activeColor="#fe411b"
inactiveColor="#ccc"
></u-switch>
</u-form-item>
</u--form>
@ -118,7 +119,7 @@
<u-icon
class="u-icon-jianhao"
custom-prefix="custom-icon-jianhao_fangxing custom-icon"
size="20"
size="24"
@click="handerShowDelectPopup(item)"
></u-icon>
<u-icon
@ -170,7 +171,7 @@
shape="circle"
@click="handerDelectClassify"
>
确认
确定
</u-button>
</view>
</view>
@ -189,9 +190,13 @@
: `编辑二级"${this.form2.category_name}"分类`
}}
</view>
<view class="tips">
注意，确认商品类型后不可修改名称，商品类型，虚拟商品!
</view>
<u-alert
class="my_alert"
:closable="true"
fontSize="12"
title="注意，确认商品类型后不可修改名称，商品类型，虚拟商品!"
type="warning" :show-icon="true"
></u-alert>
<u--form
labelPosition="left"
:model="form2"
@ -245,13 +250,13 @@
class="form-item form-item-switch"
>
<u-switch
v-model="form2.category_virtual_enable"
:activeValue="1"
:inactiveValue="0"
activeColor="#5ac725"
inactiveColor="#fe411b"
:disabled="form2.type_id != 0"
></u-switch>
v-model="form2.category_virtual_enable"
:disabled="form2.type_id != 0"
:activeValue="1"
:inactiveValue="0"
activeColor="#fe411b"
inactiveColor="#ccc"
></u-switch>
</u-form-item>
</u--form>
<view class="popup-btn-list">
@ -271,7 +276,7 @@
shape="circle"
@click="handerAffirmEditClassify"
>
确认
确定
</u-button>
</view>
</view>
@ -318,6 +323,7 @@
@change="handerRadioChange"
>
<u-radio
activeColor="#FE411B"
class="commodity-type-radio"
v-for="(item, index) in typeManageList"
:key="index"
@ -336,11 +342,11 @@
<text class="u-loadmore-tips">正在加载...</text>
</view>
</block>
<block v-else>
<!-- <block v-else>
<view class="u-loadmore u-loadmore-line">
<text class="u-loadmore-tips">没有更多商品类型了 ~</text>
</view>
</block>
</block> -->
</view>
</scroll-view>
<view class="popup-btn-list">
@ -757,7 +763,7 @@ export default {
.editClassify-container {
width: 100vw;
height: calc(100vh - 166rpx);
height: calc(100vh - 124rpx);
background: #f5f6fa;
overflow-y: auto;
@ -809,8 +815,6 @@ export default {
justify-content: space-between;
.u-icon {
margin-right: 40rpx;
::v-deep.custom-icon-jiahao {
color: $base-color !important;
}
@ -819,9 +823,9 @@ export default {
}
.second-level-item-input {
margin: 40rpx 0;
font-weight: 500;
::v-deep .u-input{
padding: 30rpx 0 !important;
}
.statistics {
font-size: 12px;
color: #909193;
@ -862,8 +866,8 @@ export default {
.btn-item {
width: 46%;
height: 80rpx;
border-color: #909193;
height: 64rpx;
border-color: #909193;
&::after {
border: none;
@ -890,11 +894,14 @@ export default {
.add-popup-content {
width: 700rpx;
.my_alert{
margin: 0 24rpx;
}
.add-popup-title {
padding: 40rpx;
text-align: center;
font-weight: bold;
font-size: 36rpx;
font-size: 32rpx;
}
.tips {
@ -916,7 +923,7 @@ export default {
.btn-item {
width: 46%;
height: 80rpx;
height: 64rpx;
border-color: #909193;
&::after {
@ -999,15 +1006,13 @@ export default {
.bottom {
position: fixed;
width: 92%;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
padding-bottom: 40rpx;
background: #fff;
height: 120rpx;
padding: 24rpx;
border-top: 2rpx solid $uni-border-color;
.save-btn-item {
margin: 0;
@ -1027,9 +1032,10 @@ export default {
.icon-list {
display: flex;
justify-content: flex-end;
.u-icon-jianhao {
margin-right: 60rpx;
margin-right: 20rpx;
::v-deep.custom-icon-jianhao_fangxing {
color: $base-color !important;

11
java-mall-app-shop-admin/pages/warehouse/manage/typeManagement.vue
View File

@ -29,20 +29,20 @@
</view>
<view class="specification-btn-content">
<view class="btn_item">
<view class="btn_item" @click="handerShowDelectPopup(item)">
<u-icon
class="u-icon-jianhao"
custom-prefix="custom-icon-jianhao_fangxing custom-icon"
size="18"
color="#FE411B"
@click="handerShowDelectPopup(item)"
></u-icon>删除
</view>
<view class="btn_item">
<view class="btn_item" @click="handerAddAndEditPopup(false, item)">
<u-icon
class="u-icon-bianji"
@click="handerAddAndEditPopup(false, item)"
custom-prefix="custom-icon-icon_519 custom-icon"
size="18"
color="#FE411B"
@ -186,7 +186,7 @@
<view class="no-data" v-if="allSpecificationList.length <= 0">
<view class="no-data-bg"></view>
<view class="no-data-tips" @click="skipuSpecification">
暂无商品规格，点击马上添加
暂无商品规格数据，点击马上添加
<u-icon
style="display: inline-block"
name="arrow-right"
@ -942,7 +942,6 @@ export default {
.bottom-list {
display: flex;
align-items: center;
justify-content: flex-end;
.bottom-btn-item {
font-size: 28rpx;

2
java-mall-app-shop-admin/pages/warehouse/warehouse.vue
View File

@ -131,7 +131,7 @@ export default {
display: flex;
align-items: center;
gap: 10rpx;
padding: 24rpx;
padding: 20rpx;
font-size: 32rpx;
background: #fff;
}

4
java-mall-app-shop-admin/styles/myui.scss
View File

@ -20,6 +20,10 @@
background: #f9f9f9;
}
.uni-page-head__title{
font-weight: normal !important;
}
.u-loadmore-tips{
font-size: 24rpx;
}