合并话题/搜索页面
parent
59bacf7900
commit
572d90c867
|
|
@ -92,9 +92,8 @@
|
|||
}, {
|
||||
"path": "pages/search/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "搜索",
|
||||
|
||||
"navigationStyle": "custom" ,
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}],
|
||||
"tabBar": {
|
||||
|
|
|
|||
362
pages/index.vue
362
pages/index.vue
|
|
@ -4,7 +4,16 @@
|
|||
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
||||
<template class="img1BOX" #left>
|
||||
<image src="../static/images/icon/tu2-4.png" class="img1"></image>
|
||||
<image src="../static/images/icon/tu2-5.png" class="img2"></image>
|
||||
<!-- <image src="../static/images/icon/tu2-5.png" class="img2 image-container" @click="togglePostType"></image> -->
|
||||
<view class="image-container">
|
||||
<image src="../static/images/icon/tu2-5.png" class="img2" @click="togglePostType"></image>
|
||||
<!-- 加号小弹窗 -->
|
||||
<view class="postTypeContainer" v-if="postTypeOpen">
|
||||
<view class="postTypeWindow" v-for="(item, index) in postTypeList" :key="index">
|
||||
<text>{{item}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
<template class="img2Box" #center>
|
||||
|
|
@ -21,16 +30,18 @@
|
|||
<view class="bgc"></view>
|
||||
<!-- 搜索栏 -->
|
||||
<view class="sousuoBox1 flex alignCenter justifyBetween">
|
||||
<view class="sousuoBox flex alignCenter justifyBetween">
|
||||
<view class="souBOx flex alignCenter" @click="toEarch">
|
||||
<view class="sousuoBox flex alignCenter justifyBetween" @click="toEarch">
|
||||
<view class="souBOx flex alignCenter">
|
||||
<image src="../static/images/icon/tu2-2.png" class="img3"></image>
|
||||
<view class="shuruText">在食堂捡到一张饭卡</view>
|
||||
</view>
|
||||
<image src="../static/images/icon/tu2-3.png" class="img4"></image>
|
||||
<image @click.stop="toScanCode" src="../static/images/icon/tu2-3.png" class="img4"></image>
|
||||
</view>
|
||||
<view class="category-dropdown flex alignCenter">
|
||||
<text class="text1 flex alignCenter">热门</text>
|
||||
<image src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image>
|
||||
<view class="category-dropdown flex alignCenter" @click="searchOpen = !searchOpen">
|
||||
<text class="text1 flex alignCenter">{{searchPrerequisite}}</text>
|
||||
<image v-if="!searchOpen" src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image>
|
||||
<!-- <image v-else src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image> -->
|
||||
<u-icon v-else name="arrow-up-fill" size="26rpx" class="flex alignCenter"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="center-content">
|
||||
|
|
@ -68,21 +79,43 @@
|
|||
<view class="center-content-post-head">
|
||||
<!-- 左对齐 -->
|
||||
<view class="flex alignCenter">
|
||||
<u-avatar size="84rpx" :src="item.avatar"></u-avatar>
|
||||
<!-- 头像 -->
|
||||
<div class="avatar-container">
|
||||
<u-avatar class="avatar-1" size="84rpx" :src="item.avatar"></u-avatar>
|
||||
<image v-if="item.isOfficial" class="official-1" src="../static/images/icon/tu3-6.png"></image>
|
||||
</div>
|
||||
<!-- 用户名 -->
|
||||
<view class="center-content-post-head-title">
|
||||
<text class="center-content-post-head-title-uname">{{item.uname}}</text>
|
||||
<text class="center-content-post-head-title-timeAddress">{{item.createTime + '·' + item.address}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 右对齐 -->
|
||||
<view class="flex alignCenter">
|
||||
<view class="flex alignCenter" v-if="viewIndex != 0">
|
||||
<text class="no-focus-text" v-if="item.isFocus" @click="addFocus(index)">关注</text>
|
||||
<text class="focus-text" v-else @click="cancelFocus(index)">已关注</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="center-content-post-title" v-if="item.title">{{item.title}}</text>
|
||||
<text class="center-content-post-content">{{item.content}}</text>
|
||||
<!-- 图片 -->
|
||||
<!--一张图片-->
|
||||
<block v-if="item.media.length == 1">
|
||||
<image :lazy-load="true" mode="aspectFill" class="img-style-1" :src="item.media[0]"
|
||||
@tap="previewImage(item.media[0], item.media)"></image>
|
||||
</block>
|
||||
<!--二张图片-->
|
||||
<block v-if="item.media.length == 2">
|
||||
<view class="img-style-2">
|
||||
<image :lazy-load="true" v-for="(mediaItem, index2) in item.media" :key="index2"
|
||||
@tap.stop="previewImage(mediaItem, item.media)" mode="aspectFill"
|
||||
:src="mediaItem"></image>
|
||||
</view>
|
||||
</block>
|
||||
<!--三张图片-->
|
||||
<block v-if="item.media.length >= 3">
|
||||
<u-album :urls="item.media" singleSize="660rpx" multipleSize="220rpx" space="10rpx" maxCount="3"></u-album>
|
||||
</block>
|
||||
<!-- tab -->
|
||||
<view class="center-content-post-tab" style="display: flex;">
|
||||
<text
|
||||
|
|
@ -139,6 +172,60 @@
|
|||
<u-line></u-line>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 热门弹出层 -->
|
||||
<u-popup :round="20" :show="searchOpen" mode="bottom" @close="searchOpen = false" @open="searchOpen = true">
|
||||
|
||||
<view style="height: 77vh; position: relative;margin-left: 32rpx;">
|
||||
<view style="display: flex; height: 48rpx; margin-top: 32rpx;">
|
||||
<image src="../static/images/icon/tu3-5.png" style="width: 48rpx; height: 48rpx;" @click="handerShowHand"></image>
|
||||
|
||||
<view style="
|
||||
margin: auto ;
|
||||
margin-right: 308rpx;
|
||||
font-weight: 600;
|
||||
width: 136rpx;
|
||||
height: 35rpx;
|
||||
font-size: 34rpx;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
line-height: 35rpx;
|
||||
">
|
||||
全部类目
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<text style="
|
||||
font-weight: Regular;
|
||||
width: 338rpx;
|
||||
height: 26rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: left;
|
||||
color: #999999;
|
||||
display: block;
|
||||
margin-top: 42rpx;
|
||||
">点击选择类目，仅可选择一个</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="box-a">
|
||||
<view class="box-b" v-for="(item, index) in searchPrerequisiteList" :key="index">
|
||||
<ul
|
||||
class="box-c"
|
||||
:class="{ 'box-d': lefther === index }"
|
||||
@click="handerShowHand"
|
||||
>
|
||||
<li class="offtext" :class="{ boxtext: lefther === index }" @click.stop="handerLi(index)">
|
||||
<text>{{ item }}</text>
|
||||
</li>
|
||||
</ul>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -148,7 +235,15 @@
|
|||
data() {
|
||||
return {
|
||||
viewIndex: 0,
|
||||
searchOpen: false,
|
||||
lefther: 0,
|
||||
searchPrerequisite: '热门',
|
||||
postTypeOpen: false,
|
||||
postTypeList: ['发布话题', '发布活动'],
|
||||
bgColor: 'rgba(170, 0, 0, 0)',
|
||||
searchPrerequisiteList: [
|
||||
'热门', '最新', '筛选3', '筛选4', '筛选5', '筛选6', '筛选7', '筛选8', '筛选9'
|
||||
],
|
||||
list1: [{
|
||||
name: '关注',
|
||||
}, {
|
||||
|
|
@ -173,12 +268,14 @@
|
|||
createTime: '11分钟前',
|
||||
address: '南开大学',
|
||||
isFocus: false,
|
||||
isOfficial: true,
|
||||
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||||
content: '八年前，学弟在工地上杀了一个工友，杀人前，他给警察打了电话，预告杀人的时间和地点，并......',
|
||||
type: '1',
|
||||
media: [
|
||||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
|
||||
'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
|
||||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||
],
|
||||
tab: [
|
||||
|
|
@ -197,6 +294,7 @@
|
|||
createTime: '2024-5-5',
|
||||
address: '南开大学',
|
||||
isFocus: false,
|
||||
isOfficial: false,
|
||||
// title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||||
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
|
||||
type: '1',
|
||||
|
|
@ -212,6 +310,29 @@
|
|||
commentCount: 13,
|
||||
ifFavorite: true,
|
||||
favoriteCount: 13
|
||||
},{
|
||||
avatar: 'https://picx.zhimg.com/v2-02f89d05a781ffed9fd2e32654d93135_720w.jpg?source=172ae18b',
|
||||
uname: '恋爱60秒',
|
||||
createTime: '2024-5-4',
|
||||
address: '理工大学',
|
||||
isFocus: false,
|
||||
isOfficial: false,
|
||||
title: '怎么评论爱德华·艾尔加这位音乐家及其他的作品,欢迎大家发表自己的看法？',
|
||||
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台，于2011年1月正式上线',
|
||||
type: '1',
|
||||
media: [
|
||||
'https://tu.sioe.cn/gj/qiege/image.jpg',
|
||||
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
|
||||
],
|
||||
tab: [
|
||||
'校园风景'
|
||||
],
|
||||
transmitCount: 13,
|
||||
isLike: false,
|
||||
likeCount: 99,
|
||||
commentCount: 13,
|
||||
ifFavorite: false,
|
||||
favoriteCount: 13
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
|
@ -219,6 +340,24 @@
|
|||
console.log(this.$store.state.user.QNDomain);
|
||||
},
|
||||
methods: {
|
||||
previewImage(url, urls) {
|
||||
uni.previewImage({
|
||||
current: url, // 当前显示图片的http链接
|
||||
urls: urls // 需要预览的图片http链接列表
|
||||
});
|
||||
},
|
||||
toScanCode() {
|
||||
// 允许从相机和相册扫码
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
console.log('条码类型：' + res.scanType);
|
||||
console.log('条码内容：' + res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
togglePostType() {
|
||||
this.postTypeOpen = !this.postTypeOpen;
|
||||
},
|
||||
toEarch() {
|
||||
console.log()
|
||||
this.$tab.navigateTo('/pages/search/index')
|
||||
|
|
@ -261,12 +400,24 @@
|
|||
addFocus(index) {
|
||||
console.log(111,index)
|
||||
this.postList[index].isFocus = !this.postList[index].isFocus;
|
||||
},
|
||||
handerLi(res) {
|
||||
this.lefther = res;
|
||||
console.log(res)
|
||||
this.searchPrerequisite = this.searchPrerequisiteList[res]
|
||||
setTimeout(() => {
|
||||
this.searchOpen = !this.searchOpen
|
||||
}, 350);
|
||||
|
||||
},
|
||||
handerShowHand() {
|
||||
this.searchOpen = !this.searchOpen
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
// 微信小程序配置
|
||||
:deep(.u-navbar__content__left.data-v-f631659b, .u-navbar__content__right.data-v-f631659b){
|
||||
padding-left: 32rpx !important;
|
||||
|
|
@ -293,11 +444,8 @@
|
|||
.content {
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
.img2Box{
|
||||
|
||||
|
||||
.qiehuanBox{
|
||||
padding-left: 32rpx;
|
||||
display: flex;
|
||||
|
|
@ -306,12 +454,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.u-scroll-list.data-v-fea2b4f4 {
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
|
@ -354,29 +498,29 @@
|
|||
margin-left: 32rpx;
|
||||
}
|
||||
.img3{
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.img4{
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 32rpx;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.category-dropdown {
|
||||
margin-left: 42rpx;
|
||||
// margin-left: 42rpx;
|
||||
}
|
||||
.text1{
|
||||
font-weight: 400;
|
||||
width: 60rpx;
|
||||
height: 31rpx;
|
||||
// width: 60rpx;
|
||||
// height: 31rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: left;
|
||||
color: #1B1B1B 100%;
|
||||
color: #1B1B1B;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.img5{
|
||||
width: 26rpx;
|
||||
height: 16rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.shuruText{
|
||||
font-weight: 400;
|
||||
|
|
@ -398,7 +542,7 @@
|
|||
.center-content-focus-text{
|
||||
font-weight: 400;
|
||||
width: 174rpx;
|
||||
height: 35rpx;
|
||||
// height: 35rpx;
|
||||
font-size: 34rpx;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
|
|
@ -434,7 +578,8 @@
|
|||
.center-content-focus-item-text{
|
||||
font-weight: 400;
|
||||
width: 162rpx;
|
||||
height: 28rpx;
|
||||
// height: 28rpx;
|
||||
// line-height: 28rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
|
|
@ -467,6 +612,8 @@
|
|||
color: #000000;
|
||||
align-self: flex-start; /* 垂直起始对齐 */
|
||||
margin-bottom: 20rpx;
|
||||
height: 32rpx;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.center-content-post-head-title-timeAddress {
|
||||
|
|
@ -475,11 +622,13 @@
|
|||
text-align: left;
|
||||
color: #999999;
|
||||
align-self: flex-end; /* 垂直结束对齐 */
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
.no-focus-text {
|
||||
font-weight: 400;
|
||||
width: 58rpx;
|
||||
height: 29rpx;
|
||||
// height: 30rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #3477FC;
|
||||
|
|
@ -487,7 +636,7 @@
|
|||
.focus-text {
|
||||
font-weight: 400;
|
||||
/* width: 58rpx; */
|
||||
height: 29rpx;
|
||||
// height: 30rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #2553b4;
|
||||
|
|
@ -496,10 +645,10 @@
|
|||
display: block;
|
||||
font-weight: 600;
|
||||
/* width: 670rpx; */
|
||||
height: 80rpx;
|
||||
// height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
text-align: left;
|
||||
color: #000000 100%;
|
||||
color: #000000;
|
||||
margin-top: 30rpx;
|
||||
display: -webkit-box; /* 将文本视为弹性盒子 */
|
||||
-webkit-line-clamp: 2; /* 设置最大行数 */
|
||||
|
|
@ -510,10 +659,10 @@
|
|||
display: block;
|
||||
font-weight: 400;
|
||||
/* width: 670rpx; */
|
||||
height: 80rpx;
|
||||
// height: 80rpx;
|
||||
font-size: 32rpx;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
color: #333333;
|
||||
margin-top: 30rpx;
|
||||
margin-bottom: 34rpx;
|
||||
display: -webkit-box; /* 将文本视为弹性盒子 */
|
||||
|
|
@ -529,15 +678,16 @@
|
|||
justify-content: center !important;
|
||||
/* height: 200rpx !important; */
|
||||
}
|
||||
.data-v-723ad357 {
|
||||
.u-album__row__wrapper {}
|
||||
.data-v-6fcabaad {
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
/* width: 200rpx !important;
|
||||
/* width: 200rpx !important;
|
||||
height: 200rpx !important; */
|
||||
}
|
||||
|
||||
.center-content-post-tab{
|
||||
margin-top: 38rpx;
|
||||
margin-bottom: 54rpx;
|
||||
margin-bottom: 36rpx;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -555,19 +705,21 @@
|
|||
.center-content-post-tab-text{
|
||||
font-weight: 400;
|
||||
/* width: 139rpx; */
|
||||
height: 25rpx;
|
||||
// height: 26rpx;
|
||||
font-size: 24rpx;
|
||||
text-align: left;
|
||||
color: #3477FC;
|
||||
/* width: 130rpx; */
|
||||
height: 44rpx;
|
||||
// height: 44rpx;
|
||||
// line-height: 44rpx;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
background: #f7f8fa;
|
||||
padding: 8rpx;
|
||||
/* margin-left: 50rpx; */
|
||||
}
|
||||
.center-content-post-tab-text:nth-child(2) {
|
||||
/* 您的样式 */
|
||||
margin-left: 50rpx; /* 添加额外的左边距 */
|
||||
margin-left: 24rpx; /* 添加额外的左边距 */
|
||||
}
|
||||
|
||||
.margin50 {
|
||||
|
|
@ -575,11 +727,135 @@
|
|||
}
|
||||
.count{
|
||||
font-weight: 400;
|
||||
width: 47rpx;
|
||||
width: 48rpx;
|
||||
/* height: 23rpx; */
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #787878;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.box-a {
|
||||
margin-top: 42rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.box-b {
|
||||
width: calc(33.33% - 16rpx); /* 每行三个元素，减去外边距的总宽度 */
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.box-c {
|
||||
// width: 100%;
|
||||
// height: 82rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #f7f8fc;
|
||||
border: 2rpx solid transparent;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.offtext {
|
||||
font-weight: 400;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
font-family: "Microsoft YaHei";
|
||||
// line-height: 82rpx;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
|
||||
.boxtext {
|
||||
font-weight: 600;
|
||||
color: #91b4ff;
|
||||
}
|
||||
|
||||
.box-d {
|
||||
border-color: #91b4ff;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar-1 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.official-1 {
|
||||
position: absolute;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.img-style-1 {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 600rpx;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
width: 686rpx;
|
||||
height: 370rpx;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
background: #b3d7ff;
|
||||
}
|
||||
|
||||
.img-style-2 {
|
||||
display: flex;
|
||||
|
||||
image {
|
||||
margin: 6rpx;
|
||||
|
||||
width: 100%;
|
||||
height: 306rpx;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
}
|
||||
}
|
||||
.image-container {
|
||||
display: inline-block;
|
||||
position: relative; /* 设置父元素为相对定位 */
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
}
|
||||
|
||||
/* 其他样式... */
|
||||
|
||||
.postTypeContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center; /* 垂直居中 */
|
||||
justify-content: space-around; /* 平均分布子元素 */
|
||||
width: 202rpx;
|
||||
height: 122rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 0 0 2rpx #B4D6FF;
|
||||
position: absolute; /* 设置子元素为绝对定位 */
|
||||
top: 100%; /* 将子元素定位到父元素底部 */
|
||||
left: 50%; /* 将子元素水平居中 */
|
||||
transform: translateX(-50%); /* 通过平移来水平居中 */
|
||||
top: calc(100% + 20rpx); /* 将子元素定位到父元素底部，并增加 20rpx 的距离 */
|
||||
}
|
||||
|
||||
|
||||
.postTypeWindow {
|
||||
/* 这里不需要设置 display: flex; */
|
||||
/* 这里也不需要设置 flex-direction: column; */
|
||||
/* 这里也不需要设置 align-items: center; */
|
||||
font-weight: 400;
|
||||
width: 100rpx;
|
||||
height: 26rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 26rpx;
|
||||
text-align: left;
|
||||
color: #CAF6F5;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,241 +1,239 @@
|
|||
<template>
|
||||
<view style="position: relative; ">
|
||||
|
||||
<u-navbar leftText="" title="搜索"
|
||||
:placeholder="true"
|
||||
leftIcon="arrow-left"
|
||||
:leftIconSize="32"
|
||||
@leftClick="leftClick"
|
||||
:safeAreaInsetTop="true" :bgColor="bgColor">
|
||||
</u-navbar>
|
||||
<view class="top">
|
||||
|
||||
|
||||
|
||||
<view class="bj"></view>
|
||||
<view class="sousuoBox1">
|
||||
<view class="sousuoBox">
|
||||
<view class="souBOx">
|
||||
<image src="../../static/images/search/tu2-2.png" class="img3"></image>
|
||||
<view class="shuruText">在食堂捡到一张饭卡</view>
|
||||
<view class="">
|
||||
<!-- <u-navbar leftText=" " title="搜索" :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
|
||||
</u-navbar> -->
|
||||
<view class="bgc"></view>
|
||||
<!-- 搜索栏 -->
|
||||
<view class="sousuoBox1 flex alignCenter justifyBetween">
|
||||
<view class="sousuoBox flex alignCenter justifyBetween">
|
||||
<view class="souBOx flex alignCenter justifyBetween" >
|
||||
<image src="../static/images/icon/tu2-2.png" class="img3"></image>
|
||||
<!-- <view class="shuruText">在食堂捡到一张饭卡</view> -->
|
||||
<input v-model="keyword" @input="toContent" @confirm="onSearch" class="shuruText" :placeholder="placeholderText" type="text">
|
||||
</view>
|
||||
<image src="../../static/images/search/tu2-3.png" class="img4"></image>
|
||||
|
||||
<image @click.stop="toScanCode" src="../static/images/icon/tu2-3.png" class="img4"></image>
|
||||
</view>
|
||||
<view class="sousuoText" @click="deletehistory">搜索</view>
|
||||
|
||||
<view class="category-dropdown flex alignCenter">
|
||||
<text class="text1 flex alignCenter" @click="onSearch">搜索</text>
|
||||
<!-- <image src="../static/images/icon/tu2-1.png" class="img5 flex alignCenter"></image> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 搜索历史 -->
|
||||
<view class="history" v-if="!histortOpen">
|
||||
<view class="hustortTop">
|
||||
<view class="historyTopText">搜索历史</view>
|
||||
<image src="../../static//images/search/shanchu.png" class="img5"></image>
|
||||
<view class="history" v-if="!noHistortOpen">
|
||||
<view class="history-top">
|
||||
<view class="history-title">搜索历史</view>
|
||||
<image src="../static/images/icon/tu3-4.png" class="history-icon" @click="clearHistory"></image>
|
||||
</view>
|
||||
<view class="hustoryCenter">
|
||||
<view v-for="(item,index) in historyList" :key="index" class="hustoryList">
|
||||
<view class="item">
|
||||
{{ item }}
|
||||
<view class="history-center">
|
||||
<view v-for="(item, index) in historyList" :key="index" class="history-item">
|
||||
<text @click="clickHistory(index)" class="history-item-text">{{ item }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 无内容 -->
|
||||
<view v-if="histortOpen">
|
||||
<view v-else>
|
||||
<view class="noContent">
|
||||
<image src="../../static/images/search/noContent.png" class="img6"></image>
|
||||
<image src="../static/images/icon/tu4-9.png" class="img6"></image>
|
||||
<view class="noContentText">没有找到相关内容奥,换个词试试吧!</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
toRefs,
|
||||
getCurrentInstance
|
||||
} from 'vue';
|
||||
|
||||
const keyword = ref('')
|
||||
|
||||
const noSearch = ref(false)
|
||||
const bgColor = ref('#ffffff80')
|
||||
const leftClick = ()=> {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
})
|
||||
}
|
||||
const histortOpen = ref(false)
|
||||
const historyList = ref(['三毛流浪记','假如给我三天光明','遥望无期',
|
||||
'假如给我三天光明(青少年儿童读物)','遥望无期',
|
||||
'过年','遥望无期','纵横还第三万里'])
|
||||
|
||||
const deletehistory = () => {
|
||||
histortOpen.value = !histortOpen.value
|
||||
}
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
keyword: '',
|
||||
placeholderText: '在食堂捡到一张饭卡',
|
||||
bgColor: 'rgba(170, 0, 0, 0)',
|
||||
noHistortOpen: false,
|
||||
historyList: ['钥匙丢了 111', '外卖丢了', 'U盘丢了', '我丢了', '丢']
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 从缓存中读取历史记录
|
||||
var hisList = JSON.parse(uni.getStorageSync('kw'));
|
||||
if (hisList.length != 0) {
|
||||
this.historyList=JSON.parse(uni.getStorageSync('kw'))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickHistory(index) {
|
||||
console.log('触发')
|
||||
this.keyword = this.historyList[index]
|
||||
},
|
||||
toContent() {
|
||||
this.noHistortOpen = false
|
||||
},
|
||||
toScanCode() {
|
||||
// 允许从相机和相册扫码
|
||||
uni.scanCode({
|
||||
success: function (res) {
|
||||
console.log('条码类型：' + res.scanType);
|
||||
console.log('条码内容：' + res.result);
|
||||
}
|
||||
});
|
||||
},
|
||||
onSearch() {
|
||||
console.log('搜索 ' + this.keyword)
|
||||
//把搜索的关键字保存到historyList中
|
||||
if (this.keyword == '') {
|
||||
console.log('空的')
|
||||
this.keyword = this.placeholderText;
|
||||
}
|
||||
this.saveHistory()
|
||||
if(this.keyword == '在食堂捡到一张饭卡') {
|
||||
this.noHistortOpen = true
|
||||
}
|
||||
},
|
||||
// 保存历史记录
|
||||
saveHistory(){
|
||||
console.log('保存历史')
|
||||
// if(this.historyList.indexOf(this.keyword)==-1){
|
||||
this.historyList.unshift(this.keyword)
|
||||
// 把用户输入的内容保存到历史记录当中
|
||||
uni.setStorageSync('kw',JSON.stringify(this.historyList||'[]'))
|
||||
// }
|
||||
},
|
||||
// 清空历史记录
|
||||
clearHistory(){
|
||||
this.historyList=[]
|
||||
uni.setStorageSync('kw','[]')
|
||||
// if(his.length==0){
|
||||
// this.his=!this.his
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
:deep(.u-navbar__content__title.data-v-f631659b ){
|
||||
|
||||
text-align: center;
|
||||
font-size: 36rpx;
|
||||
color: #303133;
|
||||
|
||||
}
|
||||
|
||||
.top {
|
||||
position: relative;
|
||||
background: #ffffff80;
|
||||
.img1BOX{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
<style>
|
||||
.bgc{
|
||||
width: 750rpx;
|
||||
height: 88rpx;
|
||||
margin-top: 88rpx;
|
||||
}
|
||||
.bj{
|
||||
background-color: #FAF9FA;
|
||||
z-index: -1;
|
||||
width: 750rpx;
|
||||
height: 268rpx;
|
||||
height: 108rpx;
|
||||
background: #FAF9FA;
|
||||
position: fixed;
|
||||
top: 0rpx;
|
||||
left: 0rpx;
|
||||
z-index: -1;
|
||||
}
|
||||
.sousuoBox1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
padding: 16rpx 32rpx 16rpx 32rpx;
|
||||
.sousuoBox1{
|
||||
margin: 16rpx 32rpx;
|
||||
width: auto;
|
||||
}
|
||||
.sousuoBox{
|
||||
display: flex;
|
||||
align-content: center;
|
||||
width: 538rpx;
|
||||
width: 580rpx;
|
||||
height: 60rpx;
|
||||
border: #B3D7FF solid 2rpx;
|
||||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.souBOx {
|
||||
background: #ffffff80;
|
||||
}
|
||||
.souBOx{
|
||||
margin-left: 32rpx;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
|
||||
.shuruText {
|
||||
}
|
||||
.img3{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
.img4{
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.category-dropdown {
|
||||
margin-left: 42rpx;
|
||||
}
|
||||
.text1{
|
||||
font-weight: 400;
|
||||
width: 62rpx;
|
||||
/* height: 32rpx; */
|
||||
font-size: 30rpx;
|
||||
text-align: left;
|
||||
color: #1B1B1B;
|
||||
}
|
||||
.img5{
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.shuruText{
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #999999;
|
||||
margin-left: 18rpx;
|
||||
color: #333333;
|
||||
flex-grow: 1; /* 让输入框占据剩余空间 */
|
||||
width: 380rpx;
|
||||
}
|
||||
|
||||
.img3 {
|
||||
width: 35rpx;
|
||||
height: 35rpx;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.img4 {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
.sousuoText {
|
||||
width: 62rpx;
|
||||
height: 31rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
.history {
|
||||
margin-top: 44rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.history {
|
||||
margin-top: 30rpx;
|
||||
.hustortTop{
|
||||
.history-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-left: 32rpx;
|
||||
margin-right: 32rpx;
|
||||
.historyTopText{
|
||||
width: 139rpx;
|
||||
height: 35rpx;
|
||||
font-size: 34rpx;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.history-title {
|
||||
font-weight: 400;
|
||||
}
|
||||
.img5{
|
||||
width: 140rpx;
|
||||
/* height: 36rpx; */
|
||||
/* line-height: 36rpx; */
|
||||
font-size: 34rpx;
|
||||
text-align: left;
|
||||
color: #1B1B1B;
|
||||
}
|
||||
|
||||
.history-icon {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
}
|
||||
}
|
||||
.hustoryCenter{
|
||||
margin: 32rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
.hustoryList{
|
||||
margin-right: 24rpx;
|
||||
height: 58rpx;
|
||||
border-radius: 28rpx 28rpx 28rpx 28rpx;
|
||||
background: #f6f6f6;
|
||||
margin-bottom: 22rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item{
|
||||
font-weight: 400;
|
||||
height: 29rpx;
|
||||
font-size: 28rpx;
|
||||
// margin: 14rpx 20rpx;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.history-center {
|
||||
|
||||
}
|
||||
.noContent{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.noContentText{
|
||||
.history-item {
|
||||
display: inline-block; /* 将 history-item 设置为行内块元素 */
|
||||
margin: 10rpx 12rpx;
|
||||
}
|
||||
|
||||
.history-item-text {
|
||||
font-weight: 400;
|
||||
/* width: 140rpx; */
|
||||
/* height: 58rpx; */
|
||||
/* line-height: 58rpx; */
|
||||
/* width: 180rpx; */
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
color: #666666;
|
||||
border-radius: 30rpx; /* 调整圆角 */
|
||||
background: #f6f6f6;
|
||||
display: flex; /* 使用 Flex 布局 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
padding: 14rpx 20rpx; /* 添加内边距 */
|
||||
}
|
||||
|
||||
.img6{
|
||||
width: 326rpx;
|
||||
height: 280rpx;
|
||||
}
|
||||
.noContent {
|
||||
margin-top: 150rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.noContentText{
|
||||
font-weight: 400;
|
||||
width: 490rpx;
|
||||
height: 30rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.img6{
|
||||
|
||||
width: 326rpx;
|
||||
height: 280rpx;
|
||||
margin-bottom: 56rpx;
|
||||
margin-top: 150rpx;
|
||||
}
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue