horzi_rai_wxa/pages-message/activityTemplate/activityTemplate.vue

<template>
  <view class="container container-activity-template">
    <text class="title">{{ activityName }}</text>
    <block v-if="dataList.length > 0">
      <view class="lable-title lable-box">
        <text v-for="item in lableList" :key="item">{{ item }}</text>
      </view>
      <view v-for="item in dataList" :key="item.id" class="lable-box lable-content">
        <text>{{ item.RealName }}</text>
        <text>{{ item.CompanyName }}</text>
        <text>{{ item.IsMeeting == 1 ? "是" : "否" }}</text>
        <text>{{ item.SigninTime }}</text>
      </view>
      <view class="ButtonText" @click="viewDetailsHandler"> 查看活动详情 </view>
    </block>
    <view class="nodata" v-else>
      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
      <text>无名下客户报名本场活动</text>
    </view>
  </view>
</template>

<script>
import { MsgTemplate } from "@/config/api.js";
export default {
  data() {
    return {
      lableList: ["姓名", "公司名", "是否到会", "签到时间"],
      dataList: [],
      activityId: 0,
      detailId: 0,
      activityName: "",
    };
  },
  methods: {
    async getDetail() {
      const res = await MsgTemplate.activity_signinDetail({
        ActivityId: this.detailId,
      });
      if (res.Ret === 200) {
        this.dataList = res.Data.List || [];
        this.activityId = res.Data.ActivityId;
        this.activityName = res.Data.ActivityName;
      }
    },
    viewDetailsHandler() {
      uni.navigateTo({ url: "/activityPages/activityDetail/activityDetail?id=" + this.activityId });
    },
  },
  onLoad(optios) {
    this.detailId = Number(optios.id) || 0;
    this.detailId && this.getDetail();
  },
};
</script>

<style scoped lang="scss">
.container-activity-template {
  padding: 30rpx;
  .title {
    font-weight: 500;
    font-size: 42rpx;
    line-height: 60rpx;
    color: #333333;
    margin-bottom: 50rpx;
  }
  .lable-title {
    height: 60rpx;
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    border-left: 1px solid #dcdfe6;
    background: #ebeef5;
    color: #333333;
  }
  .lable-box {
    display: flex;
    font-size: 24rpx;
    text {
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #dcdfe6;
      overflow: hidden;
    }
    text:nth-child(1) {
      width: 127rpx;
    }
    text:nth-child(2) {
      width: 220rpx;
    }
    text:nth-child(3) {
      width: 121rpx;
    }
    text:nth-child(4) {
      flex: 1;
      text-align: center;
    }
  }
  .lable-content {
    height: 90rpx;
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    border-left: 1px solid #dcdfe6;
    margin-top: -2rpx;
  }
  .ButtonText {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 304rpx;
    height: 78rpx;
    margin: 50rpx auto 0;
    background: #3385ff;
    border-radius: 4rpx;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>