Merge branch 'master' of http://git.cc-lotus.info/Information/cxyy-web

src/views/center/index.vue

@@ -0,0 +1,322 @@
+<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="industry">
+                <el-checkbox-group v-model="form.industry">
+                  <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="请输入手机号" :disabled="true">
+                  <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="请填入正确的电子邮箱" :disabled="true">
+                  <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, get } 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' }],
+  industry: [{ 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') {
+      const data = get(res, 'data')
+      if (!get(data, 'industry')) data.industry = []
+      form.value = 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
+      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>