wx-qhb/components/kj-tabbar/kj-tabbar.vue

<template>
	<view id="tabber" style="position: fixed;z-index: 1000;bottom: 0;">
		<view class="bottom u-flex u-row-between" v-if="value1==3">
			<view class="u-flex">
				<u-checkbox-group v-model="all" placement="column" @change="checkAll">
					<u-checkbox shape="circle" :name="selectall">
					</u-checkbox>
				</u-checkbox-group>
				<text class="all">{{i18n.selectall}}</text>
			</view>
			<view v-if="success==false" class="dle">
				{{i18n.delete}}
			</view>
			<view class="u-flex" v-else>
				<view class="">
					<text class="allweight">{{i18n.Grossweight}} 50kg,</text>
					<text class="sum">{{i18n.total}}:</text>
					<text class='summon'>¥</text>
					<text class='summon' style="font-size: 36rpx;">188</text>
					<text class='summon'>.34</text>
				</view>
				<view class="settle" @click="account">{{i18n.GotoResult}}</view>
			</view>
		</view>
		<u-tabbar :list="list"  active-color="#F83224" inactive-color="#333"
			:value="value1">
			<u-tabbar-item :text="item.text" v-for="(item,idx) in list" @click="click1" :key="idx">
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					:src="item.iconPath"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="active-icon"
					:src="item.selectedIconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"

	export default {
		name: "kj-tabbar",
		props: {
			value1: Number
		},
		computed:{
			i18n(){
				return this.$t("index")
			}
		},
		data() {
			return {
				list: [{
						"iconPath": '../../static/express1.png',
						"selectedIconPath": "../../static/express2.png",
						"text": "跨境速递",
						"pagePath": "pages/express/express"
					},
					{
						"iconPath": "../../static/index1.png",
						"selectedIconPath": "../../static/index2.png",
						"text": "商城",
						"pagePath": "pages/index/index"
					},
					{
						"iconPath": "../../static/shop.png",
						"selectedIconPath": "../../static/shop.png",
						"text": "购",
						"pagePath": "pages/shopping/shopping"
					},
					{
						"iconPath": "../../static/cart1.png",
						"selectedIconPath": "../../static/cart2.png",
						"text": "购物车",
						"pagePath": "pages/cart/cart"
					},
					{
						"iconPath": "../../static/mine1.png",
						"selectedIconPath": "../../static/mine2.png",
						"text": "我的",
						"pagePath": "pages/mine/mine"
					}
				],
				all:''
			};
		},
		created() {
			// if (uni.getStorageSync('tabbar')!=1) {
			// 	this.value1 = uni.getStorageSync('tabbar')
			// }
			// const dom = uni.createSelectorQuery("#tabber")
		},
		methods: {
			account(){
				uni.navigateTo({
					url:'/pageA/order'
				})
			},
			getLabelHeight() {
				const dom = uni.createSelectorQuery("#tabber")
				console.log(dom)
			},
			// click1(e) {
			// 	this.value1 = e
			// 	console.log(e);
			// 	if (this.value1 == 4) {
			// 		uni.redirectTo({
			// 			url: '../../pages/mine/mine'
			// 		})
			// 	}
			// 	if (this.value1 == 0) {
			// 		uni.redirectTo({
			// 			url: '../../pages/express/express'
			// 		})
			// 	}
			// 	if (this.value1 == 1) {
			// 		uni.redirectTo({
			// 			url: '../../pages/index/index'
			// 		})
			// 	}
			// 	if (this.value1 == 2) {
			// 		uni.redirectTo({
			// 			url: '../../pages/shopping/shopping'
			// 		})
			// 	}
			// 	if (this.value1 == 3) {
			// 		uni.redirectTo({
			// 			url: '../../pages/cart/cart'
			// 		})
			// 	}
			// 	uni.setStorageSync('tabbar', e)
			// },
			click1(e) {
				console.log(e);
				if (e == 4) {
					uni.switchTab({
						url: '../../pages/mine/mine'
					})
				}

				if (e == 0) {
					uni.switchTab({
						url: '../../pages/express/express'
					})
				}

				if (e == 1) {
					uni.switchTab({
						url: '../../pages/index/index'
					})
				}

				if (e == 2) {
					uni.switchTab({
						url: '../../pages/shopping/shopping'
					})
				}

				if (e == 3) {
					uni.switchTab({
						url: '../../pages/cart/cart'
					})
				}
				// uni.setStorageSync('tabbar', e)
			},
		}
		// created() {},
		// computed: {
		// 	...mapState(['config'])
		// },
		// watch: {
		// 	config: {
		// 		handler(val) {
		// 			if (val.report_switch == 1) {
		// 				this.list = [{
		// 						"iconPath": "/static/images/index.png",
		// 						"pagePath": "/pages/index/index",
		// 						"selectedIconPath": "/static/images/index1.png",
		// 						"text": "首页"
		// 					},
		// 					{
		// 						"iconPath": "/static/images/video.png",
		// 						"pagePath": "/pages/video/video",
		// 						"selectedIconPath": "/static/images/video1.png",
		// 						"text": "视频"
		// 					},
		// 					{
		// 						"iconPath": "/static/images/baobei.png",
		// 						"pagePath": "/pages/baobei/baobei",
		// 						"selectedIconPath": "/static/images/baobei1.png",
		// 						"text": "客户报备"
		// 					},
		// 					{
		// 						"iconPath": "/static/images/mine.png",
		// 						"pagePath": "/pages/mine/mine",
		// 						"selectedIconPath": "/static/images/mine1.png",
		// 						"text": "我的"
		// 					}
		// 				]
		// 			}
		// 		},
		// 		deep: true
		// 	}
		// }
	}
</script>

<style lang="scss" scoped>
	.all{
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #444444;
		line-height: 32rpx;
		text-align: left;
		font-style: normal;
	}
	.bottom {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		padding: 0 24rpx;
		box-sizing: border-box;

		.allweight {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
		}

		.sum {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #333333;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
		}

		.summon {
			font-family: JDZhengHT, JDZhengHT;
			font-weight: 400;
			font-size: 24rpx;
			color: #FF1515;
			line-height: 30rpx;
			text-align: left;
			font-style: normal;
		}

		.settle {
			width: 176rpx;
			height: 68rpx;
			background: #F83224;
			border-radius: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 68rpx;
			text-align: center;
			font-style: normal;
			margin-left: 20rpx;
		}
	}
</style>