| | |
| | | <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> |
| | |
| | | </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"> |
| | |
| | | <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"> |
| | |
| | | <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> |
| | |
| | | <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"> |
| | |
| | | } |
| | | .personal-item-value { |
| | | @include text-ellipsis(1); |
| | | |
| | | } |
| | | } |
| | | } |