lihaiCenter/pages/center/center.vue

<template>
	<view class="gather">
		<u-empty :show="jurisdiction" mode="permission" :text="emptyText"
			icon="/static/empty/permission.png"></u-empty>
		<view class="business com special_work" v-if="jurisdiction == false">
			<view class="title project">
				<view>我的小程序</view>
				<view v-if="!editFlag" class="edit" @click="editFlag = true">编辑</view>
				<view v-else class="edit" @click="editComfirm">完成</view>
			</view>
			<view class="content">
				<block v-if="nowMenuList.length > 0">
					<u-transition v-for="(item, index) in nowMenuList" :key="item.name" show>
						<view class="examine" @click="
                editFlag ? removeMenu(item) : clickMenu(item.type, item.data)
              ">
							<image class="icon_img" :src="item.icon" mode="aspectFit">
							</image>
							<u-icon v-if="editFlag" class="icon" name="minus-circle-fill" color="red"></u-icon>
							<text class="text">{{ item.name }}</text>
						</view>
					</u-transition>
				</block>
				<view v-else-if="!editFlag" @click="editFlag = true"
					style="text-align: center; width: 100%; color: #aaa">还没有应用,点我添加应用</view>
			</view>
		</view>
		<view v-if="editFlag" class="business com special_work edit_card">
			<view class="title project" style="padding: 0 28rpx">
				<view>编辑功能</view>
				<view class="edit2" @click="editComfirm">完成</view>
			</view>
			<view class="content">
				<u-transition v-for="(item, index) in AllMenuList" :key="item.name" show>
					<view class="examine" @click="pushMenu(item)">
						<image class="icon_img" :src="item.icon" mode="aspectFit"> </image>
						<u-icon class="icon" name="plus-circle-fill"></u-icon>
						<text class="text">{{ item.name }}</text>
					</view>
				</u-transition>
			</view>
		</view>
	</view>
</template>

<script>
	import Cache from '@/utils/cache';
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import {
		getStoreList,
		getUserInfo
	} from '@/api/user.js'
	import {
		Toast
	} from '@/libs/uniApi';
	// #ifdef APP-PLUS
	import uniMP from '@/utils/uniMP.js';
	// #endif

	export default {
		data() {
			return {
				locationArr: ({}),
				emptyText: '暂无可用应用',
				jurisdiction: false, // 是否有权限
				mer_id: '',
				userInfoData: {
					mer_info: {
						type_id: 0
					}
				},
				prefix: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/luzhou/static4/11/',
				isShow: false,
				isFshow: false,
				street: '',
				// 编辑中标记
				editFlag: false,
				// 所有菜单的按钮
				AllMenuList: [{
						name: '商户平台',
						icon: '/static/applet/shop_app.png',
						// data: "__UNI__1EE148C",
            data: {
            	id: '__UNI__1EE148C',
            	url: 'https://worker-task.lihaink.cn/uploads/files/20231028/20231028112512940c18779.wgt',
            },
						// type: 2,
            type: 4,
					},
					{
						name: '供销平台',
						icon: '/static/applet/gx_app.png',
						// data: '__UNI__B5B1EDD',
            data: {
            	id: '__UNI__B5B1EDD',
            	url: 'https://worker-task.lihaink.cn/uploads/files/20231028/202310281122011783f5913.wgt',
            },
						// type: 1,
            type: 4,
					},
					{
						name: '农业咨询',
						icon: '/static/applet/ny.png',
						data: {
							id: '__UNI__9620511',
							url: 'https://ceshi-worker-task.lihaink.cn/api/common/getMiniProgramInfo?name=nongye',
						},
						type: 3,
					},
					{
						name: '教育咨询',
						icon: '/static/applet/jy.png',
						data: {
							id: '__UNI__7AA205C',
							url: 'https://ceshi-worker-task.lihaink.cn/api/common/getMiniProgramInfo?name=jiaoyu',
						},
						type: 3,
					},
					{
						name: '法律咨询',
						icon: '/static/applet/fl.png',
						data: {
							id: '__UNI__358D505',
							url: 'https://ceshi-worker-task.lihaink.cn/api/common/getMiniProgramInfo?name=falv',
						},
						type: 3,
					},
					{
						name: '情感咨询',
						icon: '/static/applet/qg.png',
						data: {
							id: '__UNI__8080F14',
							url: 'https://ceshi-worker-task.lihaink.cn/api/common/getMiniProgramInfo?name=qinggan',
						},
						type: 3,
					},
					{
						name: '种植分析',
						icon: '/static/applet/zz.png',
						data: {
							id: '__UNI__9EDFE40',
							url: 'https://ceshi-worker-task.lihaink.cn/api/common/getMiniProgramInfo?name=zhongzhi',
						},
						type: 3,
					},
					{
						name: '养殖分析',
						icon: '/static/applet/yz.png',
						data: {
							id: '__UNI__EEA7DC9',
							url: 'https://ceshi-worker-task.lihaink.cn/api/common/getMiniProgramInfo?name=yangzhi',
						},
						type: 3,
					},
					{
						name: '农业智能感知平台',
						icon: '/static/applet/icons.png',
						data: {
							id: '__UNI__2CF990F',
							url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231019/20231019151519e8f484737.wgt',
						},
						type: 4,
					}
					// {
					// 	name: '大屏控制',
					// 	icon: '/static/applet/dp.png',
					// 	data: {
					// 		id: '__UNI__83ABA97',
					// 		url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231016/20231016112144fac6d9128.wgt',
					// 	},
					// 	type: 4,
					// }
				],
				nowMenuList: [],
				street: '',
				showPicker: false,
				columnData: [],
				isFshow: false,
				backColor: 'rgba(252, 252, 252, 0)'
			};
		},
		computed: {
			...mapGetters(['userInfo', 'location', 'isLogin'])
		},
		created() {},
		onLoad() {
			this.showControllerAllLet();
			this.initMenu();
		},
		onShow() {
			if (this.isLogin) {
				this.emptyText = '暂无可用应用'
				this.jurisdiction = false
			} else {
				this.emptyText = '请登录'
				this.jurisdiction = true
			}
      console.log(this.jurisdiction);
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh()
		},
		beforeDestroy() {
			// 销毁监听事件
			this.$bus.$off('value-updated')
		},
		mounted() {
			// #ifdef  H5
			// 监听页面滚动事件
			window.addEventListener("scroll", this.scrolling);
			// #endif
		},
		// #ifdef APP-PLUS
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			if (scrollTop <= 20) {
				this.backColor = 'rgba(252, 252, 252, 0)'
				this.isFshow = false
			} else if (20 < scrollTop && scrollTop <= 100) {
				this.backColor = 'rgba(252, 252, 252, .5)'
				this.isFshow = true
			} else if (scrollTop > 100) {
				this.backColor = 'rgba(252, 252, 252, 1)'
				this.isFshow = true
			}
		},
		// #endif

		methods: {
			scrolling() {
				// 滚动条距文档顶部的距离
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				// 滚动条滚动的距离
				let scrollStep = scrollTop - this.oldScrollTop;
				// console.log("header 滚动距离 ", scrollTop);
				// 更新——滚动前，滚动条距文档顶部的距离
				this.oldScrollTop = scrollTop;

				//变量windowHeight是可视区的高度
				let windowHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				//变量scrollHeight是滚动条的总高度
				let scrollHeight =
					document.documentElement.scrollHeight || document.body.scrollHeight;

				//滚动条到底部的条件
				if (scrollTop + windowHeight == scrollHeight) {
					//你想做的事情
					// console.log("header  你已经到底部了");
				}


				if (scrollTop <= 20) {
					this.backColor = 'rgba(252, 252, 252, 0)'
					this.isFshow = false
				} else if (20 < scrollTop && scrollTop <= 100) {
					this.backColor = 'rgba(252, 252, 252, .5)'
					this.isFshow = true
				} else if (scrollTop > 100) {
					this.backColor = 'rgba(252, 252, 252, 1)'
					this.isFshow = true


				}


			},
			// 根据类型来判断是否显示
			showControllerAllLet() {
				let user;
				if (typeof this.$store.state.app.userInfo == 'string') {
					user = JSON.parse(this.$store.state.app.userInfo)
				} else user = JSON.parse(JSON.stringify(this.$store.state.app.userInfo))
				if (user.show_controller_applet) {
					this.AllMenuList.push({
						name: '大屏控制',
						icon: '/static/applet/dp.png',
						data: {
							id: '__UNI__83ABA97',
							url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231016/20231016112144fac6d9128.wgt',
						},
						type: 4,
					})
				}
			},
			// 初始化菜单
			initMenu() {
				let now = uni.getStorageSync('gatherNowMenuList');
				try {
					this.nowMenuList = JSON.parse(now);
					this.AllMenuList = this.AllMenuList.filter((item) => {
						return this.nowMenuList.find(t => t.name == item.name)?.name != item.name;
					})
				} catch (e) {
					this.nowMenuList = [];
				}
			},
			clickMenu(e, data) {
				this.getUniMp(e, data);
			},
			// 添加菜单
			pushMenu(data) {
				this.nowMenuList.push(data);
				this.AllMenuList = this.AllMenuList.filter((item) => {
					return item.name != data.name;
				})
			},
			// 移除菜单
			removeMenu(data) {
				this.AllMenuList.push(data);
				this.nowMenuList = this.nowMenuList.filter((item) => {
					return item.name != data.name;
				})
			},
			// 编辑完成
			editComfirm() {
				this.editFlag = false;
				uni.setStorageSync('gatherNowMenuList', JSON.stringify(this.nowMenuList));
			},
			getUniMp(type, data) {
				let that = this;
				// #ifdef APP-PLUS
				switch (type) {
					case 1:
						uniMP.loadMP(data);
						break;
						case 2: uniMP.loadMPx(data); break;
					// case 2:
					// 	// this.navigator(data);
					// 	// uniMP.loadMPx(data);
					// 	that.navigator(`/pages/moreProject/moreProject`);
					// 	break;

					case 3:
						uniMP.loadMPurl(data);
						break;
					case 4:
						uniMP.loadMPdns(data);
						break;
				}
				return;
				// #endif
				// #ifdef H5
				if (type == 2) {
					this.navigator(`/pages/moreProject/moreProject`);
				} else {
					uni.showToast({
						icon: 'none',
						title: 'H5不支持打开小程序'
					})
				}
				// #endif

			},
			navigator(url, t) {
				// if (this.userInfoData.is_wsxx === 0 && t != '商户设置') return Toast("请完善商户信息");
				uni.navigateTo({
					url: url
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.gather {
		padding-bottom: 164.91rpx;
		// background: linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%);
		position: relative;
	}

	.sitebox {
		animation-name: fadeIn;
		animation-duration: 3s;
		animation-fill-mode: forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.top_box {
		// padding-top: 180rpx;
		background: linear-gradient(#36a2ff, #fff);
	}

	.com {
		margin-left: 50%;
		transform: translate(-50%);
	}

	.business {
		width: 694.74rpx;
		// margin-bottom: 175rpx;
	}

	.special_work {
		// padding: 17.54rpx;
		width: 694.74rpx;
		margin-top: 10rpx;
		border-radius: 17.54rpx;
		// box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);

		.title {
			font-size: 31.58rpx;
			font-weight: 700;
			margin-bottom: 38.6rpx;
		}

		.project {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.edit {
				font-size: 26rpx;
				font-weight: 400;

				&::after {
					content: ">";
					margin-left: 10rpx;
				}
			}

			.edit2 {
				font-size: 26rpx;
				font-weight: 400;
			}
		}

		.content {
			display: flex;
			align-content: center;
			flex-wrap: wrap;
			// justify-content: space-between;

			.examine {
				margin-bottom: 35rpx;
				width: 173.68rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				position: relative;
				// margin: 0 0 33.33rpx 33.33rpx !important;

				.icon_img {
					width: 83.16rpx;
					height: 83.16rpx;
				}

				.icon {
					position: absolute;
					top: -5rpx;
					right: 25rpx;
				}

				.text {
					font-size: 26.32rpx;
					margin-top: 21.05rpx;
					color: #000;
				}
			}

			.text {
				font-size: 29.82rpx;
				color: #a4a4a4;
			}
		}

		.cont_jus {
			margin-top: 56.14rpx;
			justify-content: flex-start;

			&:first-child {
				// margin-right: 33rpx;
			}

			.examine {
				margin-right: 48rpx;

				&:first-child {
					margin-right: 48rpx;
				}
			}
		}
	}

	.edit_card {
		background-color: #fff;
		padding-top: 28rpx;
	}
</style>