|
@@ -2,7 +2,7 @@
|
|
<view class="container activity-content activity-search-content">
|
|
<view class="container activity-content activity-search-content">
|
|
<view class="top-content">
|
|
<view class="top-content">
|
|
<!-- 搜索 -->
|
|
<!-- 搜索 -->
|
|
- <view class="searchTarget-header" v-if="!dynamicName">
|
|
|
|
|
|
+ <view class="searchTarget-header">
|
|
<input type="text" placeholder="请输入关键字" placeholder-class="sea_ipt_placeholder" class="sea_ipt" v-model="searchTxt" focus="true" confirm-type="search" @confirm="searchHandle" />
|
|
<input type="text" placeholder="请输入关键字" placeholder-class="sea_ipt_placeholder" class="sea_ipt" v-model="searchTxt" focus="true" confirm-type="search" @confirm="searchHandle" />
|
|
<icon type="search" size="15" class="sea_ico" />
|
|
<icon type="search" size="15" class="sea_ico" />
|
|
<view class="ipt-right">
|
|
<view class="ipt-right">
|
|
@@ -11,55 +11,43 @@
|
|
<text @click="searchHandle" style="color: #3385ff">搜索</text>
|
|
<text @click="searchHandle" style="color: #3385ff">搜索</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <!-- 选中的气泡主题 -->
|
|
|
|
- <view class="dynamic-name" v-if="dynamicName">
|
|
|
|
- <text>{{ dynamicName }}</text>
|
|
|
|
- <icon type="clear" size="16" color="#E0E0E0" @click="clearDynamicName" />
|
|
|
|
- </view>
|
|
|
|
- <!-- 搜索历史 -->
|
|
|
|
- <view class="search-cont-top" v-if="!isShowSearch && historySearchList.length">
|
|
|
|
- <view class="cont-tit">
|
|
|
|
- <text>搜索历史</text>
|
|
|
|
- <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/empty_ico.png" class="empty_ico" @click="clearHistory"></image>
|
|
|
|
|
|
+ <view class="search-cont" v-if="!isShowSearch">
|
|
|
|
+ <view class="search-cont-top">
|
|
|
|
+ <view class="cont-tit">
|
|
|
|
+ <text>热搜关键词:</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="targetList">
|
|
|
|
+ <view class="target-item text_oneLine" v-for="(item, index) in hotKeyWord" :key="index" @click="chooseTarget(item.KeyWord)"># {{ item.KeyWord }}</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- <view class="targetList">
|
|
|
|
- <view class="target-item" v-for="(item, index) in historySearchList" :key="index" @click="chooseTarget(item)">{{ item }}</view>
|
|
|
|
|
|
+ <view class="search-cont-top">
|
|
|
|
+ <view class="cont-tit">
|
|
|
|
+ <text>推荐关键词:</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="targetList">
|
|
|
|
+ <view class="target-item text_oneLine" v-for="(item, index) in keywordList" :key="index" @click="chooseTarget(item)"># {{ item }}</view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
- <!-- 气泡主题list -->
|
|
|
|
- <view class="dynamic-content" v-if="!isShowSearch">
|
|
|
|
- <view class="target-title"> 推荐关键词: </view>
|
|
|
|
- <view class="target-item">
|
|
|
|
- <view class="target-ul target-left">
|
|
|
|
- <view class="target-text" v-for="(item, index) in dynamicList" :key="index" v-if="index % 2 === 0">
|
|
|
|
- <text @click="changeTarget(item.KeyWord)">
|
|
|
|
- {{ item.KeyWord }}
|
|
|
|
- </text>
|
|
|
|
- </view>
|
|
|
|
- <view class="lucency" style="width: 65rpx">
|
|
|
|
- <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/broadside-ico.png" mode=""></image>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="search-cont-top" v-if="historySearchList.length">
|
|
|
|
+ <view class="cont-tit">
|
|
|
|
+ <text>搜索历史:</text>
|
|
|
|
+ <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/empty_ico.png" class="empty_ico" @click="clearHistory"></image>
|
|
</view>
|
|
</view>
|
|
- <view class="target-ul target-right">
|
|
|
|
- <view class="target-text" v-for="(item, index) in dynamicList" :key="index" v-if="index % 2 !== 0">
|
|
|
|
- <text @click="changeTarget(item.KeyWord)">
|
|
|
|
- {{ item.KeyWord }}
|
|
|
|
- </text>
|
|
|
|
- </view>
|
|
|
|
- <view class="lucency" style="width: 35rpx">
|
|
|
|
- <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/broadside-ico.png" mode=""></image>
|
|
|
|
- </view>
|
|
|
|
|
|
+ <view class="targetList">
|
|
|
|
+ <block v-for="(item, index) in historySearchList" :key="index">
|
|
|
|
+ <view v-if="index < 8" class="target-item text_oneLine" @click="chooseTarget(item)"># {{ item }}</view>
|
|
|
|
+ </block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 各种状态选择 -->
|
|
<!-- 各种状态选择 -->
|
|
- <view class="select-conyent" v-if="isShowSearch && !dynamicName">
|
|
|
|
|
|
+ <view class="select-conyent" v-if="isShowSearch">
|
|
<text @click="handelState(item)" :class="['state-item', activeState == item.state && 'state-active-item']" v-for="item in activeStateOption" :key="item.name">{{ item.name }}</text>
|
|
<text @click="handelState(item)" :class="['state-item', activeState == item.state && 'state-active-item']" v-for="item in activeStateOption" :key="item.name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 内容列表部分 -->
|
|
<!-- 内容列表部分 -->
|
|
<!-- 活动列表 -->
|
|
<!-- 活动列表 -->
|
|
- <view v-if="haveData" class="activity-pages" :class="dynamicName ? 'activity-page' : ''">
|
|
|
|
|
|
+ <view v-if="haveData" class="activity-pages">
|
|
<view class="collect-ul">
|
|
<view class="collect-ul">
|
|
<view class="collect-ltem" v-for="(item, index) in collectList" :key="index">
|
|
<view class="collect-ltem" v-for="(item, index) in collectList" :key="index">
|
|
<view class="title-date" @click="goDetail(item)">
|
|
<view class="title-date" @click="goDetail(item)">
|
|
@@ -180,7 +168,7 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { activity, User } from "@/config/api.js";
|
|
|
|
|
|
+import { activity, User, Search } from "@/config/api.js";
|
|
import { Throttle } from "@/config/util.js";
|
|
import { Throttle } from "@/config/util.js";
|
|
import modalDialog from "@/components/modalDialog.vue";
|
|
import modalDialog from "@/components/modalDialog.vue";
|
|
import areaCode from "@/activityPages/components/areaCode.vue";
|
|
import areaCode from "@/activityPages/components/areaCode.vue";
|
|
@@ -193,6 +181,9 @@ let app = getApp({ allowDefault: true });
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ // 关键字列表
|
|
|
|
+ keywordList: [],
|
|
|
|
+ chartWordList: [],
|
|
searchTxt: "",
|
|
searchTxt: "",
|
|
isShowSearch: false,
|
|
isShowSearch: false,
|
|
status: "loadmore",
|
|
status: "loadmore",
|
|
@@ -211,7 +202,7 @@ export default {
|
|
],
|
|
],
|
|
selectShow: false,
|
|
selectShow: false,
|
|
dynamicList: [],
|
|
dynamicList: [],
|
|
- dynamicName: "",
|
|
|
|
|
|
+ hotKeyWord: [],
|
|
showAudioPop: false,
|
|
showAudioPop: false,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
@@ -223,6 +214,14 @@ export default {
|
|
audioModule,
|
|
audioModule,
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ async researchHotKeyWord() {
|
|
|
|
+ const res = await Search.getKeys();
|
|
|
|
+ if (res.Ret === 200) {
|
|
|
|
+ this.hotKeyWord = res.Data.ListHot || [];
|
|
|
|
+ this.chartWordList = res.Data.List || [];
|
|
|
|
+ this.keywordList = res.Data.Item ? res.Data.Item.ConfigValue.split(",") : [];
|
|
|
|
+ }
|
|
|
|
+ },
|
|
//获取快捷主题
|
|
//获取快捷主题
|
|
fastSearchKeWord() {
|
|
fastSearchKeWord() {
|
|
activity
|
|
activity
|
|
@@ -235,19 +234,8 @@ export default {
|
|
this.dynamicList = res.Data.List || [];
|
|
this.dynamicList = res.Data.List || [];
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- //主题的点击事件
|
|
|
|
- //点击了快捷主题
|
|
|
|
- changeTarget(val) {
|
|
|
|
- if (val) {
|
|
|
|
- this.dynamicName = val;
|
|
|
|
- }
|
|
|
|
- this.getList();
|
|
|
|
- this.isShowSearch = true;
|
|
|
|
- },
|
|
|
|
- //清除主题的点击事件
|
|
|
|
//清除了快捷主题
|
|
//清除了快捷主题
|
|
clearDynamicName() {
|
|
clearDynamicName() {
|
|
- this.dynamicName = "";
|
|
|
|
this.searchTxt = "";
|
|
this.searchTxt = "";
|
|
this.collectList = [];
|
|
this.collectList = [];
|
|
this.haveData = true;
|
|
this.haveData = true;
|
|
@@ -282,20 +270,13 @@ export default {
|
|
},
|
|
},
|
|
//获取列表
|
|
//获取列表
|
|
async getList() {
|
|
async getList() {
|
|
- const res = this.dynamicName
|
|
|
|
- ? await activity.getActivityListNew({
|
|
|
|
- PageSize: this.pageSize,
|
|
|
|
- CurrentIndex: this.page_no,
|
|
|
|
- ActiveState: "2,3", //活动进行状态
|
|
|
|
- Label: this.dynamicName,
|
|
|
|
- })
|
|
|
|
- : await activity.getActivityListNew({
|
|
|
|
- PageSize: this.pageSize,
|
|
|
|
- CurrentIndex: this.page_no,
|
|
|
|
- KeyWord: this.searchTxt,
|
|
|
|
- ActiveState: "1,2,3", //活动进行状态
|
|
|
|
- PlayBack: this.activeState,
|
|
|
|
- });
|
|
|
|
|
|
+ const res = await activity.getActivityListNew({
|
|
|
|
+ PageSize: this.pageSize,
|
|
|
|
+ CurrentIndex: this.page_no,
|
|
|
|
+ KeyWord: this.searchTxt,
|
|
|
|
+ ActiveState: "1,2,3", //活动进行状态
|
|
|
|
+ PlayBack: this.activeState,
|
|
|
|
+ });
|
|
if (res.Ret !== 200) return;
|
|
if (res.Ret !== 200) return;
|
|
this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
|
|
this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
|
|
this.totalPage = res.Data.Paging.Pages; //总页数
|
|
this.totalPage = res.Data.Paging.Pages; //总页数
|
|
@@ -341,9 +322,9 @@ export default {
|
|
this.globalBgAudioManager.pause();
|
|
this.globalBgAudioManager.pause();
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
- this.showAudioPop = true;
|
|
|
|
this.$store.commit("audioBg/addAudio", { list: item.VoiceList, activityId: item.ActivityId, activityTitle: item.ActivityName });
|
|
this.$store.commit("audioBg/addAudio", { list: item.VoiceList, activityId: item.ActivityId, activityTitle: item.ActivityName });
|
|
}
|
|
}
|
|
|
|
+ this.showAudioPop = true;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -367,13 +348,11 @@ export default {
|
|
this.historySearchList = historyList;
|
|
this.historySearchList = historyList;
|
|
}
|
|
}
|
|
this.searchTxt = option.text || "";
|
|
this.searchTxt = option.text || "";
|
|
- this.dynamicName = option.dycName || "";
|
|
|
|
this.activeState = option.statesId || 0;
|
|
this.activeState = option.statesId || 0;
|
|
if (option.text) {
|
|
if (option.text) {
|
|
this.searchHandle();
|
|
this.searchHandle();
|
|
- } else if (option.dycName) {
|
|
|
|
- this.changeTarget(option.dycName);
|
|
|
|
}
|
|
}
|
|
|
|
+ this.researchHotKeyWord();
|
|
this.fastSearchKeWord();
|
|
this.fastSearchKeWord();
|
|
},
|
|
},
|
|
/* 触底 */
|
|
/* 触底 */
|
|
@@ -387,7 +366,7 @@ export default {
|
|
onShareAppMessage: function (res) {
|
|
onShareAppMessage: function (res) {
|
|
return {
|
|
return {
|
|
title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "活动搜索",
|
|
title: this.isHorzMobile ? "好友向您推荐此内容,上传名片享查研观向免费月卡!" : "活动搜索",
|
|
- path: "/activityPages/activitySearch/activitySearch?statesId=" + this.activeState + "&text=" + this.searchTxt + "&dycName=" + this.dynamicName,
|
|
|
|
|
|
+ path: "/activityPages/activitySearch/activitySearch?statesId=" + this.activeState + "&text=" + this.searchTxt,
|
|
success: (res) => {},
|
|
success: (res) => {},
|
|
fail: (err) => {},
|
|
fail: (err) => {},
|
|
};
|
|
};
|
|
@@ -406,66 +385,38 @@ export default {
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
-@import "../components/index.scss";
|
|
|
|
-.dynamic-content {
|
|
|
|
- padding: 0 0 0 0 !important;
|
|
|
|
- .target-title {
|
|
|
|
- color: #333333 !important;
|
|
|
|
- font-size: 28rpx !important;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-.dynamic-name {
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- padding: 36rpx 10rpx 20rpx !important;
|
|
|
|
- color: #3385ff;
|
|
|
|
- font-size: 28rpx;
|
|
|
|
- text {
|
|
|
|
- max-width: 100%;
|
|
|
|
- padding-right: 40rpx;
|
|
|
|
- overflow: hidden;
|
|
|
|
- text-overflow: ellipsis;
|
|
|
|
- white-space: nowrap;
|
|
|
|
- }
|
|
|
|
- icon {
|
|
|
|
- width: 32rpx;
|
|
|
|
- height: 32rpx;
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
.activity-pages {
|
|
.activity-pages {
|
|
- padding-top: 200rpx;
|
|
|
|
|
|
+ padding-top: 190rpx;
|
|
padding-bottom: 30rpx;
|
|
padding-bottom: 30rpx;
|
|
}
|
|
}
|
|
-.activity-page {
|
|
|
|
- padding-top: 100rpx !important;
|
|
|
|
-}
|
|
|
|
@import "../components/indexActivity.scss";
|
|
@import "../components/indexActivity.scss";
|
|
.activity-search-content {
|
|
.activity-search-content {
|
|
|
|
+ background-color: #f7f7f7;
|
|
.ipt-right {
|
|
.ipt-right {
|
|
z-index: 11;
|
|
z-index: 11;
|
|
}
|
|
}
|
|
.select-conyent {
|
|
.select-conyent {
|
|
display: flex;
|
|
display: flex;
|
|
- // justify-content: flex-end;
|
|
|
|
float: right;
|
|
float: right;
|
|
margin-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
height: 51rpx;
|
|
height: 51rpx;
|
|
width: 252rpx;
|
|
width: 252rpx;
|
|
- background: #f8f8fa;
|
|
|
|
border-radius: 47rpx;
|
|
border-radius: 47rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ margin-right: 30rpx;
|
|
.state-item {
|
|
.state-item {
|
|
width: 126rpx;
|
|
width: 126rpx;
|
|
height: 51rpx;
|
|
height: 51rpx;
|
|
- border-radius: 47rpx;
|
|
|
|
text-align: center;
|
|
text-align: center;
|
|
line-height: 51rpx;
|
|
line-height: 51rpx;
|
|
color: #999999;
|
|
color: #999999;
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
|
+ background-color: #f8f8fa;
|
|
}
|
|
}
|
|
.state-active-item {
|
|
.state-active-item {
|
|
background: #3385ff;
|
|
background: #3385ff;
|
|
color: #fff;
|
|
color: #fff;
|
|
|
|
+ border-radius: 47rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.title-date {
|
|
.title-date {
|
|
@@ -491,5 +442,97 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .top-content {
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: fixed;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ z-index: 99;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ .searchTarget-header {
|
|
|
|
+ position: relative;
|
|
|
|
+ width: 100%;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ padding: 20rpx 0;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ .sea_ipt_placeholder {
|
|
|
|
+ color: #8d8d8d;
|
|
|
|
+ }
|
|
|
|
+ .sea_ipt {
|
|
|
|
+ width: 682rpx;
|
|
|
|
+ height: 70rpx;
|
|
|
|
+ line-height: 70rpx;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ border: 1rpx solid #e5e5e5;
|
|
|
|
+ background-color: rgba(245, 245, 245, 0.2);
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ color: #4a4a4a;
|
|
|
|
+ padding: 0 180rpx 0 78rpx;
|
|
|
|
+ border-radius: 70rpx;
|
|
|
|
+ }
|
|
|
|
+ .sea_ico {
|
|
|
|
+ width: 31rpx;
|
|
|
|
+ height: 31rpx;
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: 60rpx;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ }
|
|
|
|
+ .ipt-right {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 59rpx;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ color: #3385ff;
|
|
|
|
+ .line {
|
|
|
|
+ margin: 0 21rpx;
|
|
|
|
+ color: #e0e0e0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .search-cont {
|
|
|
|
+ height: calc(100vh - 200rpx);
|
|
|
|
+ padding-bottom: 20rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ overflow-y: auto;
|
|
|
|
+ background-color: #f7f7f7;
|
|
|
|
+ .search-cont-top {
|
|
|
|
+ padding: 0 34rpx 0;
|
|
|
|
+ margin-bottom: 10rpx;
|
|
|
|
+ padding-top: 20rpx;
|
|
|
|
+ &:last-child {
|
|
|
|
+ margin-bottom: 0;
|
|
|
|
+ }
|
|
|
|
+ .cont-tit {
|
|
|
|
+ font-size: 32rpx;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ .empty_ico {
|
|
|
|
+ width: 32rpx;
|
|
|
|
+ height: 33rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .targetList {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
+ font-size: 28rpx;
|
|
|
|
+ .target-item {
|
|
|
|
+ width: 50%;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ .chart-item {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|