|  |  |  | 
|---|
|  |  |  | border-radius: 12upx; | 
|---|
|  |  |  | width: 36%; | 
|---|
|  |  |  | margin: 0 2.5% 40upx; | 
|---|
|  |  |  | background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); | 
|---|
|  |  |  | /* background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); */ | 
|---|
|  |  |  | background-size: cover; | 
|---|
|  |  |  | background-position: center; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | 
|---|
|  |  |  | <view> | 
|---|
|  |  |  | <scroll-view scroll-y class="page"> | 
|---|
|  |  |  | <view class="nav-list"> | 
|---|
|  |  |  | <navigator hover-class='none' :url="'/pages' + item.url" class="nav-li" navigateTo :class="'bg-'+item.color" | 
|---|
|  |  |  | :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index"> | 
|---|
|  |  |  | <navigator hover-class='none' :url="'/pages' + item.url" class="nav-li" navigateTo | 
|---|
|  |  |  | :class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" | 
|---|
|  |  |  | v-for="(item,index) in elements" :key="index"> | 
|---|
|  |  |  | <view class="nav-title">{{item.title}}</view> | 
|---|
|  |  |  | <view class="nav-name">{{item.name}}</view> | 
|---|
|  |  |  | <text :class="'cuIcon-' + item.cuIcon"></text> | 
|---|
|  |  |  | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | elements: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | baseUrl: '', | 
|---|
|  |  |  | token: '', | 
|---|
|  |  |  | elements: [], | 
|---|
|  |  |  | elements2: [{ | 
|---|
|  |  |  | title: '组托入库', | 
|---|
|  |  |  | name: 'pakin', | 
|---|
|  |  |  | color: 'cyan', | 
|---|
|  |  |  | 
|---|
|  |  |  | cuIcon: 'exit', | 
|---|
|  |  |  | url: '/login/logOut' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | colorList: ['cyan','blue','mauve','pink','brown','red','orange','yellow','olive','olive','green','grey' ] | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | onShow() { | 
|---|
|  |  |  | this.baseUrl = uni.getStorageSync('baseUrl'); | 
|---|
|  |  |  | this.token = uni.getStorageSync('token'); | 
|---|
|  |  |  | this.getAuth() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | getAuth() { | 
|---|
|  |  |  | let that = this | 
|---|
|  |  |  | uni.request({ | 
|---|
|  |  |  | url: that.baseUrl + '/menu/pda/auth', | 
|---|
|  |  |  | data: {}, | 
|---|
|  |  |  | header: { 'token': uni.getStorageSync('token') }, | 
|---|
|  |  |  | method: 'POST', | 
|---|
|  |  |  | success(res) { | 
|---|
|  |  |  | res = res.data | 
|---|
|  |  |  | that.elements = [] | 
|---|
|  |  |  | if (res.code === 200) { | 
|---|
|  |  |  | if (res.data == undefined || res.data == null || res.data == "") { | 
|---|
|  |  |  | that.elements = that.elements2 | 
|---|
|  |  |  | return | 
|---|
|  |  |  | } | 
|---|
|  |  |  | for (var i = 0; i < res.data.length; i++) { | 
|---|
|  |  |  | if (res.data.length < 0) { | 
|---|
|  |  |  | break; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | that.elements.unshift({ | 
|---|
|  |  |  | title: res.data[i].name, | 
|---|
|  |  |  | name: res.data[i].title, | 
|---|
|  |  |  | color: that.colorList[i], | 
|---|
|  |  |  | cuIcon: 'safe', | 
|---|
|  |  |  | url: res.data[i].action | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | that.elements.push({ | 
|---|
|  |  |  | title: '退出登录', | 
|---|
|  |  |  | name: 'logOut', | 
|---|
|  |  |  | color: 'grey', | 
|---|
|  |  |  | cuIcon: 'exit' | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } else if (res.code === 403) { | 
|---|
|  |  |  | uni.showToast({ | 
|---|
|  |  |  | title: res.msg, | 
|---|
|  |  |  | icon: "none", | 
|---|
|  |  |  | position: 'top' | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | setTimeout(() => { | 
|---|
|  |  |  | uni.reLaunch({ | 
|---|
|  |  |  | url: '../login/login' | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, 1000); | 
|---|
|  |  |  | } else if(res.status === 404) { | 
|---|
|  |  |  | uni.showToast({ | 
|---|
|  |  |  | title: '404', | 
|---|
|  |  |  | icon: "none", | 
|---|
|  |  |  | position: 'top' | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | uni.showToast({ | 
|---|
|  |  |  | title: res.msg, | 
|---|
|  |  |  | icon: "none", | 
|---|
|  |  |  | position: 'top' | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | fail(err) { | 
|---|
|  |  |  | console.log(err); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | 
|---|
|  |  |  | .page { | 
|---|
|  |  |  | height: 100vh; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-red { | 
|---|
|  |  |  | background-color: #e54d42; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-orange { | 
|---|
|  |  |  | background-color: #f37b1d; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-yellow { | 
|---|
|  |  |  | background-color: #fbbd08; | 
|---|
|  |  |  | color: #333333; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-olive { | 
|---|
|  |  |  | background-color: #8dc63f; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-green { | 
|---|
|  |  |  | background-color: #39b54a; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-cyan { | 
|---|
|  |  |  | background-color: #1cbbb4; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-blue { | 
|---|
|  |  |  | background-color: #0081ff; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-purple { | 
|---|
|  |  |  | background-color: #6739b6; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-mauve { | 
|---|
|  |  |  | background-color: #9c26b0; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-pink { | 
|---|
|  |  |  | background-color: #e03997; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-brown { | 
|---|
|  |  |  | background-color: #a5673f; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-grey { | 
|---|
|  |  |  | background-color: #8799a3; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-gray { | 
|---|
|  |  |  | background-color: #f0f0f0; | 
|---|
|  |  |  | color: #333333; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-black { | 
|---|
|  |  |  | background-color: #333333; | 
|---|
|  |  |  | color: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .bg-white { | 
|---|
|  |  |  | background-color: #ffffff; | 
|---|
|  |  |  | color: #666666; | 
|---|