scancode-miro/components/tabbar_common.vue

<template>
	<view class="">
		<u-tabbar :value="initIndex" @click="handleLogin" @change="onTabChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" class="custom-tabbar" activeColor="#d81e06" inactiveColor="#fff">
			<u-tabbar-item v-for="(item, index) in items" :key="index" :text="item.text"
				:icon="require(`@/static/images/tabbar/${getDirectoryName()}/${item.icon}`)" />
		</u-tabbar>
		<u-popup :show="showTabbar" mode="bottom" class="popup-view" @close="close" @open="open">
			<view style="margin: 20px">
				<view class="login-text">
					 {{getTextByDirName()}}
				</view>
				<button class="login-btn" open-type="getPhoneNumber" @getphonenumber="handlePhone">
					授权登录
				</button>
			</view>
		</u-popup>
	</view>


</template>

<script>
	import {
		getUserInfo
	} from '@/api/login'
	export default {
		data() {
			return {
        dirName: '',
        showTabbar: false,
				loginDate: {
					jsCode: '',
					encryptedData: '',
					code: '',
					iv: ''
				},
				// 选中的 tab 索引
				initIndex: 4,
				selectedIndex: 4,
				// 自定义 tab 数据
				items: [
					
					{
						text: '溯源信息',
						icon: 'traceability.png'
					},
					{
						text: '意见反馈',
						icon: 'opinion.png'
					},
					{
						text: '公司简介',
						icon: 'company.png'
					},
					{
						text: '个人中心',
						icon: 'my.png'
					},
					

				]
			};
		},
		created() {
			// // 监听事件
			// uni.$on('updateSelectedIndex', (index) => {
			// 	this.selectedIndex = index;
			// });
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.showTabbar = false
				// console.log('close');
			},
			onTabChange(index) {
				//判断是否已经授权
				// if (uni.getStorageSync('Authorization-status')) {
					this.handleTabSwitch(index);
				// 	return;
				// }
				// this.handleLogin();
				// this.showTabbar = true;
				// this.selectedIndex = index;
				return;

			},
			async handleLogin() {

				const [loginRes, profileRes] = await Promise.all([
					uni.login({
						provider: 'weixin'
					}),
					uni.getUserProfile({
						desc: '登录需要'
					})
				])
				this.loginDate.iv = profileRes.iv;
				this.loginDate.encryptedData = profileRes.encryptedData;
				this.loginDate.jsCode = loginRes.code;

			},
			handlePhone(e) {
				if (e.detail.code) {
					this.loginDate.code = e.detail.code;
					// this.loginDate.iv = e.detail.iv;
					// this.loginDate.encryptedData = e.detail.encryptedData;
					getUserInfo(this.loginDate).then(res => {
						if (res.code === 0) {
							uni.setStorageSync('Authorization-status', true);
							this.showTabbar = false;
							this.handleTabSwitch(this.selectedIndex);
						} else {

						}
					})

				}
			},
			handleTabSwitch(index) {
        let dirName = this.getDirectoryName();
				let url = '';
				switch (index) {
					case 0:
						url = '/pages/'+dirName+'/traceability/traceability';
						break;
					case 1:
						url = '/pages/'+dirName+'/feedback/feedback';
						break;
					case 2:
						url = '/pages/'+dirName+'/introduction/introduction';
						break;	
					case 3:
						url = '/pages/'+dirName+'/my/my';
						break;
					default:
						break;
				}

				uni.navigateTo({
					url: url
				});

			},
      getDirectoryName() {
        if (this.dirName !== ''){
          return this.dirName;
        }
        const pages = getCurrentPages();
        console.log(pages);
        if (pages.length > 0) {
          const currentPage = pages[pages.length - 1];
          const route = currentPage.route;
          const pathParts = route.split('/');
          if (pathParts.length >= 2) {
            this.dirName = pathParts[1];
            return pathParts[1];
          }
        }
        return 'cjx'; // 默认值
      },
      getTextByDirName(){
        switch (this.dirName) {
          case 'cjx':
            return '超吉炫';
          case 'lgz':
            return '梅山古镇';
          case 'qilang':
            return '七榔';
          default:
            return '超吉炫';
        }
      }

    }
	};
</script>

<style scoped>
	/* 修复内容区域样式 */
	::v-deep .u-tabbar__content {
		background-color: transparent !important;
		box-shadow: none !important;
		height: 140rpx;
		border: none;
	}


	/* 修复图标尺寸 - 精确选择器路径 */
	::v-deep .custom-tabbar .u-tabbar-item .u-tabbar-item__icon .u-icon__img {
		width: 80rpx !important;
		height: 80rpx !important;
	}

	.login-text {
		text-align: center;
		font-size: 18px;
		font-weight: 800;
		margin-bottom: 10px;
	}

	.login-btn {
		border-radius: 22px;
		border: none !important;
		background-color: #5ac725;
		color: white;
		font-size: 15px;
		margin-bottom: 15px;
	}
</style>