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 20:36:42 +08:00
parent 5ceb814e7f
commit 68c48913a6
2 changed files with 186 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

322
java-mall-app-shop-admin/pages/warehouse/manage/batch.vue
View File

@ -9,7 +9,7 @@
:rightWidth="30"
:leftWidth="30"
title="商品批量"
backgroundColor="#fff"
backgroundColor="#f5f6fa"
>
<block slot="left">
<u-icon
@ -34,7 +34,7 @@
scroll-with-animation
class="tab-view"
:scroll-into-view="scrollViewId"
:style="{ height: height - 100 + 'px' }"
:style="{ top: top + 'px' }"
>
<block v-for="(item, index) of tabbar" :key="index">
<tui-collapse
@ -75,10 +75,10 @@
ref="tabsRef"
:list="commodityStatusList"
@click="handerCommodityStatus"
itemStyle="padding-left: 15px; padding-right: 15px; height: 57px;"
activeStyle="font-weight: bold;color: #000;"
inactiveStyle="color:#999999;"
lineColor="#e41f19"
itemStyle="padding:0 15px;height: 44px;"
activeStyle="color: #222;"
inactiveStyle="color:#666;"
lineColor="#FE411B"
></u-tabs>
</view>
<!-- 有子集 - 全选按钮 -->
@ -93,7 +93,6 @@
@click="handleSelectAll(null, true)"
>
<u-checkbox-group
class="commodity-list"
v-model="
tabbar[collApseIndex].children[currTabChildrenIndex]
.checkboxAllList
@ -104,6 +103,8 @@
<u-checkbox
class="commodity-checkbox"
:name="'select-all'"
iconSize="14"
size="14"
></u-checkbox>
</u-checkbox-group>
<view class="checkbox-all-name">
@ -125,12 +126,13 @@
@click="handleSelectAll(null, false)"
>
<u-checkbox-group
class="commodity-list"
v-model="tabbar[collApseIndex].checkboxAllList"
placement="column"
@change="handleSelectAll($event, false)"
>
<u-checkbox
size="14"
iconSize="14"
class="commodity-checkbox"
:name="'select-all'"
></u-checkbox>
@ -182,6 +184,9 @@
class="commodity-checkbox"
:key="index"
:name="item.product_id"
iconSize="14"
size="14"
></u-checkbox>
<view class="commodity-info">
<view
@ -192,9 +197,9 @@
>
<u--image
:src="item.product_image"
radius="8"
width="60px"
height="60px"
radius="12"
width="64px"
height="64px"
@click="handlerShowImg(item.product_image)"
></u--image>
</view>
@ -219,7 +224,6 @@
tabbar[collApseIndex] &&
tabbar[collApseIndex].children.length <= 0
"
class="commodity-list"
v-model="tabbar[collApseIndex].checkboxList"
placement="column"
@change="handleSingleCheckboxChange($event, false)"
@ -233,6 +237,9 @@
class="commodity-checkbox"
:key="index"
:name="item.product_id"
iconSize="14"
size="14"
></u-checkbox>
<view class="commodity-info">
<view
@ -285,43 +292,43 @@
</view>
<view
class="productList-bottom"
:class="{ 'productList-bottom-2': selectCommodityList.length > 0 }"
:class="['productList-bottom-2', { 'productList-bottom-2': selectCommodityList.length > 0 }]"
>
<view class="product-tips" v-if="selectCommodityList.length > 0">
共选择{{ selectCommodityList.length }}/100
<text class="product-tips-check" @click="showPopup = true">
查看
<u-icon class="icon-up" size="8" name="arrow-up"></u-icon>
</text>
</view>
<view class="commodity-btn-content">
<u-button
<view
class="commodity-btn-item"
:hairline="true"
:plain="true"
shape="circle"
@click="updateProductPutaway(1001)"
>
上架
</u-button>
<u-button
<u-icon name="arrow-upward" color="#666" size="14"></u-icon>上架
</view>
<view
class="commodity-btn-item"
:hairline="true"
:plain="true"
shape="circle"
@click="updateProductPutaway(1002)"
>
下架
</u-button>
<u-button
<u-icon name="arrow-downward" color="#666" size="14"></u-icon>下架
</view>
<view
class="commodity-btn-item commodity-btn-item-2"
:hairline="true"
:plain="true"
shape="circle"
@click="delectCommodity"
>
删除
</u-button>
<u-icon name="trash" color="#666" size="14"></u-icon> 删除
</view>
</view>
<view class="product-tips">
共选择{{ selectCommodityList.length }}/100
<text class="product-tips-check" @click="showPopup = true">
查看
<u-icon class="icon-up" size="8" name="arrow-up"></u-icon>
</text>
</view>
</view>
<u-loading-page
@ -368,6 +375,8 @@
overflowY: selectCommodityList.length >= 7 ? 'auto' : 'visible',
}"
>
<view class="commodity-list">
<view
class="commodity-item"
v-for="(item, index) of selectCommodityList"
@ -414,6 +423,7 @@
></u-icon>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
@ -650,7 +660,7 @@ export default {
let header = 60;
let top = 0;
//#ifdef H5
top = 44;
top = 24;
//#endif
this.height = res.windowHeight - uni.upx2px(header);
this.top = top + uni.upx2px(header);
@ -1356,6 +1366,11 @@ export default {
<style lang="scss" scoped>
@import "@/styles/variables.scss";
page{
background: #f5f6fa;
}
.batch-container {
height: calc(100vh);
background: #fff;
@ -1415,43 +1430,45 @@ export default {
.tui-search-text {
padding-left: 16rpx;
}
.tab-view {
/* height: 100%; */
width: 200rpx;
width: 210rpx;
position: fixed;
left: 0;
bottom: 88rpx;
z-index: 10;
background: #f5f6fa;
}
.tab-bar-item {
width: 200rpx;
min-height: 57px;
width: 210rpx;
min-height: 88rpx;
background: #f5f6fa;
box-sizing: border-box;
display: flex;
align-items: center;
flex-wrap: wrap;
font-size: 30rpx;
color: #666666;
font-size: 28rpx;
color: #555;
font-weight: 400;
padding: 12rpx;
padding-left: 28px;
padding-right: 32rpx;
padding-left: 44rpx;
word-wrap: break-word;
word-break: break-all;
}
::v-deep .tui-icon-arrow{
left: 8rpx;
}
.active {
position: relative;
color: #000;
font-weight: 600;
background: #fff;
}
.tab-bar-item-2 {
font-size: 28rpx;
min-height: 96rpx;
font-size: 24rpx;
background: #fff !important;
}
@ -1462,9 +1479,11 @@ export default {
.active::before {
content: "";
position: absolute;
border-left: 8rpx solid #e41f19;
border-left: 4rpx solid #FE411B;
height: 30rpx;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* 左侧导航布局 end*/
@ -1603,6 +1622,7 @@ export default {
}
.u-tabs {
margin-left: 20rpx;
border-bottom: 1px solid #f3f3f3;
}
@ -1628,36 +1648,39 @@ export default {
left: 0;
display: flex;
align-items: center;
height: 60px;
height: 100rpx;
width: 100%;
z-index: 100;
background: #fff;
padding-left: 24rpx;
}
.checkbox-all-name{
font-size: 28rpx;
}
.commodity-list {
padding: 20rpx;
padding: 24rpx;
.commodity-item {
display: flex;
align-items: center;
margin-bottom: 40rpx;
width: 100%;
.commodity-checkbox {
margin-bottom: 20px;
margin-right: 20rpx;
}
.commodity-info {
.commodity-info {
display: flex;
margin-bottom: 40rpx;
.commodity-img {
position: relative;
margin-right: 20rpx;
width: 60px;
height: 60px;
border: 1px solid #ebebeb;
border-radius: 16rpx;
width: 128rpx;
height: 128rpx;
border: 1px solid $uni-border-color;
border-radius: 24rpx;
}
.commodity-img-sold-out {
@ -1669,10 +1692,10 @@ export default {
line-height: 20px;
content: "已下架";
text-align: center;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.5);
color: #fff;
z-index: 99;
font-size: 14px;
font-size: 24rpx;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
}
@ -1682,10 +1705,10 @@ export default {
display: flex;
flex-flow: column;
justify-content: space-between;
color: #666;
.commodity-name {
font-weight: 700;
font-size: 32rpx;
font-size: 28rpx;
word-break: break-all; /* 允许在任意字符间断行 */
overflow-wrap: break-word; /* 优先在单词间断行 */
display: -webkit-box;
@ -1693,18 +1716,16 @@ export default {
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
color: #000;
}
.commodity-inventory {
font-size: 24rpx;
color: #626262;
margin: 20rpx 0;
}
.commodity-price {
font-size: 32rpx;
font-weight: bold;
color: #ea3938;
font-size: 28rpx;
color: #FE411B;
.currency {
margin-right: 4px;
@ -1735,19 +1756,41 @@ export default {
.productList-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
display: flex;
flex-flow: column;
padding: 40rpx;
width: 100%;
padding: 0 24rpx;
height: 88rpx;
background: #fff;
border-top: 2px solid #f3f3f3;
// box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.1);
border-top: 2rpx solid $uni-border-color;
display: flex;
align-items: center;
justify-content: space-between;
.commodity-btn-item {
display: flex;
align-items: center;
justify-content: center;
padding: 8rpx 12rpx;
font-size: 24rpx;
border: 2rpx solid #d2d2d2;
color: #333;
text-align: center;
margin-right: 24rpx;
border-radius: 40rpx;
line-height: 1;
}
.product-tips {
margin-bottom: 20rpx;
.commodity-btn-item-2 {
color: $base-color;
border-color: $base-color;
::v-deep .u-icon__icon{
color: $base-color !important;
}
}
.product-tips {
font-size: 24rpx;
text-align: center;
.product-tips-check {
margin-left: 10rpx;
@ -1767,28 +1810,24 @@ export default {
}
}
&.productList-bottom-2 {
padding-top: 20rpx;
.commodity-btn-content{
display: flex;
align-items: center;
justify-content: center;
}
.commodity-btn-content {
.bottom-item {
display: flex;
.commodity-btn-item {
margin: 0;
margin-right: 20rpx;
width: 140rpx;
font-size: 24rpx;
border-color: #d2d2d2;
color: #000;
align-items: center;
justify-content: center;
&::after {
border: none;
.bottom-item-name{
font-size: 28rpx;
color: #222;
}
}
.commodity-btn-item-2 {
color: $base-color;
border-color: $base-color;
.u-icon {
margin-right: 8rpx;
}
}
}
@ -1856,72 +1895,71 @@ export default {
}
.commodity-info {
display: flex;
display: flex;
margin-bottom: 24rpx;
.commodity-img {
position: relative;
margin-right: 20rpx;
width: 60px;
height: 60px;
border: 1px solid #ebebeb;
border-radius: 16rpx;
}
.commodity-img {
position: relative;
margin-right: 20rpx;
width: 128rpx;
height: 128rpx;
border: 1px solid $uni-border-color;
border-radius: 24rpx;
}
.commodity-img-sold-out {
&::before {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
line-height: 20px;
content: "已下架";
text-align: center;
background: rgba(0, 0, 0, 0.6);
color: #fff;
z-index: 99;
font-size: 14px;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
}
}
.commodity-img-sold-out {
&::before {
position: absolute;
bottom: 0;
width: 100%;
height: 20px;
line-height: 20px;
content: "已下架";
text-align: center;
background: rgba(0, 0, 0, 0.5);
color: #fff;
z-index: 99;
font-size: 24rpx;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
}
}
.commodity-info-box {
display: flex;
flex-flow: column;
justify-content: space-between;
.commodity-info-box {
display: flex;
flex-flow: column;
justify-content: space-between;
color: #666;
.commodity-name {
font-weight: bold;
font-size: 34rpx;
word-break: break-all; /* 允许在任意字符间断行 */
overflow-wrap: break-word; /* 优先在单词间断行 */
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制最多2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.commodity-name {
font-size: 28rpx;
word-break: break-all; /* 允许在任意字符间断行 */
overflow-wrap: break-word; /* 优先在单词间断行 */
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制最多2行 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
color: #000;
}
.commodity-inventory {
margin: 6rpx 0;
font-size: 25rpx;
color: #626262;
}
.commodity-inventory {
font-size: 24rpx;
}
.commodity-price {
font-size: 32rpx;
font-weight: bold;
color: #ea3938;
.commodity-price {
font-size: 28rpx;
color: #FE411B;
.currency {
margin-right: 4px;
font-size: 24rpx;
}
}
.currency {
margin-right: 4px;
font-size: 24rpx;
}
}
}
}
}
}
}
}

13
java-mall-app-shop-admin/pages/warehouse/manage/productList.vue
View File

@ -965,10 +965,10 @@ page{
line-height: 20px;
content: "已下架";
text-align: center;
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.5);
color: #fff;
z-index: 99;
font-size: 14px;
font-size: 24rpx;
border-bottom-left-radius: 16rpx;
border-bottom-right-radius: 16rpx;
}
@ -981,7 +981,7 @@ page{
color: #666;
.commodity-name {
font-size: 32rpx;
font-size: 28rpx;
word-break: break-all; /* 允许在任意字符间断行 */
overflow-wrap: break-word; /* 优先在单词间断行 */
display: -webkit-box;
@ -989,7 +989,7 @@ page{
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
color: #222;
color: #000;
}
.commodity-inventory {
@ -1060,7 +1060,6 @@ page{
left: 0;
right: 0;
z-index: 99;
display: flex;
padding: 0 24rpx;
height: 88rpx;
background: #fff;
@ -1110,7 +1109,7 @@ page{
}
.popup-commodity-item {
margin-bottom: 20px;
margin-bottom: 10rpx;
background: #fff;
.popup-commodity-info {
@ -1144,7 +1143,7 @@ page{
}
.bottom-btn {
padding: 40rpx;
padding: 24rpx;
background: #fff;
.btn-item {