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 == 2">
			<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"
				:badge="item.text == '购物车' ? badgeNumber : 0">
				<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: "",
				badgeNumber: 0, //购物车商品数量
			};
		},
		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[1].iconPath = this.ten_yuan_image;
				list[1].selectedIconPath = this.ten_yuan_image;
				list[0].text = this.i18n.shop;
				list[1].text = this.i18n.chase;
				list[2].text = this.i18n.Shopping;
				list[3].text = this.i18n.mine;
				return list;
			},
		},
		created() {
			this.all = [];
			if (uni.getStorageSync("language") != "") {
				this.language = uni.getStorageSync("language");
			}
			this.getimage();
			this.getNumber();
		},
		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 {
					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(","),
						});
					});
				}
			},
			//获取购物车数量
			getNumber() {
				if (uni.getStorageSync('token')) {
					uni.$u.http.get(`/api/cart/number`).then((res) => {
						this.badgeNumber = res;
					});
				}
			},
			getLabelHeight() {
				const dom = uni.createSelectorQuery("#tabber");
				console.log(dom);
			},
			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) {
				console.log(e);
				if (e == 3) {
					uni.switchTab({
						url: "../../pages/mine/mine",
					});
				}

				if (e == 0) {
					uni.switchTab({
						url: "../../pages/index/index",
					});
				}

				if (e == 1) {
					uni.switchTab({
						url: "../../pages/shopping/shopping",
					});
				}

				if (e == 2) {
					uni.switchTab({
						url: "../../pages/cart/cart",
					});
				}
			},
		},
		// 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>