wanmeiyizhan/components/tabbar.vue

<template>
  <view class="main">
    <div class="content">
      <div class="tabItem" @click="goPages('/pages/home/index')">
        <image
          class="tabItemIcon"
          :src="
            selectIndex === '/pages/home/index'
              ? '/static/tabs/home-active.svg'
              : '/static/tabs/home.svg'
          "
        />
        <span
          class="tabItemText"
          :style="{
            color: '#130F05',
          }"
          >首页</span
        >
      </div>
      <div class="tabItem" @click="handleGoOtherMin">
        <image class="tabItemIcon" src="/static/tabs/store.svg" />
        <span
          class="tabItemText"
          :style="{
            color: '#130F05',
          }"
          >线上商城</span
        >
      </div>
      <div class="postiton">
        <view class="tabbarLogo" @click="handleGoShop">
          <view class="imgBox">
            <image class="scanCodeIcon" src="/static/tabs/scanCode.svg" />
          </view>
        </view>
        <!-- <image
          class="tabbarLogo"
          src="https://eshangtech.com/wanmeiyizhanImg/tabbar/CYYIcon.png"
          @click="handleGoShop"
        /> -->
      </div>
      <div class="tabItem" @click="goPages('/pages/discovery/index')">
        <image
          class="tabItemIcon"
          :src="
            selectIndex === '/pages/discovery/index'
              ? '/static/tabs/discovery-active.svg'
              : '/static/tabs/discovery.svg'
          "
        />
        <span
          class="tabItemText"
          :style="{
            color: '#130F05',
          }"
          >精选活动</span
        >
      </div>

      <div class="tabItem" @click="goPages('/pages/userCenter/index')">
        <image
          class="tabItemIcon"
          :src="
            selectIndex === '/pages/userCenter/index'
              ? '/static/tabs/user-active.svg'
              : '/static/tabs/user.svg'
          "
        />
        <span
          class="tabItemText"
          :style="{
            color: '#130F05',
          }"
          >我的</span
        >
      </div>
    </div>
  </view>
</template>
<script>
export default {
  data() {
    return {
      selectIndex: "/pages/home/index",
      loginType: "",
    };
  },
  props: {
    page: {
      type: String,
      default: "",
    },
  },
  watch: {
    page: {
      handler(value) {
        this.selectIndex = value;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    goPages(pageIndex) {
      console.log("pageIndex", pageIndex);

      uni.switchTab({
        url: pageIndex,
      });
    },
    // 跳转商城
    handleGoShop() {
      uni.navigateTo({
        url: "/pages/homeFn/payfor/index",
      });
    },
    // 跳转其他小程序
    handleGoOtherMin() {
      let type = uni.getStorageSync("loginType");
      this.loginType = type;
      let _this = this;
      if (_this.loginType === "android") {
        _this.handleAppTomin(
          "wxc4d4ae493d7e1e68",
          "8085e1869fe52aa4715bb1a031446ace",
          "",
          "即将打开“驿佳”小程序"
        );
      } else if (_this.loginType === "min") {
        uni.navigateToMiniProgram({
          appId: "wxc4d4ae493d7e1e68",
          envVersion: "release",
          fail(err) {
            uni.switchTab({
              url: "/pages/home/index",
            });
          },
        });
      }
    },
    // app跳转小程序的方法
    handleAppTomin(appid, secret, indexUrl, contentText) {
      uni.showModal({
        title: "提示",
        content: contentText || "是否打开微信？",
        success: (res) => {
          if (res.confirm) {
            uni.request({
              method: "GET",
              url: `https://api.weixin.qq.com/cgi-bin/token?appid=${appid}&secret=${secret}&grant_type=client_credential`,
              success: (res1) => {
                console.log("res1", res1);
                uni.request({
                  method: "POST",
                  url:
                    "https://api.weixin.qq.com/wxa/generatescheme?access_token=" +
                    res1.data.access_token,
                  data: {
                    // path跳转到的小程序目标页面，query跳转需要携带参数，在目标页面onload里面接收options里面，其他参数固定，获取看文档了解
                    jump_wxa: {
                      path: indexUrl || "pages/index/index",
                      env_version: "release", // 正式版为"release"，体验版为"trial"，开发版为"develop"
                    },
                    is_expire: true,
                    expire_type: 1,
                    expire_interval: 1,
                    // env_version: "trial",
                  },
                  success: (res2) => {
                    plus.runtime.openURL(res2.data.openlink);
                  },
                });
              },
            });
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffff;
  border-top: 1px solid #e8e8ea;
  box-sizing: border-box;
  z-index: 999999;

  .content {
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);

    .tabItem {
      width: calc(100vw / 3);
      height: 100%;
      box-sizing: border-box;
      padding-top: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .tabItemIcon {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 4rpx;
      }

      .tabItemText {
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 20rpx;
        color: #130f05;
        line-height: 28rpx;
        text-align: justify;
        font-style: normal;
      }
    }

    .postiton {
      width: calc(100vw / 3);
      height: 100%;
      box-sizing: border-box;
      padding-bottom: 68rpx;
      position: relative;

      .tabbarLogo {
        width: 116rpx;
        height: 116rpx;
        background: #ffffff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        box-sizing: border-box;
        border-radius: 50%;
        padding: 6rpx;
        top: -36rpx;
        .imgBox {
          width: 100%;
          height: 100%;
          background: #ba922f;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          .scanCodeIcon {
            width: 64rpx;
            height: 64rpx;
          }
        }
      }
    }
  }
}
</style>