BD-LDBD-UNI/pages/maintenance/index.vue

<template>
	<view class="">
		<!-- header -->
		<view class="headers">
			<view class="body" v-for="(item, index) in headerList" :key="index" @tap="routerTo(item)">
				<image :src="item.url" style="width:103	rpx;height:105rpx">
					<view class="title">
						{{item.name}}
					</view>
			</view>
		</view>
		<!-- 预约服务 -->
		<view class="serve">
			<view class="headers">
				<image :src="require('../../static/left.png')">
					预约服务
					<image :src="require('../../static/right.png')">
			</view>
			<view class="body">
				<view class="card" v-for="(item, index) in serveList" :key="index" @click="toServe(item)">
					<image :src="baseImagePath + item.imgUrl">
				</view>
			</view>
		</view>
		<!-- 推荐套餐 -->
		<view class="setMeal">
			<view class="headers">
				<image :src="require('../../static/left.png')">
					推荐套餐
					<image :src="require('../../static/right.png')">
			</view>
			<SetMeal :set-meal-list="setMealList"></SetMeal>
		</view>
	</view>
</template>

<script>
	import SetMeal from '@/components/SetMeal';
	import {
		getRepairServiceOne,
		packageList
	} from "@/api/maintain.js"
	const app = getApp();
	export default {
		components: {
			SetMeal
		},
		data() {
			return {
				requestData: {},
				headerLists: "",
				baseImagePath: this.baseImagePath,
				// 这里url使用的本地图片，使用require后会造成路由跳转传参失败，所以暂时不使用require
				setMealList: [],
				serveList: [],
				headerList: [{
						name: "在线预约",
						url: require("../../static/kefu.png"),
						path: "/pages/maintenance/onlineReservation/index?page=index"
					},
					{
						name: "附近门店",
						url: require("../../static/mendian.png"),
						path: "/pages/preCarWash/chooseShop/index?page=index"
					},
					{
						name: "维修估价",
						url: require("../../static/gujia.png"),
						path: "/pages/maintenance/evaluate/index"
					},
					{
						name: "套餐服务",
						url: require("../../static/taocan.png"),
						path: "/pages/maintenance/setMeal/index"
					},
				],
				pageNo: 1,
				pageSize: 10,
				loadmore: true,
			};
		},
		onBackPress(options) {
			// 这里可以自定义返回逻辑，比如下面跳转其他页面
			// #ifdef APP-PLUS
			if (plus.os.name.toLowerCase() === 'android') {
				plus.runtime.quit();
			} else {
				plus.runtime.quit();
			}
			// #endif
			// return true 表示禁止默认返回
			return true;
		},
		onReachBottom() {
			if (this.loadmore) {
				this.packageList();
			}
		},
		onLoad(e) {
			app.globalData.requestToken = e.token;
			uni.setStorageSync('token', e.token)
			let _this = this;
			this.packageList();
			getRepairServiceOne().then((res) => {
				_this.serveList = res.data
			})
		},
		methods: {
			packageList() {
				packageList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					recommend: 1,
				}).then((res) => {
					this.setMealList = res.data.rows;
					if (this.setMealList.length < this.pageSize) {
						this.loadmore = false
					}
					this.pageNo++
				})
			},
			// 路由跳转
			routerTo(item) {
				uni.removeStorageSync('chooseCar')
				uni.removeStorageSync('chooseShop')
				if (item.path) {
					this.$yrouter.push({
						path: item.path
					});
				}
			},
			toServe(item) {
				this.$yrouter.push({
					path: "/pages/maintenance/servicesAvailable/index?item=" + encodeURIComponent(JSON.stringify(
						item))
				});
			}
		},
	}
</script>

<style lang="less">
	.headers {
		width: 750rpx;
		height: 208rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.body {
			width: 110rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 103rpx;
				height: 104rpx;
			}

			.title {
				height: 23rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.serve {
		width: 100%;
		height: 354rpx;
		background-image: url(../../static/yuyue-bg.png);
		background-size: 100% 100%;
		padding-top: 36rpx;

		.headers {
			width: 227rpx;
			height: 31rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 36rpx;
			margin: auto;

			image {
				width: 31rpx;
				height: 31rpx;
			}
		}

		.body {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			margin-top: 30rpx;

			.card {
				width: 220rpx;
				height: 107rpx;
				margin-top: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.setMeal {
		padding-top: 36rpx;

		.headers {
			width: 227rpx;
			height: 31rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			line-height: 36rpx;
			margin: auto;

			image {
				width: 31rpx;
				height: 31rpx;
			}
		}
	}
</style>