|
|
@@ -1,16 +1,18 @@
|
|
|
<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-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>
|
|
|
@@ -18,38 +20,35 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="home-grid">
|
|
|
+
|
|
|
<Client />
|
|
|
</view>
|
|
|
|
|
|
- <view class="home-grid hot-box">
|
|
|
+ <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;">
|
|
|
+ <img :src="item" alt="" style="width: 100%;height: 160rpx;">
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="home-grid">
|
|
|
- <view class="serve-title hot-box-title">超值专区</view>
|
|
|
- <view class="hot-swiper">
|
|
|
- <up-swiper :list="ValueZone" indicator indicatorMode="line" circular></up-swiper>
|
|
|
+ <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>
|
|
|
- </view>
|
|
|
|
|
|
- <view class="home-ranking">
|
|
|
- <ServIces :leftList="leftList" :rightList="rightList" v-if="userType == 1"></ServIces>
|
|
|
- <RankingList v-if="userType === 2" />
|
|
|
+ <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"
|
|
|
- />
|
|
|
+
|
|
|
+ <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>
|
|
|
|
|
|
@@ -78,69 +77,72 @@ 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: '重庆市永川区',
|
|
|
+ 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: '已经到底啦～'
|
|
|
- })
|
|
|
-
|
|
|
- const getList = async () => {
|
|
|
- try {
|
|
|
- loadmoreInfo.value.status = 'loading'
|
|
|
-
|
|
|
- const res = await volunteerinfolist();
|
|
|
-
|
|
|
-
|
|
|
- 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'
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- listData.value.push(...res.rows)
|
|
|
-
|
|
|
-
|
|
|
- let leftArr = [];
|
|
|
- let rightArr = [];
|
|
|
-
|
|
|
- listData.value.forEach((item, index) => {
|
|
|
- index % 2 !== 0 ? leftArr.push(item) : rightArr.push(item);
|
|
|
- });
|
|
|
-
|
|
|
- leftList.value = leftArr;
|
|
|
- rightList.value = rightArr;
|
|
|
- pages.value.total = res.total;
|
|
|
- } catch (error) {
|
|
|
- listData.value = []
|
|
|
- pages.value.total = 0
|
|
|
- console.error('Error fetching data:', error);
|
|
|
- } finally {
|
|
|
+
|
|
|
+// 分页
|
|
|
+const pages = ref({
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0
|
|
|
+})
|
|
|
+
|
|
|
+const loadmoreInfo = ref({
|
|
|
+ status: 'loadmore',
|
|
|
+ loadingText: '努力加载中...',
|
|
|
+ loadmoreText: '点击加载更多~',
|
|
|
+ nomoreText: '已经到底啦～'
|
|
|
+})
|
|
|
+
|
|
|
+const getList = async () => {
|
|
|
+ try {
|
|
|
+ loadmoreInfo.value.status = 'loading'
|
|
|
+
|
|
|
+ const res = await volunteerinfolist();
|
|
|
+
|
|
|
+
|
|
|
+ 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'
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ listData.value.push(...res.rows)
|
|
|
+
|
|
|
+
|
|
|
+ let leftArr = [];
|
|
|
+ let rightArr = [];
|
|
|
+
|
|
|
+ listData.value.forEach((item, index) => {
|
|
|
+ index % 2 !== 0 ? leftArr.push(item) : rightArr.push(item);
|
|
|
+ });
|
|
|
+
|
|
|
+ leftList.value = leftArr;
|
|
|
+ rightList.value = rightArr;
|
|
|
+ pages.value.total = res.total;
|
|
|
+ } catch (error) {
|
|
|
+ listData.value = []
|
|
|
+ pages.value.total = 0
|
|
|
+ console.error('Error fetching data:', error);
|
|
|
+ } finally {
|
|
|
+ loadmoreInfo.value.status = 'loadmore'
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
|
|
|
|
|
|
@@ -169,34 +171,59 @@ const getBanners = async () => {
|
|
|
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 {
|
|
|
+ background: rgba(255, 255, 255, 1);
|
|
|
+
|
|
|
.home-banner {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
+ align-items: flex-end;
|
|
|
justify-content: space-between;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
+ // 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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -208,6 +235,7 @@ onShow(() => {
|
|
|
.hot-box-title {
|
|
|
padding: 0 32rpx;
|
|
|
}
|
|
|
+
|
|
|
.hot-swiper {
|
|
|
padding: 24rpx 32rpx 0;
|
|
|
}
|
|
|
@@ -224,4 +252,16 @@ onShow(() => {
|
|
|
// border-radius: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.home-grid2 {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ background: #fff;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.home-g-bgc {
|
|
|
+ background: #f7f7f7;
|
|
|
+ padding: 24rpx;
|
|
|
+}
|
|
|
</style>
|
chenjj
