jyz/pages/rescuers/rescuers.vue

<template>
	<view class="container">
		<image src="https://sos.liuniu946.com/static/img/img010.png"></image>
		<view class="label-item">
			<view class="content-box">
				<view class="tip"><image src="/static/img/img012.png"></image></view>
				<view class="number">参与人数{{total}}人</view>
				<view class="list flex_item">
					<view class="list-item" v-if="list.length > 0"  v-for="ls in list">
						<view class="portrait"><image :src="ls.avatar"></image></view>
						<view class="name clamp">{{ls.helper_name}}</view>
					</view>
					<view class="noDate" v-if="list.length == 0">暂无数据</view>
				</view>
			</view>
			<view class="content-box" v-if="userInfo.helper == 0">
				<view class="tip"><image src="/static/img/img012.png"></image></view>
				<view class="number">报名参与</view>
				<view class="list">
					<view class="list-input flex_item">
						<view class="lable">姓名：</view>
						<view><input class="input-box" type="text" v-model="name" placeholder="请输入您的姓名" /></view>
					</view>
					<view class="list-input flex_item">
						<view class="lable">手机：</view>
						<view><input class="input-box" type="number" v-model="phone" placeholder="请填写您的联系方式" /></view>
					</view>
					<view class="list-input flex_item" @click="getLocation">
						<view class="lable">地址：</view>
						<view class="address">{{addressDate}}</view>
					</view>
					<view class="list-input flex_item" @click="ToKey">
						<view class="lable">机构：</view>
						<view class="flex seach-box">
							<input class="input-box" type="text" v-model="mechanism" placeholder='请输入机构关键字'/>
						</view>
					</view>
					<view class="list-input">
						<view class="lable">证件：</view>
						<view class="icon">
							<image class="image" v-show="img1" :src="image" @click="scImg"></image>
							<image class="image1" v-show="img2" :src="image2" @click="scImg" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="btn" v-if="userInfo.helper == 0"><view class="submit" @click="BeHelper">马上报名</view></view>
			<view class="text-box" v-if="userInfo.helper == 1">您已经是一名救援者了！</view>
		</view>
	</view>
</template>
<script>
	import { mapState,mapMutations } from 'vuex';
	import { upload,toBeHelper,hospitalList,getAllHelper } from '@/api/record.js';
	import  pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import LbPicker from '@/components/lb-picker/index.vue'
	// #ifdef MP
	import { openMap } from '@/utils/rocessor.js';
	// #endif
	import { getUserInfo } from '@/api/login.js';
	export default {
		components: {
			pickerAddress,
			LbPicker
		},
		data() {
			return {
				userInfo:'',
				addressDate:'请选择定位地址',//选择定位地址
				total:'',
				img1:true,//图片1显示
				img2:false,//图片2显示
				list:'',//报名列表
				name:'',//姓名
				phone:'',//联系方式
				// addr:'',//省市区
				keyword:'',//机构关键字
				mechanism:'',//机构
				hospital_id:"",//机构id
				image:'/static/img/img013.png',//资格证
				image2:'',
				region:'',
				meList: [],//机构列表
				commonly_lat:'',//经度
				commonly_lng:'',//维度
			
			};
		},
		onLoad(option) {
			if(option.mechanism == '' || option.mechanism == undefined){
				this.mechanism = '';
			}else{
				this.mechanism = option.mechanism;
			}
			if(option.hospital_id == '' || option.hospital_id == undefined){
				this.hospital_id = '';
			}else{
				this.hospital_id = option.hospital_id;
				console.log(this.hospital_id)
			}
		},
		onShow() {
			this.GetUser();
			this.loadData();
			// addressDate:'请选择定位地址',//选择定位地址
			// name:'',//姓名
			// phone:'',//联系方式
			// image2:'',
			// commonly_lat:'',//经度
			// commonly_lng:'',//维度
			if(uni.getStorageSync('name')){
				this.name = uni.getStorageSync('name')
			}
			if(uni.getStorageSync('addressDate')){
				this.addressDate = uni.getStorageSync('addressDate')
			}
			if(uni.getStorageSync('phone')){
				this.phone = uni.getStorageSync('phone')
			}
			if(uni.getStorageSync('image2')){
				this.img1 = false;
				this.img2 = true;
				this.image2 = uni.getStorageSync('image2')

			}
			if(uni.getStorageSync('commonly_lat')){
				this.commonly_lat = uni.getStorageSync('commonly_lat')
			}
			if(uni.getStorageSync('commonly_lng')){
				this.commonly_lng = uni.getStorageSync('commonly_lng')
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.loadData();
			this.GetUser();
		},
		watch:{
			meList(newValue, oldValue) {
				if(newValue != oldValue){
					this.mechanism = ''
				}
			},
			name(newValue, oldValue){
				if(newValue != oldValue){
					uni.setStorageSync('name', this.name);
				}
			},
			phone(newValue, oldValue){
				if(newValue != oldValue){
					uni.setStorageSync('phone', this.phone);
					console.log(uni.getStorageSync('phone'))
				}
			},
			addressDate(newValue, oldValue){
				if(newValue != oldValue){
					uni.setStorageSync('addressDate', this.addressDate);
					console.log(uni.getStorageSync('addressDate'))
				}
			},
			commonly_lat(newValue, oldValue){
				if(newValue != oldValue){
					uni.setStorageSync('commonly_lat', this.commonly_lat);
					console.log(uni.getStorageSync('commonly_lat'))
				}
			},
			commonly_lng(newValue, oldValue){
				if(newValue != oldValue){
					uni.setStorageSync('commonly_lng', this.commonly_lng);
					console.log(uni.getStorageSync('commonly_lng'))
				}
			},
			image2(newValue, oldValue){
				if(newValue != oldValue){
					uni.setStorageSync('image2', this.image2);
					console.log(uni.getStorageSync('image2'))
					
				}
			},
		},
		methods: {
			...mapMutations(['setUserInfo']),
			GetUser(){
				let obj = this;
				getUserInfo({}).then(({ data }) => {
					obj.userInfo = data.user;
					console.log(obj.userInfo)
					obj.setUserInfo(obj.userInfo);
				}).catch((e) => {0
					console.log(e)
				});
			},
			ToKey(){
				let obj = this;
				uni.navigateTo({
					url:'/pages/rescuers/ToKey?mechanism='+this.mechanism
				})
			},
			// 请求载入数据
			loadData(){
				let obj = this;
				getAllHelper({}).then(({ data }) => {
					obj.total = data.total;
					obj.list = data.list
					uni.stopPullDownRefresh();
					// console.log(this.list)
				})
			},
			// 获取当前位置
			getLocation() {
				const obj = this;
				// #ifdef MP
				openMap().then(() => {
					uni.getLocation({
						type: 'gcj02',
						success(e) {
							uni.chooseLocation({
								latitude: e.latitude,
								longitude: e.longitude,
								success(e) {
									console.log(e)
									obj.commonly_lat = e.latitude;
									obj.commonly_lng = e.longitude;
									obj.addressDate = e.address;
								}
							});
						}
					});
				}).catch((e) => {
					uni.showModal({
						title: '提示',
						content: '您未授权无法调用地图定位功能！',
						showCancel: false,
					});
				})
				// #endif
			},
			//当键盘输入时，触发input事件
			onchance(e){
				this.keyword = e.detail.value;
				this.ListDate();
				this.handleTap('picker1');
			},
			//显示弹窗
			handleTap(name) {
				this.$refs[name].show();
			},
			//加载机构列表
			ListDate(){
				let obj = this;
				hospitalList({
					keyword:obj.keyword
				}).then(e => {
					obj.meList = e.data
				}).catch((e) => {
					console.log(e)
				});
			},
			handleChange (item) {
			},
			handleCancel (item) {
				
			},
			handleConfirm (item) {
				let obj = this;
				if(item != null){
					obj.keyword = item.item.name;
					obj.mechanism = item.item.name;
					obj.hospital_id = item.item.id;
				}else{
					obj.mechanism = '';
					obj.keyword = '';
				}
			},
			// // 选中城市切换
			// onCityClick({data}) {
			// 	this.region = data;
			// 	this.addr = this.region.map(item=>item.name).join('/');
			// 	this.code = this.region.map(item=>item.code).join('/');
			// 	this.ListDate();
			// },
			scImg() {
				let obj = this;
				upload({
					file: ''
				}).then(e => {
					obj.img1 = false;
					obj.img2 = true;
					obj.image2 = 'https://sos.liuniu946.com/'+e[0].url;
				}).catch((e) => {
					uni.showModal({
						title:'错误',
						content:e.message,
					})
				});
			},
			BeHelper(){
				let obj = this;
				if(!obj.name){
					obj.$api.msg('请填写姓名');
					return;
				}
				if(!obj.phone){
					obj.$api.msg('请填写联系方式');
					return;
				}
				if(obj.addressDate == '请选择地址'){
					obj.$api.msg('请选择地址');
					return;
				}
				console.log(obj.hospital_id)
				if(!obj.hospital_id){
					obj.$api.msg('请选择机构');
					return;
				}
				if(!obj.image2){
					obj.$api.msg('请上传资格证');
					return;
				}
				toBeHelper({
					// reason:'我自愿成为一名光荣的救援者！',
					// area_id:obj.code,
					name: obj.name,
					mobile:obj.phone,
					commonly_lat:obj.commonly_lat,
					commonly_lng:obj.commonly_lng,
					// area:obj.addr,//省市区
					commonly_address:obj.addressDate,				
					hospital_id:obj.hospital_id,//机构
					credentials:obj.image2//资格证书
				}).then(e => {
					uni.showToast({
						title: e.msg,
						type: 'top',
						duration: 3000,
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/user/user'
						})
					}, 3000);
				}).catch((e) => {
					uni.showToast({
						title: e.message,
						type: 'top',
						duration: 3000,
						icon: 'none'
					})
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/user/user'
						})
					}, 3000);
					console.log(e)
				});
			},
		}
	};
</script>

<style lang="scss">
page{
	width: 100%;
	background-color: #ffabab;
	height: 100%;
	.container{
		width: 100%;
		background-color: #ffabab;
		image{
			width: 100%;
			height: 927rpx;
		}
		.label-item{
			margin-top: -220rpx;
			margin-bottom: 80rpx;
			height: 100%;
		}
	}
}
.btn{
	width: 90%;
	margin: 25rpx auto;
	padding: 50rpx 0rpx;
}
.text-box{
	text-align: center;
	color: #FFFFFF;
	padding-top: 50rpx;
	padding-bottom: 100rpx;
}
.submit{
	border-radius: 50rpx;
	background:linear-gradient(0deg,rgba(231,57,50,1) 0%,rgba(254,78,78,1) 100%);
	text-align: center;
	padding: 30rpx 0rpx;
	color: #FFFFFF;
}
.content-box{
	position: relative;
	margin-bottom: 25rpx;
	.tip{
		width: 100%;
		height: 66rpx;
		text-align: center;
		z-index: 999;
		position: relative;
		top: 35rpx;
		image{
			width: 433rpx;
			height: 100%;
			z-index: 999;
		}
	}
	.number{
		position: absolute;
		color: #FFFFFF;
		top: 15rpx;
		text-align: center;
		width: 100%;
		z-index: 9999;
		padding-top: 25rpx;
	}
	.list{
		padding: 50rpx 40rpx;
		padding-right: 0rpx !important;
		padding-top: 80rpx;
		width: 92%;
		margin: 0rpx auto;
		min-height: 200rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx;
		display: flex;
		flex-wrap: wrap;
		.noDate{
			width: 100%;
			text-align: center;
			font-size: 24rpx;
		}
		.list-item{
			width: 110rpx;
			text-align: center;
			color: #000000;
			font-size: 18rpx;
			margin-right: 20rpx;
			margin-top: 25rpx;
			.portrait{
				width: 110rpx;
				height: 110rpx;
				border-radius: 100%;
				image{
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			.name{
				margin-top: 10rpx;
				width: 110rpx;
				font-size: 17rpx;
			}
		}
	}
	
}
.seach-box{
	width: 82%;
}
.seach{
	width: 50rpx;
	height: 50rpx;
	.seach-icon{
		width: 50rpx;
		height: 50rpx;
	}
}
.address{
	font-size: 24rpx !important;
	color: #FF9797 !important;
	width: 80%;
}
.list-input{
	border: 2rpx solid #E73932;
	border-radius: 50rpx;
	padding: 25rpx 40rpx;
	margin-bottom: 35rpx;
	width: 92%;
	.lable{
		color: #E73932;
		font-size: 31rpx;
	}
	.input{
		color: #FF9797 !important;
		font-size: 24rpx !important;
	}
	.icon{
		margin: 25rpx auto;
		min-height: 140rpx;
		text-align: center;
		.image{
			width: 114rpx;
			height: 114rpx;
		}
		.image1{
			min-width: 114rpx;
			min-height: 114rpx;
		}
	}
}
 .input-placeholder{
		color: #FF9797 !important;
		font-size: 28rpx;
	}
	.input-box{
		color: #FF9797 !important;
		font-size: 28rpx !important;
		width: 85%;
	}
</style>