Explorar el Código

update service

luke hace 6 años
padre
commit
c0c264784a

+ 74 - 71
service/build/webpack.base.conf.js

@@ -4,79 +4,82 @@ const utils = require('./utils')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
 
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
+function resolve(dir) {
+	return path.join(__dirname, '..', dir)
 }
 
 
-
 module.exports = {
-  context: path.resolve(__dirname, '../'),
-  entry: {
-    app: './src/main.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
-    }
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
+	context: path.resolve(__dirname, '../'),
+	entry: {
+		app: './src/main.js'
+	},
+	output: {
+		path: config.build.assetsRoot,
+		filename: '[name].js',
+		publicPath: process.env.NODE_ENV === 'production'
+			? config.build.assetsPublicPath
+			: config.dev.assetsPublicPath
+	},
+	resolve: {
+		extensions: ['.js', '.vue', '.json'],
+		alias: {
+			'vue$': 'vue/dist/vue.esm.js',
+			'@': resolve('src'),
+		}
+	},
+	module: {
+		rules: [
+			{
+				test: /\.less$/,
+				loader: "style-loader!css-loader!less-loader",
+			},
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader',
+				options: vueLoaderConfig
+			},
+			{
+				test: /\.js$/,
+				loader: 'babel-loader',
+				include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+			},
+			{
+				test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+				loader: 'url-loader',
+				options: {
+					limit: 10000,
+					name: utils.assetsPath('img/[name].[hash:7].[ext]')
+				}
+			},
+			{
+				test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+				loader: 'url-loader',
+				options: {
+					limit: 10000,
+					name: utils.assetsPath('media/[name].[hash:7].[ext]')
+				}
+			},
+			{
+				test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+				loader: 'url-loader',
+				options: {
+					limit: 10000,
+					name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+				}
+			}
+		]
+	},
+	node: {
+		// prevent webpack from injecting useless setImmediate polyfill because Vue
+		// source contains it (although only uses it if it's native).
+		setImmediate: false,
+		// prevent webpack from injecting mocks to Node native modules
+		// that does not make sense for the client
+		dgram: 'empty',
+		fs: 'empty',
+		net: 'empty',
+		tls: 'empty',
+		child_process: 'empty'
+	}
 }

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 454 - 56
service/package-lock.json


+ 4 - 1
service/package.json

@@ -11,8 +11,11 @@
   },
   "dependencies": {
     "axios": "^0.19.0",
-    "element-ui": "^2.10.1",
+    "element-ui": "^2.11.1",
     "js-md5": "^0.7.3",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
+    "style-loader": "^0.23.1",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
     "vuex": "^3.1.1"

+ 6 - 38
service/src/components/hader.vue

@@ -6,8 +6,7 @@
                 你好,<span>{{user_info.user_name}}--{{user_info.group}}</span>
             </div>
             <div class="row item-center rightAlignment msg box_div" style="padding: 0 30px;font-size:12px;color:#999">
-                <div  style="margin-right: 30px;" >
-                    <!-- <img :src="state?require('@/assets/img/hader1.png'):require('@/assets/img/hader1a.png')">  -->
+                <div>
                     <el-dropdown @command="handleCommand" >
                         <span class="el-span-1">
                             <i style="font-size:14px;color:#5399F5;" class="el-icon-user"></i>
@@ -20,44 +19,10 @@
                         </el-dropdown-menu>
                     </el-dropdown> 
                 </div>
-  <!-- {{state == ?'在线':'离线'}} -->
-                <div style="margin-right: 20px;">
-                    <el-popover placement="right" width="800"  trigger="click"> 
-                        <div class="row "> 
-                            <div class="msg_left">             
-                                <span>全部消息</span>
-                                <span>系统公告</span>
-                                <span>个人消息</span>
-                            </div>
-                            <div class="msg_rigth">
-                                <span>客服满意度调查!</span>
-                            </div>
-                        </div>
-                        <div class="msg_left">
 
-                        </div>
-                        <div class="msg_rigth">
+                <el-button @click="openDrawer" style="margin:0 15px"><i style="font-size:14px; color:#5399F5;" class="el-icon-chat-dot-square"> </i>消息中心</el-button>
 
-                        </div>
-                        <!-- <el-popover
-                        placement="top"
-                        width="160"
-                        v-model="visible">
-                        <p>这是一段内容这是一段内容确定删除吗?</p>
-                        <div style="text-align: right; margin: 0">
-                            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
-                            <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
-                        </div>
-                        <el-button slot="reference">删除</el-button>
-                        </el-popover> -->
-                        <el-button slot="reference"><i style="font-size:14px; margin-right: 3px;color:#5399F5;" class="el-icon-chat-dot-square"> </i>消息中心</el-button>
-                        
-                    </el-popover>   
-                </div>
                 <span  @click="isExit()" class="el-span-1"><i style="font-size:13px; margin-right: 3px; color:#5399F5;" class="el-icon-switch-button"></i>退出</span>
-                <!-- <p><img src="@/assets/img/hader2.png">消息中心</p> -->
-                <!-- <p><img :src="network?require('@/assets/img/hader3.png'):require('@/assets/img/hader3a.png')">{{network?'网络状态':'无网'}}</p> -->
-                <!-- <p  @click="$router.push('/login')"><img src="@/assets/img/hader4.png">退出</p> -->
             </div>
         </div>
     </div>
@@ -81,7 +46,10 @@
             }
         },
         methods:{
-
+            openDrawer(){
+                // this.$emit("listenDrawer", true);
+                this.$store.dispatch("SET_DRAWER", true);
+            },
             /**********************************************/
             //切换用户状态
             handleCommand(e){

+ 214 - 0
service/src/components/messageCenter.vue

@@ -0,0 +1,214 @@
+<template>
+	<!-- 消息中心 -->
+	<el-drawer
+			style="margin-top: 50px"
+			:visible.sync="drawer"
+			:modal="false"
+			:show-close="false"
+			size="90%">
+		<div>
+			<el-col :span="6" class="left-list">
+				<div class="tabs">
+					<a :class="switchMessageType=='all'?'active':''" @click="switchMessage('all')">全部消息</a>
+					<a :class="switchMessageType=='system'?'active':''" @click="switchMessage('system')">系统公告</a>
+					<a :class="switchMessageType=='person'?'active':''" @click="switchMessage('person')">个人消息</a>
+				</div>
+				<ul class="message-list" v-if="switchMessageType == 'all'">
+					<li class="list-item">
+						<p class="item-info">
+							<span class="name">GFF_D345</span>
+							<span class="time">11:30:54</span>
+						</p>
+						<p>客服满意度调查</p>
+					</li>
+					<li class="list-item">
+						<p class="item-info">
+							<span class="name">GFF_D345</span>
+							<span class="time">11:30:54</span>
+						</p>
+						<p>客服满意度调查</p>
+					</li>
+				</ul>
+				<ul class="message-list" v-if="switchMessageType == 'system'">
+					<li class="list-item">
+						<p class="item-info">
+							<span class="name">GFF_D345</span>
+							<span class="time">11:30:54</span>
+						</p>
+						<p>我是系统公告</p>
+					</li>
+				</ul>
+
+				<ul class="message-list" v-if="switchMessageType == 'person'">
+					<li class="list-item">
+						<p class="item-info">
+							<span class="name">GFF_D345</span>
+							<span class="time">11:30:54</span>
+						</p>
+						<p>我是个人消息</p>
+					</li>
+				</ul>
+			</el-col>
+			<el-col :span="18">
+				<el-row class="title">
+					<strong>客服满意度调查!</strong>
+					<i @click="handleClose" class="el-icon-close"></i>
+				</el-row>
+				<el-row class="messageBox">
+					<ul>
+						<li><p>发件人:管理员</p></li>
+						<li><p>收件人:客服小王</p></li>
+						<li><p>时 间:2019年7月2日(星期二) 上午9:53</p></li>
+					</ul>
+					<div class="message-content">
+						如果您在一份订单里订购了多种商品并且销售方只给您发出了部分商品时,您与销售方之间仅就实际直接向您发出的商品建立了合同关系;只有在销售方实际直接向
+						您发出了订单中订购的其他商品时,您和销售方之间就订单中该其他已实际直接向您发出的商品建立了合同关系。
+					</div>
+				</el-row>
+			</el-col>
+		</div>
+	</el-drawer>
+</template>
+
+<script>
+
+	export default {
+		name: "messageCenter",
+		data() {
+			return {
+				drawer: false,
+				switchMessageType: "all",
+			}
+		},
+		computed: {
+			get_drawer() {
+				return this.$store.getters.get_drawer;
+			},
+		},
+		watch: {
+			get_drawer(data) {
+				console.log(data)
+				this.drawer = data;
+			},
+		},
+		methods: {
+			handleClose() {
+				this.$store.dispatch("SET_DRAWER", false);
+			},
+			switchMessage(num) {
+				this.switchMessageType = num;
+			},
+		},
+
+	}
+</script>
+
+<style lang="less" scoped>
+	.left-list {
+		border-right: 1px solid #D5E5FF;
+		height: 100vh;
+	}
+
+	.tabs {
+		display: flex;
+		justify-content: space-around;
+		height: 48px;
+		line-height: 48px;
+		border-bottom: 1px solid #D5E5FF;
+
+		a {
+			font-size: 14px;
+			cursor: pointer;
+		}
+
+		a.active {
+			color: #5399F5;
+			border-bottom: 2px solid #5399F5;
+		}
+	}
+
+	.message-list {
+		margin: 0;
+
+		.list-item:nth-of-type(odd) {
+			background: #F6F8FF;
+		}
+
+		.list-item:nth-of-type(even) {
+			background: #fff;
+		}
+
+		.list-item {
+			padding: 10px 20px;
+
+			p {
+				color: #666;
+				font-size: 14px;
+			}
+		}
+
+		.item-info {
+			margin-bottom: 10px;
+			display: flex;
+			justify-content: space-between;
+
+			span {
+				font-size: 14px;
+				color: #666;
+			}
+
+			span.time {
+				color: #999;
+			}
+		}
+	}
+
+	.title {
+		padding: 0 10px;
+		height: 48px;
+		line-height: 48px;
+		border-bottom: 1px solid #D5E5FF;
+
+		i {
+			margin-top: 15px;
+			font-size: 18px;
+			cursor: pointer;
+			float: right;
+		}
+	}
+
+	.messageBox {
+		padding: 20px;
+
+		li {
+			margin: 10px 0;
+
+			p {
+				font-size: 14px;
+				color: #999999;
+			}
+		}
+
+		.message-content {
+			margin-top: 20px;
+			background: #F5F5F5;
+			border: 1px solid #EEEEEE;
+			padding: 20px;
+			font-size: 14px;
+			color: #666;
+			line-height: 1.8;
+		}
+	}
+</style>
+<style>
+	.el-drawer__container {
+		outline: none !important;
+	}
+
+	.el-drawer__header {
+		padding: 0 !important;
+		height: 10px !important;
+		margin-bottom: 0 !important;
+	}
+
+</style>

+ 5 - 0
service/src/css/index.css

@@ -1,5 +1,7 @@
 /* 禁止文本内容被鼠标选中变蓝 */
 * {
+  padding: 0;
+  margin: 0;
   -o-user-select: none;
   -moz-user-select: none;
   /*火狐 firefox*/
@@ -18,6 +20,9 @@ body,img{
   margin: 0;
   overflow: hidden;
 }
+ul,li {
+  list-style: none;
+}
 .hover:hover{
   cursor: pointer;
 }

+ 6 - 4
service/src/pages/TheCurrentSession.vue

@@ -2,9 +2,9 @@
   <div class="row allAlignment">
     <leftNav />
     <div>
-      <hader />
+      <hader/>
       <div class="row">
-
+       <messageCenter></messageCenter>
         <!-- 聊天列表模块 -->
         <div class="sessionList">
           <el-collapse>
@@ -250,6 +250,8 @@
 import "@/css/index.css";
 import leftNav from "@/components/leftNav";
 import hader from "@/components/hader";
+import messageCenter from "@/components/messageCenter";
+
 export default {
   name: "TheCurrentSession",
   data() {
@@ -287,7 +289,6 @@ export default {
    *
    */
   methods: {
-
     /************回车提交************/
     listenEnter(event){
       if (event.keyCode === 13) {
@@ -983,7 +984,8 @@ export default {
 
   components: {
     leftNav,
-    hader
+    hader,
+    messageCenter
   }
 };
 </script>

+ 106 - 94
service/src/store/index.js

@@ -1,124 +1,136 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import fa from "element-ui/src/locale/lang/fa";
+
 Vue.use(Vuex);
 /**
  * 设置全局访问的state对象
  store
  */
 const state = {
-  user_info:'', //用户信息
-  sessionList:[],//会话列表
-  offlineList:[],//离线列表
-  sessionType:1,//选择列表状态默认未1(1是会话中,2是离线)
-  data_num:0,//定位当前会话,默认是0
-  navState:'TheCurrentSession',//导航状态
-  session_message:'',//会话消息
-  stateValue:'',//状态值
-  is_init:false,//初始化
+	user_info: '', //用户信息
+	sessionList: [],//会话列表
+	offlineList: [],//离线列表
+	sessionType: 1,//选择列表状态默认未1(1是会话中,2是离线)
+	data_num: 0,//定位当前会话,默认是0
+	navState: 'TheCurrentSession',//导航状态
+	session_message: '',//会话消息
+	stateValue: '',//状态值
+	is_init: false,//初始化,
+	new_drawer: false, //显示消息中心
 }
 
 /**
  * 实时监听state里面值的变法(最新变法)
  */
 const getters = {
-    get_user_info(state){
-        return state.user_info;
-    },
-    get_session(state){
-        return state.sessionList;
-    },
-    get_offline(state){
-        return state.offlineList;
-    },
-    get_type(state){
-        return state.sessionType;
-    },
-    get_num(state){
-        return state.data_num;
-    },
-    get_navState(state){
-        return state.navState;
-    },
-    get_session_message(state){
-      return state.session_message;
-    },
-    get_stateValue(state){
-      return state.stateValue;
+	get_user_info(state) {
+		return state.user_info;
+	},
+	get_session(state) {
+		return state.sessionList;
+	},
+	get_offline(state) {
+		return state.offlineList;
+	},
+	get_type(state) {
+		return state.sessionType;
+	},
+	get_num(state) {
+		return state.data_num;
+	},
+	get_navState(state) {
+		return state.navState;
+	},
+	get_session_message(state) {
+		return state.session_message;
+	},
+	get_stateValue(state) {
+		return state.stateValue;
+	},
+	get_is_init(state) {
+		return state.is_init;
+	},
+    get_drawer(state) {
+        return state.new_drawer;
     },
-    get_is_init(state){
-      return state.is_init;
-    }
 }
 /**
  * 设置对外可调用的方法
  */
 const mutations = {
-  new_user_info(state,val){
-    state.user_info = val; 
-      //console.log(val);
-  },
-  new_session(state,val){
-    state.sessionList = val;
-  },
-  new_offline(state,val){
-    state.offlineList = val;
-  },
-  new_type(state,val){
-    state.sessionType = val;
-  },
-  new_num(state,val){
-    state.data_num = val;
-  },
-  new_navState(state,val){
-    state.navState = val;
-  },
-  new_session_message(state,val){
-    state.session_message = val;
-  },
-  new_stateValue(state,val){
-    state.stateValue = val;
-  },
-  new_is_init(state,val){
-    state.is_init = val;
-  },
+	new_user_info(state, val) {
+		state.user_info = val;
+		//console.log(val);
+	},
+	new_session(state, val) {
+		state.sessionList = val;
+	},
+	new_offline(state, val) {
+		state.offlineList = val;
+	},
+	new_type(state, val) {
+		state.sessionType = val;
+	},
+	new_num(state, val) {
+		state.data_num = val;
+	},
+	new_navState(state, val) {
+		state.navState = val;
+	},
+	new_session_message(state, val) {
+		state.session_message = val;
+	},
+	new_stateValue(state, val) {
+		state.stateValue = val;
+	},
+	new_is_init(state, val) {
+		state.is_init = val;
+	},
+	new_drawer(state, val) {
+		state.new_drawer = val;
+	},
 }
 
 /**
  * 这里面的方法是用来异步触发mutations里面的方法
  */
 const actions = {
-  SET_USER(context, val) {
-    context.commit('new_user_info', val);
-  },
-  SET_SESSION(context, val){
-    context.commit('new_session', val);
-  },
-  SET_OFFLINE(context, val){
-    context.commit('new_offline', val);
-  },
-  SET_TYPE(context, val){
-    context.commit('new_type', val);
-  },
-  SET_NUM(context, val){
-    context.commit('new_num', val);
-  },
-  SET_NAVSTATE(context, val){
-    context.commit('new_navState', val);
-  },
-  SET_SESSION_MESSAGE(context, val){
-    context.commit('new_session_message',val);
-  },
-  SET_STATEVALUE(context, val){
-    context.commit('new_stateValue',val);
-  },
-  SET_IS_INIT(context, val){
-    context.commit('new_is_init',val);
-  }
+	SET_USER(context, val) {
+		context.commit('new_user_info', val);
+	},
+	SET_SESSION(context, val) {
+		context.commit('new_session', val);
+	},
+	SET_OFFLINE(context, val) {
+		context.commit('new_offline', val);
+	},
+	SET_TYPE(context, val) {
+		context.commit('new_type', val);
+	},
+	SET_NUM(context, val) {
+		context.commit('new_num', val);
+	},
+	SET_NAVSTATE(context, val) {
+		context.commit('new_navState', val);
+	},
+	SET_SESSION_MESSAGE(context, val) {
+		context.commit('new_session_message', val);
+	},
+	SET_STATEVALUE(context, val) {
+		context.commit('new_stateValue', val);
+	},
+	SET_IS_INIT(context, val) {
+		context.commit('new_is_init', val);
+	},
+	SET_DRAWER(context, val) {
+		context.commit('new_drawer', val);
+	}
 }
 const store = new Vuex.Store({
-  state,
-  getters,
-  mutations,
-  actions
+	state,
+	getters,
+	mutations,
+	actions
 });
 export default store;

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio