peiwan-uniapp/pages/clerk/detail/components/detail-navbar.vue

<template>
  <su-fixed alway :bgStyles="{ background: '#fff' }" :val="0" noNav opacity :placeholder="false">
    <su-status-bar />
    <view
      class="ui-bar ss-flex ss-col-center ss-row-between ss-p-x-20"
      :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
    >
      <!-- 左 -->
      <view class="icon-box ss-flex">
        <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
          <text :class="tabOpacityVal > 0.4 ? 'black' : ''" class="sicon-back" v-if="hasHistory" />
          <text :class="tabOpacityVal > 0.4 ? 'black' : ''" class="sicon-home" v-else />
        </view>
        <view class="line"></view>
        <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
          <text :class="tabOpacityVal > 0.4 ? 'black' : ''" class="sicon-more" />
        </view>
      </view>
      <!-- 中 -->
      <view class="detail-tab-card ss-flex-1" :style="[{ opacity: tabOpacityVal }]">
        <view class="tab-box ss-flex ss-col-center ss-row-around">
          <view
            class="tab-item ss-flex-1 ss-flex ss-row-center ss-col-center"
            v-for="item in tabList"
            :key="item.value"
            @tap="onTab(item)"
          >
            <view class="tab-title" :class="currentTab === item.value ? 'cur-tab-title' : ''">
              {{ item.label }}
            </view>
            <view v-show="currentTab === item.value" class="tab-line"></view>
          </view>
        </view>
      </view>
      <!-- #ifdef MP -->
      <view :style="[capsuleStyle]"></view>
      <!-- #endif -->
    </view>
  </su-fixed>
</template>

<script>
	import sheep from '@/sheep';
	import { showMenuTools, closeMenuTools } from '@/sheep/hooks/useModal';
	export default {
		components: {
			
		},
		props: {
			title: {
				type: String,
				default: '',
			},
			//滚动条滚动距离
			scrollTop: {
				type: [Number, String],
				default: 0
			},
		},
		data() {
			return {
				sys_navBar: sheep.$platform.navbar,
				sys_statusBar: sheep.$platform.device.statusBarHeight,
				hasHistory: sheep.$router.hasHistory(),
				tabList: [
				  {
				    label: '价格',
				    value: 1,
				  },
				  {
				    label: '动态',
				    value: 2,
				  },
				  {
				    label: '评价',
				    value: 3,
				  },
				],
				capsuleStyle: {
				  width: sheep.$platform.capsule.width + 'px',
				  height: sheep.$platform.capsule.height + 'px',
				},
			}
		},
		computed: {
			tabOpacityVal() {
				return this.scrollTop > sheep.$platform.navbar ? 1 : this.scrollTop * 0.01;;
			},
			currentTab() {
				return sheep.$store('sys').clerkTabIndex;
			},
		},
		methods: {
			onClickLeft() {
				if (this.hasHistory) {
					sheep.$router.back();
				} else {
					sheep.$router.go('/pages/tabbar/index');
				}
			},
			onClickRight() {
				showMenuTools();
			},
			onTab(e) {
				this.$emit('onTab', e.value);
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.icon-box {
	  box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
	  border-radius: 30rpx;
	  width: 134rpx;
	  height: 56rpx;
	  margin-left: 8rpx;
	  border: 1px solid rgba(#fff, 0.4);
	  .line {
	    width: 2rpx;
	    height: 24rpx;
	    background: #e5e5e7;
	  }
	  .sicon-back {
	    font-size: 32rpx;
	    color: #fff;
	  }
	  .sicon-home {
	    font-size: 32rpx;
	    color: #fff;
	  }
	  .sicon-more {
	    font-size: 32rpx;
	    color: #fff;
	  }
	  
	  .black {
		  color: #000;
	  }
	  
	  .icon-button {
	    width: 67rpx;
	    height: 56rpx;
	    &-left:hover {
	      background: rgba(0, 0, 0, 0.16);
	      border-radius: 30rpx 0px 0px 30rpx;
	    }
	    &-right:hover {
	      background: rgba(0, 0, 0, 0.16);
	      border-radius: 0px 30rpx 30rpx 0px;
	    }
	  }
	}
	.left-box {
	  position: relative;
	  width: 60rpx;
	  height: 60rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  .circle {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 60rpx;
	    height: 60rpx;
	    background: rgba(#fff, 0.6);
	    border: 1rpx solid #ebebeb;
	    border-radius: 50%;
	    box-sizing: border-box;
	    z-index: -1;
	  }
	}
	.right {
	  position: relative;
	  width: 60rpx;
	  height: 60rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  .circle {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 60rpx;
	    height: 60rpx;
	    background: rgba(#ffffff, 0.6);
	    border: 1rpx solid #ebebeb;
	    box-sizing: border-box;
	    border-radius: 50%;
	    z-index: -1;
	  }
	}
	.detail-tab-card {
	  width: 50%;
	  .tab-item {
	    height: 80rpx;
	    position: relative;
	    z-index: 11;
	
	    .tab-title {
	      font-size: 30rpx;
	    }
	
	    .cur-tab-title {
	      font-weight: $font-weight-bold;
	    }
	
	    .tab-line {
	      width: 60rpx;
	      height: 6rpx;
	      border-radius: 6rpx;
	      position: absolute;
	      left: 50%;
	      transform: translateX(-50%);
	      bottom: 10rpx;
	      background-color: var(--ui-BG-Main);
	      z-index: 12;
	    }
	  }
	}
	

</style>