|
@@ -0,0 +1,320 @@
|
|
|
+<template>
|
|
|
+ <custom-layout class="main">
|
|
|
+ <div class="w_1300 one">
|
|
|
+ <el-tabs v-model="activeName" type="card" class="tabs">
|
|
|
+ <el-tab-pane label="个人中心" name="first">
|
|
|
+ <el-col :span="24" class="one_1"> 基本信息</el-col>
|
|
|
+ <el-col :span="24" class="one_2">
|
|
|
+ <el-form label-position="top" ref="FormRef" :model="form" :rules="rules" label-width="80px" class="form">
|
|
|
+ <el-form-item label="账号" prop="account">
|
|
|
+ <el-input size="large" clearable disabled v-model="form.account" placeholder="请输入账号">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <User />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="板块选择" prop="plate">
|
|
|
+ <el-checkbox-group v-model="form.plate">
|
|
|
+ <el-checkbox v-for="(item, index) in plateList" :key="index" :value="item.title" name="type">{{ item.title }}</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="昵称" prop="nick_name">
|
|
|
+ <el-input size="large" clearable v-model="form.nick_name" placeholder="请输入昵称">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Avatar />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="性别" prop="gender">
|
|
|
+ <el-select size="large" v-model="form.gender" width="100%" placeholder="请选择性别">
|
|
|
+ <el-option v-for="(item, index) in genderList" :key="index" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="手机号" prop="phone">
|
|
|
+ <el-input size="large" clearable v-model="form.phone" placeholder="请输入手机号">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Iphone />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电子邮箱" prop="email">
|
|
|
+ <el-input size="large" clearable v-model="form.email" placeholder="请填入正确的电子邮箱">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Message />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-col :span="24" class="button">
|
|
|
+ <el-button type="primary" @click="submitForm(FormRef)">保存</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ <el-row v-if="form.role_type != 'User'">
|
|
|
+ <el-col :span="24" class="one_1">
|
|
|
+ 基本资料
|
|
|
+ <span>(注意:如需修改信息需要重新审核才可显示!)</span>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24" class="one_2">
|
|
|
+ <expert v-if="form.role_type == 'Expert'"></expert>
|
|
|
+ <company v-if="form.role_type == 'Company'"></company>
|
|
|
+ <incubator v-if="form.role_type == 'Incubator'"></incubator>
|
|
|
+ <competition v-if="form.role_type == 'Competition'"></competition>
|
|
|
+ <investment v-if="form.role_type == 'Investment'"></investment>
|
|
|
+ <association v-if="form.role_type == 'Association'"></association>
|
|
|
+ <state v-if="form.role_type == 'State'"></state>
|
|
|
+ <unit v-if="form.role_type == 'Unit'"></unit>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="修改密码" name="second">
|
|
|
+ <el-col :span="24" class="one_2">
|
|
|
+ <el-form label-position="top" ref="secondRule" :model="secondForm" :rules="secondRules" label-width="80px" class="form">
|
|
|
+ <el-form-item label="新密码" prop="password">
|
|
|
+ <el-input size="large" v-model="secondForm.password" type="password" show-password placeholder="请输入新密码">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Unlock />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="确认密码" prop="refpassword">
|
|
|
+ <el-input size="large" v-model="secondForm.refpassword" type="password" show-password placeholder="请再次确认输入密码">
|
|
|
+ <template #prefix>
|
|
|
+ <el-icon>
|
|
|
+ <Unlock />
|
|
|
+ </el-icon>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-col :span="24" class="button">
|
|
|
+ <el-button type="primary" @click="submit(secondRule)">修改密码</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </custom-layout>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { cloneDeep } from 'lodash-es'
|
|
|
+// 组件
|
|
|
+import association from './parts/association.vue'
|
|
|
+import company from './parts/company.vue'
|
|
|
+import competition from './parts/competition.vue'
|
|
|
+import expert from './parts/expert.vue'
|
|
|
+import incubator from './parts/incubator.vue'
|
|
|
+import state from './parts/state.vue'
|
|
|
+import unit from './parts/unit.vue'
|
|
|
+import investment from './parts/investment.vue'
|
|
|
+// 接口
|
|
|
+import { UserStore } from '@/store/user'
|
|
|
+const userStore = UserStore()
|
|
|
+const user = computed(() => userStore.user)
|
|
|
+const router = useRouter()
|
|
|
+import { UsersStore } from '@/store/api/user/user'
|
|
|
+const store = UsersStore()
|
|
|
+import { DictDataStore } from '@/store/api/system/dictData'
|
|
|
+import { RegionStore } from '@/store/api/system/region'
|
|
|
+import { SectorStore } from '@/store/api/platform/sector'
|
|
|
+import { LoginStore } from '@/store/api/login'
|
|
|
+const loginStore = LoginStore()
|
|
|
+const dictDataStore = DictDataStore()
|
|
|
+const regionStore = RegionStore()
|
|
|
+const sectorStore = SectorStore()
|
|
|
+const $checkRes = inject('$checkRes')
|
|
|
+// 加载中
|
|
|
+const loading = ref(false)
|
|
|
+const activeName = ref('first')
|
|
|
+const form = ref({})
|
|
|
+// 表单验证
|
|
|
+const ruleFormRef = ref()
|
|
|
+const FormRef = ref()
|
|
|
+const validatePhoneNumber = (rule, value, callback) => {
|
|
|
+ const reg = /^1[3-9]\d{9}$/
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error('手机号不能为空'))
|
|
|
+ }
|
|
|
+ if (!reg.test(value)) {
|
|
|
+ return callback(new Error('请输入正确的手机号'))
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+}
|
|
|
+const validatePassword = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ return callback(new Error('请输入确认密码'))
|
|
|
+ }
|
|
|
+ if (secondForm.value.password !== value) {
|
|
|
+ callback(new Error('两次输入的密码不一致'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+}
|
|
|
+const rules = reactive({
|
|
|
+ nick_name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
|
|
|
+ gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
|
|
|
+ phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
|
|
|
+ email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
|
|
|
+ account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
|
|
+ plate: [{ required: true, message: '请选择板块', trigger: 'blur' }]
|
|
|
+})
|
|
|
+const secondRule = ref()
|
|
|
+const secondForm = ref({})
|
|
|
+const secondRules = reactive({
|
|
|
+ password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
|
|
|
+ refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
|
|
|
+})
|
|
|
+// 字典
|
|
|
+const typeList = ref([])
|
|
|
+const genderList = ref([])
|
|
|
+const fieldList = ref([])
|
|
|
+const educationList = ref([])
|
|
|
+const cityList = ref([])
|
|
|
+const isUseList = ref([])
|
|
|
+const patternList = ref([])
|
|
|
+const scaleList = ref([])
|
|
|
+const IndustryList = ref([])
|
|
|
+const cardTypeList = ref([])
|
|
|
+const contributionList = ref([])
|
|
|
+const plateList = ref([])
|
|
|
+// 请求
|
|
|
+onMounted(async () => {
|
|
|
+ loading.value = true
|
|
|
+ await searchOther()
|
|
|
+ await search()
|
|
|
+ loading.value = false
|
|
|
+})
|
|
|
+const search = async () => {
|
|
|
+ if (user.value.id) {
|
|
|
+ let res = await store.detail(user.value.id)
|
|
|
+ if (res.errcode == '0') form.value = res.data
|
|
|
+ }
|
|
|
+}
|
|
|
+const searchOther = async () => {
|
|
|
+ let result
|
|
|
+ // 性别
|
|
|
+ result = await dictDataStore.query({ code: 'gender', is_use: '0' })
|
|
|
+ if ($checkRes(result)) genderList.value = result.data
|
|
|
+ // 用户类型
|
|
|
+ result = await dictDataStore.query({ code: 'userType', is_use: '0' })
|
|
|
+ if ($checkRes(result)) typeList.value = result.data
|
|
|
+ // 专家领域
|
|
|
+ result = await dictDataStore.query({ code: 'field', is_use: '0' })
|
|
|
+ if ($checkRes(result)) fieldList.value = result.data
|
|
|
+ // 企业类型
|
|
|
+ result = await dictDataStore.query({ code: 'companyType', is_use: '0' })
|
|
|
+ if ($checkRes(result)) patternList.value = result.data
|
|
|
+ // 企业规模
|
|
|
+ result = await dictDataStore.query({ code: 'companyScale', is_use: '0' })
|
|
|
+ if ($checkRes(result)) scaleList.value = result.data
|
|
|
+ // 企业所属行业
|
|
|
+ result = await dictDataStore.query({ code: 'companyIndustry', is_use: '0' })
|
|
|
+ if ($checkRes(result)) IndustryList.value = result.data
|
|
|
+ // 学历
|
|
|
+ result = await dictDataStore.query({ code: 'education', is_use: '0' })
|
|
|
+ if ($checkRes(result)) educationList.value = result.data
|
|
|
+ // 证件类型
|
|
|
+ result = await dictDataStore.query({ code: 'cardType', is_use: '0' })
|
|
|
+ if ($checkRes(result)) cardTypeList.value = result.data
|
|
|
+ // 出资方式
|
|
|
+ result = await dictDataStore.query({ code: 'contribution', is_use: '0' })
|
|
|
+ if ($checkRes(result)) contributionList.value = result.data
|
|
|
+ // 是否使用
|
|
|
+ result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
|
|
|
+ if ($checkRes(result)) isUseList.value = result.data
|
|
|
+ // 城市
|
|
|
+ result = await regionStore.area({ level: 'province', code: 22 })
|
|
|
+ if ($checkRes(result)) cityList.value = result.data
|
|
|
+ // 板块
|
|
|
+ result = await sectorStore.query({ is_use: '0' })
|
|
|
+ if ($checkRes(result)) plateList.value = result.data
|
|
|
+}
|
|
|
+// 保存
|
|
|
+const submitForm = async (formEl) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate(async (valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ const data = cloneDeep(form.value)
|
|
|
+ if (data.role_type) delete data.role_type
|
|
|
+ if (data.plate && data.plate.length > 0) data.industry = data.plate[0]
|
|
|
+ delete data.plate
|
|
|
+ const res = await store.update(data)
|
|
|
+ if ($checkRes(res, true)) search()
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// 修改密码
|
|
|
+const submit = async (formEl) => {
|
|
|
+ if (!formEl) return
|
|
|
+ await formEl.validate(async (valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+ const data = cloneDeep(secondForm.value)
|
|
|
+ const res = await loginStore.rp({
|
|
|
+ type: 'User',
|
|
|
+ _id: user.value.id,
|
|
|
+ password: data.password
|
|
|
+ })
|
|
|
+ if ($checkRes(res, true)) {
|
|
|
+ userStore.logOut()
|
|
|
+ router.push('/login')
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!', fields)
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+// provide
|
|
|
+provide('cloneDeep', cloneDeep)
|
|
|
+provide('ruleFormRef ', ruleFormRef)
|
|
|
+// 字典
|
|
|
+provide('genderList', genderList)
|
|
|
+provide('fieldList', fieldList)
|
|
|
+provide('educationList', educationList)
|
|
|
+provide('cityList', cityList)
|
|
|
+provide('isUseList', isUseList)
|
|
|
+provide('patternList', patternList)
|
|
|
+provide('scaleList', scaleList)
|
|
|
+provide('IndustryList', IndustryList)
|
|
|
+provide('cardTypeList', cardTypeList)
|
|
|
+provide('contributionList', contributionList)
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.main {
|
|
|
+ background-color: #f1f2f5;
|
|
|
+ .one {
|
|
|
+ margin: 10px auto;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+ .one_1 {
|
|
|
+ line-height: $global-font-size-18;
|
|
|
+ font-size: $global-font-size-18;
|
|
|
+ font-weight: 500;
|
|
|
+ border-bottom: 1px solid #f9f9f9;
|
|
|
+ padding: 10px 0;
|
|
|
+ span {
|
|
|
+ color: red;
|
|
|
+ font-size: $global-font-size-14;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .one_2 {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .button {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|