Bladeren bron

uni-app组件chechked-box,插件bug,嵌套使用点击穿透,首页信息更换,权限bug

ltx529596 4 jaren geleden
bovenliggende
commit
34691bacdd

+ 1 - 0
src/components/tabbar/tabbar.vue

@@ -69,6 +69,7 @@ export default {
   .content {
     display: flex;
     align-items: center;
+    justify-content: center;
     height: 100%;
     .tabbar-warp {
       width: 33%;

+ 2 - 2
src/config/index.config.js

@@ -2,8 +2,8 @@ const CONFIG = {
     //开发环境配置
     development: {
         assetsPath: '/static', // 静态资源路径
-        baseUrl: 'http://tyou.xiudo.cn/merch',  // 后台接口请求地址
-        // baseUrl: 'http://192.168.100.135:83/merch',  // 后台接口请求地址
+        // baseUrl: 'http://tyou.xiudo.cn/merch',  // 后台接口请求地址
+        baseUrl: 'http://192.168.100.135:83/merch',  // 后台接口请求地址
         hostUrl: 'http://localhost:8080',        // H5地址(前端运行地址)
         websocketUrl: '',        // websocket服务端地址
         weixinAppId: '', // 微信公众号appid

+ 162 - 50
src/pages/components/mask.vue

@@ -16,33 +16,59 @@
           <view class="message">
             <view class="radiolist">
 
-              <view class="uni-list father-list">
+              <view class="checked-box-warp">
+                <view class="father-warp">
+                  <view class="father-item" v-for="fatheritem in list" :key='fatheritem.menuId'>
+
+                    <view class="fatherbar" @tap.stop='chechedFather(fatheritem.menuId)'>
+                      <view class="icon active" v-if="hasList.includes(fatheritem.menuId)"></view>
+                      <view class="icon" v-else></view>
+                      <view class="title">{{ fatheritem.name }}</view>
+                    </view>
+
+                    <view class="son-warp">
+                      <view class="son-item" v-for="sonitem in fatheritem.children" :key="sonitem.menuId">
+                        <view class="sonerbar" @tap.stop='chechedSon(sonitem.menuId)'>
+                          <view class="icon active" v-if="hasList.includes(sonitem.menuId)"></view>
+                          <view class="icon" v-else></view>
+                          <view class="title">{{ sonitem.name }}</view>
+                        </view>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+               
+              <!-- <view class="uni-list father-list">
+
                 <checkbox-group @change="fatherChange">
                   <label class="uni-list-cell uni-list-cell-pd checked-bar" v-for="fatheritem in list" :key="fatheritem.menuId">
                     <view class="main-checked-list">
-                      <checkbox :value="fatheritem.value" :checked="item.checked"/>
+                      <checkbox :value="fatheritem.menuId" :checked="hasList.includes(fatheritem.menuId)"/>
                       <view class="title">{{ fatheritem.name }}</view>
                     </view>
-                    <!-- 子权限 -->
-                    <view class="childemenu">
-                      <view class="uni-list son-list">
-                        <checkbox-group @change="sonChange" class="son-checked-warp">
-                          <label class="uni-list-cell uni-list-cell-pd son-bar" v-for="sonitem in fatheritem.children" :key="sonitem.value">
-                            <view class="son-checked-list">
-                              <checkbox style="transform:scale(0.7)" :value="sonitem.value" :checked="item.checked"/>
-                              <view class="son-title">{{sonitem.name}}</view>
-                            </view>
-                          </label>
-                        </checkbox-group>
+
+                      <view class="childemenu">
+                        <view class="uni-list son-list">
+                          <checkbox-group @change="sonChange" class="son-checked-warp">
+                            <label class="uni-list-cell uni-list-cell-pd son-bar" v-for="sonitem in fatheritem.children" :key="sonitem.value">
+                              <view class="son-checked-list">
+                                <checkbox style="transform:scale(0.7)" :value="sonitem.menuId" :checked="hasList.includes(sonitem.menuId)"/>
+                                <view class="son-title">{{sonitem.name}}</view>
+                              </view>
+                            </label>
+                          </checkbox-group>
+                        </view>
                       </view>
-                    </view>
 
                     <image v-if="!item.checked && item.children" class="moreicon" src="../../static/images/moreicon.png"></image>
                     <image v-if="item.checked && item.children" class="downicon"  src="../../static/images/downmoreicon.png"></image>
                   </label>
                 </checkbox-group>
-              </view>
-              
+                
+                
+              </view> -->
+             
             </view>
           </view>
           <view class="sure">
@@ -71,7 +97,9 @@ export default {
   data () {
     //这里存放数据
     return {
-      roleArray: []
+      roleArray: [],
+      fatherIndex: -1,
+      sonIndex: -1
     }
   },
   //方法集合
@@ -82,42 +110,64 @@ export default {
     closeMask () {
       this.$emit('isSureConver', false)
     },
-
-    // 显示已经拥有权限
-
-
-    // 父级权限选择
-    fatherChange (e) {
-      console.log(this.hasList);
-
-      console.log(e);
-      let items = this.list
-      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)
+    getArrayIndex(arr, obj) {
+      let i = arr.length;
+      while (i--) {
+        if (arr[i] === obj) {
+          return i;
         }
       }
-      console.log(this.list);
+      return -1;
     },
-
-    // 子集权限选择
-    sonChange (e) {
-      console.log(e);
-      let items = this.list,
-      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)
+    chechedFather (num) {
+      this.roleDeal(this.hasList,num)
+    },
+    chechedSon (num) {
+     this.roleDeal(this.hasList,num)
+    },
+    // 权限操作
+    roleDeal (arr,value) {
+      if (arr.includes(value)) {
+        let index = arr.length
+        while (index --) {
+          // 得到下标后删除
+          if (this.hasList[index] === value) return this.hasList.splice(index,1)
         }
+      } else {
+        arr.push(value)
       }
     }
+
+    // 父级权限选择
+    // fatherChange (e) {
+    //   debugger
+    //   console.log(e);
+    //   let items = this.list
+    //   for (let i = 0; i < items.length; ++i) {
+    //     const element = items[i]
+    //     if (e.detail.value.includes(element.menuId)) { 
+    //       this.$set(element, 'checked', true)
+    //     } else {
+    //       this.$set(element, 'checked', false)
+    //     }
+    //   }
+
+    // },
+
+    // // 子集权限选择
+    // sonChange (e) {
+    //   console.log(e);
+    //   let items = this.list
+    //   for (let i = 0; i < items.length; ++i) {
+    //     const element = items[i]
+    //     if (e.detail.value.includes(element.menuId)) {
+    //       this.$set(element, 'checked', true)
+    //     } else {
+    //       this.$set(element, 'checked', false)
+    //     }
+    //   }
+    // }
+
   }
 };
 </script>
@@ -180,16 +230,77 @@ export default {
       border-bottom-left-radius: 20upx;
       border-bottom-right-radius: 20upx;
       .message {
-        padding: 10upx 60upx 0;
+        padding: 10upx 60upx 15upx;
         overflow-y: scroll;
         height: 670upx;
         .radiolist {
-          .father-list {
+          .checked-box-warp {
+            .father-warp {
+              .father-item{
+                display: flex;
+                flex-direction: column;
+                margin-bottom: 40upx;
+                .fatherbar{
+                  display: flex;
+                  align-items: center;
+                  .icon{
+                    width: 38upx;
+                    height: 38upx;
+                    border-radius: 50%;
+                    background: url('../../static/images/checked-box.png') no-repeat center;
+                    background-size: 100%;
+                  }
+                  .active {
+                    background: url('../../static/images/checked-active.png') no-repeat center;
+                    background-size: 100%;
+                  }
+                  .title{
+                    margin-left: 30upx;
+                    color: #444444;
+                    font-size: 30upx;
+                  }
+                }
+                .son-warp {
+                  display: flex;
+                  flex-flow: wrap;
+                  margin-left: 45upx;
+                  .son-item {
+                    margin-top: 34upx;
+                    width: 45%;
+                    &:nth-child(odd){
+                      margin-right: 35upx;
+                    }
+                    .sonerbar{
+                      display: flex;
+                      align-items: center;
+                      .icon{
+                        width: 38upx;
+                        height: 38upx;
+                        border-radius: 50%;
+                        background: url('../../static/images/checked-box.png') no-repeat center;
+                        background-size: 100%;
+                      }
+                      .active {
+                        background: url('../../static/images/checked-active.png') no-repeat center;
+                        background-size: 100%;
+                      }
+                      .title{
+                        margin-left: 30upx;
+                        font-size: 28upx;
+                        color: #666666;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+          /*.father-list {
             .checked-bar {
               display: flex;
               flex-direction: column;
               justify-content: flex-end;
-              padding-top: 45upx;
+              margin-top: 45upx;
               .main-checked-list{
                 display: flex;
                 width: 100%;
@@ -235,6 +346,7 @@ export default {
               }
             }
           }
+          */
         }
       }
       .sure {

+ 24 - 5
src/pages/index/index.vue

@@ -23,10 +23,14 @@
 				<view class="user">
           <!-- #ifdef MP-WEIXIN -->
 					<view class="user-left">
-            <open-data type="userAvatarUrl" class="usericon"></open-data>
+            <!-- <open-data type="userAvatarUrl" class="usericon"></open-data> -->
+              <image class="usericon" src="../../static/missing-face.png" mode="widthFix"></image>
 						<view class="message">
-              <open-data type="userNickName" class="name"></open-data>
+              <!-- <open-data type="userNickName" class="name"></open-data> -->
+							<view class="name">{{ uderName | nameDeal}}</view>
 							<view class="tele"></view>
+              <!-- <open-data type="userNickName" class="name"></open-data>
+							<view class="tele">{{ scenicMessage.name }}</view> -->
 						</view>
 					</view>
           <!-- #endif -->
@@ -306,6 +310,7 @@ export default {
   // },
   data() {
     return {
+      uderName: '',
       // tabbar
       typeNum: 0,
       
@@ -403,16 +408,30 @@ export default {
       value: null,
     },
   },
+  filters:{
+    nameDeal(value) {
+      console.log(value.indexOf('@'));
+      if ( value.indexOf('@') != -1) {
+        console.log('子账号');
+        return value.slice(value.indexOf('@')+1)
+      } else {
+        console.log('景区账号');
+        return value
+      }
+    }
+  },
   onReady(){
+   
+  },
+  onLoad () {
     // 商家信息
     this.$http.get('/getUserInfo').then(async (res) => {
       if (res.data) {
+        this.uderName = res.data.name
         this.$mStore.commit('setScenic',res.data)
       }
     });
   },
-  onLoad () {
-  },
   onShow() {
     this.todayforday = moment().format('YYYY-MM-DD HH:mm:ss')
     _self = this;
@@ -428,7 +447,7 @@ export default {
       this.todayforday = moment().format('YYYY-MM-DD HH:mm:ss')
       this.loading = false;
       this.getShopList();
-      this.$mHelper.toast(`自动更新数据${moment().format('h:mm:ss')}`);
+      // this.$mHelper.toast(`自动更新数据${moment().format('h:mm:ss')}`);
     }, 1000 * 60 * 5);
   },
   onHide() {

+ 1 - 0
src/pages/index/setting/setting.vue

@@ -69,6 +69,7 @@ export default {
 				this.$mHelper.toast('退出成功')
 				uni.removeStorageSync('user')
 				uni.removeStorageSync('role')
+				uni.removeStorageSync('scenicMessage')
 				this.$mRouter.reLaunch({route: '/pages/public/login'})
 			});
 		}

+ 19 - 3
src/pages/index/userinfo/rolemenage.vue

@@ -1,6 +1,13 @@
 <!-- 角色管理 -->
 <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">
@@ -38,9 +45,8 @@ export default {
   onShow () {
     this.getRoleList()
   },
-   onLoad () {
-     t
-   },
+  onLoad () {
+  },
   //方法集合
   methods: {
     // 跳转编辑
@@ -63,6 +69,16 @@ export default {
 <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{

+ 1 - 1
src/static/css/uni.scss

@@ -128,7 +128,7 @@
 }
 .uni-list-cell-pd {
   // padding: 22upx 0upx;
-  padding-top: 22upx;
+  margin-top: 22upx;
 }
 
 .uni-checkbox-input-checked {

BIN
src/static/images/checked-active.png


BIN
src/static/images/checked-box.png


+ 0 - 1
src/store/index.js

@@ -79,7 +79,6 @@ const store = new Vuex.Store({
         setScenic (state,data) {
             state.scenic = data
             uni.setStorageSync('scenicMessage',data)
-            // uni.setStorageSync('scenicId',data.id)
         },
         login(state, provider) {