assess-app/page_subpack/message/message.vue

<template>
	<view class="total-page page-env-20 page-box scroll_content">
		<Nav :title="'消息'" :genre="1" :fixedHeight="50"></Nav>
		<view class="task-tabs" :style="{top:`${$tools.topHeight()}px`}">
			<z-tabs ref="tabs" :list="tabsList" :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'30rpx'}"
				:bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
				:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
		</view>
		<EnScroll ref="scroll" class="main" @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
			<view class="m-t20" v-if="list.length <=0">
				<Enblank :message="'暂无消息'" >
				</Enblank>
			</view>
			<view class="m-lr20 page-env-160">
				<view class="row-c page-box-bg-fff m-t20 r-30 p-30 box-shadow-197" @click.stop="goToInfo(index)" v-for="(item,index) in list"
					:key="index">
					<image class="wh-80" :src="getLeftImg(item.type)" mode=""></image>
					<view class="flex m-l20">
						<view class="row-justify-sb center flex">
							<text class="text-color-333 sys-weight-400 size-30"> {{item.title}}</text>
							<image class="wh-30 m-l16" style="margin-top: 4rpx;" src="/static/img/task/task-phone.png"
								mode=""></image>
						</view>
						<view class="row-justify-sb center m-t10">
							<text class="size-26 text-color-666"> {{item.content}}</text>
							<text class="size-24 text-color-999">{{item.created_date}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="placeholder sys-list-background-color" style="height: 60rpx;" v-if="is_bottom"></view> -->
		</EnScroll>

	</view>
</template>
<script>
	// 任务列表
	import TaskItem from "@/common/task/task-item.vue";
  import {getNotices, setRead} from "@/api/news";
  import tools from "@/service/tools";

	export default {
		components: {
			TaskItem
		},
		data() {
			return {
				current: 0,
				tabsList: [{
					name: '全部(0)',
					// 可以禁用某个item
					is_dot: false,
					dot_color: 'red',
					disabled: false
				}, {
					name: '未读(0)',
					// 可以禁用某个item
					is_dot: true,
					dot_color: 'red',
					disabled: false
				}, {
					name: '已读',
					// 可以禁用某个item
					is_dot: false,
					dot_color: '',
					disabled: false
				}],
				leftImg: ['task-house', 'task-house','task-business', 'task-repayment'],
				iconList: ['task-audit', 'task-do', 'task-stay'],
        list:[],
        page:1,
        isEnd:false,
			}
		},
		watch: {


		},
    mounted() {
      this.startNotices();
    },
		methods: {
      goToInfo(index) {

        let item=this.list[index];
        if(item.type===1){
          this.list[index].is_read=1;
          //跳转详情
          uni.navigateTo({
            url: 'pages/notice/module/notice-info?id='+item.id
          });
        }else {
          this.setRead(index);
          //调用已读
          if(item.type===2){
            if(item.relevance_id<=0){
              tools.error('任务信息异常')
              return false;
            }
            //任务详情
            uni.navigateTo({
              url: '/page_task/task_details/task_details?id='+item.relevance_id
            });
          }else {
            //领取列表
            uni.navigateTo({
              url: '/page_task/gain_task/gain_task'
            });
          }
        }

      },
      setRead(index){
        setRead({'id':this.list[index].id}).then((res)=>{
          if(res.code===1){
            this.list[index].is_read=1;
          }
        })
      },
      startNotices(){
        this.list=[];
        this.page=1;
        this.isEnd=false;
        this.getNotices();
      },
      getNotices(){
        if(this.isEnd){
          return ;
        }
        getNotices({'page':this.page,'type':this.current}).then((res)=>{
          if(res.code===1){
            if(res.data.items.length<=0){
              this.isEnd=true;
            }else {
              this.tabsList[0].name='全部（'+res.data.total+')'
              this.tabsList[1].name='未读（'+res.data.unreadNum+')'
              res.data.items.forEach((item)=>{
                item.is_del=false;
                this.list.push(item)
              })
              // this.list.push(...res.data)
            }
            ++this.page;
          }
        })
      },
			tabsChange(index) {
				this.current = index;
			},
			getLeftImg(index) {
        return `/static/img/task/${this.leftImg[index]}.png`
			},
			// 下拉刷新
			onRefresh() {
				uni.showLoading({
					title: '数据加载中'
				})
        this.startNotices()
				setTimeout(() => {
					// uni.showToast({
					// 	title: '加载完成',
					// 	icon: 'none'
					// })
					this.$refs.scroll.onEndPulling()
				}, 1000)
				console.log("下拉刷新");
			},
			// 滚动到底部
			onScrollBottom() {
				uni.showLoading({
					title: '数据加载中'
				})
        this.getNotices()
				setTimeout(() => {
					uni.showToast({
						title: '加载完成',
						icon: 'none'
					})
				}, 1000)
				console.log("到底部了");
			},
		},
	}
</script>
<style lang="scss" scoped>

</style>