dingdong-mall/components/CTabbar.vue

<template>
	<view>
		<view class="page-content">
			<!-- 所有内容的容器 -->
			<slot></slot>
		</view>
		
		<!-- <module-bar ref="moduleBar" :moduleBarInfos="moduleBarInfos" @getCurPageInfo="getCurPageInfo"></module-bar> -->

		<m-tabbar fill fixed safeBottom 
			:tabbarHeight="140" 
			:current="current" 
			:tabbar="tabbar2" 
			:beforeChange="tabbarBeforeChange">
			<template v-slot:tabbar_index_2>
				<view class="custom_style" @click="switchToPublish">
					<view class="action add-action">
						<text class="cuIcon-add bg-main-color"></text>
					</view>
					<text class="title">发布</text>
				</view>
			</template>
		</m-tabbar>
		
		<!-- 发布 -->
		<view class="cu-modal content-mask" :class="isShowPublish?'show':''">
			<view class="cu-dialog bottom-dialog margin-bottom-with-bar">
				<view class="padding-xl">
					<view class="flex justify-start margin-tb-xl">
						<view class="cu-avatar round middle-avatar first-avatar">
							<view class="cuIcon-formfill"></view>
						</view>
						<view class="flex flex-column-around text-left margin-left-sm text-white"
							@click="goRouter('/pages/publish/publish-task')">
							<view class="text-xl">发布任务</view>
							<view>公司、家居家政雇佣上门服务</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar tabbar margin-bottom-xl fixed-bottom-bar">
				<view class="action add-action" @click.stop="isShowPublish = false">
					<button class="cu-btn bg-gray cuIcon-close"></button>
					<text class="mask-close-text">关闭</text>
				</view>
			</view>
		</view>
		
		<!-- 登录校验弹窗 -->
		<vertify-login ref="vertifyLogin" @reload="reloadForwardPage"></vertify-login>
		<vertify-phone ref="vertifyPhone" @reload="reloadForwardPage"></vertify-phone>
		
		<valid ref="validRef"></valid>
	</view>
</template>

<script>
	
	import valid from '@/pages/index/components/valid.vue';
	let that
	export default {
		name: "CTabbar",
		components: {
			valid
		},
		props: {
			current: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabbar2: {
					color: "#aaaaaa",
					selectedColor: "#0081ff",
					backgroundColor: "#FFFFFF",
					list: [{
							pagePath: "pages/index/home",
							text: "首页",
							cuIcon: 'homefill',
							openType: 'switchTab'
						},
						{
							pagePath: "pages/index/worker-home",
							text: "师傅圈",
							cuIcon: 'circle',
							openType: 'switchTab'
						},
						{
							cuIcon: 'plus'
						},
						{
							pagePath: "pages/index/msg-home",
							text: "消息",
							cuIcon: 'message',
							openType: 'switchTab'
						},
						{
							pagePath: "pages/index/my-home",
							text: "我的",
							cuIcon: 'my',
							openType: 'switchTab'
						}
					]
				},
				isShowPublish: false,
				initParam: null
			};
		},
		created() {
			uni.hideTabBar();
			that = this;
			uni.$on('initValid', this.initValid)
		},
		mounted() {
			// this.$refs.vertifyLogin.showModal();
		},
		methods: {
			initValid(initParam) {
				this.initParam = initParam
				this.$refs.validRef.loadData(initParam)
			},
			goRouter(path) {
				uni.navigateTo({
					url: path
				})
			},
			async switchToPublish() {
				const res = await this.authLogin()
				if(res) {
					this.isShowPublish = true
				}
			},
			tabbarBeforeChange: async (next, index) => {
				console.log('tabbarBeforeChange==', index);
				if (index === 4) {
					const res = await that.authLogin()
					console.log(res);
					if(res){
						next()
					}
				} else {
					next()
				}
			},
			async authLogin() {
				// 更新缓存中的userInfo
				let res = await this.$request.storageExistUser();
				// 获取缓存中的userInfo
				let curUserInfo = this.$request.getCurUserInfo();
				// 校验提示登录
				if (!curUserInfo || !curUserInfo.openId) {
					this.$refs.vertifyLogin.showModal();
					return false;
				} else {
					this.$refs.vertifyLogin.hideModal();
				}
				// 校验提示获取手机号码
				if (!curUserInfo.phone) {
					this.$refs.vertifyPhone.showModal();
					return false;
				} else {
					this.$refs.vertifyPhone.hideModal();
				}
				return true;
			},
			reloadForwardPage() {
				if(this.$refs.validRef.inByShare){
					this.$refs.validRef.loadData(this.initParam)
				} else {
					this.authLogin()
				}
			},
		},
		destroyed() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100vw;
		// height: calc(100vh - env(safe-area-inset-bottom) - 100rpx);
		background-color: #F7F8FA;
		overflow-x: hidden;
	}
	
	.custom_style {
		position: relative;
		z-index: 2;
		color: #aaaaaa;
		margin-top: -22upx;
		font-size: 24upx;
		text-align: center;
	}
	
	.custom_style .action.add-action {
		position: relative;
		z-index: 2;
		color: #aaaaaa;
		margin-top: -22upx;
		font-size: 24upx;
		width: 70upx;
		margin-bottom: 17rpx;
	}
	
	.custom_style .action.add-action [class*="cuIcon-"] {
		position: relative;
		display: inline-block;
		width: 70upx;
		height: 70upx;
		border-radius: 50%;
		line-height: 70upx;
		font-size: 50upx;
		text-align: center;
	}
	
	.custom_style .action.add-action .bg-main-color {
		margin-bottom: 6upx;
	}
	
	.custom_style .action.add-action::after {
		content: "";
		position: absolute;
		width: 100upx;
		height: 100upx;
		top: -14upx;
		left: -14rpx;
		right: 0;
		margin: auto;
		box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08);
		border-radius: 50upx;
		background-color: inherit;
		z-index: -1;
		border-bottom: transparent;
		background-color: #FFFFFF;
	}
	
	.custom_style .title {
		color: #aaaaaa;
		font-size: 24upx;
	}
.content-mask {
		z-index: 9999;
		background: rgba(0, 0, 0, 0.9);
	}

	.mask-close-text {
		visibility: hidden;
	}

	.middle-avatar {
		width: 120rpx;
		height: 120rpx;
	}

	.middle-avatar [class*="cuIcon-"] {
		font-size: 53rpx !important;
	}

	.cu-avatar.first-avatar {
		background-color: #0081ff;
		color: #ffffff;
	}

	.cu-avatar.second-avatar {
		background-color: #fbbd08;
		color: #ffffff;
	}

	.cu-avatar.third-avatar {
		background-color: #f37b1d;
		color: #ffffff;
	}

	.cu-avatar.fourth-avatar {
		background-color: #1cbbb4;
		color: #ffffff;
	}

	.cu-dialog.bottom-dialog {
		background-color: unset;
		vertical-align: bottom;
	}
</style>