123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- <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>
|