377 lines
10 KiB
Vue
377 lines
10 KiB
Vue
<template>
|
||
<view class="page" :style="themeColor">
|
||
<view class="flex flex-direction align-stretch justify-between benben-position-layout flex searchPage_flex_0"
|
||
:style="{height:CustomBarRpx+'rpx',paddingTop:StatusBarRpx+'rpx', paddingRight :capsuleWidth + 'px'}">
|
||
<view class='flex flex-wrap align-center justify-between searchPage_fd0_0'>
|
||
<text class='fu-iconfont2 searchPage_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
|
||
data-url="1"></text>
|
||
<view class='flex flex-wrap align-center flex-sub searchPage_fd0_0_c1'>
|
||
<image class='searchPage_fd0_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"53.png"'></image>
|
||
<input class='flex-sub searchPage_fd0_0_c1_c1' type="text" focus="true" placeholder="请输入关键字" confirm-type="done"
|
||
:maxlength="-1" placeholder-style="color:rgba(153, 153, 153, 1);font-size:28rpx" v-model="keyword" />
|
||
</view>
|
||
<text class='searchPage_fd0_0_c2' @tap.stop="handleSearch" data-type="navigateTo"
|
||
:data-url="`/pages/dpxq/searchResult/searchResult`">搜索</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view :style="{height: CustomBarRpx+'rpx'}"></view>
|
||
<!---flex布局flex布局开始-->
|
||
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout searchPage_flex_1">
|
||
<view class='flex flex-wrap align-center justify-between searchPage_fd1_0'>
|
||
<view class='flex flex-wrap align-center'>
|
||
<image class='searchPage_fd1_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"57.png"'></image>
|
||
<text class='searchPage_fd1_0_c0_c1'>搜索历史</text>
|
||
</view>
|
||
<image class='searchPage_fd1_0_c1' :src='STATIC_URL+"58.png"' @tap.stop="handleDelete"></image>
|
||
</view>
|
||
<view class="flex align-center padding-lr" v-if="!historyList.length">暂无历史搜索</view>
|
||
<view class='flex flex-wrap align-center'>
|
||
<view class='flex flex-wrap align-center searchPage_fd1_1_c0' v-for="(item, index) in historyList" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo"
|
||
:data-url="`/pages/dpxq/searchResult/searchResult?keyword=${item.title}&id=${sid}`">
|
||
<text class='searchPage_fd1_1_c0_c0'>{{item.title}}</text>
|
||
<!-- <image class='searchPage_fd1_1_c0_c1' :src='STATIC_URL+"60.png"' @tap.stop="deleteSearchFunc()"></image> -->
|
||
</view>
|
||
</view>
|
||
<view class='flex flex-wrap align-center justify-between searchPage_fd1_2'>
|
||
<view class='flex flex-wrap align-center'>
|
||
<image class='searchPage_fd1_2_c0_c0' mode="aspectFit" :src='STATIC_URL+"59.png"'></image>
|
||
<text class='searchPage_fd1_2_c0_c1'>热门搜索</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex align-center padding-lr" v-if="!hotList.length">暂无热门搜索</view>
|
||
<view class='flex flex-wrap align-center searchPage_fd1_3'>
|
||
|
||
<view class='flex flex-wrap align-center searchPage_fd1_3_c0' v-for="(item, index) in hotList" :key="index" @tap.stop="handleJumpDiy" data-type="navigateTo"
|
||
:data-url="`/pages/dpxq/searchResult/searchResult?keyword=${item.title}&id=${sid}`">
|
||
<text class='searchPage_fd1_3_c0_c0'>{{item.title}}</text>
|
||
<!-- <image class='searchPage_fd1_3_c0_c1' :src='STATIC_URL+"60.png"' @tap.stop="deleteSearchFunc()"></image> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!---flex布局flex布局结束-->
|
||
<benben-popup v-model="popupShow1681282077687" :mask="true" mode='center'>
|
||
<!---删除历史记录flex布局开始-->
|
||
<view class="flex flex-direction flex-wrap align-center searchPage_flex_2">
|
||
<text class='searchPage_fd2_0'>确定删除历史记录？</text>
|
||
<view class='flex flex-wrap align-center searchPage_fd2_1'>
|
||
<button class='searchPage_fd2_1_c0' @tap.stop="popupShow1681282077687=false">取消</button>
|
||
<button class='searchPage_fd2_1_c1' @tap.stop="clearSearchFunc()">确定</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!---删除历史记录flex布局结束-->
|
||
|
||
</benben-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
components: {},
|
||
|
||
|
||
data() {
|
||
return {
|
||
"popupShow1681282077687": false,
|
||
"keyword": "",
|
||
"length": "1",
|
||
historyList: [],
|
||
hotList: [],
|
||
sid: ''
|
||
};
|
||
},
|
||
computed: {
|
||
themeColor() {
|
||
return this.$store.getters.themeColor
|
||
},
|
||
appSearchHistory() { // 搜索历史
|
||
return this.$store.state.appSearchHistory
|
||
}
|
||
},
|
||
watch: {},
|
||
onLoad(options) {
|
||
this.sid = options.id || '';
|
||
},
|
||
onUnload() {
|
||
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
onShow() {
|
||
this.getSearchHistory();
|
||
this.getHotSearch();
|
||
},
|
||
onHide() {
|
||
|
||
},
|
||
onResize() {
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
|
||
},
|
||
onReachBottom(e) {
|
||
|
||
},
|
||
onPageScroll(e) {
|
||
|
||
},
|
||
methods: {
|
||
handleSearch() {
|
||
if (this.keyword.trim() == '') return this.$message.info('请输入搜索内容');
|
||
uni.navigateTo({
|
||
url: `/pages/dpxq/searchResult/searchResult?keyword=${this.keyword}&id=${this.sid}`
|
||
})
|
||
},
|
||
handleDelete() {
|
||
if (!this.historyList.length) return this.$message.info('暂无历史搜索记录');
|
||
this.$util.showModal({
|
||
title:'提示',
|
||
content: '确定删除历史记录?',
|
||
success: res => {
|
||
if (res.confirm) {
|
||
this.$api.post(global.apiUrls.postDelSearch).then(res => {
|
||
let data = res.data;
|
||
this.$message.info(data.msg);
|
||
if (data.code == 1) {
|
||
this.getSearchHistory();
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log('err: ' + JSON.stringify(err));
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getHotSearch() {
|
||
this.$api.post(global.apiUrls.getHotSearch).then(res => {
|
||
if (res.data.code == 1) {
|
||
this.hotList = res.data.data;
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
getSearchHistory() {
|
||
this.$api.post(global.apiUrls.getSearchHistory).then(res => {
|
||
if (res.data.code == 1) {
|
||
this.historyList = res.data.data;
|
||
}
|
||
})
|
||
.catch(err => {
|
||
console.log(err);
|
||
});
|
||
},
|
||
//删除搜索记录
|
||
deleteSearchFunc(name) {
|
||
this.$store.commit('appSearchHistoryDel', {
|
||
"name": name
|
||
})
|
||
},
|
||
//清空搜索记录
|
||
clearSearchFunc() {
|
||
this.$store.commit('appSearchHistoryClean', '')
|
||
this.popupShow1681282077687 = false;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
width: 100vw;
|
||
overflow-x: hidden;
|
||
min-height: calc(100vh - var(--window-bottom));
|
||
background: rgba(255, 255, 255, 1);
|
||
background-size: 100% auto !important;
|
||
}
|
||
|
||
.searchPage_flex_0 {
|
||
background: #fff;
|
||
width: 750rpx;
|
||
height: 88rpx;
|
||
overflow: hidden;
|
||
z-index: 10;
|
||
top: 0rpx;
|
||
background-size: #eee;
|
||
}
|
||
|
||
.searchPage_fd0_0_c2 {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin: 0rpx 0rpx 0rpx 32rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.searchPage_fd0_0_c1_c1 {
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #333;
|
||
}
|
||
|
||
.searchPage_fd0_0_c1_c0 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin: 0rpx 16rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.searchPage_fd0_0_c1 {
|
||
background: rgba(246, 247, 249, 1);
|
||
height: 64rpx;
|
||
background-size: 100% auto !important;
|
||
border-radius: 34rpx 34rpx 34rpx 34rpx;
|
||
padding: 12rpx 24rpx 12rpx 24rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #333;
|
||
}
|
||
|
||
.searchPage_fd0_0_c0 {
|
||
font-size: 36rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
margin: 0rpx 16rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.searchPage_fd0_0 {
|
||
padding: 0rpx 24rpx 0rpx 24rpx;
|
||
line-height: 88rpx;
|
||
}
|
||
|
||
.searchPage_flex_1 {
|
||
padding: 32rpx 32rpx 32rpx 32rpx;
|
||
}
|
||
|
||
.searchPage_fd1_3_c0_c1 {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
margin: 0rpx 0rpx 0rpx 16rpx;
|
||
}
|
||
|
||
.searchPage_fd1_3_c0_c0 {
|
||
line-height: 34rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: rgba(51, 51, 51, 1);
|
||
}
|
||
|
||
.searchPage_fd1_3_c0 {
|
||
background: rgba(246, 247, 249, 1);
|
||
height: 56rpx;
|
||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||
padding: 0rpx 32rpx 0rpx 32rpx;
|
||
margin: 12rpx 12rpx 12rpx 12rpx;
|
||
}
|
||
|
||
.searchPage_fd1_3 {
|
||
margin: 0rpx 0rpx rpx 0rpx;
|
||
}
|
||
|
||
.searchPage_fd1_2_c0_c1 {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.searchPage_fd1_2_c0_c0 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin: 0rpx 16rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.searchPage_fd1_2 {
|
||
margin: 64rpx 0rpx 23rpx 0rpx;
|
||
}
|
||
|
||
.searchPage_fd1_1_c0_c1 {
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
margin: 0rpx 0rpx 0rpx 16rpx;
|
||
}
|
||
|
||
.searchPage_fd1_1_c0_c0 {
|
||
line-height: 34rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: rgba(51, 51, 51, 1);
|
||
}
|
||
|
||
.searchPage_fd1_1_c0 {
|
||
background: rgba(246, 247, 249, 1);
|
||
height: 56rpx;
|
||
border-radius: 32rpx 32rpx 32rpx 32rpx;
|
||
padding: 0rpx 32rpx 0rpx 32rpx;
|
||
margin: 12rpx 12rpx 12rpx 12rpx;
|
||
}
|
||
|
||
.searchPage_fd1_0_c1 {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.searchPage_fd1_0_c0_c1 {
|
||
color: #333333;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.searchPage_fd1_0_c0_c0 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
margin: 0rpx 16rpx 0rpx 0rpx;
|
||
}
|
||
|
||
.searchPage_fd1_0 {
|
||
margin: 0rpx 0rpx 23rpx 0rpx;
|
||
}
|
||
|
||
.searchPage_flex_2 {
|
||
background: #fff;
|
||
margin: 0rpx 105rpx 0rpx 105rpx;
|
||
background-size: #eee;
|
||
border-radius: 25rpx 25rpx 25rpx 25rpx;
|
||
}
|
||
|
||
.searchPage_fd2_1_c1 {
|
||
background: transparent;
|
||
line-height: 45rpx;
|
||
border-radius: 0rpx 0rpx 16rpx 0rpx;
|
||
font-size: 32rpx;
|
||
color: rgba(255, 147, 0, 1);
|
||
padding: 24rpx 103rpx 24rpx 99rpx;
|
||
}
|
||
|
||
.searchPage_fd2_1_c0 {
|
||
border-right: 1px solid #EEEEEE;
|
||
background: transparent;
|
||
line-height: 45rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 16rpx;
|
||
font-size: 32rpx;
|
||
color: rgba(153, 153, 153, 1);
|
||
padding: 24rpx 103rpx 24rpx 103rpx;
|
||
}
|
||
|
||
.searchPage_fd2_1 {
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.searchPage_fd2_0 {
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
line-height: 52rpx;
|
||
color: #333333;
|
||
margin: 56rpx 0rpx 64rpx 0rpx;
|
||
}
|
||
</style>
|