提交 e6b1ae14 编写于 作者: 杨广俊's avatar 杨广俊

搜索改版

上级 31e57c1a
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<span class="teacher-itemname-name" v-html="item.highLightName"></span> <span class="teacher-itemname-name" v-html="item.highLightName"></span>
</div> </div>
<div class="fs13 ellipsis-1" > <div class="fs13 ellipsis-1" >
<span class="five-text-shourtcut">{{item.shortcut}}</span> <span class="five-text-shourtcut" v-html="item.shortcut">{{item.shortcut}}</span>
</div> </div>
<div class="fs13 five-text-teacher"> <div class="fs13 five-text-teacher">
<img src="../../images/teacher-icon.png" /><span class="five-text-teacher-name" v-for="(doctor, dIndex) in item.doctors" :key="dIndex"> <img src="../../images/teacher-icon.png" /><span class="five-text-teacher-name" v-for="(doctor, dIndex) in item.doctors" :key="dIndex">
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</section> </section>
<section class="history-labels-item" <section class="history-labels-item"
v-if="index < 10" v-if="index < 15"
@click="searchAction(item.keyword)" @click="searchAction(item.keyword)"
v-for="(item, index) in allLabels" :key="index" > v-for="(item, index) in allLabels" :key="index" >
<span class="history-labels-item-name"> <span class="history-labels-item-name">
......
...@@ -5,7 +5,10 @@ ...@@ -5,7 +5,10 @@
</section> </section>
<!-- <section class="history-labels-item" @click="hotLabel(item.resourceType, item.structureId, item.resourceUrl, item.labelName, item)" v-for="(item, index) in allLabels" :key="index"> --> <!-- <section class="history-labels-item" @click="hotLabel(item.resourceType, item.structureId, item.resourceUrl, item.labelName, item)" v-for="(item, index) in allLabels" :key="index"> -->
<section class="history-labels-item" @click="gotoPage(item)" v-for="(item, index) in allLabels" :key="index"> <section class="history-labels-item"
v-if="index < 15"
@click="gotoPage(item)"
v-for="(item, index) in allLabels" :key="index">
<span class="history-labels-item-name">{{item.keyword}}</span> <span class="history-labels-item-name">{{item.keyword}}</span>
</section> </section>
</article> </article>
......
...@@ -257,7 +257,6 @@ export function jumpEvaluatPage(){ ...@@ -257,7 +257,6 @@ export function jumpEvaluatPage(){
// const evaluatPageUrl = 'https://dev-phome.yunqueyi.com/gpr/#/home' // const evaluatPageUrl = 'https://dev-phome.yunqueyi.com/gpr/#/home'
// test1地址 // test1地址
// const baseUrl = 'http://10.177.10.149:8080/'
const baseUrl = 'https://test1-sc.yunqueyi.com/' const baseUrl = 'https://test1-sc.yunqueyi.com/'
const apiUrl = 'https://test1-api.yunqueyi.com/' const apiUrl = 'https://test1-api.yunqueyi.com/'
const evaluatPageUrl = 'https://test1-phome.yunqueyi.com/gpr/#/home' const evaluatPageUrl = 'https://test1-phome.yunqueyi.com/gpr/#/home'
......
此差异已折叠。
<template> <template>
<section> <section>
<form @submit.prevent="search" class="search-form"> <!-- <form @submit.prevent="search" class="search-form">
<mt-search v-model="searchText" ></mt-search> <mt-search v-model="searchText" ></mt-search>
<span class="onCancle"></span> <span class="onCancle"></span>
<button v-show="false" type="submit" /> <button v-show="false" type="submit" />
</form> -->
<form @submit.prevent="search">
<!-- <mt-search v-model="searchText" ></mt-search> -->
<div class="search-container">
<img class="search-container-img" @click="back" src="../images/sousuo/right-throw.png"/>
<div >
<span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
<input class="search-container-input" type="search" v-model="searchText">
<span class="search-container-cancle" @click.prevent="search">搜索</span>
</div>
</div>
<button v-show="false" type="submit" />
</form> </form>
<!-- 没有结果页面 --> <!-- 没有结果页面 -->
<article v-show="!(showTab1 || showTab2 || showTab3 || showTab4)" class="mt-80"> <article v-show="!(showTab1 || showTab2 || showTab3 || showTab4)" class="mt-80">
<section></section> <section></section>
...@@ -16,11 +30,11 @@ ...@@ -16,11 +30,11 @@
<!-- 有结果页面 --> <!-- 有结果页面 -->
<article id="navbar-container-wrapper" v-show="showTab1 || showTab2 || showTab3 || showTab4" style="position:relative;"> <article id="navbar-container-wrapper" v-show="showTab1 || showTab2 || showTab3 || showTab4" style="position:relative;">
<div class="navbar-container" > <div class="navbar-container" >
<div class="navbar-container-item" v-show="showTab0" :class="{'bt-2': navIndex === '0'}" @click="navIndex = '0'">综合</div> <div class="navbar-container-item" v-show="showTab0" :class="{'bt-2': navIndex === '0'}" @click="tabClick('0')">综合</div>
<div class="navbar-container-item" v-show="showTab1" :class="{'bt-2': navIndex === '1'}" @click="navIndex = '1'">课程</div> <div class="navbar-container-item" v-show="showTab1" :class="{'bt-2': navIndex === '1'}" @click="tabClick('1')">课程</div>
<div class="navbar-container-item" v-show="showTab2" :class="{'bt-2': navIndex === '2'}" @click="navIndex = '2'">五分钟医学院</div> <div class="navbar-container-item" v-show="showTab2" :class="{'bt-2': navIndex === '2'}" @click="tabClick('2')">五分钟医学院</div>
<div class="navbar-container-item" v-show="showTab3" :class="{'bt-2': navIndex === '3'}" @click="navIndex = '3'">讲师</div> <div class="navbar-container-item" v-show="showTab3" :class="{'bt-2': navIndex === '3'}" @click="tabClick('3')">讲师</div>
<div class="navbar-container-item" v-show="showTab4" :class="{'bt-2': navIndex === '4'}" @click="navIndex = '4'">健康漫画</div> <div class="navbar-container-item" v-show="showTab4" :class="{'bt-2': navIndex === '4'}" @click="tabClick('4')">健康漫画</div>
</div> </div>
<div class="fixed-split-line"></div> <div class="fixed-split-line"></div>
<div class="list-container" v-show="navIndex === '0' && showTab0"> <div class="list-container" v-show="navIndex === '0' && showTab0">
...@@ -67,7 +81,7 @@ ...@@ -67,7 +81,7 @@
</div> </div>
</article> </article>
<Loading v-show="showLoading"/> <Loading v-show="showLoading"/>
<BackTop @backTop="backTop" v-show="isShowTop" /> <BackTop ref="refBackTop" @backTop="backTop" v-show="isShowTop" />
</section> </section>
</template> </template>
...@@ -323,6 +337,13 @@ export default { ...@@ -323,6 +337,13 @@ export default {
}, },
backTop() { backTop() {
this.isShowTop = false this.isShowTop = false
},
tabClick(index) {
this.navIndex = index
this.$refs.refBackTop.backTop()
},
back() {
this.$router.push('/search')
} }
}, },
} }
...@@ -423,4 +444,65 @@ export default { ...@@ -423,4 +444,65 @@ export default {
.mt-100 { .mt-100 {
margin-top: px2rem(112px); margin-top: px2rem(112px);
} }
.search-icon {
font-size: 20px;
}
.search-icon:before {
content: "\E604";
}
.search-container {
display: flex;
position: fixed;
flex-direction: row;
text-align: center;
top: 0;
left: 0;
z-index: 3;
padding: px2rem(10px) 0;
background: #fff;
border-bottom: 1px solid #E7E7E7;
&-img {
padding: px2rem(22px) 0 0 px2rem(10px);
width: px2rem(18px);
height: px2rem(18px);
// transform: rotate(180deg);
}
&-img2 {
position: absolute;
top: px2rem(10px);
left: px2rem(30px);
z-index: 2;
img {
width: px2rem(22px);
height: px2rem(22px);
}
}
&-input {
flex: 1;
position: relative;
left: px2rem(0px);
width: px2rem(280px);
height: px2rem(26px);
margin-left: px2rem(10px);
padding-left: px2rem(22px);
border-radius: px2rem(4px);
background: rgba(246, 246, 246, 1);
color: #666;
-webkit-appearance: none;
}
&-cancle {
position: relative;
top: px2rem(2px);
left: 0;
height: px2rem(14px);
line-height: px2rem(14px);
margin-top: px2rem(2px);
font-size: px2rem(14px);
color: #999;
}
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
</style> </style>
<template>
<div>
<!-- <SearchHeader @search="search" :searchText="searchText"/> -->
<form @submit.prevent="search">
<mt-search v-model="searchText" ></mt-search>
<button v-show="false" type="submit" />
</form>
<!-- <SplitLine /> -->
<div class="mt-100"></div>
<HistoryLabels/>
<HotLabels/>
dev 环境
<img src="https://test1-file.yunqueyi.com/image/HJ_B001_YD_002_A.jpg" @click="gotoPage">
</div>
</template>
<script>
import {mapState, mapMutations} from 'vuex'
import SearchHeader from '../components/business/search-header';
import SplitLine from '../components/business/split-line';
import HistoryLabels from '../components/business/history-labels';
import HotLabels from '../components/business/hot-labels';
export default {
data() {
return {
searchText: '',
token: ''
}
},
components: {
SearchHeader,
SplitLine,
HistoryLabels,
HotLabels
},
created(){
},
computed:{
...mapState([
'sousuo'
])
},
mounted(){
let _self = this;
window.__getUserInfo = function(params){
_self.token = params.userToken
// _self.SET_USER_INFO(params)
_self.getData()
}
// window.__refresh = function(){
// _self.getUserInfo()
// }
// window.__getStatusBarHeight = function(params){
// _self.SET_NAVBAR_HEIGHT(params)
// }
// window.__getStatusBarHeight = function(parm){
// //lert(parm.statusBarHeight)
// if(window.__isAndroid){
// _this.popHeight = parseInt(parm.statusBarHeight)/2.5
// }else{
// _this.popHeight = parm.statusBarHeight
// }
// _this.ptop = _this.popHeight+'px';
// _this.menuptop = _this.popHeight+'px'
// // alert(parm.statusBarHeight);
// }
// _self.getData()
// if(window.__isWeb) {
// _self.getData()
// }
_self.getUserInfo()
// _self.getStatusBarHeight()
},
methods: {
...mapMutations([
'SET_USER_INFO', 'SET_NAVBAR_HEIGHT'
]),
// 跳转到结果页面,并
search() {
// if(!this.searchText) return;
this.$router.push({
path: '/result',
query: {
searchText: this.searchText
}
})
},
// 获取历史搜索
getData() {
let _this = this,
para = {
type: 1,
token: _this.token,
setEntry: 'headers'
}
let url = '/contents/searchKeyword/listKeywords'
this.GET(url, para).then(res => {
if (res.code == '000000') {
if (res.data && res.data.length) {
let index = Math.floor(Math.random() * res.data.length)
this.searchText = res.data[index].keyword
}
}
})
},
getUserInfo: function () {
rocNative.getUserInfo({'__funcName': '__getUserInfo'})
},
getStatusBarHeight: function () {
rocNative.getStatusBarHeight({'__funcName': '__getStatusBarHeight'})
},
gotoPage(item) {
let obj = {
}
console.log(item);
// let url = pageJumpUrl();
// console.log(url.pageListUrl);
let itemData = {
"imageUrl": "",
"appModuleInfo": {
"code": "M300",
"type": 4,
"name": "课程介绍页",
"paramFlag": 1,
"paramList": []
}
};
obj = {
menuLevel: 1,
menuCode: 'm_home',
functionCode: 'f_five_minutes',
actionCode: 'c_content',
labelId: item.id,
labelValue: item.title,
}
itemData.title = item.name;
itemData.appModuleInfo["paramList"] = [{
"key": "pageUrl",
"value": 'http://10.177.11.253:8019/#/search',
// "value": 'com.picahealth.yunque.activitys.music.WebMusicListActivity###FiveMinutesMedicalSchoolWebViewController',
"type": 4,
"seqNo": 1
}
]
// this.pageBurialPoin(obj)
let paramList = this.setEventByModuleCode(itemData);
// alert(itemData.appModuleInfo.code)
// alert(JSON.stringify(paramList))
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
},
}
</script>
<style >
.mint-search {
position: fixed;
top: 0px;
z-index: 2;
height: 66px;
width: 100%;
/* margin: 0 20px; */
border-bottom: 1px solid #E7E7E7 !important;
background-color: #fff;
}
.mint-searchbar {
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 10px;
padding: 30px 10px 8px;
z-index: 1;
}
.mint-searchbar-cancel {
margin-left: 10px;
font-size: 14px ;
color: #999;
text-decoration: none;
}
.mint-searchbar-inner {
background: #F5F6F6;
}
.mint-searchbar-core {
color: #555555;
background: #F5F6F6;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../style/mixin.scss';
@import '../style/global.scss';
.mt-100 {
padding-top: px2rem(63px) !important;
}
</style>
...@@ -3,15 +3,23 @@ ...@@ -3,15 +3,23 @@
<!-- <SearchHeader @search="search" :searchText="searchText"/> --> <!-- <SearchHeader @search="search" :searchText="searchText"/> -->
<form @submit.prevent="search"> <form @submit.prevent="search">
<mt-search v-model="searchText" ></mt-search> <!-- <mt-search v-model="searchText" ></mt-search> -->
<div class="search-container">
<img class="search-container-img" @click="back" src="../images/sousuo/right-throw.png"/>
<div >
<span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
<input class="search-container-input" type="search" v-model="searchText">
<span class="search-container-cancle" @click.prevent="search">搜索</span>
</div>
</div>
<button v-show="false" type="submit" /> <button v-show="false" type="submit" />
</form> </form>
<!-- <SplitLine /> --> <!-- <SplitLine /> -->
<div class="mt-100"></div> <!-- <div class="mt-100"></div> -->
<HistoryLabels/> <HistoryLabels/>
<HotLabels/> <HotLabels/>
<!-- dev 环境 --> dev 环境
<img src="https://test1-file.yunqueyi.com/image/HJ_B001_YD_002_A.jpg" @click="gotoPage"> <img src="https://test1-file.yunqueyi.com/image/HJ_B001_YD_002_A.jpg" @click="gotoPage">
</div> </div>
</template> </template>
...@@ -47,11 +55,11 @@ export default { ...@@ -47,11 +55,11 @@ export default {
}, },
mounted(){ mounted(){
let _self = this; let _self = this;
// window.__getUserInfo = function(params){ window.__getUserInfo = function(params){
// _self.token = params.userToken _self.token = params.userToken
// // _self.SET_USER_INFO(params) // _self.SET_USER_INFO(params)
// _self.getData() _self.getData()
// } }
// window.__refresh = function(){ // window.__refresh = function(){
// _self.getUserInfo() // _self.getUserInfo()
// } // }
...@@ -71,12 +79,12 @@ export default { ...@@ -71,12 +79,12 @@ export default {
// // alert(parm.statusBarHeight); // // alert(parm.statusBarHeight);
// } // }
_self.getData() // _self.getData()
// if(window.__isWeb) { // if(window.__isWeb) {
// _self.getData() // _self.getData()
// } // }
// _self.getUserInfo() _self.getUserInfo()
// _self.getStatusBarHeight() // _self.getStatusBarHeight()
}, },
methods: { methods: {
...@@ -162,6 +170,9 @@ export default { ...@@ -162,6 +170,9 @@ export default {
jsonString: paramList jsonString: paramList
}) })
}, },
back() {
rocNative.goBack()
}
}, },
} }
...@@ -213,4 +224,64 @@ export default { ...@@ -213,4 +224,64 @@ export default {
.mt-100 { .mt-100 {
padding-top: px2rem(63px) !important; padding-top: px2rem(63px) !important;
} }
.search-icon {
font-size: 20px;
}
.search-icon:before {
content: "\E604";
}
.search-container {
display: flex;
position: relative;
flex-direction: row;
text-align: center;
top: 0;
left: 0;
padding: px2rem(10px) 0;
background: #fff;
border-bottom: 1px solid #E7E7E7;
&-img {
padding: px2rem(22px) 0 0 px2rem(10px);
width: px2rem(18px);
height: px2rem(18px);
// transform: rotate(180deg);
}
&-img2 {
position: absolute;
top: px2rem(10px);
left: px2rem(30px);
z-index: 2;
img {
width: px2rem(22px);
height: px2rem(22px);
}
}
&-input {
flex: 1;
position: relative;
left: px2rem(0px);
width: px2rem(280px);
height: px2rem(26px);
margin-left: px2rem(10px);
padding-left: px2rem(22px);
border-radius: px2rem(4px);
background: rgba(246, 246, 246, 1);
color: #666;
-webkit-appearance: none;
}
&-cancle {
position: relative;
top: px2rem(2px);
left: 0;
height: px2rem(14px);
line-height: px2rem(14px);
margin-top: px2rem(2px);
font-size: px2rem(14px);
color: #999;
}
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
</style> </style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册