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="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="18"></uni-icons>
								</view>
								<view class="wall">
									<view class="name">{{optionItme.name}}</view>
									<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">
							<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' : '#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(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>