crm 接口对接

src/views/system/user-center/index.vue

@@ -3,64 +3,57 @@
     <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="@imgs/user/avatar.webp" />
-          <h2 class="name">{{ userInfo.userName }}</h2>
-          <p class="des">Art Design Pro 是一款漂亮的后台管理系统模版.</p>
-
+          <!-- <img class="bg" src="@imgs/user/bg.webp" /> -->
+          <img class="avatar" :src="userInfo.avatar_full" />
+          <h2 class="name">{{userInfo.name}}</h2>
+          <p class="des">ID:{{userInfo.id}}</p>
           <div class="outer-info">
-            <div>
-              <i class="iconfont-sys">&#xe72e;</i>
-              <span>jdkjjfnndf@mall.com</span>
+            <div class="info-row">
+              <span class="info-label">电    话：</span>
+              <span class="info-value">{{userInfo.phone}}</span>
             </div>
-            <div>
-              <i class="iconfont-sys">&#xe608;</i>
-              <span>交互专家</span>
+            <div class="info-row">
+              <span class="info-label">职    位：</span>
+              <span class="info-value">{{userInfo.position}}</span>
             </div>
-            <div>
-              <i class="iconfont-sys">&#xe736;</i>
-              <span>广东省深圳市</span>
+            <div class="info-row">
+              <span class="info-label">公    司：</span>
+              <span class="info-value">{{userInfo.corp_name}}</span>
             </div>
-            <div>
-              <i class="iconfont-sys">&#xe811;</i>
-              <span>字节跳动－某某平台部－UED</span>
-            </div>
-          </div>
-
-          <div class="lables">
-            <h3>标签</h3>
-            <div>
-              <div v-for="item in lableList" :key="item">
-                {{ item }}
-              </div>
+            <div class="info-row">
+              <span class="info-label">国    家：</span>
+              <span class="info-value">{{userInfo.country_txt}}</span>
             </div>
           </div>
         </div>
-
-        <!-- <el-carousel class="gallery" height="160px"
-          :interval="5000"
-          indicator-position="none"
-        >
-          <el-carousel-item class="item" v-for="item in galleryList" :key="item">
-            <img :src="item"/>
-          </el-carousel-item>
-        </el-carousel> -->
       </div>
       <div class="right-wrap">
         <div class="info box-style">
-          <h1 class="title">基本设置</h1>
+          <h1 class="title"><span class="border" style="margin-right: 5px;"></span>基本信息</h1>
 
           <ElForm
             :model="form"
             class="form"
             ref="ruleFormRef"
-            :rules="rules"
             label-width="86px"
-            label-position="top"
+            label-position="left"
           >
+            <ElFormItem label="头像" prop="avatar">
+              <el-upload
+                  class="qrcode-upload"
+                  :action="actionImageUplode"
+                  :headers="uploadHeaders"
+                  :show-file-list="false"
+                  :on-success="handleUploadavatar"
+                >
+                <div class="qrcode-upload-box">
+                  <img class="avatar" :src="imageUrlavatar"/>
+                </div>
+              </el-upload>
+            </ElFormItem>
             <ElRow>
-              <ElFormItem label="姓名" prop="realName">
-                <el-input v-model="form.realName" :disabled="!isEdit" />
+              <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="Select" :disabled="!isEdit">
@@ -75,29 +68,56 @@
             </ElRow>
 
             <ElRow>
-              <ElFormItem label="昵称" prop="nikeName">
-                <ElInput v-model="form.nikeName" :disabled="!isEdit" />
+              <ElFormItem label="联系方式" prop="phone">
+                <ElInput v-model="form.phone" :disabled="!isEdit" />
               </ElFormItem>
-              <ElFormItem label="邮箱" prop="email" class="right-input">
-                <ElInput v-model="form.email" :disabled="!isEdit" />
+              <ElFormItem label="职务" prop="position" class="right-input">
+                <ElInput v-model="form.position" :disabled="!isEdit" />
               </ElFormItem>
             </ElRow>
 
             <ElRow>
-              <ElFormItem label="手机" prop="mobile">
-                <ElInput v-model="form.mobile" :disabled="!isEdit" />
+              <ElFormItem label="公司" prop="company">
+                <ElInput v-model="form.corp_name" disabled/>
               </ElFormItem>
-              <ElFormItem label="地址" prop="address" class="right-input">
-                <ElInput v-model="form.address" :disabled="!isEdit" />
+              <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>
-
-            <ElFormItem label="个人介绍" prop="des" :style="{ height: '130px' }">
-              <ElInput type="textarea" :rows="4" v-model="form.des" :disabled="!isEdit" />
-            </ElFormItem>
-
+            <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="imageUrl" 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>
@@ -107,7 +127,7 @@
         <div class="info box-style" style="margin-top: 20px">
           <h1 class="title">更改密码</h1>
 
-          <ElForm :model="pwdForm" class="form" label-width="86px" label-position="top">
+          <ElForm :model="pwdForm" class="form" label-width="86px" label-position="left">
             <ElFormItem label="当前密码" prop="password">
               <ElInput
                 v-model="pwdForm.password"
@@ -117,9 +137,9 @@
               />
             </ElFormItem>
 
-            <ElFormItem label="新密码" prop="newPassword">
+            <ElFormItem label="新密码" prop="password_new">
               <ElInput
-                v-model="pwdForm.newPassword"
+                v-model="pwdForm.password_new"
                 type="password"
                 :disabled="!isEditPwd"
                 show-password
@@ -137,6 +157,7 @@
 
             <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>
@@ -150,94 +171,116 @@
 <script setup lang="ts">
   import { useUserStore } from '@/store/modules/user'
   import { ElForm, FormInstance, FormRules } from 'element-plus'
-
+  import imageUrl from '@/assets/img/crm/upimg.png'
+  import { CrmService } from '@/api/crmApi'
+  import { useUploadHeaders } from '@/composables/useUploadHeaders'
+  const { uploadHeaders } = useUploadHeaders()
+  let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
   defineOptions({ name: 'UserCenter' })
-
-  const userStore = useUserStore()
-  const userInfo = computed(() => userStore.getUserInfo)
-
-  const isEdit = ref(false)
-  const isEditPwd = ref(false)
-  const date = ref('')
-  const form = reactive({
-    realName: 'John Snow',
-    nikeName: '皮卡丘',
-    email: '59301283@mall.com',
-    mobile: '18888888888',
-    address: '广东省深圳市宝安区西乡街道101栋201',
-    sex: '2',
-    des: 'Art Design Pro 是一款漂亮的后台管理系统模版.'
-  })
-
-  const pwdForm = reactive({
-    password: '123456',
-    newPassword: '123456',
-    confirmPassword: '123456'
-  })
-
-  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: '1',
-      label: '男'
-    },
-    {
-      value: '2',
-      label: '女'
+  // 定义客户详情类型
+  interface CustomerInfo {
+    [key: string]: any
+  }
+  const imageUrlavatar=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 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
+      
     }
-  ]
+    
+    const isEdit = ref(false)
+    const isEditPwd = ref(false)
+    const pwdForm = reactive({
+      password: '',
+      password_new: '',
+      confirmPassword: ''
+    })
 
-  const lableList: Array<string> = ['专注设计', '很有想法', '辣~', '大长腿', '川妹子', '海纳百川']
+    const ruleFormRef = ref<FormInstance>()
 
-  onMounted(() => {
-    getDate()
-  })
+    // 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 getDate = () => {
-    const d = new Date()
-    const h = d.getHours()
-    let text = ''
-
-    if (h >= 6 && h < 9) {
-      text = '早上好'
-    } else if (h >= 9 && h < 11) {
-      text = '上午好'
-    } else if (h >= 11 && h < 13) {
-      text = '中午好'
-    } else if (h >= 13 && h < 18) {
-      text = '下午好'
-    } else if (h >= 18 && h < 24) {
-      text = '晚上好'
-    } else if (h >= 0 && h < 6) {
-      text = '很晚了，早点睡'
+    const options = [
+      {
+        value: '1',
+        label: '男'
+      },
+      {
+        value: '2',
+        label: '女'
+      }
+    ]
+    onMounted(async () => {
+      await getarea()
+      await getuserInfo()
+    })
+    const edit = async() => {
+      if(isEdit.value){
+        const res = await CrmService.crmuseredit(form.value)
+        ElMessage.success(res?.message || '操作成功')
+        getuserInfo()
+      }
+      isEdit.value = !isEdit.value
+      
     }
 
-    date.value = text
-  }
-
-  const edit = () => {
-    isEdit.value = !isEdit.value
-  }
-
-  const editPwd = () => {
-    isEditPwd.value = !isEditPwd.value
-  }
+    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) || ''
+      // 如需同步到 form.picture
+      form.value.socialize_pic = response.url || (response.data && response.data.file_name) || ''
+    }
+  
 </script>
 
 <style lang="scss">
@@ -253,6 +296,19 @@
 </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%;
@@ -274,33 +330,25 @@
       margin-top: 10px;
 
       .left-wrap {
-        width: 450px;
+        width: 350px;
         margin-right: 25px;
 
         .user-wrap {
           position: relative;
-          height: 600px;
+          height: 400px;
           padding: 35px 40px;
           overflow: hidden;
           text-align: center;
-          background: var(--art-main-bg-color);
+          // background: var(--art-main-bg-color);
+          background: linear-gradient(180deg, #E9F0FF 0%, #FFFFFF 67.9%);
+
           border-radius: $box-radius;
-
-          .bg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-          }
-
           .avatar {
             position: relative;
             z-index: 10;
             width: 80px;
             height: 80px;
-            margin-top: 120px;
+            // margin-top: 120px;
             object-fit: cover;
             border: 2px solid #fff;
             border-radius: 50%;
@@ -318,19 +366,28 @@
           }
 
           .outer-info {
-            width: 300px;
-            margin: auto;
+            width: 260px;
+            margin: 0 auto;
             margin-top: 30px;
-            text-align: left;
-
-            > div {
-              margin-top: 10px;
-
-              span {
-                margin-left: 8px;
-                font-size: 14px;
-              }
-            }
+          }
+          .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 {
@@ -387,7 +444,7 @@
             font-size: 20px;
             font-weight: 400;
             color: var(--art-text-gray-800);
-            border-bottom: 1px solid var(--art-border-color);
+            // border-bottom: 1px solid var(--art-border-color);
           }
 
           .form {