|
|
@@ -1,255 +1,291 @@
|
|
|
<template>
|
|
|
- <view class="main-content ">
|
|
|
- <view class="home-banner">
|
|
|
+ <view class="main-content">
|
|
|
+ <view class="home-banner" :style="`height: ${globalData.navBarHeight}px `">
|
|
|
<view class="home-banner-left">
|
|
|
- <img src="/static/serverImg/home/address.png" alt=""
|
|
|
- style="width: 41.67rpx;height: 41.67rpx;margin-right: 8rpx;">
|
|
|
+ <!-- <img src="/static/serverImg/home/address.png" alt=""
|
|
|
+ style="width: 41.67rpx;height: 41.67rpx;margin-right: 8rpx;"> -->
|
|
|
+ <up-icon name="map" color="#fff" size="25"></up-icon>
|
|
|
<text>{{ data.address }}</text>
|
|
|
</view>
|
|
|
- <view>
|
|
|
- <up-icon name="bell" :size="25" color="rgba(46, 46, 46, 1)"></up-icon>
|
|
|
- <!-- <img src="/static/serverImg/home/message.png" alt="" style="width: 50rpx;height: 50rpx;"> -->
|
|
|
+ <view class="home-banner-cente">金邻助家</view>
|
|
|
+ <view class="home-banner-rigth">
|
|
|
+ <!-- <up-icon name="bell" :size="25" color="rgba(46, 46, 46, 1)"></up-icon> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="home-main">
|
|
|
- <view class="custom-swiper">
|
|
|
- <up-swiper :list="list3" indicator indicatorMode="line" circular></up-swiper>
|
|
|
+ <view class="home-box" :style="`margin-top: ${globalData.navBarHeight}px `">
|
|
|
+ <view class="home-main">
|
|
|
+ <view class="custom-swiper">
|
|
|
+ <up-swiper :list="list3" indicator indicatorMode="line" circular></up-swiper>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
|
- <view class="home-grid">
|
|
|
- <Client />
|
|
|
- </view>
|
|
|
+ <view class="home-grid">
|
|
|
|
|
|
- <!-- <view class="home-grid hot-box">
|
|
|
- <view v-for="item in hotList" :key="item.key" class="hot-item">
|
|
|
- <view>
|
|
|
- <view>{{item.name}}</view>
|
|
|
- <view>{{item.text}}</view>
|
|
|
+ <Client />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="home-grid hot-box" v-if="userType === 1">
|
|
|
+ <view v-for="(item, index) in hotList" :key="index + 'hot'" class="hot-item">
|
|
|
+ <img :src="item" alt="" style="width: 100%;height: 160rpx;">
|
|
|
</view>
|
|
|
- <up-icon :name="listItem.iconName" :size="22"></up-icon>
|
|
|
</view>
|
|
|
- </view> -->
|
|
|
|
|
|
- <view class="home-ranking">
|
|
|
- <ServIces :leftList="leftList" :rightList="rightList" v-if="userType == 1"></ServIces>
|
|
|
- <RankingList v-if="userType === 2" />
|
|
|
- </view>
|
|
|
+ <view class="home-g-bgc">
|
|
|
+ <view class="home-grid2">
|
|
|
+ <view class="serve-title hot-box-title" v-if="userType === 1">超值专区</view>
|
|
|
+ <view class="hot-swiper">
|
|
|
+ <up-swiper :list="ValueZone" :indicator="false" indicatorMode="line" circular></up-swiper>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
- <up-loadmore style="margin-top: 40rpx;margin-bottom: 40rpx;" :status="loadmoreInfo.status"
|
|
|
- :loadmoreText="loadmoreInfo.loadmoreTex" :loadingText="loadmoreInfo.loadingText"
|
|
|
- :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" />
|
|
|
+ <view class="home-ranking home-grid2">
|
|
|
+ <ServIces :leftList="leftList" :rightList="rightList" v-if="userType == 1"></ServIces>
|
|
|
+ <RankingList v-if="userType === 2" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <up-loadmore style="margin-top: 40rpx;" :status="loadmoreInfo.status"
|
|
|
+ :loadmoreText="loadmoreInfo.loadingText" :loadingText="loadmoreInfo.loadmoreText"
|
|
|
+ :nomoreText="loadmoreInfo.nomoreText" @loadmore="handleLoadmore" v-if="userType == 1" />
|
|
|
|
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import {
|
|
|
- ref,
|
|
|
- reactive,
|
|
|
- onMounted
|
|
|
- } from 'vue';
|
|
|
- import {
|
|
|
- onLoad,
|
|
|
- onShow,
|
|
|
- onReachBottom
|
|
|
- } from "@dcloudio/uni-app";
|
|
|
- import RankingList from '@/pages/common/rankingList/index.vue';
|
|
|
- import ServIces from "@/components/Services/services.vue"
|
|
|
- import {
|
|
|
- Client
|
|
|
- } from "@/components/Client/new_file.vue"
|
|
|
- import {
|
|
|
- volunteerinfolist,
|
|
|
- } from "@/api/volunteerDetailsApi/details.js"
|
|
|
- import {
|
|
|
- slideshow
|
|
|
- } from '@/api/home.js'
|
|
|
-
|
|
|
- const listData = ref([])
|
|
|
- const leftList = ref([])
|
|
|
- const rightList = ref([])
|
|
|
- const userType = uni.getStorageSync('userType') //读取本地存储
|
|
|
-
|
|
|
- const data = reactive({
|
|
|
- address: '重庆市永川区',
|
|
|
- queryValue: ''
|
|
|
- })
|
|
|
- const list3 = ref([]);
|
|
|
-
|
|
|
- const hotList = [{
|
|
|
- key: 1,
|
|
|
- icon: '/static/img/构建.png',
|
|
|
- name: '专业辅导',
|
|
|
- text: '与家长协同制定成长计划',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 2,
|
|
|
- icon: '/static/img/构建.png',
|
|
|
- name: '暖心陪护',
|
|
|
- text: '倾听烦恼、缓解孤独感',
|
|
|
- },
|
|
|
- ]
|
|
|
- const hotList2 = [{
|
|
|
- key: 1,
|
|
|
- icon: '/static/img/构建.png',
|
|
|
- name: '专业辅导',
|
|
|
- text: '与家长协同制定成长计划',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 2,
|
|
|
- icon: '/static/img/构建.png',
|
|
|
- name: '暖心陪护',
|
|
|
- text: '倾听烦恼、缓解孤独感',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 3,
|
|
|
- icon: '/static/img/构建.png',
|
|
|
- name: '专业辅导',
|
|
|
- text: '与家长协同制定成长计划',
|
|
|
- },
|
|
|
- {
|
|
|
- key: 4,
|
|
|
- icon: '/static/img/构建.png',
|
|
|
- name: '暖心陪护',
|
|
|
- text: '倾听烦恼、缓解孤独感',
|
|
|
- },
|
|
|
- ]
|
|
|
-
|
|
|
- // 分页
|
|
|
- const pages = ref({
|
|
|
- current: 1,
|
|
|
- pageSize: 10,
|
|
|
- total: 0
|
|
|
- })
|
|
|
-
|
|
|
- const loadmoreInfo = ref({
|
|
|
- status: 'loadmore',
|
|
|
- loadingText: '努力加载中...',
|
|
|
- loadmoreText: '点击加载更多~',
|
|
|
- nomoreText: '已经到底啦～'
|
|
|
- })
|
|
|
-
|
|
|
- // 加载更多
|
|
|
- async function handleLoadmore(e) {
|
|
|
- if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
|
|
|
- pages.value.current += 1;
|
|
|
- loadmoreInfo.value.status = 'loading';
|
|
|
- await getList();
|
|
|
- } else {
|
|
|
+import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ onMounted
|
|
|
+} from 'vue';
|
|
|
+import {
|
|
|
+ onLoad,
|
|
|
+ onShow,
|
|
|
+ onReachBottom
|
|
|
+} from "@dcloudio/uni-app";
|
|
|
+import RankingList from '@/pages/common/rankingList/index.vue';
|
|
|
+import ServIces from "@/components/Services/services.vue"
|
|
|
+import {
|
|
|
+ Client
|
|
|
+} from "@/components/Client/new_file.vue"
|
|
|
+import {
|
|
|
+ volunteerinfolist,
|
|
|
+} from "@/api/volunteerDetailsApi/details.js"
|
|
|
+import {
|
|
|
+ slideshow
|
|
|
+} from '@/api/home.js'
|
|
|
+
|
|
|
+const total = ref(0)
|
|
|
+const listData = ref([])
|
|
|
+const rightList = ref([])
|
|
|
+const leftList = ref([])
|
|
|
+const userType = uni.getStorageSync('userType') //读取本地存储
|
|
|
+const globalData = ref({
|
|
|
+ statusBarHeight: 47,
|
|
|
+ navBarHeight: 91
|
|
|
+});
|
|
|
+const data = reactive({
|
|
|
+ address: '重庆市',
|
|
|
+ queryValue: ''
|
|
|
+})
|
|
|
+const list3 = ref([]);
|
|
|
+const ValueZone = ref([]);
|
|
|
+const hotList = ref([])
|
|
|
+
|
|
|
+// 分页
|
|
|
+const pages = ref({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const loadmoreInfo = ref({
|
|
|
+ status: 'loadmore',
|
|
|
+ loadingText: '努力加载中...',
|
|
|
+ loadmoreText: '点击加载更多~',
|
|
|
+ nomoreText: '已经到底啦～'
|
|
|
+})
|
|
|
+
|
|
|
+// 加载更多
|
|
|
+async function handleLoadmore(e) {
|
|
|
+ if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
|
|
|
+ pages.value.current += 1;
|
|
|
+ loadmoreInfo.value.status = 'loading';
|
|
|
+ await getList();
|
|
|
+ } else {
|
|
|
+ loadmoreInfo.value.status = 'nomore';
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ try {
|
|
|
+ loadmoreInfo.value.status = 'loading';
|
|
|
+
|
|
|
+ // 请求时传递分页参数
|
|
|
+ const res = await volunteerinfolist({
|
|
|
+ pageNumber: pages.value.current, // 当前页码
|
|
|
+ pageSize: pages.value.pageSize // 每页大小
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log(res, '>>>>>>>res');
|
|
|
+
|
|
|
+ if (!res || !res.rows) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 判断是否已经到了最后一页
|
|
|
+ if (pages.value.current >= Math.ceil(res.total / pages.value.pageSize)) {
|
|
|
loadmoreInfo.value.status = 'nomore';
|
|
|
+ } else {
|
|
|
+ loadmoreInfo.value.status = 'loadmore';
|
|
|
}
|
|
|
+
|
|
|
+ // 将数据分成左右两列
|
|
|
+ res.rows.forEach((item, index) => {
|
|
|
+ index % 2 !== 0 ? leftList.value.push(item) : rightList.value.push(item);
|
|
|
+ });
|
|
|
+
|
|
|
+ pages.value.total = res.total;
|
|
|
+ } catch (error) {
|
|
|
+ leftList.value = [];
|
|
|
+ rightList.value = [];
|
|
|
+ loadmoreInfo.value.status = 'loadmore';
|
|
|
+ pages.value.total = 0;
|
|
|
+ console.error('Error fetching data:', error);
|
|
|
}
|
|
|
+};
|
|
|
|
|
|
- const getList = async () => {
|
|
|
- try {
|
|
|
- loadmoreInfo.value.status = 'loading';
|
|
|
-
|
|
|
- // 请求时传递分页参数
|
|
|
- const res = await volunteerinfolist({
|
|
|
- pageNumber: pages.value.current, // 当前页码
|
|
|
- pageSize: pages.value.pageSize // 每页大小
|
|
|
- });
|
|
|
-
|
|
|
- console.log(res, '>>>>>>>res');
|
|
|
-
|
|
|
- if (!res || !res.rows) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- // 判断是否已经到了最后一页
|
|
|
- if (pages.value.current >= Math.ceil(res.total / pages.value.pageSize)) {
|
|
|
- loadmoreInfo.value.status = 'nomore';
|
|
|
- } else {
|
|
|
- loadmoreInfo.value.status = 'loadmore';
|
|
|
- }
|
|
|
-
|
|
|
- // 将数据分成左右两列
|
|
|
- res.rows.forEach((item, index) => {
|
|
|
- index % 2 !== 0 ? leftList.value.push(item) : rightList.value.push(item);
|
|
|
- });
|
|
|
-
|
|
|
- pages.value.total = res.total;
|
|
|
- } catch (error) {
|
|
|
- leftList.value = [];
|
|
|
- rightList.value = [];
|
|
|
- loadmoreInfo.value.status = 'loadmore';
|
|
|
- pages.value.total = 0;
|
|
|
- console.error('Error fetching data:', error);
|
|
|
+
|
|
|
+onReachBottom(() => {
|
|
|
+ if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
|
|
|
+ pages.value.current = pages.value.current + 1
|
|
|
+ loadmoreInfo.value.status = 'nomore'
|
|
|
+ getList()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const getBanners = async () => {
|
|
|
+ try {
|
|
|
+ const res = await slideshow(7);
|
|
|
+ if (res.code === 200 && res.data.picture) {
|
|
|
+ list3.value = res.data.picture.split(',');
|
|
|
}
|
|
|
- };
|
|
|
|
|
|
- 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);
|
|
|
+ const value_res = await slideshow(8);
|
|
|
+ if (value_res.code === 200 && value_res.data.picture) {
|
|
|
+ ValueZone.value = value_res.data.picture.split(',');
|
|
|
+ }
|
|
|
|
|
|
+ const hot_res = await slideshow(11);
|
|
|
+ if (hot_res.code === 200 && hot_res.data.picture) {
|
|
|
+ hotList.value = hot_res.data.picture.split(',');
|
|
|
}
|
|
|
+ } catch (error) {
|
|
|
+ console.log('error', error);
|
|
|
+
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- onReachBottom(() => {
|
|
|
- if (pages.value.current < Math.ceil(pages.value.total / pages.value.pageSize)) {
|
|
|
- pages.value.current = pages.value.current + 1
|
|
|
- loadmoreInfo.value.status = 'nomore'
|
|
|
- getList()
|
|
|
- }
|
|
|
- })
|
|
|
+onShow(() => {
|
|
|
+ getList()
|
|
|
+ getBanners();
|
|
|
|
|
|
- onShow(() => {
|
|
|
- getList()
|
|
|
- getBanners();
|
|
|
- })
|
|
|
+ // 在 App.vue 中初始化
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: (res) => {
|
|
|
+ const statusBarHeight = res.statusBarHeight;
|
|
|
+ const navBarHeight = res.platform === 'android' ? 48 : 44 + res.statusBarHeight;
|
|
|
+ globalData.value = { statusBarHeight, navBarHeight };
|
|
|
+ console.log('statusBarHeight', statusBarHeight, navBarHeight);
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
- .main-content {
|
|
|
- .home-banner {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 2.08rpx 4.17rpx rgba(0, 0, 0, 0.05);
|
|
|
- padding: 20rpx 16rpx;
|
|
|
- }
|
|
|
+.main-content {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
+ .home-banner {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ // background: rgba(255, 255, 255, 1);
|
|
|
+ // background-color: #ED806A;
|
|
|
+ background-color: rgba(221, 60, 62, 1);
|
|
|
+ box-shadow: 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 0rpx 0rpx rgba(0, 0, 0, 0), 0rpx 2.08rpx 4.17rpx rgba(0, 0, 0, 0.05);
|
|
|
+ padding: 20rpx 16rpx;
|
|
|
+ color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ top: 0px;
|
|
|
+ left: 0px;
|
|
|
+ right: 0;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
|
|
|
- .home-banner-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ .home-banner-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
+ .home-banner-center {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 38rpx;
|
|
|
+ }
|
|
|
|
|
|
- .home-main {
|
|
|
- padding: 12px 16px;
|
|
|
+ .home-banner-rigth {
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
|
|
|
- .custom-swiper {}
|
|
|
+ .home-main {
|
|
|
+ padding: 12px 16px 0;
|
|
|
|
|
|
- .home-grid {
|
|
|
- margin-bottom: 32px;
|
|
|
- }
|
|
|
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .home-ranking {
|
|
|
- padding: 12px 16px;
|
|
|
- }
|
|
|
+ .home-ranking {
|
|
|
+ padding: 24rpx 16px;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .hot-box {
|
|
|
- padding: 12px 16px;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- /* 3 列，每列等宽 */
|
|
|
- gap: 32rpx;
|
|
|
-
|
|
|
- .hot-item {
|
|
|
- .hot-item {
|
|
|
- padding: 12px 16px;
|
|
|
- }
|
|
|
- }
|
|
|
+.hot-box-title {
|
|
|
+ padding: 0 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.hot-swiper {
|
|
|
+ padding: 24rpx 32rpx 0;
|
|
|
+}
|
|
|
+
|
|
|
+.hot-box {
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 8rpx;
|
|
|
+
|
|
|
+
|
|
|
+ .hot-item {
|
|
|
+ // padding: 32rpx 16rpx;
|
|
|
+ // border-radius: 10rpx;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+.home-grid2 {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.home-g-bgc {
|
|
|
+ background: #f7f7f7;
|
|
|
+ padding: 24rpx;
|
|
|
+}
|
|
|
</style>
|
贾宇博
