bigDataApp/pages/equipMange/index/index.vue

<template>
  <view class="">
    <view class="status_bar"></view>
    <view class="" style="position: relative; top: 44px">
      <view style="position: fixed; z-index: 100">
        <!-- <uni-nav-bar left-icon="back" left-text="返回" right-icon="plus" title="用户管理" @clickRight="clickRight" @clickLeft="clickLeft"></uni-nav-bar> -->
        <uni-nav-bar
          left-icon="back"
          left-text="返回"
          title="用户管理"
          @clickLeft="clickLeft"
        ></uni-nav-bar>
      </view>
      <view class="uinput-box">
        <view class="uinputs">
          <u-input
            v-model="argument.username"
            :type="type"
            :border="border"
            placeholder="请输入用户名称"
            input-align="center"
            :clearable="border"
            :custom-style="uinputstyle"
            @input="searchinput"
          />
          <u-icon
            name="search"
            class="search"
            size="30"
            @click="search"
          ></u-icon>
        </view>
      </view>
      <view class="userlists">
        <view
          class="userlist-li"
          v-for="(item, index) in userlists"
          :kex="index"
        >
          <image
            :src="
              $imageURL+ '/bigdata_app' +
              '/image/fourMoodBase/touxiang.png'
            "
            mode=""
          ></image>
          <p class="userlist-li-city">{{ item.username }}</p>
          <p class="userlist-li-eamil">{{ item.mobile }}</p>
          <view class="loginbox">
            <p class="loginp" @click="userloginbtn(item)">一键登录</p>
            <!-- <p class="logininfo" @click="userOperation(item)">查看详情</p> -->
          </view>
        </view>
      </view>
    </view>
    <view class="top" v-if="isTop" @click="top">
      <image
        :src="
          $imageURL+ '/bigdata_app' +
          '/image/6209a98f0cb3b5086f2ca36152c9269.png'
        "
        mode=""
      ></image>
    </view>
  </view>
</template>

<script>
import { Debounce, Throttle } from '../../../util/anitthro.js';
export default {
  data() {
    return {
      value: '',
      type: 'text',
      border: false,
      uinputstyle: {
        margin: '16rpx 0',
        background: '#f3f3f3',
        'border-radius': '25px',
      },
      userlists: [],
      argument: {
        page: 1,
        page_size: 10,
        username: '',
      },
      isTop: false,
      addtf: false,
    };
  },
  methods: {
    async getState(argument) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=user.login.users_info',
        data: {
          page: argument.page,
          page_size: argument.page_size,
          username: argument.username,
        },
      });
      this.userlists = this.userlists.concat(res.data);
      console.log(this.userlists);
    },
    async userlogin(uid) {
      const res = await this.$myRequest({
        url: '/api/api_gateway?method=user.login.auto_login',
        data: {
          uid,
        },
      });
      let session_key = res.session_key;
      uni.setStorage({
        key: 'session_key',
        data: session_key,
        success: () => {
          uni.switchTab({
            url: '../../index/index',
          });
          uni.showToast({
            title: '登录成功！',
            icon: 'none',
          });
        },
      });
    },
    clickRight() {
      //跳转增加用户页面
      if (this.addtf) {
        uni.navigateTo({
          url: './addusers',
        });
      } else {
        uni.showToast({
          title: '您暂无权限进行此操作，如有需要，请联系管理员',
          icon: 'none',
        });
      }
    },
    clickLeft() {
      uni.switchTab({
        url: '../../index/index',
      });
    },
    userOperation(item) {
      //跳转用户信息页面
      item = JSON.stringify(item);
      uni.navigateTo({
        url: './useroperation?item=' + item,
      });
    },
    userloginbtn(item) {
      //一键登录
      this.userlogin(item.uid);
    },
    search() {
      //搜索用户
      this.userlists = [];
      this.getState(this.argument);
    },
    searchinput() {
      this.argument.page = 1;
      Debounce(() => {
        this.userlists = [];
        this.getState(this.argument);
      }, 1000)();
    },
    top() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 500,
      });
    },
  }, //user.login.users_info
  onLoad() {
    this.getState(this.argument);
    uni.getStorage({
      key: 'jurisdiction',
      success: (res) => {
        console.log(JSON.parse(res.data));
        let items = JSON.parse(res.data).filter((item) => {
          return item.pur_id == 28; //"系统管理"
        });
        let items2 = items[0].children.filter((item) => {
          return item.pur_id == 29; //"用户管理"
        });
        var arr = items2[0].children;
        console.log(arr);
        for (var i = 0; i < arr.length; i++) {
          switch (arr[i].pur_id) {
            case 116: //"添加用户"
              this.addtf = true;
              break;
          }
        }
      },
    });
  },
  onReachBottom() {
    this.argument.page++;
    this.getState(this.argument);
  },
  onPullDownRefresh() {
    this.getState(this.argument);
    setTimeout(function () {
      uni.stopPullDownRefresh(); //停止下拉刷新动画
    }, 1000);
  },
  onBackPress(options) {
    if (options.from === 'navigateBack') {
      return false;
    }
    this.clickLeft();
    return true;
  },
  onPageScroll(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    if (e.scrollTop > 200) {
      //距离大于200时显示
      this.isTop = true;
    } else {
      //距离小于200时隐藏
      this.isTop = false;
    }
  },
};
</script>
1
<style lang="scss">
::v-deep .uni-icons {
  font-size: 40rpx !important;
}
.uinput-box {
  position: fixed;
  top: 88px;
  z-index: 100;
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .uinputs {
    width: 95%;
    position: relative;

    .search {
      position: absolute;
      top: 40rpx;
      left: 200rpx;
    }
  }
}

.userlists {
  width: 100%;
  position: relative;
  top: 180rpx;

  .userlist-li {
    width: 46%;
    height: 300rpx;
    margin: 20rpx 0 0 20rpx;
    float: left;
    box-shadow: 0 0 10rpx #bcb9ca;
    text-align: center;
    .userlist-li-city {
      overflow: hidden; //溢出隐藏
      white-space: nowrap; //禁止换行
      text-overflow: ellipsis; //...
    }
    image {
      width: 80rpx;
      height: 80rpx;
      margin: 40rpx 0 20rpx;
    }
    .loginbox {
      display: flex;
    }
    .loginp {
      width: 130rpx;
      padding: 6rpx;
      font-size: 25rpx;
      background-color: #18b566;
      color: #fff;
      margin: 20rpx auto;
      border-radius: 31rpx;
    }
    .logininfo {
      width: 130rpx;
      padding: 6rpx;
      font-size: 25rpx;
      background-color: #fbb309;
      color: #fff;
      margin: 20rpx auto;
      border-radius: 31rpx;
    }
  }
}
.top {
  position: fixed;
  right: 30px;
  bottom: 100px;
  z-index: 100;
  image {
    width: 100rpx;
    height: 100rpx;
  }
}
</style>