jyz/pages/record/details.vue

<template>
	<view class="container">
		<view class="content-box"><!-- @click="openAddress(item)" -->
			<view class="item">
				<view class="info flex_item">
					<view>头像：</view>
					<image :src="caller_info.avatar"></image>
				</view>
				<view class="info" v-if="list.status == 0 || list.status == 2">救援者姓名：救援者{{list.caller_info.helper}}</view>
				<view class="info" v-if="list.status == 1 || list.status == 3">救援者姓名：{{list.caller_info.nickname}}</view>
				<view class="info" v-if="list.status == 1 || list.status == 3">手机号：{{caller_info.mobile}}</view>
				<!-- <view class="info">求救信息：{{list.help_info}}</view> -->
				<view class="info">创建时间：{{list.createtime}}</view>
				<view class="info">状态：{{list.status_text}}</view>
			</view>
			<view class="box-btn flex" v-if="list.status == 0">
				<view class="accept" @click.stop="access(list)">接受</view>
				<view class="refuse" @click.stop="refuse(list)">拒绝</view>
			</view>
			<view class="box-btn flex" v-if="list.status == 1">
				<view class="accept" @click="success()">完成救援</view>
				<view class="refuse blue" @click="openAddress()">前往导航</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { sosInfo,accessSos,refuseSos,successSos } from '@/api/record.js';
	import { getTime } from '@/utils/rocessor.js';
	export default {
		data() {
			return {
				list:'',
				id:'',
				caller_info:''
			};
		},
		onLoad(option) {
			this.id = option.id;
		},
		onShow() {
			this.loadData();
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			loadData(){
				let obj = this;
				sosInfo({
					id:obj.id,
				}).then(({ data }) => {
						obj.list = data;
						obj.caller_info = data.caller_info;
						console.log(obj.caller_info)
						obj.list.createtime = getTime(data.createtime)
					})
					.catch(e => {
						console.log(e);
					});
			},
			openAddress(){
				let obj = this;
				uni.openLocation({
					latitude:+obj.list.lat,
					longitude:+obj.list.lng,
					success(e){
						console.log(e)
					},
					fail(e) {
						console.log(e);
					}
				})
			},
			//救援完成
			success(){
				let obj = this;
				successSos({
					id: obj.id
					}).then(( data ) => {
						console.log(data)
						obj.$api.msg(data.msg);
						obj.loadData();
					}).catch((e) => {
						obj.$api.msg(e.message);
						console.log(e)
				});
			},
			//同意救援
			access(){
				let obj = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定要接受求救吗',
				    success: function (res) {
				        if (res.confirm) {
							accessSos({
								id: obj.id
							}).then((data) => {
								obj.$api.msg(data.msg);
								obj.loadData();
							}).catch((e) => {
								obj.$api.msg(e.message);
									console.log(e)
								});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			//拒绝救援
			refuse(){
				let obj = this;
				uni.showModal({
				    title: '提示',
				    content: '您确定要拒绝求救吗?',
				    success: function (res) {
				        if (res.confirm) {
							refuseSos({
								id:  obj.id
							}).then((data) => {
								obj.loadData();
							}).catch((e) => {
									obj.$api.msg(e.message);
								});
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background: #ffffff;
		height: 100%;
		.container{
			width: 100%;
			height: 100%;
			padding-top: 25rpx;
		}
	}
	.content-box {
		width: 100%;
		padding: 47rpx 30rpx;
		font-size: 28rpx;
		color: #666666;
	}
	.item{
		margin-bottom: 100rpx;
	}
	.info {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
		padding: 28rpx 0rpx;
		border-bottom: 2rpx solid #F0F0F0;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}
	}
	.status {
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(255, 79, 79, 1);
	}
	.box-btn{
		width: 80%;
		margin: 0rpx auto;
		.accept{
			background: #FF4F4F;
			border-radius: 50rpx;
			color: #FFFFFF;
			padding: 20rpx 70rpx;
			}
		.refuse{
			text-align: center;
			background: #F3F3F3;
			border-radius: 50rpx;
			padding: 20rpx 70rpx;
		}
		.blue{
			background: #6786FB;
			color: #FFFFFF;
		}
	}
</style>