lanan-old/rescue-user/pages/message/message.vue

<template>
	<view class="content">
		<view class="head-top">
			<view class=""></view>
			<view class="">消息</view>
			<view class=""></view>

		</view>
		<view class="mubu">
			<view class="jsy" v-if="listArr.length == 0">
				<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
			</view>
			<!-- <view class="" @click="dianyidain()">测试方法</view> -->
			<view class="bao-box" v-for="(item,index) in listArr" :key="index">
				<view class="icon-lv">
					<view class="hongdi" v-if="item.isRead == '0' "></view>
					<image src="../../static/jiejin.png" mode=""></image>
				</view>
				<view class="you">
					<view class="box-top">
						<text class="numone">{{item.title || ''}}</text>
						<text class="numthree">{{item.createTime.slice(0, -3) || ''}}</text>
					</view>
					<view class="numtwo">{{item.content || ''}}</view>
				</view>
			</view>
		</view>

		<view style="width: 100%; height: 50px;"></view>
		<tabBar :msg="msg"></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '../../components/tabBar/tabBar.vue'
	const innerAudioContext = uni.createInnerAudioContext();
	export default {

		data() {
			return {
				msg: '2',
				value2: 1,
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				listArr: []
			}
		},
		onShow() {
			this.driverRescuePage()
			this.getlooklook()
		},
		onReachBottom() {
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})

			} else {
				this.pageNum++
				this.driverRescuePage()
			}
		},
		components: {
			tabBar,
		},
		methods: {
			dianyidain() {
				console.log('执行了');

				innerAudioContext.src =
					'https://mp-8344f740-3cda-4d89-b902-7235115ddaaf.cdn.bspapp.com/8080/LOL页面确认声_耳聆网_[声音ID：36839].mp3';
				innerAudioContext.play()


			},
			driverRescuePage() {
				let data = {

					pageSize: this.pageSize,
					pageNum: this.pageNum
				}
				request({
					url: '/announcement/announcement/getOwnMsg',
					method: 'get',
					params: data
				}).then((res) => {
					if (res.code == 200) {
						if (this.pageNum != 1) {
							this.listArr = this.listArr.concat(res.rows)
						} else {
							this.listArr = res.rows
						}

						let total = res.total
						this.totalPages = Math.ceil(total / this.pageSize);
					}
				})
			},
			async getlooklook() {
				let res = await request({
					url: '/announcement/announcement/setAllRead',
					method: 'get',
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding-top: 40px;
	}

	.head-top {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.mubu {
		width: 100%;
		background-color: #F6F6F6;
		box-sizing: border-box;
		padding: 10px;
	}

	.bao-box {
		width: 100%;
		background: white;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.icon-lv {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #CBF0D0;
		box-sizing: border-box;
		padding: 10px;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.hongdi {
		position: absolute;
		right: 2px;
		top: 2px;
		width: 6px;
		height: 6px;
		background: #FF3829;
		border-radius: 50%;
	}

	.ddx {
		display: flex;
		align-items: center;
	}

	.you {
		width: 80%;
	}

	.box-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.numone {
		font-size: 14px;
		font-family: Microsoft YaHei;
		font-weight: 400;
	}

	.numtwo {
		font-size: 16px;
		color: #666666;
		margin-top: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.numthree {
		font-size: 14px;
		font-weight: 400;
		color: #999999;
	}

	.jsy {
		width: 95%;
		margin: 10px auto;
	}
</style>