new-mshop-view/pages/admin/business/staff.vue

<template>
	<view class="custom-content">
    <!--顶部搜索框-->
    <view class="search-content" :style="'background-image:url('+ custom_top_bg +')'">
      <view class="search-box">
        <text class="iconfont icon-sousuo" @click="getStaffList(1)"></text>
        <input class="search-input" type='text' placeholder='请输入客户经理名称' v-model="search.keyword" @input="getStaffList(1)" />
      </view>
    </view>
    <!-- 员工列表 -->
    <view class="custom-list">
      <view class="list-item" v-for="(item,index) in list" :key="index">
        <view class="left-avatar">
          <image v-if="item.avatar.length > 10" :src="item.avatar" mode="widthFix"/>
        </view>
        <view class="center-info">
          <view class="info-top">{{ item.nickname }}</view>
          <view class="info-bottom">UID：{{ item.uid }}</view>
        </view>
        <view class="right-btn" v-if="uid != item.uid">
          <view class="give-btn edit-btn" @click="goToEditPage(item.service_id)">编辑</view>
          <view class="give-btn del-btn" @click="delInfo(item.service_id)">删除</view>
        </view>
      </view>
    </view>
    <!--添加按钮-->
    <view class="group-btn">
      <view class="add-btn" @click="addStaff()">新增客户经理</view>
    </view>
    <!-- 添加方式弹框 -->
    <uni-popup ref="addTypeList" type="bottom">
      <view class="add-type-content">
        <view class="add-type-box" @click="goToEditPage">手动添加</view>
        <view class="add-type-box" @click="createQrCode">二维码邀请</view>
      </view>
    </uni-popup>
    <!--二维码-->
    <uni-popup ref="qrCodePopup" type="center">
      <view class="qr-code-content">
        <image class="image" :src="qrCode"></image>
        <view class="close-qr-code" @click="closeQrCode()">关闭</view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
import {mapGetters} from "vuex";
import {getStaffList,delStaff,staffInviteQrCode} from "@/api/service";
import { HTTP_REQUEST_URL } from '@/config/app.js';
export default {
  name: 'custom',
  components: {},
  computed: {
    ...mapGetters(['isLogin','uid', 'userInfo', 'viewColor'])
  },
  data() {
    return {
      mer_id: 0,
      // 员工列表
      list: [],
      search:{
        page: 1,
        limit: 20,
        keyword: '',
      },
      // 二维码
      qrCode: '',
      custom_top_bg: '',
    }
  },
  onLoad: function(options) {
    this.mer_id = options.mer_id || 0;
    if(this.mer_id <= 0){
      uni.showModal({
        title: '提示',
        content: '非法访问，参数不明确！',
        success: function success(res) {
          uni.navigateBack();
        }
      });
    }
    // 获取用户列表
    this.getStaffList(1);
  },
  onReady() {
    this.custom_top_bg = `${HTTP_REQUEST_URL}/static/images/mer/custom_top_bg.jpg`;
  },
  methods: {
    // 提货记录
    getStaffList(page) {
      // 初始化
      let _this = this;
      if(Number(page) == 1) _this.list = [];
      // 请求参数处理
      _this.search.page = Number(page) > 0 ? Number(page) : _this.search.page;
      let search = Object.assign({},_this.search);
      search.mer_id = _this.mer_id;
      // 请求
      getStaffList(search).then(res => {
        let list = res.data.list || {};
        if (Object.values(list).length > 0) {
          _this.list = _this.$util.SplitArray(list, _this.list);
          _this.$set(_this, 'list', _this.list);
          _this.search.page++;
        }
      }).catch(err => {
        this.$util.Tips({
          title: err
        });
      });
    },
    // 删除信息
    delInfo(service_id){
      let _this = this;
      uni.showModal({
        title: '确认删除当前客户经理？',
        success: (res) => {
          if (res.confirm) {
            let params = {
              service_id: service_id,
              mer_id: _this.mer_id
            };
            delStaff(params).then(res => {
              this.$util.Tips({
                title: '删除成功'
              }, () => {
                _this.getStaffList(1)
              });
            }).catch(err => {
              this.$util.Tips({
                title: err
              });
            });
          }
        }
      });
    },
    // 点击添加员工
    addStaff(){
      this.$refs.addTypeList.open('bottom');
    },
    // 二维码邀请 - 生成二维码
    createQrCode(){
      let _this = this;
      staffInviteQrCode({ mer_id: _this.mer_id }).then(res => {
        if (res.status == 200) {
          _this.qrCode = res.data.qr_code || '';
          _this.$refs.addTypeList.close();
          _this.$refs.qrCodePopup.open('center');
        }
      }).catch(err => {
        this.$util.Tips({
          title: err
        });
      });
    },
    // 关闭二维码
    closeQrCode(){
      this.$refs.qrCodePopup.close();
    },
    // 进入员工编辑页面
    goToEditPage(service_id){
      let path = '/pages/admin/business/edit_staff?mer_id=' + this.mer_id;
      if(Number(service_id) > 0) path += '&service_id=' +service_id;
      uni.navigateTo({
        url: path,
      });
    },
  },
  // 触底事件
  onReachBottom() {
    this.getStaffList();
  }
}
</script>

<style scoped lang="scss">
.custom-content{
  // 搜索框
  .search-content{
    width: 100vw;
    background-repeat: no-repeat;
    padding: 20rpx 30rpx;

    .search-box{
      width: 100%;
      height: 70rpx;
      padding: 10rpx 15rpx;
      background: #FFFFFF;
      border-radius: 10rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      font-size: 28rpx;

      .icon-sousuo{
        width: calc(70rpx - 15rpx);
        padding-right: 15rpx;
        height: calc(70rpx - (10rpx * 2));
        line-height: calc(70rpx - (10rpx * 2));
        text-align: center;
      }
      .search-input{
        width: calc(100% - 70rpx + 15rpx);
        height: calc(70rpx - (10rpx * 2));
      }
    }
  }
  // 员工列表
  .custom-list{
    width: 100vw;
    background: #FFFFFF;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    .list-item:not(:last-child){
      border-bottom: 2rpx solid #f6f6f6;
    }
    .list-item{
      --item-height-value-: 100rpx;

      width: 100vw;
      padding: 20rpx 30rpx;
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      .left-avatar{
        width: 100rpx;
        height: var(--item-height-value-);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        image{
          width: 80rpx !important;
          height: 80rpx !important;
          border-radius: 50% !important;
        }
      }
      .center-info{
        width: calc(100% - 100rpx - 200rpx);
        height: var(--item-height-value-);
        display: inline-flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        padding-left: 10rpx;
        .info-top{
          width: 100%;
          height: calc(100rpx - 40rpx);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: flex-start;
          font-size: 28rpx;
        }
        .info-bottom{
          width: 100%;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 26rpx;
          color: #9e9e9e;
        }
      }
      .right-btn{
        width: 200rpx;
        height: var(--item-height-value-);
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        .give-btn{
          padding: 6rpx 15rpx;
          border-radius: 50rpx;
          font-size: 26rpx;
          color: #FFFFFF;
          width: 95rpx;
          text-align: center;
        }
        .edit-btn{
          background: #409eff;
        }
        .del-btn{
          background: #f56c6c;
        }
      }
    }
  }
  // 添加员工
  .group-btn{
    width: 100vw;
    position: fixed;
    bottom: 100rpx!important;
    left: 0!important;
    padding: 0 30rpx;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    .add-btn{
      height: 80rpx;
      line-height: 80rpx;
      width: 100%;
      text-align: center;
      font-size: 30rpx;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      border-radius: 15rpx;
    }
  }
  // 添加员工方式弹框
  .add-type-content{
    width: 100%;
    background: #FFFFFF;
    padding: 20rpx;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    .add-type-box{
      height: 70rpx;
      line-height: 70rpx;
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      width: 80%;
      border-radius: 100rpx;
      font-size: 30rpx;
      text-align: center;
    }
    .add-type-box:first-child{
      margin-bottom: 20rpx;
      background-color: #e6a23c!important;
      border-color: #e6a23c!important;
    }
  }
  // 二维码弹框
  .qr-code-content{
    width: 80vw;
    .image{
      width: 80vw;
      height: 80vw;
    }
    .close-qr-code{
      position: fixed;
      top: 35rpx;
      right: 70rpx;
      color: #FFFFFF;
      border: 2rpx solid #FFFFFF;
      height: 40rpx;
      line-height: 36rpx;
      padding: 0 20rpx;
      border-radius: 50rpx;
    }
  }
}
</style>