mabao/pages/vaccines/mechanism.vue

<template>
	<view class="bg-white">
		<picker class="" @change="PickerChange" mode="selector" range-key="name" :value="value1" :range="options1">
			<view class="text-xl margin-sm">
				{{options1[value1].name||'加载中...'}}
				<text class="cuIcon-unfold lg text-gray margin-left-xs"></text>
			</view>
		</picker>
		<view class="margin-sm">
			<view v-for="(item,index) in mechanismList" :key="index" @click="xuanzephone(item)" class="padding bg-white margin-top-sm flex justify-between align-center"
			 style="border-radius: 16rpx;box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);">
				<view class="">
					<view class="text-bold" style="color: #333333;font-size: 30rpx;">
						{{item.name}}
					</view>
					<view class="margin-top-sm" style="color: #999999; font-size: 26rpx;">
						地址：<text style="color: #666666;">{{item.address}}</text>
					</view>
					<view class="margin-top-sm" style="color: #999999; font-size: 26rpx;">
						距离：<text style="color: #666666;">{{parseInt(item.distance/1000)}}km</text>
					</view>
				</view>
				<view class="">
					<u-radio-group v-model="value">
						<u-radio @change="radioChange" :key="index" :name="item.id">
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<u-empty text="暂无数据" :show="show" mode="order" margin-top="250"></u-empty>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		getLocation
	} from "../../common/authorize.js"
	export default {
		onLoad(op) {
			this.type = op.type
		},
		onShow() {

		},
		mounted() {
			this.getareaList()
			this.GetCurrentAddress()
		},
		data() {
			return {
				value: "",
				value1: 0,
				mechanismList: [],
				options1: [],
				pageindex: 1,
				show: false,
				type: "",
				city_name: ""
			}
		},
		onReachBottom() {
			this.getMechanismList()
		},
		methods: {
			GetCurrentAddress() {
				getLocation().then(res => {
					this.city_name = res.address.address_component.city
					this.options1.forEach((item,index)=>{
						if(item.name.indexOf(this.city_name.split('市')[0])>-1){
							this.value1 = index
							console.log(this.value1)
						}
					})
					this.getMechanismList()
				}).catch(res => {})
			},
			xuanzephone(item) {
				this.value = item.id
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.doctor = item
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			PickerChange(e) {
				this.value1 = e.detail.value
				this.city_name = this.options1[this.value1].name
				this.pageindex = 1
				this.mechanismList = []
				this.getMechanismList()
			},
			getMechanismList: async function() {
				// let area = ""
				// if (this.options1.length != 0) {
				// 	area = this.options1[this.value1].name
				// }
				let res = await this.$request.post("/api/v1/organization/organizationList", {
					page: this.pageindex,
					// city_id: area,
					latitude: uni.getStorageSync('latitude'), //25.123157,
					longitude: uni.getStorageSync('longitude'), //102.758524,
					schedule_type: this.type,
					city_name: this.city_name //'昆明市'
				})
				console.log(res)
				if (res.status == 0) {
					if (this.pageindex > res.data.last_page) {
						uni.showToast({
							title: "没有更多了",
							icon: "none"
						})
					} else {
						this.mechanismList = this.mechanismList.concat(res.data.data)
						this.pageindex++
					}
				}
				if (this.mechanismList.length == 0) {
					this.show = true
				} else {
					this.show = false
				}
			},
			getareaList: async function() {
				let res = await this.$request.post("/api/v1/organization/organizationCityList")
				console.log(res)
				if (res.status == 0) {
					this.options1 = res.data
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.main {}
</style>