活动详情

src/view/clockEarly/userAcDetail.vue

@@ -3,9 +3,9 @@
     <Card dis-hover :padding="30">
       <p slot="title">基础信息</p>
       <Row>
-        <Col span="8">活动日期：{{row.activity_date | format}}</Col>
-        <Col span="8">可获得真我币：{{row.expense_amount}}</Col>
-        <Col span="8">签到人数：{{row.sign_in_num}}</Col>
+        <Col span="8">活动日期：{{ row.activity_date | format }}</Col>
+        <Col span="8">可获得真我币：{{ row.expense_amount }}</Col>
+        <Col span="8">签到人数：{{ row.sign_in_num }}</Col>
       </Row>
     </Card>
 
@@ -15,8 +15,13 @@
         <div class="topSearch">
           <div class="left">
             用户搜索：
-            <Input style="width:200px" enter-button placeholder="请输入" />
-            <Button type="primary" >查 询</Button>
+            <Input
+              v-model="name"
+              style="width:200px"
+              enter-button
+              placeholder="请输入"
+            />
+            <Button type="primary">查 询</Button>
           </div>
         </div>
         <Table
@@ -26,10 +31,24 @@
           :columns="columns"
           :data="data"
         >
+          <template slot-scope="{ row }" slot="default_avatar">
+            <Avatar :src="row.default_avatar" />
+          </template>
+          <template slot-scope="{ row }" slot="apply_time">
+            {{ row.apply_time | format }}
+          </template>
+          <template slot-scope="{ row }" slot="clock_time">
+            {{ row.clock_time | format }}
+          </template>
           <template slot-scope="{ row }" slot="action">
             <a @click="edit(row)">编辑</a>
           </template>
         </Table>
+        <Pager
+          class="margin-top-10"
+          :config="config"
+          @on-change="handlePager"
+        ></Pager>
       </Card>
     </div>
     <div class="btn">
@@ -40,9 +59,13 @@
 
 <script>
 import { formatDate } from "@/libs/util";
+import { activityClockRecords } from "@/api/clock/activityClocks";
+import Pager from "@/view/common/Pager.vue";
 export default {
   name: "categories",
-  components: {},
+  components: {
+    Pager
+  },
   filters: {
     format(value) {
       return formatDate(value);
@@ -50,43 +73,67 @@ export default {
   },
   data() {
     return {
+      config: { total: 0, size: 10, current: 1 },
+      name: "",
       tab: "1",
+      pageIndex: 1,
+      pageSize: 10,
       row: this.$route.query.row,
       data: [],
       columns: [
         {
           title: "用户ID",
-          key: "created_at"
+          key: "uuid"
         },
         {
           title: "头像",
-          slot: "name"
+          slot: "default_avatar"
         },
         {
           title: "姓名",
-          slot: "title"
+          key: "nick_name"
         },
         {
           title: "手机号",
-          slot: "name"
+          key: "phone"
         },
         {
           title: "报名时间",
-          slot: "title"
+          slot: "apply_time"
         },
         {
-          title: "打开时间",
-          slot: "title"
+          title: "打卡时间",
+          slot: "clock_time"
         },
         {
           title: "获得真我币",
-          slot: "name"
+          key: "expense_amount"
         }
       ]
     };
   },
-  methods: {},
-  mounted() {}
+  methods: {
+    handlePager(pager) {
+      this.pageIndex = pager.current;
+      this.pageSize = pager.size;
+      this.search();
+    },
+    search() {
+      let params = {
+        name: this.name,
+        uuid: this.row.uuid,
+        pageIndex: this.pageIndex,
+        pageSize: this.pageSize
+      };
+      activityClockRecords(params).then(res => {
+        this.config.total = res.total;
+        this.data = res.data;
+      });
+    }
+  },
+  mounted() {
+    this.search();
+  }
 };
 </script>