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