hhred/pages/applic/rescuerecords.vue

<template>
	<view class="container">
		<view class="list" v-for="(item,index) in list" :key='index'>
		<view class="box">
			<view class="box-top">
				求救者姓名：{{item.name}}
			</view>
			<view class="box-time">
				求救时间：{{item.add_time}}
			</view>
			<view class="box-sub-box" v-if="item.status==0">
				<view class="sub-box1" @click="agree(item,index)">
					接受
				</view>
				<view class="sub-box2" @click="refuse(item,index)">
					拒绝
				</view>
			</view>
			<view class="box-sub-box" v-if="item.status !==0">
				<view class="red-font" v-if="item.status == 1">
					已接受
				</view>
				<view class="red-font" v-if="item.status == 2">
					已拒绝
				</view>
			</view>
		</view>
			</view>
			<empty v-if="list.length === 0"></empty>
			<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import { getrescue ,change_rescue} from '@/api/index.js';
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default{
		components: {
			empty,
			uniLoadMore
		},
		data(){
			return{
				page:1,
				limit:10,
				list:[],
				loadingType: 'more',
			}
		},
		onLoad() {
			this.loadData();
		},
		// 下拉加载
		onReachBottom() {
			this.loadData();
		},
		methods:{
			//同意
			agree(item,index){
			let obj = this;	
			uni.showModal({
				content: '是否要接受该求救？',
				success: res => {
					if (res.confirm) {
					change_rescue({
						id:item.id,
						status:1
					}).then((data)=>{
						obj.list[index].status = 1;
						console.log(obj.list[index].status);
					})
					
						
					
					}
				}
			});
			},
			//拒绝
			refuse(item,index){
				let obj = this;
				uni.showModal({
					content: '是否要拒绝该求救？',
					success: res => {
						if (res.confirm) {
						change_rescue({
							id:item.id,
							status:2
						}).then((data)=>{
							obj.list[index].status = 2;
							console.log(item);
						})
						
							
						
						}
					}
				});
			},
			async loadData() {
				let obj = this;
				if (obj.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				// 修改当前对象状态为加载中
				obj.loadingType = 'loading';
				getrescue({
					page: obj.page,
					limit: obj.limit
				}).then(({ data }) => {
					obj.list = obj.list.concat(data);
					obj.page++;
					if (obj.limit == data.length) {
						obj.loadingType = 'more';
					} else {
						obj.loadingType = 'noMore';
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		line-height: 1;
		
		.box{
			width: 710rpx;
			background: #FFFFFF;
			box-shadow: 0px 5rpx 5rpx 0px rgba(34, 24, 20, 0.06);
			border-radius: 10rpx;
			margin: 20rpx auto 0;
			padding: 30rpx;
			.box-top{
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
			.box-time{
				margin-top: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}
			.box-sub-box{
				margin-top: 44rpx;
				display: flex;
				justify-content: space-between;
				padding:0 80rpx;
				.red-font{
					font-size: 28rpx;
					font-weight: 500;
					color: #C90F1B;
				}
				.sub-box1{
					width: 175rpx;
					height: 59rpx;
					background: #C90F1B;
					border-radius: 29rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.sub-box2{
					width: 175rpx;
					height: 59rpx;
                    background: #F3F3F3;
					border-radius: 29rpx;
					font-size: 28rpx;
					font-weight: 500;
                    color: #333333;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		
	}
</style>