TalentService-mobile/components/lw-topnav/lw-topnav.vue

<template>
  <view>
    <view :style="'height:'+(nh+th)+'px'">
      <view class="top-in" :class="{'gradient':gradient}" :style="{'padding-top':nh+'px','background-color':bgColor}">
        <view :style="'height:'+(th)+'px'">
          <view v-if="isShow" class="nt-left">
            <view class="nl-frame" :style="'height:'+(th)+'px'">
              <view class="opa nl-icon iconfont icon-left" v-if="canback || isFromShare" @click="navback"
                    :style="'color:'+(lwColor?lwColor:'#000')+';font-size:'+lwFont+'upx'"></view>
            </view>
          </view>
          <view v-if="search" class="nt-left">
            <view class="nl-frame" :style="'height:'+(th)+'px'">
              <image src="http://qn.suqzp.com/displayAFixedImage/search.png" @click="navGosearch"
                     style="width: 40rpx;height: 40rpx;margin-left: 20rpx;"></image>
            </view>
          </view>
          <view class="nt-right" :style="'line-height:'+th+'px'">
            <text class="nr-text" :style="'color:'+(lwColor?lwColor:'#000')+';font-size:'+lwFont+'upx'"
                  v-if="lwTitle!='true'">{{ lwTitle }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    gradient: {
      type: Boolean,
      default: false,
    },
    lwFont: {
      type: String,
      default: '',
    },
    lwTitle: {
      type: String,
      default: '',
    },

    isShow: {
      type: Boolean,
      default: false,
    },
    search: {
      type: Boolean,
      default: false,
    },
    lwColor: {
      type: String,
      default: '#000',
    },

    bgColor: {
      type: String,
      default: '#fff',
    },

    isDefault: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      nh: 0,
      th: 46,
      canback: true,
      isFromShare: false,
    };
  },
  created() {
    //计算顶部导航栏的高度
    uni.getSystemInfo({
      success: res => {
        //导航高度
        this.nh = res.statusBarHeight;
      }, fail(err) {
        console.log(err);
      },
    });
    this.can_back();
    this.checkIsFromShare();
  },
  methods: {
    can_back() {
      this.canback = (getCurrentPages().length > 1);
    },
    checkIsFromShare() {
        const launchOptions = wx.getLaunchOptionsSync() || {};
        if(launchOptions.scene == 1007 || launchOptions.scene == 1008){
          this.isFromShare = true
        }
    },
    navGosearch() {
      this.$emit('bindSearch');
    },
    navback() {
      if (this.isDefault) {
        //自定义返回事件
        this.$emit('defaultBack');
      } else if(this.canback){
        uni.navigateBack({
          delta: 1,
        });
      }else if(this.isFromShare){
        uni.redirectTo({url: '/pages/index/tabbar'})
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "icon.css";

.top-in {
  width: 100%;
  box-sizing: border-box;
  z-index: 999;
  position: fixed;

  &.gradient {
    background-size: 100% 662rpx;
    background: #f9f9f9 linear-gradient(180deg, rgba(54, 141, 255, 0.77) 0%, rgba(125, 182, 255, 0) 36%, rgba(255, 255, 255, 0) 100%) no-repeat fixed !important;
  }
}

.nt-left {
  position: absolute;
  left: 5px;
}

.nl-frame {
  display: flex;
  align-items: center;

}

.nl-icon {
  font-size: 30upx;
  margin: 0 10px;
}

.nl-icon:actibe {
  opacity: 3;
}


.nt-right {
  text-align: center;
}

.nr-text {
  font-size: 32upx;
}
</style>