提交 c4bfc4d6 authored 作者: 王鹏飞's avatar 王鹏飞

bug fixes

上级 86d12f19
<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>
<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>
<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>
<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>
<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>
......@@ -71,9 +71,6 @@ export default {
}
}
.is-my {
.message-card-content {
text-align: right;
}
.message-card-text {
color: #fff;
background-color: #67a8ff;
......
......@@ -148,6 +148,26 @@ export default {
Cookies.get('wechat_login_error') ||
Cookies.get('wechat_login_no_phone_error')
)
},
// 显示登录提示框
showLoginDialog() {
this.$dialog
.confirm({
title: '您还未登录',
message: '请先登录再进行操作',
cancelButtonText: '暂不登录',
confirmButtonText: '立即登录'
})
.then(() => {
this.wechatLogin()
})
.catch(() => {
if (this.isWeapp) {
wx.miniProgram.navigateBack()
} else {
this.$router.replace('/')
}
})
}
},
beforeMount() {
......@@ -157,7 +177,7 @@ export default {
} else {
if (this.isWechat) {
if (!this.checkWechatLogin()) {
this.wechatLogin()
this.showLoginDialog()
return
}
const error = Cookies.get('wechat_login_error')
......
......@@ -76,9 +76,10 @@ export default {
// 退出登录
logout() {
this.$store.dispatch('logout').then(() => {
this.$toast('退出成功')
// 清除小程序登录状态
wx.miniProgram.postMessage({ data: { token: '' } })
this.$toast('退出成功')
wx.miniProgram.switchTab({ url: '/pages/index/index' })
})
},
toPage(url) {
......@@ -134,7 +135,7 @@ ul {
position: absolute;
bottom: 2rem;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 6.7rem;
height: 0.7rem;
background: rgba(247, 247, 247, 1);
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论