scrm-vue/src/scrm_pages/marketing_tool/activity_detail.vue

<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs="crumbs"></bread-crumb>
        </div>
        <div class="app-container" style="padding-top: 0; background-color: #f6f8f9;">
            <div class="base-info">
                <div class="poster-photo">
                    <img :src="poster_photo" />
                </div>
                <div class="title-panel">
                    <p class="title">
                        <!-- <router-link v-if="activity != null && activity.status == 4" :to="activity_url" target="_blank">{{ title }}</router-link>
                        <router-link v-else :to="activity_url">{{ title }}</router-link> -->
                        <router-link :to="activity_url" target="_blank">{{ title }}</router-link>
                    </p>
                    <p class="date">活动日期：{{ activity_time }}</p>
                </div>
                <div class="action-panel">
                    <el-button type="primary" v-if="show_share_btn" @click="$router.push({ path: '/activity/share', query: { id: activity_id } })">再次分享</el-button>
                    <el-button type="primary" v-if="show_publish_btn" @click="publishActivity" :loading="publishing">发布</el-button>
                </div>
            </div>
            <div class="times-statistics">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="item">
                            <span class="count">{{ read_times }}</span>
                            <p class="desc">展示次数</p>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="item">
                            <span class="count">{{ join_count }}</span>
                            <p class="desc">参与人数</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="signup-header">
                <div class="input">
                    <el-input v-model="signup_keyword" placeholder="搜索报名人" style="width: 330px;"></el-input>
                    <el-button type="primary" icon="el-icon-search" :loading="loading_search" @click="fetchSignupUsers">搜索</el-button>
                </div>
                <div class="all-btn">
                    <el-button type="primary" @click="$router.push({ path: '/activity/signupusers', query: { id: activity_id } })">查看全部</el-button>
                </div>
            </div>
            <div class="signup-table-panel">
                <el-table :data="signup_users" empty-text="暂无人报名">
                    <el-table-column label="报名号" align="center" prop="id"></el-table-column>
                    <el-table-column label="手机号" align="center" prop="mobile"></el-table-column>
                    <el-table-column label="客户姓名" align="center" prop="real_name"></el-table-column>
                    <el-table-column label="报名时间" align="center">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.ctime, "{y}-{m}-{d} {h}:{i}") }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import BreadCrumb from "@/scrm_pages/components/bread-crumb"
import { fetchActivityDetailViewData, fetchActivitySignupUsers, publishActivity } from "@/api/activity/activity"
import { parseTime } from "@/utils"

export default {
    name: "ActivityDetail",
    components: {
        BreadCrumb,
    },
    data() {
        return {
            crumbs: [
                { path: false, name: "营销工具" },
                { path: false, name: "活动详情" },
            ],

            activity_id: 0,
            activity: null,

            signup_keyword: "",
            signup_users: [],

            loading_search: false,
            publishing: false,
        }
    },
    computed: {
        title: function() {
            return this.activity == null ? "" : this.activity.title
        },
        poster_photo: function() {
            return this.activity == null ? "/" : this.activity.poster_photo
        },
        activity_url: function() {
            if (this.activity != null) {
                return "/activity/preview?id=" + this.activity_id
            }
            return ""
        },
        activity_time: function() {
            return this.activity == null ? "" : parseTime(this.activity.start_time, "{y}-{m}-{d} {h}:{i}")
        },
        show_share_btn: function() {
            return this.activity == null ? false : (this.activity.status == 1)
        },
        show_publish_btn: function() {
            return this.activity == null ? false : (this.activity.status == 4)
        },
        read_times: function() {
            return this.activity == null ? 0 : this.activity.read_num
        },
        join_count: function() {
            return this.activity == null ? 0 : this.activity.join_num
        }
    },
    mounted() {
        this.activity_id = this.$route.query.id

        fetchActivityDetailViewData(this.activity_id).then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
                this.activity = resp.data.activity
                this.signup_users = resp.data.users
            } else {
                this.$message.error(resp.msg)
            }

        }).catch(err => {
            this.$message.error(err)
        })
    },
    methods: {
        parseTime,
        fetchSignupUsers: function() {
            this.loading_search = true
            fetchActivitySignupUsers(this.activity_id, this.signup_keyword, 1).then(rs => {
                this.loading_search = false
                var resp = rs.data
                if (resp.state == 1) {
                    this.signup_users = resp.data.users
                } else {
                    this.$message.error(resp.msg)
                }
            }).catch(err => {
                this.loading_search = false
                this.$message.error(err)
            })
        },
        publishActivity: function() {
            this.publishing = true
            publishActivity(this.activity_id).then(rs => {
                this.publishing = false
                var resp = rs.data
                if (resp.state == 1) {
                    this.activity.status = 1
                } else {
                    this.$message.error(resp.msg)
                } 

            }).catch(rs => {
                this.publishing = false
                this.$message.error(err)
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.base-info {
    padding: 20px 25px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    align-items: center;
    background-color: white;
    box-shadow: 0 0 1px #dee2e5;

    .poster-photo {
        width: 120px;
        height: 96px;
        display: flex;
        justify-content: center;
        margin-right: 22px;

        img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            object-fit: cover;
            object-position: center;
        }
    }
    .title-panel {
        flex: 3;
        padding-right: 20px;

        .title {
            font-size: 18px;
            color: #485b6d;
            font-weight: 700;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            height: 70px;
            line-height: 34px;
        }
        .date {
            color: #7b8a97;
            line-height: 20px;
            font-size: 14px;
        }
    }
    .action-panel {
        flex: 1;
        text-align: right;
    }
}
.times-statistics {
    margin-top: 20px;

    .item {
        padding: 40px 0 30px 0;
        box-shadow: 0 0 1px #dee2e5;
        background-color: white;
        text-align: center;

        .count {
            font-size: 36px;
            color: #58a2ec;
        }
        .desc {
            margin-top: 5px;
            font-size: 14px;
            color: #485b6d;
        }
    }
}
.signup-header {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .input {
        width: 500px;
        display: block;
    }
    .all-btn {
        display: block;
    }
}
.signup-table-panel {
    margin-top: 10px;
}
</style>