Explorar o código

feat: banner

chenjj hai 4 meses
pai
achega
6113a505f1
Modificáronse 5 ficheiros con 284 adicións e 220 borrados
  1. 8 0
      api/home.js
  2. 229 207
      components/Client/new_file.vue
  3. 30 6
      pages/UserSelection.vue
  4. 17 7
      pages/index.vue
  5. BIN=BIN
      static/serverImg/home/logo.png

+ 8 - 0
api/home.js

@@ -0,0 +1,8 @@
+import request from '../utils/request'
+
+export function slideshow(slideshowId) {
+    return request({
+        url: `/web/core/slideshow/${slideshowId}`,
+        method: 'get',
+    })
+}

+ 229 - 207
components/Client/new_file.vue

@@ -20,19 +20,34 @@
 
 		<template v-else-if="userType == 2">
 			<view class="Wrapper-grid">
-				<up-grid :border="false" col="5" @click="handleGridClick">
-					<up-grid-item v-for="(item, index) in serviceList2" :key="index" :custom-style="custmoStyle">
-						<view class="grid-box">
-							<!-- 图标 -->
-							<view class="grid-icon">
-								<image :src="item.icon" class="service-img" mode="aspectFit" />
-							</view>
-
-							<!-- 文本 -->
-							<text class="grid-text">{{ item.name }}</text>
-						</view>
-					</up-grid-item>
-				</up-grid>
+				<swiper :indicator-dots="true" class="swiper">
+					<swiper-item>
+						<up-grid :border="false" col="4" @click="handleGridClick">
+							<up-grid-item v-for="(item, index) in serviceList2.slice(0,8)" :key="index" :custom-style="custmoStyle">
+								<view class="grid-box">
+									<view class="grid-icon">
+										<image :src="item.icon" class="service-img" mode="aspectFit" />
+									</view>
+
+									<text class="grid-text">{{ item.name }}</text>
+								</view>
+							</up-grid-item>
+						</up-grid>
+					</swiper-item>
+					<swiper-item>
+						<up-grid :border="false" col="4" @click="handleGridClick">
+							<up-grid-item v-for="(item, index) in serviceList2.slice(8,12)" :key="index" :custom-style="custmoStyle">
+								<view class="grid-box">
+									<view class="grid-icon">
+										<image :src="item.icon" class="service-img" mode="aspectFit" />
+									</view>
+
+									<text class="grid-text">{{ item.name }}</text>
+								</view>
+							</up-grid-item>
+						</up-grid>
+					</swiper-item>
+				</swiper>
 
 				<up-toast ref="uToastRef" />
 			</view>
@@ -46,81 +61,82 @@
 </template>
 
 <script setup>
-	import {
-		ref,
-		onMounted,
-		watch,
-		computed,
-		provide
-	} from 'vue';
-	// import {
-	// 	typeOptionSelect
-	// } from "@/api/volunteerDetailsApi/details.js"
-	import {
-		workDate,
-		getDataTime,
-		getVolunteerInfo
-	} from '@/api/volunteer.js'
-	import {
-		volunteerSeachgetTreeList,
-	} from "@/api/volunteerDetailsApi/details.js"
-	import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'
-
-
-	// Toast 控制宫格
-	const uToastRef = ref(null);
-	const userType = uni.getStorageSync('userType') //读取本地存储
-	// 用户/志愿者 识别标识
-	const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
-
-	const calendar = ref(null)
-	const info = ref({
-		lunar: true,
-		range: true,
-		insert: false,
-	})
-	const selected = ref([])
-
-	// 普通用户
-	const serviceList1 = ref([{
-			icon: '/static/img/统一知识平台-营运@1x.png',
-			name: '孩子陪护',
-			key: 2,
-		},
-		{
-			icon: '/static/img/编组.png',
-			name: '陪伴陪聊',
-			key: 1,
-		},
-		{
-			icon: '/static/img/清空.png',
-			name: '家庭助理',
-			key: 3,
-		},
-		{
-			icon: '/static/img/构建.png',
-			name: '健康管理',
-			key: 4,
-		},
-		{
-			icon: '/static/img/报事报修@6x.png',
-			name: '家庭清洁',
-			key: 5,
-		},
-		{
-			icon: '/static/img/报事报修@6x.png',
-			name: '家务帮手',
-			key: 6,
-		},
-		{
-			icon: '/static/img/报事报修@6x.png',
-			name: '资讯与服务',
-			key: 7,
-		},
-	]);
-	
-	//志愿者
-	const serviceList2 = ref([
+import {
+	ref,
+	onMounted,
+	watch,
+	computed,
+	provide
+} from 'vue';
+// import {
+// 	typeOptionSelect
+// } from "@/api/volunteerDetailsApi/details.js"
+import {
+	workDate,
+	getDataTime,
+	getVolunteerInfo
+} from '@/api/volunteer.js'
+import {
+	volunteerSeachgetTreeList,
+} from "@/api/volunteerDetailsApi/details.js"
+import Calendar from '../../components/uni-calendar/components/uni-calendar/uni-calendar.vue'
+
+const swiperList = ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'];
+
+// Toast 控制宫格
+const uToastRef = ref(null);
+const userType = uni.getStorageSync('userType') //读取本地存储
+// 用户/志愿者 识别标识
+const userOrWorker = uni.getStorageSync('storage_data').vuex_userOrWorker //读取本地存储
+
+const calendar = ref(null)
+const info = ref({
+	lunar: true,
+	range: true,
+	insert: false,
+})
+const selected = ref([])
+
+// 普通用户
+const serviceList1 = ref([{
+	icon: '/static/img/统一知识平台-营运@1x.png',
+	name: '孩子陪护',
+	key: 2,
+},
+{
+	icon: '/static/img/编组.png',
+	name: '陪伴陪聊',
+	key: 1,
+},
+{
+	icon: '/static/img/清空.png',
+	name: '家庭助理',
+	key: 3,
+},
+{
+	icon: '/static/img/构建.png',
+	name: '健康管理',
+	key: 4,
+},
+{
+	icon: '/static/img/报事报修@6x.png',
+	name: '家庭清洁',
+	key: 5,
+},
+{
+	icon: '/static/img/报事报修@6x.png',
+	name: '家务帮手',
+	key: 6,
+},
+{
+	icon: '/static/img/报事报修@6x.png',
+	name: '资讯与服务',
+	key: 7,
+},
+]);
+
+//志愿者
+const serviceList2 = ref([
 	{
 		icon: '/static/serverImg/home/icon/icon2.png',
 		name: '陪伴陪聊',
@@ -183,47 +199,47 @@
 	},
 ]);
 
-	const parentIdMap = {
-		'孩子陪护': 2,
-		'陪伴陪聊': 1,
-		'家庭助理': 3,
-		'健康管理': 4,
-		'家庭清洁': 5,
-		'家务帮手': 6,
-		'资讯与服务': 7,
-	};
-
-	const getParentId = (service) => parentIdMap[service.name] || 1;
-
-
-	// 宫格点击事件
-	const handleGridClick = async (index) => {
-		const service = serviceList1.value[index]; // 获取点击的服务条目
-		// 用户
-		if (userType == 1) {
-			// 动态获取 parentId
-			const parentId = getParentId(service); // 通过服务条目动态获取 parentId
-			const params = {
-				parentId: parentId
-			}
-			const res = await volunteerSeachgetTreeList(params)
-			console.log(res, '>>>>>dictSort = null')
-		
-			// 只有第一条和第二条可以跳转
-			if (index === 0 || index === 1) {
-				uni.navigateTo({
-					url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}`
-				});
-			} else {
-				// 其他条目提示“敬请期待”
-				uni.showToast({
-					title: '敬请期待',
-					icon: 'none'
-				});
-			}
+const parentIdMap = {
+	'孩子陪护': 2,
+	'陪伴陪聊': 1,
+	'家庭助理': 3,
+	'健康管理': 4,
+	'家庭清洁': 5,
+	'家务帮手': 6,
+	'资讯与服务': 7,
+};
+
+const getParentId = (service) => parentIdMap[service.name] || 1;
+
+
+// 宫格点击事件
+const handleGridClick = async (index) => {
+	const service = serviceList1.value[index]; // 获取点击的服务条目
+	// 用户
+	if (userType == 1) {
+		// 动态获取 parentId
+		const parentId = getParentId(service); // 通过服务条目动态获取 parentId
+		const params = {
+			parentId: parentId
 		}
-		// 志愿者
-		if (userType == 2 && uToastRef.value) {
+		const res = await volunteerSeachgetTreeList(params)
+		console.log(res, '>>>>>dictSort = null')
+
+		// 只有第一条和第二条可以跳转
+		if (index === 0 || index === 1) {
+			uni.navigateTo({
+				url: `/pages_home/pages/client/details?dataList=${encodeURIComponent(JSON.stringify(res.data))}`
+			});
+		} else {
+			// 其他条目提示“敬请期待”
+			uni.showToast({
+				title: '敬请期待',
+				icon: 'none'
+			});
+		}
+	}
+	// 志愿者
+	if (userType == 2 && uToastRef.value) {
 		// pages_home/pages
 
 		const data = serviceList2.value[index]
@@ -249,82 +265,82 @@
 	}
 };
 
-	const change = (e) => {
-		console.log('change', e);
-		let dates = [{
-			date: e.fulldate,
-			info: `${e.time.startTime}~${e.time.endTime}`,
-			time: e.time
-		}]
-		if (e.range.before && e.range.after) {
-			dates = e.range.data.map(item => {
-				return {
-					date: item,
-					info: `${e.time.startTime}~${e.time.endTime}`,
-					time: e.time
-				}
-			})
-		}
-		selected.value = [...selected.value, ...dates]
-	}
-
-	const onDelete = (e) => {
-		selected.value = selected.value.filter(item => {
-			console.log('item.fulldate !== e.date', item.date, e.fulldate);
-
-			return item.date !== e.fulldate
+const change = (e) => {
+	console.log('change', e);
+	let dates = [{
+		date: e.fulldate,
+		info: `${e.time.startTime}~${e.time.endTime}`,
+		time: e.time
+	}]
+	if (e.range.before && e.range.after) {
+		dates = e.range.data.map(item => {
+			return {
+				date: item,
+				info: `${e.time.startTime}~${e.time.endTime}`,
+				time: e.time
+			}
 		})
-		console.log(e, selected.value);
 	}
+	selected.value = [...selected.value, ...dates]
+}
 
+const onDelete = (e) => {
+	selected.value = selected.value.filter(item => {
+		console.log('item.fulldate !== e.date', item.date, e.fulldate);
 
-	//排班时间去重处理
-	const handleDates = computed(() => {
-		const parmas = selected.value.map(item => {
-			return {
-				workDate: item.date,
-				workStartTime: item.time.startTime,
-				workEndTime: item.time.endTime
-			}
-		})
-		return parmas.reduce((acc, current) => {
-			const existing = acc.find(item => item.workDate === current.workDate);
-			if (existing) {
-				Object.assign(existing, current);
-			} else {
-				acc.push(current);
-			}
-			return acc;
-		}, []);
-	});
-	const confirm = (e) => {
-		const parmas = handleDates.value;
-		console.log('确定', parmas);
-		workDate(parmas).then(res => {
-			if (res.code == 200) {
-				uni.showToast({
-					title: '修改成功',
-					icon: 'success',
-					success: () => {
-						setTimeout(() => {
-							close();
-						}, 1000)
-					}
-				})
+		return item.date !== e.fulldate
+	})
+	console.log(e, selected.value);
+}
 
-				return;
-			}
+
+//排班时间去重处理
+const handleDates = computed(() => {
+	const parmas = selected.value.map(item => {
+		return {
+			workDate: item.date,
+			workStartTime: item.time.startTime,
+			workEndTime: item.time.endTime
+		}
+	})
+	return parmas.reduce((acc, current) => {
+		const existing = acc.find(item => item.workDate === current.workDate);
+		if (existing) {
+			Object.assign(existing, current);
+		} else {
+			acc.push(current);
+		}
+		return acc;
+	}, []);
+});
+const confirm = (e) => {
+	const parmas = handleDates.value;
+	console.log('确定', parmas);
+	workDate(parmas).then(res => {
+		if (res.code == 200) {
 			uni.showToast({
-				title: res.msg,
-				icon: 'none'
+				title: '修改成功',
+				icon: 'success',
+				success: () => {
+					setTimeout(() => {
+						close();
+					}, 1000)
+				}
 			})
+
+			return;
+		}
+		uni.showToast({
+			title: res.msg,
+			icon: 'none'
 		})
-	};
-	const close = () => {
-		calendar.value.close();
-	}
+	})
+};
+const close = () => {
+	calendar.value.close();
+}
 
-	const init = () => {
+const init = () => {
 	getDataTime().then(res => {
 		console.log('res', res);
 		if (res.code === 200) {
@@ -347,22 +363,18 @@
 
 
 
-	onMounted(() => {
-		// init();
-	});
+onMounted(() => {
+	// init();
+});
 </script>
 
 <style scoped>
 .Wrapper-grid {
-	/* margin-top: 170rpx; */
 	margin-top: 36rpx;
 }
 
 /* 图标样式 */
 .service-img {
-	/* width: 80rpx;
-	height: 80rpx; */
-	/* margin-bottom: 15rpx; */
 }
 
 /* 文本样式 */
@@ -382,10 +394,10 @@
 }
 
 .grid-icon {
-	width: 96rpx;
-	height: 96rpx;
+	width: 100rpx;
+	height: 100rpx;
 	opacity: 1;
-	border-radius: 8rpx;
+	border-radius: 12rpx;
 	background: rgba(251, 229, 225, 1);
 	display: flex;
 	align-items: center;
@@ -393,7 +405,17 @@
 }
 
 .service-img {
-	width: 48rpx;
-	height: 48rpx;
+	width: 58rpx;
+	height: 58rpx;
+}
+
+.swiper {
+	height: 205px;
+}
+
+.grid-text {
+	font-size: 14px;
+	color: #909399;
+	padding: 10rpx 0 20rpx 0rpx;
 }
 </style>

+ 30 - 6
pages/UserSelection.vue

@@ -1,9 +1,11 @@
 <template>
 	<view class="container">
-		<view class="select-title">欢迎使用</view>
+		<img src="/static/serverImg/home/logo.png" alt="" class="logo">
+		<view class="select-title">欢迎使用<text class="logo-title">金邻助家</text> </view>
 		<view class="select-text">请选择您的身份开始使用</view>
 		<view class="select-box">
-			<view v-for="item in list" :key="item.key" class="select-item" :style="{ background: item.bgcColor }" @click="handleBtn(item.key)">
+			<view v-for="item in list" :key="item.key" class="select-item" :style="{ background: item.bgcColor }"
+				@click="handleBtn(item.key)">
 				<view class="select-img">
 					<img :src="item.icon" alt="" style="width: 48px;height: 48px;">
 				</view>
@@ -13,7 +15,7 @@
 				</view>
 			</view>
 		</view>
-
+		<view class="logo-text">技术支持:重庆金树林科技有限公司</view>
 	</view>
 </template>
 
@@ -30,14 +32,14 @@ const list = [
 		text: '寻找并预约服务',
 		icon: '/static/img/user.png',
 		key: 1,
-		bgcColor: 'linear-gradient(135deg, rgba(45, 58, 78, 1) 0%, rgba(61, 74, 94, 1) 100%), rgba(0, 0, 0, 0)'
+		bgcColor: 'rgba(221, 94, 69, 1)'
 	},
 	{
 		label: '我是志愿者',
 		text: '提供专业服务',
 		icon: '/static/img/admin.png',
 		key: 2,
-		bgcColor: 'linear-gradient(135deg, rgba(16, 185, 129, 1) 0%, rgba(32, 201, 145, 1) 100%), rgba(0, 0, 0, 0)'
+		bgcColor: ' rgba(233, 91, 93, 1)'
 	}
 ]
 
@@ -83,7 +85,7 @@ function handleBtn(userType = 0) { // 默认值 0
 		font-weight: 400;
 		line-height: 24px;
 		color: rgba(75, 85, 99, 1);
-		margin-bottom: 50px;
+		margin-bottom: 20px;
 	}
 
 	.select-box {
@@ -95,6 +97,7 @@ function handleBtn(userType = 0) { // 默认值 0
 			align-items: center;
 			border-radius: 16px;
 			margin-bottom: 24px;
+
 			.select-img {
 				margin-right: 24px;
 
@@ -119,4 +122,25 @@ function handleBtn(userType = 0) { // 默认值 0
 		}
 	}
 }
+
+.logo {
+	width: 232rpx;
+	height: 232rpx;
+}
+
+.logo-title {
+	font-size: 32px;
+	color: rgba(221, 94, 69, 1);
+	font-weight: bold;
+
+}
+
+.logo-text {
+	font-size: 28rpx;
+	font-weight: 400;
+	line-height: 40rpx;
+	color: rgba(107, 114, 128, 1);
+	margin-top: 36rpx;
+}
+
 </style>

+ 17 - 7
pages/index.vue

@@ -48,23 +48,18 @@
 	import {
 		volunteerinfolist,
 	} from "@/api/volunteerDetailsApi/details.js"
+	import { slideshow } from '@/api/home.js'
 
 	const total = ref(0)
 	const listData = ref([])
 	const rightList = ref([])
 	const userType = uni.getStorageSync('userType') //读取本地存储
 
-
 	const data = reactive({
 		address: '重庆市永川区',
 		queryValue: ''
 	})
-	const list3 = ref([
-		''
-		// '/static/img/68c51cda626f732e5a6a782e245ac255.jpeg',
-		// '/static/img/78f89f319f760ba84a5b86916612a99d.jpeg',
-		// '/static/img/e88c34398a054556e59659f4b7b83e8e.jpeg',
-	]);
+	const list3 = ref([]);
 
 	const getList = async () => {
 		try {
@@ -88,8 +83,21 @@
 		}
 	};
 
+	const getBanners = async() => {
+		try {
+			const res =await slideshow(7);
+			if(res.code === 200 && res.data.picture){
+				list3.value = res.data.picture.split(',');
+			}
+		} catch (error) {
+			console.log('error',error);
+			
+		}
+	}
+
 	onShow(() => {
 		getList()
+		getBanners();
 	})
 </script>
 
@@ -125,4 +133,6 @@
 			padding: 12px 16px;
 		}
 	}
+
+
 </style>

BIN=BIN
static/serverImg/home/logo.png