|
|
@@ -0,0 +1,313 @@
|
|
|
+<template>
|
|
|
+ <div class="seek">
|
|
|
+ <div class="com-mobile-header mobile-center-header">
|
|
|
+ <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
|
|
|
+ <p>员工管理</p>
|
|
|
+ <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="mobile-fix-content mobile-centerfix-content" id="mobile-staff-center">
|
|
|
+ <div class="staff-head">
|
|
|
+ <span class="inline-block" :class="{'active': switchType === 'info'}" @click="setSwitchType('info')">员工信息</span>
|
|
|
+ <span class="inline-block" :class="{'active': switchType === 'Audit'}" @click="setSwitchType('Audit')">审核绑定</span>
|
|
|
+ </div>
|
|
|
+ <div class="staff-record" v-if="switchType == 'info'">
|
|
|
+ <div class="search-content clearfix">
|
|
|
+ <div class="search">
|
|
|
+ <!--<input type="text" placeholder="卖家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">-->
|
|
|
+ <input type="text" placeholder="人员姓名、电话号码、邮箱或UU" class="staff-search">
|
|
|
+ <!--<span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>-->
|
|
|
+ <span><i class="iconfont icon-sousuo"></i></span>
|
|
|
+ </div>
|
|
|
+ <div class="search-filter">
|
|
|
+ <div class="select-wrap">全部角色<i class="iconfont icon-arrow-down"></i></div>
|
|
|
+ <ul class="select-list" v-if="false">
|
|
|
+ <li>全部角色</li>
|
|
|
+ <li>管理员</li>
|
|
|
+ <li>店长</li>
|
|
|
+ <li>普通用户</li>
|
|
|
+ <li>销售员</li>
|
|
|
+ <li>任意测试</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="list-content">
|
|
|
+ <div class="bg" v-for="item in staffData">
|
|
|
+ <div class="staff-list">
|
|
|
+ <div class="list-item"><span>UU账号：</span><span v-text="item.userUU">100000721</span></div>
|
|
|
+ <div class="list-item"><span>姓名：</span><span v-text="item.userName">张洪别</span></div>
|
|
|
+ <div class="list-item"><span>性别：</span><span v-text="item.userSex === 'F' ? '女' : item.userSex === 'M' ? '男' : '-'">男</span></div>
|
|
|
+ <div class="list-item"><span>手机号：</span><span v-text="item.userTel">12345678901</span></div>
|
|
|
+ <div class="list-item"><span>邮箱：</span><span v-text="item.userEmail">12345678901</span></div>
|
|
|
+ <div class="list-item"><span>角色：</span><span class="role" v-for="role in item.roles" v-text="role.desc ? role.desc.slice(0,2) : ''" v-bind:class="'bg' + role.color">普通</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="list-footer">
|
|
|
+ <nuxt-link tag="div" :to="'/mobile/user/staff/edit'" class="edit handle" v-bind:class="{'no-allow': (item.userUU === userInfo.userUU)}"><i class="iconfont icon-edit"></i><span>编辑</span></nuxt-link>
|
|
|
+ <div class="delete handle" v-bind:class="{'no-allow': (item.userUU === userInfo.userUU)}"><i class="iconfont icon-lajitong"></i><span>删除</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <nuxt-link class="staff-add" :to="'/mobile/user/staff/add'"><i class="iconfont icon-add"></i>新增用户</nuxt-link>
|
|
|
+ </div>
|
|
|
+ <div class="staff-record" v-if="switchType == 'Audit'">
|
|
|
+ <div class="search-content">
|
|
|
+ <!--<input type="text" placeholder="卖家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">-->
|
|
|
+ <input type="text" placeholder="人员姓名、电话号码、邮箱或UU" v-model="auditSearch">
|
|
|
+ <!--<span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>-->
|
|
|
+ <span><i class="iconfont icon-sousuo"></i></span>
|
|
|
+ </div>
|
|
|
+ <div class="list-content">
|
|
|
+ <div class="bg">
|
|
|
+ <div class="staff-list">
|
|
|
+ <div class="list-item"><span>用户名：</span><span>张洪别</span></div>
|
|
|
+ <div class="list-item"><span>UU账号：</span><span>100000721</span></div>
|
|
|
+ <div class="list-item"><span>手机号：</span><span>12345678901</span></div>
|
|
|
+ <div class="list-item"><span>邮箱：</span><span>12345678901</span></div>
|
|
|
+ </div>
|
|
|
+ <div class="list-footer">
|
|
|
+ <div class="edit handle"><i class="iconfont icon-close-circle"></i><span>同意</span></div>
|
|
|
+ <div class="delete handle"><i class="iconfont icon-check-circle"></i><span>拒绝</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>{{auditBind}}</div>
|
|
|
+ </div>
|
|
|
+ <!--<seek-list :keyword="remindKeyword" :isSearch="isSearch" :userType="userType" :seekType="seekType" :purchaseManList="purchaseManListData"></seek-list>-->
|
|
|
+ <!--<pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
|
|
|
+ import { BaseFilter } from '~components/mobile/base'
|
|
|
+ export default {
|
|
|
+ layout: 'mobile',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ remindText: '',
|
|
|
+ timeoutCount: '',
|
|
|
+ page: 1,
|
|
|
+ count: 10,
|
|
|
+ auditSearch: '',
|
|
|
+ switchType: 'info',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ RemindBox,
|
|
|
+ PullUp,
|
|
|
+ EmptyStatus
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ // 'buyerAccount': {
|
|
|
+ // handler: function (val) {
|
|
|
+ // if (val && val.content) {
|
|
|
+ // if (this.isChange) {
|
|
|
+ // this.accountList = []
|
|
|
+ // this.isChange = false
|
|
|
+ // }
|
|
|
+ // this.accountList = [...this.accountList, ...val.content]
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ staffData () {
|
|
|
+ return this.$store.state.staff.infoList.info.data.content
|
|
|
+ },
|
|
|
+ auditBind () {
|
|
|
+ console.log(this.$store.state.staff.infoList.audit.data, '123')
|
|
|
+ return this.$store.state.staff.infoList.audit.data.content
|
|
|
+ },
|
|
|
+ userInfo () {
|
|
|
+ return this.$store.state.option.user.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fetch ({ store }) {
|
|
|
+ return Promise.all([
|
|
|
+ store.dispatch('staff/bindAudit', { size: this.count, page: this.page, speaceUU: this.user.userUU, status: 311, keyword: this.auditSearch})
|
|
|
+ ])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ setSwitchType (type) {
|
|
|
+ this.switchType = type
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ $base-color: #3f84f6;
|
|
|
+ #mobile-staff-center {
|
|
|
+ .staff-head {
|
|
|
+ height: .82rem;
|
|
|
+ line-height: .82rem;
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ span {
|
|
|
+ font-size: .29rem;
|
|
|
+ &:first-child {
|
|
|
+ margin-right: 2.6rem;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ color: $base-color;
|
|
|
+ border-bottom: 1px solid $base-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .staff-record {
|
|
|
+ .search-content {
|
|
|
+ padding: .25rem 0;
|
|
|
+ text-align: center;
|
|
|
+ input {
|
|
|
+ width: 6.9rem;
|
|
|
+ border: 1px solid #376ff3;
|
|
|
+ }
|
|
|
+ .staff-search {
|
|
|
+ width: 5.31rem;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .search-filter {
|
|
|
+ float: left;
|
|
|
+ margin-left: .35rem;
|
|
|
+ position: relative;
|
|
|
+ .select-wrap {
|
|
|
+ width: 1.45rem;
|
|
|
+ height: .58rem;
|
|
|
+ line-height: .58rem;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: .06rem;
|
|
|
+ border: solid 1px #b4b4b4;
|
|
|
+ i{
|
|
|
+ font-size: .1rem;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $base-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ul.select-list{
|
|
|
+ width: 1.45rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 0rem;
|
|
|
+ top: .59rem;
|
|
|
+ border: solid 1px #b4b4b4;
|
|
|
+ border-top: none;
|
|
|
+ -webkit-box-shadow: 0 1px 5px 0 #aaa;
|
|
|
+ box-shadow: 0 1px 5px 0 #aaa;
|
|
|
+ border-radius: .04rem;
|
|
|
+ li{
|
|
|
+ background: #fff;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 .13rem;
|
|
|
+ font-size: .28rem;
|
|
|
+ height: .53rem;
|
|
|
+ line-height: .53rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-content{
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 .20rem;
|
|
|
+ div.bg{
|
|
|
+ padding: .32rem .24rem 0 .24rem;
|
|
|
+ width: 7.1rem;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: .05rem;
|
|
|
+ }
|
|
|
+ .staff-list {
|
|
|
+ width: 100%;
|
|
|
+ .list-item {
|
|
|
+ margin-bottom: .24rem;
|
|
|
+ &:last-child{
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: .28rem;
|
|
|
+ &:first-child {
|
|
|
+ width: 1.3rem;
|
|
|
+ text-align: right;
|
|
|
+ color: #3f84f6;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span.role{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 .05rem;
|
|
|
+ height: .25rem;
|
|
|
+ line-height: .25rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: .24rem;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: .04rem;
|
|
|
+ }
|
|
|
+ span.role.bg1{
|
|
|
+ background-color: #89aefa;
|
|
|
+ }
|
|
|
+ span.role.bg2{
|
|
|
+ background-color: #01d9ce;
|
|
|
+ }
|
|
|
+ span.role.bg3{
|
|
|
+ background-color: #01d9ce;
|
|
|
+ }
|
|
|
+ span.role.bg4{
|
|
|
+ background-color: #ff6769;
|
|
|
+ }
|
|
|
+ span.role.bg5{
|
|
|
+ background-color: #ff8050;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-footer {
|
|
|
+ width: 100%;
|
|
|
+ height: .8rem;
|
|
|
+ line-height: .8rem;
|
|
|
+ background: #fff;
|
|
|
+ border-top: 1px solid #d9d9d9;
|
|
|
+ div.handle{
|
|
|
+ float: left;
|
|
|
+ width: 50%;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ span{
|
|
|
+ font-size: .26rem;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ i.iconfont {
|
|
|
+ margin-right: .06rem;
|
|
|
+ font-size: .36rem;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ div.edit{
|
|
|
+ border-right: 1px solid #d9d9d9;
|
|
|
+ }
|
|
|
+ div.no-allow {
|
|
|
+ color: #606168;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .staff-add {
|
|
|
+ display: inline-block;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 1.2rem;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -3.29rem;
|
|
|
+ width: 6.59rem;
|
|
|
+ height: .77rem;
|
|
|
+ line-height: .77rem;
|
|
|
+ text-align: center;
|
|
|
+ font-size: .32rem;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #3f84f6;
|
|
|
+ border-radius: 0.08rem;
|
|
|
+ i{
|
|
|
+ margin-right: .1rem;
|
|
|
+ font-size: .32rem;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
huangb