ltred/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="pop-box">参与人数({{ count }}人)</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="../../static/img/002.png" 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">姓名：</view>
				<input type="text" v-model="name" placeholder-class="placeholder" class="list-input" placeholder="请输入您的姓名" />
			</view>
			<view class="list">
				<view class="list-left">手机：</view>
				<input type="text" v-model="phone" placeholder-class="placeholder" class="list-input" placeholder="请填写您的联系方式" />
			</view>
			<view class="list" @click="getLocation">
				<view class="list-left">地址：</view>
				<!-- <picker-address class="box-right" @change="onCityClick">{{ address }}</picker-address> -->
				<input type="text" v-model="showaddress" placeholder-class="placeholder" class="list-input" placeholder="请选择定位地址" />
			</view>
			<view class="list" @click="Toshow">
				<view class="list-left">机构：</view>
				<!-- <input type="text" v-model="mechanism" @click="tosearch" class="list-input" placeholder='请输入机构关键字'/> -->
				<input type="text" v-model="mechanism" placeholder-class="placeholder" class="list-input" placeholder="请输入机构关键字" disabled />
			</view>

			<view class="upload-box">
				<view class="upload-left">请上传救护员证书或身份证：</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 { 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
	},
	computed: {},
	data() {
		return {
			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
			}
		};
	},

	onShow() {
		this.loadData();
	},
	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.getLocation({
			// 	success: function(res) {
			// 		console.log('当前位置的经度：' + res.longitude);
			// 		console.log('当前位置的纬度：' + res.latitude);
			// 		obj.addressData.latitude = res.latitude;
			// 		obj.addressData.longitude = res.longitude;
			// 	},
			// 	fail: function(res) {
			// 		console.log(res);
			// 		uni.showModal({
			// 			title: 'tishi',
			// 			content: JSON.stringify(src)
			// 		});
			// 	}
			// });
			uni.chooseLocation({
				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;
					if (res.address) {
						obj.showaddress = res.address;
					}else {
						obj.showaddress = res.name;
					}
				}
			});
		},
		// 机构
		Toshow() {
			console.log('点击选择机构');
			let data = {
				keyword: '',
				// sort:'id desc',
				page: 1,
				limit: 1500
			};
			mechanism(data).then(data => {
				console.log('请求成功', data);
				this.list = data.data;
				// this.show = true
			});
			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">
.content {
	line-height: 1;
	background-color: #ffabab;
	padding-bottom: 20rpx;

	.sub {
		width: 660rpx;
		line-height: 100rpx;
		background: linear-gradient(0deg, #c90f1b, #f14d33);
		border-radius: 50rpx;
		font-size: 36rpx;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin: 60rpx auto 0;

		&.action {
			background: #999999;
		}
	}

	.top {
		width: 750rpx;

		.bgi {
			width: 750rpx;
		}
	}

	.pop-box {
		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: -110rpx auto 0;
		position: relative;
		z-index: 1;
	}

	.red-box {
		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: 0rpx auto 0;
		position: relative;
		z-index: 1;
	}

	.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: 80rpx 0rpx 30rpx 30rpx;
		display: flex;
		flex-wrap: wrap;

		.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;
		padding: 100rpx 30rpx 0rpx 30rpx;
		display: flex;
		flex-wrap: wrap;

		.upload-box {
			width: 100%;
			height: 247rpx;
			background: #ffffff;
			// border: 1px solid #E63931;
			border-radius: 27rpx;
			display: flex;
			flex-direction: column;
			padding: 30rpx 40rpx 30rpx 0;
			margin: 0 auto 30rpx;

			.upload-left {
				font-weight: 400;
				color: #e63931;
			}

			.upload-right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;

				.upload-img {
					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: #e63931;
			}

			input {
				height: 66rpx;
				// line-height: 66rpx;

				margin-top: 32rpx;
				// height: 88rpx;
			}

			.list-input {
				padding-left: 24rpx;
				// margin: 12rpx 0 ;
				display: flex;
				justify-content: center;
				// line-height: 66rpx;
				display: flex;
				align-items: center;
				width: 100%;
				font-size: 36rpx;
				flex: 1;
				color: #ff9797;
				border: 1rpx solid #f3afad;
				border-radius: 22rpx;
				text-align: left;
				padding-right: 24rpx;

				.input-placeholder {
					height: 70rpx;
					color: #ff9797;
				}
			}

			.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;
			}
		}
	}
}
</style>