Browse Source

feat: 家庭成员渠道改为多选复选框模式

Developer 4 days ago
parent
commit
e6d2c58435
1 changed files with 68 additions and 25 deletions
  1. 68 25
      pagesMy/familyMemberVindicate.vue

+ 68 - 25
pagesMy/familyMemberVindicate.vue

@@ -80,15 +80,17 @@
 					<input v-model="memberInfo.currentSchool" style="font-size: 30rpx;color: #252525;text-align: right;" placeholder-style="color: #A1A4A9;font-size: 28rpx;" placeholder="请输入就读学校"></input>
 				</view>
 			</view>
-			<view class="pre adfac">
+			<view class="pre channel-select">
 				<view class="pre-title">会员渠道</view>
-				<view class="pre-content">
-					<picker v-if="channelList.length > 0" :range="channelList" range-key="channelName" :value="selectedChannelIndex" @change="onChannelChange">
-						<view style="font-size: 30rpx;color: #252525;text-align: right;">
-							{{ selectedChannelIndex >= 0 ? channelList[selectedChannelIndex].channelName : '请选择渠道' }}
-						</view>
-					</picker>
-					<view v-else style="font-size: 30rpx;color: #A1A4A9;text-align: right;">暂无可用渠道</view>
+				<view class="channel-list">
+					<view class="channel-item" v-for="channel in channelList" :key="channel.id" @click="toggleChannel(channel.id)">
+						<image
+							:src="selectedChannelIds.includes(String(channel.id)) ? 'https://oss.familydaf.cn/sxsnfile/20251218/ef2d43944c7e4cea8c6ebe0b4179f0fc.png' : 'https://oss.familydaf.cn/sxsnfile/20251218/a27c9b23939d4d5085ff790ed4bd2d6a.png'"
+							class="checkbox-icon"
+						></image>
+						<text>{{ channel.channelName }}</text>
+					</view>
+					<view v-if="channelList.length === 0" style="color: #A1A4A9; font-size: 28rpx;">暂无可用渠道</view>
 				</view>
 			</view>
 		</view>
@@ -118,8 +120,7 @@
 	const qicShow = ref(false)
 	// 渠道相关
 	const channelList = ref([])          // 会员渠道列表(可选项)
-	const selectedChannelId = ref('')    // 已选渠道 ID(字符串)
-	const selectedChannelIndex = ref(-1) // picker 当前选中下标,-1 表示未选
+	const selectedChannelIds = ref([])   // 已选渠道 ID 数组
 	const hasSelectedChannel = ref(false)  // 用户是否主动选择过渠道
 	const turnType = ref('')
 	
@@ -131,11 +132,6 @@
 					return
 				}
 				channelList.value = res.data || []
-				// 若 loadMemberChannel 已先完成并设置了 selectedChannelId,补充同步 index
-				if (selectedChannelId.value) {
-					const idx = channelList.value.findIndex(c => String(c.id) === selectedChannelId.value)
-					if (idx >= 0) selectedChannelIndex.value = idx
-				}
 				resolve()
 			})
 		})
@@ -145,17 +141,35 @@
 		proxy.$api.get('/member/channelList', { memberId }).then(({ data: res }) => {
 			if (res.code !== 0) return
 			const list = res.data || []
-			if (list.length > 0) {
-				selectedChannelId.value = String(list[0].id)
-				const idx = channelList.value.findIndex(c => String(c.id) === selectedChannelId.value)
-				if (idx >= 0) selectedChannelIndex.value = idx
-			}
+			selectedChannelIds.value = list.map(c => String(c.id))
 		})
 	}
 
+	const toggleChannel = (channelId) => {
+		const id = String(channelId)
+		const index = selectedChannelIds.value.indexOf(id)
+		if (index > -1) {
+			selectedChannelIds.value.splice(index, 1)
+		} else {
+			selectedChannelIds.value.push(id)
+		}
+		hasSelectedChannel.value = true
+	}
+
 	const changeMember = (value,key) => {
 		memberInfo.value[key] = value;
 	}
+
+	const toggleChannel = (channelId) => {
+		const id = String(channelId)
+		const index = selectedChannelIds.value.indexOf(id)
+		if (index > -1) {
+			selectedChannelIds.value.splice(index, 1)
+		} else {
+			selectedChannelIds.value.push(id)
+		}
+		hasSelectedChannel.value = true
+	}
 	
 	const handleSave = async () => {
 		if(!memberInfo.value.avatarPath) return proxy.$showToast('请上传头像')
@@ -193,14 +207,16 @@
 	}
 
 	const onChannelChange = (e) => {
-		const idx = e.detail.value
-		selectedChannelIndex.value = idx
-		selectedChannelId.value = String(channelList.value[idx].id)
-		hasSelectedChannel.value = true
+		// 已废弃,使用 toggleChannel 替代
+	}
+
+	const onColumnChange = (e) => {
+		// 已废弃
 	}
 
 	const setMemberChannel = (memberId) => {
-		proxy.$api.post(`/member/setChannels?memberId=${memberId}&channelIds=${selectedChannelId.value}`, {}).then(({ data: res }) => {
+		const channelIdsStr = selectedChannelIds.value.join(',')
+		proxy.$api.post(`/member/setChannels?memberId=${memberId}&channelIds=${channelIdsStr}`, {}).then(({ data: res }) => {
 			if (res.code !== 0) proxy.$showToast(res.msg)
 		}).catch(() => {
 			proxy.$showToast('渠道设置失败,请稍后重试')
@@ -373,6 +389,11 @@
 			.pre{
 				padding: 25rpx 0;
 				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #F2F2F2;
+				&.channel-select{
+					flex-direction: column;
+					align-items: flex-start;
+					padding: 25rpx 0 15rpx;
+				}
 				&-title{
 					width: 209rpx;
 					font-family: PingFangSC, PingFang SC;
@@ -411,6 +432,28 @@
 					}
 				}
 			}
+
+			.channel-list{
+				width: 100%;
+				margin-top: 10rpx;
+				.channel-item{
+					display: flex;
+					align-items: center;
+					padding: 15rpx 0;
+					.checkbox-icon{
+						width: 28rpx;
+						height: 28rpx;
+						margin-right: 16rpx;
+					}
+					text{
+						font-family: PingFangSC, PingFang SC;
+						font-weight: 400;
+						font-size: 30rpx;
+						color: #252525;
+						line-height: 42rpx;
+					}
+				}
+			}
 		}
 		
 		.btn{