<template>
	<view class="page" :style="themeColor">
		<view class="flex align-stretch benben-position-layout flex myNews_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex align-center justify-between flex-sub myNews_fd0_0'>
				<view class='flex align-center myNews_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  myNews_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex align-center'>
					<text class='myNews_fd0_0_c1_c0'>消息</text>
				</view>
				<view class='flex align-center myNews_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout myNews_flex_1">
			<view class='flex flex-wrap align-stretch myNews_fd1_0' @tap.stop="newTap(item.msg_type)" v-for="(item,index) in lists" :key="item.msg_type">
				<view class='flex flex-wrap align-center myNews_fd1_0_c0'>
					<image class='myNews_fd1_0_c0_c0' mode="aspectFit" :src='item.msg_type==4 ? STATIC_URL+"161.png" : STATIC_URL+"162.png"'></image>
					<benben-message-num class='myNews_fd1_0_c0_c1' size='20' color='#fff' background-color='red' :messageNum="item.num">
					</benben-message-num>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch justify-between flex-sub'>
					<view class='flex flex-wrap align-center myNews_fd1_0_c1_c0'>
						<text class='flex-sub myNews_fd1_0_c1_c0_c0'>{{item.name}}</text>
						<text class='myNews_fd1_0_c1_c0_c1' v-if="item.new_msg && item.new_msg.length">{{item.new_msg[0].create_time}}</text>
					</view>
					<text class='myNews_fd1_0_c1_c1' v-if="item.new_msg && item.new_msg.length">{{item.new_msg[0].title}}</text>
				</view>
			</view>
			<!-- <view class='flex flex-wrap align-stretch myNews_fd1_1' @tap.stop="handleJumpDiy" data-type="navigateTo"
				:data-url="`/pages/xx]/orderMessages/orderMessages`">
				<view class='flex flex-wrap align-center myNews_fd1_1_c0'>
					<image class='myNews_fd1_1_c0_c0' mode="aspectFit" :src='STATIC_URL+"6.png"'></image>
					<benben-message-num class='myNews_fd1_1_c0_c1' size='20' color='#fff' background-color='red'>
					</benben-message-num>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch justify-between flex-sub'>
					<view class='flex flex-wrap align-center myNews_fd1_1_c1_c0'>
						<text class='flex-sub myNews_fd1_1_c1_c0_c0'>订单通知</text>
						<text class='myNews_fd1_1_c1_c0_c1'>2020-07-10</text>
					</view>
					<text class='myNews_fd1_1_c1_c1'>您的202007211804237856订单已送达，您可前往…</text>
				</view>
			</view> -->



			<view class='flex flex-wrap align-stretch myNews_fd1_2' v-for="(item,index) in listsLiao" :key="index" @tap.stop="liaoTap(item)">
				<view class='flex flex-wrap align-center myNews_fd1_2_c0'>
					<image class='myNews_fd1_2_c0_c0' mode="aspectFill" :src='item.avatar'></image>
					<benben-message-num :messageNum="item.noread" class='myNews_fd1_2_c0_c1' size='24' color='#fff' background-color='red'>
					</benben-message-num>
				</view>
				<view class='flex flex-direction flex-wrap align-stretch justify-between flex-sub'>
					<view class='flex flex-wrap align-center myNews_fd1_2_c1_c0'>
						<text class='flex-sub myNews_fd1_2_c1_c0_c0'>{{item.nickname}}</text>
						<text class='myNews_fd1_2_c1_c0_c1'>{{item.create_time}}</text>
					</view>
					<!-- <text class='myNews_fd1_2_c1_c1'>在吗？</text> -->

					<text class='myNews_fd1_2_c1_c1' v-if="item.nei.type!=1 && item.nei.type!=6" v-html="item.nei.text"></text>
					<text class='myNews_fd1_2_c1_c1' v-if="item.nei.type==1">图片</text>
					<text class='myNews_fd1_2_c1_c1' v-if="item.nei.type==6">{{item.nei.title}}</text>


				</view>
			</view>
		</view>




	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				lists:[],
				listsLiao:[]
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {

		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.get6437c0cb9d5b4()
			this.post5f6010f4df24a()
		},

		methods: {
			get6437c0cb9d5b4(){
				this.$api.post(global.apiUrls.get6437c0cb9d5b4).then(res=>{
					if(res.data.code==1){
						this.lists = res.data.data
					}
				})
			},
			post5f6010f4df24a(){
				this.$api.post(global.apiUrls.post5f6010f4df24a).then(res=>{
					if(res.data.code==1){
						this.listsLiao = res.data.data
						this.listsLiao.forEach(item=>{
							item.nei = JSON.parse(item.content)
						})
					}
				})
			},
			liaoTap(item){
				uni.navigateTo({
					url:'/pages/my/xiaoxi/chatRoom?name=' + item.nickname + '&id=' + item.to_user_id
				})
			},
			newTap(type){
				if(type==4){
					uni.navigateTo({
						url:"/pages/my/platformAnnouncement/platformAnnouncement"
					})
				}else{
					uni.navigateTo({
						url:"/pages/my/orderTails/orderTails"
					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto !important;
	}

	.myNews_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.myNews_fd0_0_c2 {
		width: 180rpx;
	}

	.myNews_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.myNews_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.myNews_fd0_0_c0 {
		width: 180rpx;
	}

	.myNews_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.myNews_flex_1 {
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		background-size: 100% auto !important;
	}

	.myNews_fd1_2_c1_c1 {
		line-height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_2_c1_c0_c1 {
		line-height: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.myNews_fd1_2_c1_c0_c0 {
		line-height: 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_2_c1_c0 {
		margin: 0rpx 0rpx 12rpx 0rpx;
	}

	.myNews_fd1_2_c0_c1 {
		position: absolute;
		top: -6rpx;
		right: 0rpx;
	}

	.myNews_fd1_2_c0_c0 {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}

	.myNews_fd1_2_c0 {
		margin: 0rpx 32rpx 0rpx 0rpx;
		position: relative;
	}

	.myNews_fd1_2 {
		border-bottom: 1px solid #eee;
		padding: 40rpx 0rpx 40rpx 0rpx;
	}

	.myNews_fd1_1_c1_c1 {
		line-height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_1_c1_c0_c1 {
		line-height: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.myNews_fd1_1_c1_c0_c0 {
		line-height: 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_1_c1_c0 {
		margin: 0rpx 0rpx 12rpx 0rpx;
	}

	.myNews_fd1_1_c0_c1 {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.myNews_fd1_1_c0_c0 {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}

	.myNews_fd1_1_c0 {
		margin: 0rpx 32rpx 0rpx 0rpx;
		position: relative;
	}

	.myNews_fd1_1 {
		border-bottom: 1px solid #eee;
		padding: 40rpx 0rpx 40rpx 0rpx;
	}

	.myNews_fd1_0_c1_c1 {
		line-height: 33rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_0_c1_c0_c1 {
		line-height: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.myNews_fd1_0_c1_c0_c0 {
		line-height: 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.myNews_fd1_0_c1_c0 {
		margin: 0rpx 0rpx 12rpx 0rpx;
	}

	.myNews_fd1_0_c0_c1 {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}

	.myNews_fd1_0_c0_c0 {
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
	}

	.myNews_fd1_0_c0 {
		margin: 0rpx 32rpx 0rpx 0rpx;
		position: relative;
	}

	.myNews_fd1_0 {
		border-bottom: 1px solid #eee;
		padding: 40rpx 0rpx 40rpx 0rpx;
	}
</style>
