scancode-miro/components/tabbar_cjx.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/cjx/${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">
					超吉炫
				</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 {
        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);
              uni.setStorageSync('userPhone', res.data.mobile);
							this.showTabbar = false;
							this.handleTabSwitch(this.selectedIndex);
						} else {

						}
					})

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

				uni.navigateTo({
					url: url
				});
			}

		}
	};
</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>