上传、粘贴、样式等

准备接部分接口

index.html

@@ -14,6 +14,7 @@
     <div id="app">
     	<router-view></router-view>
     </div>
+    <!-- <script src="qiniu.min.js"></script> -->
     <script src="https://unpkg.com/qiniu-js@2.2.0/dist/qiniu.min.js"></script>
   </body>
 </html>

package.json

@@ -18,6 +18,7 @@
     "@babel/polyfill": "^7.2.5",
     "axios": "0.16.2",
     "better-scroll": "^0.1.15",
+    "clipboard": "^2.0.6",
     "echarts": "^4.2.0-rc.2",
     "element-ui": "^2.6.1",
     "fastclick": "^1.0.6",
@@ -72,7 +73,8 @@
     "webpack-dev-middleware": "^1.8.3",
     "webpack-dev-server": "^1.16.2",
     "webpack-hot-middleware": "^2.12.2",
-    "webpack-merge": "^0.14.1"
+    "webpack-merge": "^0.14.1",
+    "v-viewer": "^1.2.1"
   },
   "engines": {
     "node": ">= 4.0.0",

src/App.vue

@@ -33,7 +33,6 @@ export default {
 	},
 	data() {
 		return {
-			idType: 0,
 			token: '',
 			userName: '',
 			authList: []
@@ -84,7 +83,6 @@ export default {
 		// 修改token
 		...mapActions([
 			'changeToken',
-			'changeIdType'
 		]),
 		// 获取用户权限
 		getUserAuth(token) {

src/components/IM/user-info.vue

@@ -7,11 +7,12 @@
     <p class="user-mb">{{userInfo.mobilePhone}}</p>
     <p>
       <el-button
+        class="footer"
         style="width: 100px;"
         v-if="userInfo.isShowCopyBtn"
         type="primary"
         size="small"
-        @click="copy()"
+        @click="clipboardAction"
       >复制手机号</el-button>
     </p>
     <section class="other-info-wrapper">
@@ -57,6 +58,7 @@
   </section>
 </template>
 <script>
+let clipboard = null;
 export default {
   props: {
     userInfo: {
@@ -94,8 +96,17 @@ export default {
     };
   },
   methods: {
-    // 执行粘贴操作
-    copy() {}
+    // 粘帖文本
+    clipboardAction() {
+      const _this = this;
+      clipboard && clipboard.destroy();   //  不是单例的，所以每次都要销毁
+      clipboard = new this.ClipboardJS('.footer', { // .footer：文档的CSS类名
+        text: function(trigger) {
+          console.log(_this.userInfo.mobilePhone);
+          return _this.userInfo.mobilePhone;  // 要粘贴的文案
+        }
+      });
+    }
   }
 };
 </script>

src/main.js

@@ -5,10 +5,17 @@ import routes from './router/router'
 import store from './store/'
 const mixins = require('@/utils/mixins');
 import vueFilters from '@/utils/filter'
+// import '@/utils/qiniu.min'
 
 // 引入ElementUI
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css';
+import vViewer from 'v-viewer';
+import 'viewerjs/dist/viewer.css';
+import ClipboardJS from 'clipboard';
+
+Vue.prototype.ClipboardJS = ClipboardJS;
+Vue.use(vViewer);
 
 // 可调试
 // Vue.config.devtools = true;

src/store/getters.js

-import education from './education/getters'
+import education from './im/getters'
 
 import { containObject }  from '../utils/utils'
 

src/store/education/common.js → src/store/im/common.js

 const common = {
     state: {
         _token: '',
-        idType: ''
+        
     },
     mutations: {
         CHANGE_TOKEN: (state, data) => {
             state._token = data
         },
-        CHANGE_IDTYPE: (state, data) => {
-            state.idType = data
-        }
     },
     actions: {
         changeToken({ commit }, tokenData) {
             commit('CHANGE_TOKEN', tokenData)
         },
-        changeIdType({ commit }, idTypeData) {
-            commit('CHANGE_IDTYPE', idTypeData)
-        }
     }
 }
 

src/store/education/getters.js → src/store/im/getters.js

 
 const getters = {
     _token: state => state.common._token,
-    idType: state => state.common.idType
 }
 
 export default getters

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
-import common from './education/common'
-import getters from './getters'  
+import common from './im/common'
+import getters from './getters'
 
 
 Vue.use(Vuex)

src/views/IM/search-message/detail.vue

@@ -186,7 +186,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["_token", "idType"])
+    ...mapGetters(["_token"])
   },
   created() {
 		this.id = this.$route.query.id

src/views/IM/search-message/list.vue

@@ -31,7 +31,7 @@
         </el-table-column>
         <div slot="empty">
           <div class="table-empty">
-            <img src="../../../assets/image/no-content1.png" />
+            <img src="../../../assets/image/IM/no-search-list.png" />
             <p>没有查询到相关结果</p>
           </div>
         </div>
@@ -176,11 +176,12 @@ export default {
       text-align: right;
     }
     .table-empty {
+      margin-top: 20px;
       img {
         width: 100px;
       }
       p {
-        margin-top: -50px;
+        margin-top: -45px;
       }
     }
   }

src/views/IM/waiting-session/list-with-pagenat.vue

-<template>
-  <div class="wts-list-wrap">
-    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
-    <div class="component-content screenSet" id="screenSet">
-      <div class="search-title">
-        <p>当前共有<span class="num">5位</span>用户正在等待</p>
-        <el-button type="primary" size="small" @click="getNextSession()">给我一个任务吧</el-button>
-      </div>
-      <el-table :data="tableData" style="width: 100%" v-loading="loading">
-        <el-table-column prop="id" label="用户名" min-width="50" align="center"></el-table-column>
-        <el-table-column prop="subject" label="等待时间" min-width="100" align="center"></el-table-column>
-        <el-table-column prop="category" label="用户类型" min-width="50" align="center"></el-table-column>
-        <el-table-column prop="remark" label="认证状况" min-width="100" align="center"></el-table-column>
-        <el-table-column prop="createdusername" label="所属机构" min-width="50" align="center"></el-table-column>
-        <el-table-column prop="modifiedUsername" label="备注信息" min-width="100" align="center"></el-table-column>
-        <div slot="empty">
-          <div class="table-empty">
-            <img src="../../../assets/image/no-content1.png" />
-            <p>没有查询到相关结果</p>
-          </div>
-        </div>
-      </el-table>
-      <!-- 分页 -->
-      <div class="pagination">
-        <el-pagination
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="searchParam.pageNo"
-          :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
-          :page-size="searchParam.pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="totalRows"
-        ></el-pagination>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import BreadCrumb from "@/components/breadcrumb.vue";
-import { doUpload, getFilePath } from "@/utils/qiniu-util";
-import { validateWord } from "@/utils/validate.js";
-import { openLoading, closeLoading } from "@/utils/utils";
-import * as commonUtil from "@/utils/utils";
-let vm = null;
-export default {
-  components: {
-    BreadCrumb
-  },
-  data() {
-    return {
-      curmbFirst: "组件",
-      curmbSecond: "讨论组件",
-      searchParam: {
-        theme: "",
-        type: "",
-        name: "",
-        status: "",
-        pageNo: 1,
-        pageSize: 15
-      },
-      category: [],
-      categoryStatus: "",
-      statuSelect: [
-        {
-          label: "未发布",
-          value: "1"
-        },
-        {
-          label: "已发布",
-          value: "2"
-        },
-        {
-          label: "已下架",
-          value: "3"
-        }
-      ],
-      tableData: [],
-      totalRows: 0,
-      loading: false,
-      nextSessionId: '',
-    };
-  },
-  computed: {
-  },
-  filters: {
-    filteFun(index) {
-      let str = "";
-      if (index == 1) {
-        str = "未发布";
-      } else if (index == 2) {
-        str = "已发布";
-      } else if (index == 3) {
-        str = "已下线";
-      }
-      return str;
-    }
-  },
-  created() {
-    this.getData();
-  },
-  // 挂载到Dom完成时
-  mounted: function() {
-    commonUtil.resizeHeight();
-  },
-  methods: {
-    // 列表查询
-    search() {
-      this.getData();
-    },
-
-    // 获取数据
-    getData() {
-      let subject = 0,
-        status = 0,
-        name = 0;
-      if (this.searchParam.theme != "") {
-        subject = this.searchParam.theme;
-      }
-      if (this.searchParam.status != "") {
-        status = this.searchParam.status;
-      }
-      if (this.searchParam.name != "") {
-        name = this.searchParam.name;
-      }
-      console.log(this.categoryStatus);
-
-      this.loading = true;
-      let cStatus = this.categoryStatus ? this.categoryStatus : "0"; //'0'表示默认查所有的
-      let url =
-        "/interaction/discuss/" +
-        cStatus +
-        "/" +
-        subject +
-        "/" +
-        name +
-        "/" +
-        status +
-        "/" +
-        this.searchParam.pageNo +
-        "/" +
-        this.searchParam.pageSize;
-      this.GET(url).then(res => {
-        this.loading = false;
-        if (res.code == "000000") {
-          console.log(res.data);
-          this.tableData = res.data.resp.discuss || [];
-          this.nextSessionId = this.tableData[0] && this.tableData[0].id;
-          console.log('this.nextSessionId', this.nextSessionId);
-          this.totalRows = res.data.resp.count;
-          if (res.data.typeList && res.data.typeList.length) {
-            let arr = [];
-            for (let i = 0; i < res.data.typeList.length; i++) {
-              let obj = {};
-              obj.label = res.data.typeList[i];
-              obj.value = res.data.typeList[i];
-              arr.push(obj);
-            }
-            this.category = arr;
-          }
-        }
-      });
-    },
-
-    // 给我一个任务吧
-    getNextSession() {
-      this.$router.push({ path: `/current-session-list?nextSessionId=${this.nextSessionId}` });
-    },
-
-    handleSizeChange(value) {
-      this.searchParam.pageSize = value;
-      this.getData();
-    },
-    handleCurrentChange(value) {
-      this.searchParam.pageNo = value;
-      this.getData();
-    }
-  }
-};
-</script>
-<style lang="scss" scoped>
-.wts-list-wrap {
-  .component-content {
-    padding: 10px;
-    background: #fff;
-    // margin: 84px 20px 20px;
-    .search-title {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10px 12px;
-      font-size: 12px;
-      margin-bottom: 20px;
-      border-bottom: 1px solid #efefef;
-      .num {
-        color: #449284;
-      }
-    }
-    .create-button {
-      padding: 0 0 15px;
-      margin-top: 0 !important;
-      text-align: right;
-    }
-    .table-empty {
-      img {
-        width: 100px;
-      }
-      p {
-        margin-top: -50px;
-      }
-    }
-  }
-}
-</style>
\ No newline at end of file

src/views/IM/waiting-session/list.vue

@@ -15,7 +15,7 @@
         <!-- <el-table-column prop="modifiedUsername" label="备注信息" min-width="100" align="center"></el-table-column> -->
         <div slot="empty">
           <div class="table-empty">
-            <img src="../../../assets/image/no-content1.png" />
+            <img src="../../../assets/image/IM/no-search-list.png" />
             <p>没有查询到相关结果</p>
           </div>
         </div>
@@ -136,11 +136,12 @@ export default {
       text-align: right;
     }
     .table-empty {
+      margin-top: 20px;
       img {
         width: 100px;
       }
       p {
-        margin-top: -50px;
+        margin-top: -45px;
       }
     }
   }