feat(课程详情页): 优化咨询联系人功能并移除微信二维码
- 根据接口数据动态显示咨询联系人列表 - 为联系人添加二维码展示和预览功能 - 移除静态微信二维码相关代码
Showing
1 changed file
with
36 additions
and
28 deletions
| ... | @@ -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 { | ... | ... |
-
Please register or login to post a comment