hxj/src/pages/sale/news/news.vue

<template>
	<view class="page">
		<view class="box" v-for="(item,index) in dataList" :key="index">
			<view class="main-between cross-center header">
				<!-- <view class="cross-center head t-omit" :class="{'border_bottom':true}">
					<image src="https://t17.9026.com/web/statics/image/sale/1.png" mode=""></image>
					周先生
				</view> -->
				<view class="cross-center head1">
					<image src="../../../static/image/index/msg.png" mode=""></image>
					客户楼盘绑定通知
				</view>
				<view class="main-between cross-center" @click="del_msg(item.id,index)">
					<!-- <view class="date">2021-11-17</view> -->
					<image class="del" src="https://t17.9026.com/web/statics/image/user-center/del.png" mode=""></image>
				</view>
			</view>
			<view class="center">
				<!-- <view class="main-between cross-center">
					<view class="title">整体评价</view>
					<view class="isopen cross-center">
						展开
						<image src="https://t17.9026.com/web/statics/image/user-center/arrow-bottom.png" mode=""></image>
					</view>
				</view> -->
				<view class="center-text">{{item.message}}</view>
				<!-- 客户xxxx向您发起了楼盘xxxx的认证通知，请前往我的-我的客户查看并处理 -->
				<!-- <view class="center-img">
					<image v-for="(item, index) in 5" :key="index" src="https://t17.9026.com/web/statics/image/user-center/1.png" mode=""></image>
				</view>
				<view class="main-between goods">
					<view class="main-left desc">
						<image class="goods-img" src="https://t17.9026.com/web/statics/image/user-center/1.png" mode=""></image>
						<view>
							<view class="title">兴城人居ins居家占位套餐</view>
							<view class="price">
								<text class="company">￥</text>
								2466.00
							</view>
						</view>
					</view>
					<view class="isopen cross-center">
						收起
						<image src="https://t17.9026.com/web/statics/image/user-center/arrow-top.png" mode=""></image>
					</view>
				</view> -->
			</view>
			<view class="main-between footer cross-center border_top">
				<view class="left">查看详情</view>
				<image style="width: 12rpx;height: 22rpx;" src="https://t17.9026.com/web/statics/image/index/arrow-right-gray.png"
					mode="" ></image>
			</view>
		</view>
		<view class="no-more" v-if="noMore && dataList.length>0">没有更多了...</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				dataList:[],
				noMore:false
			};
		},
		onLoad() {
			this.getMessageList()
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.getMessageList()
			}
		},
		methods:{
			getMessageList(){
				this.$request({
					url:this.$api.sale.message_list,
					data:{
						page:this.page
					},
					method:'post'
				}).then(res=>{
					if(res.code===0){
						if(this.page===1){
							this.dataList=res.data.list
						}else{
							this.dataList=this.dataList(res.data.list)
						}
						if(res.data.list.length<20){
							this.noMore=true
						}
					}
					
				})
			},
			del_msg(id,index){
				uni.showModal({
				    title: '提示',
				    content: '确定删除该条消息吗',
				    success:(qq)=> {
				        if (qq.confirm) {
				            this.$request({
				            	url:this.$api.sale.message_delete,
				            	data:{
				            		message_id:id
				            	},
				            	method:'post'
				            }).then(res=>{
				            	if(res.code===0){
									this.dataList.splice(index,1)
								}
				            })
				        } else if (qq.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding-top: 22rpx;
		background: #f6f6f6;
	}

	.box {
		width: 678rpx;
		height: auto;
		background: #ffffff;
		border-radius: 6rpx;
		padding: 26rpx 31rpx;
		margin: 0 auto 20rpx;

		.border_bottom {
			border-bottom: 1px solid #eaeaea;
		}

		.border_top {
			border-top: 1px solid #eaeaea;
		}

		.header {
			padding-bottom: 21rpx;

			.head {
				max-width: 500rpx;
				height: 48rpx;
				background: #f6f6f6;
				border-radius: 24rpx;
				padding: 0 17rpx;
overflow: hidden;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}

				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}

			.head1 {
				max-width: 500rpx;
				height: 48rpx;
overflow: hidden;
				image {
					width: 45rpx;
					height: 45rpx;
					margin-right: 14rpx;
					border-radius: 50%;
				}

				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}

			.date {
				font-size: 22rpx;
				font-weight: 500;
				color: #222222;
				margin-right: 30rpx;
			}

			.del {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.center {
			padding: 0 0 10rpx;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #222222;
			}

			.isopen {
				font-size: 24rpx;
				font-weight: bold;
				color: #a18353;

				image {
					width: 19rpx;
					height: 12rpx;
					margin-left: 8rpx;
				}
			}

			.center-text {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #999999;
				line-height: 34rpx;
			}

			.center-img {
				margin-top: 28rpx;

				image {
					width: 146rpx;
					height: 96rpx;
					border-radius: 12rpx;
					margin-right: 15rpx;
				}
			}

			.goods {
				padding-top: 42rpx;
				border-top: 1rpx solid #EAEAEA;

				.desc {
					width: 511rpx;
					height: 141rpx;
					background: #F8F8F8;
					border-radius: 6rpx;
					padding: 18rpx 24rpx;

					.goods-img {
						width: 101rpx;
						height: 99rpx;
						border-radius: 8rpx;
						margin-right: 21rpx;
					}

					.title {
						font-size: 26rpx;
						font-weight: 500;
						color: #222222;
						line-height: 46rpx;
					}

					.price {
						font-size: 24rpx;
						font-weight: 500;
						color: #FC3737;
						line-height: 36rpx;

						.company {}
					}
				}

			}
		}

		.footer {
			padding: 28rpx 0 0;

			.left {
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.no-more {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 37rpx;
		text-align: center;
	}
</style>