居民活动

src/apps/AppResidentActivitie/AppResidentActivities.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="AppActive">
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+    <div class="dataTop">
+      <div class="dataLeft">活动列表</div>
+
+      <div class="dataRight">
+        <span>共</span>
+        <span class="specialColor">12</span>
+        <span>个活动</span>
+      </div>
+    </div>
+
+    <template v-if="datas.length < 1">
+      <AiCard v-for="(item, i) in 6" :key="i" @click.native="toDetail(item, 1)">
+        <template #custom>
+          <div class="left">
+            <div class="titles">【敬老爱幼】带你在洞庭湖兜兜风 寻觅江豚的身影</div>
+
+            <div class="nums">
+              <span class="specialColor">6人</span>
+              <span>已报名</span>
+            </div>
+
+            <div class="times">
+              <span class="timesCont">2021-12-16</span>
+
+              <span>| 2天</span>
+            </div>
+
+            <div class="areaNmae">湖南省岳阳市岳阳县荣家湾镇六…湖南省岳阳市岳阳县荣家湾镇六…</div>
+          </div>
+
+          <img src="./yan.jpg" alt="" />
+        </template>
+      </AiCard>
+    </template>
+
+    <AiFixedBtn>
+      <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()" />
+    </AiFixedBtn>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppResidentActivities',
+  appName: '居民活动',
+  components: {},
+  props: {},
+  data() {
+    return {
+      datas: [],
+      tabList: [
+        {
+          name: '全部活动',
+        },
+        {
+          name: '我发布的',
+        },
+      ],
+      currentTabs: 0,
+      current: 1,
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad() {
+    this.getList()
+  },
+  mounted() {},
+  methods: {
+    getList() {},
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
+
+    toAdd() {
+      uni.navigateTo({ url: `./Add` })
+    },
+
+    toDetail(item) {
+      uni.navigateTo({ url: `./Detail` })
+      // uni.navigateTo({ url: `./Detail?id=${item.id}` })
+    },
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.AppActive {
+  height: 100%;
+  background: #f3f6f9;
+
+  .dataTop {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 48px;
+    margin-bottom: 8px;
+    padding: 0 32px;
+    .dataLeft {
+      font-size: 38px;
+      font-weight: 600;
+    }
+    .dataRight {
+      font-size: 28px;
+      color: #666666;
+      .specialColor {
+        color: #4181ff;
+      }
+    }
+  }
+
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      background: #fff;
+      padding: 32px;
+      border-radius: 16px;
+      .fill {
+        display: flex;
+        justify-content: space-between;
+        // align-items: center;
+        .left {
+          width: calc(100% - 205px);
+          // background: pink;
+          .titles {
+            margin-bottom: 8px;
+            color: #333333;
+            font-weight: 500;
+            font-size: 30px;
+            line-height: 1.3;
+            word-break: break-all;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+          }
+          .nums {
+            .specialColor {
+              color: #4181ff;
+            }
+          }
+          .times {
+            .timesCont {
+              margin-right: 10px;
+            }
+          }
+          .areaNmae {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+        img {
+          width: 182px;
+          height: 182px;
+        }
+      }
+    }
+  }
+
+  .AiFixedBtn {
+    .movableArea {
+      .addBtn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 96px;
+        height: 96px;
+        flex-shrink: 0;
+        background: $uni-color-primary;
+        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        font-size: 48px;
+        background: #fff;
+        color: #1365dd;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>