zzh
6fb1f4fd66
官网/H5 支持企微客服跳转；用户资料新增 WecomKfUrl；工作台与下单相关体验一并更新。 Co-authored-by: Cursor <cursoragent@cursor.com>
105 lines
3.0 KiB
Vue
105 lines
3.0 KiB
Vue
<template>
|
|
<div class="user-profile-fields">
|
|
<a-form-item :label="t('system.user.form.phone')" field="phone">
|
|
<a-input v-model="phone" :placeholder="t('system.user.form.phonePlaceholder')" />
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="t('system.user.form.employeeNo')" field="employeeNo">
|
|
<a-input
|
|
v-model="employeeNo"
|
|
:placeholder="t('system.user.form.employeeNoPlaceholder')"
|
|
:readonly="employeeNoReadonly"
|
|
/>
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="t('system.user.form.wechatId')" field="wechatId">
|
|
<a-input v-model="wechatId" :placeholder="t('system.user.form.wechatIdPlaceholder')" />
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="t('system.user.form.wecomKfUrl')" field="wecomKfUrl">
|
|
<a-input v-model="wecomKfUrl" :placeholder="t('system.user.form.wecomKfUrlPlaceholder')" />
|
|
</a-form-item>
|
|
|
|
<a-form-item :label="t('system.user.form.wechatQrCode')" field="wechatQrFiles">
|
|
<a-upload
|
|
v-model:file-list="wechatQrFiles"
|
|
list-type="picture-card"
|
|
:limit="1"
|
|
accept="image/*"
|
|
:custom-request="handleWechatCustomRequest"
|
|
>
|
|
<template #upload-button>
|
|
<div class="upload-placeholder">
|
|
<icon-plus class="upload-icon" />
|
|
<span>{{ t('system.user.form.wechatQrUpload') }}</span>
|
|
</div>
|
|
</template>
|
|
</a-upload>
|
|
</a-form-item>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
import { IconPlus } from '@arco-design/web-vue/es/icon'
|
|
import { $baseMessage } from '@/utils'
|
|
import { readFileAsDataUrl } from '@/utils/image-data-url'
|
|
|
|
const { t } = useI18n()
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
employeeNoReadonly?: boolean
|
|
}>(),
|
|
{
|
|
employeeNoReadonly: false,
|
|
},
|
|
)
|
|
|
|
const phone = defineModel<string>('phone', { default: '' })
|
|
const employeeNo = defineModel<string>('employeeNo', { default: '' })
|
|
const wechatId = defineModel<string>('wechatId', { default: '' })
|
|
const wecomKfUrl = defineModel<string>('wecomKfUrl', { default: '' })
|
|
const wechatQrFiles = defineModel<any[]>('wechatQrFiles', { default: () => [] })
|
|
|
|
async function handleWechatCustomRequest(options: any) {
|
|
const { fileItem, onSuccess, onError } = options
|
|
const file = fileItem?.file as File | undefined
|
|
if (!file) {
|
|
onError?.()
|
|
return
|
|
}
|
|
try {
|
|
const dataUrl = await readFileAsDataUrl(
|
|
file,
|
|
undefined,
|
|
t('system.user.message.wechatQrTooLarge'),
|
|
)
|
|
fileItem.url = dataUrl
|
|
fileItem.status = 'done'
|
|
fileItem.response = { url: dataUrl }
|
|
onSuccess?.({ url: dataUrl })
|
|
} catch (e: any) {
|
|
fileItem.status = 'error'
|
|
$baseMessage(e?.message || t('system.user.message.wechatQrTooLarge'), 'warning')
|
|
onError?.(e)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.upload-placeholder {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-text-3);
|
|
font-size: 12px;
|
|
|
|
.upload-icon {
|
|
font-size: 20px;
|
|
margin-bottom: 4px;
|
|
}
|
|
}
|
|
</style>
|