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;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
padding: 12rpx 30rpx;
border-bottom: 1px solid rgba(238, 238, 238, 0.5);
// background: rgba(238, 238, 238,0.5);
background: #fff;
.IM-status {
display: flex;
align-items: center;
gap: 10rpx;
.img {
width: 96rpx;
height: 96rpx;
border-radius: 100%;
width: 88rpx;
height: 88rpx;
border-radius: 10rpx;
}
}

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

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

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

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

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

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

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

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

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

@ -14,4 +14,12 @@
background: #fff;
border-radius: 12rpx;
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-border-color:#c8c7cc;
$uni-border-color:#e2e2e2;
/* 尺寸变量 */