pages/sub_tabbar/life.vue

<template>
	<view class="life">
		<view class="life-item" v-for="(v,i) in list" :key="i">
			<view v-if="v.isShow">
				<view class="life-item-title">
					<view class="life-item-title-box"></view>
					<text>{{v.name}}</text>
				</view>
				<view class="life-item-con">
					<!-- #ifndef MP-WEIXIN -->
					<view class="life-item-con-item" v-for="(item,index) in v.list" :key="index" @click="toPath(`${item.path}?id=${item.id}`)">
						<u-image :src="item.src" width="50rpx" height="50rpx" mode="aspectFit"></u-image>
						<text>{{item.title}}</text>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="life-item-con-item" v-for="(item,index) in v.list" :key="index" @click="toast">
						<u-image :src="item.src" width="50rpx" height="50rpx" mode="aspectFit"></u-image>
						<text>{{item.title}}</text>
					</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<u-tabbar :list="vuex_tabbar" :mid-button="true" active-color="#2FA8E1" inactive-color="#999999" @change="changeTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '医疗就诊',
					isShow: true,
					list: [
						// {
						// 	title: "预约挂号",
						// 	src: "/static/images/index/wyjf.png",
						// 	path:""
						// },
						{
							title: "医疗缴费",
							src: "/static/images/index/smkhd.png",
							path: "/pages/sub_medical/hospital",
							id: 'toBills'
						},
						{
							title: "报告查询",
							src: "/static/images/index/wyjf.png",
							path: "/pages/sub_medical/hospital",
							id: "toReports"
						}
					],
				}, {
					name: '生活缴费',
					isShow: false,
					list: [{
						title: "物业缴费",
						src: "/static/images/index/wyjf.png",
						path: ""
					}, {
						title: "电费",
						src: "/static/images/index/df.png",
						path: ""
					}, {
						title: "加油卡充值",
						src: "/static/images/index/jykcz.png",
						path: ""
					}, {
						title: "宽带费",
						src: "/static/images/index/kdf.png",
						path: ""
					}, {
						title: "手机缴费",
						src: "/static/images/index/sjjf.png",
						path: ""
					}, {
						title: "固话充值",
						src: "/static/images/index/ghcz.png",
						path: ""
					}, {
						title: "违章查询",
						src: "/static/images/index/wzcx.png",
						path: ""
					}, {
						title: "全部",
						src: "/static/images/index/all.png",
						path: ""
					}],
				}]
			}
		},
		methods: {
			// #ifdef MP-WEIXIN
			toast(){
				uni.showToast({
					title:'暂不支持小程序，请前往app使用',
					icon:'none'
				})
			}
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.life {
		padding: 0 30rpx;
		font-family: "PingFang-SC-Medium";
		overflow: hidden;

		&-item {
			display: flex;
			width: 100%;
			flex-direction: column;
			margin: 30rpx 0;

			&-title {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				&-box {
					width: 6rpx;
					height: 30rpx;
					background-image: linear-gradient(#7DD2F9, #30A8E1);
					margin-right: 20rpx;
				}

				text {
					font-size: 32rpx;
					color: #343434;
				}
			}

			&-con {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				flex-wrap: wrap;

				&-item {
					width: 25%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 20rpx 0;

					text {
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>