jyred/pages/cart/category1.vue

<template>
	<view class="content">
		<view class="top">
			<image src="../../static/images/bgi1.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 list" :key='index' v-if="index<20">
				<view class="list-top">
					<image src="../../static/images/touxiang.jpg" mode="" class="avatar-img"></image>
				</view>
				<view class="nickname">
					韩大力
				</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='请输入机构关键字'/>
			</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>
		</view>
		<view class="sub" :class="{ action: loding }" @click="!loding?join():''">
			马上报名
		</view>
	</view>
</template>

<script>
	import {
		getNumber
	} from '@/api/index.js';
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import {
		upload,
		addrescuer
	} from '@/api/ask.js';
	export default {
		components: {
			pickerAddress,
		},
		computed: {
			// startDate() {
			// 	return this.getDate('start');
			// },
			// endDate() {
			// 	return this.getDate('end');
			// }
		},
		data() {
			// const currentDate = this.getDate({
			// 	format: true
			// })
			return {
				longitude: '',
				latitude: '',
				name: '',
				phone: '',
				mechanism: '',
				address: '',
				certificates: '',
				loding: false, //是否提交中
				showaddress: '', //显示用的地址
				count: 0,
				list: [1, 2, 3, 4, 5, 6, 7, 8,1,1,1,1,1,1,1,1,1,1,,1,1,1,,1,1,1,1,1,1],
				addressData: {
					name: '',
					mobile: '',
					latitude: 0, //纬度
					longitude: 0, //经度
					address: {
						province: '',
						city: '',
						district: '',
						detail: '',
					},
					area: '',
					default: false
				},
			}
		},
		onLoad() {
			this.loadData();
			const institution = uni.getStorageSync('institution')
			console.log(3,3,institution)
			this.mechanism = institution
		},
		methods: {
			tosearch(){
				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.list = 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;
						// // #ifdef H5
						// 	uni.request({
						// 		url:"/ws/geocoder/v1",
						// 		method: 'GET',
						// 		data:{
						// 			location:dizhi,
						// 			key:'CNIBZ-6JQWU-P2BVH-2GAAC-GG7Z5-RSBOP'
						// 		},
						// 		success: (res) => {
						// 			// console.log(res.data,"apis.map.qq.com");
						// 			let address = res.data.result.ad_info;
						// 			obj.addressData.address.province = address.province;
						// 			obj.addressData.address.city = address.city;
						// 			obj.addressData.address.district = address.district;
						// 			obj.content = obj.addressData.address.province + obj.addressData.address.city + obj.addressData.address.district;
						// 		}
						// 	});
						// // #endif

						// // #ifdef MP
						// uni.request({
						// 	url:"https://apis.map.qq.com/ws/geocoder/v1",
						// 	data:{
						// 		location:dizhi,
						// 		key:'CNIBZ-6JQWU-P2BVH-2GAAC-GG7Z5-RSBOP'
						// 	},
						// 	success: (res) => {
						// 		console.log(res.data,"apis.map.qq.com");
						// 		let address = res.data.result.ad_info;
						// 		obj.addressData.address.province = address.province;
						// 		obj.addressData.address.city = address.city;
						// 		obj.addressData.address.district = address.district;
						// 		obj.content = obj.addressData.address.province + obj.addressData.address.city + obj.addressData.address.district;
						// 	}
						// });
						// // #endif

					}
				});
			},
			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.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%;
					}
				}
			}
		}

		.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 ;

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