ltred/pages/applic/helprecords.vue

<template>
	<view class="container">
		<uni-swipe-action>
			<uni-swipe-action-item :right-options="options" @click="bindClick" @change="swipeChange($event, item.id)" v-for="(item, index) in list">
				<view class="list">
					<view class="list-left">
						<view class="list-top">救援者姓名：{{ item.to_name }}</view>
						<view class="list-phone">手机号：{{ item.to_phone }}</view>
						<view class="list-time">救援时间：{{ item.add_time }}</view>
						<view class="list-box">
							<view class="list-type" v-if="item.status == 1">已接受</view>
							<view class="list-type" v-if="item.status == 0">未接受</view>
							<view class="list-type" v-if="item.status == 2">已拒绝</view>
						</view>
						<view class="phone-box">
							<view class="box-item" @click="tocall(item.to_phone)">
								<image src="../../static/icon/call.png" mode="" class="call"></image>
								拨打电话
							</view>
							
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- <view class="list" v-for="(item,index) in list" :key='index'>
		</view> -->
		<uni-popup ref="popup1" type="center">
			<view class="popup-box">
				<view class="img"><image src="../../static/img/map.jpg" mode=""></image></view>
				<view class="mian">
					<view class="delivery">
						求救记录
						<!-- {{ i18n.qrhwsdm }} -->
					</view>
					<view class="nocancel">
						确认删除该记录吗？
						<!-- {{ i18n.wfcx }} -->
					</view>
					<view class="comfirm-box">
						<view class="cancel" @click="cancel">取消</view>
						<view class="comfirm" @click="comfirm(tmp)">确认</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<empty v-if="list.length === 0"></empty>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import { deleteList, getseek } from '@/api/index.js';
import empty from '@/components/empty';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue';
export default {
	components: {
		empty,
		uniLoadMore,
		uniSwipeAction,
		uniSwipeActionItem
	},
	data() {
		return {
			id: '',
			options: [
				{
					text: '取消',
					style: {
						backgroundColor: '#007aff'
					}
				},
				{
					text: '确认',
					style: {
						backgroundColor: '#C90F1B'
					}
				}
			],
			page: 1,
			limit: 10,
			delBtnWidth: 60, //删除按钮宽度单位（rpx）
			startX: '',
			isDel: false,
			list: [],
			loadingType: 'more'
		};
	},
	onLoad() {
		this.loadData();
	},
	// 下拉加载
	onReachBottom() {
		this.loadData();
	},
	methods: {
		bindClick(e) {
			// console.log(333,e)
			// console.log('e.index',e.index)
			// console.log('this.tmp',this.tmp)
			// console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
			if (e.content.text == '取消') {
				console.log('点击了左侧取消按钮');
			} else {
				console.log('点击了右侧确认按钮');
				// this.$refs.popup1.open(this.tmp);
				this.open(this.id);
			}
		},
		swipeChange(e, id) {
			// 	// console.log('当前状态：' + open + '，下标：' + index)
			// console.log('index',index)
			this.id = id;
			console.log('id111111111', id);
			// 	if ( e == 'right' ) {
			// 		this.index = index
			// 		console.log('当前index值：',this.index)
			// 	}
			// 	// console.log(222,e)
		},
		// 确认删除吗？
		comfirm(id) {
			console.log(9999888, id);
			deleteList({
				id: this.id
			}).then(({ data }) => {
				window.location.reload(); //重新刷新页面
				this.loadData();
				this.cancel();
			});
		},
		// 取消
		cancel() {
			this.$refs.popup1.close();
		},
		// 打开弹窗
		open(tmp) {
			console.log('打开弹窗', tmp);
			this.$refs.popup1.open(tmp);
		},
		tocall(num) {
			console.log(num);
			uni.makePhoneCall({
				phoneNumber: num //仅为示例
			});
		},
		// touchS: function(e) {
		// 	// console.log('touchS')
		// 	if (e.touches.length == 1) {
		// 		//设置触摸起始点水平方向位置
		// 		this.startX = e.touches[0].clientX
		// 		console.log(this.startX)
		// 		this.isDel = true
		// 	}
		// },
		// // 删除
		// deleteMember() {
		// 	console.log('删除')
		// 	uni.showModal({
		// 		title:'点击删除'
		// 	})
		// },
		// cancelDel() {
		// 	console.log('取消删除')
		// 	this.isDel = false
		// },
		async loadData() {
			let obj = this;
			if (obj.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			obj.loadingType = 'loading';
			getseek({
				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;
	background: #f8f6f6;
}
.list {
		width: 710rpx;
		background: #ffffff;
		box-shadow: 0px 5rpx 5rpx 0px rgba(35, 24, 21, 0.06);
		border-radius: 10rpx;
		margin: 20rpx auto 0;
		display: flex;
		justify-content: space-between;
		.list-left {
			width: 100%;
			padding: 47rpx 0 24rpx 28rpx;
		}
		.cancel {
			background-color: #c9101b;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			color: #ffffff;
		}

		.list-top {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.list-phone {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			margin-top: 20rpx;
		}

		.list-time {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			margin-top: 20rpx;
		}

		.list-type {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #f3392c;
			margin-top: 20rpx;
		}

		.phone-box {
			display: flex;
			justify-content: space-between;
			// justify-content: center;
			margin-top: 20rpx;
			padding: 0 42rpx;

			.box-item {
				width: 210rpx;
				height: 65rpx;
				background: #f3392c;
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;

				.call {
					width: 28rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
				.spcall {
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	.popup-box {
		width: 522rpx;
		height: 605rpx;
		background-color: #ffffff;
		border-radius: 20rpx;

		.img {
			border-radius: 20rpx 20rpx 0 0;
			width: 522rpx;
			height: 307rpx;

			image {
				border-radius: 20rpx 20rpx 0 0;
				width: 522rpx;
				height: 307rpx;
			}
		}

		.mian {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;

			.delivery {
				font-size: 36rpx;
				color: #333333;
				// margin-top: 46rpx;
			}

			.nocancel {
				font-size: 30rpx;
				color: #999999;
				margin-top: 26rpx;
			}

			.comfirm-box {
				margin-top: 52rpx;
				display: flex;
				// margin-bottom: 32rpx;

				// justify-content: space-around;
				.cancel {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 61rpx;
					border: 1px solid #c90f1b;
					border-radius: 31rpx;

					font-size: 24rpx;
					color: #c90f1b;
				}

				.comfirm {
					margin-left: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 197rpx;
					height: 61rpx;
					background: #c90f1b;
					border-radius: 31px;
					font-size: 24rpx;
					color: #ffffff;
				}
			}
		}
	}
</style>