wanmeiyizhan/components/tabbar.vue

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

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

      uni.switchTab({
        url: pageIndex,
      });
    },
    // 跳转商城
    handleGoShop() {
      if (!this.user.MEMBERSHIP_ID) {
        let _this = this;
        uni.showModal({
          title: "温馨提示",
          content: "请您授权登录后再操作。",
          success(res) {
            if (res.confirm) {
              if (_this.loginType === "min") {
                uni.navigateTo({ url: "/pages/register/index" });
              } else {
                uni.navigateTo({ url: "/pages/login/index" });
              }
            }
          },
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/homeFn/payfor/index",
      });
    },
    // 跳转其他小程序
    handleGoOtherMin() {
      let type = uni.getStorageSync("loginType");
      this.loginType = type;
      let _this = this;
      if (_this.loginType === "android" || _this.loginType === "ios") {
        _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);

                    // if (this.loginType === 'ios') {
                    //   plus.runtime.openURL(`http://saas.eshangtech.com/openWxMin.html?openlink=${res2.data.openlink}`);
                    // } else {
                    //   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: 999998;

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

    .tabItem {
      width: 20vw;
      height: 100%;
      box-sizing: border-box;
      padding-top: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;


      .imgBox {
        width: 48rpx;
        height: 48rpx;
        margin-bottom: 4rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .tabItemIcon {
          width: 48rpx;
          height: 48rpx;
        }
      }



      .tabItemText {
        display: inline-block;
        width: 100%;
        font-family: "PingFangSC";
        font-weight: 400;
        font-size: 20rpx;
        color: #130f05;
        text-align: center;
        white-space: nowrap; // 强制不换行
        line-height: 28rpx; // 尽量避免额外行高影响
      }
    }

    .postiton {
      width: 20vw;
      height: 100%;
      box-sizing: border-box;
      padding-bottom: 68rpx;
      position: relative;
      z-index: 2;

      .tabbarLogo {
        width: 116rpx;
        height: 116rpx;
        background: #ffffff;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -36rpx);
        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>