bug

src/project/fengdu/AppCircle/AppCircle.vue

@@ -12,9 +12,9 @@
     </div>
     <div class="nav" v-if="topic.length">
       <div
-          class="nav-item"
+        class="nav-item"
-          hover-class="text-hover"
+        hover-class="text-hover"
-          v-for="(item, index) in topic" :key="index" @click="$linkTo('./TopicDetail?themeId=' + item.id + '&name=' + item.title)">
+        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>
@@ -25,11 +25,11 @@
     </div>
     <div class="AppCircle-list">
       <div class="item"
-           v-for="(item, index) in list"
+        v-for="(item, index) in list"
-           :key="index"
+        :key="index"
-           hover-class="text-hover"
+        hover-class="text-hover"
-           hover-stop-propagation
+        hover-stop-propagation
-           @click="$linkTo('./Detail?id=' + item.id + '&name=' + item.topicName + '&themeId=' + item.themeId)">
+        @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'"/>
           <div class="right">
@@ -40,10 +40,10 @@
         <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>
-          <text class="row2">{{ item.content }}</text>
+          <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.slice(0,3)" :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">
@@ -71,439 +71,445 @@
   </div>
 </template>
 <script>
-import {mapActions, mapState} from 'vuex'
+  import {mapActions, mapState} from 'vuex'
 
-export default {
+  export default {
-  name: 'AppCircle',
+    name: 'AppCircle',
-  appName: '邻里互助',
+    appName: '邻里互助',
-  navigationBarBackgroundColor: '#ffffff',
+    navigationBarBackgroundColor: '#ffffff',
-  navigationBarTextStyle: 'black',
+    navigationBarTextStyle: 'black',
 
-  data() {
+    data() {
-    return {
+      return {
-      currIndex: 0,
+        currIndex: 0,
-      topicList: [],
+        topicList: [],
-      list: [],
+        list: [],
-      isMore: false,
+        isMore: false,
-      current: 1,
+        current: 1,
-      total: 0
+        total: 0
-    }
+      }
-  },
+    },
 
-  computed: {
+    computed: {
-    ...mapState(['user', 'token']),
+      ...mapState(['user', 'token']),
 
-    topic() {
+      topic() {
-      return this.topicList.filter((v, index) => index < 7)
+        return this.topicList.filter((v, index) => index < 7)
-    }
+      }
-  },
+    },
 
-  onLoad() {
+    onLoad() {
-    this.getTopicList()
+      uni.setNavigationBarTitle({
+        title: '邻里互助'
+      });
 
-    uni.$on('updateList', () => {
+      this.getTopicList()
-      this.getMyPublishCount()
-      this.changeTab(this.currIndex)
-    })
 
-    if (!this.token) {
+      uni.$on('updateList', () => {
-      this.autoLogin().then(() => {
         this.getMyPublishCount()
+        this.changeTab(this.currIndex)
       })
-    } else {
-      this.getMyPublishCount()
-    }
-  },
 
-  onUnload() {
+      if (!this.token) {
-    uni.$off('updateList')
+        this.autoLogin({ loginWay: 'qujing' }).then(() => {
-  },
+          this.getMyPublishCount()
-
+        })
-  methods: {
+      } else {
-    ...mapActions(['autoLogin']),
+        this.getMyPublishCount()
-
+      }
-    previewImage(url, files) {
-      uni.previewImage({
-        current: url,
-        urls: files.map(v => v.url)
-      })
     },
 
-    onBtnClick(e) {
+    onUnload() {
+      uni.$off('updateList')
     },
 
-    reciate(id, appreciateStatus) {
+    methods: {
-      this.$instance.post(`/app/appneighborhoodassistance/appreciate?id=${id}`).then(res => {
+      ...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,
+          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,
+                  files: e.files.filter((v, index) => index < 3),
+                  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,
+                  files: e.files.filter((v, index) => index < 3),
+                  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.$toast(appreciateStatus ? '取消点赞' : '点赞成功')
-
           this.changeTab(this.currIndex)
         }
       })
-    },
 
-    getMyPublishCount() {
+      return {
-      this.$instance.post(`/app/appneighborhoodassistance/list`, null, {
+        title: e.target.dataset.content.substr(0, 20),
-        params: {
+        path: `/pages/AppCircle/Detail?id=${e.target.dataset.id}&themeId=${e.target.dataset.themeid}&name=${e.target.dataset.name}`
-          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 {
+  .AppCircle {
-  padding-top: 120px;
+    padding-top: 120px;
-  padding-bottom: 40px;
+    padding-bottom: 40px;
 
-  div {
+    div {
-    box-sizing: border-box;
+      box-sizing: border-box;
-  }
-
-  .add {
-    position: fixed;
-    right: 32px;
-    bottom: 32px;
-    z-index: 111;
-
-    image {
-      width: 104px;
-      height: 104px;
     }
-  }
 
-  .nav {
+    .add {
-    display: flex;
+      position: fixed;
-    align-items: center;
+      right: 32px;
-    flex-wrap: wrap;
+      bottom: 32px;
-    margin: 0 32px 24px;
+      z-index: 111;
-    padding-top: 30px;
-    background: #ffffff;
-    border-radius: 16px;
-    box-shadow: inset 0 -1px 0 0 #eeeeee;
-
-    .nav-item {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      width: 25%;
-      padding-bottom: 32px;
 
       image {
-        width: 108px;
+        width: 104px;
-        height: 108px;
+        height: 104px;
-      }
-
-      h2 {
-        line-height: 32px;
-        margin-top: 8px;
-        font-size: 26px;
-        font-weight: 400;
       }
     }
-  }
 
-  .AppCircle-list {
+    .nav {
-    .item {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
       margin: 0 32px 24px;
-      padding: 24px 24px 0;
+      padding-top: 30px;
       background: #ffffff;
       border-radius: 16px;
       box-shadow: inset 0 -1px 0 0 #eeeeee;
 
-      .item-top {
+      .nav-item {
         display: flex;
         align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        width: 25%;
+        padding-bottom: 32px;
 
         image {
-          width: 96px;
+          width: 108px;
-          height: 96px;
+          height: 108px;
-          margin-right: 16px;
-          border-radius: 50%;
         }
 
-        h3 {
+        h2 {
-          color: #333333;
+          line-height: 32px;
-          text-align: left;
+          margin-top: 8px;
-          font-size: 34px;
+          font-size: 26px;
-          font-weight: 500;
+          font-weight: 400;
-        }
-
-        span {
-          margin-top: 12px;
-          color: #999999;
-          font-size: 28px;
         }
       }
+    }
 
-      .item-imgs {
+    .AppCircle-list {
-        display: flex;
+      .item {
-        align-items: center;
+        margin: 0 32px 24px;
-        flex-wrap: wrap;
+        padding: 24px 24px 0;
+        background: #ffffff;
+        border-radius: 16px;
+        box-shadow: inset 0 -1px 0 0 #eeeeee;
 
-        image {
+        .item-top {
-          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;
-        color: #333333;
-      }
-
-      .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;
+            width: 96px;
-            height: 40px;
+            height: 96px;
-            margin: 16px;
+            margin-right: 16px;
+            border-radius: 50%;
           }
 
-          i {
+          h3 {
-            color: #687DA6;
+            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;
 
-      .item-content {
+          image {
-        margin: 16px 0;
+            height: 208px;
-        line-height: 1.3;
+            width: 33.33%;
-        text-align: justify;
+            padding-right: 12px;
-        word-break: break-all;
+            margin-bottom: 12px;
-        text-overflow: ellipsis;
+            box-sizing: border-box;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
 
-        span {
+            &:nth-of-type(3n) {
-          font-size: 28px;
+              padding-right: 0;
-          color: #4181FF;
+            }
+          }
         }
 
-        text {
+        & > p {
+          margin: 12px 0;
           font-size: 28px;
           color: #333333;
         }
-      }
-    }
-  }
 
-  .top {
+        .item-bottom {
-    display: flex;
+          display: flex;
-    position: fixed;
+          align-items: center;
-    align-items: center;
+          height: 88px;
-    justify-content: space-between;
+          border-top: 1px solid #eeeeee;
-    top: 0;
-    left: 0;
-    z-index: 11;
-    width: 100%;
-    height: 100px;
-    padding: 0 32px;
-    background: #ffffff;
 
-    .left {
+          div, button {
-      display: flex;
+            display: flex;
-      align-items: center;
+            align-items: center;
-      height: 100px;
+            justify-content: center;
+            flex: 1;
 
-      span {
+            image {
-        position: relative;
+              width: 40px;
-        height: 100px;
+              height: 40px;
-        line-height: 100px;
+              margin: 16px;
-        color: #222;
+            }
-        font-size: 30px;
 
-        &:first-child {
+            i {
-          margin-right: 64px;
+              color: #687DA6;
+              font-size: 28px;
+            }
+          }
         }
 
-        &.active {
-          font-weight: 600;
-          font-size: 32px;
 
-          &::after {
+        .item-content {
-            position: absolute;
+          margin: 16px 0;
-            bottom: 12px;
+          line-height: 1.3;
-            left: 50%;
+          text-align: justify;
-            width: 40px;
+          word-break: break-all;
-            height: 6px;
+          text-overflow: ellipsis;
-            border-radius: 3px;
+          overflow: hidden;
-            background: #2d7dffff;
+          display: -webkit-box;
-            transform: translateX(-50%);
+          -webkit-box-orient: vertical;
-            content: ' ';
+          -webkit-line-clamp: 2;
+
+          span {
+            font-size: 28px;
+            color: #4181FF;
+          }
+
+          text {
+            font-size: 28px;
+            color: #333333;
           }
         }
       }
     }
 
-    .right {
+    .top {
-      position: relative;
+      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;
 
-      i {
+      .left {
-        position: absolute;
+        display: flex;
-        top: -6px;
+        align-items: center;
-        right: 0;
+        height: 100px;
-        z-index: 11;
+
-        height: 24px;
+        span {
-        line-height: 24px;
+          position: relative;
-        padding: 0 10px;
+          height: 100px;
-        font-size: 16px;
+          line-height: 100px;
-        color: #fff;
+          color: #222;
-        border-radius: 50%;
+          font-size: 30px;
-        border: 2px solid #ffffff;
+
-        background: #ff5e5e;
+          &:first-child {
-        box-sizing: border-box;
+            margin-right: 64px;
-        transform: translateX(50%);
+          }
+
+          &.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: ' ';
+            }
+          }
+        }
       }
 
-      span {
+      .right {
-        display: block;
+        position: relative;
-        width: 120px;
+
-        height: 60px;
+        i {
-        line-height: 60px;
+          position: absolute;
-        text-align: center;
+          top: -6px;
-        color: #df6b6c;
+          right: 0;
-        font-size: 24px;
+          z-index: 11;
-        border-radius: 10px;
+          height: 24px;
-        border: 1px solid #df6b6c;
+          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;
+        }
       }
     }
-  }
 
-  .row2 {
+    .row2 {
-    overflow: hidden;
+      overflow: hidden;
-    text-overflow: ellipsis;
+      text-overflow: ellipsis;
-    display: -webkit-box;
+      display: -webkit-box;
-    -webkit-line-clamp: 2;
+      -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+      -webkit-box-orient: vertical;
+    }
   }
-}
 </style>

src/project/fengdu/AppCircle/Detail.vue

@@ -168,7 +168,7 @@ div<template>
       },
 
       showComment () {
-        if (!this.user.AreaId) {
+        if (!this.user.areaId) {
           this.$dialog.confirm({
             content: '您只有完成信息认证后，才可进行相关操作。',
             confirmText: '去认证'

src/project/fengdu/AppCircle/MyPostList.vue

@@ -41,10 +41,10 @@
           </div>
           <div class="item-content">
             <span v-if="item.themeId" @click.stop="$linkTo('./TopicDetail?themeId=' + item.themeId + '&name=' + item.topicName)">#【{{ item.topicName }}】</span>
-            <text class="row2">{{ item.content }}</text>
+            <text>{{ item.content }}</text>
           </div>
           <div class="item-imgs" v-if="item.files.length">
-            <image mode="aspectFill" hover-stop-propagation @click.stop="previewImage(e.url, item.files)" v-for="(e, i) in item.files.slice(0,3)" :key="i" :src="e.url"/>
+            <image mode="aspectFill" hover-stop-propagation @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">
@@ -275,6 +275,7 @@ export default {
             this.list = [...this.list, ...res.data.records.map(e => {
               return {
                 ...e,
+                files: e.files.filter((v, index) => index < 3),
                 topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
               }
             })]
@@ -282,6 +283,7 @@ export default {
             this.list = res.data.records.map(e => {
               return {
                 ...e,
+                files: e.files.filter((v, index) => index < 3),
                 topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
               }
             })
@@ -317,6 +319,7 @@ export default {
             this.list = [...this.list, ...res.data.records.map(e => {
               return {
                 ...e,
+                files: e.files.filter((v, index) => index < 3),
                 topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
               }
             })]
@@ -324,6 +327,7 @@ export default {
             this.list = res.data.records.map(e => {
               return {
                 ...e,
+                files: e.files.filter((v, index) => index < 3),
                 topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
               }
             })
@@ -361,6 +365,7 @@ export default {
             this.list = [...this.list, ...res.data.records.map(e => {
               return {
                 ...e,
+                files: e.files.filter((v, index) => index < 3),
                 topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
               }
             })]
@@ -368,6 +373,7 @@ export default {
             this.list = res.data.records.map(e => {
               return {
                 ...e,
+                files: e.files.filter((v, index) => index < 3),
                 topicName: this.topicList.filter(v => v.id === e.themeId).length ? this.topicList.filter(v => v.id === e.themeId)[0].title : ''
               }
             })