WenWuGuanJia/index_fenbao/XuanJiangYuan/ck_page.vue

<template>
  <view class="box">
    <u-navbar title="添加成员" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
    <view class="ban">
		<!-- 添加成员按钮 -->
		<view @click="showPopup = true" class="tjbm_btn2">添加成员</view>
      <!-- 显示已有的成员 -->
      <u-checkbox-group placement v-model="selectedMembersIds" @change="onCheckboxChange">
        <view
          class="form-group"
          v-for="(item, index) in memberList"
          :key="index"
          @click.stop="toggleCheckbox(index)"
          :class="{ 'selected': selectedMembersIds.includes(item.id) }"
        >
          <view style="display: flex; align-items: center;">
            <view class="select-label">
              <u-checkbox :name="item.id">{{ item.name }}</u-checkbox>
            </view>
            <view style="margin-left: 10px;">
              <view>姓名:{{ item.name }}</view>
              <view>手机: {{ item.mobile }}</view>
              <view>年龄:{{ item.id_card }}</view>
            </view>
          </view>
        </view>
      </u-checkbox-group>

     
      <view @click="submit" class="tjbm_btn">确认</view>

      <!-- 弹出层用于添加成员 -->
      <u-popup bgColor="#f2c8a2" :show="showPopup" mode="center" customStyle="width:600rpx;padding: 30rpx;" round="20rpx" @close="resetForm">
        <view class="popup-content">
          <text class="popup-title">添加成员信息</text>
		
          <u--input placeholderStyle={color: #c0c4cc} border='surround' placeholder="请输入姓名" v-model="newMember.name"  />
          <u--input placeholderStyle={color: #c0c4cc} placeholder="请输入手机号" v-model="newMember.mobile"  />
          <u--input placeholderStyle={color: #c0c4cc} placeholder="请输入身份证号" v-model="newMember.id_card"  />
          <view class="popup-btns">
            <view class="bt2" @click="addMemberAndClose">确定</view>
            <view class="bt1" @click="showPopup = false">取消</view>
        
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
//全局定义
let that;
export default {
  data() {
    return {
      memberList: [],
      newMember: { name: '', mobile: '', id_card: '' },
      showPopup: false,
      selectedMembersIds: [], // 存储选中的成员ID
    };
  },
  onLoad() {
	//启动时赋值
	that = this;
    that.getMemberList();
    that.loadSelectedMemberList();
  },
  methods: {
    getMemberList() {
		this.$api.getMemberList(
			{
			},
			data => {
				if (data.code == 0) {
					that.$common.errorToShow(data.msg);
					return;
				} else {
					that.memberList = data.data;
					console.log(that.memberList);
				}
			}
		);
    },
    loadSelectedMemberList() {
      const storedSelectedMembers = uni.getStorageSync('selectedMembers') || [];
      that.selectedMembersIds = storedSelectedMembers.map(members => members.id);
    },
    addMemberAndClose() {
		console.log(that.newMember, 'new');
		if (that.newMember.name && that.newMember.id_card) {
			//提交身份信息
			this.$api.submitIdentityInfo(
				{
					name: that.newMember.name,
					id_card: that.newMember.id_card,
					mobile: that.newMember.mobile
				},
				data => {
					if (data.code == 0) {
						that.$common.errorToShow(data.msg);
						return;
					} else {
						that.showPopup = false;
						that.$common.successToShow(data.msg);
						that.getMemberList();
					}
				}
			);
			that.resetForm();
			that.updateLocalStorage();
		} else {
			uni.showToast({
			  title: '请填写完整的成员信息',
			  icon: 'none'
			});
		}
    },
    updateLocalStorage() {
      // 更新本地存储的已选成员信息
      const selectedMembers = that.memberList.filter(member => this.selectedMembersIds.includes(member.id));
	  console.log(selectedMembers, 'selectedMembers')
      uni.setStorageSync('selectedMembers', selectedMembers);
    },
    submit() {
      this.updateLocalStorage();
      uni.navigateBack({
        delta: 1
      });
    },
    resetForm() {
      this.newMember = { name: '', mobile: '', id_card: '' };
    },
    onCheckboxChange(e) {
      console.log('复选框变化:', e);
    },
    toggleCheckbox(index) {
      const memberId = this.memberList[index].id;
      const isSelected = this.selectedMembersIds.includes(memberId);

		//如果在选择的成员里面则过滤掉，不再则push进去
      if (isSelected) {
        this.selectedMembersIds = this.selectedMembersIds.filter(id => id !== memberId);
      } else {
        this.selectedMembersIds.push(memberId);
      }

      // 立即更新本地存储以反映选择变化
      this.updateLocalStorage();
    }
  }
};
</script>

<style scoped>
.box {
  min-height: 100%;
  height: auto;
  width: 100%;
  padding-bottom: 50rpx;
  background-image: url('https://huli-app.wenlvti.net/app_static/minnanhun/image/gj_bg.png');
  background-repeat: repeat-y;
  background-size: 100%;
}

.ban {
  width: 92%;
  margin: auto;
}

.form-group {
  margin-bottom: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.form-group:hover {
  background-color: #f0f0f0;
}

.form-group.selected {
  background-color: #e6f7ff;
}

button {
  margin-top: 10px;
}

.u-input.data-v-113bc24f {
  background-color: #fee1b9 !important;
  margin-top: 20rpx;
}

.tjbm_btn {
  width: 100%;
  height: 80rpx;
  font-size: 30rpx;
  line-height: 80rpx;
  text-align: center;
  color: #ffffff;
  border-radius: 10rpx;
  background-color: #fb5a02;
  margin-top: 50rpx;
}
.tjbm_btn2 {
  width: 160rpx;
  height: 70rpx;
  font-size: 30rpx;
  line-height: 70rpx;
  text-align: center;
  color: #ffffff;
  border-radius: 40rpx;
  background-color: #fb5a02;
  margin: 20rpx  0 20rpx 75%;
}
.popup-content {
  padding: 20px;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.popup-btns {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.select-label {
  margin-bottom: 10px;
}
/deep/.u-input--radius.data-v-113bc24f, .u-input--square.data-v-113bc24f {
	border: 2rpx solid #fb5a02 !important;
	margin-top: 20rpx;
}.bt2 {
	width: 200rpx;
	height: 78rpx;
	background: #ca5642;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: #ffffff;
}.bt1 {
	width: 200rpx;
	height: 78rpx;
	border: 1px solid #312520;
	border-radius: 39rpx;
	text-align: center;
	line-height: 78rpx;
	color: black;
}
</style>