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-20 18:14:13 +08:00
parent 2a8b7fd085
commit 5ceb814e7f
1 changed files with 109 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@
:height="'44px'"
rightWidth="0"
:leftWidth="30"
backgroundColor="#f5f6fa"
backgroundColor="#f5f6fa"
>
<block slot="left">
<u-icon
@ -21,7 +21,7 @@
<block slot="default">
<u-search
class="search"
placeholder="请输入商品名称查找"
placeholder="搜索你想要的商品"
:showAction="false"
bgColor="#fff"
></u-search>
@ -33,7 +33,7 @@
scroll-with-animation
class="tab-view"
:scroll-into-view="scrollViewId"
:style="{ height: height - 130 + 'px', top: top + 'px' }"
:style="{ top: top + 'px' }"
>
<block v-for="(item, index) of tabbar" :key="index">
<tui-collapse
@ -77,10 +77,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>
<favorite-loading
@ -100,7 +100,7 @@
<scroll-view
v-if="commodityList.length > 0 && !loadingCommodityData"
scroll-y
:style="{ height: height - 200 + 'px', top: top + 'px' }"
:style="{ height: height - 118 + 'px', top: top + 'px' }"
:show-scrollbar="false"
@scrolltolower="handerScrolltolower"
refresher-enabled
@ -122,9 +122,9 @@
>
<u--image
:src="item.product_image"
radius="8"
width="60px"
height="60px"
radius="12"
width="64px"
height="64px"
></u--image>
</view>
<view class="commodity-info-box">
@ -141,43 +141,31 @@
</view>
</view>
<view class="commodity-btn-content">
<u-button
<view
@click="handerShowPricePopup(item)"
class="commodity-btn-item"
:hairline="true"
:plain="true"
shape="circle"
>
价格/库存
</u-button>
<u-button
</view>
<view
v-if="item.product_state_id == 1002"
class="commodity-btn-item commodity-btn-item-2"
:hairline="true"
:plain="true"
shape="circle"
class="commodity-btn-item"
@click="updateProductPutaway(item, index, 1001)"
>
上架
</u-button>
<u-button
</view>
<view
v-if="item.product_state_id == 1001"
class="commodity-btn-item commodity-btn-item-2"
:hairline="true"
:plain="true"
shape="circle"
class="commodity-btn-item"
@click="updateProductPutaway(item, index, 1002)"
>
下架
</u-button>
<u-button
class="commodity-btn-item commodity-btn-item-2"
:hairline="true"
:plain="true"
shape="circle"
</view>
<view
class="commodity-btn-item"
>
编辑
</u-button>
</view>
</view>
</view>
</view>
@ -201,22 +189,30 @@
</view>
</view>
<view class="productList-bottom">
<view class="bottom-item">分类管理</view>
<view class="bottom-item">
<u-icon
<u-icon
class="u-icon"
custom-prefix="custom-icon-piliangcaozuo custom-icon"
size="14"
color="#000"
name="grid"
size="16"
color="#222"
></u-icon>
<view class="bottom-item-name">分类管理</view>
</view>
<view class="bottom-item">
<u-icon
class="u-icon"
name="list-dot"
size="16"
color="#222"
></u-icon>
<view class="bottom-item-name" @click="skipuBatch">批量操作</view>
</view>
<view class="bottom-item">
<u-icon
<u-icon
class="u-icon"
custom-prefix="custom-icon-xinjiantuopu custom-icon"
name="bag"
size="16"
color="#000"
color="#222"
></u-icon>
<view class="bottom-item-name">商品新建</view>
</view>
@ -386,7 +382,7 @@ export default {
let header = 60;
let top = 0;
//#ifdef H5
top = 44;
top = 25;
//#endif
//#ifdef APP-PLUS
top = 70;
@ -664,11 +660,16 @@ export default {
<style lang="scss" scoped>
@import "@/styles/variables.scss";
page{
background: #f5f6fa;
}
.productList-container {
height: calc(100vh);
background: #f5f6fa;
.nav-bar {
padding-top: 20rpx;
::v-deep .uni-navbar{
border-bottom: 2rpx solid $uni-border-color;
}
::-webkit-scrollbar {
@ -724,40 +725,43 @@ export default {
.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;
}
@ -768,9 +772,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*/
@ -795,7 +801,7 @@ export default {
.swiper {
width: 100%;
height: 220rpx;
height: 210rpx;
border-radius: 12rpx;
overflow: hidden;
transform: translateZ(0);
@ -857,7 +863,7 @@ export default {
.slide-image {
width: 100%;
height: 220rpx;
height: 210rpx;
}
.class-box {
@ -909,6 +915,7 @@ export default {
}
.u-tabs {
margin-left: 20rpx;
border-bottom: 1px solid #f3f3f3;
}
@ -932,19 +939,21 @@ export default {
padding: 20rpx;
.commodity-item {
margin-bottom: 60rpx;
margin-bottom: 32rpx;
clear: both;
overflow: hidden;
.commodity-info {
display: flex;
margin-bottom: 40rpx;
margin-bottom: 24rpx;
.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 {
@ -969,9 +978,9 @@ export default {
display: flex;
flex-flow: column;
justify-content: space-between;
color: #666;
.commodity-name {
font-weight: 700;
font-size: 32rpx;
word-break: break-all; /* 允许在任意字符间断行 */
overflow-wrap: break-word; /* 优先在单词间断行 */
@ -980,18 +989,16 @@ export default {
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; /* 超出部分显示省略号 */
color: #222;
}
.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;
@ -1002,16 +1009,20 @@ export default {
}
.commodity-btn-content {
border-bottom: 2rpx solid #eee;
display: flex;
justify-content: flex-end;
float: right;
padding-bottom: 20rpx;
.commodity-btn-item {
margin: 0;
margin-right: 20rpx;
width: 160rpx;
height: 60rpx;
padding: 8rpx 12rpx;
font-size: 24rpx;
border-color: #d2d2d2;
color: #000;
border: 2rpx solid #d2d2d2;
color: #333;
text-align: center;
margin-left: 24rpx;
border-radius: 40rpx;
&::after {
border: none;
@ -1030,33 +1041,44 @@ export default {
margin: 60% auto;
margin-bottom: 0;
width: 300rpx;
height: 200rpx;
height: 210rpx;
background-image: url("../../../static/no-commodity.png");
background-size: 100%;
}
.no-data-tips {
margin: 80rpx auto;
color: #aaaaaa;
margin: 40rpx auto;
color: #999;
text-align: center;
font-size: 24rpx;
font-weight: normal;
}
}
.productList-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 99;
display: flex;
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: center;
.bottom-item {
flex: 1;
display: flex;
align-items: center;
margin-bottom: 40rpx;
margin-right: 80rpx;
justify-content: center;
.bottom-item-name{
font-size: 28rpx;
color: #222;
}
.u-icon {
margin-right: 8rpx;