566 lines
13 KiB
Vue
566 lines
13 KiB
Vue
<template>
|
||
<view class="content">
|
||
<u-sticky :enable="enable">
|
||
<view class="search-box">
|
||
<u-search bg-color="#f2f2f2" style="width: 100%;" placeholder="搜索更多资源" :focus="true" v-model="keyword" :show-action="true"
|
||
:animation="true" action-text="取消" @custom="goBack()" @search="doSearch(false)"></u-search>
|
||
</view>
|
||
</u-sticky>
|
||
<view class="search-keyword" v-if="isSearch">
|
||
<view class="keyword-block" v-if="hotKeywordList.length !=0">
|
||
<view class="keyword-list-header">
|
||
<view>热搜</view>
|
||
<view>
|
||
<image @tap="hotToggle" :src="'/static/images/index/attention'+forbid+'.png'"></image>
|
||
</view>
|
||
</view>
|
||
<view class="keyword" v-if="forbid==''">
|
||
<view v-for="(keyword,index) in hotKeywordList" @tap="doSearchs(keyword)" :key="index"
|
||
v-if="keyword">
|
||
{{keyword}}
|
||
</view>
|
||
</view>
|
||
<view class="hide-hot-tis" v-else>
|
||
<view>当前搜热已隐藏</view>
|
||
</view>
|
||
</view>
|
||
<view class="keyword-block" v-if="oldKeywordList.length>0">
|
||
<view class="keyword-list-header">
|
||
<view>历史记录</view>
|
||
<view>
|
||
<image @tap="oldDelete" src="/static/images/index/delete.png"></image>
|
||
</view>
|
||
</view>
|
||
<view class="keyword">
|
||
<view v-for="(keyword,index) in oldKeywordList" @tap="doSearch(keyword)" :key="index"
|
||
v-if="keyword">
|
||
{{keyword}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="search-list flex align-center justify-center" v-else>
|
||
<view class="search-list-box flex align-center justify-between flex-wrap">
|
||
<swiper class="swiper" :indicator-dots="true" :autoplay="true" interval="5000" duration="500"
|
||
:circular="true" style="width: 100%;height: 350rpx;margin-bottom: 20rpx;">
|
||
<swiper-item v-for="(item,index) in swiperList" :key='index' @tap="goPage(item.url)">
|
||
<image :src="item.imageUrl" mode="scaleToFill"
|
||
style="width: 100%;height: 100%;border-radius: 24rpx;"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
<videoList @success="posterSuccess" :list="keywordList" />
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<empty title="暂无视频" v-if="isSearch == false && keywordList.length==0" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import videoList from '../../../components/videoList/videoList.vue'
|
||
import empty from '../../../components/empty.vue'
|
||
export default {
|
||
components: {
|
||
empty,
|
||
videoList
|
||
},
|
||
data() {
|
||
return {
|
||
swiperList: [], //轮播图列表
|
||
enable: true,
|
||
defaultKeyword: "",
|
||
keyword: "",
|
||
oldKeywordList: [], //历史记录
|
||
hotKeywordList: [], //热搜
|
||
keywordList: [], //搜索列表
|
||
forbid: '',
|
||
isShowKeywordList: false,
|
||
limit: 10,
|
||
page: 1,
|
||
noData: true,
|
||
count: 0,
|
||
isSearch: true,
|
||
}
|
||
},
|
||
onShow() {
|
||
this.enable = true
|
||
if (uni.getStorageSync('moreSearch')) {
|
||
this.hotKeywordList = (uni.getStorageSync('moreSearch')).split(',')
|
||
} else {
|
||
this.hotKeywordList = []
|
||
}
|
||
},
|
||
onHide() {
|
||
this.enable = false
|
||
},
|
||
onLoad() {
|
||
// this.init();
|
||
// this.getSearchList()
|
||
this.getBannerList()
|
||
this.asvvvv(1212,5)
|
||
this.qweqwes(1212.5)
|
||
this.aszxcasd(1212,5)
|
||
this.asdavxz(1212,5)
|
||
this.asdqaweqwe(1212,5)
|
||
},
|
||
methods: {
|
||
//乘法函数，用来得到精确的乘法结果
|
||
//说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
|
||
//调用：mul(arg1,arg2)
|
||
//返回值：arg1乘以arg2的精确结果
|
||
//
|
||
aszxcasd(arg1, arg2) {
|
||
var m = 0,
|
||
s1 = arg1.toString(),
|
||
s2 = arg2.toString();
|
||
try {
|
||
m += s1.split(".")[1].length;
|
||
} catch (e) {
|
||
m = 0;
|
||
}
|
||
try {
|
||
m += s2.split(".")[1].length;
|
||
} catch (e) {
|
||
m = m || 0;
|
||
}
|
||
return (
|
||
(Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) /
|
||
Math.pow(10, m)
|
||
);
|
||
}, //除法函数，用来得到精确的除法结果
|
||
//说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
|
||
//调用：div(arg1,arg2)
|
||
//返回值：arg1除以arg2的精确结果
|
||
asvvvv(arg1, arg2) {
|
||
var r1, r2, m, n;
|
||
try {
|
||
r1 = arg1.toString().split(".")[1].length;
|
||
} catch (e) {
|
||
r1 = 0;
|
||
}
|
||
try {
|
||
r2 = arg2.toString().split(".")[1].length;
|
||
} catch (e) {
|
||
r2 = 0;
|
||
}
|
||
m = Math.pow(10, Math.max(r1, r2));
|
||
//动态控制精度长度
|
||
n = r1 >= r2 ? r1 : r2;
|
||
return ((arg1 * m - arg2 * m) / m).toFixed(n);
|
||
},
|
||
asdavxz(arg1, arg2) {
|
||
var r1, r2, m, n;
|
||
try {
|
||
r1 = arg1.toString().split(".")[1].length;
|
||
} catch (e) {
|
||
r1 = 0;
|
||
}
|
||
try {
|
||
r2 = arg2.toString().split(".")[1].length;
|
||
} catch (e) {
|
||
r2 = 0;
|
||
}
|
||
m = Math.pow(10, Math.max(r1, r2));
|
||
n = r1 >= r2 ? r1 : r2;
|
||
return ((arg1 * m + arg2 * m) / m).toFixed(n);
|
||
},
|
||
asdqaweqwe(arg1, arg2) {
|
||
var t1 = 0,
|
||
t2 = 0,
|
||
r1,
|
||
r2;
|
||
try {
|
||
t1 = arg1.toString().split(".")[1].length;
|
||
} catch (e) {
|
||
t1 = 0;
|
||
}
|
||
try {
|
||
t2 = arg2.toString().split(".")[1].length;
|
||
} catch (e) {
|
||
t2 = 0;
|
||
}
|
||
r1 = Number(arg1.toString().replace(".", ""));
|
||
r2 = Number(arg2.toString().replace(".", ""));
|
||
|
||
},
|
||
/**
|
||
* 保留小数n位，不进行四舍五入
|
||
* num你传递过来的数字,
|
||
* decimal你保留的几位,默认保留小数后两位
|
||
* isInt 是否保留0。如：12.20 是否保留0
|
||
*/
|
||
qweqwes(num, decimal = 2, isInt = false) {
|
||
num = num.toFixed(3).toString();
|
||
const index = num.indexOf(".");
|
||
if (index !== -1) {
|
||
num = num.substring(0, decimal + index + 1);
|
||
} else {
|
||
num = num.substring(0);
|
||
}
|
||
//截取后保留两位小数
|
||
if (isInt) {
|
||
return parseFloat(num);
|
||
} else {
|
||
return parseFloat(num).toFixed(decimal);
|
||
}
|
||
},
|
||
|
||
//乘法函数，用来得到精确的乘法结果
|
||
//说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
|
||
//调用：mul(arg1,arg2)
|
||
//返回值：arg1乘以arg2的精确结果
|
||
//点击回调
|
||
posterSuccess(item) {
|
||
let userId = uni.getStorageSync('userId')
|
||
if (userId) {
|
||
uni.navigateTo({
|
||
url: '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item.courseDetailsId +
|
||
'&tt_album_id=' + item.dyCourseId + '&tt_episode_id=' + item
|
||
.dyEpisodeId
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
},
|
||
doSearchs(keyWord) {
|
||
this.keyword = keyWord
|
||
this.doSearch(false)
|
||
},
|
||
// 跳转资源详情
|
||
goCourse(e) {
|
||
let userId = uni.getStorageSync('userId')
|
||
if (userId) {
|
||
// uni.navigateTo({
|
||
// url: '/pages/index/course/courseDet?id=' + e
|
||
// });
|
||
uni.navigateTo({
|
||
url: '/me/detail/detail?id=' + e
|
||
})
|
||
} else {
|
||
uni.navigateTo({
|
||
url: "/pages/login/login"
|
||
})
|
||
}
|
||
},
|
||
getBannerList() {
|
||
this.$u.api.bannerList({
|
||
classify: '1'
|
||
}).then(res => {
|
||
if (res.code == 0) {
|
||
res.data.forEach(d => {
|
||
if (d.state == 1) {
|
||
this.swiperList.push(d)
|
||
}
|
||
})
|
||
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 获取搜索历史
|
||
getSearchList() {
|
||
this.$u.api.SearchList().then(res => {
|
||
if (res.code == 0) {
|
||
this.hotKeywordList = res.data.allSerchName
|
||
this.oldKeywordList = res.data.userSearchName
|
||
}
|
||
})
|
||
},
|
||
//清除历史搜索
|
||
oldDelete() {
|
||
uni.showModal({
|
||
content: '确定清除历史搜索记录？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log('用户点击确定');
|
||
this.$u.api.SearchDet().then(res => {
|
||
if (res.code == 0) {
|
||
this.getSearchList()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
duration: 1000,
|
||
icon: 'none'
|
||
});
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
//执行搜索
|
||
doSearch(keyword) {
|
||
this.isSearch = false
|
||
this.isShowKeywordList = true;
|
||
this.noData = true
|
||
let data = {
|
||
title: this.keyword,
|
||
limit: this.limit,
|
||
page: this.page,
|
||
}
|
||
// #ifdef MP-WEIXIN
|
||
data.wxShow = 1
|
||
// #endif
|
||
// #ifdef MP-TOUTIAO
|
||
data.dyShow = 1
|
||
// #endif
|
||
let token = uni.getStorageSync('token')
|
||
if (token) {
|
||
this.$u.api.search(data).then(res => {
|
||
uni.stopPullDownRefresh()
|
||
if (res.code == 0) {
|
||
this.count = res.data.totalPage
|
||
if (this.page == 1) {
|
||
this.keywordList = res.data.list
|
||
} else {
|
||
this.keywordList = [...this.keywordList, ...res.data.list]
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
this.$u.api.searchs(data).then(res => {
|
||
if (res.code == 0) {
|
||
this.count = res.data.totalPage
|
||
if (this.page == 1) {
|
||
this.keywordList = res.data.list
|
||
} else {
|
||
this.keywordList = [...this.keywordList, ...res.data.list]
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 点击取消返回首页
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
//热门搜索开关
|
||
hotToggle() {
|
||
this.forbid = this.forbid ? '' : '_forbid';
|
||
},
|
||
|
||
|
||
},
|
||
onReachBottom: function() {
|
||
if (this.page < this.count) {
|
||
this.page += 1
|
||
this.doSearch();
|
||
}
|
||
},
|
||
onPullDownRefresh: function() {
|
||
this.page = 1;
|
||
this.doSearch();
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.search-box {
|
||
width: 100%;
|
||
/* background-color: rgb(242, 242, 242); */
|
||
padding: 15upx 2.5%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
// position: sticky;
|
||
// top: 0;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.search-box .mSearch-input-box {
|
||
width: 100%;
|
||
}
|
||
|
||
.search-box .input-box {
|
||
width: 85%;
|
||
flex-shrink: 1;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.search-box .search-btn {
|
||
width: 15%;
|
||
margin: 0 0 0 2%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-shrink: 0;
|
||
font-size: 28upx;
|
||
color: #ffffff;
|
||
background: linear-gradient(to right, #ff9801, #ff570a);
|
||
border-radius: 60upx;
|
||
}
|
||
|
||
.search-box .input-box>input {
|
||
width: 100%;
|
||
height: 60upx;
|
||
font-size: 32upx;
|
||
border: 0;
|
||
border-radius: 60upx;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
appearance: none;
|
||
padding: 0 3%;
|
||
margin: 0;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.placeholder-class {
|
||
color: #9e9e9e;
|
||
}
|
||
|
||
.search-keyword {
|
||
width: 100%;
|
||
}
|
||
|
||
.search-list {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
|
||
.search-list-box {
|
||
width: 686rpx;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.keyword-list-box {
|
||
height: calc(100vh - 110upx);
|
||
padding-top: 10upx;
|
||
/* border-radius: 20upx 20upx 0 0; */
|
||
/* background-color: #fff; */
|
||
}
|
||
|
||
.keyword-entry-tap {
|
||
background-color: #eee;
|
||
}
|
||
|
||
.keyword-entry {
|
||
width: 94%;
|
||
height: 80upx;
|
||
margin: 0 3%;
|
||
font-size: 30upx;
|
||
color: #333;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: solid 1upx #e7e7e7;
|
||
}
|
||
|
||
.keyword-entry image {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
}
|
||
|
||
.keyword-entry .keyword-text,
|
||
.keyword-entry .keyword-img {
|
||
height: 80upx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.keyword-entry .keyword-text {
|
||
width: 90%;
|
||
}
|
||
|
||
.keyword-entry .keyword-img {
|
||
width: 10%;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
.keyword-block {
|
||
padding: 10upx 0;
|
||
}
|
||
|
||
.keyword-block .keyword-list-header {
|
||
width: 94%;
|
||
padding: 10upx 3%;
|
||
font-size: 27upx;
|
||
color: #333;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.keyword-block .keyword-list-header image {
|
||
width: 40upx;
|
||
height: 40upx;
|
||
}
|
||
|
||
.keyword-block .keyword {
|
||
width: 94%;
|
||
padding: 3px 3%;
|
||
display: flex;
|
||
flex-flow: wrap;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.keyword-block .hide-hot-tis {
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 28upx;
|
||
color: #6b6b6b;
|
||
}
|
||
|
||
.keyword-block .keyword>view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 60upx;
|
||
padding: 0 20upx;
|
||
margin: 10upx 20upx 10upx 0;
|
||
height: 60upx;
|
||
font-size: 28upx;
|
||
// background-color: rgb(242, 242, 242);
|
||
background: #E6EBFF;
|
||
color: #6b6b6b;
|
||
}
|
||
|
||
.centre {
|
||
text-align: center;
|
||
margin: 200rpx auto;
|
||
font-size: 32rpx;
|
||
|
||
image {
|
||
width: 360rpx;
|
||
height: 360rpx;
|
||
// margin-bottom: 20rpx;
|
||
margin: 0 auto 20rpx;
|
||
// border: 1px dotted #000000;
|
||
}
|
||
|
||
.tips {
|
||
font-size: 34rpx;
|
||
color: #5074FF;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.btn {
|
||
margin: 80rpx auto;
|
||
width: 600rpx;
|
||
border-radius: 32rpx;
|
||
line-height: 90rpx;
|
||
color: #ffffff;
|
||
font-size: 34rpx;
|
||
background: #5074FF;
|
||
}
|
||
}
|
||
</style> |