|
@@ -1,37 +1,84 @@
|
|
|
-import { defineComponent } from 'vue'
|
|
|
+import { defineComponent, ref } from 'vue'
|
|
|
import styles from './index.module.less'
|
|
|
import iconUs from './image/iconUs.png'
|
|
|
import kefu1 from './image/kefu1.png'
|
|
|
import kefu2 from './image/kefu2.png'
|
|
|
-import { Button } from 'vant'
|
|
|
+import { Button, Toast } from 'vant'
|
|
|
+import { promisefiyPostMessage } from '@/helpers/native-message'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'contactus',
|
|
|
setup(props, ctx) {
|
|
|
- const users = [{name: '客服人员 1', src:kefu1}, {name: '客服人员 2', src:kefu2}]
|
|
|
+ const loading = ref(false)
|
|
|
+ const users = [
|
|
|
+ { name: '客服人员 1', src: kefu1 },
|
|
|
+ { name: '客服人员 2', src: kefu2 }
|
|
|
+ ]
|
|
|
const onSaveImg = (src: string) => {
|
|
|
- console.log(src)
|
|
|
+ loading.value = true
|
|
|
+ fetch(src)
|
|
|
+ .then(response => response.blob())
|
|
|
+ .then(res => {
|
|
|
+ try {
|
|
|
+ const fileReader = new FileReader()
|
|
|
+ fileReader.readAsDataURL(res)
|
|
|
+ fileReader.onload = async () => {
|
|
|
+ await download(fileReader.result as string)
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(_ => (loading.value = false))
|
|
|
}
|
|
|
+
|
|
|
+ const download = async (base64: string) => {
|
|
|
+ const result = await promisefiyPostMessage({
|
|
|
+ api: 'savePicture',
|
|
|
+ content: {
|
|
|
+ base64
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (result?.content?.status === 'success') {
|
|
|
+ Toast.success('保存成功')
|
|
|
+ } else {
|
|
|
+ Toast.fail('保存失败')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
return () => (
|
|
|
<div class={styles.container}>
|
|
|
<div class={styles.topWrap}>
|
|
|
- <div class={styles.title}>如您在使用酷乐秀学院时有任何问题或意见,可添加以下企业微信账号与我们取得联系,我们将竭诚为您服务。</div>
|
|
|
+ <div class={styles.title}>
|
|
|
+ 如您在使用酷乐秀学院时有任何问题或意见,可添加以下企业微信账号与我们取得联系,我们将竭诚为您服务。
|
|
|
+ </div>
|
|
|
<img class={styles.img} src={iconUs} />
|
|
|
</div>
|
|
|
|
|
|
<div class={styles.centerWrap}>
|
|
|
- {users.map((n) => (
|
|
|
+ {users.map(n => (
|
|
|
<div class={styles.item}>
|
|
|
<div class={styles.name}>{n.name}</div>
|
|
|
<img src={n.src} />
|
|
|
<div class={styles.btn}>
|
|
|
- <Button block round type='primary' size='small' onClick={() => onSaveImg(n.src)}>保存二维码</Button>
|
|
|
+ <Button
|
|
|
+ block
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ onClick={() => onSaveImg(n.src)}
|
|
|
+ disabled={loading.value}
|
|
|
+ >
|
|
|
+ 保存二维码
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
- <a href={kefu1} download>下载</a>
|
|
|
- <div class={styles.tips}>提示:点击保存二维码后会自动下载到相册,打开企业微信扫一扫即可添加企业微信联系客服喔~</div>
|
|
|
+ <div class={styles.tips}>
|
|
|
+ 提示:点击保存二维码后会自动下载到相册,打开企业微信扫一扫即可添加企业微信联系客服喔~
|
|
|
+ </div>
|
|
|
</div>
|
|
|
)
|
|
|
}
|