circulation_ancientCoins_new/components/tabbar.vue

<template>
	<view>
		<view style="height: 118rpx;"></view>
		<view class="tabbar_item_wrap" style="">
			<view class="tabbar_item tabbar_item01" @click="jumpto('/pages/index/index')"  style="">
				<view :class="'txt '+[current==1?'tabbarYes':'tabbarNone']">
					<image :src="current==1?cssUrl+'tabbar_index_active.svg':cssUrl+'tabbar_index.svg'"></image>
					<view :class="[current==1?'tabbarYes':'tabbarNone']">{{leftButtonText}}</view>
				</view>
			</view>

			<view class="tabbar_item tabbar_item05" style="" @click="scanCode">
				<view class="scan_wrapper">
					<image :src="cssUrl+'scan.png'"></image>
				</view>
				<view :class="'scantxt '+[current==3?'tabbarYes':'tabbarNone']">扫码报到</view>
			</view>

			<view class="tabbar_item tabbar_item04" @click="jumpto('/pages/usercenter/usercenter')"  style="">
				<view :class="'txt '+[current==2?'tabbarYes':'tabbarNone']">
					<image :src="current==2?cssUrl+'tabbar_user_active.svg':cssUrl+'tabbar_user.svg'"></image>
					<view :class="[current==2?'tabbarYes':'tabbarNone']">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import wx from 'weixin-js-sdk'

	export default {
		props:{
			current:{
				type: [String, Number],
				default: 1
			},
			is_admin:{
				type: Boolean,
				default: false
			},
			leftButtonText: {
				type: String,
				default: '文章'
			}
		},
		data() {
			return {
				isWechat: false,
				wxConfig: false,
				cssUrl:this.cssUrl,
				isios:this.isIos
			}
		},
		mounted() {
			// #ifdef H5
			this.isWechat = /MicroMessenger/i.test(navigator.userAgent)
			if (this.isWechat && !this.wxConfig) {
				this.initWxConfig()
			}
			// #endif
		},
		methods: {
			async initWxConfig() {
				await this.$http.req('api/user/get_wx_jssdk_config', {url:location.href}, 'POST').then(data=>{
					if(data == -1) return
					this.wxConfig = data
					try {
						wx.config({
								debug: false,
								appId: this.wxConfig.appId,
								timestamp: this.wxConfig.timestamp,
								nonceStr: this.wxConfig.nonceStr,
								signature: this.wxConfig.signature,
								jsApiList: ['scanQRCode']
						})
					} catch (e) {
						uni.showToast({
							title: '微信配置失败',
							icon: 'none'
						})
					}
				});
			},
			async scanCode() {
				// #ifdef MP-WEIXIN
				uni.scanCode({
						onlyFromCamera: false,
						success: (res) => {
							console.log('扫码结果:', res.result);
						},
						fail: (err) => {
							console.error('扫码失败:', err);
							// uni.showToast({ title: '扫码失败', icon: 'none' });
						}
					});
				// #endif

				// #ifdef H5
				if(!this.isWechat) {
					uni.showToast({
						title: '请在微信浏览器中打开',
						icon: 'none'
					})
					return
				}
				if(!this.wxConfig) {
					uni.showToast({
						title: '配置加载中，请稍后',
						icon: 'none'
					})
					return
				}

				wx.scanQRCode({
					needResult: 1,
					scanType: ["qrCode","barCode"],
					success: (res) => {
						const result = res.resultStr
						this.handleScanResult(result)
					},
					fail: (err) => {
						uni.showToast({
							title: '扫码失败'+JSON.stringify(err),
							icon: 'none'
						})
					}
				})
				// #endif

			},
			handleScanResult(result) {
				// uni.showModal({
				// 	title: '扫码结果',
				// 	content: result
				// })
			},
			addArticle() {
				this.$func.toPage('/pages/edit/edit');
			},
			jumpto(event) {
				uni.reLaunch({
					url:event
				})
			}
		}
	}
</script>
<style>
	.tabbar_item{
		width: 33.33333333%;
		height: 98rpx;
		display: flex;
		align-items: center;
		margin-top: 7rpx;
		text-align: center;
		line-height: 34rpx;
	}
	.tabbar_item .txt{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
	}
	.tabbar_item:first-of-type{
		justify-content: flex-start;
	}
	.tabbar_item:last-of-type{
		justify-content: flex-end;
	}
	.tabbar_item_wrap{
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		width: 496rpx;
		height: 98rpx;
		background-color: #ffffff;
		display: flex;
		box-sizing: border-box;
		padding-left: 127rpx;
		padding-right: 127rpx;
		justify-content: space-between;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
		z-index: 8;
		margin: 0 auto;
		box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13);
	}
	.tabbar_item01 image{
		width: 60rpx;
		height: 60rpx;
	}
	.tabbar_item02 image{
		width: 60rpx;
		height: 60rpx;
	}
	.tabbar_item05{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.scantxt{
		position: absolute;
		bottom: 0rpx;
	}

	.scan_wrapper{
		width: 100rpx;
		height: 100rpx;
		border: 10rpx solid white;
		background: #5AD07A;
		border-radius: 100%;
		box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		position: relative;
		top: -57rpx;
	}
	.scan_wrapper image{
		width: 60rpx !important;
		height: 60rpx !important;
		display: block;
		top: 0 !important;
	}
	.tabbar_item05 image{
		width: 120rpx;
		height: 120rpx;
	}
	.tabbar_item03 image{
		width: 60rpx;
		height: 60rpx;
	}
	.tabbar_item04 image{
		width: 60rpx;
		height: 60rpx;
	}

	.tabbar_item view view:last-of-type,.scantxt{
		height: 34rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		letter-spacing: 0.3rpx;
	}

	.tabbarNone{
		color: #666666;
		text-align: center;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		line-height: 34rpx;
	}
	.tabbarYes{
		color: #00C160;
		text-align: center;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 600 !important;
		line-height: 34rpx;
	}
</style>