Skip to content

T
transport-show-h5
提交 731b1c5c authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

Merge branch 'master' of https://gitlab.ezijing.com/ezijing/transport-weapp-h5

上级 573c9a4e e55462cb
隐藏空白字符变更
内嵌 并排
正在显示 包含 541 行增加 和 49 行删除
src/modules/tag-model/components/courseTagMessage.vue 0 → 100644
浏览文件 @ 731b1c5c
<template>
<div class="course-tag-message">
<div class="course-tag-message-hd">
<div class="course-tag-message__title">{{data.name}}</div>
</div>
<div class="course-tag-message-bd">
<template v-if="data.children && data.children.length">
<ul class="message-tag-list">
<template v-for="item in data.children">
<li
class="course-tag-item"
:key="item.id"
@click="$emit('search', item)"
>{{item.name}}</li>
</template>
</ul>
</template>
</div>
<div class="course-tag-message-ft">
<div class="more">
更多
<van-icon name="arrow-down"></van-icon>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CourseTagMessage',
props: {
data: { type: Object }
}
}
</script>
<style lang="scss" scoped>
.course-tag-message {
padding: 10px;
background-color: #fff;
border-radius: 6px;
}
.course-tag-message-hd {
padding: 10px 0;
font-size: 15px;
color: #222;
}
.course-tag-item {
display: inline-block;
height: 24px;
margin: 0 10px 10px 0;
padding: 0 15px;
font-size: 13px;
color: #fff;
line-height: 24px;
background: #67a8ff;
border-radius: 12px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
.course-tag-message-ft {
padding-top: 10px;
border-top: 1px solid #eee;
}
.more {
font-size: 13px;
color: #222;
text-align: center;
cursor: pointer;
}
</style>
src/modules/tag-model/components/messageCard.vue 0 → 100644
浏览文件 @ 731b1c5c
<template>
<div class="message-card" :class="classes">
<div class="message-card-content">
<slot :data="data.payload">
<div class="message-card-text" v-if="data.type === 0">{{data.payload.text}}</div>
<course-tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 1"></course-tag-message>
<search-tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 2"></search-tag-message>
<tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 3"></tag-message>
</slot>
</div>
</div>
</template>
<script>
import CourseTagMessage from './courseTagMessage.vue'
import SearchTagMessage from './searchTagMessage.vue'
import TagMessage from './tagMessage.vue'
export default {
name: 'MessageCard',
props: {
data: { type: Object }
},
components: { CourseTagMessage, SearchTagMessage, TagMessage },
computed: {
isMyPublish() {
return this.data.from === 'user'
},
classes() {
return {
'is-my': this.isMyPublish,
'is-system': !this.isMyPublish
}
}
}
}
</script>
<style lang="scss" scoped>
.message-card {
clear: both;
margin: 20px;
}
.message-card-text {
display: inline-block;
padding: 10px;
background-color: #fff;
border-radius: 6px;
}
.is-system {
.message-card-content {
text-align: left;
}
}
.is-my {
.message-card-content {
text-align: right;
}
.message-card-text {
color: #fff;
background-color: #67a8ff;
}
}
</style>
src/modules/tag-model/components/searchTagMessage.vue 0 → 100644
浏览文件 @ 731b1c5c
<template>
<div class="search-tag-message">
<p class="tips">交小通猜你想查：</p>
<ul class="search-tag-list">
<template v-for="(item,index) in data">
<li class="search-tag-item" :key="item.id" @click="$emit('change', item)">
<span class="num">{{index+1}}:</span>
<span class="text">{{item.title}}</span>
</li>
</template>
</ul>
</div>
</template>
<script>
export default {
name: 'SearchTagMessage',
props: {
data: { type: Array }
}
}
</script>
<style lang="scss" scoped>
.search-tag-message {
padding: 10px;
background-color: #fff;
border-radius: 6px;
}
.search-tag-item {
margin: 10px 0;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.num {
display: inline-block;
min-width: 24px;
}
.text {
border-bottom: 1px solid #2b7ce9;
cursor: pointer;
}
}
</style>
src/modules/tag-model/components/tagMessage.vue 0 → 100644
浏览文件 @ 731b1c5c
<template>
<div class="tag-message" v-html="html"></div>
</template>
<script>
export default {
name: 'TagMessage',
props: {
data: { type: Object }
},
computed: {
html() {
return this.data.contents.replace(/\n/g, '<br/>')
}
}
}
</script>
<style lang="scss" scoped>
.tag-message {
padding: 10px;
background-color: #fff;
border-radius: 6px;
font-size: 13px;
line-height: 30px;
}
</style>
src/modules/tag-model/index.vue 0 → 100644
浏览文件 @ 731b1c5c
<template>
<div class="messages">
<template v-for="item in messageList">
<message-card :data="item" :key="item.id" @search="onSearchTag" @change="onChangeTag"></message-card>
</template>
</div>
</template>
<script>
import MessageCard from './messageCard.vue'
import * as api from '@/api/course.js'
export default {
props: { courseId: { type: String, required: true } },
components: { MessageCard },
data() {
return {
messageList: [] // {id:'', type: 1, payload: {}}
}
},
methods: {
// 获取知识点列表
getCourseTagList() {
api.getCourseTagList(this.courseId).then(response => {
this.messageList = response.chapters.map((item, index) => {
return {
id: this.genId(index),
type: 1,
from: 'system',
payload: item
}
})
})
},
// 点击标签
onSearchTag(data) {
this.messageList.push({
id: this.genId(),
type: 0,
from: 'user',
payload: { text: data.name }
})
this.searchTag(data.name)
},
searchTag(keywords) {
api.getSearchTagList({ keywords }).then(response => {
this.messageList.push({
id: this.genId(),
type: 2,
from: 'system',
payload: response
})
})
},
onChangeTag(data) {
this.messageList.push({
id: this.genId(),
type: 0,
from: 'user',
payload: { text: data.title }
})
this.getCourseTag(data.id)
},
// 获取知识点详情
getCourseTag(tagId) {
api.getCourseTag(tagId).then(response => {
this.messageList.push({
id: this.genId(),
type: 3,
from: 'system',
payload: response
})
})
},
// 生成消息ID
genId(index) {
index = index || this.messageList.length
return `message_${index}`
}
},
beforeMount() {
this.getCourseTagList()
}
}
</script>
<style lang="scss" scoped>
.messages {
background: #eee;
overflow: hidden;
}
</style>
src/pages/course/learn/item.vue
浏览文件 @ 731b1c5c
......@@ -5,6 +5,7 @@
class="main-tabs"
v-model="tabActive"
color="#2b7ce9"
:sticky="true"
:line-height="2"
@click="onTabClick"
>
......@@ -12,7 +13,7 @@
<course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
</van-tab>
<van-tab title="知识点速学" name="1">
<course-tag :courseId="courseId"></course-tag>
<course-tag :courseId="courseId" style="margin-left:-0.4rem;margin-right:-0.4rem;"></course-tag>
</van-tab>
</van-tabs>
</div>
......
src/pages/course/tag/courseTagMessage.vue
浏览文件 @ 731b1c5c
<template>
<div class="course-tag-message">
<div class="course-tag-message" :class="classes">
<div class="course-tag-message-hd">
<div class="course-tag-message__title">{{data.name}}</div>
</div>
<div class="course-tag-message-bd">
<template v-if="data.children && data.children.length">
<ul class="message-tag-list">
<ul class="message-tag-list" ref="content">
<template v-for="item in data.children">
<li
class="course-tag-item"
:key="item.id"
@click="$emit('search', item)"
>{{item.name}}</li>
<li class="course-tag-item" :key="item.id" @click="$emit('search', item)">{{item.name}}</li>
</template>
</ul>
</template>
</div>
<div class="course-tag-message-ft">
<div class="more">
更多
<div class="more" @click="toggleMore" v-if="hasMore">
<template v-if="!showMore">
<span>更多</span>
<van-icon name="arrow-down"></van-icon>
</div>
</template>
<template v-else>
<span>收起</span>
<van-icon name="arrow-up"></van-icon>
</template>
</div>
</div>
</template>
......@@ -30,6 +30,31 @@ export default {
name: 'CourseTagMessage',
props: {
data: { type: Object }
},
data() {
return {
showMore: false,
maxHeight: 76,
contentHeight: 0
}
},
computed: {
hasMore() {
return this.contentHeight > this.maxHeight
},
classes() {
return {
'has-more': this.hasMore && !this.showMore
}
}
},
methods: {
toggleMore() {
this.showMore = !this.showMore
}
},
mounted() {
this.contentHeight = this.$refs.content.offsetHeight
}
}
</script>
......@@ -45,6 +70,10 @@ export default {
font-size: 15px;
color: #222;
}
.has-more .course-tag-message-bd {
height: 76px;
overflow: hidden;
}
.course-tag-item {
display: inline-block;
height: 24px;
......@@ -60,11 +89,9 @@ export default {
overflow: hidden;
cursor: pointer;
}
.course-tag-message-ft {
.more {
padding-top: 10px;
border-top: 1px solid #eee;
}
.more {
font-size: 13px;
color: #222;
text-align: center;
......
src/pages/course/tag/index.vue
浏览文件 @ 731b1c5c
<template>
<div class="messages">
<template v-for="item in messageList">
<message-card :data="item" :key="item.id" @search="onSearchTag" @change="onChangeTag"></message-card>
</template>
<div class="course-tag">
<div class="messages" ref="messages">
<template v-for="item in messageList">
<message-card :data="item" :key="item.id" @search="onSearchTag" @change="onChangeTag"></message-card>
</template>
</div>
<div class="send">
<div class="inner">
<form action="/">
<van-search
v-model="searchValue"
left-icon
show-action
background="#f7f7f7"
placeholder="全国道路运输安全生产管理培训"
@search="onSearch"
>
<template #action>
<div @click="onSearch">搜索</div>
</template>
</van-search>
</form>
</div>
</div>
</div>
</template>
......@@ -14,7 +34,13 @@ export default {
components: { MessageCard },
data() {
return {
messageList: [] // {id:'', type: 1, payload: {}}
messageList: [], // {id:'', type: 1, payload: {}}
searchValue: ''
}
},
watch: {
messageList(list) {
this.scrollBottom()
}
},
methods: {
......@@ -31,6 +57,20 @@ export default {
})
})
},
// 输入搜索
onSearch() {
if (!this.searchValue.trim()) {
return
}
this.messageList.push({
id: this.genId(),
type: 0,
from: 'user',
payload: { text: this.searchValue }
})
this.searchTag(this.searchValue)
this.searchValue = ''
},
// 点击标签
onSearchTag(data) {
this.messageList.push({
......@@ -75,6 +115,12 @@ export default {
genId(index) {
index = index || this.messageList.length
return `message_${index}`
},
// 滚动到底部
scrollBottom() {
this.$nextTick(() => {
window.scrollTo(0, document.body.scrollHeight)
})
}
},
beforeMount() {
......@@ -88,4 +134,20 @@ export default {
background: #eee;
overflow: hidden;
}
.send {
height: 50px;
.inner {
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 50px;
background: rgba(247, 247, 247, 1);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
z-index: 999;
}
::v-deep .van-search__content {
background-color: #fff;
}
}
</style>
src/pages/course/tag/item.vue 0 → 100644
浏览文件 @ 731b1c5c
<template></template>
<script>
export default {
name: 'CourseTagItem'
}
</script>
<style lang="scss" scoped>
</style>
src/pages/course/tag/messageCard.vue
浏览文件 @ 731b1c5c
......@@ -11,8 +11,8 @@
</div>
</template>
<script>
import CourseTagMessage from './coursetagMessage.vue'
import SearchTagMessage from './searchtagMessage.vue'
import CourseTagMessage from './courseTagMessage.vue'
import SearchTagMessage from './searchTagMessage.vue'
import TagMessage from './tagMessage.vue'
export default {
......
src/pages/course/tag/searchTagMessage.vue
浏览文件 @ 731b1c5c
......@@ -2,13 +2,23 @@
<div class="search-tag-message">
<p class="tips">交小通猜你想查：</p>
<ul class="search-tag-list">
<template v-for="(item,index) in data">
<template v-for="(item,index) in dataList">
<li class="search-tag-item" :key="item.id" @click="$emit('change', item)">
<span class="num">{{index+1}}:</span>
<span class="text">{{item.title}}</span>
</li>
</template>
</ul>
<div class="more" @click="toggleMore" v-if="hasMore">
<template v-if="!showMore">
<span>更多</span>
<van-icon name="arrow-down"></van-icon>
</template>
<template v-else>
<span>收起</span>
<van-icon name="arrow-up"></van-icon>
</template>
</div>
</div>
</template>
......@@ -16,7 +26,31 @@
export default {
name: 'SearchTagMessage',
props: {
data: { type: Array }
data: {
type: Array,
default() {
return []
}
}
},
data() {
return { showMore: false, maxCount: 7 }
},
computed: {
hasMore() {
return this.data.length > 5
},
dataList() {
if (this.hasMore && !this.showMore) {
return this.data.filter((item, index) => index < this.maxCount)
}
return this.data
}
},
methods: {
toggleMore() {
this.showMore = !this.showMore
}
}
}
</script>
......@@ -41,4 +75,12 @@ export default {
cursor: pointer;
}
}
.more {
padding-top: 10px;
border-top: 1px solid #eee;
font-size: 13px;
color: #222;
text-align: center;
cursor: pointer;
}
</style>
src/pages/course/tag/tagMessage.vue
浏览文件 @ 731b1c5c
<template>
<div class="tag-message" v-html="html"></div>
<div class="tag-message" :class="classes">
<div class="tag-message-bd">
<div class="tag-message-content" ref="content" v-html="html"></div>
</div>
<div class="more" @click="toggleMore" v-if="hasMore">
<template v-if="!showMore">
<span>更多</span>
<van-icon name="arrow-down"></van-icon>
</template>
<template v-else>
<span>收起</span>
<van-icon name="arrow-up"></van-icon>
</template>
</div>
</div>
</template>
<script>
......@@ -8,10 +22,33 @@ export default {
props: {
data: { type: Object }
},
data() {
return {
showMore: false,
maxHeight: 90,
contentHeight: 0
}
},
computed: {
hasMore() {
return this.contentHeight > this.maxHeight
},
classes() {
return {
'has-more': this.hasMore && !this.showMore
}
},
html() {
return this.data.contents.replace(/\n/g, '<br/>')
}
},
methods: {
toggleMore() {
this.showMore = !this.showMore
}
},
mounted() {
this.contentHeight = this.$refs.content.offsetHeight
}
}
</script>
......@@ -21,7 +58,21 @@ export default {
padding: 10px;
background-color: #fff;
border-radius: 6px;
}
.has-more .tag-message-bd {
height: 90px;
overflow: hidden;
}
.tag-message-content {
font-size: 13px;
line-height: 30px;
}
.more {
padding-top: 10px;
border-top: 1px solid #eee;
font-size: 13px;
color: #222;
text-align: center;
cursor: pointer;
}
</style>
src/pages/pay/index.vue
浏览文件 @ 731b1c5c
......@@ -60,31 +60,32 @@ export default {
// }
// console.log(obj, '======')
// })
this.VueEvent.$emit('pay-wx-chart', {})
this.VueEvent.$off('pay-wx-chart-callback').$on('pay-wx-chart-callback', obj => {
if (obj.code === 200) {
if (window.__wxjs_environment === 'miniprogram') {
wx.miniProgram.navigateTo({
url: '/pages/pay/index?data=' + JSON.stringify(obj.data),
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function (data) {
console.log(data)
}
},
success: function (res) {
console.log('开始传数据', res, res.eventChannel)
// 通过eventChannel向被打开页面传送数据 - 验证 web-view 不可用
res.eventChannel.emit('acceptDataFromOpenerPage', { data: obj.data })
}
})
if (window.__wxjs_environment === 'miniprogram') {
wx.miniProgram.navigateTo({
// url: '/pages/pay/index?data=' + JSON.stringify(obj.data),
url: '/pages/pay/index?data=' + this.requestParam.product_id,
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function (data) {
console.log(data)
}
},
success: function (res) {
// console.log('开始传数据', res, res.eventChannel)
// 通过eventChannel向被打开页面传送数据 - 验证 web-view 不可用
// res.eventChannel.emit('acceptDataFromOpenerPage', { data: obj.data })
}
} else {
// this.$router.go(-2)
Toast(obj.msg)
}
console.log(obj, '======')
})
})
}
// this.VueEvent.$emit('pay-wx-chart', {})
// this.VueEvent.$off('pay-wx-chart-callback').$on('pay-wx-chart-callback', obj => {
// if (obj.code === 200) {
// } else {
// // this.$router.go(-2)
// Toast(obj.msg)
// }
// console.log(obj, '======')
// })
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论