xhlred/pages/category/category.vue

<template>
	<view class="content">
		<view class="top"><image src="../../static/img/jiuzai.png" mode="widthFix" class="bgi"></image></view>
<!-- 		<view class="top-xtitle">
			红十字
		</view>
		<view class="top-title">
			救护员招募
		</view> -->
		<view class="pop-box">公众参与</view>
		<view class="pop-list">
			<view class="list-box1" v-for="(item, index) in peoplelist" :key="index" v-if="index < 20">
				<view class="list-top"><image :src="item.avatar" mode="" class="avatar-img"></image></view>
				<view class="nickname">{{ item.name }}</view>
			</view>
		</view>
		<view class="red-box">活动报名</view>
		<!-- 	<view class="people">
			
		</view> -->
		<view class="list-box">
			<view class="list">
				<view class="list-left">姓名 <text>*</text></view>
				<input type="text" v-model="name" class="list-input" placeholder="请填写您的姓名" />
			</view>
			<view class="list">
				<view class="list-left">手机名 <text>*</text></view>
				<input type="text" v-model="phone" class="list-input" placeholder="请填写您的联系方式" />
			</view>
			<view class="list" @click="getLocation">
				<view class="list-left">地址 <text>*</text></view>
				<!-- <picker-address class="box-right" @change="onCityClick">{{ address }}</picker-address> -->
				<input type="text" v-model="showaddress" class="list-input" placeholder="请选择常用地址" />
			</view>
			<!-- <view class="list" @click="Toshow">
				<view class="list-left">机构 <text>*</text></view>
				<input type="text" v-model="mechanism" class="list-input" placeholder="请填写您的所在机构" disabled />
			</view> -->

			<view class="upload-box">
				<view class="upload-left">证件 <text>*</text></view>
				<view class="upload-right">
					<image :src="certificates" mode="" class="upload-img" @click.stop="imgsub" v-if="certificates"></image>
					<image src="../../static/images/upload.png" class="upload-img" mode="" v-if="!certificates" @click.stop="imgsub"></image>
				</view>
			</view>
			<zhilin-picker
				v-model="show"
				:title="title"
				:data="list"
				:initSelected="initSelected"
				:showSearch="true"
				@change="onChange"
				@searchInput="onSearchInput"
				@confirm="onConfirm1"
			/>
		</view>
		<view class="sub" :class="{ action: loding }" @click="!loding ? join() : ''">提交申请</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
import { mechanism } from '@/api/ask.js';
import { getNumber } from '@/api/index.js';
import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
import zhilinPicker from '@/components/zhilin-picker/zhilin-picker.vue';
import { upload, addrescuer } from '@/api/ask.js';
export default {
	components: {
		pickerAddress
	},
	data() {
		return {
			longitude4: '',
			latitude4: '',
			longitude: '',
			latitude: '',
			name: '',
			phone: '',
			mechanism: '',
			title: '选择机构',
			show: false,
			list: [],
			initSelected: [],
			searchVal: '',
			address: '',
			certificates: '',
			loding: false, //是否提交中
			showaddress: '', //显示用的地址
			count: 0,
			peoplelist: [],
			addressData: {
				name: '',
				mobile: '',
				latitude: 0, //纬度
				longitude: 0, //经度
				address: {
					province: '',
					city: '',
					district: '',
					detail: ''
				},
				area: '',
				default: false
			}
		};
	},
	onLoad() {
		let obj = this;
		console.log('开始加载事件');
		// obj.loadBaseData();
		// obj.loadData();
		try {
			let locationAddress
			// #ifdef H5
			let wxOjb = require('jweixin-module');
			locationAddress = wxOjb.getLocation;
			// #endif
			// #ifdef MP
			locationAddress = uni.getLocation;
			// #endif
			wxOjb.ready(() => {
				console.log('加载完毕注册事件');
				locationAddress({
					type: 'gcj02',
					success: function(res) {
						console.log('获取经纬度', res);
						obj.longitude = res.longitude
						obj.latitude = res.latitude
						obj.marker = [{
							latitude: obj.latitude,
							longitude: obj.longitude,
							iconPath: '/static/img/img19.png',
							width: '45',
							height: '45',
						}, ]
						obj.loadData();
					},
					fail(e) {
						console.log('失败', e);
						window.location.reload();
					}
				});
			})
		
		} catch (e) {
			console.log(e);
			let locationAddress
			// #ifdef H5
			let wxOjb = require('jweixin-module');
			locationAddress = wxOjb.getLocation;
			// #endif
			// #ifdef MP
			locationAddress = uni.getLocation;
			// #endif
			wxOjb.ready(() => {
				console.log('加载完毕注册事件');
		
				locationAddress({
					type: 'gcj02',
					success: function(res) {
						console.log('获取经纬度1', res);
						obj.longitude4 = res.longitude
						obj.latitude4 = res.latitude
						obj.loadData();
					},
					fail(e) {
						console.log('失败', e);
					}
				});
			})
		
		}
	},
	computed: {
		...mapState('user', ['hasLogin', 'userInfo']),
	},
	onShow() {
		this.loadData();
		if (this.hasLogin) {
			// this.loadBaseData();
		} else {
			saveUrl();
			uni.showModal({
				title: '登录',
				content: '您未登录，是否马上登陆?',
				success: e => {
					if (e.confirm) {
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
		}
	},
	watch: {
		searchVal() {
			this.ListDate();
		}
	},
	methods: {
		tosearch() {
			console.log(123);
			uni.navigateTo({
				url: '/pages/category/search'
			});
		},
		async loadData() {
			let obj = this;
			getNumber({}).then(({ data }) => {
				// console.log(12)
				// console.log(data)
				obj.count = data.count;
				obj.peoplelist = data.data;
			});
		},
		// 选择当前位置
		getLocation() {
			console.log('选择当前位置');
			let obj = this;
			uni.chooseLocation({
				latitude: obj.latitude4,
				longitude: obj.longitude4,
				success: function(res) {
					obj.addressData.area = res.name;
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					obj.addressData.latitude = res.latitude;
					obj.addressData.longitude = res.longitude;
					// let	dizhi = obj.addressData.latitude + ','+ obj.addressData.longitude;
					obj.showaddress = res.address;
				}
			});
		},
		// 机构
		Toshow() {
			console.log('点击选择机构');
			this.show = true;
		},
		onChange(val) {
			let obj = this;
			console.log(val, 'onChange');
			// let arr = val.split(',');
			// console.log(999,arr)
			// obj.hospital = arr[1];
			// obj.hospital_id = arr[0];
			// obj.city = arr[2];
			// obj.city_id = arr[3];
			// obj.district = arr[4];
			// obj.district_id = arr[5];
			// obj.province = arr[6];
			// obj.province_id = arr[7];
			// obj.addr = obj.province + obj.city + obj.district;
			// console.log(obj.hospital,obj.hospital_id)
			// console.log(obj.city,obj.city_id)
			// console.log(obj.district,obj.district_id)
			// console.log(obj.province,obj.province_id)
		},
		onSearchInput(val) {
			this.searchVal = val.value;
		},
		// 选择机构
		ListDate() {
			let obj = this;
			let data = '';
			console.log('obj.searchVal', obj.searchVal);
			if (!obj.searchVal) {
				console.log('!obj.searchVal');
				data = {
					keyword: '',
					// sort:'id desc',
					page: 1,
					limit: 1500
				};
			} else {
				console.log('else');
				console.log('当前input值', obj.searchVal);
				data = {
					keyword: obj.searchVal,
					// sort:'id desc',
					page: 1,
					limit: 1500
				};
			}
			mechanism(data).then(data => {
				console.log('请求成功', data);
				this.list = data.data.map(item => item);
				// this.show = true
			});
			// getHospitalList(data).then(e => {
			// 	obj.list = e.data.list;
			// }).catch((e) => {
			// 	console.log(e)
			// });
		},
		onConfirm1(e) {
			console.log('点击确认');
			// let arr = e
			this.mechanism = e.split(',')[1];
			this.list = [];
		},
		imgsub() {
			console.log('imgsub');
			upload({
				filename: ''
			}).then(data => {
				this.certificates = data[0].url;
			});
		},
		join() {
			let obj = this;
			if (obj.name == '') {
				obj.$api.msg('请输入您的姓名');
				return;
			}

			const reg = /^(\+?0?86-?)?1[\d]\d{9}$/;
			if (!reg.test(obj.phone)) {
				obj.$api.msg('请填写正确的手机号码');
				return;
			}
			if (obj.showaddress == '') {
				obj.$api.msg('请选择您的所在地区');
				return;
			}

			// if (obj.mechanism == '') {
			// 	obj.$api.msg('请输入机构关键字');
			// 	return;
			// }

			if (obj.certificates == '') {
				obj.$api.msg('请上传救护员证书或身份证');
				return;
			}
			obj.loding = true;
			addrescuer({
				name: obj.name,
				phone: obj.phone,
				address: obj.showaddress,
				latitude: obj.addressData.latitude,
				longitude: obj.addressData.longitude,
				mechanism: obj.mechanism,
				certificates: obj.certificates
			})
				.then(data => {
					obj.loding = false;

					if (data.status == 200) {
						(obj.name = ''),
							(obj.phone = ''),
							(obj.showaddress = ''),
							(obj.certificates = ''),
							(obj.mechanism = ''),
							(obj.addressData.latitude = ''),
							(obj.addressData.longitude = ''),
							uni.removeStorage({
								key: 'institution',
								success: function(res) {
									console.log('success');
								}
							});
						uni.navigateTo({
							url: '../joinSuc/joinNow'
						});
					} else if (data.status == 400) {
						obj.$api.msg(data.msg);
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss">
	page {
		// background-color: #FD3B34;
		background-image: url();
	}
.content {
	line-height: 1;
	// background-color: #FD3B34;
	.top {
		width: 750rpx;
		
		.bgi {
			display: block;
			
			width: 564rpx;
			height: 678rpx;
			margin: 53rpx auto;
			// position: relative;
			// top: -20rpx;
		}
	}
	.top-xtitle {
		font-size: 65rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 110rpx;
		text-shadow: 0px 5px 8px rgba(96, 1, 0, 0.61);
		text-align: center;
	}
	.top-title {
		font-size: 85rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FD424B;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 110rpx;
		text-shadow: 0px 5px 8px rgba(96, 1, 0, 0.61);
		text-align: center;
		padding-bottom: 69rpx;
	}

	.pop-box {
		padding-top: 31rpx;
		margin: 0 auto;
		position: relative;
		z-index: 99;
		width: 156rpx;
		height: 36rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000;
		&::before {
			content: '';
			width: 220rpx;
			height: 17rpx;
			background: rgba(254, 166, 78, 1);
			opacity: 0.26;
			position: absolute;
			bottom: -35rpx;
			left: -40rpx;
		}
	}

	.red-box {
		padding-top: 31rpx;
		margin: 0 auto ;
		position: relative;
		z-index: 99;
		width: 156rpx;
		height: 36rpx;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000;
		&::after {
			content: '';
			width: 220rpx;
			height: 17rpx;
			background:rgba(254, 166, 78, 1);
			opacity: 0.26;
			position: absolute;
			bottom: -35rpx;
			left: -40rpx;
		}
	}

	.red-box2 {
		position: relative;
		width: 405rpx;
		line-height: 66rpx;
		text-align: center;
		background: linear-gradient(0deg, #c90f1b, #f14d33);
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #ffffff;
		margin: -80rpx auto 0;
		position: relative;
		z-index: 1;
	}

	.pop-list {
		width: 686rpx;
		background: #ffffff;
		border-radius: 29rpx;
		position: relative;
		margin: -33rpx auto 78rpx;
		padding: 150rpx 0rpx 30rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		box-shadow: 0px 10rpx 20rpx 0px rgba(254, 0, 8, 0.28);
		.list-box1 {
			text-align: center;
			margin-right: 30rpx;
			margin-bottom: 30rpx;

			.list-top {
				width: 100rpx;
				height: 100rpx;

				.avatar-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}
			.nickname {
				margin-top: 12rpx;
			}
		}
	}

	.list-box {
		width: 686rpx;
		background: #ffffff;
		border-radius: 29rpx;
		position: relative;
		margin: -33rpx auto 0;
		padding: 100rpx 30rpx 0rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		box-shadow: 0px 10rpx 20rpx 0px rgba(254, 0, 8, 0.28);
		.upload-box {
			width: 100%;
			height: 290rpx;
			background: #ffffff;
			// border: 1px solid #E63931;
			border-radius: 15rpx;
			display: flex;
			flex-direction: column;
			padding-top: 24rpx;
			margin: 0 auto 50rpx;

			.upload-left {
				font-weight: 400;
				color: #000;
				text {
					color: #FD424B;
					font-size: 30rpx;
				}
			}

			.upload-right {
				margin-top: 16rpx;
				width: 100%;
				height: 100%;
				border: 1px solid #888888;
				border-radius: 15rpx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				.upload-img {
					width: 102rpx;
					height: 102rpx;
					// border: 1px solid #888888;
					// border-radius: 3rpx;
					// width: 133rpx;
					// height: 133rpx;
					// margin-top: 44rpx;
				}
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			margin-top: 32rpx;
			// height: 133rpx;

			.list-left {
				width: 100%;
				text-align: left;
				color: #000;
				text {
					color: #FD424B;
					font-size: 30rpx;
				}
			}

			input {
				height: 66rpx;
				// line-height: 66rpx;
				margin-top: 32rpx;
				// height: 88rpx;
			}

			.list-input {
				padding-left: 24rpx;
				// margin: 12rpx 0 ;

				line-height: 66rpx;
				display: flex;
				align-items: center;
				width: 100%;
				font-size: 26rpx;
				flex: 1;
				color: #000;
				border: 1rpx solid #929292;
				border-radius: 15rpx;
				text-align: left;

				.input-placeholder {
					height: 70rpx;
					color: #929292;
					font-size: 26rpx;
				}
			}

			.box-right {
				display: flex;
				align-items: center;
				padding-left: 24rpx;
				height: 66rpx;
				line-height: 66rpx;
				border: 1rpx solid #f3afad;
				border-radius: 22rpx;
				margin: 32rpx 36rpx 0 36rpx;

				width: 96%;
				font-size: 36rpx;
				color: #ff9797;
				text-align: left;
				line-height: 1;
			}
		}
	}
	.sub {
		width: 690rpx;
		height: 83rpx;
		background: #f95349;
		border-radius: 42rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 83rpx;
		text-align: center;
		margin: 53rpx auto 60rpx;
		&.action {
			background: #999999;
		}
	}
}
</style>