hookehuyr

feat(课程详情页): 优化咨询联系人功能并移除微信二维码

- 根据接口数据动态显示咨询联系人列表
- 为联系人添加二维码展示和预览功能
- 移除静态微信二维码相关代码
...@@ -207,7 +207,7 @@ ...@@ -207,7 +207,7 @@
207 </svg> 207 </svg>
208 收藏 208 收藏
209 </button> 209 </button>
210 - <button class="flex flex-col items-center text-gray-500 text-xs" @click="open_consult_dialog"> 210 + <button v-if="consult_contacts.length" class="flex flex-col items-center text-gray-500 text-xs" @click="open_consult_dialog">
211 <svg 211 <svg
212 xmlns="http://www.w3.org/2000/svg" 212 xmlns="http://www.w3.org/2000/svg"
213 class="h-6 w-6" 213 class="h-6 w-6"
...@@ -353,21 +353,19 @@ ...@@ -353,21 +353,19 @@
353 </div> 353 </div>
354 <ul class="mt-2 divide-y divide-gray-200"> 354 <ul class="mt-2 divide-y divide-gray-200">
355 <li v-for="(c, idx) in consult_contacts" :key="idx" class="flex items-center justify-between py-2"> 355 <li v-for="(c, idx) in consult_contacts" :key="idx" class="flex items-center justify-between py-2">
356 - <a class="text-gray-800 text-sm" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.name }}</a> 356 + <div class="flex items-center">
357 + <a class="text-gray-800 text-sm mr-3" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.name }}</a>
358 + <img
359 + v-if="c?.qrcode"
360 + :src="build_og_image_url(c.qrcode)"
361 + alt="联系人二维码"
362 + class="w-5 h-5 object-contain rounded cursor-pointer"
363 + @click="open_contact_qr_preview(c.qrcode)"
364 + />
365 + </div>
357 <a class="text-green-600 text-sm" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.phone }}</a> 366 <a class="text-green-600 text-sm" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.phone }}</a>
358 </li> 367 </li>
359 </ul> 368 </ul>
360 - </div>
361 -
362 - <!-- 微信二维码:放置在咨询弹窗内部(尺寸缩小,样式参考联系人) -->
363 - <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 mb-4 flex flex-col items-center">
364 - <div class="text-gray-700 mb-2">微信二维码</div>
365 - <img
366 - :src="wechat_qr_url"
367 - alt="微信二维码"
368 - class="w-24 h-auto object-contain block"
369 - @click="open_qr_preview"
370 - />
371 <div class="text-xs text-gray-500 mt-2">点击二维码可查看大图</div> 369 <div class="text-xs text-gray-500 mt-2">点击二维码可查看大图</div>
372 </div> 370 </div>
373 371
...@@ -411,17 +409,16 @@ import { checkinTaskAPI } from '@/api/checkin'; ...@@ -411,17 +409,16 @@ import { checkinTaskAPI } from '@/api/checkin';
411 // 原始 og:description 内容缓存(用于离开页面时恢复) 409 // 原始 og:description 内容缓存(用于离开页面时恢复)
412 let original_og_desc_content = null; 410 let original_og_desc_content = null;
413 411
414 -// 微信二维码地址
415 -const wechat_qr_url = 'https://oa.behalo.cc/admin/?m=srv&a=get_qrcode&key=https%3A%2F%2Fwxm.behalo.cc%2Ff%2Fmlaj%2F%23%2Fcourses%2F2932942'
416 -
417 /** 412 /**
418 - * @function open_qr_preview 413 + * @function open_contact_qr_preview
419 - * @description 打开微信二维码大图预览。 414 + * @description 打开联系人二维码大图预览。
415 + * @param {string} url 二维码图片地址
420 * @returns {void} 416 * @returns {void}
421 */ 417 */
422 -const open_qr_preview = () => { 418 +const open_contact_qr_preview = (url) => {
423 - // 预览二维码原图 419 + if (!url) return;
424 - showImagePreview([wechat_qr_url]) 420 + const src = build_og_image_url(url)
421 + showImagePreview([src])
425 } 422 }
426 423
427 /** 424 /**
...@@ -587,14 +584,11 @@ const checkInSuccess = ref(false) ...@@ -587,14 +584,11 @@ const checkInSuccess = ref(false)
587 const show_consult_dialog = ref(false) 584 const show_consult_dialog = ref(false)
588 585
589 /** 586 /**
590 - * 咨询联系人列表(Mock 数据 587 + * 咨询联系人列表(来源于 getCourseDetailAPI 的 contact_list
591 - * 说明:支持多个联系人,点击名称直接拨号 588 + * 数据结构:[{ id, name, phone, qrcode }]
592 - * @type {import('vue').Ref<Array<{name:string, phone:string}>>} 589 + * @type {import('vue').Ref<Array<{id:number,name:string,phone:string,qrcode?:string}>>}
593 */ 590 */
594 -const consult_contacts = ref([ 591 +const consult_contacts = ref([])
595 - { name: '课程顾问A', phone: '400-888-8888' },
596 - { name: '课程顾问B', phone: '13800000000' }
597 -])
598 592
599 /** 593 /**
600 * 打开咨询弹窗 594 * 打开咨询弹窗
...@@ -856,6 +850,20 @@ onMounted(async () => { ...@@ -856,6 +850,20 @@ onMounted(async () => {
856 image: course.value?.cover || '', 850 image: course.value?.cover || '',
857 url: window.location.href 851 url: window.location.href
858 }); 852 });
853 +
854 + // 咨询联系人:从接口填充 contact_list
855 + // 若图片为 cdn.ipadbiz.cn,显示与预览均追加压缩参数
856 + try {
857 + const list = Array.isArray(foundCourse.contact_list) ? foundCourse.contact_list : []
858 + consult_contacts.value = list.map(item => ({
859 + id: item.id,
860 + name: item.name,
861 + phone: item.phone,
862 + qrcode: item.qrcode || ''
863 + }))
864 + } catch (e) {
865 + consult_contacts.value = []
866 + }
859 } 867 }
860 } 868 }
861 else { 869 else {
......