组件：菜单权限，角色编辑，新增

src/App.vue

@@ -1,75 +1,79 @@
 <script>
-    import Vue from 'vue'
-    export default {
-        async onLaunch() {
-            this.initData();
-        },
-        onHide() {
-        },
-        methods: {
-            // 数据初始化
-            async initData() {
-                const token = uni.getStorageSync('accessToken');
-                if (token) {
-                    await this.initNavCartNum();
-                    // await this.initWebsocket(token);
-                    await this.initSystemInfo();
-                    // #ifdef H5
-                    this.$mPayment.wxConfigH5();
-                    // #endif
-                }
-            },
-		        // 初始化系统信息
-            initSystemInfo() {
-                uni.getSystemInfo({
-                    success(e) {
-                        console.log(e);
-                        // #ifndef MP
-                        Vue.prototype.StatusBar = e.statusBarHeight;
-                        if (e.platform == 'android') {
-                            Vue.prototype.CustomBar = e.statusBarHeight + 50;
-                        } else {
-                            Vue.prototype.CustomBar = e.statusBarHeight + 45;
-                        }
+import Vue from 'vue'
+export default {
+  async onLaunch () {
+    this.initData();
+  },
+  onHide () {
+  },
+  methods: {
+    // 数据初始化
+    async initData () {
+      const token = uni.getStorageSync('accessToken');
+      if (token) {
+        await this.initNavCartNum();
+        // await this.initWebsocket(token);
+        await this.initSystemInfo();
+        // #ifdef H5
+        this.$mPayment.wxConfigH5();
+        // #endif
+      }
+    },
+    // 初始化系统信息
+    initSystemInfo () {
+      uni.getSystemInfo({
+        success (e) {
+          console.log(e);
+          // #ifndef MP
+          Vue.prototype.StatusBar = e.statusBarHeight;
+          if (e.platform == 'android') {
+            Vue.prototype.CustomBar = e.statusBarHeight + 50;
+          } else {
+            Vue.prototype.CustomBar = e.statusBarHeight + 45;
+          }
 
-                        // #endif
-                        // #ifdef MP-WEIXIN
-                        Vue.prototype.StatusBar = e.statusBarHeight;
-                        let custom = wx.getMenuButtonBoundingClientRect();
-                        Vue.prototype.Custom = custom;
-                        Vue.prototype.CustomBar = custom.top - e.statusBarHeight;
-                        // #endif
-                        // #ifdef MP-ALIPAY
-                        Vue.prototype.StatusBar = e.statusBarHeight;
-                        Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
-                        // #endif
-                    }
-                });
-            },
-		        // 初始化购物车在tab的数字角标
-            initNavCartNum() {
-                const cartNum = uni.getStorageSync('cartNum');
-                // 注意text只能是字符串不能是数字
-                if (parseInt(cartNum, 10) > 0) {
-                    uni.setTabBarBadge({
-                        index: this.$mConstDataConfig.cartIndex,
-                        text: cartNum.toString()
-                    });
-                } else {
-                    uni.removeTabBarBadge({index: this.$mConstDataConfig.cartIndex});
-                }
-            }
+          // #endif
+          // #ifdef MP-WEIXIN
+          Vue.prototype.StatusBar = e.statusBarHeight;
+          let custom = wx.getMenuButtonBoundingClientRect();
+          Vue.prototype.Custom = custom;
+          Vue.prototype.CustomBar = custom.top - e.statusBarHeight;
+          // #endif
+          // #ifdef MP-ALIPAY
+          Vue.prototype.StatusBar = e.statusBarHeight;
+          Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
+          // #endif
         }
+      });
+    },
+    // 初始化购物车在tab的数字角标
+    initNavCartNum () {
+      const cartNum = uni.getStorageSync('cartNum');
+      // 注意text只能是字符串不能是数字
+      if (parseInt(cartNum, 10) > 0) {
+        uni.setTabBarBadge({
+          index: this.$mConstDataConfig.cartIndex,
+          text: cartNum.toString()
+        });
+      } else {
+        uni.removeTabBarBadge({ index: this.$mConstDataConfig.cartIndex });
+      }
     }
+  }
+}
 </script>
 
 <style lang='scss'>
-	// 导入colorUI
-	@import '/static/css/colorui/main.css';
-	@import '/static/css/colorui/icon.css';
-	@import '/static/css/colorui/animation.css';
-	// 导入阿里巴巴矢量图标库
-	@import './static/css/iconfont/iconfont.css';
-	@import './static/css/reset.scss';
-	@import './static/css/uni.scss';
+// 导入colorUI
+@import '/static/css/colorui/main.css';
+@import '/static/css/colorui/icon.css';
+@import '/static/css/colorui/animation.css';
+// 导入阿里巴巴矢量图标库
+@import './static/css/iconfont/iconfont.css';
+@import './static/css/reset.scss';
+@import './static/css/uni.scss';
+
+  .myChecked .uni-checkbox-input {
+    border-radius: 50% !important;
+  }
 </style>

src/components/uni-icons/icons.js

@@ -0,0 +1,96 @@
+export default {
+	'contact': '\ue100',
+	'person': '\ue101',
+	'personadd': '\ue102',
+	'contact-filled': '\ue130',
+	'person-filled': '\ue131',
+	'personadd-filled': '\ue132',
+	'phone': '\ue200',
+	'email': '\ue201',
+	'chatbubble': '\ue202',
+	'chatboxes': '\ue203',
+	'phone-filled': '\ue230',
+	'email-filled': '\ue231',
+	'chatbubble-filled': '\ue232',
+	'chatboxes-filled': '\ue233',
+	'weibo': '\ue260',
+	'weixin': '\ue261',
+	'pengyouquan': '\ue262',
+	'chat': '\ue263',
+	'qq': '\ue264',
+	'videocam': '\ue300',
+	'camera': '\ue301',
+	'mic': '\ue302',
+	'location': '\ue303',
+	'mic-filled': '\ue332',
+	'speech': '\ue332',
+	'location-filled': '\ue333',
+	'micoff': '\ue360',
+	'image': '\ue363',
+	'map': '\ue364',
+	'compose': '\ue400',
+	'trash': '\ue401',
+	'upload': '\ue402',
+	'download': '\ue403',
+	'close': '\ue404',
+	'redo': '\ue405',
+	'undo': '\ue406',
+	'refresh': '\ue407',
+	'star': '\ue408',
+	'plus': '\ue409',
+	'minus': '\ue410',
+	'circle': '\ue411',
+	'checkbox': '\ue411',
+	'close-filled': '\ue434',
+	'clear': '\ue434',
+	'refresh-filled': '\ue437',
+	'star-filled': '\ue438',
+	'plus-filled': '\ue439',
+	'minus-filled': '\ue440',
+	'circle-filled': '\ue441',
+	'checkbox-filled': '\ue442',
+	'closeempty': '\ue460',
+	'refreshempty': '\ue461',
+	'reload': '\ue462',
+	'starhalf': '\ue463',
+	'spinner': '\ue464',
+	'spinner-cycle': '\ue465',
+	'search': '\ue466',
+	'plusempty': '\ue468',
+	'forward': '\ue470',
+	'back': '\ue471',
+	'left-nav': '\ue471',
+	'checkmarkempty': '\ue472',
+	'home': '\ue500',
+	'navigate': '\ue501',
+	'gear': '\ue502',
+	'paperplane': '\ue503',
+	'info': '\ue504',
+	'help': '\ue505',
+	'locked': '\ue506',
+	'more': '\ue507',
+	'flag': '\ue508',
+	'home-filled': '\ue530',
+	'gear-filled': '\ue532',
+	'info-filled': '\ue534',
+	'help-filled': '\ue535',
+	'more-filled': '\ue537',
+	'settings': '\ue560',
+	'list': '\ue562',
+	'bars': '\ue563',
+	'loop': '\ue565',
+	'paperclip': '\ue567',
+	'eye': '\ue568',
+	'arrowup': '\ue580',
+	'arrowdown': '\ue581',
+	'arrowleft': '\ue582',
+	'arrowright': '\ue583',
+	'arrowthinup': '\ue584',
+	'arrowthindown': '\ue585',
+	'arrowthinleft': '\ue586',
+	'arrowthinright': '\ue587',
+	'pulldown': '\ue588',
+	'closefill': '\ue589',
+	'sound': '\ue590',
+	'scan': '\ue612'
+}

src/pages.json

@@ -40,6 +40,14 @@
       }
     },
     {
+      "path":"pages/index/userinfo/roleedit",
+      "style":{
+        "navigationBarTitleText": "编辑",
+        "navigationBarBackgroundColor":"#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
       "path":"pages/index/userinfo/usermenage",
       "style":{
         "navigationBarTitleText": "用户管理",
@@ -48,6 +56,14 @@
       }
     },
     {
+      "path":"pages/index/userinfo/adduser",
+      "style":{
+        "navigationBarTitleText": "用户添加",
+        "navigationBarBackgroundColor":"#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
       "path":"pages/index/setting/changepassword",
       "style":{
         "navigationBarTitleText": "修改密码",

src/pages/components/mask.vue

@@ -1,20 +1,39 @@
 <!-- 遮罩层 -->
 <template name="mask">
-  <view class="mask" @touchmove.stop.prevent="moveHandle">
-    <view class="maskbgc"></view>
-    <view class="content">
-      <view class="header">
-        <view class="title">订单兑换</view>
-        <image src="../../static/images/closeicon.png" class="iconclose" @tap="closeMask" />
-      </view>
-      <view class="content-warp">
-        <view class="message">
-          <image v-if="iconShow" src="../../static/images/sureicon.png" class="iocn"></image>
-          <icon v-if="!iconShow" class="iocn" type="warn" size="40"/>
-          <view class="txt">{{ txt }}</view>
+  <view class="warp-mask">
+    <view class="mask">
+      <view class="maskbgc"></view>
+      <view class="content">
+        <view class="header">
+          <view class="title">菜单权限</view>
+          <image
+            src="../../static/images/closeicon.png"
+            class="iconclose"
+            @tap="closeMask"
+          />
         </view>
-        <view class="sure">
-          <view class="btn" @tap="sureconver">确认</view>
+        <view class="content-warp">
+          <view class="message">
+            <view class="radiolist">
+
+              <view class="uni-list">
+                <checkbox-group @change="checkboxChange">
+                  <label class="uni-list-cell uni-list-cell-pd checked-bar" v-for="item in items" :key="item.value">
+                    <view class="main-checked-list">
+                      <checkbox :value="item.value" :checked="item.checked" />
+                      <view class="title">{{ item.name }}</view>
+                    </view>
+                    <image v-if="!item.checked" class="moreicon" src="../../static/images/moreicon.png"></image>
+                    <image v-if="item.checked" class="downicon"  src="../../static/images/downmoreicon.png"></image>
+                  </label>
+                </checkbox-group>
+              </view>
+              
+            </view>
+          </view>
+          <view class="sure">
+            <view class="btn" @tap="sureconver">确认</view>
+          </view>
         </view>
       </view>
     </view>
@@ -24,7 +43,6 @@
 <script>
 export default {
   name: 'mask',
-  components: {},
   props: {
     txt: {
       type: String,
@@ -35,30 +53,79 @@ export default {
       default: false
     }
   },
-  data() {
+  data () {
     //这里存放数据
-    return {};
+    return {
+      checkedIndex: false,
+      checkedSetting: false,
+      checkedBasics: false,
+      checkedVip: false,
+      checkedGoods: false,
+      checkedShop: false,
+
+      items: [{
+        value: 'index',
+        name: '首页管理'
+      },
+      {
+        value: 'setting',
+        name: '系统管理',
+        checked: 'true'
+      },
+      {
+        value: 'bascis',
+        name: '基础管理'
+      },
+      {
+        value: 'Vip',
+        name: '会员管理'
+      },
+      {
+        value: 'goods',
+        name: '商家管理'
+      },
+      {
+        value: 'shop',
+        name: '商品管理'
+      }
+      ]
+    }
   },
-  //监控data中的数据变化
-  watch: {},
   //方法集合
   methods: {
     // 确认后
     sureconver () {
       this.$emit('isSureConver', true)
     },
-    closeMask() {
+    closeMask () {
       this.$emit('isSureConver', false)
     },
 
-    // 禁止页面滚动
-    moveHandle() {}
-
+    checkboxChange: function (e) {
+      console.log(e);
+      let items = this.items,
+      values = e.detail.value; // 选中的集合
+      for (let i = 0; i < items.length; ++i) {
+        const element = items[i]
+        if (values.includes(element.value)) {
+          this.$set(element, 'checked', true)
+        } else {
+          this.$set(element, 'checked', false)
+        }
+      }
+    }
   },
-  onLoad() {},
+  onLoad () { },
 };
 </script>
 <style lang='scss' scoped>
+.warp-mask {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
 .mask {
   position: relative;
   width: 100vw;
@@ -74,8 +141,7 @@ export default {
   }
   .content {
     position: absolute;
-    top: 50%;
-    margin-top: -281upx;
+    top: 20%;
     left: 50%;
     margin-left: -320upx;
     width: 640upx;
@@ -106,47 +172,57 @@ export default {
         width: 31upx;
       }
     }
-
     .content-warp {
       background-color: #fff;
       border-bottom-left-radius: 20upx;
       border-bottom-right-radius: 20upx;
-      .message{
+      .message {
+        padding: 50upx 60upx 0;
+        overflow-y: scroll;
+        height: 670upx;
+        .radiolist {
+          .uni-list {
+            .checked-bar {
+              display: flex;
+              .main-checked-list{
+                flex: 1;
+                display: flex;
+                .title {
+                  margin-left: 30upx;
+                  color: #666666;
+                  font-size: 32upx;
+                }
+              }
+              .moreicon{
+                width: 19upx;
+                height: 27upx;
+              }
+              .downicon {
+                width: 27upx;
+                height: 19upx;
+              }
+            }
+          }
+        }
+      }
+      .sure {
+        padding-bottom: 40upx;
+        box-sizing: border-box;
         display: flex;
         justify-content: center;
         align-items: center;
-        flex-direction: column;
-        height: 340upx;
-        .txt {
-          text-align: center;
-          color: #18211e;
-          font-size: 36upx;
+        .btn {
+          width: 280upx;
+          height: 80upx;
+          background-color: #a95cff;
+          color: #fff;
+          font-size: 32upx;
           letter-spacing: 2upx;
-        }
-        .iocn {
-          width: 70upx;
-          height: 70upx;
-          margin-bottom: 25upx;
+          text-align: center;
+          line-height: 80upx;
+          border-radius: 10upx;
         }
       }
-        .sure {
-          padding-bottom: 40upx;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          .btn {
-            width: 280upx;
-            height: 80upx;
-            background-color: #a95cff;
-            color: #fff;
-            font-size: 32upx;
-            letter-spacing: 2upx;
-            text-align: center;
-            line-height: 80upx;
-            border-radius: 10upx;
-          }
-        }
     }
   }
 }

src/pages/index/userinfo/adduser.vue

@@ -0,0 +1,133 @@
+<!-- 新增用户 -->
+<template>
+  <view class="adduser">
+    <view class="warp">
+      <view class="item">
+        <view class="title">账号</view>
+        <input class="msg" type="text" placeholder="请输入账号" placeholder-style="color:#e8e8e8" />
+      </view>
+      <view class="item">
+        <view class="title">真实姓名</view>
+        <input class="msg" type="text" placeholder="请输入真实姓名" placeholder-style="color:#e8e8e8"/>
+      </view>
+      <view class="item">
+        <view class="title">角色</view>
+        <view class="uni-list-cell">
+          <view class="uni-list-cell-db">
+            <picker @change="bindPickerChange" :value="userIndex" :range="userArray" range-key="name" class="uni-upd">
+              <view class="uni-input">{{ userArray[userIndex].name }}</view>
+            </picker>
+            <view class="icon-warp">
+              <image
+                src="../../../static/images/moreicon.png"
+                class="iconRight"
+              ></image>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="item">
+        <view class="title">手机号</view>
+        <input class="msg" type="text" placeholder="请输入手机号" placeholder-style="color:#e8e8e8"/>
+      </view>
+      <view class="item">
+        <view class="title">密码</view>
+        <input class="msg" type="text" placeholder="请输入密码" placeholder-style="color:#e8e8e8"/>
+      </view>
+      <view class="item">
+        <view class="title">确认密码</view>
+        <input class="msg" type="text" placeholder="再次输入密码" placeholder-style="color:#e8e8e8"/>
+      </view>
+      
+    </view>
+    <view class="btn">
+      <view class="sure">确认</view>
+    </view>
+  </view>
+</template> 
+
+<script>
+
+export default {
+  name: 'adduser',
+  components: {},
+  data () {
+    //这里存放数据
+    return {
+      userArray: [{ name: '请选择角色', id: '' }],
+      userIndex: 0
+    };
+  },
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    bindPickerChange(e) {
+      console.log(e.detail.value);
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.adduser {
+  padding-top: 24upx;
+  .warp {
+    background-color: #fff;
+    padding: 0 31upx;
+    .item {
+      display: flex;
+      padding: 30upx 0;
+      border-bottom: 1px solid #e1e1e1;
+      &:last-child {
+        border-bottom: none;
+      }
+      .title {
+        color: #666666;
+        width: 170upx;
+        letter-spacing: 2upx;
+      }
+      .msg {
+        flex: 1;
+      }
+
+      .uni-list-cell {
+        flex: 1;
+      }
+      .uni-list-cell-db {
+        display: flex;
+        justify-content: space-between;
+      }
+      .uni-upd {
+        width: 100%;
+      }
+      .uni-input {
+        color: #e8e8e8;
+      }
+      .icon-warp {
+        width: 19upx;
+        .iconRight {
+          width: 19upx;
+          height: 27upx;
+        }
+      }
+    }
+  }
+  .btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 41upx;
+    .sure {
+      width: 600upx;
+      height: 98upx;
+      background-color: #8064f7;
+      text-align: center;
+      line-height: 98upx;
+      letter-spacing: 2upx;
+      border-radius: 6upx;
+      color: #fff;
+      font-size: 32upx;
+    }
+  }
+}
+</style>

src/pages/index/userinfo/roleedit.vue

@@ -0,0 +1,161 @@
+<!-- 角色编辑 -->
+<template>
+  <view class="roleedit">
+    <view class="item-warp">
+      <view class="bar">
+        <view class="item">
+          <view class="title">角色标识</view>
+          <input class="msg" type="text" placeholder="..." placeholder-style="color:#bdbdbd" />
+        </view>
+      </view>
+
+      <view class="bar">
+        <view class="item">
+          <view class="title">角色名称</view>
+          <view class="uni-list-cell">
+            <view class="uni-list-cell-db">
+              <picker @change="roleChange" :value="roleIndex" :range="userArray" range-key="name" class="uni-upd">
+                <view class="uni-input">{{ roleArray[roleIndex].name }}</view>
+              </picker>
+              <view class="icon-warp">
+                <image
+                  src="../../../static/images/moreicon.png"
+                  class="iconRight"
+                ></image>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="bar">
+        <view class="item">
+          <view class="title">菜单权限</view>
+          <view class="uni-list-cell">
+            <view class="uni-list-cell-db">
+              <picker @change="bindPickerChange" :value="userIndex" :range="userArray" range-key="name" class="uni-upd">
+                <view class="uni-input">{{ userArray[userIndex].name }}</view>
+              </picker>
+              <view class="icon-warp">
+                <image
+                  src="../../../static/images/moreicon.png"
+                  class="iconRight"
+                ></image>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="btn">
+      <view class="sure">确认</view>
+    </view>
+
+    <Maskre :txt='txt' v-if="isShowMask"></Maskre>
+  </view>
+</template>
+
+<script>
+import Maskre from '../../components/mask';
+export default {
+  name: 'roleedit',
+  components: {
+    Maskre
+  },
+  data () {
+    //这里存放数据
+    return {
+      isShowMask: true,
+      txt: '菜单权限',
+
+      roleArray:[{name:'请选择',id: ''}],
+      roleIndex: 0,
+      userArray: [{name:'请选择',id: ''}],
+      userIndex: 0
+    };
+  },
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 角色选择
+    roleChange (e) {
+      console.log(e);
+    },
+    // 菜单选择
+    bindPickerChange(e) {
+      console.log(e);
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+  .roleedit {
+   padding-top: 23upx;
+    .item-warp {
+      .bar {
+        padding: 0 32upx;
+        background-color: #fff;
+        &:first-child{
+          .item {
+            border-bottom: 1px solid #e1e1e1;
+          }
+        }
+        &:last-child {
+          margin-top: 24upx;
+        }
+      }
+      .item {
+        display: flex;
+        padding: 30upx 0;
+        .title {
+          color: #666666;
+          width: 170upx;
+          letter-spacing: 2upx;
+        }
+        .msg {
+          flex: 1;
+        }
+      }
+    }
+
+    .btn {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 41upx;
+      .sure {
+        width: 600upx;
+        height: 98upx;
+        background-color: #8064f7;
+        text-align: center;
+        line-height: 98upx;
+        letter-spacing: 2upx;
+        border-radius: 6upx;
+        color: #fff;
+        font-size: 32upx;
+      }
+    }
+    .uni-list-cell {
+      flex: 1;
+    }
+    .uni-list-cell-db {
+      display: flex;
+      justify-content: space-between;
+    }
+    .uni-upd {
+      width: 100%;
+    }
+    .uni-input {
+      color: #bdbdbd;
+    }
+    .icon-warp {
+      width: 19upx;
+      .iconRight {
+        width: 19upx;
+        height: 27upx;
+      }
+    }
+  }
+</style>

src/pages/index/userinfo/rolemenage.vue

@@ -13,7 +13,7 @@
         </view>
         <view class="bottom">
           <view class="btns">
-            <view class="btn edit">编辑</view>
+            <view class="btn edit" @tap="edit">编辑</view>
             <view class="btn dele">删除</view>
           </view>
         </view>
@@ -33,20 +33,12 @@ export default {
 
     };
   },
-  //监控data中的数据变化
-  watch: {},
   //方法集合
   methods: {
-
-  },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-
-  },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
+    edit() {
+      this.$mRouter.push({route: '/pages/index/userinfo/roleedit'})
+    }
+  }
 }
 </script>
 <style lang='scss' scoped>

src/pages/index/userinfo/usermenage.vue

@@ -1,43 +1,66 @@
 <!-- 用户管理 -->
 <template>
-  <view class="usermenage">
-    
-    <view class="uuserheader">
-
-    </view>
-
-    <view class="content">
-      <view class="item">
-        <view class="top">
-          <view class="expression">
-            <text class="title">账号</text>:<text class="msg">admin</text>
-          </view>
-          <view class="expression">
-            <text class="title">实际姓名</text>:<text class="msg">admin</text>
-          </view>
-          <view class="expression">
-            <text class="title">手机</text>:<text class="msg">admin</text>
-          </view>
-          <view class="expression">
-            <text class="title">状态</text>:<text class="msg status">启用</text>
+  <view class="user-warp">
+    <view class="user-header">
+      <view class="header">
+        <view class="inputnameorphone">
+          <view class="more" >
+            <text class="txt" @tap="showCondition">{{conditionlist[index].name }}</text>
+            <image class="downicon" @tap="showCondition" src="../../../static/images/garydownicon.png"></image>
+            <view class="bar" v-if="showcondition">
+              <view class="trigon"></view>
+              <view class="item" @tap="change(1)">账号</view>
+              <view class="item" @tap="change(2)">真实姓名</view>
+              <view class="item" @tap="change(3)">手机号</view>
+            </view>
           </view>
+          <input class="usermsg" type="text" placeholder="请输入账号或姓名、手机号" placeholder-style="font-size:12px"/>
+          <image class="searchicon" src="../../../static/images/search.png"></image>
+        </view>
+        <view class="header-btns">
+          <image class="add" @tap="add" src="../../../static/images/addicon.png"></image>
+          <image class="ref" src="../../../static/images/reficon.png"></image>
         </view>
-        <view class="bottom">
-          <view class="btns">
-            <view class="btn more">
-              <view class="txt" @tap="showMore">更多</view>
-              <view class="bar" v-if="ishow">
-                ishow
+      </view>
+    </view>
+    <view style="height: 110upx"></view>
+    <view class="usermenage">
+      <view class="content">
+        <view class="item">
+          <view class="top">
+            <view class="expression">
+              <text class="title">账号</text>:<text class="msg">admin</text>
+            </view>
+            <view class="expression">
+              <text class="title">实际姓名</text>:<text class="msg">admin</text>
+            </view>
+            <view class="expression">
+              <text class="title">手机</text>:<text class="msg">admin</text>
+            </view>
+            <view class="expression">
+              <text class="title">状态</text>:<text class="msg status"
+                >启用</text
+              >
+            </view>
+          </view>
+          <view class="bottom">
+            <view class="btns">
+              <view class="btn more">
+                <view class="txt" @tap="showMore">更多</view>
+                <view class="bar" v-if="isshow">
+                  <view class="trigon"></view>
+                  <view class="item">冻结</view>
+                  <view class="item">删除</view>
+                </view>
               </view>
+              <view class="btn edit">编辑</view>
+              <view class="btn change">修改密码</view>
+              <view class="btn reds">重置密码</view>
             </view>
-            <view class="btn edit">编辑</view>
-            <view class="btn change">修改密码</view>
-            <view class="btn reds">重置密码</view>
           </view>
         </view>
       </view>
     </view>
-
   </view>
 </template>
 
@@ -49,25 +72,131 @@ export default {
   data () {
     //这里存放数据
     return {
-      ishow: false
+      isshow: false,
+      showcondition: false,
+      conditionlist:[
+        {name: '全部', code:1},
+        {name: '账号', code:2},
+        {name: '真实姓名', code:3},
+        {name: '手机号', code:4}
+      ],
+      index: 0
     };
   },
   //方法集合
   methods: {
+    // 打开条件选择
+    showCondition() {
+      this.showcondition = !this.showcondition
+    },
+    change (id) {
+      this.index = id
+      this.showcondition = false
+    },
+    // 打开更多选择
     showMore () {
-      this.ishow = !this.ishow
+      this.isshow = !this.isshow
+    },
+    // 跳转新增
+    add () {
+      this.$mRouter.push({route:'/pages/index/userinfo/adduser'})
     }
   }
 }
 </script>
 <style lang='scss' scoped>
+.user-header {
+  width: 100vw;
+  position: fixed;
+  align-items: center;
+  top: 0;
+  left: 0;
+  padding: 20upx 32upx;
+  background-color: #fbfbfb;
+  .header {
+    display: flex;
+  }
+  
+  .inputnameorphone {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    height: 72upx;
+    background-color: #f7f7f7;
+    margin-left: 15upx;
+    padding-left: 23upx;
+    border-radius: 8upx;
+    .more {
+      display: flex;
+      position: relative;
+      justify-content: space-between;
+      align-items: center;
+      // width: 95upx;
+      height: 72upx;
+      .bar {
+        position: absolute;
+        left: -39upx;
+        top: 80upx;
+        padding: 0 10upx;
+        background-color: #fff;
+        .trigon {
+          position: absolute;
+          top: -16upx;
+          left: 60upx;
+          width: 38upx;
+          height: 38upx;
+          transform: rotate(45deg);
+          background-color: #fff;
+        }
+        .item {
+          width: 180upx;
+          border-bottom: 1px solid #e0e0e0;
+          padding: 30upx 0;
+          text-align: center;
+          color: #333;
+        }
+      }
+      .txt {
+        color: #8f8f8f;
+      }
+      .downicon {
+        width: 18upx;
+        height: 12upx;
+        margin-left: 10upx;
+      }
+    }
+    .usermsg {
+      flex: 1;
+      margin-left: 15upx;
+    }
+    .searchicon {
+      width: 38upx;
+      height: 38upx;
+      margin: 0 30upx;
+    }
+  }
+  .header-btns {
+    width: 110upx;
+    display: flex;
+    align-items: center;
+    margin-left: 15upx;
+    .add,
+    .ref {
+      width: 50upx;
+      height: 50upx;
+    }
+    .ref{
+      margin-left: 12upx;
+    }
+  }
+}
 .usermenage {
   padding: 24upx 32upx 0;
   .content {
     background-color: #f1f1f1;
     .item {
       padding: 24upx 24upx 0;
-      background-color: #fff;
+      background-color: #fbfbfb;
       border-radius: 8upx;
       .top {
         border-bottom: 1px solid #e7e7e7;
@@ -81,7 +210,7 @@ export default {
             height: 32upx;
             color: #7a7c7c;
             text-align: justify;
-            &::after{
+            &::after {
               width: 100%;
               display: inline-block;
               content: '';
@@ -100,7 +229,6 @@ export default {
         padding: 17upx 0;
         .btns {
           display: flex;
-          // justify-content: flex-end;
           .btn {
             width: 158upx;
             height: 58upx;
@@ -113,11 +241,42 @@ export default {
             margin-left: 24upx;
           }
           .more {
+            position: relative;
             width: auto;
             border: none;
             margin-left: 0;
             display: flex;
             align-items: center;
+            .bar {
+              position: absolute;
+              top: 77upx;
+              left: 0;
+              width: 220upx;
+              background-color: #fff;
+              border-radius: 6upx;
+              z-index: 10;
+              padding: 0 20upx;
+              .trigon {
+                position: absolute;
+                top: -16upx;
+                left: 10upx;
+                width: 38upx;
+                height: 38upx;
+                transform: rotate(45deg);
+                background-color: #fff;
+              }
+              .item {
+                padding: 17upx 0;
+                color: #333;
+                border-bottom: 1px solid #e0e0e0;
+                text-align: left;
+                background-color: #fff;
+                border-radius: 0;
+                &:last-child {
+                  border: none;
+                }
+              }
+            }
           }
           .edit {
             margin-left: 40upx;