Selaa lähdekoodia

fix: 家庭成员编辑时显示所有已加入的渠道

Developer 4 päivää sitten
vanhempi
commit
9b621b6a69
1 muutettua tiedostoa jossa 31 lisäystä ja 69 poistoa
  1. 31 69
      pagesMy/familyMemberVindicate.vue

+ 31 - 69
pagesMy/familyMemberVindicate.vue

@@ -80,17 +80,15 @@
 					<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 channel-select">
+			<view class="pre adfac">
 				<view class="pre-title">会员渠道</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 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;">
+							{{ memberChannelNames || '请选择渠道' }}
+						</view>
+					</picker>
+					<view v-else style="font-size: 30rpx;color: #A1A4A9;text-align: right;">暂无可用渠道</view>
 				</view>
 			</view>
 		</view>
@@ -120,10 +118,12 @@
 	const qicShow = ref(false)
 	// 渠道相关
 	const channelList = ref([])          // 会员渠道列表(可选项)
-	const selectedChannelIds = ref([])   // 已选渠道 ID 数组
+	const memberChannelNames = ref('')   // 成员已加入的渠道名称(逗号分隔)
+	const selectedChannelId = ref('')    // 已选渠道 ID(字符串)
+	const selectedChannelIndex = ref(-1) // picker 当前选中下标,-1 表示未选
 	const hasSelectedChannel = ref(false)  // 用户是否主动选择过渠道
 	const turnType = ref('')
-	
+
 	const loadChannelList = () => {
 		return new Promise((resolve) => {
 			proxy.$api.get('/channel/list', {}).then(({ data: res }) => {
@@ -132,6 +132,11 @@
 					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()
 			})
 		})
@@ -141,35 +146,20 @@
 		proxy.$api.get('/member/channelList', { memberId }).then(({ data: res }) => {
 			if (res.code !== 0) return
 			const list = res.data || []
-			selectedChannelIds.value = list.map(c => String(c.id))
+			if (list.length > 0) {
+				// 显示所有已加入的渠道名称
+				memberChannelNames.value = list.map(c => c.channelName).join('、')
+				// 默认选中第一个渠道
+				selectedChannelId.value = String(list[0].id)
+				const idx = channelList.value.findIndex(c => String(c.id) === selectedChannelId.value)
+				if (idx >= 0) selectedChannelIndex.value = idx
+			}
 		})
 	}
 
-	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('请上传头像')
@@ -207,16 +197,15 @@
 	}
 
 	const onChannelChange = (e) => {
-		// 已废弃,使用 toggleChannel 替代
-	}
-
-	const onColumnChange = (e) => {
-		// 已废弃
+		const idx = e.detail.value
+		selectedChannelIndex.value = idx
+		selectedChannelId.value = String(channelList.value[idx].id)
+		memberChannelNames.value = channelList.value[idx].channelName
+		hasSelectedChannel.value = true
 	}
 
 	const setMemberChannel = (memberId) => {
-		const channelIdsStr = selectedChannelIds.value.join(',')
-		proxy.$api.post(`/member/setChannels?memberId=${memberId}&channelIds=${channelIdsStr}`, {}).then(({ data: res }) => {
+		proxy.$api.post(`/member/setChannels?memberId=${memberId}&channelIds=${selectedChannelId.value}`, {}).then(({ data: res }) => {
 			if (res.code !== 0) proxy.$showToast(res.msg)
 		}).catch(() => {
 			proxy.$showToast('渠道设置失败,请稍后重试')
@@ -389,11 +378,6 @@
 			.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;
@@ -432,28 +416,6 @@
 					}
 				}
 			}
-
-			.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{