Skip to content

L
learn-online-pc
提交 4ae65f82 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

课程讨论模块提取

上级 8f814cae
隐藏空白字符变更
内嵌 并排
正在显示 包含 101 行增加 和 106 行删除
client/src/modules/discuss/api/index.js
浏览文件 @ 4ae65f82
...@@ -43,3 +43,10 @@ export const getDiscussList = (path, dataJson) => { ...@@ -43,3 +43,10 @@ export const getDiscussList = (path, dataJson) => {
dataJson dataJson
) )
} }
export const request = (obj) => {
return httpRequest.get(
obj.path,
obj.dataJson
)
}
client/src/modules/discuss/src/discuss.vue
浏览文件 @ 4ae65f82
<template> <template>
<div> <div>
<template v-for='(item, index) in discussList'> <template v-for='(item, index) in discussList'>
<div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-cid='item.cid' :data-index='index'> <div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.semester_id' :data-cid='item.relate_id' :data-index='index'>
<div class='user'> <div class='user'>
<template v-if="item.questioner.url"> <template v-if="item.questioner.avatar">
<img class='img' :src='item.questioner.url' /> <img class='img' :src='item.questioner.avatar' />
</template> </template>
<template v-else> <template v-else>
<img class='img' src='../assets/images/person-default.jpg' /> <img class='img' src='../assets/images/person-default.jpg' />
</template> </template>
<div class='right'> <div class='right'>
<div class='name'>{{item.questioner.name}}</div> <div class='name'>{{item.questioner.nickname}}</div>
<div class='time'>{{item.questioner.time}}</div> <div class='time'>{{item.created_time}}</div>
</div> </div>
</div> </div>
<div class='title'>{{item.title}}</div> <div class='title'>{{item.title}}</div>
<div :class='["text"]' v-html="item.text"></div><div :class='["ellipsis", (item.isShow ? "on" : "")]'>....</div> <div :class='["text"]' v-html="item.contents"></div>
<div class='result'>{{item.askCnt}} {{ $t('pages.learn.discussion.answers') }}<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} {{ $t('pages.learn.discussion.votes') }}</div> <!-- <div :class='["text"]' v-html="item.contents"></div><div class='["ellipsis no", (item.isShow ? "on" : "")]'>....</div> -->
<div class='result'>{{item.answer_count}} {{ $t('pages.learn.discussion.answers') }}<div style='display: inline-block; width: 20px;'></div>{{item.tag_total_count}} {{ $t('pages.learn.discussion.votes') }}</div>
<!-- <div class='course-name'>{{item.courseName}}</div> --> <!-- <div class='course-name'>{{item.courseName}}</div> -->
</div> </div>
</template> </template>
...@@ -27,98 +28,38 @@ ...@@ -27,98 +28,38 @@
</template> </template>
<script> <script>
import * as api from '../api/index' import { request } from '../api/index'
export default { export default {
name: 'Discuss', name: 'Discuss',
components: { }, components: { },
data () { data () {
return { return {
tabs: [{
title: this.$t('pages.learn.discussion.tap1'),
isShow: true,
path: '/my'
}, {
title: this.$t('pages.learn.discussion.tap2'),
isShow: false,
path: '/involved'
}],
discussList: [ discussList: [
// { ]
// user: { }
// url: '', },
// name: '用户名000', props: {
// time: '2018-2-12 15:28:47' params: {
// }, type: Object,
// title: '这是一个一句话问题这是一个一句话问题这是一个一句话问题标题这是一个一句话问题', required: false,
// text: '<p>王家有三兄弟甲、乙、丙，丙幼年时送给胡某作养子，丙结婚时，胡某为其盖了新房，后因失火致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己</p><p>发送到；发是否第三方sffdfdsfds</p>', default () {
// askCnt: 20, return {}
// TouCnt: 100,
// courseName: '在线学习课程',
// isShow: false
// }
],
param: {
limit: 10, // 默认每页显示10条
offset: 0 // 偏移量（未考虑传输时，产生新问题情况）
} }
} }
}, },
mounted () { mounted () {
this.loadAjax() this.loadAjax()
// window.addEventListener('resize', this.resizeRoot.bind(this), false)
},
destroyed () {
// window.removeEventListener('resize', this.resizeRoot.bind(this), false)
},
updated () {
this.resizeRoot()
}, },
methods: { methods: {
resizeRoot () {
const elems = document.querySelectorAll('.ellipsis')
let fs = getComputedStyle(window.document.documentElement)['font-size'].replace('px', '') // eslint-disable-line
elems.forEach((_, i) => {
_.previousSibling.style.height = 'auto'
const height = _.previousSibling.offsetHeight
const realHeight = fs * 0.18 * 1.5 * 2
if (height > realHeight) {
this.discussList[i].isShow = true
_.previousSibling.style.height = realHeight + 'px'
} else {
this.discussList[i].isShow = false
}
})
},
loadAjax () { loadAjax () {
let pathUrl = ''
this.tabs.map((item, index) => {
debugger
if (item.isShow) {
pathUrl = item.path
}
})
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
api.getDiscussList(pathUrl, this.param) request(this.params)
.then(json => { .then(json => {
this.discussList = json this.discussList = json
}) })
.catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) .catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
}, },
/**
* 切换 - tab
*/
tabSelect (e) {
const index = e.currentTarget.dataset.index
const json = this.tabs
for (let i = 0; i < json.length; i++) {
json[i].isShow = false
}
json[index].isShow = true
this.tabs = json
this.param.offset = 0
this.loadAjax()
},
/** /**
* 跳转到对应 问题详情页 * 跳转到对应 问题详情页
*/ */
...@@ -128,13 +69,21 @@ export default { ...@@ -128,13 +69,21 @@ export default {
const cid = e.currentTarget.dataset.cid const cid = e.currentTarget.dataset.cid
this.$router.push({ path: `/app/learn/discuss-detail/${sid}/${cid}/${qid}` }) this.$router.push({ path: `/app/learn/discuss-detail/${sid}/${cid}/${qid}` })
} }
},
watch: {
params: {
handler () {
this.loadAjax()
},
deep: true
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.item-list:first-child { margin-top: 0.42rem; } .item-list:first-child { margin-top: 0.42rem; }
.item-list { position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.2rem; background: #fff; box-shadow: 0 2px 4px rgba(10, 4, 6, 0.1); cursor: pointer; } .item-list {border-radius: 5px; position: relative; padding: 0.3rem 0.26rem; margin-bottom: 0.3rem; background: #fff; box-shadow: 0 0 10px rgba(204, 204, 204, 0.4); cursor: pointer; }
.item-list .user { position: relative; overflow: hidden; } .item-list .user { position: relative; overflow: hidden; }
.item-list .user .img { float: left; width: 0.6rem; height: 0.6rem; background: #e5e5e5; border-radius: 50%; } .item-list .user .img { float: left; width: 0.6rem; height: 0.6rem; background: #e5e5e5; border-radius: 50%; }
.item-list .user .right { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .item-list .user .right { position: absolute; left: 0.72rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
......
client/src/pages/learn/courseDetail.vue
浏览文件 @ 4ae65f82
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<div :class='["item-order", (sort[1].isShow ? "on" : "")]' @click='sortFn' :data-index='1' :data-str='sort[1].str'>按投票排序</div> <div :class='["item-order", (sort[1].isShow ? "on" : "")]' @click='sortFn' :data-index='1' :data-str='sort[1].str'>按投票排序</div>
</div> </div>
<div class='discuss-scroll' bindscrolltolower='loadmore' bindscrolltoupper='updatenew'> <div class='discuss-scroll' bindscrolltolower='loadmore' bindscrolltoupper='updatenew'>
<template v-for='(item, index) in discussList'> <!-- <template v-for='(item, index) in discussList'>
<div v-bind:key="index" class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-index='index'> <div v-bind:key="index" class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-index='index'>
<div class='user'> <div class='user'>
<template v-if="item.user.url"> <template v-if="item.user.url">
...@@ -91,12 +91,12 @@ ...@@ -91,12 +91,12 @@
<div class='title'>{{item.title}}</div> <div class='title'>{{item.title}}</div>
<div :class='["text"]' v-html="item.text"></div><div :class='["ellipsis", (item.isShow ? "on" : "")]'>....</div> <div :class='["text"]' v-html="item.text"></div><div :class='["ellipsis", (item.isShow ? "on" : "")]'>....</div>
<div class='result'>{{item.askCnt}} 回答<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} 投票</div> <div class='result'>{{item.askCnt}} 回答<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} 投票</div>
<!-- <div class='course-name'>{{item.courseName}}</div> -->
</div> </div>
</template> </template>
<template v-if='!discussList.length'> <template v-if='!discussList.length'>
<div class='no-data'>暂无相关讨论</div> <div class='no-data'>暂无相关讨论</div>
</template> </template> -->
<discuss :params="params"></discuss>
</div> </div>
</template> </template>
<template v-else> <template v-else>
...@@ -232,6 +232,13 @@ export default { ...@@ -232,6 +232,13 @@ export default {
}, },
data () { data () {
return { return {
params: {
path: `/v2/qa/questions/course/${this.sid}/${this.cid}`,
page: {
limit: 10,
offset: 0
}
},
ckeditor: null, ckeditor: null,
activeName: '1', activeName: '1',
activeName1: '1', activeName1: '1',
...@@ -387,9 +394,9 @@ export default { ...@@ -387,9 +394,9 @@ export default {
this.tabs[3].assess = json1 this.tabs[3].assess = json1
loading.close() loading.close()
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) }).catch(e => { this.$message.error(e.message) }).finally(() => { })
cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => { // cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
this.discussList = json2 // this.discussList = json2
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) // }).catch(e => { this.$message.error(e.message) }).finally(() => { })
}).catch(e => { this.$message.error(e.message); loading.close() }).finally(() => { }) }).catch(e => { this.$message.error(e.message); loading.close() }).finally(() => { })
window.addEventListener('resize', this.resizeRoot.bind(this), false) window.addEventListener('resize', this.resizeRoot.bind(this), false)
/* 实时刷新数据 */ /* 实时刷新数据 */
...@@ -730,9 +737,17 @@ export default { ...@@ -730,9 +737,17 @@ export default {
message: '问题发布成功' message: '问题发布成功'
}) })
this.isPublicShow = false this.isPublicShow = false
cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => { this.params = {
this.discussList = json2 path: `/v2/qa/questions/course/${this.sid}/${this.cid}`,
}).catch(e => { this.$message.error(e.message) }).finally(() => { }) page: {
limit: 10,
offset: 0
},
v: (new Date()).valueOf()
}
// cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
// this.discussList = json2
// }).catch(e => { this.$message.error(e.message) }).finally(() => { })
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
} }
} else { } else {
...@@ -759,10 +774,18 @@ export default { ...@@ -759,10 +774,18 @@ export default {
this.param.sort = this.sort[index].isShow ? str : '' this.param.sort = this.sort[index].isShow ? str : ''
this.param.offset = 0 this.param.offset = 0
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json => { this.params = {
this.discussList = json path: `/v2/qa/questions/course/${this.sid}/${this.cid}`,
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) dataJson: {
limit: 10,
offset: 0,
sort: this.sort[index].isShow ? str : ''
}
}
// cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json => {
// this.discussList = json
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
} }
} }
} }
......
client/src/pages/learn/discussion.vue
浏览文件 @ 4ae65f82
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
</template> </template>
</div> </div>
<div class="discuss-scroll"> <div class="discuss-scroll">
<!-- <discuss> <discuss :params="params">
</discuss> --> </discuss>
<template v-for='(item, index) in discussList'> <!-- <template v-for='(item, index) in discussList'>
<div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-cid='item.cid' :data-index='index'> <div v-bind:key='index' class='item-list' @click='goDiscussDetail' :data-id='item.id' :data-sid='item.sid' :data-cid='item.cid' :data-index='index'>
<div class='user'> <div class='user'>
<template v-if="item.user.url"> <template v-if="item.user.url">
...@@ -28,30 +28,39 @@ ...@@ -28,30 +28,39 @@
<div :class='["text"]' v-html="item.text"></div><div :class='["ellipsis", (item.isShow ? "on" : "")]'>....</div> <div :class='["text"]' v-html="item.text"></div><div :class='["ellipsis", (item.isShow ? "on" : "")]'>....</div>
<div class='result'>{{item.askCnt}} {{ $t('pages.learn.discussion.answers') }}<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} {{ $t('pages.learn.discussion.votes') }}</div> <div class='result'>{{item.askCnt}} {{ $t('pages.learn.discussion.answers') }}<div style='display: inline-block; width: 20px;'></div>{{item.TouCnt}} {{ $t('pages.learn.discussion.votes') }}</div>
</div> </div>
</template> </template> -->
<template v-if='!discussList.length'> <!-- <template v-if='!discussList.length'>
<div class='no-data'>暂无相关讨论</div> <div class='no-data'>暂无相关讨论</div>
</template> </template> -->
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import cAction from '@action' // import cAction from '@action'
export default { export default {
components: { }, components: { },
data () { data () {
return { return {
// tabs: [{
// title: this.$t('pages.learn.discussion.tap1'),
// isShow: true,
// path: '/my'
// }, {
// title: this.$t('pages.learn.discussion.tap2'),
// isShow: false,
// path: '/involved'
// }],
tabs: [{ tabs: [{
title: this.$t('pages.learn.discussion.tap1'), title: this.$t('pages.learn.discussion.tap1'),
isShow: true, isShow: true,
path: '/my' path: '/v2/qa/questions/my'
}, { }, {
title: this.$t('pages.learn.discussion.tap2'), title: this.$t('pages.learn.discussion.tap2'),
isShow: false, isShow: false,
path: '/involved' path: '/v2/qa/questions/involved'
}], }],
discussList: [ discussList: [
// { // {
...@@ -71,6 +80,13 @@ export default { ...@@ -71,6 +80,13 @@ export default {
param: { param: {
limit: 10, // 默认每页显示10条 limit: 10, // 默认每页显示10条
offset: 0 // 偏移量（未考虑传输时，产生新问题情况） offset: 0 // 偏移量（未考虑传输时，产生新问题情况）
},
params: {
path: '/v2/qa/questions/my',
dataJson: {
limit: 10,
offset: 0
}
} }
} }
}, },
...@@ -107,11 +123,11 @@ export default { ...@@ -107,11 +123,11 @@ export default {
pathUrl = this.tabs[i].path pathUrl = this.tabs[i].path
} }
} }
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' }) this.params.path = pathUrl
cAction.Discuss.getDiscussList(pathUrl, this.param).then(json => { // const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
this.discussList = json // cAction.Discuss.getDiscussList(pathUrl, this.param).then(json => {
console.log(this.discussList) // this.discussList = json
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() }) // }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
}, },
/** /**
* 切换 - tab * 切换 - tab
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论