hlm_pl_mall_h5/pages/member/cart/child/CartHeader.vue

<template>
	<view class="div common-header-wrap">
		<view :style="'height:'+navHeight+'px'"></view>
		<view class="common-header-holder"></view>
		<view class="common-header-fixed">
		<title-header />
		<uni-nav-bar title="购物车" class="common-header" left-icon="back" @clickLeft="goBack()">
			<view class="div common-btn btn" slot="right" @click="changeFinishStatus()" v-if="!isFinish && !isEmpty">编辑</view>
			<view class="div common-btn btn" slot="right" @click="changeFinishStatus()" v-if="isFinish">完成</view>
		</uni-nav-bar>
	</view>
	</view>
</template>

<script>
import TitleHeader from '../../../TitleHeader'
import { mapState, mapMutations } from 'vuex'
export default {
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  data(){
    return {
      navHeight: 0,
      isFinish: false // 是否是完成状态 编辑-完成false  ： 完成 - 编辑 true  s - true - false
    }
  },
  components:{
      TitleHeader
  },
  props: {
    issShowTabbar: {
      type: Number,
      default: 0
    },
    isEmpty: {
      type: Boolean,
      default: false
    }
  },

  computed: {

  },

  methods: {
    /*
		 * goBack: 返回上一页
		 */
    goBack () {
      uni.navigateBack({delta:1})
    },

    /*
		 *  changeFinishStatus: 点击编辑和完成向父组件发送事件， 编辑状态， 列表默认全选， 完成状态默认全部不选中, 并改变是否是完成的状态
		 */
    changeFinishStatus () {
      this.isFinish = !this.isFinish
      let data = { isFinish: this.isFinish }
      uni.$emit('change-list-selected', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.cart-header-wrapper {
	position: fixed;
	width: -webkit-fill-available;
	.span {
		position: absolute;
		font-size:$h3;
		color: rgba(78, 84, 93, 1);
		display: inline-block;
		height: 2.2rem;
		line-height: 2.2rem;
		top: 0;
		right: 0.75rem;
	}
}
.btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
</style>