xinelu-applet-ui/pagesC/selectInstitution/selectInstitution.vue

<template>
	<view class="app">
		<view class="top">
			<u-dropdown active-color='#26A888'>
				<u-dropdown-item v-model="address" :title="addressname" :options="addressoptions"
					@change='dropitemchange'></u-dropdown-item>
			</u-dropdown>
			<view class="inputs">
				<i class="icon"></i>
				<input type="text" name="" id="" class="input" placeholder="搜签约机构" v-model="query.orgName">
			</view>
		</view>
		<view class="text">
			请选择您想要签约的机构：
		</view>
		<view class="list">
			<view class="item" v-for="item in institutionlist" @tap='emitdata(item)'>
				<view class="title">
					{{item.orgName?item.orgName:''}}
				</view>
				<view class="address">
					{{item.address?item.address:''}}
				</view>
				<view class="distance" v-if="item.distance">
					<image src="../../static/pages/address.png" mode=""></image>
					<view class="">
						{{item.distance}} KM
					</view>
				</view>
				<view class="Selected" v-if='item.orgNo == orgNo'>
					已选择
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCounty,
		getNearbyOrg
	} from '@/api/pagesC/selectInstitution/index.js'
	export default {
		data() {
			return {
				orgNo: '',
				address: 1,
				addressname: '全部',
				addressoptions: [{
					label: '全部',
					value: '',
				}, ],
				query: {
					lat: '',
					lng: '',
					pageSize: 10,
					pageNum: 1,
					orgName: '',
				},
				institutionlist: [],
				institutiontotal: 0,
			};
		},
		watch: {
			'query.orgName': {
				handler(newval, oldval) {
					this.getNearbyOrginfo();
				}
			}
		},
		methods: {
			dropitemchange(e) {
				this.addressname = this.addressoptions.find(m => m.value === e).label
				this.query.countyNo = e
				this.getNearbyOrginfo()
			},
			getCountyinfo() {
				var obj = {
					pageSize: 10,
					pageNum: 1
				}
				getCounty(obj, '1').then(respp => {
					respp.data = respp.data.forEach(e => {
						e.label = e.orgName
						e.value = e.orgNo
						this.addressoptions.push(e)
					})
				})
			},
			getNearbyOrginfo() {
				getNearbyOrg(this.query, '1').then(respp => {
					this.institutionlist = respp.rows
					this.institutiontotal = respp.total
				})
			},
			emitdata(item) {
				uni.$emit('data', {
					data: JSON.stringify(item),
				})
				uni.navigateBack({
					delta: 1
				});
			},
		},
		onLoad(options) {
			options.orgNo ? this.orgNo = options.orgNo : ''
			this.getCountyinfo()
			var that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(resp) {
					that.query.lat = resp.latitude
					that.query.lng = resp.longitude
					that.getNearbyOrginfo()
				},
				fail: function(err) {
					// uni.openSetting({
					// 	success(res) {
					// 		if (res.authSetting['scope.userLocation']) {
					// 			uni.getLocation({
					// 				type: 'wgs84',
					// 				success: function(resp) {
					// 					that.query.lat = resp.latitude
					// 					that.query.lng = resp.longitude
					// 					that.getNearbyOrginfo()
					// 				},
					// 			});
					// 		}
					// 	}
					// });
				},
			});
		},
		onReachBottom() { //上滑加载
			if (this.institutionlist.length >= this.institutiontotal) {} else {
				this.query.pageNum++;
				getNearbyOrg(this.query, '1').then(respp => {
					respp.rows.forEach(e => {
						this.institutionlist.push(e)
					})
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.query.pageNum = 1;
			this.getNearbyOrginfo()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		width: 94%;
		margin: 20rpx auto;
		padding: 20rpx 0 100rpx 0;
		background-color: #fff;
		font-size: 24rpx;

		.text {
			width: 92%;
			margin: 30rpx auto;
			font-weight: 500;
			color: #EE8F15;
		}

		.list {
			width: 92%;
			margin: 0 auto;

			.item {
				margin: 40rpx auto;
				height: 120rpx;
				position: relative;
				border-bottom: 2rpx solid #E6E6E6;

				.Selected {
					width: 108rpx;
					height: 40rpx;
					border: 1px solid #26A888;
					border-radius: 5rpx;
					position: absolute;
					right: 0%;
					top: 10%;
					font-weight: 500;
					color: #26A888;
					line-height: 40rpx;
					text-align: center;
				}

				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
				}

				.address {
					font-weight: 400;
					color: #8E8E8E;
					position: absolute;
					left: 0%;
					bottom: 10%;
				}

				.distance {
					font-weight: 400;
					color: #8E8E8E;
					position: absolute;
					right: 0%;
					bottom: 10%;
					display: flex;
					align-items: center;

					image {
						padding-right: 10rpx;
						width: 17rpx;
						height: 21rpx;
					}
				}
			}
		}

		.top {
			width: 90%;
			margin: 0 auto;
			display: flex;
			height: 84rpx;
			justify-content: space-around;

			.inputs {
				background-color: #fff;
				width: 65%;
				height: 60rpx;
				border-radius: 5rpx;
				background-color: #Ffffff;
				z-index: 999;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
				background: #F6F6F6;
				border: 1px solid #F6F6F6;
				border-radius: 38rpx;

				.input {
					margin: 0 auto;
					position: absolute;
					height: 60rpx;
					// top: 8%;
					left: 13%;
					width: 80%;
					font-size: 26rpx;
					color: #000000;
				}

				.icon {
					background: url(@/static/pagesB/sousuo.png) no-repeat;
					width: 30rpx;
					height: 28rpx;
					background-size: cover;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 3%;
				}
			}

			::v-deep .u-flex {
				width: 100% !important;
			}

			::v-deep .u-dropdown__content {
				overflow-y: scroll !important;
				height: 500rpx;

				.u-flex {
					width: 0 !important;
				}
			}

			::v-deep .u-dropdown__content__mask {
				background: none !important;
			}

			::v-deep .u-dropdown__menu__item {
				width: 100% !important;
			}

			::v-deep .u-cell__value {
				flex: 0;
			}

			::v-deep .u-dropdown {
				:v-deep .u-dropdown__menu {}
			}

			::v-deep .u-cell-box {}
		}
	}
</style>