mabao/pages/vaccines/mechanism.vue

<template>
	<view class="bg-white">
		<u-dropdown>
			<u-dropdown-item @change="addressList" v-model="value1" :title="options1[value1-1].label" :options="options1"></u-dropdown-item>
		</u-dropdown>
		<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;">{{item.distance}}</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>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	export default {
		onLoad() {

		},
		onShow() {

		},
		data() {
			return {
				value: "",
				value1: 1,
				mechanismList: [{
						id: "1",
						name: "成都高新区合作社区卫生服务中心",
						address: "西部园区顺江小区清源环街171号",
						distance: "10km"
					},
					{
						id: "2",
						name: "成都高新区合作社区卫生服务中心",
						address: "西部园区顺江小区清源环街171号",
						distance: "10km"
					},
					{
						id: "3",
						name: "成都高新区合作社区卫生服务中心",
						address: "西部园区顺江小区清源环街171号",
						distance: "10km"
					},
					{
						id: "4",
						name: "成都高新区合作社区卫生服务中心",
						address: "西部园区顺江小区清源环街171号",
						distance: "10km"
					},
					{
						id: "5",
						name: "成都高新区合作社区卫生服务中心",
						address: "西部园区顺江小区清源环街171号",
						distance: "10km"
					}
				],
				options1: [{
						label: 'xxx地区',
						value: 1,
					},
					{
						label: 'yyy地区',
						value: 2,
					},
					{
						label: 'zzz地区',
						value: 3,
					}
				],
			}
		},
		methods: {
			xuanzephone(item) {
				this.value = item.id
			},
			addressList(value) {
				this.value1 = value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {}
</style>