|
|
@@ -1,5 +1,27 @@
|
|
|
<template>
|
|
|
<view class="app-content" style="background:white;">
|
|
|
+ <view class="modern-tabs-container">
|
|
|
+ <view class="modern-tabs">
|
|
|
+ <view class="modern-tab" :class="{ 'active': globalLookStock === 0 }" @click="changeHasStock(0)">
|
|
|
+ <view class="tab-content">
|
|
|
+ <text class="tab-icon">📋</text>
|
|
|
+ <text class="tab-text">全部</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="modern-tab" :class="{ 'active': globalLookStock === 1 }" @click="changeHasStock(1)">
|
|
|
+ <view class="tab-content">
|
|
|
+ <text class="tab-icon">💰</text>
|
|
|
+ <text class="tab-text">有库存</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="modern-tab" :class="{ 'active': globalLookStock === 2 }" @click="changeHasStock(2)">
|
|
|
+ <view class="tab-content">
|
|
|
+ <text class="tab-icon">🏷️</text>
|
|
|
+ <text class="tab-text">没库存</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="billing_box_bg">
|
|
|
<view class="input-wrap">
|
|
|
<view style="padding:0upx 0upx 0upx 0upx;margin-right:8upx;" >
|
|
|
@@ -8,15 +30,12 @@
|
|
|
<view class="search-bar">
|
|
|
<app-search-module v-model="globalPy" ref="globalSearchRef" placeholder="这里搜索" @input="globalSearch"/>
|
|
|
</view>
|
|
|
- <view style="padding:0 0upx 0 8upx;" >
|
|
|
- <button class="admin-button-com middle blue" @click.stop="openOption">{{globalLookStock==0 ? '库存筛选' : globalLookStock==1 ? '有库存' : '没库存' }}</button>
|
|
|
- </view>
|
|
|
<view style="padding:0 0upx 0 8upx;" >
|
|
|
<button class="admin-button-com middle blue" @click="pageTo({ url: '/admin/ptItem/itemList' })">添花材</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <button class="admin-button-com middle blue" @click="refreshItem()" style="position: absolute;top:120upx;right:24upx;z-index:99;">刷 新</button>
|
|
|
+ <button class="admin-button-com middle blue" @click="refreshItem()" style="position: absolute;top:245upx;right:24upx;z-index:99;">刷 新</button>
|
|
|
|
|
|
<view class="scroll-middle_bx">
|
|
|
<scroll-view scroll-y scroll-with-animation class="tab-view">
|
|
|
@@ -89,20 +108,6 @@
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
|
|
|
- <uni-popup ref="searchOptionRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
|
|
|
- <view style="display:flex;padding:80upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
|
|
|
- <view @tap.stop="changeHasStock(2)" style="margin-bottom:20upx;">
|
|
|
- <view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">没库存</view>
|
|
|
- </view>
|
|
|
- <view @tap.stop="changeHasStock(1)" style="margin-bottom:20upx;">
|
|
|
- <view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">有库存</view>
|
|
|
- </view>
|
|
|
- <view @tap.stop="changeHasStock(0)" style="margin-bottom:20upx;">
|
|
|
- <view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">重新选</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
-
|
|
|
<uni-popup ref="rightShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
|
|
|
<view class="action-popup-container">
|
|
|
<view class="action-button-item">
|
|
|
@@ -353,12 +358,8 @@ export default {
|
|
|
},
|
|
|
changeHasStock(check){
|
|
|
this.globalLookStock = check
|
|
|
- this.$refs.searchOptionRef.close()
|
|
|
this.reGetGlobalProductList()
|
|
|
},
|
|
|
- openOption(){
|
|
|
- this.$refs.searchOptionRef.open('top')
|
|
|
- },
|
|
|
initItem(){
|
|
|
this.globalRequestType = 'itemList'
|
|
|
this.initData()
|
|
|
@@ -635,7 +636,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
.input-wrap {
|
|
|
display: flex;
|
|
|
- padding: 22upx 20upx 22upx 13upx;
|
|
|
+ padding: 10upx 20upx 22upx 13upx;
|
|
|
.search-bar {
|
|
|
flex: 1;
|
|
|
}
|
|
|
@@ -714,6 +715,77 @@ export default {
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
+.modern-tabs-container {
|
|
|
+ padding: 0;
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.modern-tabs {
|
|
|
+ display: flex;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 6upx;
|
|
|
+ box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.06);
|
|
|
+ border: 2upx solid #f0f2f5;
|
|
|
+ position: relative;
|
|
|
+ z-index: 5;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.modern-tab {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 16upx 0;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
|
|
|
+ border-radius: 12upx;
|
|
|
+ margin: 0 2upx;
|
|
|
+ background-color: #fafafa; /* 未选中态背景 */
|
|
|
+ border: 2upx solid #f2f4f7; /* 未选中态边框 */
|
|
|
+ box-shadow: none;
|
|
|
+
|
|
|
+ .tab-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-icon {
|
|
|
+ font-size: 32upx;
|
|
|
+ margin-bottom: 4upx;
|
|
|
+ display: block;
|
|
|
+ opacity: 0.85; /* 未选中态图标降低对比 */
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active .tab-icon {
|
|
|
+ filter: brightness(1.15);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ font-size: 29upx;
|
|
|
+ color: #666;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #09C567;
|
|
|
+
|
|
|
+ .tab-text {
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 29upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* H5 未选中态悬停效果（其它端不影响） */
|
|
|
+ &:not(.active):hover {
|
|
|
+ background-color: #f6f7f9;
|
|
|
+ border-color: #e9ecef;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.action-button-item {
|
|
|
&.cancel {
|
|
|
grid-column: 1 / -1;
|
