账号编辑，模糊查询，账号列表优化

src/pages/index/userinfo/adduser.vue

@@ -30,13 +30,26 @@
         <view class="title">手机号</view>
         <input class="msg" type="text" v-model="userInfo.phone" placeholder="请输入手机号" placeholder-style="color:#e8e8e8"/>
       </view>
-      <view class="item">
-        <view class="title">密码</view>
-        <input class="msg"  v-model="passwordone" type="password" placeholder="请输入密码" placeholder-style="color:#e8e8e8"/>
+
+      <view v-if="userdata">
+        <view class="item">
+          <view class="title">密码</view>
+          <input class="msg" id="password"  v-model="passwordone" type="password" placeholder="默认不修改密码" placeholder-style="color:#e8e8e8"/>
+        </view>
+        <view class="item">
+          <view class="title">确认密码</view>
+          <input class="msg" id="password" v-model="passwordtwo" type="password" placeholder="默认不修改密码" placeholder-style="color:#e8e8e8"/>
+        </view>
       </view>
-      <view class="item">
-        <view class="title">确认密码</view>
-        <input class="msg" v-model="passwordtwo" type="password" placeholder="再次输入密码" placeholder-style="color:#e8e8e8"/>
+      <view v-if="!userdata">
+        <view class="item">
+          <view class="title">密码</view>
+          <input class="msg" id="password"  v-model="passwordone" type="password" placeholder="请输入密码" placeholder-style="color:#e8e8e8"/>
+        </view>
+        <view class="item">
+          <view class="title">确认密码</view>
+          <input class="msg" id="password" v-model="passwordtwo" type="password" placeholder="再次输入密码" placeholder-style="color:#e8e8e8"/>
+        </view>
       </view>
       
     </view>
@@ -75,14 +88,33 @@ export default {
         status: '', // 状态
         id: '',
         mid: uni.getStorageSync('scenicMessage').id, 
-      }
+      },
+      namePrefix: uni.getStorageSync('scenicMessage').account + '-',
+
+      // 编辑
+      userdata: null
     };
   },
   onLoad(option) {
-    console.log(option);
+    // this.userdata = JSON.parse(option.userdata)
+    if (JSON.parse(option.userdata).id) {
+      this.userdata = JSON.parse(option.userdata)
+      this.userdata.account =  this.userdata.account.substring(this.namePrefix.length)
+      this.userdata.password = ''
+      this.userInfo = this.userdata
+      console.log(this.userInfo);
+    }
   },
   onShow () {
-    this.getRoleList()
+    this.getRoleList().then( ()=>{
+      if (this.userInfo.id) {
+        this.userArray.forEach((item,index) => {
+          if (item.name === this.userInfo.roleName) {
+            this.userIndex = index
+          }
+        });
+      }
+    })
   },
   //方法集合
   methods: {
@@ -109,14 +141,17 @@ export default {
     // 提交表单
     submitUserInfo () {
       this.verify().then( userInfo =>{
-          this.loading = true
-        userInfo.account = uni.getStorageSync('scenicMessage').account + '-' +this.userInfo.account
-        
-        console.log(userInfo);
+        this.loading = true
+        // 账号添加景区前缀
+        userInfo.account = this.namePrefix +this.userInfo.account
         this.$http.post('/user/save',userInfo).then( res=>{
           console.log(res);
           if (res.code === 200 && res.msg === 'OK') {
-            this.$mHelper.toast('添加成功')
+            if (this.userdata) {
+              this.$mHelper.toast('修改成功')
+            } else {
+              this.$mHelper.toast('添加成功')
+            }
             this.loading = false
             setTimeout(() => {
               this.$mRouter.back()
@@ -128,6 +163,7 @@ export default {
     },
     // 表单验证规则
     verify () {
+      console.log(this.userInfo);
       return new Promise((resolve,reject) =>{
         // 验证
         if ( !this.userInfo.account || !this.userInfo.name || !this.userInfo.roleId || !this.userInfo.phone ) {
@@ -149,14 +185,60 @@ export default {
             }
           }
         }
-        if (this.passwordone === this.passwordtwo && this.passwordone && this.passwordtwo) {
-          this.userInfo.password = this.passwordtwo
+        // 账号验证
+        if (this.userInfo.account) {
+          let pattern = /^[a-zA-Z][a-zA-Z0-9_]{4,}$/
+          if ( !pattern.test(this.userInfo.account)) {
+            this.$mHelper.toast('请输入5位以上，以字母开头，可含数字、字母、下划线的账号！')
+            return
+          }
+        }
+        // 手机号验证
+        if (this.userInfo.phone) {
+          let pattern =  /^1[3|4|5|7|8][0-9]\d{8}$/
+          if (!pattern.test(this.userInfo.phone)) {
+            this.$mHelper.toast('请输入正确的手机号')
+            return
+          }
+        }
+
+        // 密码验证
+        if ( this.userdata) {
+          // 编辑
+          console.log('编辑');
+          if (this.passwordone === this.passwordtwo) {
+            this.userInfo.password = this.passwordtwo
+            if (this.userInfo.password) {  // 判断用户是否修改密码
+              let pattern =  /^[a-zA-Z0-9_]{6,}$/
+              if ( !pattern.test(this.userInfo.password)) {
+                this.$mHelper.toast('请输入6位以上，可含字母、数字、下划线的密码！')
+                return
+              }
+            }
+          } else {
+            this.passwordone = ''
+            this.passwordtwo = ''
+            this.$mHelper.toast('两次密码不一致，请重新输入')
+            return
+          }
         } else {
-          this.passwordone = ''
-          this.passwordtwo = ''
-          this.$mHelper.toast('两次密码不一致，请重新输入')
-          return
+          // 新增
+          console.log('新增');
+          if (this.passwordone === this.passwordtwo && this.passwordtwo && this.passwordone ) {
+            this.userInfo.password = this.passwordtwo
+            let pattern =  /^[a-zA-Z0-9_]{6,}$/
+            if ( !pattern.test(this.userInfo.password)) {
+              this.$mHelper.toast('请输入6位以上，可含字母、数字、下划线的密码！')
+              return
+            }
+          } else {
+            this.passwordone = ''
+            this.passwordtwo = ''
+            this.$mHelper.toast('两次密码不一致，请重新输入')
+            return
+          }
         }
+        
 
         resolve(this.userInfo)
       })

src/pages/index/userinfo/usermenage.vue

@@ -5,22 +5,12 @@
 
       <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>
+          <input class="usermsg" type="text" v-model="nameOrPhone" placeholder="请输入用户昵称或手机号" placeholder-style="font-size:12px"/>
+          <image class="searchicon" @tap='searchUser' 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>
+          <image class="ref" @tap="refresh" src="../../../static/images/reficon.png"></image>
         </view>
       </view>
 
@@ -46,24 +36,26 @@
           </view>
           <view class="bottom">
             <view class="btns">
-              <view class="btn more">
+              <!-- <view class="btn more">
                 <view class="txt" @tap.stop="showMore(index)">更多</view>
                 <view class="bar" v-if="index === code">
                   <view class="trigon"></view>
                   <view class="item" @tap.stop="freeze(item.id,item.name,item.status,index)">{{ item.status === '0' ? '禁用' : '启用' }}</view>
                   <view class="item" @tap.stop='dele(item.id,item.name,index)'>删除</view>
                 </view>
-              </view>
-              <view class="btn edit" @tap.stop="add(item.id)">编辑</view>
-              <view class="btn change">修改密码</view>
-              <view class="btn reds">重置密码</view>
+              </view> -->
+              <view class="btn" @tap.stop="freeze(item.id,item.name,item.status,index)">{{ item.status === '0' ? '禁用' : '启用' }}</view>
+              <view class="btn edit" @tap.stop="add(item)">编辑</view>
+              <view class="btn reds" @tap.stop='dele(item.id,item.name,index)'>删除</view>
+              <!-- <view class="btn change">修改密码</view>
+              <view class="btn reds">重置密码</view> -->
             </view>
           </view>
         </view>
       </view>
 
       <uni-load-more :status="more"> </uni-load-more>
-		  <rf-loading v-if="loading"></rf-loading>
+		  <rf-loading v-if="loading" :content="txt"></rf-loading>
     </view>
   </view>
 </template>
@@ -78,22 +70,18 @@ export default {
     //这里存放数据
     return {
       loading: false,
+      txt: '',
       code: null,
-      showcondition: false,
-      conditionlist:[
-        {name: '全部', code:1},
-        {name: '账号', code:2},
-        {name: '真实姓名', code:3},
-        {name: '手机号', code:4}
-      ],
-      index: 0,
-
+     
+      nameOrPhone:'',
       more: 'loading',
 
       params:{
         pageNum: 1,
         pageSize: 4,
-        mid: uni.getStorageSync('scenicMessage').id
+        mid: uni.getStorageSync('scenicMessage').id,
+        name: '',
+        phone: ''
       },
 
       downStatus: 1,
@@ -109,13 +97,21 @@ export default {
       scrollTop: 0,
       duration: 0
     });
-    this.getUserList()
+    this.getUserList(this.params)
   },
   // 下拉刷新
   onPullDownRefresh () {
     this.more = 'loading'
+    this.nameOrPhone = ''
+    this.params = {
+      pageNum: 1,
+      pageSize: 4,
+      mid: uni.getStorageSync('scenicMessage').id,
+      name: '',
+      phone: ''
+    },
     this.params.pageNum = 1
-    this.getUserList()
+    this.getUserList(this.params)
   },
   // 上拉加载
   onReachBottom() {
@@ -123,19 +119,39 @@ export default {
       if (this.more === 'noMore') {
         return
       }
-      this.getMoreUserList()
+      this.getMoreUserList(this.params)
     }
   },
   //方法集合
   methods: {
-
-    // 打开条件选择
-    showCondition() {
-      this.showcondition = !this.showcondition
+    // 重置
+    refresh () {
+      this.nameOrPhone = ''
     },
-    change (id) {
-      this.index = id
-      this.showcondition = false
+    // 查询
+    searchUser () {
+      if (this.nameOrPhone) {
+        this.loading = true
+        this.txt = '查询中...'
+        let pattern = /^(?:(?:\+|00)86)?1[3-9]\d$/
+        this.params.pageNum = 1
+        if (pattern.test(this.nameOrPhone)) {
+          // 手机号查询
+          console.log(1);
+          this.params.phone = this.nameOrPhone
+          this.params.name = ''
+          this.getUserList(this.params)
+        } else {
+          // 用户昵称查询
+          console.log(2);
+          this.params.phone = ''
+          this.params.name = this.nameOrPhone
+          this.getUserList(this.params)
+        }
+      } else {
+        this.$mHelper.toast('请输入用户昵称或者手机号！')
+      }
+     
     },
     // 打开更多选择
     showMore (num) {
@@ -145,13 +161,13 @@ export default {
       this.code = num 
     },
     // 跳转新增
-    add (id) {
-      this.$mRouter.push({route:'/pages/index/userinfo/adduser',query:{id:id}})
+    add (data) {
+      this.$mRouter.push({route:'/pages/index/userinfo/adduser',query:{userdata:JSON.stringify(data)}})
     },
     // 账户列表
-    async getUserList () {
+    async getUserList (data) {
       this.downStatus = 1
-      await this.$http.get('/user/userList',this.params).then(res=>{
+      await this.$http.get('/user/userList',data).then(res=>{
         if (res.code === 200 && res.msg==='OK') {
           if (res.data.list.length > 0) {
             this.list = res.data.list
@@ -161,14 +177,15 @@ export default {
           } else {
             this.more = 'noMore'
           }
+          this.loading = false
           uni.stopPullDownRefresh();
         }
       })
     },
     // 上拉加载
-    async getMoreUserList () {
+    async getMoreUserList (data) {
       this.params.pageNum ++
-      await this.$http.get('/user/userList',this.params).then( res=> {
+      await this.$http.get('/user/userList',data).then( res=> {
         if (res.data.list.length > 0) {
           this.list = this.list.concat(res.data.list)
           if (res.data.nextPage === 0) {
@@ -255,46 +272,6 @@ export default {
     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;
@@ -366,6 +343,7 @@ export default {
         padding: 17upx 0;
         .btns {
           display: flex;
+          justify-content: flex-end;
           .btn {
             width: 158upx;
             height: 58upx;