IHG/pages/msg/msg.vue

<template>

	<view class="msg">
		<MyNav title="消息" bgColor="" :backIcon="false"></MyNav>
		<!-- <!自定义导航栏
		 <u-navbar title='消息' fixed safeAreaInsetTop :placeholder='true' :bgColor="bgColor" >
		 </u-navbar> -->
		<!-- 搜索框 -->
		<view class="search">
			<u-input placeholder="搜索" border='none' v-model="search"  @input="searchText">
				<template slot="suffix" style='margin-right:40rpx;'>
					<u-image :showLoading="true" :showError='true' src="/static/icon/search.png" width="40rpx"
						height="32rpx"></u-image>
				</template>
			</u-input>
		</view>
		
		<view class="msg-null" v-if="messageList.length == 0">
			<image src="https://t9.9026.com/imgs/dataNull.png" style="width: 394rpx;height: 396rpx;" mode=""></image>
			<view class="msg-null-text">
				<text>暂无数据</text>
			</view>
		</view>
		
		<!-- 消息列表 -->
		<view class="msgListBox"  v-if="messageList.length > 0">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" v-for="(item,index) in messageList" :key="index" @change="change()"> 
					<template v-slot:right>
						<view style="display: flex;align-items: center;justify-content: center;" @click="deleteImg(item.id)">
							<image src="/static/icon/delete.png" style="width: 36rpx; height: 40rpx; margin-right: 20rpx; "></image>
							<text class="slot-button-text" style="color: red;">删除</text>
						</view>
					</template>
					<view class="childBox" @click="jumpPage(item.type,item.relation_id)">
						<view class="childBox-top">{{item.title}}</view>
						<view class="childBox-content">
							<text>{{item.content}}</text>
							<image v-if="!isOpenMsg" style="width: 12rpx;height: 20rpx;" src="/static/icon/right.png"></image>
						</view>
						<view class="childBox-bom">{{item.created_at}}</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>

		<!-- 触底 -->
		<view class="home-bottom"  v-if="messageList.length > 0">
			<uni-load-more :status="status" color="#CCCCCC" :content-text="contentText" />
		</view>

		<!-- 底部导航栏 -->
		<view style="height: 140rpx; width: 100%;"></view>
		<tab-bar checked="msg"></tab-bar>

	</view>
</template>

<script>
	import util from '@/utils/util.js'
	import TabBar from '../../components/TabBar/tabbar.vue'
	import MyNav from "@/components/my-nav/my-nav.vue"
	export default {
		components: {
			TabBar,
			MyNav
		},
		data() {
			return {
				//是否展示信息图标
				isOpenMsg:false,
				//自定义导航栏
				bgColor: '#fff',
				//搜索文字
				search:'',
				//删除按钮
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				//消息列表
				messageList: '',
				status: 'noMore',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '——  已经到底啦  ——'
				},
			};
		},
		onLoad() {
			//获取消息列表
			this.getMessageList()
		},
		methods: {
			
			//打开或关闭是触发
			change(){
				this.isOpenMsg = !this.isOpenMsg
				
			},
			
			
			//删除消息
			deleteImg(id){
				this.$api.my.delMessage({
					message_id:id
				}).then(res=>{
					if(res.code == 0 ){
						console.log(res.data);
						this.getMessageList()
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg
						})
					}
					
				})
			},
			
			
			//跳转消息详情页面
			jumpPage(type,id){
				if(type>2){
					uni.navigateTo({
						url:'/pages/my/prize/prize'
					})
				}else{
					uni.navigateTo({
						url:'/pages/index/active-detail/index?id='+id
					})
				}
			},
			
			// 搜索防抖
			searchText:util.debounce(function(){
				if(this.search !=''){
					this.goSearch()
				}else{
					this.getMessageList()
				}
			},500),
			//搜索
			goSearch(){
				uni.showLoading({
					title:'加载中'
				})
				this.$api.my.messageList({
					page: 0,
					keyword:this.search,
				}).then(res=>{
					if(res.code==0){
						uni.hideLoading()
						this.messageList = res.data.data
					}
				})
			},
			//获取消息列表
			getMessageList() {
				this.$api.my.messageList({
					page: 0
				}).then(res => {
					this.messageList = res.data.data
					console.log(this.messageList, '------>this.messageList');
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	// flex布局居中对齐
	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.msg {
		height: 100%;
		background-color: $pageColor;
	}

	.home-bottom {
		background-color: #f9f9f9;
		padding-top: 120rpx;
	}
	
	.msg-null{
		margin-top: 162rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.msg-null-text{
			margin-top: 40rpx;
			font-size: 28rpx;
			color: #333;
		}
	}

	// 搜索
	.search {
		// position: fixed;
		// top: 0;
		// width: 100%;
		padding: 0 30rpx;
		height: 124rpx;
		background-color: $bgColor;
		box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.04);
		@include flexlayout;

		::v-deep .u-input {
			width: 690rpx !important;
			height: 68rpx !important;
			background: #F1F1F1;
			border-radius: 74rpx;
		}

		::v-deep .u-input__content__field-wrapper {
			padding-left: 36rpx;
		}

		::v-deep .u-input__content__field-wrapper__field {
			color: #999999 !important;
			font-size: 28rpx !important;
		}
	}

	// 消息列表
	.msgListBox {
		padding: 48rpx 30rpx;
		padding-top: 0;
		margin-top: 24rpx;
		background: #f9f9f9;
		box-shadow: 0rpx 4rpx 24rpx -10rpx rgba(101, 95, 90, 0.3);
		border-radius: 12rpx;
		.childBox {
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			border-bottom: 2rpx solid rgba(240, 240, 240, .7);
		
			&:last-child {
				padding-bottom: 0;
				border-bottom: none;
			}
		
			&:first-child {
				padding-top: 48rpx;
			}
		
			.childBox-top {
				font-weight: bold;
				color: #333333;
				font-size: 32rpx;
			}
		
			.childBox-content {
				padding-right: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #333333;
				font-size: 28rpx;
				margin: 24rpx 0 12rpx;
			}
		
			.childBox-bom {
				color: #999999;
				font-size: 26rpx;
			}
		}
	}

	::v-deep .uni-swipe_text--center {
		padding-bottom: 40rpx;
		border-bottom: 2rpx solid rgba(240, 240, 240, 0.7);
		&:last-child {
			padding-bottom: 0;
			border-bottom: none;
		}		
	}
</style>