提交 4ae65f82 authored 作者: lihuihui's avatar lihuihui

课程讨论模块提取

上级 8f814cae
......@@ -43,3 +43,10 @@ export const getDiscussList = (path, dataJson) => {
dataJson
)
}
export const request = (obj) => {
return httpRequest.get(
obj.path,
obj.dataJson
)
}
<template>
<div>
<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'>
<template v-if="item.questioner.url">
<img class='img' :src='item.questioner.url' />
<template v-if="item.questioner.avatar">
<img class='img' :src='item.questioner.avatar' />
</template>
<template v-else>
<img class='img' src='../assets/images/person-default.jpg' />
</template>
<div class='right'>
<div class='name'>{{item.questioner.name}}</div>
<div class='time'>{{item.questioner.time}}</div>
<div class='name'>{{item.questioner.nickname}}</div>
<div class='time'>{{item.created_time}}</div>
</div>
</div>
<div class='title'>{{item.title}}</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='["text"]' v-html="item.contents"></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>
</template>
......@@ -27,98 +28,38 @@
</template>
<script>
import * as api from '../api/index'
import { request } from '../api/index'
export default {
name: 'Discuss',
components: { },
data () {
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: [
// {
// user: {
// url: '',
// name: '用户名000',
// time: '2018-2-12 15:28:47'
// },
// title: '这是一个一句话问题这是一个一句话问题这是一个一句话问题标题这是一个一句话问题',
// text: '<p>王家有三兄弟甲、乙、丙,丙幼年时送给胡某作养子,丙结婚时,胡某为其盖了新房,后因失火致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己致使该房屋被烧毁。丙的生父母就将自己</p><p>发送到;发是否第三方sffdfdsfds</p>',
// askCnt: 20,
// TouCnt: 100,
// courseName: '在线学习课程',
// isShow: false
// }
],
param: {
limit: 10, // 默认每页显示10条
offset: 0 // 偏移量(未考虑传输时,产生新问题情况)
]
}
},
props: {
params: {
type: Object,
required: false,
default () {
return {}
}
}
},
mounted () {
this.loadAjax()
// window.addEventListener('resize', this.resizeRoot.bind(this), false)
},
destroyed () {
// window.removeEventListener('resize', this.resizeRoot.bind(this), false)
},
updated () {
this.resizeRoot()
},
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 () {
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)' })
api.getDiscussList(pathUrl, this.param)
request(this.params)
.then(json => {
this.discussList = json
})
.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 {
const cid = e.currentTarget.dataset.cid
this.$router.push({ path: `/app/learn/discuss-detail/${sid}/${cid}/${qid}` })
}
},
watch: {
params: {
handler () {
this.loadAjax()
},
deep: true
}
}
}
</script>
<style lang="scss" scoped>
.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 .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%); }
......
......@@ -74,7 +74,7 @@
<div :class='["item-order", (sort[1].isShow ? "on" : "")]' @click='sortFn' :data-index='1' :data-str='sort[1].str'>按投票排序</div>
</div>
<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 class='user'>
<template v-if="item.user.url">
......@@ -91,12 +91,12 @@
<div class='title'>{{item.title}}</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='course-name'>{{item.courseName}}</div> -->
</div>
</template>
<template v-if='!discussList.length'>
<div class='no-data'>暂无相关讨论</div>
</template>
</template> -->
<discuss :params="params"></discuss>
</div>
</template>
<template v-else>
......@@ -232,6 +232,13 @@ export default {
},
data () {
return {
params: {
path: `/v2/qa/questions/course/${this.sid}/${this.cid}`,
page: {
limit: 10,
offset: 0
}
},
ckeditor: null,
activeName: '1',
activeName1: '1',
......@@ -387,9 +394,9 @@ export default {
this.tabs[3].assess = json1
loading.close()
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
this.discussList = json2
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
// 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); loading.close() }).finally(() => { })
window.addEventListener('resize', this.resizeRoot.bind(this), false)
/* 实时刷新数据 */
......@@ -730,9 +737,17 @@ export default {
message: '问题发布成功'
})
this.isPublicShow = false
cAction.Discuss.getCourseDiscussList(this.cid, this.sid, this.param).then(json2 => {
this.discussList = json2
}).catch(e => { this.$message.error(e.message) }).finally(() => { })
this.params = {
path: `/v2/qa/questions/course/${this.sid}/${this.cid}`,
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() })
}
} else {
......@@ -759,10 +774,18 @@ export default {
this.param.sort = this.sort[index].isShow ? str : ''
this.param.offset = 0
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.discussList = json
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
this.params = {
path: `/v2/qa/questions/course/${this.sid}/${this.cid}`,
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() })
}
}
}
......
......@@ -8,9 +8,9 @@
</template>
</div>
<div class="discuss-scroll">
<!-- <discuss>
</discuss> -->
<template v-for='(item, index) in discussList'>
<discuss :params="params">
</discuss>
<!-- <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 class='user'>
<template v-if="item.user.url">
......@@ -28,30 +28,39 @@
<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>
</template>
<template v-if='!discussList.length'>
</template> -->
<!-- <template v-if='!discussList.length'>
<div class='no-data'>暂无相关讨论</div>
</template>
</template> -->
</div>
</div>
</div>
</template>
<script>
import cAction from '@action'
// import cAction from '@action'
export default {
components: { },
data () {
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: [{
title: this.$t('pages.learn.discussion.tap1'),
isShow: true,
path: '/my'
path: '/v2/qa/questions/my'
}, {
title: this.$t('pages.learn.discussion.tap2'),
isShow: false,
path: '/involved'
path: '/v2/qa/questions/involved'
}],
discussList: [
// {
......@@ -71,6 +80,13 @@ export default {
param: {
limit: 10, // 默认每页显示10条
offset: 0 // 偏移量(未考虑传输时,产生新问题情况)
},
params: {
path: '/v2/qa/questions/my',
dataJson: {
limit: 10,
offset: 0
}
}
}
},
......@@ -107,11 +123,11 @@ export default {
pathUrl = this.tabs[i].path
}
}
const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
cAction.Discuss.getDiscussList(pathUrl, this.param).then(json => {
this.discussList = json
console.log(this.discussList)
}).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
this.params.path = pathUrl
// const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
// cAction.Discuss.getDiscussList(pathUrl, this.param).then(json => {
// this.discussList = json
// }).catch(e => { this.$message.error(e.message) }).finally(() => { loading.close() })
},
/**
* 切换 - tab
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论