wx_oms/pages/index/newindex.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="collection">
			<view @tap.stop="jump(item)" v-for="(item,index) in collection" class="collection_item">
				<view @tap.stop="remove(item)" class="tip">
					<uni-icons custom-prefix="iconfont" color="#ffffff" type="iconchiping" size="20"></uni-icons>
				</view>
				<view class="collection_item_name">
					<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 class="collectionbg">
				<view v-for="(item,index) in 3" class="collection_itembg">
					<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>Here</view> -->
				</view>
			</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) => {

				console.log(n, 'menuIndex')
			},
			collection: function(n, o) {
				uni.setStorageSync('collection', n);
			}
		},
		methods: {
			close() {
				uni.showModal({
					title: '提示',
					content: '确认退出登录',
					success: function(res) {
						if (res.confirm) {
							oilIdentityApi.logoutAuthSystem().then(res => {
								uni.redirectTo({
									url: '../login/login?type=1'
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			jump(e) {
				if (this.user.authList.includes(e.lable)) {
					uni.navigateTo({
						url: e.router,
						fail(e) {
							console.log('失败')
						},
					})
				} else {
					uni.showToast({
						title: '暂无权限',
						icon: 'none'
					})
				}
			},
			remove(e) {
				let indexk;
				this.collection.forEach((item, index) => {
					if (e.name == item.name) {
						indexk = index
					}
				})
				this.collection.splice(indexk, 1);
			},
			iconFn(e) {
				return this.collection.filter((item) => e.name == item.name).length == 0 ? '#bbbbbb' : '#FFB730';
			},
			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(e) {
				console.log(this.collection)
				if (this.collection.length == 0) {
					this.collection.unshift(e)
				} else {
					let repeatTest = this.collection.filter((item) => e.name == item.name).length == 0 ? true : false;
					if (repeatTest) {
						if (this.collection.length >= 3) {
							this.collection.splice(this.collection.length - 1, 1)
						}
						this.collection.unshift(e)
					} else {
						this.remove(e)
						// uni.showToast({
						// 	title:'无需重复添加',
						// 	icon:'none'
						// })
					}
				}
			},
			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) {
				// let newList = []
				// // let arrayList =  this.menuList.length
				// let arrayList =  8
				// let alient = 0
				// if (arrayList % 2 == 0){
				//     alient = Math.floor(arrayList/2)
				// }else{
				// 	alient = Math.floor(arrayList/2)+1
				// }
				// let bbb = 7;
				// index =6;
				// console.log("index:{}alient:{},menuIndex{}arrayList{}",index,alient,bbb,arrayList);
				// // // 计算当前坐标点和目标左边点差值0
				// for(let i = 0; i <= arrayList-1; i++){
				// 	let aaa = bbb;
				// 	if(i<=alient){
				// 		aaa = bbb-(alient-i);
				// 		if(aaa < 0){
				// 			aaa = arrayList-aaa
				// 			console.log("1inde:{},aaa:{}",i,aaa)
				// 		}else{
				// 			console.log("2inde:{},aaa:{}",i,aaa)
				// 		}
				// 	}else{
				// 		aaa = bbb+(i-alient);
				// 		if(aaa >= arrayList){
				// 			aaa = aaa-arrayList
				// 			console.log("3inde:{},aaa:{}",i,aaa)
				// 		}else{
				// 			console.log("4inde:{},aaa:{}",i,aaa)
				// 		}
				// 	}

				// }
				// // NO=8
				this.Submenu = false
				let average = 360 / this.menuList.length;
				this.trackingPosition.angle = index * average;
				this.trackingPosition.fangle = -this.trackingPosition.angle;
				// this.menuIndex = null
				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>