LocalLivingServicesUniapp/pages/coupon/activity.vue

<template>
    <view class="creat">

        <cu-custom bgColor="bg-fff" :isBack="true">
            <block slot="content">选择活动商品</block>
        </cu-custom>
        <view class="search-style">
            <view class="search">
                <image src="/static/index/search.png" mode=""></image>
                <u-input type="text" v-model="productName" placeholder="搜索商品名称" />
                <span @click="searchList">搜索</span>
            </view>
            <view class="type">
                <text style="margin-right: 10px;" :style="showCategoryPopup ? 'color: #449AFF;' : ''"
                    @click="showCategoryPopup = !showCategoryPopup">{{ selectedCategory ||
                        '全部类型' }}<i :class="showCategoryPopup ? 'typeI' : ''"></i></text>
                <!-- <u-select style="position: absolute;top:0" mode="single-column" :list="industryoptions"
                    v-model="industryShow" label-name="lable" value-name="value"
                    @confirm="industryopConfirm($event)"></u-select> -->
            </view>
        </view>
        <!-- 弹出层 -->
        <view :class="['dropdown-content', { 'show': showCategoryPopup }]" @tap="searchPopup">
            <view class="dropdown-content2">
                <view
                    :class="['dropdown-content1', 'flex', 'justify-between', '', { 'scolcentent': showCategoryPopup }]"
                    @tap.stop.prevent>
                    <scroll-view scroll-y class="colcentent">
                        <view class="category-content">
                            <!-- 第一级 -->
                            <scroll-view scroll-y class="category-column">
                                <view v-for="item in firstLevel" :key="item.id"
                                    :class="['category-item', selectedFirst === item.id ? 'active' : '']"
                                    @click="selectFirst(item)">
                                    {{ item.name }}
                                </view>
                            </scroll-view>

                            <!-- 第二级 -->
                            <scroll-view scroll-y class="category-column">
                                <view v-for="item in secondLevel" :key="item.id"
                                    :class="['category-item', selectedSecond === item.id ? 'active' : '']"
                                    @click="selectSecond(item)">
                                    {{ item.name }}
                                </view>
                            </scroll-view>

                            <!-- 第三级 -->
                            <scroll-view scroll-y class="category-column">
                                <view v-for="item in thirdLevel" :key="item.id"
                                    :class="['category-item', selectedThird === item.id ? 'active' : '']"
                                    @click="selectThird(item)">
                                    {{ item.name }}
                                </view>
                            </scroll-view>
                        </view>
                    </scroll-view>

                </view>
                <view class="operateBtn flex ">
                    <view class="cancel " @click.stop="showCategoryPopup = false">
                        取消
                    </view>
                    <view class="confirm " @click.stop="querysearch">
                        确定
                    </view>
                </view>
            </view>

        </view>
        <view class="top"></view>
        <view class="content">
            <view class="product-item" v-for="(item, index) in productList" :key="index"
                @click="handleRadioChange(item.productId)">
                <view class="product-info">
                    <image class="product-image" :src="item.productImage" mode="aspectFill"></image>
                    <view class="product-details">
                        <view class="product-name">{{ item.productName }}</view>
                        <!-- <view class="product-date">{{ item.saleStartDate + '-' + item.saleEndDate }}</view> -->
                        <view class="product-price">
                            <text class="actual-price">¥{{ item.soldPrice }}</text>
                            <text class="original-price">¥{{ item.price }}</text>
                        </view>
                    </view>
                </view>
                <view v-if="selectedIds.indexOf(item.productId) == '-1'" class="radio-container"></view>
                <image v-else class="radio-img" src="/static/coupon/danxuan.png" mode=""></image>
            </view>
        </view>
        <view class="btn">
            <view class="flex">
                <view @click="groupChange(1)" class="flex">
                    <text v-if="!selectAll" style="display: inline-block;" class="radio-container"></text>
                    <image v-else style=" vertical-align: top" class="radio-img" src="/static/coupon/quanxuan.png"
                        mode=""></image>
                    <text style="margin-left:10rpx">全选</text>
                </view>
                <view @click="groupChange(2)" class="flex" style="margin-left:36rpx">
                    <text v-if="!invertAll" style="display: inline-block;" class="radio-container"></text>
                    <image v-else style=" vertical-align: top;" class="radio-img" src="/static/coupon/danxuan.png"
                        mode=""></image>
                    <text style="margin-left:10rpx">反选</text>
                </view>
            </view>
            <button class="cu-btn submit round " @click="submitDistribution" v-if="rowDetail.consumerId"
                :disabled="this.selectedIds.length == 0">确定发放</button>
            <button class="cu-btn submit round " @click="submit" v-else
                :disabled="this.selectedIds.length == 0">确定</button>

        </view>

    </view>
</template>
<script>
import { USER_INFO } from "@/common/util/constants"
import {
    mapState
} from 'vuex'

export default {
    data() {
        return {
            showCategoryPopup: false,
            selectedFirst: null,
            selectedSecond: null,
            selectedThird: null,
            firstLevel: [],
            secondLevel: [],
            thirdLevel: [],
            selectAll: false,
            invertAll: false,
            productList: [], // 商品列表
            selectedIds: [], // 当前选中的商品ID组
            radiovalue1: '',
            productName: '',
            selectedCategory: '全部类型',
            industryShow: false,
            rowDetail: {},
            categoryId: ''
        }
    },
    onLoad(e) {

        this.getList()
        this.$http.get('/sys/category/getChildListBatch?parentIds=1889836358116098050').then(res => {
            if (res.data.success) {
                this.firstLevel = res.data.result.records
            }
            else {
                this.$tip.error(res.data.message);
            }
        })
        if (e && e.params) {
            this.selectedIds = JSON.parse(decodeURIComponent(e.params))
        }
        if (e && e.row) {
            this.rowDetail = JSON.parse(decodeURIComponent(e.row))
        }

    },
    methods: {
        async getSearch(id, type) {
            let res = await this.$http.get('/sys/category/childList?pid=' + id)
            if (res.data.success) {
                this[type + 'Level'] = res.data.result
            }
        },
        searchPopup() {
            this.showCategoryPopup = !this.showCategoryPopup;
        },
        getList() {
            this.$http.post('/merchant/localVoucherInfo/getProductList', { merchantId: uni.getStorageSync(USER_INFO).merchantId, productName: this.productName, categoryId: this.categoryId }).then(res => {
                if (res.data.success) {
                    this.productList = res.data.result
                }
                else {
                    this.$tip.error(res.data.message);
                }
            })
        },

        selectFirst(item) {
            this.selectedFirst = item.id
            this.selectedSecond = null
            this.selectedThird = null
            this.selectedCategory = item.name
            // 根据选择加载二级分类
            this.getSearch(item.id, 'second')
            this.thirdLevel = []
        },

        selectSecond(item) {
            this.selectedSecond = item.id
            this.selectedThird = null
            this.selectedCategory = item.name
            // 根据选择加载三级分类
            this.getSearch(item.id, 'third')

        },

        selectThird(item) {
            this.selectedThird = item.id
            this.selectedCategory = item.name
        },
        querysearch() {
            this.showCategoryPopup = false
            this.categoryId = this.selectedThird ? this.selectedThird : this.selectedSecond ? this.selectedSecond : this.selectedFirst
            this.getList()
        },
        groupChange(e) {
            if (e == 1) {
                this.selectedIds = !this.selectAll ? this.productList.map(item => item.productId) : []
                this.selectAll = !this.selectAll
                this.invertAll = false
            }
            if (e == 2) {
                // 反选功能
                this.invertAll = !this.invertAll
                this.selectAll = false
                // 获取所有商品ID
                const allProductIds = this.productList.map(item => item.productId)

                // 创建新的选中数组
                let newSelectedIds = []

                // 遍历所有商品ID
                allProductIds.forEach(productId => {
                    // 如果当前ID不在已选中列表中，则添加到新列表
                    // 如果当前ID在已选中列表中，则不添加（即取消选中）
                    if (!this.selectedIds.includes(productId)) {
                        newSelectedIds.push(productId)
                    }
                })

                // 更新选中列表
                this.selectedIds = newSelectedIds

            }
        },
        searchList() {
            this.getList()
        },
        // 发放
        submitDistribution() {
            this.$http.post('/merchant/localConsumerUserInfo/addStoreProductOut', { ...this.rowDetail, productIds: this.selectedIds, merchantId: uni.getStorageSync(USER_INFO).merchantId, }).then(res => {
                if (res.data.success) {
                    this.$tip.success(res.data.message || '发放成功');
                    uni.navigateBack({
                        delta: 1
                    });
                }
                else {
                    this.$tip.error(res.data.message);
                }
            })
        },
        // 确认
        submit() {
            uni.navigateBack({
                delta: 1
            });
            if (this.selectedIds.length > 0) {
                this.$store.state.shopSelectedIds = this.selectedIds
                // uni.setStorageSync('allowanceSelected', this.selectedIds)
            }
        },
        // 单选按钮变化处理
        handleRadioChange(id) {
           this. selectAll =false;
           this. invertAll = false
            // 判断是否已存在
            const index = this.selectedIds.indexOf(id)
            if (index > -1) {
                // 如果存在则删除
                this.selectedIds.splice(index, 1)
            } else {
                // 如果不存在则添加
                this.selectedIds.push(id)
            }

            // if (e) {
            //     this.selectedId.push(item.id);
            // } else {
            //     this.selectedId
            // }
        },

    }
}
</script>
<style scoped lang="scss">
.creat {
    width: 100vw;
    height: 100vh;
    background: #F7F8FC;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.top {
    width: 100%;
    height: var(--status-bar-height);
    background-color: #fff;
}

.content {
    width: 100%;
    flex: 1;
    padding: 24rpx;
    overflow-y: auto;
}

.btn {
    width: 100%;
    padding: 18rpx 26rpx;
    height: 112rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .submit {
        color: #fff;
        width: 205rpx;
        text-align: center;
        background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
    }
}

.search-style {
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    background: #fff;
    padding: 16rpx 24rpx;

    .type {
        background: #FFFFFF;
        font-size: 26rpx;
        color: #333333;
        margin-top: 23rpx;
        position: relative;

        i {
            margin-left: 12rpx;
            display: inline-block;
            width: 0;
            height: 0;
            border: 4px solid;
            border-color: #AFB0B3;
            border-bottom: 4px solid transparent;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
        }

        .typeI {
            border-color: #449AFF;
            border-top: 4px solid transparent;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
            margin-bottom: 8rpx;
        }
    }

    .search {
        height: 55rpx;
        background: #F7F8FC;
        border-radius: 12rpx;
        padding: 0rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
            width: 36rpx;
            height: 36rpx;
        }

        input {
            // height: 36rpx;
            font-size: 26rpx;
        }

        span {
            font-size: 26rpx;
            color: #333333;
        }
    }
}

.product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background: #FFFFFF;
    margin-bottom: 20rpx;
    //   border-bottom: 1px solid #EEEEEE;
}

.product-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.product-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
}

.product-details {
    flex: 1;
}

.product-name {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 8rpx;
}

.product-date {
    font-size: 24rpx;
    color: #999999;
    margin-bottom: 8rpx;
}

.product-price {
    display: flex;
    align-items: baseline;
}

.actual-price {
    font-size: 32rpx;
    color: #FF4B33;
    font-weight: bold;
    margin-right: 12rpx;
}

.original-price {
    font-size: 24rpx;
    color: #999999;
    text-decoration: line-through;
}

.radio-container {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    border: 1px solid #B4B4B4;
}

.radio-img {
    width: 40rpx;
    height: 40rpx;
}

::v-deep .u-radio {
    margin-left: 20rpx;
}

.category-trigger {
    display: flex;
    align-items: center;
    padding: 20rpx;

    .trigger-text {
        font-size: 28rpx;
        color: #666;

        &.active {
            color: #2979ff;
        }
    }

    .trigger-icon {
        margin-left: 8rpx;
        font-size: 24rpx;
        color: #999;
    }
}

.operateBtn {
    font-weight: bold;
    font-size: 28rpx;
    text-align: center;

    .cancel {
        width: 50%;
        height: 70rpx;
        color: #449AFF;
        line-height: 70rpx;
        background: rgba(68, 154, 255, 0.05);
    }

    .confirm {
        width: 50%;
        height: 70rpx;
        line-height: 70rpx;
        color: #fff;
        background: #449AFF;
        border-radius: 0px 0px 20rpx 0px;

    }
}

.category-content {
    display: flex;
    height: 100%;
    padding: 20rpx 22rpx;
}

.category-column {
    flex: 1;
    height: 100%;
    border-right: 1px solid #eee;

    &:last-child {
        border-right: none;
    }
}

.category-item {
    padding: 20rpx 20rpx;
    font-size: 26rpx;
    color: #333;

    // border-bottom: 1px solid #f5f5f5;
    &.active {
        background: rgba(68, 154, 255, 0.1);
        color: #2983EC;
    }
}

.dropdown-content {
    background-color: rgba(0, 0, 0, 0.6);
    height: 0px;
    opacity: 0;
    transition: opacity 0.3s ease;

    .title {
        font-size: 14px;
        color: #232832;
        font-weight: bold;
        border-bottom: 1px solid #E1E1E1;
    }
}

.show {
    height: 100vh;
    opacity: 1;
    /* 下拉菜单内容的最大高度 */
}

.dropdown-content1 {
    // background-color: #fff;
    height: 0px;
    overflow: hidden;
    transition: height 0.4s ease;
    // border-radius: 0px 0px 20rpx 20rpx;
}

.dropdown-content2 {
    background-color: #fff;
    // height: 0px;
    // overflow: hidden;
    // transition: height 0.4s ease;
    border-radius: 0px 0px 20rpx 20rpx;
    margin-bottom: 10px;

}

.scolcentent {
    height: 486rpx;
    overflow-y: auto;
    /* 下拉菜单遮罩最大高度 */
}
</style>