同步

index_fenbao/XuanJiangYuan/ck_page.vue

@@ -1,16 +1,49 @@
 <template>
   <view class="box">
-    <u-navbar title="添加乘客" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
+    <u-navbar title="添加成员" autoBack :placeholder="true" bgColor="#fee1b9"></u-navbar>
     <view class="ban">
-      <view class="form-group" v-for="(item, index) in passengers" :key="index">
-        <text>成员 {{ index + 1 }}</text>
-        <u-input placeholder="请输入姓名" v-model="item.name" border="surround" />
-        <u-input placeholder="请输入手机号" v-model="item.mobile" border="surround" />
-        <u-input placeholder="请输入年龄" v-model="item.age" border="surround" />
-        <button type="default" @click="removePassenger(index)" v-if="passengers.length > 0">删除乘客</button>
-      </view>
-      <view @click="addPassenger" class="tjbm_btn">添加乘客</view>
-      <view @click="submit" class="tjbm_btn">提交</view>
+		<!-- 添加乘客按钮 -->
+		<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>
@@ -19,39 +52,73 @@
 export default {
   data() {
     return {
-      passengers: [
-        { name: '', mobile: '', age: '' }
-      ]
+      passengers: [],
+      newPassenger: { name: '', mobile: '', age: '' },
+      showPopup: false,
+      selectedPassengerIds: [], // 存储选中的乘客ID
     };
   },
   onLoad() {
-    // 从本地存储中获取乘客信息
-    const storedPassengers = uni.getStorageSync('passengers');
-    if (storedPassengers) {
-      this.passengers = storedPassengers;
-    } else {
-      // 如果没有存储的乘客信息，则初始化一个空的乘客对象
-      this.passengers = [{ name: '', mobile: '', age: '' }];
-    }
+    this.loadPassengers();
+    this.loadSelectedPassengers();
   },
   methods: {
-    addPassenger() {
-      this.passengers.push({ name: '', mobile: '', age: '' });
+    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);
     },
-    removePassenger(index) {
-      this.passengers.splice(index, 1);
-      // 更新本地存储
+    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() {
-      console.log('提交的乘客信息:', this.passengers);
-      // 将乘客信息保存到本地存储中
-      uni.setStorageSync('passengers', this.passengers);
-
-      // 返回上一个页面
+      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();
     }
   }
 };
@@ -78,6 +145,16 @@ export default {
   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 {
@@ -100,4 +177,54 @@ button {
   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>

index_fenbao/XuanJiangYuan/xq_page.vue

@@ -10,6 +10,24 @@
 			
 			<!--  -->
 			<view class="ld">报名资料填写</view>
+			<view class="radio_box">
+				<u-radio-group
+				  v-model="radiovalue"
+				  placement="column"
+				 
+				>
+				  <u-radio
+				    :customStyle="{marginBottom: '8px'}"
+				    v-for="(item, index) in radioList"
+				    :key="index"
+				    :label="item.name"
+				    :name="item.id"
+				    @change="radioChange"
+				  >
+				  </u-radio>
+				</u-radio-group>
+			</view>
+			 
 			<!-- 动态表单 -->
 			<block v-for="(item,index) in configItems" :key="item.id">
 			     <view class="" style="margin-top: 30rpx;">
@@ -22,7 +40,7 @@
 			                @change="onInput"
 			                :placeholder="item.tip" />
 				
-			       <u-radio-group   v-if="item.type === 'radio'" placement>
+			<!--       <u-radio-group   v-if="item.type === 'radio'" placement>
 			         <u-radio v-for="(fruitName, fruitId) in item.content" :key="fruitId"
 			                  :label="item.content[fruitId]"
 			                :name="fruitId"
@@ -31,20 +49,27 @@
 							  >
 			           {{ fruitName }}
 			         </u-radio>
-			       </u-radio-group>
+			       </u-radio-group> -->
 				
 			       <!-- 其他类型可以根据需要添加 -->
 			     </view>
 			   </block>
 
 			<view class="bm_btn" @click="tjcyBtn">添加家庭成员</view>
-			<view class="cy_box" v-for="item in cyList" :key="index">
-				<view class="icon_box">
-					<u-icon name="account" color="#000000" size="20"></u-icon>
+			<view class="cy_box" v-for="(item,index) in cyList" :key="index">
+				<view class=""  style="display: flex;">
+					<view class="icon_box">
+						<u-icon name="account" color="#000000" size="20"></u-icon>
+					</view>
+					<view style="margin-left: 20rpx">
+						<view class="cy_name">{{item.name}}</view>
+						<view class="cy_age">年龄:{{item.age}}</view>
+						
+					</view>
 				</view>
-				<view style="margin-left: 20rpx">
-					<view class="cy_name">{{item.name}}</view>
-					<view class="cy_age">年龄:{{item.age}}</view>
+			
+				<view @click="removePassenger(index)" style="width: 60rpx;height: 60rpx;">
+				<u-icon name="trash" color="#858789" size="20" ></u-icon>	
 				</view>
 			</view>
 			<!--  -->
@@ -81,17 +106,17 @@ export default {
 	data() {
 		return {
 			 configItems : [
-				 {
-				     id: 1,
-				     name: "fruit",
-				     group: "basic",
-				     title: "请选择参赛类型",
-				     tip: "请选择一款水果",
-				     type: "radio",
-				     value: "",
-				     content: { 1: "1.5公里线路(适合家庭及儿童)", 2: "3公里线路(适合初学者)", 3: "5公里线路(适合跑步爱好者)" },
-				     rule: "required"
-				 },
+				 // {
+				 //     id: 1,
+				 //     name: "fruit",
+				 //     group: "basic",
+				 //     title: "请选择参赛类型",
+				 //     tip: "请选择一款水果",
+				 //     type: "radio",
+				 //     value: "",
+				 //     content: { 1: "1.5公里线路(适合家庭及儿童)", 2: "3公里线路(适合初学者)", 3: "5公里线路(适合跑步爱好者)" },
+				 //     rule: "required"
+				 // },
 			    {
 			        id: 2,
 			        name: "name",
@@ -150,19 +175,21 @@ export default {
 		};
 	},
 	onShow() {
-	    // 从本地存储中获取乘客信息
-	    const storedPassengers = uni.getStorageSync('passengers');
-	    if (storedPassengers) {
-			console.log(storedPassengers,'storedPassengers')
-	      this.cyList = storedPassengers;
-	    }
+	this.loadPassengers()
 	  },
 	methods: {
-		radioChange(n) {
-			// 拿到的content对应的key
-			console.log('radioChange', n,);
-		
-		},
+		  // 从本地存储中获取乘客信息
+		 loadPassengers() {
+		      const storedSelectedPassengers = uni.getStorageSync('selectedPassengers');
+		      if (storedSelectedPassengers) {
+		        this.cyList = storedSelectedPassengers;
+		      } else {
+		        this.cyList = [];
+		      }
+		    },
+	 radioChange(n) {
+	        console.log('radioChange', n);
+	      },
   onInput(e) {
       // 更新字符串值
     console.log(e)
@@ -171,7 +198,19 @@ export default {
 	uni.navigateTo({
 		url: '/index_fenbao/XuanJiangYuan/ck_page'
 	});
-}
+},
+  removePassenger(index) {
+       // 移除乘客并更新本地存储
+       this.cyList.splice(index, 1);
+       // 更新本地存储中的乘客信息
+       uni.setStorageSync('passengers', this.cyList);
+       // 提示删除成功
+       uni.showToast({
+         title: '删除成功',
+         icon: 'success'
+       });
+     }
+   
 	}
 };
 </script>
@@ -225,6 +264,7 @@ height: auto;
 .ld {
 	font-size: 30rpx;
 	font-weight: 700;
+	margin-top: 20rpx;
 	margin-bottom: 20rpx;
 }
 .u-input.data-v-113bc24f {
@@ -253,6 +293,7 @@ height: auto;
 .cy_box {
 	display: flex;
 	margin-top: 20rpx;
+	justify-content: space-between;
 }
 .icon_box {
 	width: 90rpx;
@@ -296,4 +337,9 @@ align-items: center;
 	font-size: 24rpx;
 	color:#03A9F4;
 }
+.radio_box{
+	background-color: #fee1b9;
+	padding: 20rpx;
+	border-radius: 10rpx;
+}
 </style>