婚丧嫁娶

src/apps/AppMarryAndDie/AllActiveList.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="AllActiveList">
+    <div class="top">
+      <AiCard>
+        <template #custom>
+          <div class="left">
+            <span class="nums"> 2 </span>
+            <span class="hint">全部活动</span>
+          </div>
+
+          <div class="right">
+            <span class="nums">4</span>
+            <span class="hint">本月新增</span>
+          </div>
+        </template>
+      </AiCard>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i">
+        <template #custom>
+          <div class="names">
+            <span>事主姓名</span>
+            <span class="right">{{ item.name }}</span>
+          </div>
+
+          <div class="phones">
+            <span>联系方式</span>
+            <span class="right">{{ item.phone }}</span>
+          </div>
+
+          <div class="times">
+            <span>上报时间</span>
+            <span class="right" v-if="item.createTime">{{ item.createTime.substring(0, item.createTime.length - 3) }}</span>
+          </div>
+
+          <div class="areaNames">
+            <span>上报地点</span>
+            <span class="right">{{ item.address }}</span>
+          </div>
+
+          <span class="types" :style="{ background: item.type == 0 ? '#FF65B8' : item.type == 1 ? '#FF883C' : '#1AAAFF' }">
+            {{ $dict.getLabel('marriageType', item.type) }}
+          </span>
+        </template>
+
+        <template #menu>
+          <div class="menu" @tap.stop="toDetele(item)">删除</div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty description="暂无数据" v-else></AiEmpty>
+
+    <u-modal v-model="deletShow" content="您确认要删除该条信息吗？" :show-cancel-button="true" :mask-close-able="true" :show-title="false" @confirm="delet"></u-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AllActiveList',
+  components: {},
+  props: {},
+  data() {
+    return {
+      data: [],
+      datas: [],
+      current: 1,
+      deletShow: false,
+      deletId: '',
+      current: 1,
+    }
+  },
+  computed: {},
+  watch: {},
+  onLoad() {
+    this.$dict.load('marriageType', 'modeType').then(() => {
+      this.getCount()
+      this.getList()
+    })
+  },
+  onShow() {},
+  methods: {
+    getCount() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http.post('/app/appmarriagefuneralinfo/queryDataStatistics').then((res) => {
+        if (res.code == 0) {
+          this.data = res.data
+          this.data.map((e, i) => {
+            console.log(e.v1, i)
+          })
+
+          uni.hideLoading()
+        }
+      })
+    },
+
+    getList() {
+      uni.showLoading({
+        title: '加载数据中',
+      })
+      this.$http
+        .post('/app/appmarriagefuneralinfo/list', null, {
+          params: {
+            size: 6,
+            current: this.current,
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            uni.hideLoading()
+          }
+        })
+    },
+
+    toDetele(item) {
+      this.deletShow = true
+      this.deletId = item.id
+    },
+
+    delet() {
+      this.$http.post(`/app/appmarriagefuneralinfo/queryDetailById?ids=${this.deletId}`).then((res) => {
+        if (res.code == 0) {
+          this.$u.toast('删除成功！')
+          this.getList()
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.AllActiveList {
+  height: 100%;
+  .top {
+    .AiCard {
+      background: #f3f6f9;
+      ::v-deep .start {
+        background: #fff;
+        .fill {
+          display: flex;
+          align-items: center;
+          padding: 38px 0;
+          .left,
+          .right {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .nums {
+              font-size: 64px;
+              font-weight: bold;
+              color: #3192f4;
+            }
+            .hint {
+              font-size: 28px;
+              font-weight: 500;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    .start {
+      display: flex;
+      align-items: center;
+      background: #fff;
+      padding: 32px 32px 36px 32px;
+      border-radius: 16px;
+      .names,
+      .phones,
+      .times,
+      .areaNames {
+        display: flex;
+        .right {
+          width: 76%;
+          margin-left: 32px;
+          font-size: 26px;
+          color: #333333;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .types {
+        display: inline-block;
+        margin-top: 32px;
+        border-radius: 8px;
+        padding: 4px 8px;
+        color: #fff;
+      }
+    }
+    .mask {
+      .moreMenu {
+        transform: translate(-175px, 20px);
+        .menu {
+          text-align: center;
+          line-height: 80px;
+          width: 192px;
+          height: 80px;
+          font-size: 28px;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+</style>