feat:增加类型显示

yangan

1 天以前 a28d0135ee42809b2c5863609da37155d3ecba5b

 pages/customer-page/customer-my/userMange/userMange.vue

@@ -1,30 +1,55 @@
<template>
   <view>
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="userList.length == 0"></u-empty>
      <u-empty mode="data"
         icon="http://cdn.uviewui.com/uview/empty/data.png"
         textSize="30"
         iconSize="1000"
         v-if="userList.length == 0"
         text="暂无数据"></u-empty>
      <u-list @scrolltolower="scrolltolower">
         <u-list-item v-for="(item, index) in userList" :key="index">
            <u-cell size="large" center :label="item.deptNames">
               <view slot="title" class="u-slot-title">
         <u-list-item v-for="(item, index) in userList"
            :key="index">
            <u-cell size="large"
               center
               :label="item.deptNames">
               <view slot="title"
                  class="u-slot-title">
                  <text class="u-cell-text">{{ item.name }}</text>
               </view>
               <view slot="value" class="u-slot-value">
                  <u-tag text="查看" type="primary" plain size="mini" icon="eye" @click="viewInfo(item)"></u-tag>
                  <u-tag text="编辑" type="primary" plain size="mini" icon="edit-pen" @click="editInfo(item)"></u-tag>
                  <u-tag text="删除" type="warning" plain size="mini" icon="trash" @click="deleteInfo(item)"></u-tag>
               <view slot="value"
                  class="u-slot-value">
                  <u-tag text="查看"
                     type="primary"
                     plain
                     size="mini"
                     icon="eye"
                     @click="viewInfo(item)"></u-tag>
                  <u-tag text="编辑"
                     type="primary"
                     plain
                     size="mini"
                     icon="edit-pen"
                     @click="editInfo(item)"></u-tag>
                  <u-tag text="删除"
                     type="warning"
                     plain
                     size="mini"
                     icon="trash"
                     @click="deleteInfo(item)"></u-tag>
               </view>
            </u-cell>
         </u-list-item>
      </u-list>
      <u-popup :show="infoShow" mode="center" :round="10" :closeable="true" @close="close">
      <u-popup :show="infoShow"
         mode="center"
         :round="10"
         :closeable="true"
         @close="close">
         <view class="info-main">
            <view class="info-block">
               <view class="info-block_label">服务矿场</view>
               <view class="info-block_value">{{ userInfo.deptNames }}</view>
            </view>
            <view class="info-block">
            <!-- <view class="info-block">
               <view class="info-block_label">身份证</view>
               <view class="info-block_value">{{ userInfo.idCard }}</view>
            </view>
            </view> -->
            <view class="info-block">
               <view class="info-block_label">真实姓名</view>
               <view class="info-block_value">{{ userInfo.name }}</view>
@@ -35,144 +60,159 @@
            </view>
         </view>
      </u-popup>
      <view class="add-icon" @click.stop="addUser"><u-icon name="plus" color="#fff" size="40"></u-icon></view>
      <u-modal :show="deleteShow" title="删除" content="确认删除?" @confirm="deleteConfirm" @cancel="deleteCancel" :showCancelButton="true"></u-modal>
      <view class="add-icon"
         @click.stop="addUser"><u-icon name="plus"
            color="#fff"
            size="40"></u-icon></view>
      <u-modal :show="deleteShow"
         title="删除"
         content="确认删除?"
         @confirm="deleteConfirm"
         @cancel="deleteCancel"
         :showCancelButton="true"></u-modal>
   </view>
</template>

<script>
export default {
   data() {
      return {
         userList: [],
         infoShow: false,
         userInfo: {},
         deleteShow: false,
         userId: ''
      };
   },
   onShow() {
      this.getappUserPage();
   },
   methods: {
      close() {
         this.infoShow = false;
   export default {
      data() {
         return {
            userList: [],
            infoShow: false,
            userInfo: {},
            deleteShow: false,
            userId: ''
         };
      },
      getappUserPage() {
         uni.showLoading({
            title: '加载中'
         });
         this.$reqGet('appUserPage').then(res => {
            this.userList = res.data.records;
            uni.hideLoading();
         });
      onShow() {
         this.getappUserPage();
      },
      scrolltolower() {},
      // 查看信息
      viewInfo(v) {
         uni.showLoading({
            title: '加载中'
         });
         this.$reqGet('getAppById', { userId: v.userId.toString() }).then(res => {
            if (res.code == 0) {
               uni.hideLoading();
               this.userInfo = res.data;
               this.infoShow = true;
            } else {
               this.$u.toast('加载失败');
            }
         });
      },
      // 编辑信息
      editInfo(v) {
         uni.navigateTo({
            url: `/pages/customer-page/customer-my/userMange/userManageEdit/userManageEdit?userId=${v.userId}`
         });
      },
      // 删除信息
      deleteInfo(v) {
         this.userId = v.userId.toString();
         this.deleteShow = true;
      },
      deleteConfirm() {
         uni.showLoading({
            title: '加载中'
         });
         this.$reqPost('appRemoveById', { userId: this.userId }, 'params')
            .then(res => {
               if (res.code === 0) {
                  uni.hideLoading();
                  this.$u.toast('删除成功');
                  this.deleteShow = false;
               } else {
                  uni.hideLoading();
                  this.$u.toast('删除失败');
                  this.deleteShow = false;
               }
            })
            .then(() => {
               this.getappUserPage();
      methods: {
         close() {
            this.infoShow = false;
         },
         getappUserPage() {
            uni.showLoading({
               title: '加载中'
            });
      },
      deleteCancel() {
         this.deleteShow = false;
      },
      // 点击添加按钮
      addUser() {
         uni.navigateTo({
            url: '/pages/customer-page/customer-my/userMange/userManageEdit/userManageEdit'
         });
            this.$reqGet('appUserPage').then(res => {
               this.userList = res.data.records;
               uni.hideLoading();
            });
         },
         scrolltolower() {},
         // 查看信息
         viewInfo(v) {
            uni.showLoading({
               title: '加载中'
            });
            this.$reqGet('getAppById', { userId: v.userId.toString() }).then(res => {
               if (res.code == 0) {
                  uni.hideLoading();
                  this.userInfo = res.data;
                  this.infoShow = true;
               } else {
                  this.$u.toast('加载失败');
               }
            });
         },
         // 编辑信息
         editInfo(v) {
            uni.navigateTo({
               url: `/pages/customer-page/customer-my/userMange/userManageEdit/userManageEdit?userId=${v.userId}`
            });
         },
         // 删除信息
         deleteInfo(v) {
            this.userId = v.userId.toString();
            this.deleteShow = true;
         },
         deleteConfirm() {
            uni.showLoading({
               title: '加载中'
            });
            this.$reqPost('appRemoveById', { userId: this.userId }, 'params')
               .then(res => {
                  if (res.code === 0) {
                     uni.hideLoading();
                     this.$u.toast('删除成功');
                     this.deleteShow = false;
                  } else {
                     uni.hideLoading();
                     this.$u.toast('删除失败');
                     this.deleteShow = false;
                  }
               })
               .then(() => {
                  this.getappUserPage();
               });
         },
         deleteCancel() {
            this.deleteShow = false;
         },
         // 点击添加按钮
         addUser() {
            uni.navigateTo({
               url: '/pages/customer-page/customer-my/userMange/userManageEdit/userManageEdit'
            });
         }
      }
   }
};
   };
</script>

<style lang="scss" scoped>
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
/deep/ .u-slot-value {
   width: 150px;
   height: 60px;
   @include flex;
}
.info-main {
   width: 690rpx;
   height: 600rpx;
   @include flex;
   flex-direction: column;
   padding: vww(10);
   box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
   .info-block {
      width: 94%;
      height: 120rpx;
<style lang="scss"
   scoped>
   @mixin flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   /deep/ .u-slot-value {
      width: 150px;
      height: 60px;
      @include flex;
      border-bottom: 1px solid #d6d6d6;
      &_label {
         line-height: 28rpx;
         font-size: 28rpx;
         font-weight: 300;
         color: #303030;
      }
      &_value {
         line-height: 28rpx;
         font-size: 28rpx;
         font-weight: 300;
         color: #303030;
   }

   .info-main {
      width: 690rpx;
      height: 300rpx;
      @include flex;
      flex-direction: column;
      padding: vww(10);
      box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);

      .info-block {
         width: 94%;
         height: 120rpx;
         @include flex;
         border-bottom: 1px solid #d6d6d6;

         &_label {
            line-height: 28rpx;
            font-size: 28rpx;
            font-weight: 300;
            color: #303030;
         }

         &_value {
            line-height: 28rpx;
            font-size: 28rpx;
            font-weight: 300;
            color: #303030;
         }
      }
   }
}
.add-icon {
   position: fixed;
   bottom: vww(60);
   right: vww(20);
   width: 89rpx;
   height: 89rpx;
   border-radius: 50%;
   background: #035cfb;
   @include flex;
   justify-content: center;
}
</style>

   .add-icon {
      position: fixed;
      bottom: vww(60);
      right: vww(20);
      width: 89rpx;
      height: 89rpx;
      border-radius: 50%;
      background: #035cfb;
      @include flex;
      justify-content: center;
   }
</style>