feat(咨询弹窗): 将单联系人改为多联系人列表并优化拨打交互
- 移除富文本咨询信息和复制功能 - 新增联系人列表展示,支持点击姓名或号码直接拨打 - 优化电话拨打逻辑,支持传入特定号码
Showing
2 changed files
with
28 additions
and
76 deletions
| ... | @@ -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 | ... | ... |
-
Please register or login to post a comment