xiangqin/pages/profile/reportList.vue

<template>
	<view>
		<view class="item" v-for="(item,index) in list" :key="index">
			<view class="top u-flex u-row-between">
				<view class="left">
					<image :src="item.headimg" mode=""></image>({{item.nickname}})
				</view>
				<image src="../../static/profile/sheneh@2x.png" mode="" v-if="item.status==1"></image>
				<image src="../../static/profile/tongguo@2x.png" mode="" v-if="item.status==2"></image>
				<image src="../../static/profile/bohui@2x.png" mode="" v-if="item.status==3"></image>
			</view>
			<view class="bottom u-flex u-row-between">
				<view class="reason">
					举报理由：{{item.title}}
				</view>
				<view class="button u-flex u-row-right">
					<view class="" style="margin-right: 10rpx;">
						<u-button shape='circle' size="small" text="查看详情" @click="lookInfo(item)"></u-button>
					</view>
					<u-button shape='circle' v-if="item.status==1" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%);" size="small" text="取消举报" @click="canclejubao(item)"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
				this.getList()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		data() {
			return {
				page:1,
				list:[]
			}
		},
		methods: {
			canclejubao(item){
				uni.$u.http.post('/api/user/cancel_report',{rid:item.id}).then(res => {
					if(res.code==1){
						this.$u.toast(res.msg)
						this.page=1
						this.getList()
					}
				})
			},
			lookInfo(item){
				uni.navigateTo({
					url:'./reportInfo?id='+item.id
				})
			},
			getList(){
					uni.$u.http.post('/api/user/my_report',{page:this.page}).then(res => {
						if(this.page==1){
							this.list=res.data.data
						}else{
							this.list=[...this.activityList,...res.data.data]
						}
					})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F3F3F3;
		padding-top: 20rpx;
	}
	.bottom{
		padding: 20rpx 0;
		.reason{
			font-size: 24rpx;
			font-weight: 600;
		}
		
	}
	.top{
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #F5F4F5;
		image{
			width: 96rpx;
			height: 36rpx;
		}
	}
.item{
	font-size: 20rpx;
	color: #222222;
	margin: 0 auto 20rpx;
	padding: 20rpx;
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 28rpx;
	.left{
		image{
			vertical-align: middle;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			margin-right: 12rpx;
		}
	}
}
</style>