yicangzongtai_app_240321/pages/government/myMsg.vue

<template>
	<view>
		<navbar :config="config" backColor="#666666">
			<template v-slot:right>
				<image  class="clear" @click="clearNews" src="/static/czd/clear.png" mode=""></image>
				<image @click="goNewsSet" class="setting" src="/static/czd/set1.png" mode=""></image>
			</template>
		</navbar>
		<view class="garyBox"></view>
		<view class="box">
			<view class="item" v-for="(v,i) in list" :key="i" @click="goNewDetails(v)">
				<image v-if="v.typeMsg=='应用消息'" class="yy" src="/static/czd/yy.png" mode=""></image>
				<view class="xt" v-if="v.typeMsg=='系统消息'">
					<u-icon name="setting" size="56" color="#fff"></u-icon>
				</view>
				<view class="item_r">
					<view class="item_r_t" :class="v.unread?'dian':''">
						<view class="item_r_t_title">{{v.typeMsg}}</view>
						<view class="item_r_t_date">{{v.createTime}}</view>
					</view>
					<view class="item_r_b">{{v.title}}</view>
				</view>
			</view>
			<view class="item" @click="goShopNews()">
				<image class="sc" src="/static/czd/sc.png" mode=""></image>
				<view class="item_r"  :class="shopNews.unread?'dian':''">
					<view class="item_r_t">
						<view class="item_r_t_title">商城消息</view>
						<view class="item_r_t_date"></view>
					</view>
					<!-- <view class="item_r_b">暂无消息</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '我的消息',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					// backgroundColor: [0, '#2cba28'],
					rightSlot: true,
				},
				list:[],
				messageConfig:false,
				shopNews:{}
			}
		},
		onLoad(options) {
			if(options.messageConfig){
				this.messageConfig=options.messageConfig
			}
		},
		onShow() {
			this.getList();
			this.getShopNewsNum()
		},
		methods:{
			// 获取我的类型分组
			getList(){
				this.$yghttp.get('/message/myTypeGroup').then(res=>{
					this.list=res.data
				})
			},
			goNewDetails(item){
				uni.navigateTo({
					url:'/pages/government/newDetails?type='+item.type
				})
			},
			goNewsSet(){
				uni.navigateTo({
					url:'/pages/government/newsSet'
				})
			},
			goShopNews(){
				uni.navigateTo({
					url:'/pages/research/setup/myMsg'
				})
			},
			// 获取商城消息未读信息
			getShopNewsNum(){
				this.$http.get('/private/message/myTypeGroup').then(res=>{
					this.shopNews=res.data
				})
			},
			// 全部已读
			clearNews(){
				uni.showLoading({
					title: '',
					mask: true
				});
				this.$yghttp.post('/message/allRead').then(res=>{
					this.getList()
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F8F8F8;
	}
</style>
<style lang="scss">
  /deep/ .hx_text_overflow {
    font-weight: bold;
  }
	.garyBox {
		width: 100%;
		height: 20rpx;
		background: rgb(239, 239, 239);
	}

	.box {
		background: #fff;
		padding:0 30rpx;
		.item{
			display: flex;
			padding: 30rpx 0;
			border-bottom: 1rpx solid rgb(239, 239, 239);
			position: relative;
			// image{
			// 	width: 80rpx;
			// 	height: 80rpx;
			// 	border-radius: 40rpx;
			// }
			&:before{
				content: "";
				display: block;
				width: 120rpx;
				height: 10rpx;
				background: #fff;
				position: absolute;
				bottom: -5rpx;
				left: 0;
			}
			.yy{
				width: 100rpx;
				height: 100rpx;
			}
			.sc{
				width: 100rpx;
				height: 110rpx;
			}
			.xt{
				width: 100rpx;
				height: 100rpx;
				background: rgb(62,192,211);
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.item_r{
					flex: 1;
					margin-left: 20rpx;
				.item_r_t{
					display: flex;
					justify-content: space-between;
					margin-top: 6rpx;
					.item_r_t_title{
						font-size: 32rpx;
						font-weight: 700;
					}
					.item_r_t_date{
						font-size: 28rpx;
						color: rgb(142,142,142);
					}
					
				}
				.item_r_b{
					color: rgb(142,142,142);
					margin-top: 6rpx;
				}
			}
		}
	}
	.dian{
		position: relative;
		&::before{
			content: "";
			display: block;
			width: 15rpx;
			height: 15rpx;
			border-radius: 50%;
			background: rgb(240,74,62);
			position: absolute;
			top: -10rpx;
			right: -10rpx;
		}
	}
	.setting{
		width: 44rpx;
		height: 42rpx;
		margin-right: 20rpx;
	}
	.clear{
		width: 24rpx;
		height: 32rpx;
		position: relative;
		left: -200rpx;
	}
</style>