370 lines
7.4 KiB
Vue
370 lines
7.4 KiB
Vue
<template>
|
|
<view class="">
|
|
<!-- 搜索栏 -->
|
|
<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>
|
|
<input v-model="keyword" @input="toContent" @confirm="onSearch" class="shuruText"
|
|
:placeholder="placeholderText" type="text">
|
|
</view>
|
|
<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" @click="onSearch">搜索</text>
|
|
</view>
|
|
</view>
|
|
<!-- 搜索历史 -->
|
|
<view class="history" v-if="!searchOpen">
|
|
<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="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 class="" v-if="searchOpen">
|
|
<!-- tab -->
|
|
<up-sticky offset-top="0">
|
|
<view class="tabsinfo flex alignCenter justifyCenter">
|
|
<up-tabs :list="list4" lineWidth="20" lineHeight="2" @click="tabsClick" :current="typeIndex"
|
|
lineColor="#3477FC" :activeStyle="{
|
|
color: '#000000',
|
|
fontSize: '28rpx',
|
|
transform: 'scale(1.05)'
|
|
}" :inactiveStyle="{
|
|
color: '#999999',
|
|
fontSize: '28rpx',
|
|
transform: 'scale(1.05)'
|
|
}" itemStyle=" width: 150rpx; padding-bottom:18rpx;">
|
|
</up-tabs>
|
|
</view>
|
|
</up-sticky>
|
|
<!-- 有内容 -->
|
|
<view class="" v-if="!noHistortOpen">
|
|
<!-- 列表 -->
|
|
<view class="bc-color" v-if="typeIndex == 0" v-for="(postItem, postIndex) in postList" :key="postIndex">
|
|
<PostView :postValue="postItem" :postViewIndex="2" :postViewType="0"></PostView>
|
|
<u-line></u-line>
|
|
</view>
|
|
</view>
|
|
<!-- 无内容 -->
|
|
<view v-if="noHistortOpen">
|
|
<view class="noContent">
|
|
<image src="../../static/images/icon/tu4-9.png" class="img6"></image>
|
|
<view class="noContentText">没有找到相关内容奥,换个词试试吧!</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
onMounted
|
|
} from 'vue';
|
|
import {
|
|
onReachBottom,
|
|
onShow,
|
|
onLoad,
|
|
onPullDownRefresh
|
|
} from '@dcloudio/uni-app'
|
|
import PostView from "@/pages/common/postview/index.vue";
|
|
import {
|
|
listPost,
|
|
listPostFollow,
|
|
getPost,
|
|
delPost,
|
|
addPost,
|
|
updatePost,
|
|
getLoginUserinfo
|
|
} from "@/api/talk/post";
|
|
|
|
// 响应式状态
|
|
const keyword = ref('');
|
|
const placeholderText = '在食堂捡到一张饭卡';
|
|
const bgColor = 'rgba(170, 0, 0, 0)';
|
|
const noHistortOpen = ref(false);
|
|
const searchOpen = ref(false);
|
|
const typeIndex = ref(0);
|
|
const historyList = reactive(['钥匙丢了 111', '外卖丢了', 'U盘丢了', '我丢了', '丢']);
|
|
const postList = ref([])
|
|
|
|
const list4 = reactive([{
|
|
name: '话题'
|
|
},
|
|
{
|
|
name: '活动'
|
|
},
|
|
{
|
|
name: '兼职'
|
|
},
|
|
{
|
|
name: '美食'
|
|
},
|
|
{
|
|
name: '用户'
|
|
},
|
|
]);
|
|
const total = ref(0);
|
|
const queryParams = reactive({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
title: null,
|
|
type: null
|
|
});
|
|
|
|
// 从缓存中读取历史记录
|
|
onMounted(() => {
|
|
const hisList = JSON.parse(uni.getStorageSync('kw')) || [];
|
|
if (hisList.length != 0) {
|
|
historyList.splice(0, historyList.length, ...hisList);
|
|
}
|
|
});
|
|
|
|
onLoad((options) => {
|
|
onReachBottom(() => {
|
|
console.log('触底了')
|
|
if (total.value > postList.value.length) {
|
|
queryParams.value.pageNum += 1;
|
|
getList();
|
|
}
|
|
})
|
|
})
|
|
|
|
function clickHistory(index) {
|
|
keyword.value = historyList[index];
|
|
}
|
|
|
|
function toContent() {
|
|
noHistortOpen.value = false;
|
|
}
|
|
|
|
function toScanCode() {
|
|
// 允许从相机和相册扫码
|
|
uni.scanCode({
|
|
success: function(res) {
|
|
console.log('条码类型：' + res.scanType);
|
|
console.log('条码内容：' + res.result);
|
|
}
|
|
});
|
|
}
|
|
|
|
function removePage() {
|
|
queryParams.pageNum = 1;
|
|
}
|
|
|
|
// tabs
|
|
function tabsClick(index) {
|
|
console.log(index)
|
|
typeIndex.value = index.index
|
|
removePage();
|
|
getList();
|
|
}
|
|
|
|
// 查询话题
|
|
function getPostList() {
|
|
listPost(queryParams).then(response => {
|
|
if (queryParams.pageNum > 1) {
|
|
postList.value.push(...response.rows);
|
|
} else {
|
|
postList.value = response.rows;
|
|
}
|
|
total.value = response.total;
|
|
if (total.value === 0) {
|
|
noHistortOpen.value = true;
|
|
} else {
|
|
noHistortOpen.value = false;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 查询列表
|
|
function getList() {
|
|
if (typeIndex.value == 0) {
|
|
getPostList();
|
|
}
|
|
}
|
|
|
|
function onSearch() {
|
|
console.log('搜索 ' + keyword.value);
|
|
if (keyword.value === '') {
|
|
console.log('空的');
|
|
return;
|
|
}
|
|
searchOpen.value = true;
|
|
queryParams.title = keyword.value;
|
|
getList();
|
|
saveHistory();
|
|
}
|
|
|
|
// 保存历史记录
|
|
function saveHistory() {
|
|
historyList.unshift(keyword.value);
|
|
// 把用户输入的内容保存到历史记录当中
|
|
uni.setStorageSync('kw', JSON.stringify(historyList));
|
|
}
|
|
|
|
// 清空历史记录
|
|
function clearHistory() {
|
|
historyList.splice(0, historyList.length);
|
|
uni.setStorageSync('kw', '[]');
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.bgc {
|
|
width: 750rpx;
|
|
height: 108rpx;
|
|
background: #FAF9FA;
|
|
position: fixed;
|
|
top: 0rpx;
|
|
left: 0rpx;
|
|
z-index: -1;
|
|
}
|
|
|
|
.sousuoBox1 {
|
|
margin: 16rpx 32rpx;
|
|
width: auto;
|
|
}
|
|
|
|
.sousuoBox {
|
|
width: 580rpx;
|
|
height: 60rpx;
|
|
border: #B3D7FF solid 2rpx;
|
|
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
|
background: #ffffff80;
|
|
}
|
|
|
|
.souBOx {
|
|
margin-left: 32rpx;
|
|
}
|
|
|
|
.img3 {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
|
|
.img4 {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.category-dropdown {
|
|
margin-left: 42rpx;
|
|
}
|
|
|
|
.text1 {
|
|
font-weight: 400;
|
|
width: 62rpx;
|
|
font-size: 30rpx;
|
|
text-align: left;
|
|
color: #1B1B1B;
|
|
}
|
|
|
|
.img5 {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
|
|
.shuruText {
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
text-align: left;
|
|
margin-left: 18rpx;
|
|
color: #333333;
|
|
flex-grow: 1;
|
|
/* 让输入框占据剩余空间 */
|
|
width: 380rpx;
|
|
}
|
|
|
|
.history {
|
|
margin-top: 44rpx;
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.history-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.history-title {
|
|
font-weight: 400;
|
|
width: 140rpx;
|
|
font-size: 34rpx;
|
|
text-align: left;
|
|
color: #1B1B1B;
|
|
}
|
|
|
|
.history-icon {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
}
|
|
|
|
.history-center {}
|
|
|
|
.history-item {
|
|
display: inline-block;
|
|
/* 将 history-item 设置为行内块元素 */
|
|
margin: 10rpx 12rpx;
|
|
}
|
|
|
|
.history-item-text {
|
|
font-weight: 400;
|
|
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;
|
|
text-align: center;
|
|
color: #333333;
|
|
}
|
|
|
|
.tabsinfo {
|
|
width: 100%;
|
|
height: 2.125rem;
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
}
|
|
</style> |