384 lines
9.7 KiB
Vue
384 lines
9.7 KiB
Vue
<template>
|
|
<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">
|
|
<view slot="top" class="search">
|
|
<u-search :showAction="true" placeholder="亲输入搜索内容" v-model="searchWord" actionText="搜索" :animation="true"
|
|
@custom="customFn"></u-search>
|
|
</view>
|
|
<view class="search" v-if="!dataList.length">
|
|
<view class="search-title f-36 c222">热门搜索</view>
|
|
<view class="search-label f-24 c111 flex align-center flex-wrap">
|
|
<view class="search-label-list" v-for="(item,index) in labelList" :key="index" @click="searchFn(item.searchTerm)">
|
|
{{item.searchTerm}}
|
|
</view>
|
|
</view>
|
|
<view class="search-title f-36 c222 flex justify-between align-center">
|
|
<view>近期搜索</view>
|
|
<image @click="delSearchFn(false)" src="@/static/images/icon/del.png" mode=""></image>
|
|
</view>
|
|
<view class="search-history">
|
|
<view class="search-history-list f-28 c111 flex justify-between align-center"
|
|
v-for="(item,index) in historyList" :key="index" @click="searchFn(item.searchQuery)">
|
|
<view>{{item.searchQuery}}</view>
|
|
<image @click.stop="delSearchFn(item.id)" src="@/static/images/icon/x_2.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="list-box">
|
|
<view v-for="(item,index) in dataList" :key="index">
|
|
<view class="user-item border-bottom border-eee">
|
|
<view class="user-info flex align-center justify-between">
|
|
<view class="left flex align-center" @click.stop="linkPersonalCenter(item.authorId)">
|
|
<image :src="item.authorAvatar" mode=""></image>
|
|
<view class="">
|
|
<view class="f-28 c666">
|
|
{{item.authorName}}
|
|
</view>
|
|
<view class="f-24 c666">
|
|
IP {{item.city || "未知"}} {{item.diffDays}}天前
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="image-box" @click.stop="reportFn(item)">
|
|
<image src="@/static/images/app/icon/more.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="content-title line-two" @click="toDetailPages(item,index)">
|
|
{{item.content?item.content:'分享图片'}}
|
|
</view>
|
|
<!-- <video :id="'refVideo'+item.id" v-if="item.video" :src="item.video" initial-time="1s"
|
|
:poster="item.cover" class="video-box" @play="handleVideoClick(index)"
|
|
@pause="currentVideoIndex = -1">
|
|
</video> -->
|
|
<view class="video-box" v-if="item.video" @click="toDetailPages(item,index)">
|
|
<image class="video-box-bo" src="@/static/images/app/mine/bo_fang.png" mode=""></image>
|
|
<image class="video-box-bg" :src="item.cover" mode=""></image>
|
|
</view>
|
|
<view v-if="item.image" class="image-list-box ">
|
|
<view v-if="item.image.length==1">
|
|
<view v-for="(itemImage,imageIndex) in item.image" :key="imageIndex">
|
|
<image class="image-one" :src="itemImage" mode="cover"
|
|
@click.stop="examineFn(item.image,imageIndex)"></image>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.image.length==2" style="width: 100%;" class="flex justify-between">
|
|
<view v-for="(itemImage,imageIndex) in item.image" :key="imageIndex">
|
|
<image class="image-two" :src="itemImage" mode="cover"
|
|
@click.stop="examineFn(item.image,imageIndex)"></image>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.image.length==4" style="width: 100%;" class="flex justify-between flex-wrap">
|
|
<view v-for="(itemImage,imageIndex) in item.image" :key="imageIndex">
|
|
<image class="image-two" :src="itemImage" mode="cover"
|
|
@click.stop="examineFn(item.image,imageIndex)"></image>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.image.length>2&&item.image.length!=4" class="flex-wrap flex justify-between">
|
|
<view v-for="(itemImage,imageIndex) in item.image" :key="imageIndex">
|
|
<image class="image-three" :src="itemImage" mode="cover"
|
|
@click.stop="examineFn(item.image,imageIndex)"></image>
|
|
</view>
|
|
<view v-for="(a,b) in (item.image.length%3-1)<0?0:(item.image.length%3-1)">
|
|
<view class="image-three"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="faceback-box flex align-center justify-between">
|
|
<view class="" @click.stop="delCommFn(item, index)">
|
|
<!-- <text class="red" v-if="userInfo.id == item.authorId">删除</text> -->
|
|
</view>
|
|
<view class="flex align-center justify-end">
|
|
<view class="faceback-box-item flex align-center" @click.stop="shareFn(item)">
|
|
<image src="@/static/images/app/mine/share.png"></image>
|
|
{{item.shareNum}}
|
|
</view>
|
|
<view class="faceback-box-item flex align-center" @click="toDetailPages(item,index)">
|
|
<image src="@/static/images/app/mine/information.png"></image>
|
|
{{item.replyNum}}
|
|
</view>
|
|
<view class="faceback-box-item flex align-center" @click="Like(item)">
|
|
<image v-if="!item.userIsLike" src="@/static/images/app/mine/like.png">
|
|
</image>
|
|
<image v-if="item.userIsLike" src="@/static/images/app/icon/like.png"></image>
|
|
{{item.likeNum}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getPlazaList,
|
|
getHistoryListAll,
|
|
getHistoryListSearch,
|
|
getHistoryListDel,
|
|
getHistoryListPage
|
|
} from "@/api/discover/discover.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
//搜索框
|
|
searchWord: '',
|
|
labelList: [{
|
|
name: '新能源'
|
|
},
|
|
{
|
|
name: 'BYD'
|
|
},
|
|
{
|
|
name: '轮胎常年不修会有什么隐患？应该如何避免？'
|
|
}
|
|
],
|
|
historyList: [{
|
|
name: '轮胎保质期',
|
|
id:1
|
|
},
|
|
{
|
|
name: '左转灯不亮',
|
|
id:2
|
|
},
|
|
{
|
|
name: '轮胎常年不修会有什么隐患？应该如何避免？',
|
|
id:3
|
|
}
|
|
],
|
|
dataList: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
//获取热门搜索
|
|
getHistoryListAll().then(res => {
|
|
console.log(res);
|
|
this.labelList=res.data
|
|
})
|
|
//搜索历史记录
|
|
this.getHistoryListPageFn()
|
|
},
|
|
methods: {
|
|
//删除
|
|
delSearchFn(id) {
|
|
let ids = []
|
|
if (id) {
|
|
ids = [id]
|
|
} else {
|
|
this.historyList.forEach(item => {
|
|
ids.push(item.id)
|
|
})
|
|
}
|
|
getHistoryListDel({
|
|
ids: ids
|
|
}).then(res => {
|
|
this.getHistoryListPageFn()
|
|
console.log('删除成功', res.data);
|
|
})
|
|
},
|
|
//搜索历史
|
|
getHistoryListPageFn() {
|
|
getHistoryListPage().then(res => {
|
|
console.log(res);
|
|
this.historyList=res.data
|
|
})
|
|
},
|
|
//点击热门,近期
|
|
searchFn(item) {
|
|
this.searchWord = item
|
|
this.$refs.paging.reload()
|
|
},
|
|
//搜索
|
|
customFn() {
|
|
if (this.searchWord) {
|
|
getHistoryListSearch(this.searchWord).then(res => {
|
|
console.log('添加成功');
|
|
})
|
|
}
|
|
this.$refs.paging.reload()
|
|
},
|
|
toDetailPages(item, index) {
|
|
uni.navigateTo({
|
|
url: `/pages/driver/index/detail?id=${item.id}`
|
|
})
|
|
},
|
|
//查看
|
|
examineFn(urlList, index) {
|
|
uni.previewImage({
|
|
urls: urlList,
|
|
current: index,
|
|
loop: true
|
|
})
|
|
},
|
|
//列表
|
|
queryList(page, limit) {
|
|
getPlazaList({
|
|
searchWord: this.searchWord,
|
|
categoryId: 1,
|
|
page,
|
|
limit
|
|
}).then(res => {
|
|
console.log(res.data.list);
|
|
res.data.list.forEach(item => {
|
|
if (item.image != '') {
|
|
item.image = item.image.split(",")
|
|
} else {
|
|
item.image = []
|
|
}
|
|
const date1 = new Date();
|
|
const date2 = new Date(item.createTime);
|
|
// 计算相差的毫秒数
|
|
const diffTime = Math.abs(date2 - date1);
|
|
// 将毫秒数转换为天数
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
item.diffDays = diffDays
|
|
})
|
|
this.$refs.paging.complete(res.data.list);
|
|
}).catch(err => {
|
|
this.$refs.paging.complete(false)
|
|
})
|
|
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.search {
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.search-title {
|
|
margin: 48rpx 0 24rpx 0;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
|
|
.search-history {
|
|
.search-history-list {
|
|
margin-bottom: 24rpx;
|
|
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-label {
|
|
|
|
.search-label-list {
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 30rpx;
|
|
background: #F3F3F3;
|
|
margin-right: 32rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
}
|
|
|
|
.list-box {
|
|
padding: 0 32rpx;
|
|
|
|
.user-item {
|
|
padding-top: 48rpx;
|
|
|
|
.user-info {
|
|
.left {
|
|
image {
|
|
margin-right: 16rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.image-box {
|
|
image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-title {
|
|
margin-top: 16rpx;
|
|
max-height: 86rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #111111;
|
|
line-height: 43rpx;
|
|
}
|
|
|
|
|
|
.video-box {
|
|
width: 686rpx;
|
|
height: 686rpx;
|
|
border-radius: 8rpx;
|
|
margin-top: 24rpx;
|
|
position: relative;
|
|
|
|
.video-box-bg {
|
|
width: 686rpx;
|
|
height: 686rpx;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.video-box-bo {
|
|
position: absolute;
|
|
top: calc(50% - 60rpx);
|
|
left: calc(50% - 60rpx);
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
z-index: 999;
|
|
}
|
|
}
|
|
|
|
|
|
.image-list-box {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
|
|
.image-one {
|
|
width: 686rpx;
|
|
height: 686rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.image-two {
|
|
width: 330rpx;
|
|
height: 330rpx;
|
|
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.image-three {
|
|
width: 218rpx;
|
|
height: 218rpx;
|
|
box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.09);
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.faceback-box {
|
|
padding: 34rpx 0;
|
|
|
|
.faceback-box-item {
|
|
margin-left: 48rpx;
|
|
|
|
}
|
|
|
|
image {
|
|
margin: 0 16rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |