273 lines
8.5 KiB
Vue
273 lines
8.5 KiB
Vue
<template>
|
||
<view class="home_page_container">
|
||
<!-- <view :style="{paddingTop:styles.top+styles.height + 'px'}" class="home_page_header">
|
||
<view class="home_page_header_title">
|
||
{{user.name?`Hi ,${user.name}` : user.userPhone?user.userPhone:'暂未设置'}}
|
||
<uni-icons @tap.stop='close()' class="iconclass" color="#ffffff" custom-prefix="iconfont"
|
||
type="iconkaiguan" size="35">
|
||
</uni-icons>
|
||
</view>
|
||
<view class="home_page_header_identity">{{user.roles[0].roleName}}</view>
|
||
</view> -->
|
||
|
||
<!-- <view :style="{transform:`rotate(${180}deg)`}" class="home_page_menu">
|
||
<view class="home_page_menu_name">
|
||
{{menuList[menuIndex].name?menuList[menuIndex].name:''}}
|
||
</view>
|
||
<view class="bgtracking"></view>
|
||
<view class="bj"></view>
|
||
<view :style="{transform:`rotate(${trackingPosition.angle}deg)`}" @click="gestureAnalysis"
|
||
class="home_page_menu_circular">
|
||
<view @click="menuClick(index)" class="home_page_menu_item" v-for="(item,index) in menuList"
|
||
:style="{left:item.x,top:item.y,transform:`rotate(${180+trackingPosition.fangle}deg)`}">
|
||
<uni-icons class="menu_icon" :style="{transform:`scale(${menuIndex==index?1.2:1})`}"
|
||
:color="item.colorOpen? '#2866FF': '#ffffff'" custom-prefix="iconfont" :type="item.icon"
|
||
size="25"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view :style="{transform:`translateY(${Submenu?0:-433}rpx)`}" class="Submenu">
|
||
<view @tap.stop="jump(item)" v-if="user.authList.includes(item.lable)"
|
||
v-for="(item,index) in menuList[menuIndex].submenu" class="Submenu_item">
|
||
<view @tap.stop="collectionFn(item)" class="label">
|
||
<uni-icons :color=" iconFn(item) " custom-prefix="iconfont" type="iconshoucang-yishoucang"
|
||
size="30"></uni-icons>
|
||
</view>
|
||
<view class="Submenu_item_name">{{item.name}}</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
|
||
<view class="header">
|
||
<view class="info-frame">
|
||
<image src="../../static/tx.png"></image>
|
||
<view>{{user.userPhone || '暂未设置'}}</view>
|
||
<view>{{user.name ||'暂未设置'}}</view>
|
||
<!-- <view>{{user.roles[0].roleName}}</view> -->
|
||
<uni-icons @tap.stop='close()' class="iconclass" color="#bbb" custom-prefix="iconfont"
|
||
type="iconkaiguan" size="35">
|
||
</uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="domain">
|
||
<template v-for="item,index in menuList">
|
||
<view class="item" v-if="isHaveAuth(item.submenu)" :key="index">
|
||
<view class="title">{{item.name}}</view>
|
||
<view class="options-frame" >
|
||
<template v-for="optionItme,optionIndex in item.submenu">
|
||
<view class="option" v-if="user.authList.includes(optionItme.lable)" :key="optionIndex" @tap.stop="jump(optionItme)">
|
||
<view class="star" @tap.stop="collectionFn(optionItme)">
|
||
<uni-icons :color="iconFn(optionItme)" custom-prefix="iconfont" type="iconshoucang-yishoucang" size="14"></uni-icons>
|
||
</view>
|
||
<view class="wall">
|
||
<view class="name">{{optionItme.name}}</view>
|
||
<image style="width: 100rpx;height: 100rpx;" :src="optionItme.image"></image>
|
||
<!-- <uni-icons color="#fff" custom-prefix="iconfont" :type="optionItme.icon" size="50"></uni-icons> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
|
||
|
||
<view class="collection">
|
||
<view class="collect-frame">
|
||
<template v-for="(item,index) in collection">
|
||
<view v-if="item" @tap.stop="jump(item)" class="collection_item">
|
||
<view @tap.stop="remove(item)" class="tip">
|
||
<uni-icons custom-prefix="iconfont" color="#fff" type="iconchiping" size="20"></uni-icons>
|
||
</view>
|
||
<view class="collection_item_name">
|
||
<image style="width: 95rpx;height: 95rpx;" :src="item.image"></image>
|
||
<!-- <uni-icons custom-prefix="iconfont" color="#2866FF" :type="item.icon" size="30"></uni-icons> -->
|
||
<view class="collection_item_text">{{item.name}}</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="collection-empty">
|
||
<view>
|
||
<text>点击</text>
|
||
<uni-icons style="margin-left: 10rpx;" color="#bbbbbb" custom-prefix="iconfont"
|
||
type="iconshoucang-yishoucang" size="12"></uni-icons>
|
||
</view>
|
||
<view>收藏</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import menus from './menu'
|
||
import oilIdentityApi from '@/api/oil-identity'
|
||
export default {
|
||
data() {
|
||
return {
|
||
user: null,
|
||
collection: [],
|
||
menuList: [],
|
||
trackingPosition: {
|
||
angle: 0,
|
||
fangle: 0
|
||
},
|
||
Submenu: false,
|
||
menuIndex: 0,
|
||
styles: null,
|
||
mousePosition: 0,
|
||
circle_w: 520, //圆盘的宽
|
||
circle_h: 600, //圆盘的高
|
||
PI: 360, //分布角度，默认为360deg
|
||
stard: 360, //起始角度
|
||
stard_s: null, //用来默认储存第一个初始值
|
||
boxNum: 5, //圆盘上覆盖的小圆点个数
|
||
descTitle: '', //模块描述标题
|
||
descContent: '', //模块描述内容
|
||
activeIndex: 1, //默认下标
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.styles = uni.getMenuButtonBoundingClientRect();
|
||
},
|
||
created() {
|
||
this.initFn();
|
||
},
|
||
watch: {
|
||
menuIndex: (n, o) => {
|
||
|
||
},
|
||
collection: function(n, o) {
|
||
uni.setStorageSync('collection', n);
|
||
}
|
||
},
|
||
methods: {
|
||
isHaveAuth(submenu) {
|
||
return submenu.some(item => this.user.authList.includes(item.lable))
|
||
},
|
||
close() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确认退出登录',
|
||
success: function(res) {
|
||
if (res.confirm) {
|
||
oilIdentityApi.logoutAuthSystem().then(res => {
|
||
uni.redirectTo({
|
||
url: '../login/login?type=1'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
});
|
||
},
|
||
jump(e) {
|
||
if (this.user.authList.includes(e.lable)) {
|
||
uni.navigateTo({
|
||
url: e.router,
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '暂无权限',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
remove(item) {
|
||
let index = this.collection.findIndex(i => i.name === item.name)
|
||
this.$set(this.collection,index,'')
|
||
},
|
||
iconFn(e) {
|
||
return this.collection.filter((item) => e.name == item.name).length == 0 ? '#bbbbbb' : '#0256FF';
|
||
},
|
||
initFn() {
|
||
this.menuList = JSON.parse(JSON.stringify(menus))
|
||
|
||
// this.menuList.forEach((item, index) => {
|
||
// item = Object.assign(item, this.circularPositioning(index));
|
||
// })
|
||
// this.trackingPosition.x = this.menuList[0].x;
|
||
// this.trackingPosition.y = this.menuList[0].y;
|
||
|
||
this.collection = uni.getStorageSync('collection') || ['','',''];
|
||
this.user = uni.getStorageSync('user');
|
||
},
|
||
collectionFn(item) {
|
||
let collectHas3 = this.collection.every(i => i !== '')
|
||
if(collectHas3) {
|
||
uni.showToast({
|
||
title: '只可以收藏3个哦~',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let isHave = this.collection.find(i => i.name === item.name)
|
||
if(isHave) {
|
||
this.remove(item)
|
||
return
|
||
}
|
||
let isHaveEmptyIndex = this.collection.findIndex(i => i === '')
|
||
// 是否有空余的收藏位置
|
||
if(isHaveEmptyIndex !== -1) {
|
||
this.$set(this.collection,isHaveEmptyIndex,item)
|
||
return
|
||
}
|
||
// //如果收藏满了 栈底推出
|
||
// this.collection.pop()
|
||
// //栈顶推入
|
||
// this.collection.unshift(item)
|
||
},
|
||
gestureAnalysis(e) {},
|
||
indexDis(e) {
|
||
let x = this.menuIndex
|
||
let y = e
|
||
console.log(x, y)
|
||
let average = 360 / this.menuList.length;
|
||
let a = x - y;
|
||
let b = this.menuList.length - 1 - (x - y - 1);
|
||
let deg = a > b ? b * average : a * average;
|
||
if (b > a) {
|
||
this.trackingPosition.angle = deg * -1
|
||
} else {
|
||
this.trackingPosition.angle = deg
|
||
}
|
||
console.log(this.trackingPosition.angle)
|
||
|
||
this.menuIndex = null
|
||
setTimeout(() => {
|
||
this.menuIndex = e
|
||
}, 500);
|
||
},
|
||
menuClick(index) {
|
||
this.Submenu = false
|
||
let average = 360 / this.menuList.length;
|
||
this.trackingPosition.angle = index * average;
|
||
this.trackingPosition.fangle = -this.trackingPosition.angle;
|
||
if (this.menuList[this.menuIndex].colorOpen) {
|
||
this.menuList[this.menuIndex].colorOpen = false
|
||
}
|
||
setTimeout(() => {
|
||
this.menuIndex = index
|
||
this.menuList[this.menuIndex].colorOpen = true
|
||
this.Submenu = true
|
||
}, 500);
|
||
},
|
||
circularPositioning(index, position) {
|
||
let avd = this.PI / this.menuList.length //每一个 img-box 对应的角度
|
||
let ahd = (avd * Math.PI) / 180 //每一个 img-box 对应的弧度
|
||
let radius = this.circle_w / 2 //圆的半径
|
||
let x = (Math.sin(ahd * index) * radius) - 30 + 300 + 'rpx'
|
||
let y = (Math.cos(ahd * index) * radius) - 30 + 300 + 'rpx'
|
||
return {
|
||
x,
|
||
y
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./newindex.css");
|
||
</style>
|