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
        :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: {
      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,
      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() {
      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>