| | |
| | | <template> |
| | | <view> |
| | | <view class="box" v-for="item in 10"> |
| | | <view class="box-left"> |
| | | <text class="text"> 搴撳尯 </text> |
| | | </view> |
| | | <view class="box-right"> |
| | | <text class="text"> {{item}} </text> |
| | | <view class="container" v-for="(item,i) in tree" :key="i"> |
| | | <view :class="item.key"> |
| | | <view class="title" @click="switchbtn(item)"> |
| | | <view>{{item.title}}</view> |
| | | <view > |
| | | <uni-icons type="top" v-show="item.switch"></uni-icons> |
| | | <uni-icons type="bottom" v-show="!item.switch"></uni-icons> |
| | | </view> |
| | | </view> |
| | | <view class="name" v-show="item.key == 'user_id'" @click="back()"> |
| | | <view>{{item.title}}</view> |
| | | </view> |
| | | <view class="sub1" v-for="sub in item.children" style="margin-left: 1em;" v-show="item.switch"> |
| | | <view :class="sub.key" class="title sub-title" @click="switchbtn(sub)"> |
| | | <view>{{sub.title}}</view> |
| | | <view> |
| | | <uni-icons type="top" v-show="sub.switch"></uni-icons> |
| | | <uni-icons type="bottom" v-show="!sub.switch"></uni-icons> |
| | | </view> |
| | | </view> |
| | | |
| | | <view :class="sub.key" class="name" v-show="sub.key == 'user_id'" @click="back()"> |
| | | <view>{{sub.title}}</view> |
| | | </view> |
| | | |
| | | <view class="sub2" v-for="it in sub.children" style="margin-left: 1em;" v-show="sub.switch"> |
| | | <view :class="it.key" class="title sub-title" >{{it.title}}</view> |
| | | <view :class="it.key" class="name" v-show="it.key == 'user_id'" @click="back()"> |
| | | <view>{{it.title}}</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | |
| | | tree: [] |
| | | } |
| | | }, |
| | | onShow() { |
| | | this.baseUrl = uni.getStorageSync('baseUrl'); |
| | | this.token = uni.getStorageSync('token'); |
| | | this.getNodeTree() |
| | | }, |
| | | methods: { |
| | | |
| | | getNodeTree() { |
| | | let _this = this |
| | | uni.request({ |
| | | url: `${_this.baseUrl}/node/tree/auth`, |
| | | header: {'token': uni.getStorageSync('token')}, |
| | | method: 'POST', |
| | | success(res) { |
| | | this.tree = [] |
| | | res = res.data |
| | | // console.log(res.data[0].children); |
| | | if (res.data[0].children[0]) { |
| | | for (let k of res.data[0].children) { |
| | | console.log(k); |
| | | if (k.children && k.children.length > 0) { |
| | | for (let i of k.children) { |
| | | i['switch'] = true |
| | | console.log(i); |
| | | } |
| | | } |
| | | // console.log(k); |
| | | k['switch'] = true |
| | | _this.tree.push(k) |
| | | } |
| | | console.log(_this.tree); |
| | | } else { |
| | | this.tree.push(res.data[0]) |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | async getUserTree() { |
| | | let res = await user.getUserTree() |
| | | if (res.code === 200) { |
| | | this.tree = [] |
| | | console.log(res.data[0]); |
| | | if (res.data[0].children) { |
| | | for (let k of res.data[0].children) { |
| | | |
| | | if (k.children && k.children.length > 0) { |
| | | for (let i of k.children) { |
| | | i['switch'] = true |
| | | console.log(i); |
| | | } |
| | | } |
| | | // console.log(k); |
| | | k['switch'] = true |
| | | this.tree.push(k) |
| | | } |
| | | } else { |
| | | this.tree.push(res.data[0]) |
| | | } |
| | | } else if (res.code === 403) { |
| | | this.backLogin(res) |
| | | } |
| | | console.log(this.tree); |
| | | }, |
| | | switchbtn(item) { |
| | | console.log(item); |
| | | item.switch = item.switch ? false : true |
| | | }, |
| | | open(e) { |
| | | // console.log('open', e) |
| | | }, |
| | | close(e) { |
| | | // console.log('close', e) |
| | | }, |
| | | change(e) { |
| | | // console.log('change', e) |
| | | }, |
| | | backLogin(res) { |
| | | uni.showToast({title: res.msg, icon: "none", position: 'top'}) |
| | | setTimeout(() => { |
| | | uni.reLaunch({ |
| | | url: '../login/login' |
| | | }); |
| | | }, 1000); |
| | | }, |
| | | back() { |
| | | uni.$emit('isRefresh', 1) |
| | | uni.navigateBack({ |
| | | |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | .box { |
| | | margin: 16rpx; |
| | | display: flex; |
| | | align-items: stretch; |
| | | |
| | | .container { |
| | | margin: 16rpx; |
| | | min-height: 35rpx; |
| | | background-color: #FFF; |
| | | padding: 16rpx; |
| | | } |
| | | .box-left { |
| | | height: 80rpx; |
| | | line-height: 80rpx; |
| | | background-color: #499bff; |
| | | background-color: #26edcf; |
| | | color: #F7F6F9; |
| | | .box1 { |
| | | background-color: aqua; |
| | | } |
| | | .box-right { |
| | | flex: 1; |
| | | .title { |
| | | box-shadow: -3px 0px 0px #55aaff; |
| | | padding-left: 5px; |
| | | font-size: 15px; |
| | | font-weight: 700; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | background-color: #fff; |
| | | color: #808080; |
| | | } |
| | | .text { |
| | | padding: 10rpx 20rpx; |
| | | .sub-title { |
| | | margin: 32rpx 0; |
| | | box-shadow: -3px 0px 0px #55aa7f; |
| | | } |
| | | </style> |
| | | .name { |
| | | padding: 16rpx; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | |
| | | </style> |