front-end/ghsApp/src/admin/changePrice/changeHide.vue

<template>
<view class="app-content">
    <!-- 顶部筛选标签 -->
    <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-text">全部</text>
                </view>
            </view>
            <view class="modern-tab" :class="{ 'active': globalLookStock === 1 }" @click="changeHasStock(1)">
                <view class="tab-content">
                    <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-text">没库存</text>
                </view>
            </view>
        </view>
    </view>

    <!-- 主容器 -->
	<view class="billing_box_bg">
        <!-- 搜索栏 -->
        <view class="input-wrap">
			<view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;">
				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
			</view>
			<view class="search-bar">
				<app-search-module ref="globalSearchRef" v-model="globalPy" placeholder="这里搜索" @input="globalSearch" />
			</view>
		</view>

        <!-- 主内容区 -->
		<view class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view">
				<div v-for="(item, index) in globalClassData" :key="index" class="tab-bar-item" :class="[globalClassIndex == index ? 'active' : '']" @tap.stop="currentSwitchClass(index,item)">
					<text>{{ item.name || "" }}</text>
				</div>
			</scroll-view>

			<scroll-view scroll-y class="right-box"
				:scroll-top="globalScrollTopPlace"
				@scroll="globalGetScroll"
				:scroll-into-view="scroll_into_view" 
				scroll-with-animation="true"
				lower-threshold="100"
				@scrolltolower="globalScrollBottom">

                <!-- 内容列表 -->
				<block v-if="!$util.isEmpty(globalItemData)">
					<view class="item_list_bx">
                        <!-- 按分类分组显示 -->
                        <view v-for="(groupData, groupIndex) in itemGroups" :key="groupIndex">
                            <!-- 分类标题 + 全选按钮 -->
                            <view class="item_list_title" v-if="groupData.className">
                                <view class="title-row">
                                    <text class="class-name">{{ groupData.className }}</text>
                                    <text class="select-all-btn" @click.stop="toggleGroupSelection(groupIndex)">
                                        {{ isGroupAllSelected(groupIndex) ? '全不选' : '全选' }}
                                    </text>
                                </view>
                            </view>

                            <!-- 分类下的商品 -->
                            <view v-for="(productItem, itemIndex) in groupData.items" :key="productItem.id" style="height:190upx">
                                <ItemComponent 
                                    :isPrice="false" 
                                    :info="productItem" 
                                    :isChecked="isItemChecked(productItem.id)"
                                    @checkChange="handleItemCheck(productItem, $event)"
                                    @cancelPreSellFn="cancelPreSellFn">
                                </ItemComponent>
                            </view>
                        </view>
					</view>
				</block>
                <!-- 空状态 -->
				<block v-else>
					<view style="width: 100%">
						<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(globalItemData)"/>
					</view>
				</block>

			</scroll-view>
		</view>

        <!-- 底部按钮 -->
        <div class="app-footer">
			<button class="admin-button-com big blue footer-btn-left" @click="commitShow">批量显示</button>
            <button class="admin-button-com big blue footer-btn-right" @click="commitHide">批量隐藏</button>
        </div>

        <!-- 分类选择弹窗 -->
		<uni-popup ref="globalClassImgRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
			<view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
				<view v-for="(item, index) in globalClassData" :key="index" @tap.stop="currentChangeClass(index,item)" style="margin-bottom:20upx;margin-left:3upx;">
				<image :src="item.cover" style="width:120upx;height:120upx;border-radius:10upx;"></image>
				<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;">{{item.name}}</view>
				</view>
			</view>
		</uni-popup>

	</view>
</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ItemComponent from "./components/changeHide";
import productMins from "@/mixins/product2";
import { mapGetters } from "vuex";
import { batchChangeFrontHide } from "@/api/item";
import { cancelPreSell } from '@/api/product'

export default {
	name: "changeHide",
	components: {
		AppSearchModule,
		AppWrapperEmpty,
		ItemComponent
	},
	mixins: [productMins],
	data() {
		return {
			autoLoad: false,
			selectJobType: "stock",
            selectedIdsSet: new Set()
		};
	},
	computed: {
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
		
		selectedCount() {
			return this.selectedIdsSet.size;
		},
		
        itemGroups() {
            if (this.$util.isEmpty(this.globalItemData)) {
                return [];
            }
            
            const groups = [];
            let currentGroup = null;
            
            this.globalItemData.forEach((item) => {
                if (item.className && item.className !== '') {
                    currentGroup = {
                        className: item.className,
                        items: [item]
                    };
                    groups.push(currentGroup);
                } else if (currentGroup) {
                    currentGroup.items.push(item);
                }
            });
            
            return groups;
        }
	},
	onLoad() {
		this.initProduct()
	},
	methods: {
        isItemChecked(itemId) {
            return this.selectedIdsSet.has(itemId);
        },

        handleItemCheck(productItem, isChecked) {
            const id = productItem.id;
            if (isChecked) {
                this.selectedIdsSet.add(id);
            } else {
                this.selectedIdsSet.delete(id);
            }
            this.$forceUpdate();
        },

        isGroupAllSelected(groupIndex) {
            const group = this.itemGroups[groupIndex];
            if (!group || group.items.length === 0) return false;
            
            return group.items.every(item => this.selectedIdsSet.has(item.id));
        },

        toggleGroupSelection(groupIndex) {
            const group = this.itemGroups[groupIndex];
            if (!group) return;
            
            const isAllSelected = this.isGroupAllSelected(groupIndex);
            
            group.items.forEach(item => {
                if (isAllSelected) {
                    this.selectedIdsSet.delete(item.id);
                } else {
                    this.selectedIdsSet.add(item.id);
                }
            });
            
            this.$forceUpdate();
        },

		selectFlowerNumFn(){
			this.$refs.globalClassImgRef.open('top')
		},
		
		changeHasStock(check){
			this.globalLookStock = check
			this.reGetGlobalProductList()
		},
		
		cancelPreSellFn(item){
			this.$util.confirmModal({content:'确认取消预售？'},() => {
				cancelPreSell({id:item.id}).then(res=>{
					if(res.code == 1){
						this.$msg(res.msg)
					}
				})
			})
		},		
		initProduct(){
			this.globalRequestType = 'itemList'
			this.initData()
			uni.hideLoading()
		},
		
		commitHide(){
			if(this.selectedIdsSet.size === 0){
				this.$msg('请选择花材')
				return;
			}
			this.$util.confirmModal({content:'确认隐藏 ' + this.selectedIdsSet.size + ' 个花材？'},() => {
				this.commitChange(1)
			})
		},
		commitShow(){
			if(this.selectedIdsSet.size === 0){
				this.$msg('请选择花材')
				return;
			}
			this.$util.confirmModal({content:'确认显示 ' + this.selectedIdsSet.size + ' 个花材？'},() => {
				this.commitChange(0)
			})
		},
		commitChange(hideStatus){
            const ids = Array.from(this.selectedIdsSet);
			batchChangeFrontHide({ids:JSON.stringify(ids), frontHide: hideStatus}).then(res=>{
				if(res.code == 1){
					this.$msg(res.msg)
					this.initData()
				}
			})
		},
		currentSwitchClass(index,item){
			this.globalSwitchClass(index,item)
		},
		
		currentChangeClass(index,item){
			this.$refs.globalClassImgRef.close()
			this.globalSwitchClass(index,item)
		}
	}
};
</script>

<style lang="scss" scoped>
.app-content {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	background: white;
}

.modern-tabs-container {
	flex-shrink: 0;
    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: 30upx 0;
    position: relative;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 12upx;
    margin: 0 2upx;
    background-color: #e2dfdf;
    border: 2upx solid #f2f4f7;
    box-shadow: none;
    
    .tab-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .tab-text {
        font-size: 30upx;
        color: #666;
        font-weight: 700;
    }
    
    &.active {
        background: #3385FF;
        
        .tab-text {
            color: #ffffff;
            font-weight: 700;
            font-size: 30upx;
        }
    }
    
    &:not(.active):hover {
        background-color: #f6f7f9;
        border-color: #e9ecef;
    }
}

.billing_box_bg {
	flex: 1;
	background: white;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	.input-wrap {
		display: flex;
		padding: 22upx 20upx 22upx 13upx;
		flex-shrink: 0;
		
		.search-bar {
			flex: 1;
		}
	}

	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		overflow: hidden;
	}

	.tab-view {
		width: 170upx;
		flex-shrink: 0;
		background-color: #f0f2f6;
		padding-bottom: 100upx;

		.tab-bar-item {
			position: relative;
			width: 170upx;
			height: 90upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;

			&:last-child {
				margin-bottom: 110upx;
			}

			&.active {
				position: relative;
				color: $mainColor;
				font-size: 26upx;
				background: #fff;

				&::before {
					content: "";
					position: absolute;
					border-left: 8upx solid $mainColor;
					height: 100%;
					left: 0;
				}
			}
		}
	}

	.right-box {
		flex: 1;
		box-sizing: border-box;
	}

	.item_list_bx {
		padding: 40upx 16upx;

        .item_list_title {
            margin-bottom: 20upx;
            font-size: 34upx;
            font-weight: 600;
            color: #3385FF;

            .title-row {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .class-name {
                flex: 1;
            }

            .select-all-btn {
                color: #3385FF;
                font-size: 34upx;
                font-weight: bold;
                padding: 8upx 16upx;
                white-space: nowrap;
                background: #E8F2FF;
                border-radius: 8upx;
            }
        }
	}

	.app-footer {
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;
		flex-shrink: 0;
		padding: 20upx;
		background: white;
		box-shadow: 0 -2upx 8upx rgba(0, 0, 0, 0.1);

		.footer-btn-left {
			width: 280upx;
			margin-right: 40upx;
		}

		.footer-btn-right {
			width: 280upx;
		}
	}
}

.class-popup-style {
	z-index: 999999;
}
</style>