Merge branch 'master' into HK

src/api/user.js

@@ -3,37 +3,37 @@ import request from '@/utils/request'
 
 // 用户信息 post 方法
 export function eduGet() {
-  return request({
-    url: '//beta.api.cocorobo.cn/api/getcookieuserid',
-    method: 'GET',
-    hideloading: true
-  })
+    return request({
+        url: '//beta.api.cocorobo.cn/api/getcookieuserid',
+        method: 'GET',
+        hideloading: true
+    })
 }
 export function eduGetUserinfo(rk) {
-  return request({
-    url: `//api.edu.cocorobo.cn/edu/admin/userinfo/userinfoById/${rk}`,
-    method: 'GET',
-    hideloading: true
-  })
+    return request({
+        url: `//api.edu.cocorobo.cn/edu/admin/userinfo/userinfoById/${rk}`,
+        method: 'GET',
+        hideloading: true
+    })
 }
 
 // 退出登录
 export function loginOut(data) {
-  return request({
-    url: '//beta.api.cocorobo.cn/api/logout',
-    method: 'post',
-    params: data,
-    hideloading: false
-  })
+    return request({
+        url: '//beta.api.cocorobo.cn/api/logout',
+        method: 'post',
+        params: data,
+        hideloading: false
+    })
 }
 
 export function getUser(data) {
-  return request({
-    url: `/selectUser`,
-    method: 'GET',
-    params: data,
-    hideloading: true
-  })
+    return request({
+        url: `/selectUser`,
+        method: 'GET',
+        params: data,
+        hideloading: true
+    })
 }
 
 // // 登录
@@ -63,4 +63,4 @@ export function getUser(data) {
 //     params,
 //     hideloading: true
 //   })
-// }
+// }

src/store/modules/user.js

@@ -3,162 +3,162 @@ import { eduGet, getUser } from '@/api/user'
 import { getToken, removeToken, setToken } from '@/utils/auth'
 import { resetRouter } from '@/router'
 const getDefaultState = () => {
-  return {
-    token: getToken(),
-    id: '',
-    roles: [],
-    name: '',
-    username: '',
-    avatar: '',
-    is_init: false,
-    userinfo: ''
-  }
+    return {
+        token: getToken(),
+        id: '',
+        roles: [],
+        name: '',
+        username: '',
+        avatar: '',
+        is_init: false,
+        userinfo: ''
+    }
 }
 
 const state = getDefaultState()
 const mutations = {
-  RESET_STATE: state => {
-    Object.assign(state, getDefaultState())
-  },
-  SET_TOKEN: (state, token) => {
-    state.token = token
-  },
-  SET_ROLES: (state, roles) => {
-    state.roles = roles
-  },
-  SET_ID: (state, id) => {
-    state.id = id
-  },
-  SET_NAME: (state, name) => {
-    state.name = name
-  },
-  SET_USERNAME: (state, name) => {
-    state.username = name
-  },
-  SET_IS_INIT: (state, is_init) => {
-    state.is_init = is_init
-  },
-  SET_AVATAR: (state, avatar) => {
-    state.avatar = avatar
-  },
-  SET_USERINFO: (state, userinfo) => {
-    state.userinfo = userinfo
-  }
+    RESET_STATE: state => {
+        Object.assign(state, getDefaultState())
+    },
+    SET_TOKEN: (state, token) => {
+        state.token = token
+    },
+    SET_ROLES: (state, roles) => {
+        state.roles = roles
+    },
+    SET_ID: (state, id) => {
+        state.id = id
+    },
+    SET_NAME: (state, name) => {
+        state.name = name
+    },
+    SET_USERNAME: (state, name) => {
+        state.username = name
+    },
+    SET_IS_INIT: (state, is_init) => {
+        state.is_init = is_init
+    },
+    SET_AVATAR: (state, avatar) => {
+        state.avatar = avatar
+    },
+    SET_USERINFO: (state, userinfo) => {
+        state.userinfo = userinfo
+    }
 }
 
 const actions = {
-  // user login
-  // login({ commit }, userInfo) {
-  //   const { username, password } = userInfo
-  //   return new Promise((resolve, reject) => {
-  //     login({ username: username.trim(), password: password })
-  //       .then(response => {
-  //         const { data } = response
-  //         const token = 'JWT ' + data.token
-  //         commit('SET_TOKEN', token)
-  //         setToken(token)
-  //         resolve()
-  //       })
-  //       .catch(error => {
-  //         reject(error)
-  //       })
-  //   })
-  // },
-  login({ dispatch }) {
-    return new Promise((resolve, reject) => {
-      eduGet()
-        .then(response => {
-          console.log(response)
-          var _user = response[0][0]
-          setToken(_user.userid)
-          // dispatch('getInfo')
-          resolve(_user.userid)
+    // user login
+    // login({ commit }, userInfo) {
+    //   const { username, password } = userInfo
+    //   return new Promise((resolve, reject) => {
+    //     login({ username: username.trim(), password: password })
+    //       .then(response => {
+    //         const { data } = response
+    //         const token = 'JWT ' + data.token
+    //         commit('SET_TOKEN', token)
+    //         setToken(token)
+    //         resolve()
+    //       })
+    //       .catch(error => {
+    //         reject(error)
+    //       })
+    //   })
+    // },
+    login({ dispatch }) {
+        return new Promise((resolve, reject) => {
+            eduGet()
+                .then(response => {
+                    console.log(response)
+                    var _user = response[0][0]
+                    setToken(_user.userid)
+                        // dispatch('getInfo')
+                    resolve(_user.userid)
+                })
+                .catch(error => {
+                    // var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
+                    // setToken(_user.userid)
+                    // resolve(_user.userid)
+                    reject(error)
+                })
         })
-        .catch(error => {
-          // var _user = { userid: '5943e08c-b7d4-11ed-8d51-005056b86db5' }
-          // setToken(_user.userid)
-          // resolve(_user.userid)
-          reject(error)
+    },
+    getInfo({ commit, state }) {
+        return new Promise((resolve, reject) => {
+            getUser({ userid: getToken() })
+                .then(response => {
+                    console.log(response)
+                        // const { data } = response
+                    const data = response[0][0]
+                    if (!data) {
+                        reject('验证失败，请重新登录。')
+                    }
+                    // console.log(response)
+                    commit('SET_USERINFO', data)
+                    resolve(data)
+                        // resolve()
+                })
+                .catch(error => {
+                    reject(error)
+                })
         })
-    })
-  },
-  getInfo({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      getUser({ userid: getToken() })
-        .then(response => {
-          console.log(response)
-          // const { data } = response
-          const data = response[0][0]
-          if (!data) {
-            reject('验证失败，请重新登录。')
-          }
-          // console.log(response)
-          commit('SET_USERINFO', data)
-          resolve(data)
-          // resolve()
-        })
-        .catch(error => {
-          reject(error)
-        })
-    })
-  },
-  // get user info
-  // getInfo({ commit, state }) {
-  //   return new Promise((resolve, reject) => {
-  //     getUser()
-  //       .then(response => {
-  //         const { data } = response
+    },
+    // get user info
+    // getInfo({ commit, state }) {
+    //   return new Promise((resolve, reject) => {
+    //     getUser()
+    //       .then(response => {
+    //         const { data } = response
 
-  //         if (!data) {
-  //           reject('验证失败，请重新登录。')
-  //         }
-  //         console.log(response)
+    //         if (!data) {
+    //           reject('验证失败，请重新登录。')
+    //         }
+    //         console.log(response)
 
-  //         const { id, roles, is_init, cn, avatar, username } = response.data
-  //         // roles must be a non-empty array
-  //         if (!roles || roles.length <= 0) {
-  //           reject('getInfo: 角色必须为非空数组！')
-  //         }
-  //         commit('SET_NAME', cn)
-  //         commit('SET_USERNAME', username)
-  //         commit('SET_ROLES', roles)
-  //         commit('SET_ID', id)
-  //         commit('SET_AVATAR', avatar)
-  //         commit('SET_IS_INIT', is_init)
-  //         resolve(data)
-  //       })
-  //       .catch(error => {
-  //         reject(error)
-  //       })
-  //   })
-  // },
+    //         const { id, roles, is_init, cn, avatar, username } = response.data
+    //         // roles must be a non-empty array
+    //         if (!roles || roles.length <= 0) {
+    //           reject('getInfo: 角色必须为非空数组！')
+    //         }
+    //         commit('SET_NAME', cn)
+    //         commit('SET_USERNAME', username)
+    //         commit('SET_ROLES', roles)
+    //         commit('SET_ID', id)
+    //         commit('SET_AVATAR', avatar)
+    //         commit('SET_IS_INIT', is_init)
+    //         resolve(data)
+    //       })
+    //       .catch(error => {
+    //         reject(error)
+    //       })
+    //   })
+    // },
 
-  // user logout
-  logout({ commit, state }) {
-    return new Promise((resolve, reject) => {
-      commit('SET_TOKEN', '')
-      commit('SET_ROLES', [])
-      removeToken()
-      resetRouter()
-      commit('RESET_STATE')
-      resolve()
-    })
-  },
+    // user logout
+    logout({ commit, state }) {
+        return new Promise((resolve, reject) => {
+            commit('SET_TOKEN', '')
+            commit('SET_ROLES', [])
+            removeToken()
+            resetRouter()
+            commit('RESET_STATE')
+            resolve()
+        })
+    },
 
-  // remove token
-  resetToken({ commit }) {
-    return new Promise(resolve => {
-      commit('SET_TOKEN', '')
-      commit('SET_ROLES', [])
-      removeToken()
-      resolve()
-    })
-  }
+    // remove token
+    resetToken({ commit }) {
+        return new Promise(resolve => {
+            commit('SET_TOKEN', '')
+            commit('SET_ROLES', [])
+            removeToken()
+            resolve()
+        })
+    }
 }
 
 export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}
+    namespaced: true,
+    state,
+    mutations,
+    actions
+}

src/views/course/components/ImageComponent.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="imgBox">
+    <div @click="addImg($event)" class="imgCss">
+      <img src="../../../assets/images/course/imageUpload.png" alt="" />
+      <input type="file" accept="image/*" style="display: none" @change="beforeUpload($event)" />
+    </div>
+    <div class="imgList">
+      <div v-for="(item, index) in imgList" :key="index" class="imgItem">
+        <div class="itemImg" @click="previewImg(pptImgUrl1)">
+          <img :src="item" alt="" />
+        </div>
+        <div class="deleteImg" @click="deleteItem(item)">
+          <img src="../../../assets/images/course/delete.png" alt="" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imgList: []
+    }
+  },
+  methods: {
+    previewImg(url) {
+      this.$hevueImgPreview(url)
+    },
+    addImg(e) {
+      var el = e.currentTarget
+      el.getElementsByTagName('input')[0].click()
+      e.target.value = ''
+    },
+    deleteItem(i) {
+      this.imgList.splice(this.imgList.indexOf(i), 1)
+      this.$forceUpdate()
+    },
+    beforeUpload(event) {
+      var file = event.target.files[0]
+      var credentials = {
+        accessKeyId: 'AKIATLPEDU37QV5CHLMH',
+        secretAccessKey: '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'
+      } //秘钥形式的登录上传
+      window.AWS.config.update(credentials)
+      window.AWS.config.region = 'cn-northwest-1' //设置区域
+      var bucket = new window.AWS.S3({ params: { Bucket: 'ccrb' } }) //选择桶
+      var _this = this
+      if (file) {
+        var params = {
+          Key:
+            file.name.split('.')[0] +
+            new Date().getTime() +
+            '.' +
+            file.name.split('.')[file.name.split('.').length - 1],
+          ContentType: file.type,
+          Body: file,
+          'Access-Control-Allow-Credentials': '*',
+          ACL: 'public-read'
+        } //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
+        var options = {
+          partSize: 2048 * 1024 * 1024,
+          queueSize: 2,
+          leavePartsOnError: true
+        }
+        bucket
+          .upload(params, options)
+          .on('httpUploadProgress', function (evt) {
+            //这里可以写进度条
+          })
+          .send(function (err, data) {
+            if (err) {
+              _this.$message.error('上传失败')
+            } else {
+              _this.imgList.push(data.Location)
+              _this.getImage(_this.imgList)
+            }
+          })
+      }
+    },
+    getImage(imageList) {
+      this.$emit('getImage', imageList)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.imgBox {
+  margin: 10px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  .imgCss {
+    width: 50px;
+    height: 50px;
+    margin-left: 0 0.3rem;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .imgList {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    .imgItem {
+      position: relative;
+      width: 50px;
+      margin: 0 10px 10px 0;
+      .itemImg {
+        width: 50px;
+        height: 50px;
+        z-index: 1;
+        > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .deleteImg {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 9;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/course/components/commentBox.vue

@@ -9,18 +9,20 @@
             {{ pz.username && pz.username.length > 8 ? pz.username.substring(0, 8) + '...' : pz.username }}的批注
           </div>
           <!--  -->
-          <div class="pzDelete" @click="deletePz(pz.id)" v-if="pz.userid == userinfo.userid">
-            删除
-          </div>
+          <div class="pzDelete" @click="deletePz(pz.id)" v-if="pz.userid == userinfo.userid">删除</div>
         </div>
-        <div class="pzContent cont" v-html="pz.content" v-if="pz.type == '1'"></div>
+        <div @click="checkImg(getImgList(pz.content))" class="pzContent cont navAndImg" v-html="pz.content" v-if="pz.type == '1'"></div>
         <div class="pzContent" v-if="pz.type == '2'">
           <audio :src="pz.content" controls="controls" ref="audio">
             Your browser does not support the audio element.
           </audio>
         </div>
         <div class="pzContent" v-if="pz.type == '3'">
-          <img :src="pz.content" style="width: 90%; margin: 0 auto; display: block" @click="previewImg(pz.content)" />
+          <img
+            :src="pz.content"
+            style="width: 100%; margin: 0px auto; display: block"
+            @click="previewImg(pz.content)"
+          />
         </div>
         <div class="time">
           {{ pz.time }}
@@ -31,11 +33,12 @@
       <img src="@/assets/images/course/noPz.png" alt="" />
     </div>
 
-    <div class="commentInput" @click="panelVisible = true">
+    <div class="commentInput" @click="setPanelVisible(true)">
       <div class="input">点击发一条评课内容</div>
     </div>
     <commentPanel
-      :panelVisible.sync="panelVisible"
+      @setPanelVisible="setPanelVisible"
+      :panelVisible="panelVisible"
       :courseid="courseid"
       :courseType="courseType"
       :taskCount="taskCount"
@@ -53,6 +56,9 @@ export default {
       type: String,
       default: ''
     },
+    panelVisible:{
+      type:Boolean
+    },
     courseType: {
       type: Number,
       default: 0
@@ -68,11 +74,21 @@ export default {
   data() {
     return {
       pzList: [],
-      panelVisible: false
     }
   },
   computed: {
-    ...mapGetters(['userinfo'])
+    ...mapGetters(['userinfo']),
+    getImgList() {
+      return function (val) {
+        let srcList = [] // 定义一个数组用来接收后面的img地址
+
+        val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
+          // 查找匹配的元素   match为整个img标签  capture为src中的内容
+          srcList.push(capture)
+        })
+        return srcList
+      }
+    }
   },
   watch: {
     courseType(newValue, oldValue) {
@@ -86,6 +102,21 @@ export default {
     }
   },
   methods: {
+    setPanelVisible(bool){
+      this.$emit('update:panelVisible', bool)
+    },
+    previewImg(url) {
+      this.$hevueImgPreview(url)
+    },
+    checkImg(list) {
+      if (!list.length) {
+        return
+      }
+      this.$hevueImgPreview({
+        multiple: true, // 开启多图预览模式
+        imgList: list // 需要预览的多图数组
+      })
+    },
     deletePz(id) {
       this.$dialog({
         message: '确定删除此批注吗？',
@@ -234,6 +265,10 @@ export default {
     }
   }
 
+  /deep/.navAndImg img{
+    width: 100%;
+  }
+
   .pzContent audio {
     width: 100%;
     height: 1.2rem;

src/views/course/components/commentPanel.vue

@@ -16,6 +16,9 @@
       </div>
       <div class="cp-conent" v-if="type == 1">
         <van-field v-model="message" rows="20" autosize type="textarea" placeholder="请输入..." />
+        <div>
+          <image-component @getImage="getImage"></image-component>
+        </div>
       </div>
       <div class="cp-audio" v-if="type == 2">
         <audio-component @addPz="addPz"></audio-component>
@@ -25,6 +28,7 @@
 </template>
 
 <script>
+import ImageComponent from './ImageComponent.vue'
 import AudioComponent from './AudioComponent.vue'
 import { addPz2 } from '@/api/course'
 import { mapGetters } from 'vuex'
@@ -48,12 +52,14 @@ export default {
     }
   },
   components: {
-    AudioComponent
+    AudioComponent,
+    ImageComponent
   },
   data() {
     return {
       type: 1,
-      message: ''
+      message: '',
+      imgList: []
     }
   },
   computed: {
@@ -61,23 +67,35 @@ export default {
   },
   methods: {
     back() {
-      this.$emit('update:panelVisible', false)
+      this.$emit('setPanelVisible', false)
     },
     setType(type) {
       this.type = type
     },
+    getImage(imgList) {
+      this.imgList = imgList;
+      this.$forceUpdate();
+    },
     addPz(type, content) {
+      var a = ''
       if (type === 1 && this.message === '') {
         this.$toast({ message: '批注不能为空！', type: 'fail' })
         return
       }
+      if (type === 1 && this.message != '') {
+        var img = ''
+        for (var i = 0; i < this.imgList.length; i++) {
+          img += "<img src='" + this.imgList[i] + "' />"
+        }
+        a = this.message.replaceAll(/%/g, '%25') + img
+      }
       const params = [
         {
           cid: this.courseid,
           uid: this.userinfo.userid,
           s: this.courseType,
           t: this.taskCount,
-          c: type === 1 ? this.message.replaceAll(/%/g, '%25') : content,
+          c: type === 1 ? a : content,
           type: type
         }
       ]
@@ -88,7 +106,7 @@ export default {
             message: '添加成功',
             type: 'success'
           })
-          this.$emit('update:panelVisible', false)
+          this.$emit('setPanelVisible', false)
         })
         .catch(err => {
           console.error(err)
@@ -156,7 +174,7 @@ export default {
         transition: all 0.5s;
 
         + .type-nav-box {
-          margin-left: .3rem;
+          margin-left: 0.3rem;
         }
 
         &.active {
@@ -172,6 +190,9 @@ export default {
       overflow: auto;
       font-size: 14px;
       width: 100%;
+      /deep/ .van-field__control {
+        height: 399px !important;
+      }
     }
     .cp-audio {
       height: calc(100% - 60px);

src/views/course/index.vue

@@ -12,7 +12,7 @@
       </template>
     </head-bar>
     <div class="course-box" ref="cBox">
-      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="panelVisible">
         <course-title :chapInfo="chapInfo" :courseType="courseType" :taskCount="taskCount"></course-title>
         <course-content-list v-if="false"></course-content-list>
         <div class="course-type-box">
@@ -41,6 +41,7 @@
           ></steps-box>
           <comment-box
             v-show="type == 2"
+            :panelVisible.sync="panelVisible"
             :courseid="courseid"
             :courseType="courseType"
             :taskCount="taskCount"
@@ -111,7 +112,8 @@ export default {
       tcid: '',
       tcid2: this.$route.query.tcid,
       navVisible: false,
-      isLoading: false
+      isLoading: false,
+      panelVisible: false
     }
   },
   methods: {
@@ -156,7 +158,7 @@ export default {
     setType(type, is) {
       this.type = type
       if (is) {
-        this.$refs['comment'].panelVisible = true
+        this.panelVisible = true
       }
     },
     navCheck() {