MD_worker/pages/index/home.vue

<template>
	<up-swiper height='115' :list="banner" indicator keyName="imageUrl" :autoplay="false" circular radius="0"
		@click="onClickSwiper" />
	<view class="main">
		<view class="serve">
			{{ enterprisename }}
		</view>
		<view class="name">
			{{ welcomeText }}
		</view>

		<view class="list">
			<navigator :url="item.path" class="item" v-for="item in itemList" :key="item.label">
				<view class="icon">
					<image class="image" :src="item.icon" />
				</view>
				<view class="label">
					{{ item.label }}
				</view>
				<view class="text">
					{{ item.text }}
				</view>
				<view class="badge" v-if="item.badge">
					<up-badge type="error" max="999" :value="item.badge"></up-badge>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $Http } = getCurrentInstance().proxy;
const banner = ref([]);
const enterprisename = ref('');
const welcomeText = computed(() => {
	return getTimeGreeting() + '，' + (uni.getStorageSync('userMsg').name);
});

onShow(() => {
	uploadNumber()
})

function getTimeGreeting() {
	const hour = new Date().getHours();

	if (hour >= 5 && hour < 12) {
		return '早上好';
	} else if (hour >= 12 && hour < 14) {
		return '中午好';
	} else if (hour >= 14 && hour < 18) {
		return '下午好';
	} else {
		return '晚上好';
	}
}

onLoad(() => {
	$Http.basic({
		"classname": "common.adspace.adspace",
		"method": "query_adspacelist", //查询轮播图
		content: {
			nocache: true
		}
	}).then(res => {
		if (res.code !== 0 && res.data.length) {
			uni.removeStorageSync('banner')
			uni.setStorageSync('banner', res.data);
			banner.value = res.data.find(v => v.location == "index_top").ads.map(v => {
				v.imageUrl = v.attinfos[0].url;
				return v
			}) || [];
		} else {
			const list = uni.getStorageSync('banner') || [];
			if (list.length) banner.value = list.find(v => v.location == "index_top").ads.map(v => {
				v.imageUrl = v.attinfos[0].url;
				return v
			}) || [];
		}
	})
	$Http.basic({
		id: "2025073015312903",
		content: {}
	}).then(res => {
		if (res.code == 1) {
			enterprisename.value = res.data.enterprisename;
		}
	})

	$Http.uploadNumber = uploadNumber;
});

function uploadNumber() {
	itemList.value.forEach((item) => {
		$Http.basic({ "id": "20230208140203", "content": { "pageNumber": 1, "pageSize": 0, "where": { "status": item.label, "condition": "" } } }).then(res => {
			if (res.code !== 0) {
				item.badge = res.total;
			} else {
				item.badge = 0;
			}
		})
	});
	welcomeText.getter()
}
function onClickSwiper(e) {
	let item = banner.value[e]
	if (item.hyperlink) {
		uni.navigateTo({
			url: item.hyperlink,
			success: (result) => { },
			fail: () => {
				uni.previewImage({
					current: e,
					urls: banner.value.map(v => v.imageUrl)
				})
			},
		})
	} else {
		uni.previewImage({
			current: e,
			urls: banner.value.map(v => v.imageUrl)
		})
	}
}
const itemList = ref([{
	label: '待接单',
	icon: '/static/image/djd.png',
	text: "故障维修排除",
	path: "/pages/workOrder/index?type=待接单",
}, {
	label: '进行中',
	icon: '/static/image/jxz.png',
	text: "专业上门安装",
	path: "/pages/workOrder/index?type=进行中",
}, {
	label: '已完结',
	icon: '/static/image/ywj.png',
	text: "精心维护保养",
	path: "/pages/workOrder/index?type=已完结",
}]);
</script>

<style lang="scss" scoped>
.main {
	padding: 40rpx 30rpx;
	box-sizing: border-box;

	.serve {
		line-height: 32rpx;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-size: 24rpx;
		color: #999999;
	}

	.name {
		line-height: 48rpx;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 40rpx;

		.item {
			position: relative;
			width: 334rpx;
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(150, 157, 165, 0.16);
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 40rpx;

			.image {
				height: 70rpx;
				width: 70rpx;
			}

			.label {
				line-height: 42rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-top: 20rpx;
			}

			.text {
				line-height: 38rpx;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-size: 28rpx;
				color: #999999;
				margin-top: 10rpx;
			}

			.badge {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				transform: scale(1.3);
			}
		}

	}
}
</style>