迁移新应用

src/mods/AppVillageActivity/AppVillageActivity.vue

@@ -0,0 +1,223 @@
+<template>
+  <div class="activity" v-if="pageShow">
+    <div class="activity-title">
+      <h2>活动列表</h2>
+      <div class="right">
+        <span>共</span>
+        <i>{{ total }}</i>
+        <span>个活动</span>
+      </div>
+    </div>
+    <div class="activity-list">
+      <div class="item" hover-class="bg-hover" @click="$linkTo(`/village/villageActivity/ActivityDetail?id=${item.id}`)"
+           v-for="(item, index) in list" :key="index">
+        <div class="left">
+          <h2>{{ item.title }}</h2>
+          <div class="left-info">
+            <span>由</span>
+            <i>{{ item.createUserName }}</i>
+            <span>发起</span>
+          </div>
+          <div class="date">{{ item.beginTime }} 至 {{ item.endTime }}</div>
+          <div class="address">{{ item.areaName }}{{ item.address }}</div>
+        </div>
+        <div class="right">
+          <span :class="'status' + item.status">{{ item.statusName }}</span>
+          <image :src="item.url" mode="aspectFill"/>
+        </div>
+      </div>
+      <AiEmpty v-if="!list.length"></AiEmpty>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppVillageActivity",
+  appName: "居民活动",
+  data() {
+    return {
+      list: [],
+      pageShow: false,
+      current: 1,
+      total: 0,
+      isMore: false
+    }
+  },
+
+  onLoad() {
+    this.$loading()
+    this.$dict.load(['villageActivityStatus']).then(() => {
+      this.getList()
+    })
+  },
+
+  methods: {
+    getList() {
+      if (this.isMore) return
+
+      this.$instance.post(`/app/appvillageactivityinfo/listUp`, null, {
+        params: {
+          current: this.current,
+          size: 15,
+          areaId: uni.getStorageSync('areaId')
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          this.total = res.data.total
+          if (this.current > 1) {
+            this.list = [...this.list, ...res.data.records].map(v => {
+              return {
+                ...v,
+                statusName: this.$dict.getLabel('villageActivityStatus', v.status),
+                url: v.url ? JSON.parse(v.url)[0].url : ''
+              }
+            })
+          } else {
+            this.list = res.data.records.map(v => {
+              return {
+                ...v,
+                statusName: this.$dict.getLabel('villageActivityStatus', v.status),
+                url: v.url ? JSON.parse(v.url)[0].url : ''
+              }
+            })
+          }
+          uni.hideLoading()
+          this.pageShow = true
+          if (res.data.records.length < 15) {
+            this.isMore = true
+
+            return false
+          }
+
+          this.current = this.current + 1
+        } else {
+          uni.hideLoading()
+        }
+      }).catch(() => {
+        uni.hideLoading()
+      })
+    }
+  },
+
+  onReachBottom() {
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" socped>
+.activity {
+  padding-bottom: 40px;
+
+  .activity-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 32px;
+    padding: 48px 32px 0 32px;
+
+    & > h2 {
+      font-size: 38px;
+      color: #333;
+      font-weight: 600;
+    }
+
+    .right {
+      display: flex;
+      align-items: center;
+
+      span {
+        color: #666666;
+        font-size: 28px;
+      }
+
+      i {
+        color: #4181FF;
+        font-style: normal;
+        font-size: 28px;
+      }
+    }
+  }
+
+  .item {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 32px 24px;
+    padding: 32px;
+    border-radius: 16px;
+    background: #fff;
+
+    .left {
+      flex: 1;
+      color: #666666;
+      font-size: 26px;
+
+      h2 {
+        margin-bottom: 16px;
+        color: #333;
+        font-size: 32px;
+        font-weight: 600;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+
+      .date {
+        margin: 8px 0;
+      }
+
+      .left-info {
+        display: flex;
+        align-items: center;
+
+        i {
+          color: #4181FF;
+          font-style: normal;
+          font-size: 26px;
+        }
+      }
+    }
+
+    .right {
+      position: relative;
+      width: 200px;
+      height: 200px;
+      border-radius: 10px;
+      overflow: hidden;
+
+      image {
+        width: 200px;
+        height: 200px;
+        border-radius: 10px;
+      }
+
+      span {
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 1;
+        width: 96px;
+        height: 44px;
+        line-height: 44px;
+        font-size: 26px;
+        text-align: center;
+        color: #fff;
+      }
+
+      .status0 {
+        background: #42D784;
+      }
+
+      .status1 {
+        background: #1AAAFF;
+      }
+
+      .status2 {
+        background: #E4E4E4;
+      }
+    }
+  }
+}
+</style>