Skip to content

X
x-learn
提交 58813a3a authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

修改搜索页面

上级 49505039
隐藏空白字符变更
内嵌 并排
正在显示 包含 103 行增加 和 144 行删除
src/components/AppSearchBar.vue
浏览文件 @ 58813a3a
<template>
<div class="search-bar">
<form action @submit.prevent="onSearch">
<div class="inner">
<input
type="search"
class="search-input"
:placeholder="placeholder"
v-model="currentValue"
v-bind="$attrs"
@input="onChange"
ref="formInput"
/>
<input type="button" value="搜索" class="search-button" @click="onSearch" />
</div>
</form>
<el-input
prefix-icon="el-icon-search"
size="medium"
clearable
v-model="currentValue"
@change="onChange"
@keyup.enter.native="onSearch"
ref="formInput"
></el-input>
<el-button type="text" size="medium" @click="onSearch">搜索</el-button>
</div>
</template>
......@@ -21,8 +17,7 @@
export default {
props: {
value: String,
focus: { type: Boolean, default: false },
placeholder: { type: String, default: '全国道路运输安全生产管理培训' }
focus: { type: Boolean, default: false }
},
data() {
return {
......@@ -45,7 +40,6 @@ export default {
this.focus && this.formInput.focus()
},
onChange() {
this.$emit('input', this.currentValue)
this.$emit('change', this.currentValue)
},
onSearch() {
......@@ -60,30 +54,16 @@ export default {
<style lang="scss">
.search-bar {
padding: 0.4rem 0;
}
.search-input {
display: block;
width: 100%;
padding: 0.2rem 0.2rem 0.2rem 0.9rem;
height: 0.66rem;
font-size: 0.26rem;
line-height: 0.26rem;
background: #f7f7f7 url('~@/assets/images/icon_search.png') no-repeat 0.4rem
center;
background-size: 0.31rem;
border: 0;
border-radius: 0.1rem;
outline: none;
}
.search-button {
margin-left: 0.2rem;
color: #222;
font-size: 0.3rem;
appearance: none;
background-color: transparent;
}
.inner {
display: flex;
.el-input {
width: 240px;
}
.el-button {
margin-left: 10px;
font-size: 18px;
font-weight: 400;
color: #333;
}
}
</style>
src/components/CourseList.vue
浏览文件 @ 58813a3a
......@@ -5,7 +5,7 @@
</template>
<template v-else>
<slot name="empty">
<p class="empty-tips">暂无内容</p>
<p class="empty">暂无内容</p>
</slot>
</template>
</div>
......
src/components/layout/header.vue
浏览文件 @ 58813a3a
<template>
<div class="app-header">
<div class="title">{{ title }}</div>
<div class="title">
<router-link to="/">{{ title }}</router-link>
</div>
<div class="tool">
<app-search-bar @search="handleSearch" />
<nav class="nav">
<router-link to="/">首页</router-link>
<router-link to="/my">我的</router-link>
......@@ -12,12 +15,19 @@
</template>
<script>
import AppSearchBar from '@/components/AppSearchBar'
export default {
name: 'AppHeader',
components: { AppSearchBar },
data() {
return {
title: '金融数字化营销职业技能培训'
}
},
methods: {
handleSearch(value) {
this.$router.replace({ path: '/search', query: { keywords: value } })
}
}
}
</script>
......@@ -31,6 +41,11 @@ export default {
padding: 0 30px;
background-color: #fff;
.tool {
display: flex;
align-items: center;
}
.title {
font-size: 24px;
font-weight: 600;
......@@ -38,6 +53,7 @@ export default {
}
.nav {
margin-left: 20px;
font-size: 18px;
color: #333;
a {
......
src/pages/search/components/courseList.vue
浏览文件 @ 58813a3a
<template>
<div class="main-list" v-show="loaded">
<div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
<ul v-if="list.length">
<li v-for="item in list" :key="item.course_id" @click="onClick(item)">{{item.course_name}}</li>
<li v-for="item in list" :key="item.course_id">
<router-link :to="{ name: 'courseLearnItem', params: { id: item.id } }">{{ item.course_name }}</router-link>
</li>
</ul>
<template v-else>
<slot name="empty">
......@@ -38,11 +40,6 @@ export default {
}
}
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
getList() {
this.loaded = false
......@@ -54,16 +51,6 @@ export default {
// 刷新
refresh() {
this.getList()
},
onClick(data) {
if (this.isWeapp) {
// const url = data.free
// ? `/pages/course/free?id=${data.id}`
// : `/pages/web/index?src=${window.location.origin}/course/learn/${data.id}`
wx.miniProgram.navigateTo({ url: `/pages/web/index?src=${window.location.origin}/course/learn/${data.id}` })
} else {
this.$router.push({ name: 'courseLearnItem', params: { id: data.id } })
}
}
},
beforeMount() {
......@@ -73,13 +60,16 @@ export default {
</script>
<style lang="scss" scoped>
.main-list ul {
display: flex;
flex-wrap: wrap;
}
.main-list li {
padding: 0.3rem 0;
font-size: 0.3rem;
color: #222;
border-bottom: 1px solid #f1f1f1;
&:last-child {
border-bottom: 0;
width: 33%;
padding: 10px 0;
&:hover {
color: #c01540;
text-decoration: underline;
}
}
</style>
src/pages/search/components/tagList.vue
浏览文件 @ 58813a3a
<template>
<div class="main-list" v-show="loaded">
<div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
<ul v-if="list.length">
<li
v-for="item in list"
:key="item.id"
@click="onClick(item)"
>{{item.title}}{{item.free ? '（免费）': ''}}</li>
<li v-for="item in list" :key="item.id">
<router-link :to="{ name: 'courseTagItem', params: { id: item.id } }">{{ item.title }}</router-link>
</li>
</ul>
<template v-else>
<slot name="empty">
......@@ -58,14 +56,6 @@ export default {
// 刷新
refresh() {
this.getList()
},
onClick(data) {
if (this.isWeapp) {
const url = `/pages/web/index?src=${window.location.origin}/course/tag/${data.id}`
wx.miniProgram.navigateTo({ url })
} else {
this.$router.push({ name: 'courseTagItem', params: { id: data.id } })
}
}
},
beforeMount() {
......@@ -75,13 +65,16 @@ export default {
</script>
<style lang="scss" scoped>
.main-list ul {
display: flex;
flex-wrap: wrap;
}
.main-list li {
padding: 0.3rem 0;
font-size: 0.3rem;
color: #222;
border-bottom: 1px solid #f1f1f1;
&:last-child {
border-bottom: 0;
width: 33%;
padding: 10px 0;
&:hover {
color: #c01540;
text-decoration: underline;
}
}
</style>
src/pages/search/components/videoList.vue
浏览文件 @ 58813a3a
<template>
<div class="main-list" v-show="loaded">
<div class="main-list" element-loading-text="加载中..." v-loading="!loaded">
<template v-if="dataList.length">
<ul>
<li v-for="item in dataList" :key="item.id" @click="onClick(item)">
......@@ -7,7 +7,7 @@
<img :src="item.url" />
<div class="cover"></div>
</div>
<div class="text">{{item.chapter_name}}{{item.free ? '（免费）': ''}}</div>
<div class="text">{{ item.chapter_name }}</div>
</li>
</ul>
</template>
......@@ -67,16 +67,7 @@ export default {
refresh() {
this.getList()
},
onClick(data) {
if (this.isWeapp) {
// const url = data.free
// ? `/pages/course/free?id=${data.course_id}&chapter_id=${data.id}`
// : `/pages/course/item?id=${data.course_id}&chapter_id=${data.id}`
wx.miniProgram.navigateTo({ url: `/pages/course/item?id=${data.course_id}&chapter_id=${data.id}` })
} else {
window.alert('请在微信小程序中打开')
}
}
onClick(data) {}
},
beforeMount() {
this.getList()
......@@ -86,18 +77,16 @@ export default {
<style lang="scss" scoped>
.main-list ul {
margin-top: 0.58rem;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.main-list li {
width: 3rem;
margin-bottom: 0.4rem;
width: 33%;
margin-bottom: 40px;
.pic {
position: relative;
width: 3rem;
height: 1.7rem;
width: 160px;
height: 90px;
border-radius: 6px;
img {
width: 100%;
......@@ -112,14 +101,11 @@ export default {
right: 0;
bottom: 0;
background: rgba(1, 1, 1, 0.2) url(../../../assets/images/icon_play.png) no-repeat center center;
background-size: 0.56rem 0.7rem;
background-size: 38px 50px;
z-index: 10;
}
.text {
margin: 0.1rem 0;
font-size: 0.3rem;
color: #222;
line-height: 0.4rem;
margin: 5px 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
......
src/pages/search/index.vue
浏览文件 @ 58813a3a
<template>
<div class="main-container">
<app-search-bar v-model="searchValue" @search="onSearch" />
<div class="search-tips" v-if="!searchValue">
<div class="search-tips-item" v-if="historyList.length && isLogin">
<h3 class="search-tips__title">搜索历史</h3>
<ul class="search-tips__list">
<li
v-for="(item, index) in historyList"
:key="index"
@click="changeSearchValue(item)"
>{{item}}</li>
<li v-for="(item, index) in historyList" :key="index" @click="changeSearchValue(item)">{{ item }}</li>
</ul>
</div>
<div class="search-tips-item" v-if="featureList.length">
<h3 class="search-tips__title">搜索发现</h3>
<ul class="search-tips__list">
<li
v-for="(item, index) in featureList"
:key="index"
@click="changeSearchValue(item)"
>{{item}}</li>
<li v-for="(item, index) in featureList" :key="index" @click="changeSearchValue(item)">{{ item }}</li>
</ul>
</div>
</div>
<div class="search-main" v-if="searchValue">
<van-tabs
class="main-tabs"
v-model="tabActive"
color="#C62245"
:line-height="2"
:animated="true"
:swipeable="true"
@click="onTabClick"
>
<van-tab title="考点" name="0">
<el-tabs v-model="tabActive" @tab-click="onTabClick">
<el-tab-pane label="考点" name="0">
<tag-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '0'"></tag-list>
</van-tab>
<van-tab title="视频课程" name="1">
</el-tab-pane>
<el-tab-pane label="视频课程" name="1">
<video-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '1'"></video-list>
</van-tab>
<van-tab title="课程" name="2">
</el-tab-pane>
<el-tab-pane label="课程" name="2">
<course-list :params="{ keywords: searchValue }" ref="list" v-if="tabActive === '2'"></course-list>
</van-tab>
</van-tabs>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
......@@ -105,9 +88,10 @@ export default {
},
changeSearchValue(value) {
this.searchValue = value
this.$router.push({ query: { tab: this.tabActive, keywords: this.searchValue } })
},
onTabClick(name) {
this.$router.replace({ query: { tab: name, keywords: this.searchValue } })
onTabClick() {
this.$router.replace({ query: { tab: this.tabActive, keywords: this.searchValue } })
},
onSearch() {
if (!this.searchValue.trim()) {
......@@ -125,14 +109,23 @@ export default {
</script>
<style lang="scss" scoped>
.main-container {
height: 100%;
padding: 30px;
background-color: #fff;
border-radius: 8px;
box-sizing: border-box;
}
.search-tips-item {
clear: both;
overflow: hidden;
}
.search-tips__title {
font-size: 0.3rem;
font-size: 18px;
font-weight: 400;
color: #222;
padding-bottom: 8px;
border-bottom: 1px solid #ccc;
}
.search-tips__list {
padding-top: 0.37rem;
......@@ -140,12 +133,13 @@ export default {
.search-tips__list li {
display: inline-block;
max-width: 100%;
font-size: 0.26rem;
color: #999;
margin-right: 0.4rem;
margin-bottom: 0.4rem;
font-size: 14px;
color: #222;
margin-right: 20px;
margin-bottom: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
</style>
src/style.scss
浏览文件 @ 58813a3a
......@@ -90,7 +90,7 @@ body {
background-color: #f9f9f9;
}
.empty-tips {
.empty {
padding: 120px;
text-align: center;
font-size: 18px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论