个人画像

src/views/resume/components/basicInfo.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="resume-box">
-    <div class="resume-title">{{ $t('resume.basicInfo') }}</div>
+    <div class="resume-header">
+      <div class="resume-title">{{ $t('resume.basicInfo') }}</div>
+      <v-btn v-if="!isEdit" variant="text" color="primary" prepend-icon="mdi-square-edit-outline" @click="isEdit = true">{{ $t('common.edit') }}</v-btn>
+    </div>
     <div class="d-flex align-center">
       <!-- 头像 -->
       <div class="avatarsBox" @mouseover="showIcon = true" @mouseleave="showIcon = false">
@@ -24,32 +27,42 @@
             <span v-if="info.sex" class="mdi mdi-gender-male" style="color: blue"></span>
             <span v-else class="mdi mdi-gender-female" style="color: red"></span>
           </span>
-          <div class="listBox">
-            <div>
-              <span class="mdi mdi-account-outline"></span>
-              <span>{{ info.name }}</span>
-            </div>
-            <div>
-              <span class="mdi mdi-map-marker-outline"></span>
-              <span>{{ info.city }}</span>
-            </div>
-            <div>
-              <span class="mdi mdi-phone-outline"></span>
-              <span>{{ info.phoneNum }}</span>
-            </div>
-            <div>
-              <span class="mdi mdi-email-outline"></span>
-              <span>{{ info.email }}</span>
-            </div>
-            <div>
-              <span class="mdi mdi-calendar-blank-outline"></span>
-              <span>{{ info.workExperience }}</span>
+          <div class="mt-3 d-flex">
+            <div class="listBox">
+              <div>
+                <span class="mdi mdi-account-outline"></span>
+                <span>{{ info.name }}</span>
+              </div>
+              <div>
+                <span class="mdi mdi-map-marker-outline"></span>
+                <span>{{ info.city }}</span>
+              </div>
+              <div>
+                <span class="mdi mdi-phone-outline"></span>
+                <span>{{ info.phoneNum }}</span>
+              </div>
+              <div>
+                <span class="mdi mdi-email-outline"></span>
+                <span>{{ info.email }}</span>
+              </div>
+              <div>
+                <span class="mdi mdi-calendar-blank-outline"></span>
+                <span>{{ info.workExperience }}</span>
+              </div>
+              <div>
+                <span class="mdi mdi-school-outline"></span>
+                <span>{{ info.edu }}</span>
+              </div>
             </div>
             <div>
-              <span class="mdi mdi-school-outline"></span>
-              <span>{{ info.edu }}</span>
+              <v-btn variant="text" color="primary" v-if="isExpand" @click="expand">收起</v-btn>
+              <v-btn variant="text" color="primary" v-else @click="expand">展开</v-btn>
             </div>
           </div>
+          <div class="mt-5">
+            <span style="font-size: 15px;">个人画像：</span>
+            <v-chip size="small" label v-for="(k, i) in welfareList.slice(0, 8)" :key="i" class="mr-2" color="primary">{{ k }}</v-chip>
+          </div>
         </div>
       </div>
     </div>
@@ -70,6 +83,7 @@ const showIcon = ref(false)
 const isExpand = ref(false)
 // const defaultYearMonthValue = ref(getYearMonth20YearsAgo())
 // const yearMonth = ref(generateYearMonthDataArray())
+const welfareList = ref(['热情活泼', '理性冷静', '富有创新', '热爱生活', '有幽默感'])
 const info = {
   name: '陈芊芊',
   sex: false,
@@ -258,6 +272,109 @@ const formList = ref({
         }
       ]
     },
+    {
+      type: 'autocomplete',
+      key: 'workType',
+      value: '0',
+      default: null,
+      label: '求职类型 *',
+      col: 6,
+      outlined: true,
+      itemText: 'label',
+      itemValue: 'value',
+      rules: [v => !!v || '请选择求职类型'],
+      items: 
+      [
+        {
+          id: 1548, 
+          label: "全职", 
+          value: "0"
+        }, 
+        {
+          id: 1549, 
+          label: "兼职", 
+          value: "1"
+        }, 
+        {
+          id: 1550, 
+          label: "临时", 
+          value: "2"
+        }, 
+        {
+          id: 1551, 
+          label: "实习", 
+          value: "3"
+        }
+      ]
+    },
+    {
+      type: 'autocomplete',
+      key: 'sale',
+      value: '5',
+      default: null,
+      label: '薪资要求 *',
+      col: 6,
+      outlined: true,
+      itemText: 'label',
+      itemValue: 'value',
+      rules: [v => !!v || '请选择薪资要求'],
+      items: 
+      [
+        {
+          id: 1612, 
+          label: "不限", 
+          value: "0"
+        }, 
+        {
+          id: 1613, 
+          label: "3K以下", 
+          value: "1"
+        }, 
+        {
+          id: 1614, 
+          label: "3-5K", 
+          value: "2"
+        }, 
+        {
+          id: 1615, 
+          label: "5-10K", 
+          value: "3"
+        }, 
+        {
+          id: 1616, 
+          label: "10-20K", 
+          value: "4"
+        }, 
+        {
+          id: 1617, 
+          label: "20-50K", 
+          value: "5"
+        }, 
+        {
+          id: 1618, 
+          label: "50K以上", 
+          value: "6"
+        }
+      ]
+    },
+    {
+      type: 'text',
+      key: 'name',
+      value: '酒店经理',
+      default: null,
+      label: '期望职位',
+      col: 6,
+      outlined: true
+    },
+    {
+      type: 'text',
+      key: 'name',
+      value: '行业不限',
+      default: null,
+      label: '期望行业',
+      col: 6,
+      outlined: true
+    }
   ]
 })
 formList.value.options.forEach((_e, index) => {
@@ -265,119 +382,6 @@ formList.value.options.forEach((_e, index) => {
 })
 
 const expand = () => {
-  if (isExpand.value) {
-    formList.value.options.splice(8, formList.value.options.length)
-  } else {
-    const expandArr = [
-      {
-        type: 'autocomplete',
-        key: 'workType',
-        value: '0',
-        default: null,
-        label: '求职类型 *',
-        col: 6,
-        outlined: true,
-        itemText: 'label',
-        itemValue: 'value',
-        rules: [v => !!v || '请选择求职类型'],
-        items: 
-        [
-          {
-            id: 1548, 
-            label: "全职", 
-            value: "0"
-          }, 
-          {
-            id: 1549, 
-            label: "兼职", 
-            value: "1"
-          }, 
-          {
-            id: 1550, 
-            label: "临时", 
-            value: "2"
-          }, 
-          {
-            id: 1551, 
-            label: "实习", 
-            value: "3"
-          }
-        ]
-      },
-      {
-        type: 'autocomplete',
-        key: 'sale',
-        value: '5',
-        default: null,
-        label: '薪资要求 *',
-        col: 6,
-        outlined: true,
-        itemText: 'label',
-        itemValue: 'value',
-        rules: [v => !!v || '请选择薪资要求'],
-        items: 
-        [
-          {
-            id: 1612, 
-            label: "不限", 
-            value: "0"
-          }, 
-          {
-            id: 1613, 
-            label: "3K以下", 
-            value: "1"
-          }, 
-          {
-            id: 1614, 
-            label: "3-5K", 
-            value: "2"
-          }, 
-          {
-            id: 1615, 
-            label: "5-10K", 
-            value: "3"
-          }, 
-          {
-            id: 1616, 
-            label: "10-20K", 
-            value: "4"
-          }, 
-          {
-            id: 1617, 
-            label: "20-50K", 
-            value: "5"
-          }, 
-          {
-            id: 1618, 
-            label: "50K以上", 
-            value: "6"
-          }
-        ]
-      },
-      {
-        type: 'text',
-        key: 'name',
-        value: '酒店经理',
-        default: null,
-        label: '期望职位',
-        col: 6,
-        outlined: true
-      },
-      {
-        type: 'text',
-        key: 'name',
-        value: '行业不限',
-        default: null,
-        label: '期望行业',
-        col: 6,
-        outlined: true
-      }
-    ]
-    formList.value.options = [...formList.value.options, ...expandArr]
-  }
-  formList.value.options.forEach((_e, index) => {
-    if ((index + 2) % 2 === 0) _e.flexStyle = 'mr-3'
-  })
   isExpand.value = !isExpand.value
 }