hookehuyr

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

- 根据接口数据动态显示咨询联系人列表
- 为联系人添加二维码展示和预览功能
- 移除静态微信二维码相关代码
......@@ -207,7 +207,7 @@
</svg>
收藏
</button>
<button class="flex flex-col items-center text-gray-500 text-xs" @click="open_consult_dialog">
<button v-if="consult_contacts.length" class="flex flex-col items-center text-gray-500 text-xs" @click="open_consult_dialog">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
......@@ -353,21 +353,19 @@
</div>
<ul class="mt-2 divide-y divide-gray-200">
<li v-for="(c, idx) in consult_contacts" :key="idx" class="flex items-center justify-between py-2">
<a class="text-gray-800 text-sm" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.name }}</a>
<div class="flex items-center">
<a class="text-gray-800 text-sm mr-3" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.name }}</a>
<img
v-if="c?.qrcode"
:src="build_og_image_url(c.qrcode)"
alt="联系人二维码"
class="w-5 h-5 object-contain rounded cursor-pointer"
@click="open_contact_qr_preview(c.qrcode)"
/>
</div>
<a class="text-green-600 text-sm" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.phone }}</a>
</li>
</ul>
</div>
<!-- 微信二维码:放置在咨询弹窗内部(尺寸缩小,样式参考联系人) -->
<div class="bg-gray-50 border border-gray-200 rounded-lg p-3 mb-4 flex flex-col items-center">
<div class="text-gray-700 mb-2">微信二维码</div>
<img
:src="wechat_qr_url"
alt="微信二维码"
class="w-24 h-auto object-contain block"
@click="open_qr_preview"
/>
<div class="text-xs text-gray-500 mt-2">点击二维码可查看大图</div>
</div>
......@@ -411,17 +409,16 @@ import { checkinTaskAPI } from '@/api/checkin';
// 原始 og:description 内容缓存(用于离开页面时恢复)
let original_og_desc_content = null;
// 微信二维码地址
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'
/**
* @function open_qr_preview
* @description 打开微信二维码大图预览。
* @function open_contact_qr_preview
* @description 打开联系人二维码大图预览。
* @param {string} url 二维码图片地址
* @returns {void}
*/
const open_qr_preview = () => {
// 预览二维码原图
showImagePreview([wechat_qr_url])
const open_contact_qr_preview = (url) => {
if (!url) return;
const src = build_og_image_url(url)
showImagePreview([src])
}
/**
......@@ -587,14 +584,11 @@ const checkInSuccess = ref(false)
const show_consult_dialog = ref(false)
/**
* 咨询联系人列表(Mock 数据
* 说明:支持多个联系人,点击名称直接拨号
* @type {import('vue').Ref<Array<{name:string, phone:string}>>}
* 咨询联系人列表(来源于 getCourseDetailAPI 的 contact_list
* 数据结构:[{ id, name, phone, qrcode }]
* @type {import('vue').Ref<Array<{id:number,name:string,phone:string,qrcode?:string}>>}
*/
const consult_contacts = ref([
{ name: '课程顾问A', phone: '400-888-8888' },
{ name: '课程顾问B', phone: '13800000000' }
])
const consult_contacts = ref([])
/**
* 打开咨询弹窗
......@@ -856,6 +850,20 @@ onMounted(async () => {
image: course.value?.cover || '',
url: window.location.href
});
// 咨询联系人:从接口填充 contact_list
// 若图片为 cdn.ipadbiz.cn,显示与预览均追加压缩参数
try {
const list = Array.isArray(foundCourse.contact_list) ? foundCourse.contact_list : []
consult_contacts.value = list.map(item => ({
id: item.id,
name: item.name,
phone: item.phone,
qrcode: item.qrcode || ''
}))
} catch (e) {
consult_contacts.value = []
}
}
}
else {
......