dev/dcp-web-gate/src_old/views/ExhibitionService/ExhibitionServiceDetailInfo.vue

<template>
    <div class="autoBox box" style="min-height: 900px;position: relative;">

        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: 'home' }">{{ $t('common.Home') }}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: 'exhibitionService2' }">{{ $t('common.ExhibitionService') }}
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ $t('common.ExhibitionServiceDetail') }}</el-breadcrumb-item>

            </el-breadcrumb>
        </div>
        <div class="ui-body" v-if="$i18n.locale == 'zh'">
            <div class="ui-left">
                <h3>{{ listDetail.name }}</h3>
                <div class="ui-infos">
                    <ul class="ui-uls">
                        <li class="ui-ul-li">
                            <div class="ui-li-left">
                                <div class="ui-info-left">举办时间:</div>
                                <div class="ui-info-right">{{ listDetail.validityStartDate | time("YYYY-MM-DD")
                                }} -- {{ listDetail.validityEndDate | time("YYYY-MM-DD") }}</div>
                            </div>
                            <div class="ui-li-right">
                                <div class="ui-info-left">举办地区:</div>
                                <div class="ui-info-rights">{{ listDetail.region }}</div>
                            </div>
                        </li>
                        <li class="ui-ul-li">
                            <div class="ui-li-left">
                                <div class="ui-info-left">举办地点:</div>
                                <div class="ui-info-right">{{ listDetail.place }}</div>
                            </div>
                            <div class="ui-li-right">
                                <div class="ui-info-left">展商数量:</div>
                                <div class="ui-info-right">{{ listDetail.showbusinessNumber }}</div>
                            </div>
                        </li>
                        <li class="ui-ul-info">
                            <div class="ui-info-left">主办单位:</div>
                            <div class="ui-info-right">{{ listDetail.company }}</div>
                        </li>
                        <li class="ui-ul-info">
                            <div class="ui-info-left">承办单位:</div>
                            <div class="ui-info-right">{{ listDetail.undertakeCompany }}</div>
                        </li>
                        <li class="ui-ul-info">
                            <div class="ui-info-left">会展面积:</div>
                            <div class="ui-info-right">{{ listDetail.area }}万平</div>
                        </li>
                    </ul>
                </div>
                <div class="user-btn">
                    <el-button type="primary" @click="toJoin(listDetail.extendTwo)">参展报名</el-button>
                    <el-button v-if="yunShang" plain @click="toTop(listDetail.exhibitionHallUrl)">云上展厅</el-button>
                </div>
                <div class="user-info" v-html="listDetail.introduceHtml"></div>
                <div class="to-user-detail" @click="aboutInfo"><span style="cursor:hand">相关会议</span></div>
                <el-dialog title="参展报名" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
                    style="width:100%;" :append-to-body="true" :destroy-on-close="destroyOnClose">
                    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
                        <el-form-item label="展位性质" :label-width="formLabelWidth" prop="radio">
                            <el-radio-group v-model="dynamicValidateForm.radio" size="medium">
                                <el-radio label="参展商"></el-radio>
                                <el-radio label="参展观众"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="企业名称" :label-width="formLabelWidth" prop="unitName" :rules="[
                            { required: true, message: '请输入企业名称', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.unitName" placeholder="请输入企业名称"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人" :label-width="formLabelWidth" prop="contact" :rules="[
                            { required: true, message: '请输入联系人', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.contact" placeholder="请输入联系人"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" :label-width="formLabelWidth" prop="mobile" :rules="[
                            { required: true, message: '请输入电话', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.mobile" placeholder="请输入电话"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email" :rules="[
                            { required: true, message: '请输入邮箱', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" :label-width="formLabelWidth" prop="advisoryDetails" :rules="[
                            { required: true, message: '请填写备注', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.advisoryDetails" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="上传附件" :label-width="formLabelWidth">
                            <el-upload class="upload-demo" ref="upload"
                                action="/api/file/upload/attachment?module=resourceshare&attachmentBusinessType=exhibition_apply"
                                :limit="limit" :headers="myHeaders" :on-remove="handleRemove" :on-exceed="onExceed"
                                :before-upload="beforeUpload" :on-success="handleAvatarSuccessAnnex"
                                :file-list="fileList" :auto-upload="autoUpload">

                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">取 消</el-button>
                        <el-button type="primary" @click="toReady()">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
            <div class="ui-right">
                <div style="margin-top: 20px;margin-left: 10px;">
                    <div class="relevanInformation">
                        <div class="informationTitle informationTitleAfter">
                            <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                style="height: 20px;vertical-align: middle;"> -->
                            {{ $t('common.LookBackAt') }}
                        </div>
                        <ul class="user-out" style="overflow:auto">
                            <li v-for="(item, index) in historyInfo" :key="index" @click="toDetail(item)"
                                class="list-infos">· {{ item.name }}</li>
                        </ul>
                    </div>
                </div>
                <div style="margin-top: 20px;margin-left: 10px;">
                    <div class="relevanInformation">
                        <div class="informationTitle informationTitleAfter">
                            <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                style="height: 20px;vertical-align: middle;"> -->
                            {{ $t('common.ContactInformations') }}
                        </div>
                        <div>
                            <ul class="user-out">
                                <li class="user-list-info">
                                    <div class="user-list-pic">
                                        <img src="@/assets/img/exhibition/who.png" alt="" class="user-list-pic-info">
                                        <i>联系人:</i>
                                    </div>
                                    <div class="user-info-d">{{ listDetail.contactMen }}</div>
                                </li>
                                <li class="user-list-info">
                                    <div class="user-list-pic">
                                        <img src="@/assets/img/exhibition/24gl-phoneBubble.png" alt=""
                                            class="user-list-pic-info">
                                        <i>电话:</i>
                                    </div>
                                    <div class="user-info-d">{{ listDetail.contactPhone }}</div>
                                </li>
                                <li class="user-list-info">
                                    <div class="user-list-pic">
                                        <img src="@/assets/img/exhibition/email.png" alt="" class="user-list-pic-info">
                                        <i>邮箱:</i>
                                    </div>
                                    <div class="user-info-d">{{ listDetail.email }}</div>
                                </li>
                                <li class="user-list-info">
                                    <div class="user-list-pic">
                                        <img src="@/assets/img/exhibition/QQ.png" alt="" class="user-list-pic-info">
                                        <i>QQ:</i>
                                    </div>
                                    <div class="user-info-d">{{ listDetail.qq }}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui-body" v-if="$i18n.locale == 'en'">
            <div class="ui-left">
                <h3>{{ listDetail.name }}</h3>
                <div class="ui-infos">
                    <ul class="ui-uls">
                        <li class="ui-ul-li">
                            <div class="ui-li-left">
                                <div class="ui-info-left">Holding time:</div>
                                <div class="ui-info-right">{{ listDetail.validityStartDate | time("YYYY-MM-DD")
                                }} -- {{ listDetail.validityEndDate | time("YYYY-MM-DD") }}</div>
                            </div>
                            <div class="ui-li-right">
                                <div class="ui-info-left">Hold area:</div>
                                <div class="ui-info-rights">{{ listDetail.region }}</div>
                            </div>
                        </li>
                        <li class="ui-ul-li">
                            <div class="ui-li-left">
                                <div class="ui-info-left">Host place:</div>
                                <div class="ui-info-right">{{ listDetail.place }}</div>
                            </div>
                            <div class="ui-li-right">
                                <div class="ui-info-left">Exhibitors number:</div>
                                <div class="ui-info-right">{{ listDetail.showbusinessNumber }}</div>
                            </div>
                        </li>
                        <li class="ui-ul-info">
                            <div class="ui-info-left">Host unit:</div>
                            <div class="ui-info-right">{{ listDetail.company }}</div>
                        </li>
                        <li class="ui-ul-info">
                            <div class="ui-info-left">Responsible unit:</div>
                            <div class="ui-info-right">{{ listDetail.undertakeCompany }}</div>
                        </li>
                        <li class="ui-ul-info">
                            <div class="ui-info-left">Exhibition area:</div>
                            <div class="ui-info-right">{{ listDetail.area }}Myriametre</div>
                        </li>
                    </ul>
                </div>
                <div class="user-btn">
                    <el-button type="primary" @click="toJoin(listDetail.extendTwo)">Apply</el-button>
                    <el-button v-if="yunShang" plain @click="toTop(listDetail.exhibitionHallUrl)">Exhibition</el-button>
                </div>
                <div class="user-info" v-html="listDetail.introduceHtml"></div>
                <div class="to-user-detail" @click="aboutInfo"><span style="cursor:hand">Related Conference
                        Registration</span> </div>
                <el-dialog title="The exhibition registration" :visible.sync="dialogFormVisible"
                    :close-on-click-modal="false" style="width:100%;" :append-to-body="true"
                    :destroy-on-close="destroyOnClose">
                    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
                        <el-form-item label="Nature of the booth" :label-width="formLabelWidth" prop="radio">
                            <el-radio-group v-model="dynamicValidateForm.radio" size="medium">
                                <el-radio label="Exhibitor"></el-radio>
                                <el-radio label="The exhibition audience"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="The name of firm" :label-width="formLabelWidth" prop="unitName" :rules="[
                            { required: true, message: 'Please enter the business name', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.unitName"
                                placeholder="Please enter the business name"></el-input>
                        </el-form-item>
                        <el-form-item label="Contacts" :label-width="formLabelWidth" prop="contact" :rules="[
                            { required: true, message: 'Please enter the contact person', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.contact"
                                placeholder="Please enter the contact person"></el-input>
                        </el-form-item>
                        <el-form-item label="Telephone" :label-width="formLabelWidth" prop="mobile" :rules="[
                            { required: true, message: 'Please enter the telephone number', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.mobile"
                                placeholder="Please enter the telephone number"></el-input>
                        </el-form-item>
                        <el-form-item label="E-mail" :label-width="formLabelWidth" prop="email" :rules="[
                            { required: true, message: 'Please enter email address', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.email" placeholder="Please enter email address">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="Remark" :label-width="formLabelWidth" prop="advisoryDetails" :rules="[
                            { required: true, message: 'Please fill in the remarks', trigger: 'blur' }
                        ]">
                            <el-input v-model="dynamicValidateForm.advisoryDetails" placeholder="Please fill in the remarks">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="Upload attachment" :label-width="formLabelWidth">
                            <el-upload class="upload-demo" ref="upload"
                                action="/api/file/upload/attachment?module=resourceshare&attachmentBusinessType=exhibition_apply"
                                :limit="limit" :headers="myHeaders" :on-remove="handleRemove" :on-exceed="onExceed"
                                :before-upload="beforeUpload" :on-success="handleAvatarSuccessAnnex"
                                :file-list="fileList" :auto-upload="autoUpload">

                                <el-button slot="trigger" size="small" type="primary">Select the file</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="cancel">Take away</el-button>
                        <el-button type="primary" @click="toReady()">Determine</el-button>
                    </div>
                </el-dialog>
            </div>
            <div class="ui-right">
                <div style="margin-top: 20px;margin-left: 10px;">
                    <div class="relevanInformation">
                        <div class="informationTitle informationTitleAfter">
                            <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                style="height: 20px;vertical-align: middle;"> -->
                            {{ $t('common.LookBackAt') }}
                        </div>
                        <ul class="user-out" v-infinite-scroll="load" style="overflow:auto">
                            <li v-for="(item, index) in historyInfo" :key="index" @click="toDetail(item)"
                                class="list-infos">· {{ item.name }}</li>
                        </ul>
                    </div>
                </div>
                <div style="margin-top: 20px;margin-left: 10px;">
                    <div class="relevanInformation">
                        <div class="informationTitle informationTitleAfter">
                            <!-- <img src="@/assets/img/cooperationExchange/20200608_03.gif" alt=""
                                style="height: 20px;vertical-align: middle;"> -->
                            {{ $t('common.ContactInformations') }}
                        </div>
                        <div>
                            <ul class="user-out">
                                <li class="user-list-info">
                                    <div class="user-list-pic">
                                        <img src="@/assets/img/exhibition/who.png" alt="" class="user-list-pic-info">
                                        <i>Contacts:</i>
                                    </div>
                                    <div class="user-info-d">{{ listDetail.contactMen }}</div>
                                </li>
                                <li class="user-list-info">
                                    <div class="user-list-pic">
                                        <img src="@/assets/img/exhibition/24gl-phoneBubble.png" alt=""
                                            class="user-list-pic-info">
                                        <i>Telephone:</i>
                                    </div>
                                    <div class="user-info-d">{{ listDetail.contactPhone }}</div>
                                </li>
                                <li class="user-list-info">
                                    <div class="user-list-pic">
                                        <img src="@/assets/img/exhibition/email.png" alt="" class="user-list-pic-info">
                                        <i>E-mail:</i>
                                    </div>
                                    <div class="user-info-d">{{ listDetail.email }}</div>
                                </li>
                                <li class="user-list-info">
                                    <div class="user-list-pic">
                                        <img src="@/assets/img/exhibition/QQ.png" alt="" class="user-list-pic-info">
                                        <i>QQ:</i>
                                    </div>
                                    <div class="user-info-d">{{ listDetail.qq }}</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { ConventionRegistration } from "@/api/exhibition"
import { getToken } from "@/utils/auth";
import { getTokens } from '@/api/token'
import { ExhibitionListsDetail } from '@/api/exhibition'
import moment from "moment";
export default {
    name: "exhibitionServiceDetailInfo",
    data() {
        return {
            dialogFormVisible: false,
            dynamicValidateForm: {
                unitName: '',
                contact: '',
                mobile: '',
                email: '',
                radio: '',
                advisoryDetails: '',
            },
            formLabelWidth: '150px',
            fileList: [],
            typeNum: null,
            limit: 1,
            fileInfo: {},
            autoUpload: true,
            myHeaders: { Authorization: "Bearer " + getToken() },
            detailId: null,
            three1: null,
            listDetail: {},
            historyInfo: [],
            yunShang: true,
            logNum: null,
            flag: false,
            destroyOnClose: true,
            // flagShe: false,
        }
    },
    watch: {
        '$i18n.locale'() {
            this.initData();
        },
    },
    beforeDestroy() {
        //  window.onbeforeunload = function (e) {
        //         var storage = window.sessionStorage;
        //         storage.clear()
        //     }
        // sessionStorage.removeItem('hzfw-params');
        // sessionStorage.removeItem('hzfw-query')
    },
    mounted() {
        // 缓存不存在
        if (sessionStorage.getItem('hzfw-params') == null) {
            // 原始进入方式
            let params1 = this.$route.params
            this.detailId = params1.id
            this.three1 = params1.three1
            sessionStorage.setItem('hzfw-params', JSON.stringify(params1))
        } else if (sessionStorage.getItem('hzfw-params') != null) {
            // 缓存存在  详情跳转的地方
            // 点击详情进来会保存在这里
            let params2 = JSON.parse(sessionStorage.getItem('hzfw-params'))
            if (this.$route.params.id && (params2.id != this.$route.params.id)) {
                params2 = this.$route.params
                sessionStorage.setItem('hzfw-params', JSON.stringify(params2))
            }
            this.detailId = params2.id
            this.three1 = params2.three1
        }
        // 缓存不存在
        let query3 = this.$route.query
        let num = query3.num
        if (num == 1) {
            // 点击往期回顾
            let query1 = this.$route.query
            this.detailId = query1.id
            this.three1 = query1.three1
            sessionStorage.setItem('hzfw-query', JSON.stringify(query1))
        } else {
            if (sessionStorage.getItem('hzfw-query') != null) {
                let params2 = JSON.parse(sessionStorage.getItem('hzfw-query'))
                this.detailId = params2.id
                this.three1 = params2.three1
            }
        }
        this.initData()

    },
    filters: {
        twoDecimal(value) {
            return parseFloat(String(value)).toFixed(2)
        },
        time(data, type) {
            return moment(data).format(type)
        }
    },
    methods: {
        toJoin(time) {
            console.log(time);
            let user = window.sessionStorage.getItem("user");
            if (!this.$Cookies.get('token')) {
                if (this.$i18n.locale.toUpperCase() == "ZH") {
                    this.$message.error("未登录用户无法报名");
                } else {
                    this.$message.error('Users who are not logged in cannot sign up')
                }

                this.logNum = 1
                let logNums = sessionStorage.setItem('num', this.logNum)
                // this.$confirm('检测到您未登录，是否登录')
                // .then(_ => {
                //  this.toView('login');
                // })
                // .catch(_ => {});
                // this.toViewLogin = true;
            } else {
                if (time != '已结束') {
                    if (this.$Cookies.get('token')) {
                        this.dialogFormVisible = true
                    } else {
                        if (this.$i18n.locale.toUpperCase() == "ZH") {
                            this.$message('请登录')
                        } else {
                            this.$message('Please log in')
                        }
                    }
                } else {
                    if (this.$i18n.locale.toUpperCase() == "ZH") {
                        this.$message('活动已结束')
                    } else {
                        this.$message('The event is over')
                    }
                }
            }
        },
        initData() {
            let id = this.detailId
            let three1 = this.three1
            let param = {
                id: three1,
                language: this.$i18n.locale.toUpperCase(),
            }
            // console.log(three1, 'three1');
            ExhibitionListsDetail(param).then((res) => {
                console.log(res);
                this.listDetail = res.data.exhibitionManagementLists[0]
                this.historyInfo = res.data.historyDate
                this.detailId = this.listDetail.id
                // if (res.data.historyDate) {
                //     this.flagShe = false
                // }
                // this.listNum=res.data.historyDate.length
                if (this.listDetail.exhibitionHallUrl) {
                    this.yunShang = true
                } else {
                    this.yunShang = false
                }
            })
        },
        toDetail(item) {
            // console.log(id);
            let picId = item.id
            let three1 = item.extendThree
            console.log(picId);
            this.$router.push({
                name: 'exhibitionServiceDetail', params: {
                    id: picId,
                    three1: three1
                }
            });
            // const { href } = this.$router.resolve({
            //     name: 'exhibitionServiceDetails',
            //     query: {
            //         id: picId,
            //         three1: three1,
            //         num: 1
            //     }
            // });
            // sessionStorage.removeItem('hzfw-query')
            // window.open(href, '_blank')
        },
        toTop(url) {
            window.open(url);
        },
        aboutInfo() {
            this.$router.push('conferenceServices')
        },
        cancel() {
            console.log();
            this.dialogFormVisible = false
        },
        toReady() {
            this.$refs.upload.clearFiles()
            console.log(this.fileInfo);
            this.$refs.dynamicValidateForm.validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    if (this.dynamicValidateForm.radio == "参展商") {
                        this.typeNum = 0
                    } else {
                        this.typeNum = 1
                    }
                    if (this.fileInfo.data) {
                        let exhibitionApply = {
                            unitName: this.dynamicValidateForm.unitName,
                            contact: this.dynamicValidateForm.contact,
                            mobile: this.dynamicValidateForm.mobile,
                            email: this.dynamicValidateForm.email,
                            type: this.typeNum,
                            fileId: this.fileInfo.data.attachmentId,
                            fileUrl: this.fileInfo.data.path,
                            advisoryDetails:this.dynamicValidateForm.advisoryDetails,
                            exhibitionId: this.detailId,
                            extend1: this.listDetail.extendThree,
                            extend2: this.$i18n.locale.toUpperCase()
                        }
                        console.log(exhibitionApply, '传给后台的参数');
                        getTokens().then((res) => {
                            ConventionRegistration(JSON.stringify(exhibitionApply), res.data).then((res) => {
                                if (this.$i18n.locale.toUpperCase() == "ZH") {
                                    this.$message.success('报名成功')
                                } else {
                                    this.$message.success('Registration success')
                                }
                            }).catch((error) => {
                                if (this.$i18n.locale.toUpperCase() == "ZH") {
                                    this.$message.error('报名失败')
                                } else {
                                    this.$message.success('Registration failed')
                                }
                            })
                        })
                        this.dialogFormVisible = false
                        this.$refs.dynamicValidateForm.resetFields()


                    } else {
                        let exhibitionApply = {
                            unitName: this.dynamicValidateForm.unitName,
                            contact: this.dynamicValidateForm.contact,
                            mobile: this.dynamicValidateForm.mobile,
                            email: this.dynamicValidateForm.email,
                            advisoryDetails:this.dynamicValidateForm.advisoryDetails,
                            type: this.typeNum,
                            exhibitionId: this.detailId,
                            extend1: this.listDetail.extendThree,
                            extend2: this.$i18n.locale.toUpperCase()
                        }
                        console.log(exhibitionApply, '传给后台的参数');
                        getTokens().then((res) => {
                            ConventionRegistration(JSON.stringify(exhibitionApply), res.data).then((res) => {
                                if (this.$i18n.locale.toUpperCase() == "ZH") {
                                    this.$message.success('报名成功')
                                } else {
                                    this.$message.success('Registration success')
                                }
                            }).catch((error) => {
                                if (this.$i18n.locale.toUpperCase() == "ZH") {
                                    this.$message.error('报名失败')
                                } else {
                                    this.$message.success('Registration failed')
                                }
                            })
                        })
                        this.dialogFormVisible = false
                        this.$refs.dynamicValidateForm.resetFields()
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleRemove(file, fileList) {
            this.files.forEach((i) => {
                if (i == file.uid) {
                    var index = this.files.indexOf(i);
                    this.files.splice(index, 1);
                }
            });
        },
        onExceed(files, fileList) {
            console.log(files, fileList);
            if (this.$i18n.locale.toUpperCase() == "ZH") {
                this.$message.error('最多上传一个附件')
            } else {
                this.$message.error('A maximum of one attachment can be uploaded')
            }

        },
        handleAvatarSuccessAnnex(res, file) {
            console.log(res);
            this.fileInfo = res
            console.log(this.fileInfo);
            // this.files.push(res.data.attachmentId);
        },
        beforeUpload(file) {
            var FileExt = file.name.replace(/.+\./, "");
            if (
                ["zip", "pdf", "doc", "docx", "excel", "xls", "xlsx"].indexOf(
                    FileExt.toLowerCase()
                ) === -1
            ) {
                if (this.$i18n.locale.toUpperCase() == "ZH") {
                    this.$message({
                        type: "warning",
                        message: "请上传zip,pdf,word,excel的附件！",
                    });
                } else {
                    this.$message({
                        type: "warning",
                        message:
                            "Please upload the attachment of zip, PDF, word and excel!",
                    });
                }
                this.fileList.splice(this.fileList.indexOf(file), 1);
                return false;
            }
            this.isLt2k = file.size / 1024 / 1024 < 2 ? "1" : "0";
            if (this.isLt2k === "0") {
                if (this.$i18n.locale.toUpperCase() == "ZH") {
                    this.$message({
                        message: "上传文件大小不能超过2M!",
                        type: "error",
                    });
                } else {
                    this.$message({
                        message: "Upload file size cannot exceed 2m!",
                        type: "error",
                    });
                }
                this.fileList.splice(this.fileList.indexOf(file), 1);
                return false;
            }
        },
    }
}
</script>
<style lang="less" scoped>
.box {
    margin-top: 10px;
    background: #fff;
    /* height: 500px; */
    padding: 20px 0;

    .crumbs {
        margin-left: 20px;
    }
}

.user-info {
    margin-top: 20px;
}

.ui-body {
    padding: 30px 12px;
    display: flex;
    justify-content: space-between;

    .ui-left {
        width: 63%;
        position: relative;

        h3 {
            display: inline-block;
            width: 90%;
            margin-left: 5%;
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .ui-infos {
            width: 100%;
            height: 240px;
            background-image: url('~@/assets/img/exhibition/Group 98.png');
            border: 1px solid #d8d6d6;
            background-size: 100% 100%;

            .ui-uls {
                width: 100%;
                height: 200px;
                padding: 20px 20px;

                .ui-ul-li {
                    display: flex;
                    height: 40px;
                    width: 100%;

                    .ui-li-left {
                        width: 50%;
                        height: 40px;
                        display: flex;
                    }

                    .ui-li-right {
                        width: 50%;
                        height: 40px;
                        display: flex;
                    }

                    .ui-info-left {
                        width: 40%;
                        height: 40px;
                        line-height: 40px;
                        font-size: 15px;
                        color: rgb(0, 0, 0);
                        text-align: center;
                    }

                    .ui-info-right {
                        font-size: 15px;
                        height: 40px;
                        width: 60%;
                        line-height: 40px;
                        color: rgb(52, 194, 250);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }



                    .ui-info-rights {
                        font-size: 15px;
                        height: 40px;
                        width: 50%;
                        line-height: 40px;
                        color: rgb(52, 194, 250);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }


                }

                .ui-ul-info {
                    width: 100%;
                    height: 40px;
                    display: flex;

                    .ui-info-left {
                        width: 20%;
                        height: 40px;
                        font-size: 15px;
                        line-height: 40px;
                        color: rgb(0, 0, 0);
                        text-align: center;
                    }

                    .ui-info-right {
                        height: 40px;
                        width: 30%;
                        line-height: 40px;
                        color: rgb(52, 194, 250);
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }


                }
            }
        }

        .user-btn {
            position: absolute;
            top: 220px;
            left: 510px;
        }

        .to-user-detail {
            margin-top: 50px;

            span {
                height: 30px;
                line-height: 30px;
                color: rgb(21, 138, 247);
                border-bottom: 1px solid rgb(21, 138, 247);
                cursor: pointer;
            }
        }
    }

    .ui-right {
        width: 33%;

        .relevanInformation {
            padding: 0;
            overflow: hidden;

            .informationTitle {
                border-bottom: 1px solid #2C558A;
                padding: 0 0 10px 0;
                font-weight: 600;
                font-size: 20px;
                opacity: 0.9;
            }

            .informationTitleAfter {
                position: relative;
            }
        }

        .user-out {
            margin-top: 10px;
            height: 235px;
            overflow: hidden;
            width: 100%;

            .list-infos {
                height: 45px;
                line-height: 45px;
                padding: 0 20px;
                margin-bottom: 5px;
                border-bottom: 1px solid rgb(219, 216, 216);
                cursor: pointer;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}

// li::before {
//     content: "";
//     display: inline-block;
//     width: 5px;
//     height: 5px;
//     line-height: 5px;
//     background-color: skyblue;
//     border-radius: 50%;
//     margin-right: 5px;
// }
.user-list-info {
    display: flex;
    height: 40px;
    line-height: 40px;
    margin-bottom: 5px;
    padding: 0 5px;

    .user-list-pic {
        width: 120px;

        i {
            font-style: normal;
            display: inline-block;
            transform: translateY(-14px);
        }

        .user-list-pic-info {
            width: 20px;
            height: 20px;
            padding: 10px 5px;
        }
    }

    .user-info-d {
        width: 240px;
        height: 40px;
        line-height: 40px;
        // background-color: red;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


}
</style>