优化代码

src/project/fengdu/AppCircle/AppCircle.vue

@@ -12,50 +12,52 @@
     </div>
     <div class="nav" v-if="topic.length">
       <div
-        class="nav-item"
-        hover-class="text-hover"
-        v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
-        <image :src="item.picUrl" mode="aspectFill" />
+          class="nav-item"
+          hover-class="text-hover"
+          v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
+        <image :src="item.picUrl" mode="aspectFill"/>
         <h2>{{ item.title }}</h2>
       </div>
       <div class="nav-item" hover-class="text-hover" @click="$linkTo('./Topic')" v-if="topicList.length > 6">
-        <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png" />
+        <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-more.png"/>
         <h2>更多</h2>
       </div>
     </div>
     <div class="AppCircle-list">
       <div class="item"
-        v-for="(item, index) in list"
-        :key="index"
-        hover-class="text-hover"
-        hover-stop-propagation
-        @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
+           v-for="(item, index) in list"
+           :key="index"
+           hover-class="text-hover"
+           hover-stop-propagation
+           @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
         <div class="item-top">
-          <image :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'" />
+          <image :src="item.createUserAvatar || 'https://cdn.cunwuyun.cn/wxmp/fengdu/avatar.png'"/>
           <div class="right">
             <h3>{{ item.createUserName }}</h3>
             <span v-if="item.publishDepartName">{{ item.publishDepartName }}</span>
           </div>
         </div>
         <div class="item-content">
-          <span hover-stop-propagation v-if="item.themeId" @click.stop="$linkTo('./TopicDetail?themeId=' + item.themeId + '&name=' + item.topicName)">#【{{ item.topicName }}】</span>
+          <span hover-stop-propagation v-if="item.themeId"
+                @click.stop="$linkTo('./TopicDetail?themeId=' + item.themeId + '&name=' + item.topicName)">#【{{ item.topicName }}】</span>
           <text>{{ item.content }}</text>
         </div>
         <div class="item-imgs" v-if="item.files.length">
-          <image mode="aspectFill" @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url" />
+          <image mode="aspectFill" @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files" :key="i" :src="e.url"/>
         </div>
         <p>{{ item.createTime }}</p>
         <div class="item-bottom">
-          <button hover-stop-propagation @click.stop="onBtnClick" open-type="share" :data-content="item.content" :data-themeid="item.themeId" :data-id="item.id" :data-name="item.topicName">
-            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png" />
+          <button hover-stop-propagation @click.stop="onBtnClick" open-type="share" :data-content="item.content" :data-themeid="item.themeId" :data-id="item.id"
+                  :data-name="item.topicName">
+            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-zhuanfa.png"/>
             <i>{{ item.sharedCount }}</i>
           </button>
           <div hover-stop-propagation @click.stop="reciate(item.id, item.appreciateStatus)">
-            <image :src="item.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'" />
+            <image :src="item.appreciateStatus ? 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png' : 'https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png'"/>
             <i>{{ item.appreciateCount }}</i>
           </div>
           <div>
-            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png" />
+            <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-pinglun.png"/>
             <i>{{ item.commentCount }}</i>
           </div>
         </div>
@@ -63,442 +65,437 @@
       <AiEmpty v-if="!list.length"></AiEmpty>
     </div>
     <div class="add" hover-class="text-hover" @click="toAdd">
-      <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fatie.png" />
+      <image src="https://cdn.cunwuyun.cn/wxmp/fengdu/ic-fatie.png"/>
     </div>
     <AiLogin ref="login"/>
   </div>
 </template>
 <script>
-  import { mapActions, mapState } from 'vuex'
+import {mapActions, mapState} from 'vuex'
 
-  export default {
-    name: 'AppCircle',
-    appName: '邻里互助',
-    navigationBarBackgroundColor: '#ffffff',
-    navigationBarTextStyle: 'black',
+export default {
+  name: 'AppCircle',
+  appName: '邻里互助',
+  navigationBarBackgroundColor: '#ffffff',
+  navigationBarTextStyle: 'black',
 
-    data () {
-      return {
-        currIndex: 0,
-        topicList: [],
-        list: [],
-        isMore: false,
-        current: 1,
-        total: 0
-      }
-    },
+  data() {
+    return {
+      currIndex: 0,
+      topicList: [],
+      list: [],
+      isMore: false,
+      current: 1,
+      total: 0
+    }
+  },
 
-    computed: {
-      ...mapState(['user', 'token']),
+  computed: {
+    ...mapState(['user', 'token']),
 
-      topic () {
-        return this.topicList.filter((v, index) => index < 7)
-      }
-    },
+    topic() {
+      return this.topicList.filter((v, index) => index < 7)
+    }
+  },
 
-    onLoad () {
-      this.getTopicList()
+  onLoad() {
+    this.getTopicList()
 
-      uni.$on('updateList', () => {
+    uni.$on('updateList', () => {
+      this.getMyPublishCount()
+      this.changeTab(this.currIndex)
+    })
+
+    if (!this.token) {
+      this.autoLogin().then(() => {
         this.getMyPublishCount()
-        this.changeTab(this.currIndex)
       })
+    } else {
+      this.getMyPublishCount()
+    }
+  },
 
-      if (!this.token) {
-        this.autoLogin().then(() => {
-          this.getMyPublishCount()
-        })
-      } else {
-        this.getMyPublishCount()
-      }
+  onUnload() {
+    uni.$off('updateList')
+  },
+
+  methods: {
+    ...mapActions(['autoLogin']),
+
+    previewImage(url, files) {
+      uni.previewImage({
+        current: url,
+        urls: files.map(v => v.url)
+      })
     },
 
-    onUnload () {
-      uni.$off('updateList')
+    onBtnClick(e) {
     },
 
-    methods: {
-      ...mapActions(['autoLogin']),
-
-      previewImage (url, files) {
-        uni.previewImage({
-          current: url,
-          urls: files.map(v => v.url)
-        })
-      },
-
-      onBtnClick (e) {
-      },
-
-      reciate (id, appreciateStatus) {
-        this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${id}`).then(res => {
-          if (res.code === 0) {
-            this.$toast(appreciateStatus ? '取消点赞' : '点赞成功')
-
-            this.changeTab(this.currIndex)
-          }
-        })
-      },
-
-      getMyPublishCount () {
-        this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
-          params: {
-            current: 1,
-            size: 10,
-            listType: 0,
-            createUserId: this.user.id
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.total = res.data.total
-          }
-        })
-      },
-
-      toAdd () {
-        if (this.user.areaId) {
-          this.$linkTo('./Add')
-        } else {
-          this.$dialog.confirm({
-            content: '您只有完成信息认证后，才可进行相关操作。',
-            confirmText: '去认证'
-          }).then(() => {
-            this.$linkTo('../AppMine/userInfo')
-          }).catch(() => {
-          })
-        }
-      },
-
-      getTopicList () {
-        this.$instance.post(`/app/appneighborhoodassistancetheme/list`, null, {
-          withoutToken: true,
-          params: {
-            current: 1,
-            size: 100
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.topicList = res.data.records
-            this.getList()
-          }
-        })
-      },
-
-      changeTab (index) {
-        this.currIndex = index
-        this.isMore = false
-        this.current = 1
-
-        this.$nextTick(() => {
-          this.getList()
-        })
-      },
-
-      getList () {
-        if (this.isMore) return
-
-        this.$loading()
-        this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
-          withoutToken: this.token ? false : true,
-          params: {
-            current: this.current,
-            size: 10,
-            visibleRange: this.currIndex === 0 ? 1 : 0
-          }
-        }).then(res => {
-          if (res.code === 0) {
-            this.$hideLoading()
-            if (this.current > 1) {
-              this.list = [...this.list, ...res.data.records.map(e => {
-                return {
-                  ...e,
-                  topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
-                }
-              })]
-            } else {
-              this.list = res.data.records.map(e => {
-                return {
-                  ...e,
-                  topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
-                }
-              })
-            }
-
-            if (res.data.records.length < 10) {
-              this.isMore = true
-
-              return false
-            }
-
-            this.current = this.current + 1
-          } else {
-            this.isMore = true
-          }
-        }).catch(() => {
-          this.$hideLoading()
-        })
-      }
-    },
-
-    onReachBottom () {
-      this.getList()
-    },
-
-    onShareAppMessage (e) {
-      this.$instance.post(`/app/appneighborhoodassistance/share?id=${e.target.dataset.id}`).then(res => {
+    reciate(id, appreciateStatus) {
+      this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${id}`).then(res => {
         if (res.code === 0) {
+          this.$toast(appreciateStatus ? '取消点赞' : '点赞成功')
+
           this.changeTab(this.currIndex)
         }
       })
+    },
 
-      return {
-        title: e.target.dataset.content.substr(0, 20),
-        path: `/pages/AppCircle/Detail?id=${e.target.dataset.id}&themeId=${e.target.dataset.themeid}&name=${e.target.dataset.name}`
+    getMyPublishCount() {
+      this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
+        params: {
+          current: 1,
+          size: 10,
+          listType: 0,
+          createUserId: this.user.id
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.total = res.data.total
+        }
+      })
+    },
+
+    toAdd() {
+      if (this.user.areaId) {
+        this.$linkTo('./Add')
+      } else {
+        this.$dialog.confirm({
+          content: '您只有完成信息认证后，才可进行相关操作。',
+          confirmText: '去认证'
+        }).then(() => {
+          this.$linkTo('../AppMine/userInfo')
+        }).catch(() => {
+        })
       }
+    },
+
+    getTopicList() {
+      this.$instance.post(`/app/appneighborhoodassistancetheme/list`, null, {
+        withoutToken: true,
+        params: {
+          current: 1,
+          size: 100
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          this.topicList = res.data.records
+          this.getList()
+        }
+      })
+    },
+
+    changeTab(index) {
+      this.currIndex = index
+      this.isMore = false
+      this.current = 1
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+
+    getList() {
+      if (this.isMore) return
+      this.$loading()
+      this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
+        withoutToken: !this.token,
+        params: {
+          current: this.current,
+          size: 10,
+          visibleRange: this.currIndex === 0 ? 1 : 0
+        }
+      }).then(res => {
+        if (res.code === 0) {
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records.map(e => {
+              return {
+                ...e,
+                topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
+              }
+            })]
+          } else {
+            this.list = res.data.records.map(e => {
+              return {
+                ...e,
+                topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
+              }
+            })
+          }
+
+          if (res.data.records.length < 10) {
+            this.isMore = true
+
+            return false
+          }
+
+          this.current = this.current + 1
+        } else {
+          this.isMore = true
+        }
+      }).finally(() => this.$hideLoading())
+    }
+  },
+
+  onReachBottom() {
+    this.getList()
+  },
+
+  onShareAppMessage(e) {
+    this.$instance.post(`/app/appneighborhoodassistance/share?id=${e.target.dataset.id}`).then(res => {
+      if (res.code === 0) {
+        this.changeTab(this.currIndex)
+      }
+    })
+
+    return {
+      title: e.target.dataset.content.substr(0, 20),
+      path: `/pages/AppCircle/Detail?id=${e.target.dataset.id}&themeId=${e.target.dataset.themeid}&name=${e.target.dataset.name}`
     }
   }
+}
 </script>
 
 <style scoped lang="scss">
-  .AppCircle {
-    padding-top: 120px;
-    padding-bottom: 40px;
+.AppCircle {
+  padding-top: 120px;
+  padding-bottom: 40px;
 
-    div {
-      box-sizing: border-box;
+  div {
+    box-sizing: border-box;
+  }
+
+  .add {
+    position: fixed;
+    right: 32px;
+    bottom: 32px;
+    z-index: 111;
+
+    image {
+      width: 104px;
+      height: 104px;
     }
+  }
 
-    .add {
-      position: fixed;
-      right: 32px;
-      bottom: 32px;
-      z-index: 111;
+  .nav {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin: 0 32px 24px;
+    padding-top: 30px;
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: inset 0 -1px 0 0 #eeeeee;
 
-      image {
-        width: 104px;
-        height: 104px;
-      }
-    }
-
-    .nav {
+    .nav-item {
       display: flex;
       align-items: center;
-      flex-wrap: wrap;
+      justify-content: center;
+      flex-direction: column;
+      width: 25%;
+      padding-bottom: 32px;
+
+      image {
+        width: 108px;
+        height: 108px;
+      }
+
+      h2 {
+        line-height: 32px;
+        margin-top: 8px;
+        font-size: 26px;
+        font-weight: 400;
+      }
+    }
+  }
+
+  .AppCircle-list {
+    .item {
       margin: 0 32px 24px;
-      padding-top: 30px;
+      padding: 24px 24px 0;
       background: #ffffff;
       border-radius: 16px;
       box-shadow: inset 0 -1px 0 0 #eeeeee;
 
-      .nav-item {
+      .item-top {
         display: flex;
         align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        width: 25%;
-        padding-bottom: 32px;
 
         image {
-          width: 108px;
-          height: 108px;
+          width: 96px;
+          height: 96px;
+          margin-right: 16px;
+          border-radius: 50%;
         }
 
-        h2 {
-          line-height: 32px;
-          margin-top: 8px;
-          font-size: 26px;
-          font-weight: 400;
-        }
-      }
-    }
-
-    .AppCircle-list {
-      .item {
-        margin: 0 32px 24px;
-        padding: 24px 24px 0;
-        background: #ffffff;
-        border-radius: 16px;
-        box-shadow: inset 0 -1px 0 0 #eeeeee;
-
-        .item-top {
-          display: flex;
-          align-items: center;
-
-          image {
-            width: 96px;
-            height: 96px;
-            margin-right: 16px;
-            border-radius: 50%;
-          }
-
-          h3 {
-            color: #333333;
-            text-align: left;
-            font-size: 34px;
-            font-weight: 500;
-          }
-
-          span {
-            margin-top: 12px;
-            color: #999999;
-            font-size: 28px;
-          }
-        }
-
-        .item-imgs {
-          display: flex;
-          align-items: center;
-          flex-wrap: wrap;
-
-          image {
-            height: 208px;
-            width: 33.33%;
-            padding-right: 12px;
-            margin-bottom: 12px;
-            box-sizing: border-box;
-
-            &:nth-of-type(3n) {
-              padding-right: 0;
-            }
-          }
-        }
-
-        & > p {
-          margin: 12px 0;
-          font-size: 28px;
+        h3 {
           color: #333333;
+          text-align: left;
+          font-size: 34px;
+          font-weight: 500;
         }
 
-        .item-bottom {
-          display: flex;
-          align-items: center;
-          height: 88px;
-          border-top: 1px solid #eeeeee;
-
-          div, button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex: 1;
-
-            image {
-              width: 40px;
-              height: 40px;
-              margin: 16px;
-            }
-
-            i {
-              color: #687DA6;
-              font-size: 28px;
-            }
-          }
-        }
-
-
-        .item-content {
-          margin: 16px 0;
-          line-height: 1.3;
-          text-align: justify;
-          word-break: break-all;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-
-          span {
-            font-size: 28px;
-            color: #4181FF;
-          }
-
-          text {
-            font-size: 28px;
-            color: #333333;
-          }
+        span {
+          margin-top: 12px;
+          color: #999999;
+          font-size: 28px;
         }
       }
-    }
 
-    .top {
-      display: flex;
-      position: fixed;
-      align-items: center;
-      justify-content: space-between;
-      top: 0;
-      left: 0;
-      z-index: 11;
-      width: 100%;
-      height: 100px;
-      padding: 0 32px;
-      background: #ffffff;
-
-      .left {
+      .item-imgs {
         display: flex;
         align-items: center;
-        height: 100px;
+        flex-wrap: wrap;
 
-        span {
-          position: relative;
-          height: 100px;
-          line-height: 100px;
-          color: #222;
-          font-size: 30px;
+        image {
+          height: 208px;
+          width: 33.33%;
+          padding-right: 12px;
+          margin-bottom: 12px;
+          box-sizing: border-box;
 
-          &:first-child {
-            margin-right: 64px;
-          }
-
-          &.active {
-            font-weight: 600;
-            font-size: 32px;
-
-            &::after {
-              position: absolute;
-              bottom: 12px;
-              left: 50%;
-              width: 40px;
-              height: 6px;
-              border-radius: 3px;
-              background: #2d7dffff;
-              transform: translateX(-50%);
-              content: ' ';
-            }
+          &:nth-of-type(3n) {
+            padding-right: 0;
           }
         }
       }
 
-      .right {
-        position: relative;
+      & > p {
+        margin: 12px 0;
+        font-size: 28px;
+        color: #333333;
+      }
 
-        i {
-          position: absolute;
-          top: -6px;
-          right: 0;
-          z-index: 11;
-          height: 24px;
-          line-height: 24px;
-          padding: 0 10px;
-          font-size: 16px;
-          color: #fff;
-          border-radius: 50%;
-          border: 2px solid #ffffff;
-          background: #ff5e5e;
-          box-sizing: border-box;
-          transform: translateX(50%);
+      .item-bottom {
+        display: flex;
+        align-items: center;
+        height: 88px;
+        border-top: 1px solid #eeeeee;
+
+        div, button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex: 1;
+
+          image {
+            width: 40px;
+            height: 40px;
+            margin: 16px;
+          }
+
+          i {
+            color: #687DA6;
+            font-size: 28px;
+          }
         }
+      }
+
+
+      .item-content {
+        margin: 16px 0;
+        line-height: 1.3;
+        text-align: justify;
+        word-break: break-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
 
         span {
-          display: block;
-          width: 120px;
-          height: 60px;
-          line-height: 60px;
-          text-align: center;
-          color: #df6b6c;
-          font-size: 24px;
-          border-radius: 10px;
-          border: 1px solid #df6b6c;
+          font-size: 28px;
+          color: #4181FF;
+        }
+
+        text {
+          font-size: 28px;
+          color: #333333;
         }
       }
     }
   }
+
+  .top {
+    display: flex;
+    position: fixed;
+    align-items: center;
+    justify-content: space-between;
+    top: 0;
+    left: 0;
+    z-index: 11;
+    width: 100%;
+    height: 100px;
+    padding: 0 32px;
+    background: #ffffff;
+
+    .left {
+      display: flex;
+      align-items: center;
+      height: 100px;
+
+      span {
+        position: relative;
+        height: 100px;
+        line-height: 100px;
+        color: #222;
+        font-size: 30px;
+
+        &:first-child {
+          margin-right: 64px;
+        }
+
+        &.active {
+          font-weight: 600;
+          font-size: 32px;
+
+          &::after {
+            position: absolute;
+            bottom: 12px;
+            left: 50%;
+            width: 40px;
+            height: 6px;
+            border-radius: 3px;
+            background: #2d7dffff;
+            transform: translateX(-50%);
+            content: ' ';
+          }
+        }
+      }
+    }
+
+    .right {
+      position: relative;
+
+      i {
+        position: absolute;
+        top: -6px;
+        right: 0;
+        z-index: 11;
+        height: 24px;
+        line-height: 24px;
+        padding: 0 10px;
+        font-size: 16px;
+        color: #fff;
+        border-radius: 50%;
+        border: 2px solid #ffffff;
+        background: #ff5e5e;
+        box-sizing: border-box;
+        transform: translateX(50%);
+      }
+
+      span {
+        display: block;
+        width: 120px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        color: #df6b6c;
+        font-size: 24px;
+        border-radius: 10px;
+        border: 1px solid #df6b6c;
+      }
+    }
+  }
+}
 </style>