wlred/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> -->



			<picker @change="bindMechanismChange" :range="mechanismList" style="width: 100%;">
				<view class="list">
					<view class="list-left">机构 <text>*</text></view>
					<!-- <view class="list-input">{{ mechanism || '请选择您所在机构'}}</view> -->
					<input type="text" v-model="mechanism" class="list-input" placeholder="请选择机构" disabled />
				</view>
			</picker>


			<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 {
				mechanismList: ['温岭红十字会'],
				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
				}
			};
		},
		computed: {
			...mapState('user', ['hasLogin', 'userInfo']),
		},
		onShow() {
			this.loadData();
			// this.getmechanism()
			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: {
			bindMechanismChange(e) {
				this.mechanism = this.mechanismList[e.target.value];
			},
			getmechanism() {
				mechanism().then(data => {
					console.log('请求成功', data);
					this.mechanismList = data.data;
					// this.show = true
				})
			},
			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({
					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: #FA7E67;

			&::after {
				content: '';
				width: 220rpx;
				height: 17rpx;
				background: #FDCBC2;
				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: #FA7E67;

			&::after {
				content: '';
				width: 220rpx;
				height: 17rpx;
				background: #FDCBC2;
				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;
					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: #FF5056;
			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>