update

src/store/index.js

@@ -48,6 +48,7 @@ export default new Vuex.Store({
     async getVoteList({ commit }, city) {
       await getVoteList({ city }).then(response => {
         response = response.map(item => {
+          item.collapsed = false
           item.limit = item.limit ? parseInt(item.limit) : 0
           item.checkedCount = 0
           item.candidate = item.candidate.map(user => {

src/views/vote/Choose.vue

@@ -7,8 +7,12 @@
           <p class="vote-project-text">
             您可选择{{ item.limit }}名候选人，已选择{{ item.checkedCount }}/{{ item.limit }}
           </p>
+          <div class="collapse" @click="toggleCollapse(item)">
+            <van-icon name="arrow-down" v-if="item.collapsed" />
+            <van-icon name="arrow-up" v-else />
           </div>
-        <div class="vote-project-bd">
+        </div>
+        <div class="vote-project-bd" v-show="!item.collapsed">
           <div class="vote-item" v-for="user in item.candidate" :key="user.id">
             <div class="vote-item-pic" @click="handleClickItem(user)">
               <img :src="user.photo" />
@@ -48,6 +52,9 @@ export default {
     }
   },
   methods: {
+    toggleCollapse(item) {
+      item.collapsed = !item.collapsed
+    },
     handleClickItem(item) {
       this.$router.push({ name: 'voteItem', params: { id: item.id } })
     },
@@ -85,9 +92,18 @@ export default {
 <style scoped src="../../assets/css/vote.css"></style>
 <style lang="scss" scoped>
 .vote-project-hd {
+  position: relative;
   padding: 0.1rem 0;
   border-bottom: 1px solid #ccc;
 }
+.collapse {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 20px;
+  padding: 10px;
+}
 .vote-project-title {
   font-size: 0.2rem;
   font-weight: 600;

src/views/vote/Item.vue

@@ -6,7 +6,16 @@
         {{ `${detail.num}号：${detail.name}` }}
       </div>
     </div>
-    <div class="box" v-html="detail.describe"></div>
+    <div class="box" v-html="detail.describe" v-if="detail.describe"></div>
+    <div class="box" v-else>
+      <p v-for="item in fields" :key="item.code">
+        <b>{{ item.label }}：</b>
+        <span>
+          <template v-if="item.computed">{{ item.computed(detail[item.code]) }}</template>
+          <template v-else>{{ detail[item.code] }}</template>
+        </span>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -16,7 +25,25 @@ export default {
   metaInfo: { title: '投票' },
   data() {
     return {
-      detail: {}
+      detail: {},
+      fields: [
+        {
+          label: '性别',
+          code: 'gender',
+          computed(value) {
+            const map = { 0: '女', 1: '男' }
+            return map[value]
+          }
+        },
+        { label: '省份', code: 'province' },
+        { label: '城市', code: 'city' },
+        { label: '班级', code: 'class' },
+        { label: '所属项目', code: 'project' },
+        { label: '目前工作单位', code: 'company' },
+        { label: '职务', code: 'job' },
+        { label: '个人曾获得的社会荣誉列举', code: 'honor' },
+        { label: '自荐说明', code: 'recommend' }
+      ]
     }
   },
   computed: {
@@ -50,6 +77,13 @@ export default {
   background-color: #fff;
   box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
   border-radius: 0.04rem;
+  p {
+    margin-bottom: 5px;
+    line-height: 24px;
+  }
+  b {
+    font-weight: bold;
+  }
 }
 .user {
   display: flex;