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="selectedPassengerIds" @change="onCheckboxChange">
        <view
          class="form-group"
          v-for="(item, index) in passengers"
          :key="index"
          @click.stop="toggleCheckbox(index)"
          :class="{ 'selected': selectedPassengerIds.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.age }}</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="newPassenger.name"  />
          <u--input placeholderStyle={color: #c0c4cc} placeholder="请输入手机号" v-model="newPassenger.mobile"  />
          <u--input placeholderStyle={color: #c0c4cc} placeholder="请输入年龄" v-model="newPassenger.age"  />
          <view class="popup-btns">
            <view class="bt2" @click="addPassengerAndClose">确定</view>
            <view class="bt1" @click="showPopup = false">取消</view>
        
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      passengers: [],
      newPassenger: { name: '', mobile: '', age: '' },
      showPopup: false,
      selectedPassengerIds: [], // 存储选中的乘客ID
    };
  },
  onLoad() {
    this.loadPassengers();
    this.loadSelectedPassengers();
  },
  methods: {
    loadPassengers() {
      const storedPassengers = uni.getStorageSync('passengers');
      if (storedPassengers) {
        this.passengers = storedPassengers.map((passenger, index) => ({ ...passenger, id: index }));
      } else {
        this.passengers = [];
      }
    },
    loadSelectedPassengers() {
      const storedSelectedPassengers = uni.getStorageSync('selectedPassengers') || [];
      this.selectedPassengerIds = storedSelectedPassengers.map(passenger => passenger.id);
    },
    addPassengerAndClose() {
      if (this.newPassenger.name && this.newPassenger.mobile && this.newPassenger.age) {
        this.passengers.push({ ...this.newPassenger, id: this.passengers.length });
        this.showPopup = false;
        this.resetForm();
        this.updateLocalStorage();
      } else {
        uni.showToast({
          title: '请填写完整的乘客信息',
          icon: 'none'
        });
      }
    },
    updateLocalStorage() {
      // 更新本地存储的所有乘客信息
      uni.setStorageSync('passengers', this.passengers);
      // 更新本地存储的已选乘客信息
      const selectedPassengers = this.passengers.filter(passenger => this.selectedPassengerIds.includes(passenger.id));
      uni.setStorageSync('selectedPassengers', selectedPassengers);
    },
    submit() {
      this.updateLocalStorage();
      uni.navigateBack({
        delta: 1
      });
    },
    resetForm() {
      this.newPassenger = { name: '', mobile: '', age: '' };
    },
    onCheckboxChange(e) {
      console.log('复选框变化:', e.detail);
    },
    toggleCheckbox(index) {
      const passengerId = this.passengers[index].id;
      const isSelected = this.selectedPassengerIds.includes(passengerId);

      if (isSelected) {
        this.selectedPassengerIds = this.selectedPassengerIds.filter(id => id !== passengerId);
      } else {
        this.selectedPassengerIds.push(passengerId);
      }

      // 立即更新本地存储以反映选择变化
      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>