zc_saas_h5/components/tabbar/index.vue

<template>
	<view class="">
		<view class="fixed" v-if="consultMobile.consultationStatus == 1">
			<view class="we_t" v-if="show">
				<view class="child" v-if="consultMobile.serviceHotlineStatus == 1">
					<img src="https://file.gdzckj.net/web/static/img/icon/servers.png" alt=""
						@click="activeIn == 1 ? activeIn = 0 : activeIn = 1">
					<text class="text" @click="activeIn == 1 ? activeIn = 0 : activeIn = 1">热线</text>
					<view class="fix" v-if="activeIn == 1">
						<view style="font-weight: bold;">
							服务时间
						</view>
						<view style="margin:14rpx;font-size: 26rpx;white-space: nowrap;color: #AAAAAA;">
							{{consultMobile.servicingTime}}
						</view>
						<view style="font-weight: bold;line-height: 46rpx;white-space: pre-wrap;"
							@click="copy(consultMobile.serviceNumber)">
							{{consultMobile.serviceNumber}}
						</view>
					</view>
				</view>
				<view class="child" v-if="consultMobile.serviceWechatStatus == 1">
					<img src="https://file.gdzckj.net/web/static/img/icon/wechat.png" alt=""
						@click="activeIn == 2 ? activeIn = 0 : activeIn = 2">
					<text class="text" @click="activeIn == 2 ? activeIn = 0 : activeIn = 2">微信</text>
					<view class="fix" v-if="activeIn == 2">
						<img style="width:260rpx;height:260rpx;"
							:src="$method.splitImgHost(consultMobile.serviceWechatImg)" alt="">
						<view style="margin-top:10rpx;text-align:center;font-weight: bold;font-size: 30rpx;"
							@click="copy(consultMobile.serviceWechatNumber)">
							微信号：{{consultMobile.serviceWechatNumber}}
						</view>
					</view>
				</view>
				<view class="child" v-if="consultMobile.shoppingCarStatus == 1 && $method.isLogin()"
					@click="jumpShopCar">
					<img src="https://file.gdzckj.net/web/static/img/icon/shoppingCar.png" alt="" @click="activeIn = 0">
					<text class="text" @click="activeIn =0">购物车</text>
					<view class="fix_car" v-if="false">
						{{shoppingNum > 99 ?'99+':shoppingNum}}
					</view>
				</view>
				<view class="child" @click="show = !show">
					<img src="https://file.gdzckj.net/web/static/img/icon/close.png" alt="" @click="activeIn =0">
				</view>
			</view>
			<view class="we_l" v-if="!show" @click="show = !show">
				<img src="https://file.gdzckj.net/web/static/img/icon/we.png" alt="" @click="activeIn = 0">
			</view>
			<view class="up" @click="backTop" :class="backTopBtn ? '':'hideBtn'">
				<img src="https://file.gdzckj.net/web/static/img/icon/backTop.png" alt="">
			</view>
		</view>
		<u-tabbar v-model="current" :before-switch="beforeSwitch" :list="list" @change="change" active-color="#007aff"
			:height="Headers"></u-tabbar>
	</view>

</template>
<script>
	import config from "@/common/config";
	import {
		mapGetters,
	} from "vuex";
	export default {
		name: "myTabbar",
		options: {
			styleIsolation: "shared"
		},
		props: {
			backTopBtn: {
				type: Boolean,
				default: () => {
					return false
				}
			}
		},
		data() {
			return {
				activeIn: 0,
				show: false,
				list: [{
						pagePath: "/pages/index/index",
						iconPath: require("@/static/modIcon/home-1.png"),
						selectedIconPath: require("@/static/modIcon/home.png"),
						text: "首页",
					},
					{
						pagePath: "/pages/course/index",
						iconPath: require("@/static/modIcon/choose-1.png"),
						selectedIconPath: require("@/static/modIcon/choose.png"),
						text: "选购",
					},
					{
						pagePath: "/pages/learn/index",
						iconPath: require("@/static/modIcon/study-1.png"),
						selectedIconPath: require("@/static/modIcon/study.png"),
						text: "学习",
					},
					{
						pagePath: "/pages/questionBank/index",
						iconPath: require("@/static/modIcon/practice-1.png"),
						selectedIconPath: require("@/static/modIcon/practice.png"),
						text: "练习",
					},
					// {
					//   pagePath: "/pages/information/index",
					//   iconPath: config.BASE_IMG_URL + "/web/icon/nav4.png",
					//   selectedIconPath: config.BASE_IMG_URL + "/web/icon/nav4_on.png",
					//   text: "资料",
					// },
					{
						pagePath: "/pages/wd/index",
						iconPath: require("@/static/modIcon/my-1.png"),
						selectedIconPath: require("@/static/modIcon/my.png"),
						text: "我的",
					},
				],
				current: 0,
				Headers: "100rpx"
			};
		},

		computed: {
			...mapGetters(["consultMobile", "shoppingNum"]),
		},
		mounted() {},
		onShow() {},
		methods: {
			backTop() {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const currentRoute = currentPage.route;
				if (currentRoute.includes('pages/course/index')) {
					uni.$emit('backTop', 1)
				} else {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}
			},
			jumpShopCar() {
				uni.navigateTo({
					url: "/pages4/shopping/shoppingCart",
				});
				this.activeIn = 0
			},
			beforeSwitch(index) {
				return true; // 或者根据逻辑返回false
			},
			change(index) {
				this.current = index
				this.show = false
				// if (index === 4) {
				//   this.toInformation();
				// }
			},
			toInformation() {
				uni.reLaunch({
					url: "/pages/information/index",
				});
			},
			copy(text) {
				uni.setClipboardData({
					data: text
				});
			}
		},
	};
</script>

<style lang="scss">
	.u-tabbar {
		::v-deep &__content {
			z-index: 10000 !important;
		}
	}

	.fixed {
		position: fixed;
		right: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: end;
		bottom: 20vh;

		.we {
			// background-color: #007aff;
			// border-radius: 50%;
			// width: 80rpx;
			// height: 80rpx;
			// display: flex;
			// align-items: center;
			// justify-content: center;
			// margin-bottom: 20rpx;

			// img {
			// 	width: 40rpx;
			// 	height: 40rpx;
			// }
			.we_children {
				background-color: #007aff;
				border-radius: 50%;
				width: 80rpx;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&:last-child {
					margin-bottom: 20rpx;
				}

				img {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.we_children_show {
				visibility: hidden;
			}
		}

		.we_sty {
			background-color: #007aff;
			border-radius: 50px;
		}

		.we_t {
			border-radius: 50px;
			background-color: #007aff;
			padding: 10rpx 0rpx;

			.child {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 14rpx 0rpx;
				position: relative;

				img {
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 6rpx;
				}

				.text {
					color: #fff;
					font-size: 22rpx;
				}

				.fix {
					box-shadow: 0rpx 0rpx 20rpx 11rpx rgba(0, 0, 0, 0.2);
					position: absolute;
					top: 0rpx;
					right: 110%;
					padding: 26rpx;
					border-radius: 8px;
					background-color: #fff;
				}

				.fix_car {
					position: absolute;
					top: 0rpx;
					right: 0rpx;
					padding: 0rpx 8rpx;
					border-radius: 100px;
					color: #fff;
					font-size: 20rpx;
					background-color: #f56c6c;
				}
			}
		}

		.we_l {
			background-color: #007aff;
			border-radius: 50%;
			width: 90rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.up {
			background-color: #007aff;
			border-radius: 50%;
			width: 90rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;

			img {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.hideBtn{
		visibility: hidden;
	}
</style>