tuanfeng-pc-admin/src/views/rm-bank/activity/components/DetailModal.vue

<template>
  <el-dialog :close-on-click-modal="false" title="提示" :visible.sync="activityVisible" width="50%">
    <div v-loading="isLoading">
      <el-descriptions title="活动信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label">所属俱乐部ID</template>
          {{ activityInfo.clubId || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">活动类型</template>
          <el-tag type="primary" size="mini" v-if="activityInfo.type == 1">公益活动</el-tag>
          <el-tag type="warning" size="mini" v-if="activityInfo.type == 2">会议</el-tag>
          <el-tag type="success" size="mini" v-if="activityInfo.type == 3">爱心传递</el-tag>
          <el-tag type="info" size="mini" v-if="activityInfo.type == 4">公告</el-tag>
          <el-tag type="danger" size="mini" v-if="activityInfo.type == 5">商机</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">活动标题</template>
          {{ activityInfo.title || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">活动封面</template>
          <el-image style="height: 50px" :src="activityInfo.cover" :preview-src-list="[activityInfo.cover]" fit="cover" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">活动内容</template>
          {{ activityInfo.content || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">状态</template>
          <el-tag type="primary" size="mini" v-if="activityInfo.state == 2">已开始</el-tag>
          <el-tag type="success" size="mini" v-if="activityInfo.state == 3">已结束</el-tag>
          <el-tag type="info" size="mini" v-if="activityInfo.state == 4">已撤销</el-tag>
          <el-tag type="danger" size="mini" v-if="activityInfo.state == 1">草稿</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">报名范围</template>
          <el-tag type="primary" size="mini" v-if="activityInfo.state == 1">所有用户</el-tag>
          <el-tag type="success" size="mini" v-if="activityInfo.state == 2">仅限俱乐部会员</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">封面</template>
          <el-image style="width: 40px; height: 40px; border-radius: 50%" v-if="activityInfo.cover" :src="activityInfo.cover" :preview-src-list="[activityInfo.cover]" fit="cover" />
          <span v-else>--</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">宣传视频</template>
          <!-- <video style="width: 100px; height: 50px" :src="activityInfo.promotionalVideo"></video> -->

          <el-button @click="$refs.previewVideoRef && $refs.previewVideoRef.show(activityInfo.promotionalVideo)" v-if="activityInfo.promotionalVideo" type="text">查看视频</el-button>
          <span v-else>--</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">开始时间</template>
          {{ activityInfo.startTime || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">结束时间</template>
          {{ activityInfo.endTime || '--' }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template slot="label">活动地址</template>
          {{ activityInfo.activitiesAddress || '--' }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template slot="label">参与方式</template>
          {{ activityInfo.participationMethod || '--' }}
        </el-descriptions-item>

        <el-descriptions-item :span="1">
          <template slot="label">注意事项</template>
          {{ activityInfo.precautions || '--' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 发布信息 -->
      <el-descriptions class="margin-top" title="发布信息" :column="2" border>
        <el-descriptions-item>
          <template slot="label">发布人会员ID</template>
          {{ activityInfo.publishMemberId || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">发布人昵称</template>
          {{ activityInfo.publishMemberName || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">发布人头像</template>
          <el-image style="height: 50px" :src="activityInfo.publishMemberAvatar" :preview-src-list="[activityInfo.publishMemberAvatar]" fit="cover" />
        </el-descriptions-item>
      </el-descriptions>

      <!-- 商机信息 -->
      <el-descriptions class="margin-top" title="商机信息" :column="2" border v-if="activityInfo.type == 5">
        <el-descriptions-item>
          <template slot="label">商机类型</template>
          <el-tag type="primary" size="mini" v-if="activityInfo.opportunityType == 1">寻求合作</el-tag>
          <el-tag type="warning" size="mini" v-if="activityInfo.opportunityType == 2">寻求采购</el-tag>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">商机联系方式</template>
          {{ activityInfo.opportunityContactNumber || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">商机联系邮箱</template>
          {{ activityInfo.opportunityContactEmail || '--' }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">商机方法链接</template>
          <a v-if="activityInfo.opportunityAuthorityUrl" :href="activityInfo.opportunityAuthorityUrl" target="_blank"></a>
          <span v-on:select="">--</span>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 参与会员 -->
      <el-descriptions class="margin-top" title="参与会员列表" :column="2" border>
        <el-descriptions-item>
          <el-table :data="tableData" :style="{ width: '100%' }">
            <el-table-column prop="memberId" label="会员ID" width="180" />
            <el-table-column prop="memberName" label="会员昵称" width="180" />
            <el-table-column prop="memberAvatar" label="会员头像" align="center" width="120">
              <template slot-scope="scope">
                <el-image :src="scope.row.memberAvatar" style="width: 40px; height: 40px; border-radius: 50%" :preview-src-list="[scope.row.memberAvatar]" fit="cover" />
              </template>
            </el-table-column>
            <el-table-column prop="memberMobile" label="会员手机号" />
            <el-table-column prop="state" label="报名状态" align="center" width="120">
              <template slot-scope="scope">
                <el-tag type="primary" size="mini" v-if="activityInfo.state == 1">已报名</el-tag>
                <el-tag type="success" size="mini" v-if="activityInfo.state == 2">已确认</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="close">取消</el-button>
      </span>
    </template>

    <PreviewVideo ref="previewVideoRef"></PreviewVideo>
  </el-dialog>
</template>

<script>
import { getActivityDetailApi } from '@/api/rm-bank/index'
import PreviewVideo from './PreviewVideo.vue'

export default {
  components: {PreviewVideo},
  data() {
    return {
      isLoading: false,
      activityVisible: false,
      activityInfo: {},
      members: []
    }
  },

  methods: {
    async show(activityId) {
      if (!activityId) {
        return this.$message.error('活动id不能为空')
      }
      this.activityVisible = true

      try {
        this.isLoading = true
        const res = await getActivityDetailApi({ id: activityId })
        this.activityInfo = res.data.activities
        this.members = res.data.activitiesMembers
      } finally {
        this.isLoading = false
      }
    },

    close() {
      this.activityVisible = false
    },

    reset() {
      this.activityInfo = {}
      this.members = []
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-descriptions-item__cell {
  width: 50px;
}

.margin-top {
  margin-top: 20px;
}
</style>