From f042951e797e0e33c1f2797f30580a6a9db0f89a Mon Sep 17 00:00:00 2001
From: changjinpeng <185154740@qq.com>
Date: Mon, 7 Mar 2022 14:59:22 +0800
Subject: [PATCH] 28067

---
 .../AppVillageActivity/ActivityDetail.vue     | 562 +++++++++---------
 1 file changed, 283 insertions(+), 279 deletions(-)

diff --git a/src/mods/AppVillageActivity/ActivityDetail.vue b/src/mods/AppVillageActivity/ActivityDetail.vue
index 821ec25..e3b4939 100644
--- a/src/mods/AppVillageActivity/ActivityDetail.vue
+++ b/src/mods/AppVillageActivity/ActivityDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="detail" v-if="pageShow" :style="{paddingBottom: info.status === '0' ? '130px' : '40px'}">
+  <div class="detail" v-if="pageShow" :style="{ paddingBottom: info.status === '0' ? '130px' : '40px' }">
     <div class="detail-wrapper">
       <image class="banner" mode="aspectFill" :src="info.url" />
       <h2>{{ info.title }}</h2>
@@ -44,16 +44,7 @@
         </div>
       </div>
       <div class="detail-tips">
-        <u-tabs
-          :list="tabs"
-          font-size="32"
-          bg-color="transparent"
-          inactive-color="#999999"
-          :active-item-style="tabActive"
-          :is-scroll="true"
-          :current="currIndex"
-          @change="i => currIndex = i">
-        </u-tabs>
+        <u-tabs :list="tabs" font-size="32" bg-color="transparent" inactive-color="#999999" :active-item-style="tabActive" :is-scroll="true" :current="currIndex" @change="(i) => (currIndex = i)"> </u-tabs>
         <div class="tab-content">
           <div class="rich-content" v-show="currIndex === 0">
             <u-parse :html="info.content"></u-parse>
@@ -66,7 +57,7 @@
               </div>
               <p>{{ item.content }}</p>
               <div class="images" v-if="item.images.length">
-                <image v-for="(img, i) in item.images" @click="preview(img.url, item.images)" :key="i" class="banner" :src="img.url" />
+                <image v-for="(img, i) in item.images" @click="preview(img.url, item.images)" :key="i" class="banner" :src="img.url" v-if="i < 3" />
               </div>
             </div>
             <AiEmpty v-if="!list.length"></AiEmpty>
@@ -80,75 +71,80 @@
     <div class="btn-wrapper" v-if="info.status === '0'">
       <div class="btn" :class="[info.hasReport === '1' ? 'disabled' : '']" @click="signUp" hover-class="text-hover">{{ info.hasReport === '1' ? '已报名' : '立即报名' }}</div>
     </div>
-    <AiLogin ref="login"/>
+    <AiLogin ref="login" />
   </div>
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+import { mapState } from 'vuex'
 
-  export default {
-    appName:"活动详情",
-    data () {
-      return {
-        currIndex: 0,
-        tabActive: {
-          color: '#333333',
-          fontSize: '16px'
-        },
-        pageShow: false,
-        id: '',
-        current: 1,
-        list: [],
-        isMore: false,
-        info: ''
-      }
-    },
-
-    computed: {
-      tabs () {
-        return [{
-          name: '活动须知'
-        }, {
-          name: '活动动态'
-        }]
+export default {
+  appName: '活动详情',
+  data() {
+    return {
+      currIndex: 0,
+      tabActive: {
+        color: '#333333',
+        fontSize: '16px',
       },
-      ...mapState(['user', 'token']),
+      pageShow: false,
+      id: '',
+      current: 1,
+      list: [],
+      isMore: false,
+      info: '',
+    }
+  },
 
-      isShowAdd () {
-        const time = (new Date().getTime() - new Date(this.info.endTime).getTime()) / 60 / 60 / 1000
-        if (!this.info.endTime) {
-          return false
-        }
+  computed: {
+    tabs() {
+      return [
+        {
+          name: '活动须知',
+        },
+        {
+          name: '活动动态',
+        },
+      ]
+    },
+    ...mapState(['user', 'token']),
 
-        if (this.info.status === '0') {
-          return false
-        }
-
-        return !(this.info.status === '2' && time > 24);
+    isShowAdd() {
+      const time = (new Date().getTime() - new Date(this.info.endTime).getTime()) / 60 / 60 / 1000
+      if (!this.info.endTime) {
+        return false
       }
-    },
 
-    onLoad (query) {
-      this.$loading()
-      this.id = query.id
+      if (this.info.status === '0') {
+        return false
+      }
+
+      return !(this.info.status === '2' && time > 24)
+    },
+  },
+
+  onLoad(query) {
+    this.$loading()
+    this.id = query.id
+    this.getList(query.id)
+    this.$dict.load(['villageActivityStatus']).then(() => {
+      this.getInfo(query.id)
+    })
+    uni.$on('update', () => {
+      this.isMore = false
+      this.current = 1
       this.getList(query.id)
-      this.$dict.load(['villageActivityStatus']).then(() => {
-        this.getInfo(query.id)
-      })
-      uni.$on('update', () => {
-        this.isMore = false
-        this.current = 1
-        this.getList(query.id)
-      })
-    },
+    })
+  },
 
-    methods: {
-      getInfo (id) {
-        this.$instance.post(`/app/appvillageactivityinfo/queryDetailById?id=${id}`).then(res => {
+  methods: {
+    getInfo(id) {
+      this.$instance
+        .post(`/app/appvillageactivityinfo/queryDetailById?id=${id}`)
+        .then((res) => {
           if (res.code === 0) {
             this.info = res.data
-            this.info.url = res.data.url ? JSON.parse(res.data.url)[0].url: ''
+            this.info.url = res.data.url ? JSON.parse(res.data.url)[0].url : ''
 
             this.$nextTick(() => {
               this.pageShow = true
@@ -156,59 +152,62 @@
           }
 
           this.$hideLoading()
-        }).catch(() => {
+        })
+        .catch(() => {
           this.$hideLoading()
         })
-      },
+    },
 
-      toAdd (url) {
-        if (!this.token) {
-          this.$refs.login.show()
+    toAdd(url) {
+      if (!this.token) {
+        this.$refs.login.show()
 
-          return false
-        }
+        return false
+      }
 
-        if (!this.user.residentId) {
-          this.$linkTo('/mods/AppAuth/AppAuth')
+      if (!this.user.residentId) {
+        this.$linkTo('/mods/AppAuth/AppAuth')
 
-          return false
-        }
+        return false
+      }
 
-        if (this.info.hasReport === '0') {
-          return this.$toast('您还未报名，无法发布活动动态！')
-        }
+      if (this.info.hasReport === '0') {
+        return this.$toast('您还未报名，无法发布活动动态！')
+      }
 
-        this.$linkTo(url)
-      },
+      this.$linkTo(url)
+    },
 
-      signUp () {
-        if (this.info.status === '1') {
-          return this.$toast('报名已截止')
-        }
+    signUp() {
+      if (this.info.status === '1') {
+        return this.$toast('报名已截止')
+      }
 
-        if (this.info.status === '2') {
-          return this.$toast('活动已结束')
-        }
+      if (this.info.status === '2') {
+        return this.$toast('活动已结束')
+      }
 
-        if (!this.token) {
-          this.$refs.login.show()
+      if (!this.token) {
+        this.$refs.login.show()
 
-          return false
-        }
+        return false
+      }
 
-        if (!this.user.residentId) {
-          this.$linkTo('/mods/AppAuth/AppAuth')
+      if (!this.user.residentId) {
+        this.$linkTo('/mods/AppAuth/AppAuth')
 
-          return false
-        }
+        return false
+      }
 
-        this.$loading()
-        this.$instance.post('/app/appvillageactivityuser/report', {
+      this.$loading()
+      this.$instance
+        .post('/app/appvillageactivityuser/report', {
           activityId: this.id,
           userId: this.$store.state.user.id,
           name: this.$store.state.user.nickName,
-          phone: this.$store.state.user.phone
-        }).then(res => {
+          phone: this.$store.state.user.phone,
+        })
+        .then((res) => {
           if (res.code === 0) {
             this.$toast('报名成功')
             this.getInfo(this.id)
@@ -216,37 +215,39 @@
 
           this.$hideLoading()
         })
-      },
+    },
 
-      preview (url, imgs) {
-        uni.previewImage({
-          urls: imgs.map(v => v.url),
-          current: url
-        })
-      },
+    preview(url, imgs) {
+      uni.previewImage({
+        urls: imgs.map((v) => v.url),
+        current: url,
+      })
+    },
 
-      getList (id) {
-        if (this.isMore) return
+    getList(id) {
+      if (this.isMore) return
 
-        this.$instance.post(`/app/appvillageactivitypost/list?activityId=${id}`, null, {
+      this.$instance
+        .post(`/app/appvillageactivitypost/list?activityId=${id}`, null, {
           params: {
             current: this.current,
-            size: 10
-          }
-        }).then(res => {
+            size: 10,
+          },
+        })
+        .then((res) => {
           if (res.code == 0) {
             if (this.current > 1) {
-              this.list = [...this.list, ...res.data.records].map(v => {
+              this.list = [...this.list, ...res.data.records].map((v) => {
                 return {
                   ...v,
-                  images: v.images ? JSON.parse(v.images) : []
+                  images: v.images ? JSON.parse(v.images) : [],
                 }
               })
             } else {
-              this.list = res.data.records.map(v => {
+              this.list = res.data.records.map((v) => {
                 return {
                   ...v,
-                  images: v.images ? JSON.parse(v.images) : []
+                  images: v.images ? JSON.parse(v.images) : [],
                 }
               })
             }
@@ -260,211 +261,214 @@
             this.current = this.current + 1
           }
         })
-      },
-
-      call (phone) {
-        uni.makePhoneCall({
-          phoneNumber: phone
-        })
-      }
     },
 
-    onReachBottom() {
-      this.getList()
-    }
-  }
+    call(phone) {
+      uni.makePhoneCall({
+        phoneNumber: phone,
+      })
+    },
+  },
+
+  onReachBottom() {
+    this.getList()
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-  .detail {
-    min-height: 100vh;
-    padding: 0 0 250px 0;
-    background: #fff;
+.detail {
+  min-height: 100vh;
+  padding: 0 0 250px 0;
+  background: #fff;
 
-    .add {
-      position: fixed;
-      bottom: 140px;
-      right: 20px;
-      z-index: 111;
+  .add {
+    position: fixed;
+    bottom: 140px;
+    right: 20px;
+    z-index: 111;
+    width: 128px;
+    height: 128px;
+
+    image {
       width: 128px;
       height: 128px;
+    }
+  }
 
-      image {
-        width: 128px;
-        height: 128px;
-      }
+  ::v-deep .u-tab-item {
+    font-size: 32px !important;
+
+    &:first-child {
+      padding: 0 !important;
+    }
+  }
+
+  .detail-wrapper {
+    padding-bottom: 48px;
+    background: #fff;
+
+    & > image {
+      width: 100%;
+      height: 480px;
     }
 
-    ::v-deep .u-tab-item {
-      font-size: 32px!important;
-
-      &:first-child {
-        padding: 0!important;
-      }
+    & > h2 {
+      line-height: 1.4;
+      padding: 32px;
+      font-size: 40px;
+      font-weight: 600;
+      color: #333;
+      text-align: justify;
     }
 
-    .detail-wrapper {
-      padding-bottom: 48px;
-      background: #fff;
-
-      & > image {
-        width: 100%;
-        height: 480px;
-      }
-
-      & > h2 {
-        line-height: 1.4;
-        padding: 32px;
-        font-size: 40px;
-        font-weight: 600;
-        color: #333;
-        text-align: justify;
-      }
-
-      & > div {
-        padding: 0 32px;
-      }
+    & > div {
+      padding: 0 32px;
     }
+  }
 
-    .detail-info {
-      .detail-info__item {
+  .detail-info {
+    .detail-info__item {
+      display: flex;
+      justify-content: space-between;
+      padding: 34px 0;
+      border-bottom: 1px solid #dddddd;
+
+      label {
+        color: #999999;
+        font-size: 32px;
+      }
+
+      .right {
         display: flex;
-        justify-content: space-between;
-        padding: 34px 0;
-        border-bottom: 1px solid #DDDDDD;
+        align-items: center;
+        max-width: 480px;
+        text-align: right;
 
-        label {
-          color: #999999;
+        span {
+          color: #333333;
           font-size: 32px;
         }
 
-        .right {
-          display: flex;
-          align-items: center;
-          max-width: 480px;
-          text-align: right;
-
+        &.detail-info__item--phone {
           span {
-            color: #333333;
-            font-size: 32px;
-          }
-
-          &.detail-info__item--phone {
-            span {
-              color: #4181FF;
-            }
+            color: #4181ff;
           }
         }
       }
     }
+  }
 
-    .detail-status {
+  .detail-status {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 12px;
+
+    & > span {
+      width: 96px;
+      height: 44px;
+      line-height: 44px;
+      text-align: center;
+      color: #fff;
+      background: #42d784;
+      border-radius: 8px;
+      font-size: 26px;
+
+      &.status1 {
+        background: #1aaaff;
+      }
+
+      &.status2 {
+        background: #e4e4e4;
+      }
+    }
+
+    .detail-status__right {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      padding-bottom: 12px;
 
-      & > span {
-        width: 96px;
-        height: 44px;
-        line-height: 44px;
-        text-align: center;
-        color: #fff;
-        background: #42D784;
-        border-radius: 8px;
-        font-size: 26px;
-
-        &.status1 {
-          background: #1AAAFF;
-        }
-
-        &.status2 {
-          background: #E4E4E4;
-        }
+      span {
+        color: #999999;
+        font-size: 28px;
       }
 
-      .detail-status__right {
-        display: flex;
-        align-items: center;
-
-        span {
-          color: #999999;
-          font-size: 28px;
-        }
-
-        i {
-          font-style: normal;
-          color: #4181FF;
-          font-size: 28px;
-        }
+      i {
+        font-style: normal;
+        color: #4181ff;
+        font-size: 28px;
       }
     }
+  }
 
-    .tab-active {
+  .tab-active {
+    color: #333333;
+    font-size: 32px;
+  }
+
+  .detail-tips {
+    padding: 10px 32px 0 !important;
+
+    & > h2 {
+      height: 116px;
+      line-height: 116px;
       color: #333333;
       font-size: 32px;
     }
 
-    .detail-tips {
-      padding: 10px 32px 0!important;
+    p {
+      line-height: 1.4;
+      margin-top: 24px;
+      color: #333333;
+      font-size: 32px;
+      text-align: justify;
+    }
+  }
 
-      & > h2 {
-        height: 116px;
-        line-height: 116px;
-        color: #333333;
-        font-size: 32px;
+  .dynamic-list {
+    .dynamic-item {
+      padding: 24px 0;
+
+      .images {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 16px;
+
+        image {
+          width: 226px;
+          height: 226px;
+          margin: 0 4px 4px 0;
+          border-radius: 16px;
+        }
+        image:nth-child(3n + 0) {
+          margin: 0;
+        }
+      }
+
+      .dynamic-item__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        span {
+          color: #999999;
+          font-size: 26px;
+        }
+
+        h2 {
+          color: #333333;
+          font-size: 34px;
+          font-weight: 600;
+        }
       }
 
       p {
         line-height: 1.4;
-        margin-top: 24px;
-        color: #333333;
-        font-size: 32px;
         text-align: justify;
-      }
-    }
-
-    .dynamic-list {
-      .dynamic-item {
-        padding: 24px 0;
-
-        .images {
-          display: flex;
-          flex-wrap: wrap;
-          margin-top: 16px;
-
-          image {
-            width: 226px;
-            height: 226px;
-            margin: 0 4px 4px 0;
-            border-radius: 16px;
-          }
-        }
-
-        .dynamic-item__top {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-
-          span {
-            color: #999999;
-            font-size: 26px;
-          }
-
-          h2 {
-            color: #333333;
-            font-size: 34px;
-            font-weight: 600;
-          }
-        }
-
-        p {
-          line-height: 1.4;
-          text-align: justify;
-          color: #333333;
-          font-size: 28px;
-        }
+        color: #333333;
+        font-size: 28px;
       }
     }
   }
+}
 </style>