hookehuyr

feat(咨询弹窗): 将单联系人改为多联系人列表并优化拨打交互

- 移除富文本咨询信息和复制功能
- 新增联系人列表展示,支持点击姓名或号码直接拨打
- 优化电话拨打逻辑,支持传入特定号码
...@@ -33,11 +33,9 @@ https://oa-dev.onwall.cn/f/mlaj ...@@ -33,11 +33,9 @@ https://oa-dev.onwall.cn/f/mlaj
33 33
34 - 课程详情页咨询弹窗(Mock) 34 - 课程详情页咨询弹窗(Mock)
35 - 入口:详情页顶部快捷操作中的“咨询”按钮。 35 - 入口:详情页顶部快捷操作中的“咨询”按钮。
36 - - 展示:底部弹出层,仅底部关闭按钮;内容支持富文本展示。 36 + - 展示:底部弹出层,仅底部关闭按钮;展示联系人列表,可点击名称或号码直接拨打(`tel:`)。
37 - - 电话:显示咨询电话;点击即可直接拨打(`tel:`)。 37 + - 联系人:支持多个联系人,展示姓名与号码;电话号码使用绿色高亮;联系人与号码字体大小一致。
38 - - 咨询信息:富文本区域点击即可复制到剪切板;复制成功后提示。 38 + - 位置:`/src/views/courses/CourseDetailPage.vue`,“咨询弹窗”模板与交互逻辑(`open_consult_dialog``close_consult_dialog``consult_contacts``call_phone(phone)`)。
39 - - 图片压缩:富文本中若包含 `cdn.ipadbiz.cn` 图片,使用 `?imageMogr2/thumbnail/200x/strip/quality/70` 参数。
40 - - 位置:`/src/views/courses/CourseDetailPage.vue`,“咨询弹窗”模板与交互逻辑(`open_consult_dialog``close_consult_dialog``call_phone``copy_consult_info`)。
41 39
42 - 购买流程环境校验 40 - 购买流程环境校验
43 - 行为:仅对非免费课程在详情页点击“购买”时进行校验;生产环境下必须为微信内置浏览器(`wxInfo().isWeiXin`)。 41 - 行为:仅对非免费课程在详情页点击“购买”时进行校验;生产环境下必须为微信内置浏览器(`wxInfo().isWeiXin`)。
......
...@@ -342,23 +342,20 @@ ...@@ -342,23 +342,20 @@
342 <van-icon name="cross" @click="close_consult_dialog" /> 342 <van-icon name="cross" @click="close_consult_dialog" />
343 </div> 343 </div>
344 344
345 - <!-- 电话信息:点击直接拨打 --> 345 + <!-- 联系人列表:点击名称直接拨打 -->
346 <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 mb-4"> 346 <div class="bg-gray-50 border border-gray-200 rounded-lg p-3 mb-4">
347 - <div class="flex items-center justify-between"> 347 + <div class="flex items-center">
348 - <div class="flex items-center"> 348 + <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor">
349 - <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor"> 349 + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h2.28a2 2 0 011.789 1.106l1.152 2.305a2 2 0 01-.42 2.317L9.384 10.09a16.001 16.001 0 006.526 6.526l1.356-1.102a2 2 0 012.317-.42l2.305 1.152A2 2 0 0121 18.72V21a2 2 0 01-2 2h-1a18 18 0 01-17-17V5z" />
350 - <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h2.28a2 2 0 011.789 1.106l1.152 2.305a2 2 0 01-.42 2.317L9.384 10.09a16.001 16.001 0 006.526 6.526l1.356-1.102a2 2 0 012.317-.42l2.305 1.152A2 2 0 0121 18.72V21a2 2 0 01-2 2h-1a18 18 0 01-17-17V5z" /> 350 + </svg>
351 - </svg> 351 + <span class="text-gray-700">联系人</span>
352 - <span class="text-gray-700">联系电话</span>
353 - </div>
354 - <a class="text-green-600 font-medium" :href="`tel:${consult_phone}`" @click.prevent="call_phone">{{ consult_phone }}</a>
355 </div> 352 </div>
356 - </div> 353 + <ul class="mt-2 divide-y divide-gray-200">
357 - 354 + <li v-for="(c, idx) in consult_contacts" :key="idx" class="flex items-center justify-between py-2">
358 - <!-- 富文本咨询信息:点击复制到剪切板 --> 355 + <a class="text-gray-800 text-sm" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.name }}</a>
359 - <div class="bg-white border border-gray-100 rounded-lg p-3"> 356 + <a class="text-green-600 text-sm" :href="`tel:${c.phone}`" @click.prevent="call_phone(c.phone)">{{ c.phone }}</a>
360 - <div class="text-gray-700 text-sm leading-6" v-html="consult_html" @click="copy_consult_info"></div> 357 + </li>
361 - <div class="text-xs text-gray-400 mt-2">提示:点击上方任意文字即可复制咨询内容</div> 358 + </ul>
362 </div> 359 </div>
363 360
364 <!-- 底部关闭按钮(唯一操作) --> 361 <!-- 底部关闭按钮(唯一操作) -->
...@@ -545,21 +542,14 @@ const checkInSuccess = ref(false) ...@@ -545,21 +542,14 @@ const checkInSuccess = ref(false)
545 const show_consult_dialog = ref(false) 542 const show_consult_dialog = ref(false)
546 543
547 /** 544 /**
548 - * 咨询联系电话(Mock 数据) 545 + * 咨询联系人列表(Mock 数据)
549 - * @type {import('vue').Ref<string>} 546 + * 说明:支持多个联系人,点击名称直接拨号
547 + * @type {import('vue').Ref<Array<{name:string, phone:string}>>}
550 */ 548 */
551 -const consult_phone = ref('400-888-8888') 549 +const consult_contacts = ref([
552 - 550 + { name: '课程顾问A', phone: '400-888-8888' },
553 -/** 551 + { name: '课程顾问B', phone: '13800000000' }
554 - * 咨询富文本内容(Mock 数据) 552 +])
555 - * 说明:示例中包含来自 cdn.ipadbiz.cn 的图片,带有压缩参数
556 - * @type {import('vue').Ref<string>}
557 - */
558 -const consult_html = ref(
559 - '<p><strong>课程咨询说明:</strong>如需了解课程安排、报名流程、发票开具等信息,请联系课程顾问。</p>' +
560 - '<p>可通过电话或复制下方咨询信息进行沟通。</p>' +
561 - '<p><img src="https://cdn.ipadbiz.cn/images/consult_demo.png?imageMogr2/thumbnail/200x/strip/quality/70" alt="咨询示例" style="max-width:100%;border-radius:8px;"/></p>'
562 -)
563 553
564 /** 554 /**
565 * 打开咨询弹窗 555 * 打开咨询弹窗
...@@ -578,50 +568,14 @@ const close_consult_dialog = () => { ...@@ -578,50 +568,14 @@ const close_consult_dialog = () => {
578 } 568 }
579 569
580 /** 570 /**
581 - * 直接拨打咨询电话 571 + * 直接拨打指定联系人电话
572 + * @param {string} phone 电话号码
582 * @returns {void} 573 * @returns {void}
583 */ 574 */
584 -const call_phone = () => { 575 +const call_phone = (phone) => {
585 - const phone = consult_phone.value || '' 576 + const p = phone || ''
586 - if (phone) { 577 + if (p) {
587 - window.location.href = `tel:${phone}` 578 + window.location.href = `tel:${p}`
588 - }
589 -}
590 -
591 -/**
592 - * 将富文本内容转换为纯文本
593 - * @param {string} html 原始富文本 HTML 字符串
594 - * @returns {string} 纯文本内容
595 - */
596 -const strip_html = (html) => {
597 - const text = (html || '').replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim()
598 - return text
599 -}
600 -
601 -/**
602 - * 复制咨询富文本信息为纯文本
603 - * @returns {Promise<void>}
604 - */
605 -const copy_consult_info = async () => {
606 - const text = strip_html(consult_html.value)
607 - try {
608 - if (navigator.clipboard && navigator.clipboard.writeText) {
609 - await navigator.clipboard.writeText(text)
610 - } else {
611 - const textarea = document.createElement('textarea')
612 - textarea.value = text
613 - textarea.style.position = 'fixed'
614 - textarea.style.top = '-1000px'
615 - document.body.appendChild(textarea)
616 - textarea.focus()
617 - textarea.select()
618 - document.execCommand('copy')
619 - document.body.removeChild(textarea)
620 - }
621 - showToast('咨询信息已复制')
622 - } catch (err) {
623 - console.error('复制失败: ', err)
624 - showToast('复制失败,请稍后重试')
625 } 579 }
626 } 580 }
627 581
......