课程讨论

client/src/modules/discuss/api/index.js

+import BaseAPI from '@/api/base_api'
+const httpRequest = new BaseAPI(webConf)
+
+/**
+ * 获取课程详情
+ * @param {string} courseId 课程ID
+ * @param {string} semesterId 学期ID
+ */
+export function getCourse(courseId, semesterId) {
+  return httpRequest.get(`/v2/education/courses/${courseId}/${semesterId}`)
+}
+
+/**
+ * 获取章节资源详情
+ * @param {string} vid 资源ID
+ */
+export function getChapterVideo(vid) {
+  return httpRequest.post(
+    '/v2/education/video-streaming',
+    { vid },
+    { headers: { 'Content-Type': 'application/json' } }
+  )
+}
+
+/**
+ * 获取章节资源详情
+ * @param {string} vid 章节的资源ID
+ */
+export function getChapterVideoAliyun(vid) {
+  return httpRequest.post(
+    '/v2/education/aliyun-video-streaming',
+    { vid },
+    { headers: { 'Content-Type': 'application/json' } }
+  )
+}

client/src/modules/discuss/assets/languages/en.json

+{
+  "LoginModule": {
+    "CodeLogin": {
+      "iphone": "Mobile Phone number",
+      "inputIphone": "Please enter Mobile Phone number",
+      "rightIphoneStr": "Please enter the right format Mobile Phone number",
+      "code": "SMS verification code",
+      "sendCode": "Send code",
+      "inputCode": "Please enter SMS verification code",
+      "afterMiniutes": "s before resend",
+      "isRemember": "Remember Me",
+      "submitbtn": "Log In"
+    },
+    "ForgetLogin": {
+      "step1": "Step 1",
+      "step2": "Step 2",
+      "step3": "Step 3",
+      "inputStr": "Please enter Register Mobile Phone number Or Mail",
+      "rightStr": "Please enter the right Format Mobile Phone number Or Mail",
+      "checkRightStr": "Please check whether the Mobile Phone number or Email",
+      "sendCode": "Send",
+      "codeSuccess": "The verification code has been successfully sent. No more then five times every day.",
+      "codeStr": "Code arrive to ：",
+      "iphoneCode": "Iphone Code",
+      "mailCode": "Mail Code",
+      "input4Code": "Input Four Number Code",
+      "afterMiniutes": "s before resend",
+      "prev": "Prev",
+      "next": "Next",
+      "newPwd": "New Password",
+      "placeholder": "Please enter 6-20 letters, numbers and punctuation marks, not just numbers",
+      "repeatNewPwd": "Repeat New Password",
+      "repeatPlaceholder": "Please repeat enter new password",
+      "checkPwd": "Input twice is not same",
+      "finish": "Finish",
+      "tipStr": "Password set success",
+      "goLogin": "Log In"
+    },
+    "NormalLogin": {
+      "account": "Account",
+      "inputAccount": "Please enter Email or UserID",
+      "password": "Password",
+      "inputPassword": "Please enter Password",
+      "isRemember": "Remember Me",
+      "submitbtn": "Log In"
+    },
+    "Others": {
+      "noSysRole": "You do not have system permissions, please contact the system administrator",
+      "outloginStr": "The account has been signed out, please change the account",
+      "formCheckStr": "Please check",
+      "tip": "Tips",
+      "right": "Confirm"
+    }
+  }
+}

client/src/modules/discuss/assets/languages/index.js

+import Cookies from 'js-cookie'
+import VueI18n from 'vue-i18n'
+import language from './language'
+import zhCNLocale from 'element-ui/lib/locale/lang/zh-CN'
+import enLocale from 'element-ui/lib/locale/lang/en'
+
+export default () => {
+  let _locale = 'zh-CN'
+  /* 国际化初始化 */
+  const _defaultLocale = 'zh-CN'
+  const _lang = Cookies.get('lang') || window.navigator.language || window.navigator.userLanguage || ''
+  if (_lang) {
+    if (language[_lang]) {
+      _locale = _lang
+    } else {
+      let flag = true
+      /* 做一下 兼容性处理 */
+      for (const k in language) {
+        const reg = new RegExp(k, 'gi')
+        if (reg.test(_lang)) {
+          _locale = k
+          flag = false
+          break
+        }
+      }
+      if (flag) {
+        /* 当前语言版本 - 不再我们的语言库中，那么默认 en */
+        _locale = _defaultLocale
+        Cookies.set('lang', _defaultLocale, { expires: 30, domain: '.ezijing.com' })
+      }
+    }
+  }
+  return new VueI18n({
+    locale: _locale, // 定义默认语言为中文
+    messages: {
+      'zh-CN': Object.assign(require('./zh-CN.json'), zhCNLocale),
+      en: Object.assign(require('./en.json'), enLocale)
+    }
+  })
+}

client/src/modules/discuss/assets/languages/language.js

+/* 定义语言模型 - key 值定义 跟 languages i18n 中 保持一致 */
+const language = {
+  'zh-CN': { show: '语言', arr: [{ 'zh-CN': '中文' }, { en: 'English' }] },
+  en: { show: 'Language', arr: [{ 'zh-CN': '中文' }, { en: 'English' }] }
+}
+
+export default language

client/src/modules/discuss/assets/languages/zh-CN.json

+{
+  "LoginModule": {
+    "CodeLogin": {
+      "iphone": "手机号",
+      "inputIphone": "请输入手机号",
+      "rightIphoneStr": "请输入正确格式的手机号",
+      "code": "短信验证码",
+      "sendCode": "发送验证码",
+      "inputCode": "请输入短信验证码",
+      "afterMiniutes": "s后重发",
+      "isRemember": "记住我",
+      "submitbtn": "登录"
+    },
+    "ForgetLogin": {
+      "step1": "步骤1",
+      "step2": "步骤2",
+      "step3": "步骤3",
+      "inputStr": "请输入注册手机号/邮箱",
+      "rightStr": "请输入正确格式的手机号/邮箱",
+      "checkRightStr": "请检查手机号或邮箱是否输入正确",
+      "sendCode": "发送验证码",
+      "codeSuccess": "验证码已成功发送，请耐心等待。每天最高发送5次",
+      "codeStr": "验证码已发送至：",
+      "iphoneCode": "手机验证码",
+      "mailCode": "邮箱验证码",
+      "input4Code": "请输入4位验证码",
+      "afterMiniutes": "s后重发",
+      "prev": "上一步",
+      "next": "下一步",
+      "newPwd": "新密码",
+      "placeholder": "请输入6-20个字母、数字及标点符号，不可仅数字",
+      "repeatNewPwd": "重复新密码",
+      "repeatPlaceholder": "请重新输入新密码",
+      "checkPwd": "两次输入密码不一致",
+      "finish": "完成",
+      "tipStr": "密码设置成功",
+      "goLogin": "登 录"
+    },
+    "NormalLogin": {
+      "account": "账号",
+      "inputAccount": "请输入手机号",
+      "password": "密码",
+      "inputPassword": "请输入密码",
+      "isRemember": "记住我",
+      "submitbtn": "登录"
+    },
+    "Others": {
+      "noSysRole": "您当前没有系统权限，请联络系统管理员",
+      "outloginStr": "账号已退出，请更换账号",
+      "formCheckStr": "请根据输入框提示，检查输入项。",
+      "tip": "提示",
+      "right": "确定"
+    }
+  }
+}

client/src/modules/discuss/index.js

+import './index.scss'
+import Discuss from './src/discuss.vue'
+
+const components = [
+  Discuss
+]
+
+const install = function (Vue, opts = {}) {
+  /* 存在国际化 */
+  if (opts.i18n) {
+    const msgs = opts.i18n.messages
+    for (const k in msgs) {
+      opts.i18n.setLocaleMessage(k, Object.assign(msgs[k], require('./assets/languages/' + k + '.json')))
+    }
+  }
+
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+}
+
+/* istanbul ignore if */
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+export default {
+  install,
+  Discuss
+}

client/src/modules/discuss/index.scss

+
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575px) {}
+
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767px) {}
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991px) {}
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199px) {}
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) {}

client/src/modules/discuss/src/discuss.vue

+<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 class='user'>
+          <template v-if="item.user.url">
+            <img class='img' :src='item.user.url' />
+          </template>
+          <template v-else>
+            <img class='img' src='../../assets/images/person-default.jpg' />
+          </template>
+          <div class='right'>
+            <div class='name'>{{item.user.name}}</div>
+            <div class='time'>{{item.user.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='course-name'>{{item.courseName}}</div> -->
+      </div>
+    </template>
+    <template v-if='!discussList.length'>
+      <div class='no-data'>暂无相关讨论</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import api 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 // 偏移量（未考虑传输时，产生新问题情况）
+      }
+    }
+  },
+  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 = ''
+      for (let i = 0; i < this.tabs.length; i++) {
+        if (this.tabs[i].isShow) {
+          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
+      }).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()
+    },
+    /**
+     * 跳转到对应 问题详情页
+     */
+    goDiscussDetail (e) {
+      const qid = e.currentTarget.dataset.id
+      const sid = e.currentTarget.dataset.sid
+      const cid = e.currentTarget.dataset.cid
+      this.$router.push({ path: `/app/learn/discuss-detail/${sid}/${cid}/${qid}` })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
\ No newline at end of file