jxred/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="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">
					姓名：
				</view>
				<input type="text" v-model="name" class="list-input" placeholder="请输入您的姓名" />
			</view>
			<view class="list">
				<view class="list-left">
					手机：
				</view>
				<input type="text" v-model="phone" 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" class="list-input" placeholder='请选择常用地址' />

			</view>
			<view class="list">
				<view class="list-left">
					机构：
				</view>
				<!-- <input type="text" v-model="mechanism" @click="tosearch" class="list-input" placeholder='请输入机构关键字'/> -->
				<!-- <input type="text" v-model="mechanism" class="list-input" placeholder='请输入机构关键字' disabled/> -->
				<view class="list-input" style="margin-top: 2.5vw;">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{mechanism || '请选择机构'}}</view>
					</picker>
				</view>
			</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 {
				index: 0,
				array: ['武汉市江夏区红十字会'],
				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: {
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.mechanism = this.array[this.index]
			},
			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]
				console.log(this.mechanism);
				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('请上传救护员证书或身份证1111');
					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: (20vw/7.5);

		.sub {
			width: (660vw/7.5);
			line-height: (100vw/7.5);
			background: linear-gradient(0deg, #C90F1B, #F14D33);
			border-radius: (50vw/7.5);
			font-size: (36vw/7.5);
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			margin: (60vw/7.5) auto 0;

			&.action {
				background: #999999;
			}
		}

		.top {
			width: (750vw/7.5);

			.bgi {
				width: (750vw/7.5);
			}
		}

		.pop-box {
			width: (405vw/7.5);
			line-height: (66vw/7.5);
			text-align: center;
			background: linear-gradient(0deg, #C90F1B, #F14D33);
			border-radius: (10vw/7.5);
			font-size: (30vw/7.5);
			font-weight: 500;
			color: #FFFFFF;
			margin: (-110vw/7.5) auto 0;
			position: relative;
			z-index: 1;
		}

		.red-box {
			width: (405vw/7.5);
			line-height: (66vw/7.5);
			text-align: center;
			background: linear-gradient(0deg, #C90F1B, #F14D33);
			border-radius: (10vw/7.5);
			font-size: (30vw/7.5);
			font-weight: 500;
			color: #FFFFFF;
			margin: (0vw/7.5) auto 0;
			position: relative;
			z-index: 1;
		}
		.pop-list {
			width: (686vw/7.5);
			background: #FFFFFF;
			border-radius: (29vw/7.5);
			position: relative;
			margin: (-33vw/7.5) auto (78vw/7.5);
			padding: (80vw/7.5) 0 (30vw/7.5) (30vw/7.5);
			display: flex;
			flex-wrap: wrap;

			.list-box1 {
				text-align: center;
				margin-right: (30vw/7.5);
				margin-bottom: (30vw/7.5);

				.list-top {
					width: (100vw/7.5);
					height: (100vw/7.5);

					.avatar-img {
						width: (100vw/7.5);
						height: (100vw/7.5);
						border-radius: 50%;
					}
				}

				.nickname {
					margin-top: (12vw/7.5);
					font-size: (24vw/7.5);
				}
			}
		}

		.list-box {
			width: (686vw/7.5);
			background: #FFFFFF;
			border-radius: (29vw/7.5);
			position: relative;
			margin: (-33vw/7.5) auto;
			padding: (100vw/7.5) (30vw/7.5) 0 (30vw/7.5);
			display: flex;
			flex-wrap: wrap;

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

				.upload-left {
					font-weight: 400;
					color: #E63931;
					font-size: (24vw/7.5);
				}

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

					.upload-img {
						width: (133vw/7.5);
						height: (133vw/7.5);
						margin-top: (44vw/7.5);
					}
				}
			}

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

				.list-left {
					width: 100%;
					text-align: left;
					color: #E63931;
					font-size: (24vw/7.5);
				}

				input {
					height: (66vw/7.5);
					line-height: (66vw/7.5);
					margin-top: (32vw/7.5);
					// height: 88(vw/7.5);
				}

				.list-input {
					display: inline-block;

					padding-left: (24vw/7.5);
					// margin: 12(vw/7.5) 0 ;


					width: 100%;
					font-size: (36vw/7.5);
					flex: 1;
					color: #FF9797;
					border: (1vw/7.5) solid #f3afad;
					border-radius: (22vw/7.5);
					text-align: left;
					padding-right: (24vw/7.5);
					height: (100vw/7.5) !important;
					// background-color: red;
					.input-placeholder {
						height: (70vw/7.5);
						color: #FF9797;
					}
				}

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

					width: 96%;
					font-size: (36vw/7.5);
					color: #FF9797;
					text-align: left;
					// line-height: 1;
				}
			}
		}

	}
	/deep/ .uni-input-input, .uni-input {
		height: (70vw/7.5);
		line-height: (70vw/7.5);
	}
	
</style>