hlm_pl_mall_h5/pages/home/goodsdetail/DetailHeader.vue

<!-- DetailHeader.vue -->
<template>
	<view class="div ui-detail-header-wrapper">
    <title-header />
		<view class="div ui-detail-header">
			<text class="span iconfont" @click="goBack()">&#xe6ee;</text>
			<!-- <view class="div navbar-wrapper">
				<view class="div"
						v-for="(item, key) in data"
						:key="key"
						v-bind:class="{ navbar_active: key == index }"
						v-on:click="changeEvent(key)"
				>
					{{ item.name }}
				</view>
			</view> -->
			<view class="div navbar-wrapper">
				<view class="div" :class="{'navbar_active':navbaractive ==1}"><text @click="goanchor('#goods-swipe')">商品</text></view>
				<view class="div" :class="{'navbar_active':navbaractive ==2}"><text @click="goanchor('#review')">评论</text></view>
				<view class="div" :class="{'navbar_active':navbaractive ==3}"><text @click="goanchor('#mbBody')">详情</text></view>
			</view>
			<text class="span iconfont right" @click="popupMore">&#xe680;<view v-if="showDot" class="div dot"></view></text>
		</view>
		<header-more v-if="share_info" :goods_id="goods_id" :share_info="share_info" v-show="popupVisible" :showDot="showDot"></header-more>
	</view>
</template>

<script>
  import TitleHeader from '../../TitleHeader'
import { header } from './static'
import { getChatCount } from '../../../api/memberInstantMessage'
import { mapState, mapMutations } from 'vuex'
import HeaderMore from '../../HeaderMore'
import { env } from '@/static/config'
import { urlencode } from '@/util/common'
export default {
  data () {
    return {
      navHeight: 0,
      currentUrl:'',
      data: header,
      popupVisible: false,
      showDot:false,
	  navbaractive:1,
    }
  },
  props:['mbBodytop','reviewtop'],
  components: {
    HeaderMore,
    TitleHeader
  },
  computed: {
    ...mapState({
    detailInfo: state => state.goodsdetail.detailInfo,
      goods_id: state => state.goodsdetail.currentProductId,
      index: state => state.goodsdetail.index,
      isOnline:state => state.member.isOnline,
    }),
	  share_info: function () {
    	return this.detailInfo?{ title: this.detailInfo.goods_name, link: this.currentUrl, imgUrl: this.detailInfo.photos[0], desc: this.detailInfo.goods_advword }:false
	  },
	  listenChange(){
	  		   let mbBodytop = this.mbBodytop
	  		   let reviewtop = this.reviewtop
	  		   return { mbBodytop, reviewtop}
	  	  }
  },
  mounted () {
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().top
    // #endif
    var pages = getCurrentPages()
      var page = pages[pages.length - 1]
      this.currentUrl=env.H5_HOST + page.route+(page.options?('?'+urlencode(page.options)):'')
    this.changeIndex(0)
    this.saveNumber(1)
    if(this.isOnline){
    getChatCount().then(res=>{
    if(res.result){
    if(!this.showDot){
      this.showDot={}
    }
    this.showDot['chat']=true
    }
    })
    }
  },
  methods: {
    ...mapMutations({
      changeIndex: 'changeIndex',
      saveNumber: 'saveNumber'
    }),
    popupMore () {
      if (!this.popupVisible) {
        this.popupVisible = true
      } else {
        this.popupVisible = false
      }
    },
    changeEvent (index) {
      this.changeIndex(index)
    },
	goanchor(id){
			document.querySelector(id).scrollIntoView({
				behavior:"smooth"
			});
		},
    goBack () {
      uni.navigateBack({delta:1})
    }
  },
   watch:{
  	listenChange(val){
  		val.mbBodytop = val.mbBodytop - 100
  		val.reviewtop = val.reviewtop - 100
  		if(val.mbBodytop > 0 && val.reviewtop >0){
  			this.navbaractive = 1
  		}else if(val.reviewtop < 0 && val.mbBodytop > 0){
  			this.navbaractive = 2
  		}else if(val.reviewtop < 0 && val.mbBodytop < 0){
  			this.navbaractive = 3
  		}
  	}
	}
}
</script>

<style lang="scss" scoped>
  .ui-detail-header-wrapper{
	position: fixed;
  top:0;
	padding-top: var(--status-bar-height);
	background: rgba(255, 255, 255, 1);
	left: 0;
	right: 0;
  z-index: 10;
  }
.dot{position:absolute;width:.5rem;height:.5rem;background:red;border-radius:50%;top:.2rem;right:0;}
.ui-detail-header {
	padding: 0 0.45rem;
	// height:3.2rem;
	color: #55595f;
	font-size:$h2;
	width: auto;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-basis: auto;
	.iconfont {
		width: 1.2rem;
		font-size:$h2;
		height: $headerHeight;
		line-height:$headerHeight;
		cursor: pointer;
		position: absolute;
		left: 0.45rem;
		bottom: 0;
	}
	.iconfont.right{left:auto;right:0.45rem}
	.div.navbar-wrapper {
		line-height: $headerHeight;
		height: $headerHeight;
		.div {
			// line-height: 2.1rem;
			border-bottom: 0;
			display: inline-block;
			margin-right:2.4rem;
			color: #55595f;
			background-color: #fff;
			position: relative;
			&.navbar_active {
				color: $primaryColor;
				&::after{content:'';display: block;height: .1rem;width: 1rem;position: absolute;bottom:0;left:50%;margin-left:-.5rem;background: $primaryColor}
			}
			&:last-child {
				margin-right: 0;
			}
			&:focus {
				outline: none;
			}
		}
	}
}

</style>