dev/dcp-app-gate/pages/message/pageO.vue

<template>
  <view class="page">
	  <view class="menus" :class="{en:this.$i18n.locale=='en'||this.$i18n.locale=='EN'}">
		<u-tabs :list="BotMenuList" :current="Botcurrent" @change="changeMenu" :bold="false" bar-width="120" bar-height="2"></u-tabs>
	  </view>
	  <view class="osMsg">
		<view class="msgitem" v-for="(msgitem,msgidx) in dataList" :key = "msgidx">
			<uni-swipe-action style="width: 100%;">
				<uni-swipe-action-item :right-options="options" @click="deleteMsg(msgidx,msgitem)" >
					<view class="itemwrap"  @click = "goDetail(msgitem)">
						<view class="msgtitle">
							<view class="titletext">
								<text class="tag" v-if="msgitem.params!='read' && !msgitem.readStatus"></text>
								<text class="tag" v-if="msgitem.readStatus!='read' && !msgitem.params"></text>
								<text class="title">{{msgitem.title}}</text>
							</view>
							<view class="date">{{formatDate(msgitem.createDate)}}</view>
						</view>
						<view class="content">{{msgitem.content}}</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
	</view>
	<!-- 页面优化提示 -->
	<view class="loading" v-if="showLoading">
		<u-loadmore :status="status" iconType="flower" :load-text="{loading: $t('common.Loading')}"/>
	</view>
	<view class="nodata" v-if="!showLoading && dataList.length==0" style="text-align: center;margin-top: 120upx;">
		<view style="height:600upx;margin-bottom:60upx">
			<image src="../../static/img/public/7.png" style="width: 80%;margin:0 10%" mode="widthFix"></image>
		</view>
		<text style="font-size: 30upx;color:#ccc">{{$t('common.Nodata')}}</text>
	</view>
	<u-toast ref="uToast" />
  </view>
</template>

<script>
  import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
  export default {
    components: {
	  uniSwipeAction
    },
    data() {
      return {
		token:'',
		userId:'',
		pageSize:50,
		pageNo:1,
		msgType:'',
        dataList: [],
		Botcurrent:0,
		showLoading:true,
		status:'loading',
		BotMenuList: [
			{
				id: "tab01",
				name: this.$t('common.All'),
				msgid: 0
			},
			{
				id: "tab02",
				// name: '活动消息',
				name:this.$t('common.ActiveMessage'),
				msgid: 23
			},
			{
				id: "tab03",
				// name: '服务消息',
				name:this.$t('common.ServiceMessage'),
				msgid: 223
			}, {
				id: "tab04",
				// name: '审核消息',
				name:this.$t('common.ReviewMessage'),
				msgid: 221
			}
		],
		options:[
			{
				text:this.$t('common.Delete'),
				style: {
					fontSize:'12px',
					height:'30px',
					backgroundColor:'#f2a059',
					height:'60px'
				}
			}
		],
      }
    },
	onLoad(e){
		
	},
	created(){
		this.loadData()
	},
	onShow(){
		this.loadingText = this.$i18n.locale=='en'?'Loading ...':'加载中...';
		this.token=uni.getStorageSync('Auth-Token')?'Bearer '+uni.getStorageSync('Auth-Token'):'';
		this.userId  = uni.getStorageSync('user')? JSON.parse(uni.getStorageSync('user')).id:'';
	},
	onReachBottom(){
		this.loadMore()
	},
    methods: {
		changeMenu(index){
			this.dataList = [];
			this.Botcurrent=index;
			this.msgType = index === 0?'':index === 1?'dict_msg_fw':index === 2?'dict_msg_hd':index === 3?'dict_msg_sh':''
			this.loadData()
		},
	  //加载数据
      async loadData(loadmore) {
		let patams={
			msgType:this.msgType,
			keyWord:'',
			pageSize:this.pageSize,
			currentPage:this.pageNo,
			readStatus:''
		}
		let res = await this.$myRequest({
			url:'/uc/sysPushMessages/selectMsgInfo/',
			header:{token:this.token},
			data:patams
		})
		if(res.status==200){
			let data =res.data
			if(data.page){
				if(data.page.list && Array.isArray(data.page.list) && data.page.list.length>0){
					if (!loadmore) {
					  this.dataList =data.page.list;
					} else {
					  this.dataList = this.dataList.concat(data.page.list);
					}
				}else{
					this.isNoData = true;
				}
			}
		}else{
			this.isNoData = true;
		}
		this.showLoading=false;
      }, 
	  
      loadMore() {
		this.pageNo++;
         this.loadData('loadmore');
      },
	  
	  // 删除数据
	  async deleteMsg(index,item){
		let res = await this.$myRequest({
			url:'uc/sysPushMessages/deleteMsg',
			data:{arr:item.id}
		})
		if(res==true){
			this.$refs.uToast.show({
				title:this.$i18n.locale=='en'?'Delete Success ...':'删除成功',
				type:'success',
			})
			if(this.dataList.length>0){
				this.dataList.splice(index,1)
			}
		}else{
			this.$refs.uToast.show({
				title: this.$i18n.locale=='en'?'Delete Fail ...':'删除失败',
				type: 'error',
			})
		}
	  },
	  
      goDetail(item) {
		 uni.setStorageSync('MsgDetail',item)
		 uni.navigateTo({
			url:'/pages/message/msgDetail?msgId='+item.id+'&msgType=0'
		 })
      },
    }
  }
</script>

<style scoped lang="scss">
.menus{
	margin:0 auto;
	display:flex;
	height:80upx;
	background-color:red;
	/deep/ .u-scroll-box{
		display:flex !important;
		width:750upx;
		justify-content: space-between !important;
		.u-tab-item{
			text-align:center;
			padding:0 !important;
			font-size:26upx !important;
		}
	}
	&.en{
		/deep/ .u-scroll-box{
			flex-direction:row;
			width:750upx !important;
		}
	}
}
  .msgitem{
	  margin:20upx;
	  padding:20upx 0;
	  border-bottom:1px solid #eee;
	  .itemwrap{
		  width:100%;
		  .msgtitle{
			  display:flex;
			  flex:1;
			  justify-content:space-between;
			  width:100%;
			  .titletext{
				  flex:1;
				  .title{
					  font-size:28upx;
					  color:#333;
				  }
				  .tag{
					  width:0;
					  height:0;
					  padding:8upx;
					  border-radius:50%;
					  background:#C50606;
					  margin-right:8upx;
				  }
			  }
			  .date{
				  color:#aaa;
				  margin-right:20upx;
			  } 
		  }
		  .content{
			  margin-top:10upx;
			  line-height:50upx;
			  color:#999;
		  }
	  }
  }
 
</style>