feat: 优化首页搜索功能交互,添加默认头像
This commit is contained in:
parent
05d27af5a9
commit
3081fcde2e
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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() {
|
||||||
|
6
static/default-avatar.svg
Normal file
6
static/default-avatar.svg
Normal 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 |
Loading…
x
Reference in New Issue
Block a user