uni-xiudoyou/src/pages/index/userinfo/rolemenage.vue

<!-- 角色管理 -->
<template>
  <view class="rolemenage">
    <view class="btn-add">
      <image
        src="../../../static/images/addicon.png"
        class="addicon"
        @tap="topage('add')"
      ></image>
    </view>
    <view class="content">

      <view class="item" v-for="(item,index) in roleList" :key="index">
        <view class="top">
          <view class="expression">
            <text class="title">标识:</text><text class="msg">{{ item.name }}</text>
          </view>
          <view class="expression name">
            <text class="title">名称:</text><text class="msg">{{ item.description }}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="btns">
            <view class="btn edit" @tap="edit(item)">编辑</view>
            <view class="btn dele" @tap="dele(itemid)">删除</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: 'rolemenage',
  components: {},
  data () {
    //这里存放数据
    return {
      roleList:[],
      mid: uni.getStorageSync('scenicMessage').id
    };
  },
  onShow () {
    this.getRoleList()
  },
  onLoad () {
  },
  //方法集合
  methods: {
    // 跳转编辑
    edit(data) {
      this.$mRouter.push({route: '/pages/index/userinfo/roleedit', query: {roledata:JSON.stringify(data)}})
    },
    // 角色列表
    async getRoleList () {
      await this.$http.get('/mrole/getList',{
        mid:this.mid
      }).then( res=>{
        if (res.code === 200 && res.msg==='OK') {
          this.roleList = res.data
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.rolemenage {
  padding: 24upx 32upx 0;
  .btn-add {
    position: fixed;
    right: 33upx;
    top: 20upx;
    z-index: 100;
    .addicon {
      width: 48upx;
      height: 48upx;
    }
  }
  .content{
    background-color: #f1f1f1;
    .item{
      padding: 24upx 24upx 0;
      background-color: #fff;
      border-radius: 8upx;
      .top{
        border-bottom: 1px solid #e7e7e7;
        padding: 15upx 9upx 30upx;
        .expression {
          .title{
            color: #7a7c7c;
          }
          .msg {
            margin-left: 15upx;
            color: #202020;
          }
        }
        .name {
          margin-top: 24upx;
        }
      }
      .bottom{
        padding: 17upx 0;
        .btns{
          display: flex;
          justify-content : flex-end;
          .btn {
            width: 158upx;
            height: 58upx;
            border-radius: 6upx;
            font-size: 30upx;
            color: #7a7c7c;
            border: 1px solid #e7e7e7;
            text-align: center;
            line-height: 58upx;
          }
          .dele {
            margin-left:23upx;
            background-color: #ff6a5e;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
}
</style>