mp-weixin-2811-xcx.aigc-quickapp.com/components/hover-nav/uniapp/hover-nav.vue

<template>
  <view>
    <block v-if="pageCount == 1 || need">
      <view class="fixed-box" :style="'height:' + (fixBtnShow ? '330rpx' : '120rpx') + ';'">
        <block>
          <button class="btn-item btn-lang" :style="'background:#c6251b;color:#fff;''background-image:' + ('url(' + (kefuimg ? kefuimg : '') + ')') + ';' + ('background-size:' + ('100% 100%') + ';')" @tap="modifyInfo">{{(langIndex == 0 && isCn ? 'EN' : 'CN')}}</button>
        </block>
        <block v-if="fixBtnShow">
          <button class="btn-item" :style="'background:#c6251b;color:#fff;''background-image:' + ('url(' + (kefuimg ? kefuimg : '') + ')') + ';' + ('background-size:' + ('100% 100%') + ';')" hover-class="none" open-type="contact" session-from="weapp" show-message-card="true">
            <block v-if="!kefuimg">
              <text class="icox icox-kefu" style="color:#fff;"></text>
            </block>
          </button>
        </block>
        <block v-if="fixBtnShow && mobile">
          <view class="btn-item" :style="'background:#c6251b;color:#fff;''background-image:' + ('url(' + (phoneimg ? phoneimg : '') + ')') + ';' + ('background-size:' + ('100% 100%') + ';')" @tap="call">
            <block v-if="!phoneimg">
              <text class="iconfont icon-dianhua" style="color:#fff;"></text>
            </block>
          </view>
        </block>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  name: 'hover-nav',
  props: {
    need: {
      type: Boolean,
      default: false
    },
    mobile: {
      type: Boolean,
      default: true
    },
    isCn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pageCount: 0,
      fixBtnShow: true,
      tel: '',
      kefuimg: '',
      phoneimg: '',
      langIndex: 0,
      ischina: 0,
      ishow: 0
    }
  },
  created() {
    // 获取当前页面栈长度
    this.pageCount = getCurrentPages().length;
    
    // 初始化语言配置
    this.initLang();
    
    // 获取存储的shopInfo
    const shopInfo = uni.getStorageSync('shopInfo');
    if (shopInfo) {
      this.ischina = shopInfo.ischina;
      this.tel = shopInfo.mobile;
    }
    
    // 设置默认图片
    this.kefuimg = this.$util.getDefaultImage().kefu;
    this.phoneimg = this.$util.getDefaultImage().phone;
    
    // 判断是否显示
    this.ishow = this.$http.baseUrl.includes('aigc-quickapp.com');
  },
  methods: {
    modifyInfo() {
      // 切换语言
      this.$langConfig.change(this.langIndex == 1 ? 'zh-cn' : 'en-us', 1);
    },
    initLang() {
      // 初始化语言列表
      this.langList = this.$langConfig.list();
      
      // 获取存储的语言设置
      const lang = uni.getStorageSync('lang');
      if (lang) {
        for (let t = 0; t < this.langList.length; t++) {
          if (this.langList[t].value == lang) {
            this.langIndex = t;
            break;
          }
        }
      } else {
        this.langIndex = 0;
      }
    },
    call() {
      // 拨打电话
      uni.makePhoneCall({
        phoneNumber: this.tel + ''
      });
    }
  }
}
</script>

<style scoped>
.container-box {
  width: 100%;
}

.container-box .item-wrap {
  border-radius: 10rpx;
}

.container-box .item-wrap .image-box {
  border-radius: 10rpx;
}

.container-box .item-wrap image {
  width: 100%;
  height: auto;
  border-radius: 10rpx;
  will-change: transform;
}

.fixed-box {
  position: fixed;
  right: 0rpx;
  bottom: 200rpx;
  z-index: 10;
  border-radius: 120rpx;
  padding: 20rpx 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100rpx;
  box-sizing: border-box;
  transition: .3s;
  overflow: hidden;
}

.fixed-box .btn-item {
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  line-height: 1;
  margin: 14rpx 0;
  transition: .1s;
  background: #ff0000;
  color: #fff;
  border-radius: 50rpx;
  width: 80rpx;
  height: 80rpx;
  padding: 0;
}

.fixed-box .btn-item text {
  font-size: 36rpx;
  font-weight: 700;
}

.fixed-box .btn-item view {
  font-size: 26rpx;
  font-weight: 700;
}

.fixed-box .btn-item.show {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.fixed-box .btn-item.icon-xiala {
  margin: 0;
  margin-top: .1rpx;
}
</style>