首页添加搜索框 物业管理等
This commit is contained in:
赵毅
parent
29b21d9e53
commit
3f35b67705
@ -1,4 +1,6 @@
|
||||
export const apiArr = {
|
||||
isShowSearch: '/api/v1/wechat/home-page/search-enable/info', // 获取搜索框是否显示
|
||||
hotWord: '/api/v1/wechat/home-page/search-hot-word/info', // 获取搜索框热词
|
||||
list: '/api/v1/wechat/community/list', // 获取社区列表
|
||||
info: '/api/v1/wechat/community/info', // 获取单个社区信息
|
||||
isJoin: '/api/v1/wechat/community/is-join', // 用户是否加入社区、楼宇、房间
|
||||
|
||||
@ -1,13 +1,44 @@
|
||||
|
||||
.container {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.hot-word-container {
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.hot-word-scroll {
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.hot-word-item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.hot-word-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.searchBox2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.white_container {
|
||||
background: #FFFFFF;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.grid_Pic {
|
||||
width: 61.5rpx;
|
||||
height: 63.14rpx;
|
||||
@ -35,16 +66,81 @@ page {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.search2 {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.function-nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20rpx 0;
|
||||
margin: 20rpx -20rpx 0 -20rpx;
|
||||
|
||||
background-color: #f7f6fb;
|
||||
}
|
||||
|
||||
.function-item {
|
||||
width: 200rpx;
|
||||
height: 180rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 120rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 15rpx;
|
||||
margin-bottom: 10rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-box image {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
.function-item text {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.searchBox2 {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
background-color: #f6f7fb;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
margin-right: 170rpx;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.searchBox2 image {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 710rpx;
|
||||
height: 300rpx;
|
||||
margin: 0 auto;
|
||||
margin-top: 30rpx;
|
||||
margin-top: 10rpx;
|
||||
position: relative;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.swiper swiper{
|
||||
|
||||
.swiper swiper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -117,6 +213,7 @@ page {
|
||||
font-size: 36rpx;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.local {
|
||||
max-width: 414rpx;
|
||||
overflow: hidden;
|
||||
@ -124,10 +221,11 @@ page {
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
|
||||
.Tit_desc {
|
||||
padding: 0 12rpx;
|
||||
height: 36rpx;
|
||||
background: linear-gradient( 90deg, #FFA100 0%, #FF6A00 100%);
|
||||
background: linear-gradient(90deg, #FFA100 0%, #FF6A00 100%);
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
font-weight: normal;
|
||||
font-size: 26rpx;
|
||||
@ -154,6 +252,7 @@ page {
|
||||
position: relative;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.serverList_left {
|
||||
display: block;
|
||||
width: 260rpx;
|
||||
@ -161,7 +260,7 @@ page {
|
||||
margin-right: 17rpx;
|
||||
}
|
||||
|
||||
.serverList_left swiper{
|
||||
.serverList_left swiper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -182,19 +281,20 @@ page {
|
||||
|
||||
.serverItem3 {
|
||||
background: #F1FFEC;
|
||||
margin-right: 12rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.serverItem4 {
|
||||
background: #F0FDFF;
|
||||
}
|
||||
|
||||
.serverItem5 {
|
||||
background: #EFF7FF;
|
||||
margin-right: 12rpx;
|
||||
background: #EFF7FF;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.serverItem6 {
|
||||
background: linear-gradient( 180deg, #FFFFFF 0%, #FFEDF2 100%);
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #FFEDF2 100%);
|
||||
}
|
||||
|
||||
.serverItem1 image {
|
||||
@ -228,6 +328,7 @@ background: linear-gradient( 180deg, #FFFFFF 0%, #FFEDF2 100%);
|
||||
top: 30rpx;
|
||||
right: 11rpx;
|
||||
}
|
||||
|
||||
.serverItem5 image {
|
||||
width: 162rpx;
|
||||
height: 93rpx;
|
||||
@ -250,7 +351,7 @@ background: linear-gradient( 180deg, #FFFFFF 0%, #FFEDF2 100%);
|
||||
text-align: center;
|
||||
width: 710rpx;
|
||||
border-radius: 100rpx 100rpx 100rpx 100rpx;
|
||||
background: linear-gradient( 91deg, #FF7658 0%, #FF370B 100%);
|
||||
background: linear-gradient(91deg, #FF7658 0%, #FF370B 100%);
|
||||
font-weight: normal;
|
||||
font-size: 36rpx;
|
||||
color: #FFFFFF;
|
||||
@ -260,16 +361,19 @@ background: linear-gradient( 180deg, #FFFFFF 0%, #FFEDF2 100%);
|
||||
.padding_bottom32 {
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list_pic {
|
||||
width: 345rpx;
|
||||
height: 345rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.list_pic:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -10,6 +10,43 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- -->
|
||||
<!-- 功能导航区 -->
|
||||
<view class="function-nav">
|
||||
<view class="function-item">
|
||||
<div class="icon-box">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
|
||||
</div>
|
||||
<text>店铺管理</text>
|
||||
</view>
|
||||
<view class="function-item">
|
||||
<div class="icon-box">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
|
||||
</div>
|
||||
<text>供应商订单</text>
|
||||
</view>
|
||||
<view class="function-item" @click="goToWuye">
|
||||
<div class="icon-box">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/Index_add.png" mode="widthFix" />
|
||||
</div>
|
||||
<text>物业管理</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 搜索框 -->
|
||||
<div class="search2" v-if="isShowSearch">
|
||||
<div class="searchBox2">
|
||||
<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"
|
||||
mode="aspectFill"></image>
|
||||
<div class="hot-word-container">
|
||||
<div class="hot-word-scroll" :style="{ transform: 'translateY(' + scrollPosition + 'px)' }">
|
||||
<div v-for="(word, index) in hotWord" :key="index" class="hot-word-item"
|
||||
@click="handleHotWordClick(word)">
|
||||
{{ word }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiper">
|
||||
<swiper @animationfinish="swipers" autoplay circular>
|
||||
@ -19,8 +56,7 @@
|
||||
</swiper>
|
||||
|
||||
<view class="cirList">
|
||||
<view :class="['cir', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList"
|
||||
:key="index">
|
||||
<view :class="['cir', currentIdx == index ? 'active' : '']" v-for="(item, index) in bannerList" :key="index">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -55,7 +91,8 @@
|
||||
|
||||
|
||||
<view class="serverList_right">
|
||||
<view :class="['serverItem', `serverItem${index +1}` ]" @tap="headerServerClick(item)" v-for="(item, index) in homeRightList" :key="index">
|
||||
<view :class="['serverItem', `serverItem${index + 1}`]" @tap="headerServerClick(item)"
|
||||
v-for="(item, index) in homeRightList" :key="index">
|
||||
<view class="serverTit">{{ item.title }}</view>
|
||||
<image :src="item.pic_src" mode="" />
|
||||
</view>
|
||||
@ -107,6 +144,8 @@ export default {
|
||||
}, //2.注册组件
|
||||
data() {
|
||||
return {
|
||||
isShowSearch: false,
|
||||
|
||||
loading: false,
|
||||
city: "",
|
||||
qqmap_key: '',
|
||||
@ -135,14 +174,67 @@ export default {
|
||||
bottomList: [],
|
||||
bottomTotal: 0,
|
||||
flag: false,
|
||||
|
||||
hotWord: [], // 搜索热词
|
||||
scrollPosition: 0, // 滚动位置
|
||||
scrollInterval: null, // 滚动定时器
|
||||
itemHeight: 40, // 每个热词项的高度
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
goToWuye() {
|
||||
uni.navigateTo({
|
||||
url: '/packages/workOrderDashboard/index/index'
|
||||
})
|
||||
},
|
||||
|
||||
swipers(e) {
|
||||
this.currentIdx = e.detail.current
|
||||
},
|
||||
|
||||
// 处理热词点击
|
||||
handleHotWordClick(word) {
|
||||
console.log('点击的热词:', word);
|
||||
},
|
||||
|
||||
// 启动滚动动画
|
||||
startScrollAnimation() {
|
||||
// 清除已有的定时器
|
||||
if (this.scrollInterval) {
|
||||
clearInterval(this.scrollInterval);
|
||||
}
|
||||
|
||||
// 如果没有热词，不启动滚动
|
||||
if (this.hotWord.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
let index = 0;
|
||||
const totalHeight = this.hotWord.length * this.itemHeight;
|
||||
const containerHeight = this.itemHeight; // 容器高度，只显示一项
|
||||
|
||||
this.scrollInterval = setInterval(() => {
|
||||
index++;
|
||||
// 当滚动到底部时，重置到顶部
|
||||
if (index * this.itemHeight >= totalHeight) {
|
||||
this.scrollPosition = 0;
|
||||
index = 0;
|
||||
} else {
|
||||
this.scrollPosition = -index * this.itemHeight;
|
||||
}
|
||||
}, 2000); // 每2秒滚动一次
|
||||
},
|
||||
|
||||
// 停止滚动动画
|
||||
stopScrollAnimation() {
|
||||
if (this.scrollInterval) {
|
||||
clearInterval(this.scrollInterval);
|
||||
this.scrollInterval = null;
|
||||
}
|
||||
},
|
||||
|
||||
map() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shopcity/shopcity'
|
||||
@ -182,7 +274,7 @@ export default {
|
||||
type: 'wgs84',
|
||||
success: (res) => {
|
||||
const latitude = userlocat ? userlocat.lat : res.latitude;
|
||||
const longitude = userlocat ? userlocat.lng :res.longitude;
|
||||
const longitude = userlocat ? userlocat.lng : res.longitude;
|
||||
uni.request({
|
||||
url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${qqmap_key}&get_poi=0`,
|
||||
success: async (res) => {
|
||||
@ -244,7 +336,7 @@ export default {
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU
|
||||
if(e.appid) {
|
||||
if (e.appid) {
|
||||
uni.navigateToMiniProgram({
|
||||
appId: e.appid,
|
||||
path: e.link_url,
|
||||
@ -256,7 +348,7 @@ export default {
|
||||
console.log('打开成功', res)
|
||||
}
|
||||
})
|
||||
}else{
|
||||
} else {
|
||||
NavgateTo(e.link_url)
|
||||
// NavgateTo('/packages/localLife/index/index')
|
||||
}
|
||||
@ -450,6 +542,18 @@ export default {
|
||||
filterShowList(list, type) {
|
||||
if (list && list.length == 0) return [];
|
||||
return list.filter((item) => item.show_status == type);
|
||||
},
|
||||
|
||||
async showSearch() {
|
||||
const res = await request(apiArr.isShowSearch, "POST", {}, { slice: false });
|
||||
this.isShowSearch = res.search_enable == 1
|
||||
},
|
||||
|
||||
async getSearchVal() {
|
||||
const res = await request(apiArr.hotWord, "POST", {}, { slice: false });
|
||||
// 支持英文逗号和中文逗号分割
|
||||
this.hotWord = res.search_hot_word.split(/[,，]/)
|
||||
console.log("🚀 ~ getSearchVal ~ res:", this.hotWord)
|
||||
}
|
||||
|
||||
},
|
||||
@ -458,6 +562,35 @@ export default {
|
||||
const meun = menuButtonInfo();
|
||||
this.top = meun.top;
|
||||
this.localHeight = meun.height;
|
||||
this.showSearch()
|
||||
this.getSearchVal()
|
||||
},
|
||||
|
||||
onShow() {
|
||||
// 页面显示时启动滚动动画
|
||||
this.startScrollAnimation();
|
||||
},
|
||||
|
||||
onHide() {
|
||||
// 页面隐藏时停止滚动动画
|
||||
this.stopScrollAnimation();
|
||||
},
|
||||
|
||||
onUnload() {
|
||||
// 页面卸载时停止滚动动画
|
||||
this.stopScrollAnimation();
|
||||
},
|
||||
|
||||
// 监听hotWord变化，重新启动滚动
|
||||
watch: {
|
||||
hotWord: {
|
||||
handler(newVal) {
|
||||
if (newVal.length > 0) {
|
||||
this.startScrollAnimation();
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.flag = false
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user