dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMyActivityParticipation.vue

<template>
    <div class="container-box">
        <div class="filter-box">
            <el-radio-group v-model="auditStatusDict" id="radioGroup">
                <el-radio-button label="">{{$i18n.locale=='en'? 'All': '全部'}}({{listTotal}})</el-radio-button>
                <el-radio-button label="0">{{$i18n.locale=='en'? 'In the activity':'活动中'}}({{numMap.inActivity}})</el-radio-button>
                <el-radio-button label="1">{{$i18n.locale=='en'? 'Finished': '已结束'}}({{numMap.close}})</el-radio-button>
            </el-radio-group>
        </div>
        <div v-show="listData.length!=0&&listData.length!=undefined">
            <div style="min-height: 20px;">
                <div v-for="(item,index) in listData"
                     style="width: 430px;height: 260px;"
                     :style="{float:index%2==0?'left':'right',marginTop:index!=0&&index!=1?'20px':'0'}"
                     id="list">
                <!--<div v-for="(item,index) in listData"
                     style="width: 430px;height: 281px;"
                     :style="{float:index%2==0?'left':'right',marginTop:index!=0&&index!=1?'20px':'0'}"
                     id="list">-->
                    <div style="width: 100%;height: 146px;position: relative">
                        <img v-if="item.activityLogo" :src="'api/file/pub/'+ item.activityLogo" alt="" style="width: 100%;height: 100%;">
                        <img v-else :src="'api/file/pub/'+'/def/def1.png'" alt="" style="width: 100%;height: 100%;">
                        <span style="position: absolute;top: 0;right: 0;width: 82px;height: 25px;display: inline-block;background-color: #ff9933;color: white;text-align: center;line-height: 25px;">
                            {{item.activityStatusDict==3?$t("common.Finished"):item.activityStatusDict==2?$t("common.Inaction"):$t("common.SigningUp")}}
                        </span>
                    </div>
                    <div style="width: 100%;height: calc(100% - 146px);border: 1px solid #f2f2f2;box-sizing: border-box;padding-left: 8px;">
                        <p style="margin: 7px 0 0 0;font-size: 16px;font-weight: 600;height: 42px;" class="twoLine">{{item.activityName}}</p>
                        <p style="margin: 7px 0 0 0;font-size: 12px;">
                            <span>{{item.activityCity}}</span>
                            <!--报名时间-->
                            <!--<span style="margin-left: 50px;">{{item.registrationTime}}</span>-->
                            <!--活动时间-->
                            <span style="margin-left: 50px;">{{item.activityStartTime}}--{{item.activityEndTime}}</span>
                        </p>
                        <p style="margin: 7px 0 0 0;font-size: 12px;">
                            <span style="display: inline-block;width: 100%;" class="oneLine" :title="item.activityIntroduce">{{item.activityIntroduce}}</span>
                        </p>
                        <!--<p style="margin: 7px 0 0 0;font-size: 12px;color: #1990fe;text-align: left;">
                            <span style="background-color: #f0f9eb;color: #67c23a;border: 1px solid #e1f3d8;" class="hoverShow">{{$t('common.look')}}</span>
                            <span style="background-color: #f4f4f5;color: #909399;border: 1px solid #e9e9eb;" class="hoverShow">{{$t('common.edit')}}</span>
                        </p>-->
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div style="width: 100%;text-align: center;">
                <el-pagination
                        style="margin-top: 20px"
                        layout="prev, pager, next"
                        @current-change="currentChange"
                        :total="totalNum">
                </el-pagination>
            </div>
        </div>
        <ul style="margin:30px;width: 90%;" v-show="listData.length==0||listData.length==undefined">
            <img v-if="this.$i18n.locale.toUpperCase()=='ZH'" src="@/assets/img/noData.png" alt=""
                 style="width: 100%;height: 100%;">
            <img v-if="this.$i18n.locale.toUpperCase()=='EN'" src="@/assets/img/noDataEn.png" alt=""
                 style="width: 100%;height: 100%;">
        </ul>
    </div>
</template>
<script>
    import Base from "@/views/base/Base";
    import { getDicts } from "@/api/dict";
    import { formatDate } from "@/utils/formatUtils";
    import { getMyActivityByIdForWeb } from "@/api/meeting/meetingApply";

    export default {
        name: 'userCenterMyActivityParticipation',
        extends: Base,
        data() {
            return {
                language:'',
                userId: JSON.parse(localStorage.getItem('user')).userId,
                // 检索
                auditStatusDict:'',
                // 分页
                cureentPage: 1,
                totalNum: 0,
                // 数据
                listData:[],
                numMap:[],
            }
        },
        mounted() {
            const that = this;
            this.$nextTick(function () {
                that.getActivity();
            })
        },
        watch:{
            "$i18n.locale"() {
                this.numMap = [];
                this.cureentPage = 1;
                this.$nextTick(function () {
                    this.getActivity();
                })
            },
            'auditStatusDict'(val,oldVal){
                this.getActivity();
            },
        },
        // 计数总数
        computed: {
            'listTotal'(){
                let num = (this.numMap.close-0)+(this.numMap.inActivity-0);
                if( (typeof num) === 'number' && window.isNaN(num)){
                    num = 0
                }
                return num
            }
        },
        methods: {
            // 获取数据
            getActivity(){
                const that = this;
                let params = {
                    // pageNo:this.cureentPage,
                    // pageSize:10,
                    language:that.$i18n.locale.toUpperCase(),
                    id:that.userId,
                    type:that.auditStatusDict,
                    // type:null,
                };
                getMyActivityByIdForWeb(params).then(res => {
                    if (res.data) {
                        if (res.data.activityInfos) {
                            that.listData = res.data.activityInfos;
                            that.listData.forEach((i)=>{
                                // i.activityIntroductionUe = i.activityIntroductionUe.replace(/<[^>]+>/ig, '')
                                i.activityStartTime = i.activityStartTime ? formatDate(i.activityStartTime, "YYYY-MM-DD") : "";
                                i.activityEndTime = i.activityEndTime ? formatDate(i.activityEndTime, "YYYY-MM-DD") : "";
                            })
                            /*if(that.auditStatusDict == ''){

                            }*/
                            that.totalNum = Number(res.data.count);
                            if(that.numMap.length==0){
                                if (res.data.numMap) {
                                    that.numMap = res.data.numMap
                                }else{
                                    that.numMap = {
                                        inActivity: "0",
                                        close: "0",
                                    }
                                }
                            }
                        }else{
                            that.listData = []
                        }
                    } else {
                        that.listData = []
                    }
                })
            },
            // 分页
            currentChange(p) {
                this.cureentPage = p;
                this.getActivity();
            },
            toView(router,json){
                this.$router.push({name:router,params:json})
            },
        }
    }
</script>
<style scoped>
    .oneLine{
        /* 隐藏溢出元素 */
        overflow: hidden;
        /* 单行显示 */
        white-space: nowrap;
        /* 溢出显示省略号 */
        text-overflow: ellipsis;
    }
    .twoLine{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .container-box {
        padding: 20px;
    }
    .filter-box {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
    }
    /deep/ #radioGroup .el-radio-button__inner{
        border: none;
    }
    /deep/ #radioGroup .el-radio-button.is-active .el-radio-button__inner{
        background-color: white;
        color: #ff3b00;
        box-shadow: none;
    }
    .hoverShow{
        margin-right: 25px;
        cursor: pointer;
        display: inline-block;
        padding: 2px 10px;
    }
</style>