|
|
@@ -4,10 +4,11 @@
|
|
|
<view class="search-bar">
|
|
|
<app-search-module v-model="searchText" placeholder="输入名称" @input="searchFn" />
|
|
|
</view>
|
|
|
- <view style="padding-left:10upx;">
|
|
|
- <button class="admin-button-com middle blue" style="margin-right:8upx;" @click.stop="openPriceOption">{{lookStock==0 ? '价格' : lookStock==1 ? '有价' : '无价' }}</button>
|
|
|
- <button class="admin-button-com middle blue" style="margin-right:8upx;" @click.stop="openOption">{{lookStock==0 ? '库存' : lookStock==1 ? '有的' : '没有' }}</button>
|
|
|
- <button class="admin-button-com middle blue" style="margin-right:8upx;" @click="selectFlowerNumFn()">支数</button>
|
|
|
+ <view style="padding-left:10upx;" class="button-group">
|
|
|
+ <button class="admin-button-com middle blue filter-btn" style="margin-right:8upx;" @click.stop="openFilterPanel">
|
|
|
+ 筛选
|
|
|
+ <text v-if="hasActiveFilters" class="filter-dot"></text>
|
|
|
+ </button>
|
|
|
<button class="admin-button-com middle blue" @click="addGoods()">新增</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -27,7 +28,7 @@
|
|
|
<view v-if="goodsItem.stock <= 0" class="sold-out">
|
|
|
<view class="sold-out-xj">已下架</view>
|
|
|
</view>
|
|
|
- <img :src="goodsItem.smallCover" mode="aspectFit" />
|
|
|
+ <image :src="goodsItem.smallCover" mode="aspectFit" />
|
|
|
</view>
|
|
|
<view class="goods-det">
|
|
|
<view class="goods-det-top" style="margin-bottom:4upx;">
|
|
|
@@ -60,91 +61,129 @@
|
|
|
</block>
|
|
|
</view>
|
|
|
|
|
|
- <!--选择支数 -->
|
|
|
- <uni-popup ref="selectFlowerNumRef" background-color="#fff" type="center" :animation="false">
|
|
|
- <view style="display:flex;padding:20upx;height:25vh;justify-content: space-between;align-items:center;flex-wrap:wrap;">
|
|
|
-
|
|
|
- <text v-for="(item, index) in flowerNumList" :key="index" @click="selectFlowerNum(item.num)"
|
|
|
- style="margin-left:25upx;border:1upx solid #999999;width:100upx;height:100upx;border-radius:20upx;justify-content:center;align-items:center;display:flex;">
|
|
|
- {{item.name}}
|
|
|
- </text>
|
|
|
+ <!-- 筛选下拉面板 -->
|
|
|
+ <view v-if="showFilterPanel" class="filter-overlay" @click="closeFilterPanel">
|
|
|
+ <view class="filter-panel" @click.stop>
|
|
|
+ <view class="filter-header">筛选商品</view>
|
|
|
+
|
|
|
+ <!-- 价格筛选 -->
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">价格</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in priceOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ 'active': selectedPrice === item.value }"
|
|
|
+ @click="selectPrice(item.value)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- </view>
|
|
|
- </uni-popup>
|
|
|
+ <!-- 库存筛选 -->
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">库存</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in stockOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ 'active': selectedStock === item.value }"
|
|
|
+ @click="selectStock(item.value)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
-
|
|
|
- <uni-popup ref="searchPriceOptionRef" 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="changePriceStyle(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="changePriceStyle(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="changePriceStyle(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>
|
|
|
+ <!-- 支数筛选 -->
|
|
|
+ <view class="filter-section">
|
|
|
+ <view class="filter-title">支数</view>
|
|
|
+ <view class="filter-options">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in flowerNumOptions"
|
|
|
+ :key="index"
|
|
|
+ class="filter-option"
|
|
|
+ :class="{ 'active': selectedFlowerNum === item.value }"
|
|
|
+ @click="selectFlowerNum(item.value)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <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>
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <view class="filter-actions">
|
|
|
+ <button class="filter-action-btn clear-btn middle" @click="clearFilters">清空</button>
|
|
|
+ <button class="filter-action-btn confirm-btn middle blue" @click="confirmFilters">确定</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
import AppSearchModule from "@/components/module/app-search"
|
|
|
-import OperateModule from "@/admin/home/components/module/operate"
|
|
|
import AppWrapperEmpty from "@/components/app-wrapper-empty"
|
|
|
-import ModalModule from "@/components/plugin/modal"
|
|
|
import {categoryListInfo,getCategoryToGoods,print} from "@/api/goods"
|
|
|
import { list } from "@/mixins"
|
|
|
export default {
|
|
|
name: "list",
|
|
|
components: {
|
|
|
- OperateModule,
|
|
|
AppWrapperEmpty,
|
|
|
- ModalModule,
|
|
|
AppSearchModule
|
|
|
},
|
|
|
mixins: [list],
|
|
|
data() {
|
|
|
return {
|
|
|
tabbar: [],
|
|
|
- height: 0,
|
|
|
currentTab: 0,
|
|
|
scrollTop: 0,
|
|
|
catId: "",
|
|
|
- delModal: false,
|
|
|
- operateData: {},
|
|
|
- operateShow: false,
|
|
|
- operateIndex: null,
|
|
|
- operateTop: 0,
|
|
|
- autoLoad:false,
|
|
|
flowerNum:0,
|
|
|
- flowerNumList:[{num:6,name:6},{num:9,name:9},{num:11,name:11},{num:19,name:19},{num:33,name:33},{num:52,name:52},{num:66,name:66},{num:99,name:99},{num:0,name:'取消'}],
|
|
|
searchText:'',
|
|
|
- lookStock:0,
|
|
|
- lookPrice:0
|
|
|
+ lookStock:0, // 1:有库存 2:无库存
|
|
|
+ lookPrice:0, // 1:有价格 2:无价格
|
|
|
+ // 新增筛选相关数据
|
|
|
+ showFilterPanel: false,
|
|
|
+ selectedPrice: null, // 选中的价格筛选
|
|
|
+ selectedStock: null, // 选中的库存筛选
|
|
|
+ selectedFlowerNum: null, // 选中的支数筛选
|
|
|
+ // 筛选选项配置
|
|
|
+ priceOptions: [
|
|
|
+ { label: '有价格', value: 1 },
|
|
|
+ { label: '无价格', value: 2 }
|
|
|
+ ],
|
|
|
+ stockOptions: [
|
|
|
+ { label: '有库存', value: 1 },
|
|
|
+ { label: '无库存', value: 2 }
|
|
|
+ ],
|
|
|
+ flowerNumOptions: [
|
|
|
+ { label: '6支', value: 6 },
|
|
|
+ { label: '9支', value: 9 },
|
|
|
+ { label: '11支', value: 11 },
|
|
|
+ { label: '19支', value: 19 },
|
|
|
+ { label: '33支', value: 33 },
|
|
|
+ { label: '52支', value: 52 },
|
|
|
+ { label: '66支', value: 66 },
|
|
|
+ { label: '99支', value: 99 }
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
|
|
|
+ computed: {
|
|
|
+ // 检查是否有活跃的筛选条件
|
|
|
+ hasActiveFilters() {
|
|
|
+ return this.selectedPrice !== null || this.selectedStock !== null || this.selectedFlowerNum !== null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
onShow() {
|
|
|
// 检查是否需要刷新数据
|
|
|
const shouldRefresh = uni.getStorageSync('goods_list_refresh');
|
|
|
if (shouldRefresh) {
|
|
|
- console.log('检测到需要刷新商品列表');
|
|
|
uni.removeStorageSync('goods_list_refresh');
|
|
|
this.resetList();
|
|
|
this.getGoodsList();
|
|
|
@@ -155,20 +194,62 @@ export default {
|
|
|
init(){
|
|
|
this.getCategoryData()
|
|
|
},
|
|
|
- changeHasStock(check){
|
|
|
- this.lookStock = check
|
|
|
- this.$refs.searchOptionRef.close()
|
|
|
- },
|
|
|
- openOption(){
|
|
|
- this.$refs.searchOptionRef.open('top')
|
|
|
- },
|
|
|
- changePriceStyle(){
|
|
|
- this.lookPrice = check
|
|
|
- this.$refs.searchPriceOptionRef.close()
|
|
|
+
|
|
|
+ // 新的筛选相关方法
|
|
|
+ openFilterPanel() {
|
|
|
+ this.showFilterPanel = true;
|
|
|
},
|
|
|
- openPriceOption(){
|
|
|
- this.$refs.searchPriceOptionRef.open('top')
|
|
|
+
|
|
|
+ closeFilterPanel() {
|
|
|
+ this.showFilterPanel = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ selectPrice(value) {
|
|
|
+ this.selectedPrice = this.selectedPrice === value ? null : value;
|
|
|
+ },
|
|
|
+
|
|
|
+ selectStock(value) {
|
|
|
+ this.selectedStock = this.selectedStock === value ? null : value;
|
|
|
},
|
|
|
+
|
|
|
+ selectFlowerNum(value) {
|
|
|
+ this.selectedFlowerNum = this.selectedFlowerNum === value ? null : value;
|
|
|
+ },
|
|
|
+
|
|
|
+ clearFilters() {
|
|
|
+ this.selectedPrice = null;
|
|
|
+ this.selectedStock = null;
|
|
|
+ this.selectedFlowerNum = null;
|
|
|
+
|
|
|
+ // 清空后立即更新筛选变量
|
|
|
+ this.lookPrice = 0;
|
|
|
+ this.lookStock = 0;
|
|
|
+ this.flowerNum = 0;
|
|
|
+
|
|
|
+ // 关闭筛选面板
|
|
|
+ this.closeFilterPanel();
|
|
|
+
|
|
|
+ // 触发搜索
|
|
|
+ this.resetList();
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+
|
|
|
+ confirmFilters() {
|
|
|
+ // 更新原有的筛选变量以保持兼容性
|
|
|
+ this.lookPrice = this.selectedPrice || 0;
|
|
|
+ this.lookStock = this.selectedStock || 0;
|
|
|
+ this.flowerNum = this.selectedFlowerNum || 0;
|
|
|
+
|
|
|
+ // 关闭筛选面板
|
|
|
+ this.closeFilterPanel();
|
|
|
+
|
|
|
+ // 重新加载数据
|
|
|
+ this.resetList();
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 保留原有方法以保持兼容性（暂时保留）
|
|
|
+ // 兼容保留：旧筛选弹窗相关方法已不再使用
|
|
|
moreToDo(item){
|
|
|
let that=this;
|
|
|
let doList = ['打1个标签', '打2个标签','打5个标签', '打10个标签', '销售记录', '设置为散花']
|
|
|
@@ -178,7 +259,7 @@ export default {
|
|
|
success: function (respond) {
|
|
|
let index = respond.tapIndex
|
|
|
if(index == 4){
|
|
|
- this.$msg('开发中')
|
|
|
+ that.$msg('开发中')
|
|
|
return
|
|
|
}
|
|
|
if(index == 5){
|
|
|
@@ -194,18 +275,6 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- selectFlowerNumFn(){
|
|
|
- this.$refs.selectFlowerNumRef.open('top')
|
|
|
- },
|
|
|
- selectFlowerNum(num){
|
|
|
- this.$refs.selectFlowerNumRef.close()
|
|
|
- this.flowerNum = num
|
|
|
- this.resetList();
|
|
|
- this.getGoodsList();
|
|
|
- },
|
|
|
- getSaleRecord(){
|
|
|
- this.$msg('开发中')
|
|
|
- },
|
|
|
getStockChange(item){
|
|
|
this.$util.pageTo({url: "/admin/goods/stockChange?id="+item.id+'&name='+item.name})
|
|
|
},
|
|
|
@@ -224,9 +293,6 @@ export default {
|
|
|
addGoods(){
|
|
|
this.$util.pageTo({url:"/admin/goods/add"})
|
|
|
},
|
|
|
- cgPlant(){
|
|
|
- this.$util.pageTo({url:"/admin/goods/plant"})
|
|
|
- },
|
|
|
edit(id){
|
|
|
this.$util.pageTo({ url: "/admin/goods/detail", query: { id: id } })
|
|
|
},
|
|
|
@@ -245,13 +311,13 @@ export default {
|
|
|
this.getGoodsList()
|
|
|
}else{
|
|
|
this.resetList()
|
|
|
- getCategoryToGoods({status:'',page:this.list.page,flower:1,searchText:this.searchText,flowerNum:this.flowerNum}).then(res => {
|
|
|
+ getCategoryToGoods({status:'',page:this.list.page,flower:1,searchText:this.searchText,flowerNum:this.flowerNum,lookPrice:this.lookPrice,lookStock:this.lookStock}).then(res => {
|
|
|
this.completes(res)
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
getGoodsList() {
|
|
|
- return getCategoryToGoods({ status:'', page: this.list.page, catId:this.catId,flowerNum:this.flowerNum }).then(res => {
|
|
|
+ return getCategoryToGoods({ status:'', page: this.list.page, catId:this.catId, flowerNum:this.flowerNum, lookPrice:this.lookPrice, lookStock:this.lookStock }).then(res => {
|
|
|
this.completes(res)
|
|
|
})
|
|
|
},
|
|
|
@@ -427,4 +493,127 @@ page {
|
|
|
flex: 1;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+/* 筛选按钮样式 */
|
|
|
+.filter-btn {
|
|
|
+ position: relative;
|
|
|
+ .filter-dot {
|
|
|
+ position: absolute;
|
|
|
+ top: 5upx;
|
|
|
+ right: 5upx;
|
|
|
+ width: 12upx;
|
|
|
+ height: 12upx;
|
|
|
+ background-color: #ff4757;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 筛选面板样式 */
|
|
|
+.filter-overlay {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ z-index: 9999;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-panel {
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 0 0 20upx 20upx; /* 只保留下边圆角 */
|
|
|
+ width: 100%; /* 铺满宽度 */
|
|
|
+ max-height: 80vh;
|
|
|
+ overflow-y: auto;
|
|
|
+ animation: slideDown 0.3s ease-out;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes slideDown {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(-50upx);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.filter-header {
|
|
|
+ text-align: center;
|
|
|
+ padding: 30upx 0;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-section {
|
|
|
+ padding: 30upx 40upx;
|
|
|
+ border-bottom: 1upx solid #f0f0f0;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.filter-title {
|
|
|
+ font-size: 28upx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-options {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-option {
|
|
|
+ padding: 16upx 32upx;
|
|
|
+ border: 2upx solid #e0e0e0;
|
|
|
+ border-radius: 25upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #666;
|
|
|
+ background-color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 120upx;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ border-color: #52c41a;
|
|
|
+ background-color: #f6ffed;
|
|
|
+ color: #52c41a;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.filter-actions {
|
|
|
+ display: flex;
|
|
|
+ padding: 30upx 40upx;
|
|
|
+ gap: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-action-btn {
|
|
|
+ flex: 1;
|
|
|
+ padding: 14upx 0;
|
|
|
+ border-radius: 12upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ border: none;
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ &.clear-btn {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.confirm-btn {
|
|
|
+ background-color: #09C567;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
