浅念
618 lines
19 KiB
Vue
618 lines
19 KiB
Vue
<template>
|
||
<div class="page-content user">
|
||
<div class="content">
|
||
<div class="left-wrap">
|
||
<div class="user-wrap box-style">
|
||
<!-- <img class="bg" src="@imgs/user/bg.webp" /> -->
|
||
<img
|
||
class="avatar"
|
||
:src="
|
||
userInfo.avatar_full != '' ? userInfo.avatar_full : '/src/assets/img/user/avatar.webp'
|
||
"
|
||
/>
|
||
<h2 class="name">{{ userInfo.name }}</h2>
|
||
<p class="des">SN:{{ userInfo.sn }}</p>
|
||
<div class="outer-info">
|
||
<div class="info-row">
|
||
<span class="info-label">电 话：</span>
|
||
<span class="info-value">{{ userInfo.phone }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">职 位：</span>
|
||
<span class="info-value">{{ userInfo.position }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">公 司：</span>
|
||
<span class="info-value">{{ userInfo.corp_name }}</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">国 家：</span>
|
||
<span class="info-value">{{ userInfo.country_txt }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-wrap">
|
||
<div class="info box-style">
|
||
<h1 class="title"><span class="border" style="margin-right: 5px"></span>基本信息</h1>
|
||
|
||
<ElForm
|
||
:model="form"
|
||
class="form"
|
||
ref="ruleFormRef"
|
||
label-width="86px"
|
||
label-position="left"
|
||
>
|
||
<ElFormItem label="头像" prop="avatar">
|
||
<el-upload
|
||
class="qrcode-upload"
|
||
:action="actionImageUplode"
|
||
:headers="uploadHeaders"
|
||
:show-file-list="false"
|
||
:on-success="handleUploadavatar"
|
||
:disabled="!isEdit"
|
||
>
|
||
<div class="qrcode-upload-box">
|
||
<img
|
||
class="avatar"
|
||
:src="
|
||
imageUrlavatar != '' ? imageUrlavatar : '/src/assets/img/user/avatar.webp'
|
||
"
|
||
/>
|
||
</div>
|
||
</el-upload>
|
||
</ElFormItem>
|
||
<ElRow>
|
||
<ElFormItem label="昵称" prop="name">
|
||
<el-input v-model="form.name" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
<ElFormItem label="性别" prop="sex" class="right-input">
|
||
<ElSelect v-model="form.sex" placeholder="未知" :disabled="!isEdit">
|
||
<ElOption
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
/>
|
||
</ElSelect>
|
||
</ElFormItem>
|
||
</ElRow>
|
||
|
||
<ElRow>
|
||
<ElFormItem label="联系方式" prop="phone">
|
||
<ElInput v-model="form.phone" disabled />
|
||
</ElFormItem>
|
||
<ElFormItem label="职务" prop="position" class="right-input">
|
||
<ElInput v-model="form.position" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
</ElRow>
|
||
|
||
<ElRow>
|
||
<ElFormItem label="公司" prop="company">
|
||
<ElInput v-model="form.corp_name" disabled />
|
||
</ElFormItem>
|
||
<ElFormItem label="国家" prop="address" class="right-input">
|
||
<el-select
|
||
v-model="form.country_id"
|
||
filterable
|
||
placeholder="请选择国家"
|
||
:disabled="!isEdit"
|
||
>
|
||
<el-option
|
||
v-for="item in countryOptions"
|
||
:key="item.id"
|
||
:label="item.cn_addr"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</ElFormItem>
|
||
</ElRow>
|
||
<ElRow>
|
||
<ElFormItem label="邮箱" prop="email">
|
||
<ElInput v-model="form.email" :disabled="!isEdit" />
|
||
</ElFormItem>
|
||
<ElFormItem label="签名" prop="signature" class="right-input">
|
||
<template v-if="form.sign_img">
|
||
<img :src="sign_img_url" class="signature-img" />
|
||
<el-button
|
||
v-if="isEdit"
|
||
style="margin-left: 12px"
|
||
@click="showReSignQR = !showReSignQR"
|
||
>
|
||
重新签名
|
||
</el-button>
|
||
<div
|
||
v-if="isEdit && showReSignQR"
|
||
class="signature-qrcode"
|
||
style="margin-top: 20px; margin-left: 20px"
|
||
>
|
||
<qrcode-vue
|
||
:value="qrcodeUrl"
|
||
:size="200"
|
||
level="M"
|
||
render-as="svg"
|
||
:include-margin="true"
|
||
background="#ffffff"
|
||
foreground="#000000"
|
||
/>
|
||
<div class="qrcode-tip">手机扫码重新签名</div>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="signature-qrcode">
|
||
<qrcode-vue
|
||
:value="qrcodeUrl"
|
||
:size="200"
|
||
level="M"
|
||
render-as="svg"
|
||
:include-margin="true"
|
||
background="#ffffff"
|
||
foreground="#000000"
|
||
/>
|
||
<div class="qrcode-tip">手机扫码进行签名</div>
|
||
</div>
|
||
</template>
|
||
</ElFormItem>
|
||
</ElRow>
|
||
<ElRow>
|
||
<ElFormItem
|
||
label="二维码"
|
||
prop="socialize"
|
||
:class="isEdit ? 'qrcode-radio-group' : ''"
|
||
>
|
||
<el-radio-group v-model="form.socialize" v-if="isEdit">
|
||
<el-radio label="微信">微信</el-radio>
|
||
<el-radio label="WhatsApp">WhatsApp</el-radio>
|
||
</el-radio-group>
|
||
<template v-else>
|
||
<img
|
||
v-if="form.socialize_pic_full"
|
||
:src="form.socialize_pic_full"
|
||
class="qrcode-img"
|
||
/>
|
||
<span v-else class="qrcode-upload-text">暂无二维码</span>
|
||
</template>
|
||
</ElFormItem>
|
||
<ElFormItem v-if="isEdit" label="上传二维码" prop="address" class="right-input">
|
||
<el-upload
|
||
class="qrcode-upload"
|
||
:action="actionImageUplode"
|
||
:headers="uploadHeaders"
|
||
:show-file-list="false"
|
||
:on-success="handleUploadavatarqrcode"
|
||
>
|
||
<div class="qrcode-upload-box">
|
||
<img
|
||
v-if="form.socialize_pic_full"
|
||
:src="socialize_pic_full"
|
||
class="qrcode-img"
|
||
/>
|
||
<span v-else class="qrcode-upload-text">
|
||
<img :src="imageUrls" class="qrcode-img" />
|
||
</span>
|
||
</div>
|
||
</el-upload>
|
||
</ElFormItem>
|
||
</ElRow>
|
||
|
||
<div class="el-form-item-right">
|
||
<ElButton type="primary" style="width: 90px" v-ripple @click="edit">
|
||
<i v-if="!isEdit" class="iconfont-sys"> </i>
|
||
{{ isEdit ? '保存' : '编辑' }}
|
||
</ElButton>
|
||
</div>
|
||
</ElForm>
|
||
</div>
|
||
|
||
<div class="info box-style" style="margin-top: 20px">
|
||
<h1 class="title">更改密码</h1>
|
||
|
||
<ElForm :model="pwdForm" class="form" label-width="86px" label-position="left">
|
||
<ElFormItem label="当前密码" prop="password">
|
||
<ElInput
|
||
v-model="pwdForm.password"
|
||
type="password"
|
||
:disabled="!isEditPwd"
|
||
show-password
|
||
/>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="新密码" prop="password_new">
|
||
<ElInput
|
||
v-model="pwdForm.password_new"
|
||
type="password"
|
||
:disabled="!isEditPwd"
|
||
show-password
|
||
/>
|
||
</ElFormItem>
|
||
|
||
<ElFormItem label="确认新密码" prop="confirmPassword">
|
||
<ElInput
|
||
v-model="pwdForm.confirmPassword"
|
||
type="password"
|
||
:disabled="!isEditPwd"
|
||
show-password
|
||
/>
|
||
</ElFormItem>
|
||
|
||
<div class="el-form-item-right">
|
||
<ElButton type="primary" style="width: 90px" v-ripple @click="editPwd">
|
||
<i v-if="!isEditPwd" class="iconfont-sys"> </i>
|
||
{{ isEditPwd ? '保存' : '编辑' }}
|
||
</ElButton>
|
||
</div>
|
||
</ElForm>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ElForm, FormInstance } from 'element-plus'
|
||
import imageUrl from '@/assets/img/crm/upimg.png'
|
||
import { CrmService } from '@/api/crmApi'
|
||
import { useUserStore } from '@/store/modules/user'
|
||
import QrcodeVue from 'qrcode.vue'
|
||
import { useUploadHeaders } from '@/composables/useUploadHeaders'
|
||
const { uploadHeaders } = useUploadHeaders()
|
||
let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
|
||
defineOptions({ name: 'UserCenter' })
|
||
// 定义客户详情类型
|
||
interface CustomerInfo {
|
||
[key: string]: any
|
||
}
|
||
const imageUrls = ref(imageUrl)
|
||
const imageUrlavatar = ref('')
|
||
const socialize_pic_full = ref('')
|
||
const sign_img_url = ref('')
|
||
const countryOptions = ref<any>()
|
||
const form = ref<CustomerInfo>({})
|
||
//获取公司 getCompanyList
|
||
// const companyList = ref<any>()
|
||
//国家
|
||
const getarea = async () => {
|
||
try {
|
||
// 这里调用获取品牌列表的接口
|
||
const res = await CrmService.getCountry()
|
||
countryOptions.value = res || []
|
||
} catch {
|
||
countryOptions.value = []
|
||
}
|
||
}
|
||
const userInfo = ref<CustomerInfo>({})
|
||
const getuserInfo = async () => {
|
||
const data = await CrmService.userget()
|
||
userInfo.value = data
|
||
form.value = data
|
||
imageUrlavatar.value = data.avatar_full
|
||
socialize_pic_full.value = data.socialize_pic_full
|
||
sign_img_url.value = data.sign_img_url
|
||
}
|
||
|
||
const isEdit = ref(false)
|
||
const showReSignQR = ref(false)
|
||
const isEditPwd = ref(false)
|
||
const pwdForm = reactive({
|
||
password: '',
|
||
password_new: '',
|
||
confirmPassword: ''
|
||
})
|
||
|
||
const ruleFormRef = ref<FormInstance>()
|
||
|
||
// const rules = reactive<FormRules>({
|
||
// realName: [
|
||
// { required: true, message: '请输入昵称', trigger: 'blur' },
|
||
// { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||
// ],
|
||
// nikeName: [
|
||
// { required: true, message: '请输入昵称', trigger: 'blur' },
|
||
// { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
||
// ],
|
||
// email: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
|
||
// mobile: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
|
||
// address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
|
||
// sex: [{ type: 'array', required: true, message: '请选择性别', trigger: 'blur' }]
|
||
// })
|
||
|
||
const options = [
|
||
{
|
||
value: '',
|
||
label: '未知'
|
||
},
|
||
{
|
||
value: '1',
|
||
label: '男'
|
||
},
|
||
{
|
||
value: '2',
|
||
label: '女'
|
||
}
|
||
]
|
||
onMounted(async () => {
|
||
await getarea()
|
||
await getuserInfo()
|
||
})
|
||
const edit = async () => {
|
||
if (isEdit.value) {
|
||
const payload: any = { ...(form.value as any) }
|
||
delete payload.sign_img_url
|
||
const res = await CrmService.crmuseredit(payload)
|
||
ElMessage.success(res?.message || '操作成功')
|
||
getuserInfo()
|
||
}
|
||
isEdit.value = !isEdit.value
|
||
if (!isEdit.value) {
|
||
showReSignQR.value = false
|
||
}
|
||
}
|
||
|
||
const editPwd = async () => {
|
||
if (isEditPwd.value) {
|
||
// 判断新密码和确认密码是否一致
|
||
if (pwdForm.password_new !== pwdForm.confirmPassword) {
|
||
ElMessage.error('新密码和确认密码不一致')
|
||
return
|
||
}
|
||
const res = await CrmService.savePassword(pwdForm)
|
||
ElMessage.success(res?.message || '操作成功')
|
||
}
|
||
isEditPwd.value = !isEditPwd.value
|
||
}
|
||
//头像上传
|
||
function handleUploadavatar(response: any) {
|
||
// 假设返回图片地址字段为 response.url 或 response.data.url
|
||
imageUrlavatar.value = response.url || (response.data && response.data.file_url) || ''
|
||
// 如需同步到 form.picture
|
||
form.value.avatar = response.url || (response.data && response.data.file_name) || ''
|
||
}
|
||
//二维码上传
|
||
function handleUploadavatarqrcode(response: any) {
|
||
// 假设返回图片地址字段为 response.url 或 response.data.url
|
||
socialize_pic_full.value = response.url || (response.data && response.data.file_url) || ''
|
||
imageUrls.value = response.url || (response.data && response.data.file_url) || ''
|
||
|
||
// 如需同步到 form.picture
|
||
form.value.socialize_pic = response.url || (response.data && response.data.file_name) || ''
|
||
}
|
||
|
||
const qrcodeUrl = computed(() => {
|
||
const userStore = useUserStore() as any
|
||
const userId = (form.value as any)?.id || (userInfo.value as any)?.id || ''
|
||
const base = location.origin
|
||
const params = new URLSearchParams({ userId: String(userId) })
|
||
|
||
// 只保留必要的参数，减少URL长度
|
||
if (userStore?.accessToken) params.append('token', userStore.accessToken)
|
||
if (userStore?.companyabbr) params.append('corp', userStore.companyabbr)
|
||
if (userStore?.companyid) params.append('corpid', userStore.companyid)
|
||
if (userStore?.systemsabbr) params.append('sys', userStore.systemsabbr)
|
||
if (userStore?.systemsid) params.append('sysid', userStore.systemsid)
|
||
if (userStore?.loginType) params.append('type', userStore.loginType)
|
||
if (userStore?.language) params.append('lang', userStore.language)
|
||
|
||
return `${base}/auth/signature/mobile?${params.toString()}`
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.user {
|
||
.icon {
|
||
width: 1.4em;
|
||
height: 1.4em;
|
||
overflow: hidden;
|
||
vertical-align: -0.15em;
|
||
fill: currentcolor;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.qrcode-radio-group .el-form-item__content) {
|
||
height: 40px;
|
||
}
|
||
.avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
.qrcode-img {
|
||
width: 80px;
|
||
height: 80px;
|
||
}
|
||
.page-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 !important;
|
||
background: transparent !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
|
||
$box-radius: calc(var(--custom-radius) + 4px);
|
||
|
||
.box-style {
|
||
border: 1px solid var(--art-border-color);
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
|
||
.left-wrap {
|
||
width: 350px;
|
||
margin-right: 25px;
|
||
|
||
.user-wrap {
|
||
position: relative;
|
||
height: 400px;
|
||
padding: 35px 40px;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
// background: var(--art-main-bg-color);
|
||
background: linear-gradient(180deg, #e9f0ff 0%, #ffffff 67.9%);
|
||
|
||
border-radius: $box-radius;
|
||
.avatar {
|
||
position: relative;
|
||
z-index: 10;
|
||
width: 80px;
|
||
height: 80px;
|
||
// margin-top: 120px;
|
||
object-fit: cover;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.name {
|
||
margin-top: 20px;
|
||
font-size: 22px;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.des {
|
||
margin-top: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.outer-info {
|
||
width: 260px;
|
||
margin: 0 auto;
|
||
margin-top: 30px;
|
||
}
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
font-size: 16px;
|
||
}
|
||
.info-label {
|
||
display: inline-block;
|
||
width: 100px;
|
||
color: #222;
|
||
text-align: right;
|
||
letter-spacing: 2px;
|
||
}
|
||
.info-value {
|
||
color: #333;
|
||
margin-left: 8px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.lables {
|
||
margin-top: 40px;
|
||
|
||
h3 {
|
||
font-size: 15px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
> div {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
margin-top: 15px;
|
||
|
||
> div {
|
||
padding: 3px 6px;
|
||
margin: 0 10px 10px 0;
|
||
font-size: 12px;
|
||
background: var(--art-main-bg-color);
|
||
border: 1px solid var(--art-border-color);
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gallery {
|
||
margin-top: 25px;
|
||
border-radius: 10px;
|
||
|
||
.item {
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-wrap {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
border-radius: $box-radius;
|
||
|
||
.info {
|
||
background: var(--art-main-bg-color);
|
||
border-radius: $box-radius;
|
||
|
||
.title {
|
||
padding: 15px 25px;
|
||
font-size: 20px;
|
||
font-weight: 400;
|
||
color: var(--art-text-gray-800);
|
||
// border-bottom: 1px solid var(--art-border-color);
|
||
}
|
||
|
||
.form {
|
||
box-sizing: border-box;
|
||
padding: 30px 25px;
|
||
|
||
> .el-row {
|
||
.el-form-item {
|
||
width: calc(50% - 10px);
|
||
}
|
||
|
||
.el-input,
|
||
.el-select {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.right-input {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.el-form-item-right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: end;
|
||
|
||
.el-button {
|
||
width: 110px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media only screen and (max-width: $device-ipad-vertical) {
|
||
.page-content {
|
||
.content {
|
||
display: block;
|
||
margin-top: 5px;
|
||
|
||
.left-wrap {
|
||
width: 100%;
|
||
}
|
||
|
||
.right-wrap {
|
||
width: 100%;
|
||
margin-top: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.signature-img {
|
||
width: 160px;
|
||
}
|
||
</style>
|