chenyc
2025-07-14 05c827fea632f004821cc746ba73880769fab7cd
src/views/personal/index.vue
@@ -16,25 +16,22 @@
                        <el-col :span="24">
                           <el-row>
                              <el-col :xs="24" :sm="8" class="personal-item mb6">
                                 <div class="personal-item-label">昵称:</div>
                                 <div class="personal-item-value">小柒</div>
                                 <div class="personal-item-label">姓名:</div>
                                 <div class="personal-item-value">{{state.personalForm.name}}</div>
                              </el-col>
                              <el-col :xs="24" :sm="16" class="personal-item mb6">
                                 <div class="personal-item-label">身份:</div>
                                 <div class="personal-item-value">超级管理</div>
                                 <div class="personal-item-value">
                                    <el-tag style="margin-right:20px" type="warning" v-for="item in state.personalForm.roles" :key="item">{{item.roleText}}</el-tag>
                                 </div>
                              </el-col>
                           </el-row>
                        </el-col>
                        <el-col :span="24">
                           <el-row>
                              <el-col :xs="24" :sm="8" class="personal-item mb6">
                                 <div class="personal-item-label">登录IP:</div>
                                 <div class="personal-item-value">192.168.1.1</div>
                              </el-col>
                              <el-col :xs="24" :sm="16" class="personal-item mb6">
                                 <div class="personal-item-label">登录时间:</div>
                                 <div class="personal-item-value">2021-02-05 18:47:26</div>
                              </el-col>
                              <div  v-for="item in userInfos.clientInfos" :key="item.code">
                                    <el-tag style="margin-right:20px" type="primary" >{{item.clientName}}</el-tag>
                                 </div>
                           </el-row>
                        </el-col>
                     </el-row>
@@ -60,22 +57,7 @@
            </el-card>
         </el-col>
         <!-- 营销推荐 -->
         <el-col :span="24">
            <el-card shadow="hover" class="mt15" header="营销推荐">
               <el-row :gutter="15" class="personal-recommend-row">
                  <el-col :sm="6" v-for="(v, k) in state.recommendList" :key="k" class="personal-recommend-col">
                     <div class="personal-recommend" :style="{ 'background-color': v.bg }">
                        <SvgIcon :name="v.icon" :size="70" :style="{ color: v.iconColor }" />
                        <div class="personal-recommend-auto">
                           <div>{{ v.title }}</div>
                           <div class="personal-recommend-msg">{{ v.msg }}</div>
                        </div>
                     </div>
                  </el-col>
               </el-row>
            </el-card>
         </el-col>
         <!-- 更新信息 -->
         <el-col :span="24">
@@ -84,27 +66,13 @@
               <el-form :model="state.personalForm" size="default" label-width="40px" class="mt35 mb35">
                  <el-row :gutter="35">
                     <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                        <el-form-item label="昵称">
                        <el-form-item label="姓名">
                           <el-input v-model="state.personalForm.name" placeholder="请输入昵称" clearable></el-input>
                        </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                        <el-form-item label="邮箱">
                           <el-input v-model="state.personalForm.email" placeholder="请输入邮箱" clearable></el-input>
                        </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                        <el-form-item label="签名">
                           <el-input v-model="state.personalForm.autograph" placeholder="请输入签名" clearable></el-input>
                        </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                        <el-form-item label="职业">
                           <el-select v-model="state.personalForm.occupation" placeholder="请选择职业" clearable class="w100">
                              <el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
                              <el-option label="生产 / 工艺 / 制造" value="2"></el-option>
                              <el-option label="医疗 / 护理 / 制药" value="3"></el-option>
                           </el-select>
                        </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
@@ -115,14 +83,14 @@
                     <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                        <el-form-item label="性别">
                           <el-select v-model="state.personalForm.sex" placeholder="请选择性别" clearable class="w100">
                              <el-option label="男" value="1"></el-option>
                              <el-option label="女" value="2"></el-option>
                              <el-option label="男" :value="0"></el-option>
                              <el-option label="女" :value="1"></el-option>
                           </el-select>
                        </el-form-item>
                     </el-col>
                     <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                     <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
                        <el-form-item>
                           <el-button type="primary">
                           <el-button type="primary" @click="updatePat">
                              <el-icon>
                                 <ele-Position />
                              </el-icon>
@@ -137,75 +105,98 @@
                  <div class="personal-edit-safe-item">
                     <div class="personal-edit-safe-item-left">
                        <div class="personal-edit-safe-item-left-label">账户密码</div>
                        <div class="personal-edit-safe-item-left-value">当前密码强度:强</div>
                        <div class="personal-edit-safe-item-left-value">当前密码强度:一般</div>
                     </div>
                     <div class="personal-edit-safe-item-right">
                        <el-button text type="primary">立即修改</el-button>
                        <el-button text type="primary" @click="updataPSWD">立即修改</el-button>
                     </div>
                  </div>
               </div>
               <div class="personal-edit-safe-box">
                  <div class="personal-edit-safe-item">
                     <div class="personal-edit-safe-item-left">
                        <div class="personal-edit-safe-item-left-label">密保手机</div>
                        <div class="personal-edit-safe-item-left-value">已绑定手机:132****4108</div>
                     </div>
                     <div class="personal-edit-safe-item-right">
                        <el-button text type="primary">立即修改</el-button>
                     </div>
                  </div>
               </div>
               <div class="personal-edit-safe-box">
                  <div class="personal-edit-safe-item">
                     <div class="personal-edit-safe-item-left">
                        <div class="personal-edit-safe-item-left-label">密保问题</div>
                        <div class="personal-edit-safe-item-left-value">已设置密保问题,账号安全大幅度提升</div>
                     </div>
                     <div class="personal-edit-safe-item-right">
                        <el-button text type="primary">立即设置</el-button>
                     </div>
                  </div>
               </div>
               <div class="personal-edit-safe-box">
                  <div class="personal-edit-safe-item">
                     <div class="personal-edit-safe-item-left">
                        <div class="personal-edit-safe-item-left-label">绑定QQ</div>
                        <div class="personal-edit-safe-item-left-value">已绑定QQ:110****566</div>
                     </div>
                     <div class="personal-edit-safe-item-right">
                        <el-button text type="primary">立即设置</el-button>
                     </div>
                  </div>
               </div>
            </el-card>
         </el-col>
      </el-row>
      <editTemplate ref="editTemplateRef"></editTemplate>
   </div>
</template>
<script setup lang="ts" name="personal">
import { reactive, computed } from 'vue';
import editTemplate from '/@/views/personal/component/editUserInfo.vue'
import { reactive, computed, onMounted, ref } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import { newsInfoList, recommendList } from './mock';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import {  recommendList } from './mock';
import {getUserDetail2} from '/@/api/Patients'
import {editUserInfo} from '/@/api/login'
import { ElLoading } from 'element-plus';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
// 定义变量内容
const state = reactive<PersonalState>({
   newsInfoList,
   newsInfoList:[],
   recommendList,
   personalForm: {
      id:0,
      code:'',
      name: '',
      email: '',
      autograph: '',
      occupation: '',
      phone: '',
      sex: '',
      sex: 0,
      roles:[]
   },
   isShowDialog:false,
});
const editTemplateRef=ref()
// 当前时间提示语
const currentTime = computed(() => {
   return formatAxis(new Date());
});
const updatePat=()=>{
   const data={
      id: state.personalForm.id,
      code:state.personalForm.code,
      userGender: state.personalForm.sex,
      userName: state.personalForm.name,
      userMobile: state.personalForm.phone,
      userEmail:state.personalForm.email
   }
   console.log(data)
   const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
   })
   editUserInfo(data).then(res=>{
      console.log(res.data)
   }).finally(()=>{
      loading.close()
      getDetail()
   })
}
// 获取当前用户信息
const getDetail = () => {
      getUserDetail2(`code=${userInfos.value.code}`).then((res) => {
      state.personalForm.id=res.data.id
      state.personalForm.code=res.data.code
        state.personalForm.name = res.data.userName
        state.personalForm.phone = res.data.userMobile
        state.personalForm.email = res.data.userEmail
        state.personalForm.sex = res.data.userGender
      state.personalForm.roles=res.data.roles
      console.log(state.personalForm,'0000000')
      })
    }
const updataPSWD=()=>{
   editTemplateRef.value.openDialog(state.personalForm)
}
onMounted(()=>{
   console.log(userInfos,'00000')
   getDetail()
})
</script>
<style scoped lang="scss">
@@ -252,6 +243,7 @@
            }
            .personal-item-value {
               @include text-ellipsis(1);
            }
         }
      }