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="i18n.selectall" activeColor="#F83224">
					</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 }} </text>
					<text class="allweight"> {{ goodsWeight }}kg,</text>
					<text class="sum">{{ i18n.total }}:</text>
					<text class="summon">¥</text>
					<text class="summon" style="font-size: 36rpx">{{
            goodsPrice.split(".")[0]
          }}</text>
					<text class="summon">.{{ goodsPrice.split(".")[1] }}</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 v-for="(item, idx) in list" @click="click1" :key="idx" :text="item.text">
				<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: {
				type: Number,
				default: 0,
			},
			goodsWeight: {
				type: Number,
				default: 0,
			},
			goodsPrice: {
				type: String,
				default: "",
			},
			//购物车所有商品
			goodsList: {
				type: Array,
				default: () => {
					return [];
				},
			},
			//购物车选中的商品
			checkboxValue1: {
				type: Array,
				default: () => {
					return [];
				},
			},
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		data() {
			return {
				success: true,
				all: [],
				language: 'zh-CN',
			};
		},
		onLoad() {},
		computed: {
			i18n() {
				return this.$t('index')
			},
			list() {
				var 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",
					},
				]
				list[0].text = this.i18n.border
				list[1].text = this.i18n.shop
				list[2].text = this.i18n.chase
				list[3].text = this.i18n.Shopping
				list[4].text = this.i18n.mine
				return list
			}
		},
		created() {
			if (uni.getStorageSync('language') != '') {
				this.language = uni.getStorageSync('language')
			}
			// if (uni.getStorageSync('tabbar')!=1) {
			// 	this.value1 = uni.getStorageSync('tabbar')
			// }
			// const dom = uni.createSelectorQuery("#tabber")
		},
		methods: {
			account() {
				console.log(this.checkboxValue1);
				console.log(this.goodsList);
				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)
			// },
			checkAll() {
				this.$emit("allSelect");
			},

			//
			cancelAll(value) {
				if (value == "全选") {
					return this.all;
				} else if (value == "取消") {
					this.all = [];
				} else {
					this.all.push(this.i18n.selectall);
				}
			},

			click1(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>