LocalLivingServicesUniapp/pages/coupon/storeUsers.vue

<template>
    <view class="creat">

        <cu-custom bgColor="bg-fff" :isBack="true">
            <block slot="content">本店用户</block>
        </cu-custom>
        <view class="top"></view>
        <view class="content">
            <view class="product-item" v-for="(item, index) in userList" :key="index"
                @click="handleRadioChange(item.id)">
                <view class="product-info">
                    <image style="width:68rpx;height:68rpx;margin-right:16rpx" :src="item.userAvatar" mode=""></image>
                   {{ item.nickName }}
                </view>
                <view v-if="selectedIds.indexOf(item.id) == '-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="submit">确定发放</button>
        </view>
    </view>
</template>
<script>
import { USER_INFO } from "@/common/util/constants"

export default {
    data() {
        return {
            selectAll: false,
            invertAll: false,
            userList: [], // 用户列表
            selectedIds: [], // 当前选中的商品ID组
            productName: '',
            outsideRow:{}
        }
    },
    onLoad(e) {
        this.outsideRow=JSON.parse(decodeURIComponent(e.params))
        this.getList()
    },
    methods: {
        getList() {
            this.$http.get('/merchant/localVoucherInfo/getUser?merchantId='+  uni.getStorageSync(USER_INFO).merchantId).then(res => {
                if (res.data.success) {
                    this.userList =res.data.result
                }
                else {
                    this.$tip.error(res.data.message);
                }
            })
        },
        
        groupChange(e) {
            if (e == 1) {
                this.selectedIds = !this.selectAll ? this.userList.map(item => item.id) : []
                this.selectAll = !this.selectAll
            }
            if (e == 2) {
                this.invertAll = !this.invertAll
            }
        },
        searchList() {
            this.getList()
        },
        // 确认
        submit() {
            if (this.selectedIds.length > 0) {
                let data={
                    merchantId: uni.getStorageSync(USER_INFO).merchantId,
                    // type:'3',
                    userIds:this.selectedIds,
                    ...this.outsideRow
                }
                this.$http.post('/merchant/localConsumerUserInfo/addStoreUserOut', data).then(res => {
                if (res.data.success) {
                    this.$tip.error(res.data.message||'发放成功');
                    uni.navigateBack({
                        delta: 1
                    });	
                    
                }
                else {
                    this.$tip.error(res.data.message);
                }
            })
            }
        },
        // 单选按钮变化处理
        handleRadioChange(id) {
            // 判断是否已存在
            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%);
    }
}

.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;
}
</style>