art-design/src/views/admin/user/user_info.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 != '' ? userInfo.avatar : '/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.phone }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">邮 箱：</span>
              <span class="info-value">{{ userInfo.email }}</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="company" class="right-input">
                <ElInput v-model="form.corp_name" 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>
                <!-- <el-button @click="handleSignature" type="primary">签名</el-button> -->
                <el-input type="hidden" v-model="form.signature" />
              </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"> &#xe6bf;</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"> &#xe6bf;</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 { UserService } from '@/api/usersApi'
  import { useUploadHeaders } from '@/composables/useUploadHeaders'
  import { useUserStore } from '@/store/modules/user'
  import { computed } from 'vue'
  import QrcodeVue from 'qrcode.vue'
  const { uploadHeaders } = useUploadHeaders()
  let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
  defineOptions({ name: 'AdminUserCenter' })
  // 定义客户详情类型
  interface CustomerInfo {
    [key: string]: any
  }
  // const imageUrls = ref(imageUrl)
  const imageUrlavatar = ref('')
  const sign_img_url = ref('')
  // const socialize_pic_full = 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 (error) { countryOptions.value = [] }
  // }
  // const { getUserInfo } = useUserStore()
  const userInfo = ref<CustomerInfo>({})
  const getuserInfo = async () => {
    const data = await UserService.getUserInfo()
    userInfo.value = data.user
    form.value = data.user
    imageUrlavatar.value = data.user.avatar
    // socialize_pic_full.value = data.socialize_pic_full
    sign_img_url.value = data.user.sign_img_url
    // userInfo.value = getUserInfo.user
    // form.value = getUserInfo.user
    // imageUrlavatar.value = getUserInfo.user.avatar
    // sign_img_url.value = getUserInfo.user.sign_img_url
    // socialize_pic_full.value = data.socialize_pic_full
  }
  const isEdit = ref(false)
  const showReSignQR = ref(false)
  const isEditPwd = ref(false)
  const pwdForm = reactive({
    password: '',
    password_new: '',
    confirmPassword: ''
  })

  const ruleFormRef = ref<FormInstance>()

  const options = [
    {
      value: '',
      label: '未知'
    },
    {
      value: 1,
      label: '男'
    },
    {
      value: 2,
      label: '女'
    }
  ]
  onMounted(async () => {
    // await getarea()
    await getuserInfo()
  })
  const qrcodeUrl = computed(() => {
    const userStore = useUserStore() as any
    const userId = form.value?.id || userInfo.value?.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()}`
  })
  const edit = async () => {
    if (isEdit.value) {
      const payload: any = { ...(form.value as any) }
      delete payload.sign_img_url
      const res = await UserService.editUserInfo(payload)
      ElMessage.success(res?.message || '操作成功')
      getuserInfo()
    }
    isEdit.value = !isEdit.value
    if (isEdit.value === false) {
      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) || ''
  // }
</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 30px;
          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>