feat: 统一注册页面"联系我们"样式,并在打开邮箱失败时复制邮件地址
This commit is contained in:
@@ -24,8 +24,8 @@
|
|||||||
<ul class="product_detail" :class="{'academic':(item.type == 'academic' && !isSelectSuccessively)}">
|
<ul class="product_detail" :class="{'academic':(item.type == 'academic' && !isSelectSuccessively)}">
|
||||||
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
|
<li v-for="detailItem in item?.detailList">{{ detailItem }}</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="gallery_btn gallery_btn_radius" v-if="item?.btn != 'Contact us'" @click="createAccount">{{ item?.btn }}</div>
|
<div class="gallery_btn gallery_btn_radius" v-if="item?.btn != 'Contact us' && item?.btn != '联系我们'" @click="createAccount">{{ item?.btn }}</div>
|
||||||
<a class="gallery_btn gallery_btn_radius" v-else href="mailto:info@code-create.com.hk">{{ item?.btn }}</a>
|
<div class="gallery_btn gallery_btn_radius" v-else @click="handleContactUs">{{ item?.btn }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
|
<div class="highlight" v-if="item?.highlight">{{ item?.highlight }}</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -38,6 +38,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||||
import registerModel from './registerModel.vue'
|
import registerModel from './registerModel.vue'
|
||||||
|
import { message } from "ant-design-vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
@@ -319,6 +320,84 @@
|
|||||||
}
|
}
|
||||||
dom.registerModel.init(props.isSelectSuccessively)
|
dom.registerModel.init(props.isSelectSuccessively)
|
||||||
}
|
}
|
||||||
|
const handleContactUs = ()=>{
|
||||||
|
const email = 'info@code-create.com.hk'
|
||||||
|
const mailtoLink = `mailto:${email}`
|
||||||
|
|
||||||
|
// 检测是否有邮件客户端
|
||||||
|
let hasEmailClient = false
|
||||||
|
let blurTimer = null
|
||||||
|
|
||||||
|
// 监听窗口失去焦点事件(如果打开了邮件客户端,窗口会失去焦点)
|
||||||
|
const handleBlur = () => {
|
||||||
|
hasEmailClient = true
|
||||||
|
if (blurTimer) {
|
||||||
|
clearTimeout(blurTimer)
|
||||||
|
}
|
||||||
|
window.removeEventListener('blur', handleBlur)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('blur', handleBlur)
|
||||||
|
|
||||||
|
// 尝试打开邮件客户端(使用临时链接元素,避免页面跳转)
|
||||||
|
try {
|
||||||
|
const tempLink = document.createElement('a')
|
||||||
|
tempLink.href = mailtoLink
|
||||||
|
tempLink.style.display = 'none'
|
||||||
|
document.body.appendChild(tempLink)
|
||||||
|
tempLink.click()
|
||||||
|
document.body.removeChild(tempLink)
|
||||||
|
} catch (e) {
|
||||||
|
// 如果打开失败,直接复制邮箱
|
||||||
|
hasEmailClient = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置超时检测,如果500ms内窗口没有失去焦点,说明没有邮件客户端
|
||||||
|
blurTimer = setTimeout(() => {
|
||||||
|
window.removeEventListener('blur', handleBlur)
|
||||||
|
if (!hasEmailClient) {
|
||||||
|
// 没有邮件客户端,复制邮箱到剪贴板
|
||||||
|
copyToClipboard(email)
|
||||||
|
const isChinese = props.isSelectSuccessively
|
||||||
|
if (isChinese) {
|
||||||
|
message.info(`没有检测到邮件客户端,已为您复制邮箱地址:${email}`)
|
||||||
|
} else {
|
||||||
|
message.info(`No email client detected, email address copied: ${email}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 2000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const copyToClipboard = (text) => {
|
||||||
|
if (navigator.clipboard && window.isSecureContext) {
|
||||||
|
// 使用现代 Clipboard API
|
||||||
|
navigator.clipboard.writeText(text).catch(() => {
|
||||||
|
// 如果失败,使用传统方法
|
||||||
|
fallbackCopyToClipboard(text)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 使用传统方法
|
||||||
|
fallbackCopyToClipboard(text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const fallbackCopyToClipboard = (text) => {
|
||||||
|
const textArea = document.createElement('textarea')
|
||||||
|
textArea.value = text
|
||||||
|
textArea.style.position = 'fixed'
|
||||||
|
textArea.style.left = '-999999px'
|
||||||
|
textArea.style.top = '-999999px'
|
||||||
|
document.body.appendChild(textArea)
|
||||||
|
textArea.focus()
|
||||||
|
textArea.select()
|
||||||
|
try {
|
||||||
|
document.execCommand('copy')
|
||||||
|
} catch (err) {
|
||||||
|
console.error('复制失败:', err)
|
||||||
|
}
|
||||||
|
document.body.removeChild(textArea)
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(()=>{
|
onMounted(()=>{
|
||||||
|
|
||||||
})
|
})
|
||||||
@@ -328,6 +407,7 @@
|
|||||||
close,
|
close,
|
||||||
setMonthlyOrYearly,
|
setMonthlyOrYearly,
|
||||||
createAccount,
|
createAccount,
|
||||||
|
handleContactUs,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user