gas-cylinder-h5/pages/home/company.vue

<template>
	<!-- 选择公司 -->
	<view>
		<u-navbar title="选择公司" autoBack placeholder></u-navbar>
		<view class="card_company" v-if="list.length > 0">
			<view class="hint_title">请选择燃气公司</view>
			<view class="item_company" v-for="(item,index) in list" :key="index" @click="goBooking">
				<u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image>
				<view class="wordage">
					<view class="title_company">{{item.title}}</view>
					<view class="distance_title">距您{{item.num}}</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 30%;" v-else>
			<u-empty mode="list" text="该区/县暂无商家入驻"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				list: [{
					title: '宝智达燃气有限公司',
					num: '10.12km',
				}, {
					title: '宝智达燃气有限公司',
					num: '10.12km',
				}, ]
			}
		},
		methods: {
			// 去订气
			goBooking() {
				uni.navigateTo({
					url: '/pages/order/booking'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card_company {
		display: flex;
		flex-direction: column,
	}

	.hint_title {
		margin-left: 30rpx;
		margin-top: 30rpx;
		font-size: 26rpx;
		color: #909399;
	}

	.item_company {
		display: flex;
		margin: 30rpx 30rpx 0rpx 30rpx;
		border: 1rpx solid #e7e6e4;
		border-radius: 10rpx;
	}

	.wordage {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin-left: 20rpx;
		padding: auto 0px;
	}

	.title_company {
		color: #303133;
		font-size: 30rpx;
		font-weight: 600;
	}

	.distance_title {
		font-size: 24rpx;
		color: #909399;
	}
</style>