小程序产品库完成

src/mods/AppActivityList/userList.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="page">
+    <p class="title">报名记录（已有<span>{{ list.length }}</span>人报名）</p>
+    <div class="user-list">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="left">
+          <img :src="item.avatar" alt="">
+          <span>{{ nameInit(item.partyName) }}</span>
+        </div>
+        <div class="time">{{ item.signupTime }}</div>
+      </div>
+      <AiEmpty v-if="!list.length" class="pad-t168"/>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: "userList",
+  data() {
+    return {
+      id: '',
+      list: []
+    }
+  },
+  onLoad(option) {
+    this.id = option.id
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.$instance.post(`/app/apppartyreport/signup-info?id=${this.id}`).then(res => {
+        if (res.code == 0) {
+          this.list = res.data
+          if (this.list.length) {
+            this.list.map((item) => {
+              if (!item.partyName && item.residentName) {
+                item.partyName = item.residentName
+              }
+            })
+          }
+        }
+      })
+    },
+    nameInit(name) {
+      if (!name) {
+        return '-'
+      }
+
+      var newStr;
+      if (name.length === 2) {
+        newStr = '*' + name.substr(1, 2)
+      } else if (name.length > 2) {
+        var char = '';
+        for (var i = 0, len = name.length - 2; i < len; i++) {
+          char += '*';
+        }
+        newStr = char + name.substr(name.length - 2, name.length);
+      } else {
+        newStr = name;
+      }
+      return newStr;
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "../../common/common.scss";
+
+.page {
+  width: 100%;
+  background-color: #F3F6F9;
+  padding-top: 16px;
+
+  .title {
+    line-height: 96px;
+    background-color: #fff;
+    padding-left: 32px;
+    color: #333;
+    font-size: 32px;
+    margin-bottom: 4px span {
+      color: #D73D3D;
+    }
+  }
+
+  .user-list {
+    .item {
+      width: 100%;
+      height: 148px;
+      background: #FFFFFF;
+      display: flex;
+      justify-content: space-between;
+      font-size: 30px;
+      padding: 32px;
+      box-sizing: border-box;
+      box-shadow: 0 8px 34px -8px rgba(213, 213, 213, 0.5);
+
+      .left {
+        color: #2D2D2E;
+        line-height: 46px;
+        vertical-align: middle;
+
+        img {
+          width: 80px;
+          height: 80px;
+          border-radius: 50%;
+          vertical-align: middle;
+          margin-right: 16px;
+        }
+      }
+
+      .time {
+        color: #999;
+        line-height: 80px;
+      }
+    }
+  }
+}
+</style>