epmet-work-pc/src/views/modules/communityParty/activity/eventDetails.vue

<template>
    <div>
        <div class="dialog-h-content scroll-h">
            <div v-if="initLoading" class="m-detail-main">
                <div class="m-info">

                    <div style="display: flex;">
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">活动类型: </span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.unitName || "--" }}</span>
                        </div>
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">活动名称: </span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.activityName || "--" }}</span>
                        </div>
                    </div>

                    <div style="display: flex;">
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">活动时间: </span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.startTime || "--" }}至<span>{{ formData.endTime || "--" }}</span></span>
                        </div>
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">协办方: </span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.assistingParty || "--" }}</span>
                        </div>
                    </div>


                    <div class="m-info-prop">
                        <span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动内容: </span>
                        <span style="margin-right: 10px;">&nbsp;</span>
                        <span>{{ formData.content || "--" }}</span>
                    </div>

                    <div class="m-info-prop">
                        <span class="u-info-title-2">活动地点: </span>
                        <span style="margin-right: 10px;">&nbsp;</span>
                        <span>{{ formData.address || "--" }}</span>
                    </div>
                    <div class="m-info-prop">
                        <span class="u-info-title-2"></span>
                        <div class="div_map">
                            <div id="app_detail_unit"></div>
                        </div>
                    </div>
                    <div class="m-info-prop">
                        <span class="u-info-title-2">线上报名: </span>
                        <span style="margin-right: 10px;">&nbsp;</span>
                        <el-switch :value="formData.online === 1 ? true : false" :disabled="true"></el-switch>
                    </div>

                    <div style="display: flex;">
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">报名截止时间：</span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>2024-03-1123:59</span>
                        </div>

                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">活动积分：</span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>3</span>
                        </div>
                    </div>

                    <div class="m-info-prop">
                        <span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动总结：</span>
                        <span style="margin-right: 10px;">&nbsp;</span>
                        <span>{{ formData.sumUp || "--" }}</span>
                    </div>
                    <div class="m-info-prop" style="display: flex; flex-wrap: wrap; align-items: flex-start;">
                        <span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动图片：</span>
                        <div v-for="(image, index) in formData.activityImgs" :key="index">
                            <img style="width: 200px; height: 160px; margin-right: 30px;margin-bottom: 10px;"
                                :src="image.url" alt="Image" />
                        </div>
                    </div>

                    <div style="margin-top: 20px;">
                        <div style="font-size: 15px; color: black; margin-left: -30px;margin-bottom: 10px;">
                            报名名单
                        </div>
                        <el-table class="table" border style="width: 100%">
                            <el-table-column label="序号" header-align="center" align="center" type="index"
                                width="50"></el-table-column>

                            <el-table-column prop="unitName" header-align="center" align="center" label="姓名"
                                min-width="80">
                            </el-table-column>
                            <el-table-column prop="agencyName" header-align="center" align="center" label="联系电话"
                                min-width="100">
                            </el-table-column>
                            <el-table-column prop="type" header-align="center" align="center" label="报名时间"
                                min-width="80">
                            </el-table-column>
                            <el-table-column prop="serviceMatterListShow" header-align="center" align="center"
                                label="备注说明" show-overflow-tooltip min-width="120">

                            </el-table-column>
                            <el-table-column prop="contact" header-align="center" align="center" label="签到" width="80">
                            </el-table-column>
                            <el-table-column prop="contactMobile" header-align="center" align="center" label="签到地点"
                                width="120">
                            </el-table-column>
                        </el-table>
                    </div>


                    <div style="margin-top: 20px;">
                        <div style="font-size: 15px; color: black; margin-left: -30px; margin-bottom: 10px;">
                            活动实况
                        </div>
                        <el-table class="table" border style="width: 100%">
                            <el-table-column label="序号" header-align="center" align="center" type="index"
                                width="50"></el-table-column>

                            <el-table-column prop="unitName" header-align="center" align="center" label="姓名"
                                min-width="100">
                            </el-table-column>
                            <el-table-column prop="agencyName" header-align="center" align="center" label="联系电话"
                                min-width="80">
                            </el-table-column>
                            <el-table-column prop="type" header-align="center" align="center" label="实况内容"
                                min-width="280">
                            </el-table-column>
                            <!-- <el-table-column prop="serviceMatterListShow" header-align="center" align="center"
                                label="活动照片" show-overflow-tooltip min-width="120">
                            </el-table-column> -->
                            <el-table-column prop="serviceMatterListShow" header-align="center" align="center"
                                label="活动照片" show-overflow-tooltip min-width="120">
                                <template slot-scope="scope">
                                    <div v-for="(item, index) in scope.row.serviceMatterListShow" :key="index"
                                        style="display: flex;">
                                        <img :src="item.url"
                                            style="max-width: 20px; max-height: 20px; margin-right: 10px;" />
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </div>
            </div>
        </div>
        <div class="m-detail-btn">
            <el-button size="small" @click="handleCancle">关 闭</el-button>
        </div>
    </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";

var map;
var search;
var markers;
var infoWindowList;
var geocoder; // 新建一个正逆地址解析类

let loading; // 加载动画
export default {
    data() {
        return {
            formData: {},
            initLoading: false,
            // imageArray: [
            //     { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Is2yEGD5UpcDWjgEZxI3aAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qTIRFZyY3BxB1CaOT1Uf9wHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Is2yEGD5UpcDWjgEZxI3aAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qTIRFZyY3BxB1CaOT1Uf9wHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            // ],
            // tableData: [
            //     { unitName: '张三', agencyName: '123456789', type: '内容1', serviceMatterListShow: [  { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Is2yEGD5UpcDWjgEZxI3aAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qTIRFZyY3BxB1CaOT1Uf9wHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },] },
            //     { unitName: '李四', agencyName: '987654321', type: '内容2', serviceMatterListShow: [  { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Is2yEGD5UpcDWjgEZxI3aAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts1.cn.mm.bing.net/th?id=OIP-C.qTIRFZyY3BxB1CaOT1Uf9wHaEK&w=333&h=187&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },
            //     { url: 'https://ts3.cn.mm.bing.net/th?id=OIP-C.4SPZVrcvZ-Tunx4G4FFtRAHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2' },] },

            // ],
        };
    },
    components: {},
    created() { },

    methods: {
        handleCancle() {
            this.diaDestroy();
            this.$emit("diaDetailClose");
        },

        diaDestroy() {
            if (map) {
                // map.destroy()
            }
        },

        async initForm(row) {
            this.startLoading();
            this.formData = JSON.parse(JSON.stringify(row));
            this.initLoading = true;
            console.log('this.formData,',this.formData);

            let { latitude, longitude } = this.$store.state.user;
            console.log("lat" + latitude + ",lon" + longitude);
            if (this.formData.latitude && this.formData.longitude) {
                latitude = this.formData.latitude;
                longitude = this.formData.longitude;
            }
            if (!latitude || latitude == "" || latitude == "0") {
                latitude = 39.9088810666821;
                longitude = 116.39743841556731;
            }
            // this.$nextTick(() => {
            //     if (!map) {
            //         // this.initMap(latitude, longitude);
            //     } else {
            //         // map.setCenter(latitude, longitude);
            //         // map.setMarker(latitude, longitude);
            //     }
            // });

            this.endLoading();
        },

        // 开启加载动画
        startLoading() {
            loading = Loading.service({
                lock: true, // 是否锁定
                text: "正在加载……", // 加载中需要显示的文字
                background: "rgba(0,0,0,.7)", // 背景颜色
            });
        },
        // 结束加载动画
        endLoading() {
            // clearTimeout(timer);
            if (loading) {
                loading.close();
            }
        },
    },
    computed: {},
    props: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";

// span {
//     display: inline-block;
//     white-space: nowrap; /* 避免换行 */
// }

</style>
<style scoped></style>