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" class="dle" @click="$emit('selectDelete')">
				{{ 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 {
		nextTick
	} from "vue";
	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 [];
				},
			},
			success: {
				type: Boolean,
				default: true,
			},
		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		data() {
			return {
				all: [],
				language: "zh-CN",
				selegoods: [],
				stringcheck: [],
				skuitemid: [],
				volume: '',
				cartid: [],
				ten_yuan_image:''
			};
		},
		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[2].iconPath = this.ten_yuan_image
				list[2].selectedIconPath = this.ten_yuan_image
				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() {
			this.all = []
			if (uni.getStorageSync("language") != "") {
				this.language = uni.getStorageSync("language");
			}
			this.getimage()
			// if (uni.getStorageSync('tabbar')!=1) {
			// 	this.value1 = uni.getStorageSync('tabbar')
			// }
			// const dom = uni.createSelectorQuery("#tabber")
		},
		methods: {
			getimage() {
				uni.$u.http.get('/api/config', {
					params: {
						module: 'basic'
					}
				}).then((res) => {
					this.ten_yuan_image = res.ten_yuan_image
					
				}).catch(() => {

				})
			},
			account() {
				if (this.checkboxValue1.length == 0) {
					this.$u.toast('请选择商品')
				} else {
					console.log(this.checkboxValue1);
					console.log(this.goodsList);
					this.selegoods = [];
					this.skuitemid = []
					this.cartid = []
					this.goodsList.map((item) => {
						item.goods.map((items) => {
							console.log('items', items);
							if (this.checkboxValue1.indexOf(items.cart.id) > -1) {
								this.selegoods = this.selegoods.concat(items);
								this.stringcheck = this.stringcheck.concat(items.cart.id);
								this.skuitemid = this.skuitemid.concat(items.cart.sku_item_id);
								// if (items.is_shipping == 1 && item.goods.length>1) {
									this.cartid = this.cartid.concat(items.cart.id);
							}
						});
					});
					uni.$u.http
						.get(`/api/order_goods_volume?sku_item_id=` + this.skuitemid.toString(), {

						})
						.then((res) => {
							console.log('weight', res);
							this.volume = res
						});
					this.$nextTick(() => {
						uni.navigateTo({
							url: "/pageA/order?selelist=" +
								encodeURIComponent(JSON.stringify(this.selegoods)) +
								"&typea=" +
								"shop" +
								"&goodsPrice=" +
								this.goodsPrice +
								"&goodsWeight=" +
								this.goodsWeight +
								"&stringcheck=" +
								this.stringcheck.toString() + '&volume=' + this.volume + '&cartid=' + this
								.cartid.join(',')
						});
					});
				}
			},
			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;

		.dle {
			width: 136rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 38rpx;
			border: 2rpx solid rgba(151, 151, 151, 1);
			font-size: 26rpx;
			color: rgba(51, 51, 51, 1);
		}

		.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>