更新代码

src/App.vue

@@ -41,6 +41,10 @@ export default {
           path: '/userInfo'
         },
         {
+          label: '角色信息',
+          path: '/roleInfo'
+        },
+        {
           label: '快捷回复',
           path: '/quickReply'
         },
@@ -48,6 +52,15 @@ export default {
           label: '礼包记录',
           path: '/giftRecord'
         },
+        {
+          label: '订单记录',
+          path: '/orderList'
+        },
+        {
+          label: '违规记录',
+          path: '/violationRecord'
+        },
+       
         // {
         //   label: '申请记录',
         //   path: '/applyRecord'

src/assets/icon/sanjiaoxing.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="50px" height="54px" viewBox="0 0 50 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>三角形</title>
+    <desc>Created with Sketch.</desc>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="订单信息" transform="translate(-1762.000000, -133.000000)" fill="#FFE59A">
+            <g id="编组-4" transform="translate(1378.000000, 133.000000)">
+                <polygon id="三角形" transform="translate(409.151650, 26.961791) scale(-1, -1) translate(-409.151650, -26.961791) " points="384.3033 -9.09494702e-13 434 53.9235818 404.735562 53.9235818 384.3033 31.9235818"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/inputTags/alias.vue

+/<template>
+    <div>
+      <div class="content">
+        <div style="margin-bottom:10px;">每行一个别名，多个按回车后添加</div>
+        <div>
+          <el-input
+            v-model="textarea"
+            type="textarea"
+            :autosize="{ minRows: 5, maxRows: 14}"
+            placeholder="请输入内容"
+          >
+          </el-input>
+        </div>
+      </div>
+      <div class="dialog-footer rowFlex">
+        <div class="btns">
+          <el-button
+            class="btn"
+            @click="close"
+          >取 消</el-button>
+          <el-button
+            :loading="loading"
+            class="btn"
+            type="primary"
+            @click="onSubmit"
+          > 确定</el-button>
+        </div>
+      </div>
+    </div>
+  
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      rowInfo: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data() {
+      return {
+        loading: false,
+        textarea: ''
+      }
+    },
+    mounted() {
+      this.rowInfo.forEach((item, index) => {
+        this.textarea += item + '\n'
+      })
+    },
+    methods: {
+      close() {
+        this.$emit('cancel')
+      },
+      onSubmit() {
+        let aliasList = this.textarea.split('\n')
+        aliasList = aliasList.filter((item) => {
+          return item
+        })
+        console.log(aliasList, '>>>>>>>>>>>>aliasList')
+        this.$emit('ok', aliasList)
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .content {
+    padding: 20px;
+  }
+  </style>
\ No newline at end of file

src/components/inputTags/index.vue

+<template>
+    <div>
+      <el-form-item
+        class="inputItem"
+        :prop="ruleProp"
+      >
+        <template slot="label">
+          {{ labelText }}
+        </template>
+        <div class="alias">
+          <div
+            class="alias_list"
+            :class="disabled?'alias_list_disabled':''"
+          >
+            <span
+              v-for="(item, index) in inputSelectList"
+              :key="index"
+              class="el-tag el-tag--info el-tag--mini el-tag--light alias_item"
+            >
+              <span class="alias_item_text">{{ item }}</span>
+              <i
+                v-if="!disabled"
+                class="el-tag__close el-icon-close my_close"
+                @click="ondelalias(index)"
+              ></i>
+            </span>
+            <input
+              v-model="aliasValue"
+              type="text"
+              class="alias_input"
+              :disabled="disabled"
+              :placeholder="disabled && inputSelectList.length>0?'':placeholder"
+              @keydown="onInputKey"
+              @blur="emitInputChange"
+            >
+          </div>
+          <!-- <div class="alias_add">
+            <el-button
+              type="text"
+              size="medium"
+              @click="editalias()"
+            >编辑</el-button>
+          </div> -->
+        </div>
+      </el-form-item>
+      <!-- <BiDrawer
+        v-model="alias.show"
+        :drawer-title="alias.title"
+        :row-info="alias.row"
+        :component="Alias"
+        :append-to-body="true"
+        drawer-size="600px"
+        @ok="aliasSubmit"
+      ></BiDrawer> -->
+    </div>
+  </template>
+  
+  <script>
+  import Alias from './alias.vue'
+  export default {
+    props: {
+      inputSelectList: {
+        type: Array,
+        default: () => []
+      },
+      labelText: {
+        type: String,
+        default: ''
+      },
+      ruleProp: {
+        type: String,
+        default: ''
+      },
+      placeholder: {
+        type: String,
+        default: ''
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        Alias: Alias,
+        aliasValue: '',
+        alias: {
+          show: false,
+          title: '编辑',
+          row: {}
+        }
+  
+      }
+    },
+    methods: {
+      aliasSubmit(aliasList) {
+        this.$emit('update:inputSelectList', aliasList)
+      },
+  
+      onInputKey(e) {
+        if (e.key == 'Enter') {
+          if (!this.aliasValue) {
+            return
+          }
+          this.inputSelectList.push(this.aliasValue)
+          this.aliasValue = ''
+        }
+      },
+      emitInputChange() {
+        this.$emit('inputChange', this.inputSelectList)
+      },
+      ondelalias(index) {
+        this.inputSelectList.splice(index, 1)
+        this.emitInputChange()
+      },
+      editalias() {
+        this.alias = {
+          show: true,
+          row: this.inputSelectList,
+          title: '编辑'
+        }
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .alias {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    .alias_list {
+      min-height: 32px;
+      width: 100%;
+      border: 1px solid #dcdfe6;
+      border-radius: 4px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      border: 1px solid #dcdfe6;
+      border-radius: 4px;
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      align-items: center;
+      position: relative;
+      // padding: 0 5px;
+      .alias_item {
+        margin-left: 5px;
+        max-width: none !important;
+        display: flex;
+        align-items: center;
+        .alias_item_text {
+          display: inline-block;
+          max-width: 350px;
+          white-space: nowrap; /* 禁止自动换行 */
+          overflow: hidden; /* 隐藏溢出的内容 */
+          text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
+          word-break: break-all;
+        }
+  
+        /* 允许在任意字符间断开（可选，如果你想在任意字数换行） */
+      }
+    }
+    .alias_list_disabled {
+      background: #f5f7fa;
+    }
+    .alias_input {
+      border-style: none;
+      outline: none;
+      flex: 1;
+      height: 30px;
+      padding-left: 15px;
+      font-size: 13px;
+      border-color: #e4e7ed;
+    }
+    .alias_input:disabled {
+      // width: 100%;
+      // position: absolute;
+      // height: 100%;
+      // cursor: not-allowed;
+      background: #f5f7fa;
+      border-color: #e4e7ed;
+      color: #c0c4cc;
+      font-size: 13px;
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+  }
+  </style>
+  
\ No newline at end of file

src/components/select.vue

+<template>
+    <div class="search-item">
+      <div v-if="label && label.length<6 || labelSplit " class="item-label">{{ label }}</div>
+      <div v-else-if="label && label.length>=6 " class="item-label">
+        {{ label.slice(0,4) }} <br> {{ label.slice(4,label.length) }}
+      </div>
+      <div v-else class="item-label">{{ label }}</div>
+      <div class="item-content selectUser">
+        <el-select
+          v-model="resulte"
+          :multiple="multiple"
+          :placeholder="placeholder"
+          :clearable="!clearable?true:false"
+          :filterable="filterable"
+          :disabled="disabled"
+          :collapse-tags="noTags=== false?false:true"
+          @change="selectChange"
+        >
+          <el-option
+            v-for="(item,index) in selectList"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+          >
+            <span style="float: left">{{ item.label }}</span>
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'Selece',
+    props: ['list', 'placeholder', 'label', 'width', 'isResize', 'defaultValue', 'noAll', 'multiple', 'close', 'filterable', 'clearable', 'noTags', 'disabled', 'labelSplit'],
+    data() {
+      return {
+        loading: false,
+        resulte: '',
+        selectList: []
+      }
+    },
+    watch: {
+      // 监听是否重置
+      isResize(newVal, oldVal) {
+        if (newVal) {
+          this.resulte = ''
+        }
+      },
+      defaultValue(newVal, oldVal) {
+        if ((newVal || newVal == 0)) {
+          this.resulte = newVal
+        }
+      },
+      list(newVal, oldVal) {
+        if (newVal && newVal.length > 0) {
+          const list = [{ label: '全部', value: '' }]
+          this.noAll ? this.selectList = newVal : this.selectList = list.concat(newVal)
+        } else {
+          this.selectList = []
+          this.resulte = ''
+        }
+      }
+    },
+    mounted() {
+      (this.defaultValue || this.defaultValue == 0) ? this.resulte = this.defaultValue : ''
+      if (this.list && this.list.length > 0) {
+        const list = [{ label: '全部', value: '' }]
+        this.noAll ? this.selectList = this.list : this.selectList = list.concat(this.list)
+      } else {
+        this.selectList = []
+      }
+    },
+    methods: {
+      selectChange(value) {
+        this.$emit('result', this.resulte)
+      }
+  
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  </style>
\ No newline at end of file

src/directive/clickagain/clickagain.js

+
+const clickagain = {
+  inserted: function (el, binding) {
+    let timer
+    el.addEventListener('click', () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+      timer = setTimeout(() => {
+        binding.value()
+      }, 1000)
+    })
+  }
+}
+
+export default clickagain
\ No newline at end of file

src/directive/clickagain/index.js

+import clickagain from './clickagain'
+
+const install = function(Vue) {
+  Vue.directive('clickagain', clickagain)
+}
+
+if (window.Vue) {
+  window.clickagain = clickagain
+  Vue.use(install); // eslint-disable-line
+}
+
+clickagain.install = install
+export default clickagain

src/directive/debounce/debounce.js

+
+const debounce = {
+  inserted: function (el, binding) {
+    let timer
+    el.addEventListener('scroll', () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+      timer = setTimeout(() => {
+        binding.value()
+      }, 1000)
+    })
+  }
+}
+
+export default debounce
\ No newline at end of file

src/directive/debounce/index.js

+import debounce from './debounce'
+
+const install = function(Vue) {
+  Vue.directive('debounce', debounce)
+}
+
+if (window.Vue) {
+  window.debounce = debounce
+  Vue.use(install); // eslint-disable-line
+}
+
+debounce.install = install
+export default debounce

src/directive/loading/index.js

+import loading from './loading'
+
+const install = function(Vue) {
+  Vue.directive('loadingchat', loading)
+}
+
+if (window.Vue) {
+  window.loading = loading
+  Vue.use(install); // eslint-disable-line
+}
+
+loading.install = install
+export default loading

src/directive/loading/loading.js

+import Vue from 'vue'
+import loading from '@/components/common/loading'
+const loadDirective = {
+  inserted: function (el, binding) {
+    const loadingCo = Vue.extend(loading)
+    // console.log('loadingCo', loadingCo)
+    const loadingComp = new loadingCo().$mount()
+    // console.log('loadingComp', loadingComp)
+    // 组件实例 挂到el元素上
+    el.loadingInstance = loadingComp
+    if (binding.value) {
+      el.appendChild(loadingComp.$el)
+    }
+  },
+  // 所在组件的 VNode 更新时调用
+  update(el, binding) {
+    // 当值改变
+    if (binding.value !== binding.oldValue) {
+      if (binding.value) { // v-loading true
+        el.appendChild(el.loadingInstance.$el)
+      } else { // v-loading false 删除节点
+        el.removeChild(el.loadingInstance.$el)
+      }
+    }
+  }
+}
+
+export default loadDirective
\ No newline at end of file

src/directive/loadmore/index.js

+import loadMore from './loadmore'
+
+const install = function(Vue) {
+  Vue.directive('loadmore', loadMore)
+}
+
+if (window.Vue) {
+  window.loadMore = loadMore
+  Vue.use(install); // eslint-disable-line
+}
+
+loadMore.install = install
+export default loadMore

src/directive/loadmore/loadmore.js

+const loadmore = {
+  inserted: function (el, binding) {
+    // 获取element-ui定义好的scroll盒子
+    const SELECTWRAP_DOM = el.querySelector(
+      '.el-select-dropdown .el-select-dropdown__wrap'
+    )
+    SELECTWRAP_DOM.addEventListener('scroll', function() {
+      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
+      if (CONDITION) {
+        binding.value()
+      }
+    })
+  }
+}
+
+export default loadmore
\ No newline at end of file

src/directive/permission/index.js

+import permission from './permission'
+
+const install = function(Vue) {
+  Vue.directive('permission', permission)
+}
+
+if (window.Vue) {
+  window['permission'] = permission
+  Vue.use(install) // eslint-disable-line
+}
+permission.install = install
+export default permission

src/directive/permission/permission.js

+import store from '@/store'
+function checkPermission(el, binding) {
+  let { arg } = binding
+  // 小说和游戏的权限控制
+  // store.state.user.systemRouter === 'game' ? arg = 'game-' + arg : ''
+  if (store.state.user.systemRouter === 'game') {
+    arg = 'game-' + arg
+  } else if (store.state.user.systemRouter === 'playlet') {
+    arg = 'playlet-' + arg
+  } else {
+
+  }
+  const roles = store.getters && store.getters.buttonInfo
+  const hasPermission = Object.prototype.hasOwnProperty.call(roles, arg) ? roles[arg] : false
+  if (!hasPermission) {
+    el.parentNode && el.parentNode.removeChild(el)
+  }
+}
+
+export default {
+  inserted(el, binding) {
+    try {
+      checkPermission(el, binding)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  update(el, binding) {
+    try {
+      checkPermission(el, binding)
+    } catch (error) {
+      console.log(error)
+    }
+  }
+}

src/directive/tableSticky/README.md

+# 使ElementUI的el-table表头自动吸顶，支持左右固定列。
+
+## 引入
+```js
+    import {tableSticky} from 'lp-vue'
+    Vue.directive('tableSticky', tableSticky)
+```
+
+
+## 注意
+ 主要使用 CSS 属性 position: sticky 实现。
+由于使用的是 sticky，所以要保证祖先元素不能设置 overflow:hidden 这类的样式，否则不生效。
+使用
+在 快速上手 中全局引用可以直接使用。
+
+也可以按需使用：
+
+```js
+import {tableSticky} from '.lp-vue'
+Vue.directive('tableSticky', tableSticky)
+```
+
+
+# 配置
+## 基础使用
+如果只是普通表格，不涉及固定列，直接使用即可。
+
+
+```html
+<el-table v-tableSticky>
+  <!-- 表格内容 -->
+</el-table>
+```
+设置距离
+
+```html
+    <el-table v-tableSticky="10">
+    <!-- 表格内容 -->
+    </el-table>
+
+    <el-table v-tableSticky="'.header'">
+    <!-- 表格内容 -->
+    </el-table>
+```
+
+
+|类型|说明|	默认值|
+｜---｜---｜---｜
+|number	|表头距顶部距离	10|
+|string	|选择器，自动获取距目标元素高度位置|
+
+## 设置固定列
+当表格有固定列时，需要设置 fixed 修饰符。
+
+```html
+<el-table v-tableSticky.fixed="10">
+  <!-- 表格内容 -->
+</el-table>
+```
+
+## 监听目标元素高度
+在使用目标元素来决定吸顶高度时，随着页面的变化可能目标元素的高度会变高，那就有必要使用dom修饰符，如果高度固定就不需要监听；或者目标元素的宽小于等于表格的宽度，这样页面变化会触发表格的监听同样不需要这个监听。所以这个修饰符不是必要的。可以根据实际情况使用，如果发现表头吸顶位置不对，可以使用这个修饰符。
+<el-table v-tableSticky.dom="'.header'">
+  <!-- 表格内容 -->
+</el-table>
\ No newline at end of file

src/directive/tableSticky/index.js

+// 表格吸顶
+import tableSticky from './tableSticky'
+
+const install = function(Vue) {
+  Vue.directive('tableSticky', tableSticky)
+}
+
+if (window.Vue) {
+  window.tableSticky = tableSticky
+  Vue.use(install); // eslint-disable-line
+}
+
+tableSticky.install = install
+export default tableSticky

src/directive/tableSticky/tableSticky.js

+'use strict'
+
+exports.__esModule = true
+
+function debounce(func, wait, immediate) {
+  var timeout = void 0
+  var args = void 0
+  var context = void 0
+  var timestamp = void 0
+  var result = void 0
+
+  var later = function later() {
+    // 据上一次触发时间间隔
+    var last = +new Date() - timestamp
+
+    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+    if (last < wait && last > 0) {
+      timeout = setTimeout(later, wait - last)
+    } else {
+      timeout = null
+      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+      if (!immediate) {
+        result = func.apply(context, args)
+        if (!timeout) context = args = null
+      }
+    }
+  }
+
+  return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key]
+    }
+
+    context = this
+    timestamp = +new Date()
+    var callNow = immediate && !timeout
+    // 如果延时不存在，重新设定延时
+    if (!timeout) timeout = setTimeout(later, wait)
+    if (callNow) {
+      result = func.apply(context, args)
+      context = args = null
+    }
+
+    return result
+  }
+}
+
+// 头部吸顶
+var stickyThead = function stickyThead(el, binging, vnode) {
+  var top = '0px'
+  if (!isNaN(Number(binging.value))) {
+    top = binging.value + 'px'
+  }
+  if (typeof binging.value === 'string' && document.querySelector(binging.value)) {
+    var rect = document.querySelector(binging.value).getBoundingClientRect()
+    top = rect ? rect.top + rect.height + 'px' : '0px'
+  }
+
+  el.style.overflow = 'visible'
+  var tHeader = el.querySelector('.el-table__header-wrapper')
+  tHeader.style.position = 'sticky'
+  tHeader.style.top = top
+  tHeader.style.zIndex = 20
+
+  // 移除is-hidden
+  var ths = tHeader.querySelectorAll('th.is-hidden')
+  ths.forEach(function (item) {
+    item.classList.remove('is-hidden')
+  })
+
+  // 找到实例
+  var table = vnode.context.$children.find(function (item) {
+    return item.$el === el
+  })
+  table.doLayout()
+  // 找到左边固定列
+  var leftFixed = table.fixedColumns
+  if (leftFixed && leftFixed.length) {
+    var leftFixedWidth = 0
+    leftFixed.forEach(function (item) {
+      var cell = tHeader.querySelector('th.' + item.id)
+      if (cell) {
+        var itemW = cell.getBoundingClientRect().width
+        cell.style.position = 'sticky'
+        cell.style.left = leftFixedWidth + 'px'
+        cell.style.top = top
+        cell.style.zIndex = 10
+        leftFixedWidth += itemW
+      }
+    })
+  }
+
+  // 找到右边固定列
+  var rightFixed = table.rightFixedColumns
+  if (rightFixed && rightFixed.length) {
+    var rightFixedWidth = 0
+    for (var i = rightFixed.length - 1; i >= 0; i--) {
+      var cell = tHeader.querySelector('th.' + rightFixed[i].id)
+      if (cell) {
+        var itemW = cell.getBoundingClientRect().width
+        cell.style.position = 'sticky'
+        cell.style.right = rightFixedWidth + 'px'
+        cell.style.top = top
+        cell.style.zIndex = 10
+        rightFixedWidth += itemW
+      }
+    }
+  }
+}
+
+// 简易吸顶
+var sticky = function sticky(el, binging, vnode) {
+  var top = '0px'
+  if (!isNaN(Number(binging.value))) {
+    top = binging.value + 'px'
+  }
+  if (typeof binging.value === 'string' && document.querySelector(binging.value)) {
+    var rect = document.querySelector(binging.value).getBoundingClientRect()
+    top = rect ? rect.top + rect.height + 'px' : '0px'
+  }
+
+  el.style.overflow = 'visible'
+  var tHeader = el.querySelector('.el-table__header-wrapper')
+  tHeader.style.position = 'sticky'
+  tHeader.style.top = top
+  tHeader.style.zIndex = 20
+}
+
+var tableOb = null
+var domOb = null
+exports.default = {
+  inserted: function inserted(el, binging, vnode) {
+    if (binging.modifiers.fixed) {
+      // 监听表格变化
+      tableOb = new ResizeObserver(debounce(function () {
+        stickyThead(el, binging, vnode)
+      }, 500))
+      tableOb.observe(el)
+    } else {
+      sticky(el, binging, vnode)
+    }
+    if (binging.modifiers.dom) {
+      // 监听目标dom变化
+      if (typeof binging.value === 'string') {
+        var isDom = document.querySelector(binging.value)
+        if (isDom) {
+          domOb = new ResizeObserver(debounce(function () {
+            stickyThead(el, binging, vnode)
+          }, 500))
+          domOb.observe(isDom)
+        }
+      }
+    }
+  },
+  unbind: function unbind(el, binging, vnode) {
+    tableOb && tableOb.unobserve(el)
+    domOb && domOb.unobserve(el)
+  }
+}
\ No newline at end of file

src/main.js

@@ -22,7 +22,10 @@ import 'element-ui/lib/theme-chalk/index.css';
 import errorHandle from '@/utils/errorHandle'
 import { getParams } from '@/utils/index'
 import globalComponent from '@/components/register.js'
-Vue.use(globalComponent)
+import loadmore from '@/directive/loadmore/index.js' // 加载更多
+import clickagain from './directive/clickagain'
+import permission from '@/directive/permission/index.js' // 权限判断指令
+Vue.use(globalComponent).use(permission).use(clickagain).use(loadmore)
 if(isTest()){
   new VConsole();
 }

src/router/index.js

@@ -6,6 +6,9 @@ import giftRecord from '../views/giftRecord.vue'
 import applyRecord from '../views/applyRecord.vue'
 import quickSend from '../views/quickSend.vue'
 import addressBook from '../views/addressBook.vue'
+import orderList from '../views/orderList.vue'
+import roleInfo from '../views/roleInfo.vue'
+import violationRecord from '../views/ViolationRecord.vue'
 import Cookies from 'js-cookie'
 import store from '@/store'
 Vue.use(VueRouter)
@@ -25,6 +28,16 @@ const routes = [
     component: userInfo
   },
   {
+    path: '/roleInfo',
+    name: 'roleInfo',
+    component: roleInfo
+  },
+  {
+    path: '/violationRecord',
+    name: 'violationRecord',
+    component: violationRecord
+  },
+  {
     path: '/quickReply',
     name: 'quickReply',
     component: quickReply
@@ -50,6 +63,11 @@ const routes = [
     component: addressBook
   },
   {
+    path: '/orderList',
+    name: 'orderList',
+    component: orderList
+  },
+  {
     path: '/login',
     name: 'login',
     component: () => import('../views/login.vue')

src/views/userInfo/components/ViolationRecord.vue → src/views/ViolationRecord.vue

@@ -248,7 +248,6 @@ export default {
   width:100%;
   height: calc(100vh - 170px);
   background: #fff;
-  margin-left: 2px;
   .content {
     width: 100%;
     padding: vw(20);

src/views/components/order/orderRefund.vue

+<template>
+    <el-drawer :lock-scroll="true" :title="title" :visible="show" :size="width" :append-to-body="true" @close="close">
+      <div class="errorHandleContent">
+        <el-form
+          ref="ruleForm"
+          :model="ruleForm"
+          :rules="rules"
+          label-position="top"
+          label-width="100px"
+          class="demo-ruleForm"
+        >
+          <el-form-item label="订单号" prop="orders.order_id" style="margin-left:4px;width:100%;">
+            <template slot="label">
+              <span class="labelTitle">订单号 <label class="subtitle">订单支持添加多个，支持复制订单号粘贴至输入框内</label></span>
+            </template>
+            <el-input v-model="ruleForm.orders.order_id" disabled placeholder="请输入订单号"></el-input>
+          </el-form-item>
+          <el-form-item label="退款原因" prop="reason">
+            <el-select
+              v-model="ruleForm.reason"
+              disabled
+              clearable
+              placeholder="请选择"
+              style="width:100%;margin-bottom:10px;"
+            >
+              <el-option v-for="item in reasonList" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="玩家反馈时间" prop="feedback_time">
+            <el-date-picker
+              v-model="ruleForm.feedback_time"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              style="width:100%;"
+              placeholder="请选择玩家反馈时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+  
+          <el-form-item label="备注" prop="remark">
+            <textEditor
+              v-if="show"
+              :remark.sync="ruleForm.remark"
+              domid="orderRefund"
+              style="width: 100%"
+              :contenteditable="true"
+              @resultReamrk="resultReamrk"
+            />
+          </el-form-item>
+        </el-form>
+        <span class="dialog-footer rowFlex">
+          <el-button class="btn" type="primary" :loading="searchLoading" @click="submit">确 定</el-button>
+          <el-button class="btn" @click="close">取 消</el-button>
+        </span>
+      </div>
+  
+    </el-drawer>
+  </template>
+  <script type="text/javascript">
+  import { refundRequest } from '@/api/game'
+  import textEditor from '@/components/textEditor.vue'
+  export default {
+    components: { textEditor },
+    props: ['show', 'width', 'title', 'info'],
+    data() {
+      return {
+        searchLoading: false,
+        reasonList: [
+          { label: '充值未到账', value: 1 } // 掌微只有一个原因
+        ],
+        ruleForm: {
+          reason: 1,
+          feedback_time: '',
+          orders: {
+            order_id: '',
+            refund_amount: ''
+          },
+          remark: '',
+          extra_attribution: [],
+          user_name: '',
+          user_id: ''
+        },
+        rules: {
+          'orders.order_id': [
+            { required: true, message: '请输入订单号', trigger: 'blur' }
+          ],
+          reason: [
+            { required: true, message: '请选择退款原因', trigger: 'change' }
+          ],
+          feedback_time: [
+            { required: true, message: '请选择玩家反馈时间', trigger: 'change' }
+          ],
+          remark: [
+            { required: true, message: '请输入备注', trigger: 'blur' }
+          ]
+        }
+      }
+    },
+    watch: {
+      show(newVal, oldVal) {
+        if (newVal) {
+          this.searchLoading = false
+          this.ruleForm = {
+            reason: 1,
+            feedback_time: '',
+            orders: {
+              order_id: '',
+              refund_amount: ''
+            },
+            remark: '',
+            extra_attribution: [],
+            user_name: '',
+            user_id: ''
+          }
+          this.ruleForm.remark = ''
+          this.ruleForm.orders.order_id = this.info.order_id
+          this.ruleForm.remark = this.info.remark || ''
+          this.ruleForm.feedback_time = this.$moment().format('YYYY-MM-DD')
+        }
+      }
+    },
+    mounted() {
+  
+    },
+    methods: {
+      resultReamrk(html) {
+        console.log(html)
+      },
+      // 更新代码
+      resultUpload(value) {
+        this.ruleForm.extra_attribution = value
+      },
+      close() {
+        this.$emit('update:show', false)
+      },
+      async submit() {
+        this.$refs.ruleForm.validate(async (valid) => {
+          if (valid) {
+            this.ruleForm.orders.refund_amount = this.info.amount
+            this.searchLoading = true
+            const { reason, feedback_time, orders, remark, extra_attribution } = this.ruleForm
+            const { username, id } = this.info
+            const data = {
+              reason,
+              feedback_time,
+              orders: [orders],
+              remark,
+              extra_attribution,
+              user_name: username,
+              user_id: id
+            }
+            try {
+              const res = await refundRequest(data)
+              if (res.status_code === 1) {
+                this.$message.success(res.msg)
+              }
+              this.searchLoading = false
+              this.close()
+            } catch (error) {
+              this.searchLoading = false
+            }
+          } else {
+            return false
+          }
+        })
+      }
+    }
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  ::v-deep .el-drawer {
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  
+  .labelTitle {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+  
+    .subtitle {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 12px;
+      color: #999999;
+      line-height: 17px;
+    }
+  }
+  
+  .dialog-footer {
+    width: calc(100%);
+    height: auto;
+    position: relative;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    justify-content: flex-end;
+    background: #fff;
+  
+    .btn {
+      width: 84px;
+      height: 32px;
+    }
+  }
+  
+  .errorHandleContent {
+    padding: 0 20px;
+    .icon {
+      font-size: 24px;
+      color: #00bf8a;
+      cursor: pointer;
+    }
+  
+    .numberItem {
+      margin-bottom: 20px;
+    }
+  }
+  </style>
+  
\ No newline at end of file

src/views/components/order/searchUser.vue

+<template>
+
+    <el-select
+      v-model="resulte"
+      v-loadmore="loadMoreList"
+      filterable
+      remote
+      :disabled="disabled"
+      :remote-method="remoteMethod"
+      :placeholder="placeholder"
+      :clearable='false'
+      reserve-keyword
+      :loading="loading"
+      @change="selectChange"
+    >
+      <el-option
+        v-for="(item,index) in searchUserOption"
+        :key="index"
+        :value="item.role_id || item.id"
+        :label="item.role_name"
+        style="height:50px;"
+      >
+        <div class="rowFlex columnCenter selectItem">
+          <!-- 没有头像 -->
+          <!-- <el-image v-if="item.avata" fit="fill" :src="item.avatar" class="tableImage "></el-image> -->
+          <div class="infoSpan columnFlex rowCenter">
+            <p class="hidden">{{ item.role_name &&item.role_name!=''?item.game_name+' - '+item.server_name+' - '+item.role_name:'' }}</p>
+            <p class="rowFlex columnCenter">角色名：<label class="hidden" style="max-width:120px;">{{ item.role_name }}</label></p>
+          </div>
+        </div>
+      </el-option>
+    </el-select>
+  </template>
+  <script>
+  import { roleList } from '@/api/game'
+  import { mapState } from 'vuex'
+  export default {
+    // uid 默认选择的uid
+    props: ['placeholder', 'selectWord', 'value', 'width', 'defaultValue', 'disabled', 'accountChange'],
+    data() {
+      return {
+        loading: false,
+        noMore: false,
+        searchUserOption: [],
+        pageInfo: {
+          page: 1,
+          page_size: 20,
+          total: 0
+        },
+        resulte: ''
+      }
+    },
+    watch: {
+      // 监听是否重置
+      isResize(newVal, oldVal) {
+        if (newVal) {
+          this.resulte = ''
+        }
+      },
+      defaultValue(newVal, oldVal) {
+        if (newVal) {
+          this.resulte = newVal
+        }
+      },
+      accountChange(newVal, oldVal) {
+        if (newVal) {
+          this.$nextTick(() => {
+            this.requestAccountList()
+          })
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.resulte = Number(this.defaultValue) || ''
+        this.requestAccountList()
+      })
+    },
+    computed: {
+      ...mapState('game', ['accountSelect'])
+    },
+    methods: {
+      loadMoreList() {
+        if (!this.noMore) {
+          this.pageInfo.page++
+          this.requestAccountList()
+        } else {
+          console.log('没有更新数据了')
+        }
+      },
+      selectChange(value) {
+        const valueItem = this.searchUserOption.find(item => item.role_id == value || item.id == value)
+        console.log(valueItem, value)
+        this.$emit('result', value, valueItem)
+      },
+      requestAccountList() {
+        roleList({ role_name: this.resulte, member_id: this.accountSelect, ...this.pageInfo }).then((res) => {
+          this.loading = false
+          this.searchUserOption = this.searchUserOption.concat(res.data.data)
+          if (res.data && res.data.data && res.data.data.length < 20) {
+            this.noMore = true
+          }
+        })
+      },
+      // 删选过滤
+      remoteMethod(query) {
+        if (!query || !this.resulte) {
+          query = ''
+          this.resulte = ''
+        }
+        this.searchUserOption = []
+        this.pageInfo.page = 1
+        this.loading = true
+        this.noMore = false
+        this.requestAccountList()
+      }
+    }
+  }
+  </script>
+  
+    <style lang="scss" scoped>
+      .selectItem{
+        height: 50px;
+      }
+      .infoSpan{
+          font-size: 12px;
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          max-width: 250px;
+          height: 50px;
+          p{
+            font-size:12px;max-width:100%;
+            line-height: 20px;
+          }
+          span{
+            color:#FFA81D;
+          }
+      }
+      .tableImage{
+        width:30px;height:30px;
+        border-radius: 30px;
+        margin-right: 10px;
+      }
+    </style>
+  
\ No newline at end of file

src/views/userInfo/components/roleInfo/approval.vue → src/views/components/roleInfo/approval.vue

@@ -237,7 +237,7 @@
   import { searchcondition, appealList, appealCancel, appealProcess } from '@/api/game'
   import { mapState, mapMutations } from 'vuex'
   import { removeDp, formatNumber } from '@/utils/index'
-  import resubmitApproval from './appeal.vue'
+  import resubmitApproval from './layer/appeal.vue'
   // 导入审批状态图标
   import shenpi1 from '@/assets/icon/shenpi1.svg'
   import shenpi2 from '@/assets/icon/shenpi2.svg'
@@ -301,7 +301,7 @@ import { debounce } from '@/utils'
       }
     },
     mounted() {
-      this.reportForm.create_time_start = this.$moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss')
+      this.reportForm.create_time_start = this.$moment().subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss')
       this.reportForm.create_time_end = this.$moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
       this.requstApprovalList()
       this.request_register_type()
@@ -317,7 +317,7 @@ import { debounce } from '@/utils'
           role_name: '',
           register_type: 1,
           approval_status: '',
-          create_time_start: this.$moment().subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss') ,
+          create_time_start: this.$moment().subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss') ,
           create_time_end: this.$moment().endOf('day').format('YYYY-MM-DD HH:mm:ss')
         }
       },

src/views/userInfo/components/roleInfo/report.vue → src/views/components/roleInfo/report.vue

@@ -18,7 +18,6 @@
           </el-input>
         </el-form-item>
         <el-form-item label="审批状态">
-         
           <el-select
             v-model="reportForm.approval_status"
             style="width:95%;"
@@ -273,8 +272,8 @@
   import { searchcondition, reportIndex, reportCancel, reportProcess } from '@/api/game'
   import { mapState, mapMutations } from 'vuex'
   import { removeDp, formatNumber } from '@/utils/index'
-  import resubmitReport from '../layer/report.vue'
-  import approvalTask from '../layer/approvalTask.vue'
+  import resubmitReport from './layer/report.vue'
+  import approvalTask from './layer/approvalTask.vue'
   // 导入审批状态图标
   import shenpi1 from '@/assets/icon/shenpi1.svg'
   import shenpi2 from '@/assets/icon/shenpi2.svg'

src/views/userInfo/components/roleInfo/userInfo.vue → src/views/components/roleInfo/roleInfo.vue

@@ -119,7 +119,7 @@
   import { mapState, mapMutations, mapActions } from 'vuex'
   import { getRoleHoLo } from '@/api/game'
   import noContent from '@/components/noContent.vue'
-  import appeal from './appeal.vue'
+  import appeal from './layer/appeal.vue'
   import watchMember from '@/mixins/watchMember'
   export default {
     components: {

src/views/components/skill/skillCompany.vue

@@ -311,7 +311,6 @@ export default {
   width: vw(444);
   height: 100%;
   background: #fff;
-  margin-left: 2px;
   .detailsTitle {
     width: 100%;
     padding: 0 vw(20);

src/views/components/skill/skillPersonal.vue

@@ -305,7 +305,6 @@ export default {
   width: vw(444);
   height: 100%;
   background: #fff;
-  margin-left: 2px;
   .detailsTitle {
     width: 100%;
     padding: 0 vw(20);

src/views/userInfo/components/RoleInfo.vue → src/views/roleInfo.vue

 <template>
   <div class="roleTab">
-   
-
-    <el-radio-group v-model="roleActive" >
-        <el-radio-button border label="role">角色信息</el-radio-button>
-        <el-radio-button border label="approval">申诉记录</el-radio-button>
-      </el-radio-group>
-      <userInfo v-if="roleActive==='role'" />
-      <approval v-else-if="roleActive==='approval'" />
+    <el-tabs v-model="roleActive">
+      <el-tab-pane label="角色信息" name="roleInfo">
+        <roleInfo v-if="roleActive === 'roleInfo'" :chatUserDetails="chatUserInfo" />
+      </el-tab-pane>
+      <el-tab-pane label="举报信息" name="report">
+        <report v-if="roleActive === 'report'" />
+      </el-tab-pane>
+      <el-tab-pane label="违规记录" name="approval">
+        <approval v-if="roleActive === 'approval'" />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
-import userInfo from './roleInfo/userInfo.vue'
-// import report from './roleInfo/report.vue'
-import approval from './roleInfo/approval.vue'
+import roleInfo from './components/roleInfo/roleInfo.vue'
+import report from './components/roleInfo/report.vue'
+import approval from './components/roleInfo/approval.vue'
+import { mapState } from 'vuex'
 export default {
   components: {
-    userInfo,
+    roleInfo,
     approval,
-    // report
+    report
+  },
+  computed: {
+    ...mapState('game', ['chatUserInfo'])
   },
   props: {
     // report_is_send: {
@@ -29,7 +36,7 @@ export default {
   },
   data() {
     return {
-      roleActive: 'role'
+      roleActive: 'roleInfo'
 
     }
   },
@@ -41,10 +48,9 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.roleTab{
+.roleTab {
   width: 100%;
   height: 100%;
   background: #fff;
 }
-
 </style>
\ No newline at end of file

src/views/userInfo/userInfo.vue

@@ -5,27 +5,27 @@
       <el-tab-pane label="客户资料" name="userInfo">
         <Info v-if="activeTab === 'userInfo'" :chatUserDetails="chatUserInfo"/>
       </el-tab-pane>
-      <el-tab-pane label="角色信息" name="roleInfo">
+      <!-- <el-tab-pane label="角色信息" name="roleInfo">
         <RoleInfo v-if="activeTab === 'roleInfo'"/>
-      </el-tab-pane>
-      <el-tab-pane label="违规记录" name="violationRecord">
+      </el-tab-pane> -->
+      <!-- <el-tab-pane label="违规记录" name="violationRecord">
         <ViolationRecord v-if="activeTab === 'violationRecord'"/>
-      </el-tab-pane>
+      </el-tab-pane> -->
      </el-tabs>
   </div>
 </template>
 <script>
 import Info  from './components/Info.vue'
-import RoleInfo  from './components/RoleInfo.vue'
-import ViolationRecord  from './components/ViolationRecord.vue'
+// import RoleInfo  from './components/RoleInfo.vue'
+// import ViolationRecord  from '../ViolationRecord.vue'
 import { mapState,mapMutations } from 'vuex'
 import Cookies from 'js-cookie'
 export default {
   name: 'UserInfo',
   components:{
     Info,
-    RoleInfo,
-    ViolationRecord
+    // RoleInfo,
+    // ViolationRecord
   },
   mounted() {
   },