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

update: 规格管理UI和类型管理UI

Browse Source
This commit is contained in:
mixtan 2025-07-19 21:19:33 +08:00
parent f843b76f63
commit af888619ef
8 changed files with 179 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
java-mall-app-shop-admin/pages/IM/IM.vue
View File

@ -272,18 +272,18 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 20rpx 30rpx; padding: 12rpx 30rpx;
border-bottom: 1px solid rgba(238, 238, 238, 0.5); border-bottom: 1px solid rgba(238, 238, 238, 0.5);
// background: rgba(238, 238, 238,0.5); background: #fff;
.IM-status { .IM-status {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10rpx; gap: 10rpx;
.img { .img {
width: 96rpx; width: 88rpx;
height: 96rpx; height: 88rpx;
border-radius: 100%; border-radius: 10rpx;
} }
} }

35
java-mall-app-shop-admin/pages/warehouse/manage/components/tree/style.css
View File

@ -6,13 +6,14 @@
left: 0rpx; left: 0rpx;
z-index: 11999; z-index: 11999;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: all 0.3s ease; transition: all 0.3s ease;
opacity: 0;
visibility: hidden; visibility: hidden;
} }
.tki-tree-mask.show { .tki-tree-mask.show {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
height: auto;
} }
.tki-tree-cnt { .tki-tree-cnt {
@ -37,7 +38,7 @@
.tki-tree-bar { .tki-tree-bar {
background-color: #fff; background-color: #fff;
height: 65px; height: 80rpx;
padding-left: 20rpx; padding-left: 20rpx;
padding-right: 20rpx; padding-right: 20rpx;
display: flex; display: flex;
@ -55,17 +56,15 @@
color: #fe411b; color: #fe411b;
} }
.tki-tree-view { .tki-tree-view {
position: absolute; /* position: absolute;
top: 0rpx; top: 0rpx;
right: 0rpx; right: 0rpx;
bottom: 0rpx; bottom: 0rpx;
left: 0rpx; left: 0rpx;
top: 120rpx; top: 120rpx; */
background-color: #fff; background-color: #fff;
padding-top: 20rpx; padding: 24rpx 40rpx;
padding-right: 20rpx; height: 100vh;
padding-bottom: 20rpx;
padding-left: 20rpx;
} }
.tki-tree-view-sc { .tki-tree-view-sc {
height: 100%; height: 100%;
@ -75,7 +74,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: 26rpx; font-size: 24rpx;
color: #757575; color: #757575;
line-height: 1; line-height: 1;
height: 0; height: 0;
@ -83,11 +82,12 @@
transition: 0.2s; transition: 0.2s;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin-bottom: 20rpx;
} }
.tki-tree-item.show { .tki-tree-item.show {
height: 80rpx; height: 72rpx;
opacity: 1; opacity: 1;
border-bottom: 1rpx solid rgba(238, 238, 238, 0.5);
margin-bottom: 20rpx;
} }
.tki-tree-item.showchild:before { .tki-tree-item.showchild:before {
transform: rotate(90deg); transform: rotate(90deg);
@ -105,20 +105,21 @@
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; height: 100%;
font-size: 36rpx; font-size: 28rpx;
line-height: 1.2; line-height: 1;
color: #111;
} }
.tki-tree-check { .tki-tree-check {
width: 40px; width: 56rpx;
height: 40px; height: 56rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.tki-tree-check-yes, .tki-tree-check-yes,
.tki-tree-check-no { .tki-tree-check-no {
width: 20px; width: 28rpx;
height: 20px; height: 28rpx;
border-top-left-radius: 20%; border-top-left-radius: 20%;
border-top-right-radius: 20%; border-top-right-radius: 20%;
border-bottom-right-radius: 20%; border-bottom-right-radius: 20%;

7
java-mall-app-shop-admin/pages/warehouse/manage/components/tree/tree.vue
View File

@ -62,7 +62,7 @@
class="tki-tree-label" class="tki-tree-label"
@tap.stop="_treeItemTap(item, index)" @tap.stop="_treeItemTap(item, index)"
> >
<image <!-- <image
class="tki-tree-icon" class="tki-tree-icon"
:src=" :src="
item.lastRank item.lastRank
@ -71,7 +71,10 @@
? currentIcon ? currentIcon
: defaultIcon : defaultIcon
" "
></image> ></image> -->
<u-icon v-if="!item.lastRank" :name="!item.showChild ? 'arrow-down': 'arrow-up'" size="14" color="#666" style="margin-right: 8rpx;"></u-icon>
<u-icon v-if="item.lastRank" name="file-text" size="18" color="#666" style="margin-right: 8rpx;"></u-icon>
{{ item.name }} {{ item.name }}
</view> </view>
<view <view

95
java-mall-app-shop-admin/pages/warehouse/manage/specification.vue
View File

@ -8,10 +8,12 @@
text="" text=""
animation="spinner15" animation="spinner15"
></favorite-loading> ></favorite-loading>
<view class="no-data" v-if="specificationList.length <= 0 && !loading"> <view class="no-data" v-if="specificationList.length <= 0 && !loading">
<view class="no-data-bg"></view> <view class="no-data-bg"></view>
<view class="no-data-tips">暂无规格</view> <view class="no-data-tips">暂无规格</view>
</view> </view>
<scroll-view <scroll-view
v-if="specificationList.length > 0 && !loading" v-if="specificationList.length > 0 && !loading"
scroll-y scroll-y
@ -39,18 +41,20 @@
<view class="specification-sort">排序：{{ item.spec_order }}</view> <view class="specification-sort">排序：{{ item.spec_order }}</view>
</view> </view>
<view class="specification-btn-content"> <view class="specification-btn-content">
<u-icon <view class="btn_item" @click="handerShowDelectPopup(item)">
<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="24" size="18"
@click="handerShowDelectPopup(item)" color="#FE411B"
></u-icon> ></u-icon>删除
<u-icon </view>
<view class="btn_item" @click="handerShowEeditPopup(item)"><u-icon
class="u-icon-bianji" class="u-icon-bianji"
@click="handerShowEeditPopup(item)"
custom-prefix="custom-icon-icon_519 custom-icon" custom-prefix="custom-icon-icon_519 custom-icon"
size="24" size="18"
></u-icon> color="#FE411B"
></u-icon>编辑</view>
</view> </view>
</view> </view>
<view <view
@ -60,12 +64,12 @@
<block v-if="loadingDownSpecificationData"> <block v-if="loadingDownSpecificationData">
<view class="u-loadmore"> <view class="u-loadmore">
<view class="u-loading"></view> <view class="u-loading"></view>
<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>
@ -80,7 +84,7 @@
shape="circle" shape="circle"
@click="handerAddAndEditPopup(true)" @click="handerAddAndEditPopup(true)"
> >
<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>
@ -160,7 +164,7 @@
shape="circle" shape="circle"
@click="handerAffirmAddAndEdit" @click="handerAffirmAddAndEdit"
> >
{{ isAdd ? "添加" : "修改" }} {{ isAdd ? "确定添加" : "保存修改" }}
</u-button> </u-button>
</view> </view>
</view> </view>
@ -184,7 +188,7 @@
> >
<view class="affirm-popup-content"> <view class="affirm-popup-content">
<view class="affirm-popup-title"> <view class="affirm-popup-title">
确认删除"{{ currDelectItem.spec_name }}"规格? 确认删除《{{ currDelectItem.spec_name }}》?
</view> </view>
<view class="popup-btn-list"> <view class="popup-btn-list">
<u-button <u-button
@ -203,7 +207,7 @@
shape="circle" shape="circle"
@click="handerDelectClassify" @click="handerDelectClassify"
> >
确认 确定
</u-button> </u-button>
</view> </view>
</view> </view>
@ -524,7 +528,7 @@ export default {
.m-loading-box { .m-loading-box {
text-align: center; text-align: center;
padding: 40rpx; padding: 40rpx;
color: #aaaa; color: #999;
font-size: 28rpx; font-size: 28rpx;
} }
@ -535,32 +539,40 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 20rpx 0; padding: 24rpx;
margin-left: 40rpx; margin-bottom: 24rpx;
margin-bottom: 20px; background: #fff;
border-radius: 10rpx;
.specification-info { .specification-info {
.specification-name { .specification-name {
font-size: 17px; font-size: 28rpx;
font-weight: bold; font-weight: bold;
} }
.specification-classify { .specification-classify {
font-size: 28rpx; font-size: 24rpx;
margin: 16rpx 0; margin: 16rpx 0;
color: #606060; color: #666;
} }
.specification-sort { .specification-sort {
font-size: 15px; font-size: 24rpx;
color: #606060; color: #666;
} }
} }
.specification-btn-content { .specification-btn-content {
display: flex; display: flex;
justify-content: space-around; justify-content: flex-end;
width: 220rpx; gap: 20rpx;
.btn_item{
gap: 4rpx;
font-size: 24rpx;
display: flex;
align-items: center;
}
.u-icon-jianhao { .u-icon-jianhao {
::v-deep.custom-icon-jianhao_fangxing { ::v-deep.custom-icon-jianhao_fangxing {
@ -584,9 +596,9 @@ export default {
width: 600rpx; width: 600rpx;
.affirm-popup-title { .affirm-popup-title {
padding: 40rpx; padding: 60rpx 0 20rpx;
text-align: center; text-align: center;
font-weight: bold; font-size: 28rpx;
} }
.affirm-popup-tips { .affirm-popup-tips {
@ -601,7 +613,7 @@ export default {
.btn-item { .btn-item {
width: 46%; width: 46%;
height: 80rpx; height: 64rpx;
border-color: #909193; border-color: #909193;
&::after { &::after {
@ -651,7 +663,7 @@ export default {
.btn-item { .btn-item {
width: 46%; width: 46%;
height: 80rpx; height: 64rpx;
border-color: #909193; border-color: #909193;
&::after { &::after {
@ -672,26 +684,22 @@ 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; 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;
@ -704,4 +712,11 @@ export default {
} }
} }
} }
::v-deep .u-textarea{
padding: 0;
}
::v-deep .u-textarea__count{
bottom: 0rpx;
}
</style> </style>

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

@ -15,7 +15,8 @@
:refresher-triggered="isRefreshing" :refresher-triggered="isRefreshing"
@refresherrefresh="handleRefresh" @refresherrefresh="handleRefresh"
> >
<view <view class="typeManagement_list">
<view
class="typeManagement-item" class="typeManagement-item"
v-for="(item, index) of typeManageList" v-for="(item, index) of typeManageList"
:key="index" :key="index"
@ -28,20 +29,30 @@
</view> </view>
<view class="specification-btn-content"> <view class="specification-btn-content">
<u-icon <view class="btn_item">
<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="24" size="18"
color="#FE411B"
@click="handerShowDelectPopup(item)" @click="handerShowDelectPopup(item)"
></u-icon> ></u-icon>删除
<u-icon </view>
class="u-icon-bianji"
@click="handerAddAndEditPopup(false, item)" <view class="btn_item">
custom-prefix="custom-icon-icon_519 custom-icon" <u-icon
size="24" class="u-icon-bianji"
></u-icon> @click="handerAddAndEditPopup(false, item)"
custom-prefix="custom-icon-icon_519 custom-icon"
size="18"
color="#FE411B"
></u-icon>编辑
</view>
</view> </view>
</view> </view>
</view>
<view <view
class="m-loading-box" class="m-loading-box"
v-if="typeManageList.length > 0 && !isNotypeManageData" v-if="typeManageList.length > 0 && !isNotypeManageData"
@ -49,12 +60,12 @@
<block v-if="loadingDownTypeManageData"> <block v-if="loadingDownTypeManageData">
<view class="u-loadmore"> <view class="u-loadmore">
<view class="u-loading"></view> <view class="u-loading"></view>
<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>
@ -69,7 +80,7 @@
shape="circle" shape="circle"
@click="handerAddAndEditPopup(true)" @click="handerAddAndEditPopup(true)"
> >
<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>
@ -198,7 +209,7 @@
v-for="(item, index) in allSpecificationList" v-for="(item, index) in allSpecificationList"
:key="index" :key="index"
> >
<view class="specification-name">分类名称：{{ item.name }}</view> <view class="specification-name"><u-icon name="tags" color="#666" size="18"></u-icon>分类名称：{{ item.name }}</view>
<u-checkbox-group <u-checkbox-group
class="specification-checkbox-gourp" class="specification-checkbox-gourp"
v-model="item.checkboxList" v-model="item.checkboxList"
@ -211,6 +222,8 @@
:customStyle="{ marginBottom: '8px' }" :customStyle="{ marginBottom: '8px' }"
:label="group.spec_name" :label="group.spec_name"
:name="group.spec_id" :name="group.spec_id"
size="14"
labelSize="14"
></u-checkbox> ></u-checkbox>
</u-checkbox-group> </u-checkbox-group>
</view> </view>
@ -671,19 +684,33 @@ export default {
font-size: 28rpx; font-size: 28rpx;
} }
.typeManagement_list{
margin: 24rpx;
padding: 24rpx;
background: #fff;
border-radius: 10rpx;
}
.typeManagement-item { .typeManagement-item {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
margin: 72rpx 0; padding: 24rpx 0;
border-bottom: 1rpx solid rgba(238, 238, 238, .5);
&:last-child{
border-bottom: none;
padding-bottom: 0;
}
.typeManagement-info { .typeManagement-info {
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: space-around; font-size: 28rpx;
.type-name { .type-name {
max-width: 160rpx; max-width: 160rpx;
margin-right: 32rpx;
word-break: break-all; /* 允许在任意字符间断行 */ word-break: break-all; /* 允许在任意字符间断行 */
overflow-wrap: break-word; /* 优先在单词间断行 */ overflow-wrap: break-word; /* 优先在单词间断行 */
display: -webkit-box; display: -webkit-box;
@ -691,14 +718,25 @@ export default {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */ text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.type-catergory-name{
color: #666;
} }
} }
.specification-btn-content { .specification-btn-content {
display: flex; display: flex;
justify-content: space-around; justify-content: flex-end;
align-items: center; gap: 20rpx;
width: 220rpx;
.btn_item{
gap: 4rpx;
font-size: 24rpx;
display: flex;
align-items: center;
}
.u-icon-jianhao { .u-icon-jianhao {
::v-deep.custom-icon-jianhao_fangxing { ::v-deep.custom-icon-jianhao_fangxing {
@ -738,17 +776,21 @@ export default {
.specification-name { .specification-name {
padding: 24rpx 36rpx; padding: 24rpx 36rpx;
background: #f8f8f8; color: #666;
color: #888888; display: flex;
gap: 8rpx;
align-items: center;
font-size: 28rpx;
} }
.specification-checkbox-gourp { .specification-checkbox-gourp {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 24rpx; padding: 24rpx 36rpx;
.specification-checkbox-item { .specification-checkbox-item {
margin-right: 40rpx; margin-right: 24rpx;
font-size: 24rpx;
} }
} }
@ -757,9 +799,9 @@ export default {
margin: 50rpx; margin: 50rpx;
.btn-item { .btn-item {
width: 46%; width: 46%;
height: 80rpx; height: 64rpx;
border-color: #909193; border-color: #909193;
&::after { &::after {
border: none; border: none;
@ -820,7 +862,7 @@ export default {
.btn-item { .btn-item {
width: 46%; width: 46%;
height: 80rpx; height:64rpx;
border-color: #909193; border-color: #909193;
&::after { &::after {
@ -870,7 +912,7 @@ export default {
.btn-item { .btn-item {
width: 46%; width: 46%;
height: 80rpx; height: 64rpx;
border-color: #909193; border-color: #909193;
&::after { &::after {
@ -888,29 +930,25 @@ export default {
} }
.typeManagement-bottom { .typeManagement-bottom {
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; 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;
@ -940,4 +978,11 @@ export default {
} }
} }
} }
::v-deep .u-textarea{
padding: 0;
}
::v-deep .u-textarea__count{
bottom: 0rpx;
}
</style> </style>

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

@ -126,7 +126,6 @@ export default {
@import "@/styles/variables.scss"; @import "@/styles/variables.scss";
.warehouse-container { .warehouse-container {
height: calc(100vh - 120rpx); height: calc(100vh - 120rpx);
background: #f5f6fa;
.shop-name { .shop-name {
display: flex; display: flex;
@ -134,7 +133,6 @@ export default {
gap: 10rpx; gap: 10rpx;
padding: 24rpx; padding: 24rpx;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold;
background: #fff; background: #fff;
} }

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

@ -14,4 +14,12 @@
background: #fff; background: #fff;
border-radius: 12rpx; border-radius: 12rpx;
box-shadow: 2rpx 2rpx 10rpx 0 rgba(0, 0, 0, 0.1); box-shadow: 2rpx 2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
} }
page{
background: #f9f9f9;
}
.u-loadmore-tips{
font-size: 24rpx;
}

2
java-mall-app-shop-admin/uni.scss
View File

@ -36,7 +36,7 @@ $uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */ /* 边框颜色 */
$uni-border-color:#c8c7cc; $uni-border-color:#e2e2e2;
/* 尺寸变量 */ /* 尺寸变量 */