feat: 优化首页搜索功能交互,添加默认头像

This commit is contained in:
davy 2025-03-30 22:23:11 +08:00
parent 05d27af5a9
commit 3081fcde2e
4 changed files with 46 additions and 19 deletions

View File

@ -19,11 +19,12 @@
<!-- 快捷导航 --> <!-- 快捷导航 -->
<view class="bg-white" <view class="bg-white"
style="border-radius: 30rpx 30rpx 12rpx 12rpx;padding-top:8rpx;position: relative;margin-top:-20rpx"> style="border-radius: 30rpx 30rpx 12rpx 12rpx;padding-top:8rpx;position: relative;margin-top:-20rpx">
<view class="search-box"> <view class="search-box" @click="toSearch">
<!-- <text class="cuIcon-search" style="font-size: 40rpx;color: #A2A2A2;margin-right: 24rpx;"></text> <view class="search-input">
<input type="text" disabled placeholder="搜索酒款/酒厂" @click="toSearch"> --> <text class="cuIcon-search" style="font-size: 40rpx;color: #A2A2A2;margin-right: 24rpx;"></text>
<input style="flex:1;margin-left: 20rpx;" v-model="keyword" type="text" placeholder="搜索酒款/酒厂" @confirm="search" @input="changeSearch"> <text style="color: #A2A2A2;">搜索酒款名称品牌名称啤酒风格</text>
<view class="searchs" @click="search" style=""> </view>
<view class="searchs">
<uni-icons type="search" size="30" color="#fff"></uni-icons> <uni-icons type="search" size="30" color="#fff"></uni-icons>
</view> </view>
</view> </view>
@ -167,6 +168,7 @@
userInfo: null, userInfo: null,
featurePageList: [], // featurePageList: [], //
homeBanner: [], //banner homeBanner: [], //banner
keyword: '',
}; };
}, },
onLoad() { onLoad() {
@ -218,11 +220,12 @@
}, },
// //
toSearch() { toSearch() {
// uni.navigateTo({
// url: '/pages/index/searchBeer'
// })
uni.navigateTo({ uni.navigateTo({
url: '/pagesActivity/homeSearch' url: '/pagesActivity/homeSearch',
success: () => {
//
uni.$emit('openKeyboard')
}
}) })
}, },
changeTag(index) { changeTag(index) {
@ -257,11 +260,7 @@
// 广 // 广
closeAd() { closeAd() {
uni.setStorageSync('showHomeAD', true) uni.setStorageSync('showHomeAD', true)
uni.setTabBarStyle({
backgroundColor: '#ffffff'
})
this.$refs.ADRef.close() this.$refs.ADRef.close()
}, },
handleAD(item) { handleAD(item) {
this.closeAd() this.closeAd()
@ -337,6 +336,14 @@
uni.navigateTo({ uni.navigateTo({
url: "/pages/activityList/activityList" url: "/pages/activityList/activityList"
}) })
},
search() {
//
console.log('搜索关键词:', this.keyword);
},
changeSearch() {
//
console.log('搜索关键词:', this.keyword);
} }
} }
} }
@ -367,6 +374,13 @@
margin: 26rpx auto; margin: 26rpx auto;
box-sizing: border-box; box-sizing: border-box;
.search-input {
flex: 1;
display: flex;
align-items: center;
padding: 0 24rpx;
}
.searchs{ .searchs{
background: #D42E78; background: #D42E78;
width: 80rpx; width: 80rpx;

View File

@ -14,7 +14,7 @@
</view> </view>
<view v-else class="user-box flex align-center justify-start" :style="{'padding-top': statusBaeHeight + 60 + 'px'}" @click="$refs.loginRef.open()"> <view v-else class="user-box flex align-center justify-start" :style="{'padding-top': statusBaeHeight + 60 + 'px'}" @click="$refs.loginRef.open()">
<view class="avatar-placeholder flex align-center justify-center"> <view class="avatar-placeholder flex align-center justify-center">
<image src="/static/default-avatar.png" class="default-avatar"></image> <image src="/static/default-avatar.svg" class="default-avatar"></image>
</view> </view>
<view class="login-text flex align-center"> <view class="login-text flex align-center">
<text style="color: #333333; font-size: 36rpx; margin-right: 12rpx;">登录/认证</text> <text style="color: #333333; font-size: 36rpx; margin-right: 12rpx;">登录/认证</text>

View File

@ -3,9 +3,8 @@
<!-- 固定搜索框 --> <!-- 固定搜索框 -->
<view class="fixed-search-box" style="background-color:#19367A;border-radius: 0rpx 0rpx 24rpx 24rpx;"> <view class="fixed-search-box" style="background-color:#19367A;border-radius: 0rpx 0rpx 24rpx 24rpx;">
<view class="search-box"> <view class="search-box">
<text class="cuIcon-loading" style="font-size: 40rpx;color: #A2A2A2;margin-right: 24rpx;padding-left: 20rpx;" <text class="cuIcon-back" style="font-size: 40rpx;color: #fff;margin-right: 24rpx;padding-left: 20rpx;" @click="goBack"></text>
@click="search" :class="{ 'rotate': isRotating }"></text> <input ref="searchInput" style="flex:1;" v-model="keyword" type="text" placeholder="搜索酒款名称,品牌名称,啤酒风格" @confirm="search" @input="changeSearch" focus>
<input style="flex:1;" v-model="keyword" type="text" placeholder="搜索酒款名称,品牌名称,啤酒风格" @confirm="search" @input="changeSearch">
<view class="searchs" @click="search" style=""> <view class="searchs" @click="search" style="">
<uni-icons type="search" size="30" color="#fff"></uni-icons> <uni-icons type="search" size="30" color="#fff"></uni-icons>
</view> </view>
@ -170,8 +169,16 @@
isRotating: false isRotating: false
}; };
}, },
mounted() { onLoad() {
this.getPopularStyle() this.getPopularStyle()
//
uni.$on('openKeyboard', () => {
this.$refs.searchInput.focus()
})
},
onUnload() {
//
uni.$off('openKeyboard')
}, },
methods: { methods: {
changeSearch() { changeSearch() {

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" fill="#F6F6F6"/>
<circle cx="100" cy="80" r="40" fill="#CCCCCC"/>
<path d="M100 130C66.6667 130 40 156.667 40 190H160C160 156.667 133.333 130 100 130Z" fill="#CCCCCC"/>
</svg>

After

Width:  |  Height:  |  Size: 361 B