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

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

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

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

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

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

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

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

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