crm-mobile/components/wk-nav-bar/wk-nav-bar.vue

<template>
  <view class="wk-nav-bar linear-gradient">
    <view v-if="showLeft" class="left">
      <button class="button white-btn" @click="_handleBack">
        <view class="back-icon">
          <text class="wk wk-arrow-right icon" />
        </view>
      </button>

      <!-- #ifdef MP-WEIXIN -->
      <slot />
      <button
        v-if="commands.length > 0"
        class="button white-btn command-btn"
        @click="handleToggleCommand">
        <image :src="$static('images/icon/list.png')" class="list-icon" />
      </button>
      <!-- #endif -->
    </view>

    <view class="title">
      {{ title }}
    </view>

    <view class="right">
      <!-- #ifndef MP-WEIXIN -->
      <button
        v-if="commands.length > 0"
        class="button white-btn"
        @click="handleToggleCommand">
        <text class="wk wk-more icon" />
      </button>

      <slot />
      <!-- #endif -->
    </view>

    <view
      v-if="showCommand"
      class="command-popup"
      @click="handleToggleCommand">
      <view class="command-mask" />
      <view class="command-body">
        <view
          v-for="(command, index) in commands"
          :key="index"
          class="command-item"
          @click="handleCommand(command)">
          <text
            v-if="command.icon"
            :class="command.icon"
            class="icon wk" />
          <image
            v-else-if="command.imgIcon"
            :src="$static(`images/more/${command.imgIcon}.png`)"
            alt=""
            class="img-icon" />
          <text class="label">
            {{ command.label }}
          </text>
        </view>
      </view>
    </view>

    <uni-popup ref="popup" type="dialog">
      <wk-popup-expiration />
    </uni-popup>
  </view>
</template>

<script>
	/**
	 * 头部导航控制
	 * @author yxk
	 * @property {String} title 导航栏标题
	 * @property {Boolean} showLeft 是否显示左侧返回按钮，默认 true 显示
	 * @property {Boolean} pervent 是否阻止默认返回事件，配合 back 回调事件使用
	 * @property {Boolean} refreshPrev 在navigateBack返回时是否设置上一页刷新标志，默认 false 不设置
	 * @property {Array<Command>} commandList 右侧更多操作命令
	 *  @property {String} command.icon 命令字体图标
	 *  @property {String} command.label 命令名称
	 *  @property {Boolean} command.noCheck 命令是否校验权限，为 true 时不校验权限
	 *  @property {String} command.auth 命令权限值
	 * @event {Function} back 点击返回按钮时触发，如果 pervent 设置为 true 则不会触发默认返回需手动调用返回
	 * @event {Function} command 点击更多中的命令时触发，event.detail = 当前点击的命令
	 */
  import { mapGetters } from 'vuex'

  export default {
    name: 'WkNavBar',
    inheritAttrs: false,
    props: {
      title: {
        type: String,
        default: ''
      },
      showLeft: {
        type: Boolean,
        default: true
      },
      pervent: {
        type: Boolean,
        default: false
      },
      commandList: {
        type: Array,
        default: () => []
      },
      refreshPrev: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showCommand: false,
        commands: []
      }
    },
    computed: {
      ...mapGetters({
        showExpiration: 'user/showExpiration'
      })
    },
    watch: {
      authData: {
        handler(val) {
          if (!val) return
          this.calcCommands()
        },
        deep: true
      },
      commandList: {
        handler() {
          this.calcCommands()
        },
        deep: true
      },
      showExpiration: {
        handler() {
          if (this.showExpiration) {
            this.$nextTick(function() {
              this.$refs.popup.open()
            })
          }
        },
        immediate: true,
        deep: true
      }
    },
    created() {
      this.calcCommands()
    },
    methods: {
      _handleBack() {
        this.$emit('back')
        if (this.pervent) return
        if (this.refreshPrev) {
          this.$refreshAndToPrev(this)
        } else {
          this.$Router.navigateBack()
        }
      },

      calcCommands() {
        this.showCommand = false
        this.commands = []
        this.commandList.forEach(item => {
          console.log(item.label, item.auth, this.$auth(item.auth))
          if (item.noCheck || !item.auth) {
            // 如果不需要进行权限校验
            this.commands.push(item)
          } else if (this.$auth(item.auth)) {
            // 权限校验
            this.commands.push(item)
          }
        })
      },

      handleToggleCommand() {
        if (this.commands.length === 0) {
          this.showCommand = false
          return
        }
        this.showCommand = !this.showCommand
      },

      handleCommand(command) {
        this.$emit('command', command)
      },

      handleCloseExpiration(next) {
        next()
      }
    }
  }
</script>

<style scoped lang="scss">
.wk-nav-bar {
  position: relative;
  width: 100%;
  height: 88rpx;
  font-size: 32rpx;
  color: white;
  @include center;

  .left, .right {
    position: absolute;
    top: 0;
    height: 100%;
    @include center;
  }

  ::v-deep .button {
    .icon {
      font-size: 30rpx;
      color: white;
      font-weight: bold;
    }
  }

  .left {
    left: 10rpx;
    .back-icon {
      height: 100%;
      transform: rotate(180deg);
      font-weight: bold;
      @include center;
    }

    .command-btn {
      padding: 16rpx 15rpx;
      @include center;
      .list-icon {
        width: 40rpx;
        height: 40rpx;
        transform: translateY(3rpx);
      }
    }
  }

  .right {
    right: 10rpx;
    @include right;
    .button {
      margin-left: 26rpx;
      &:first-child {
        margin-left: 0;
      }
    }
  }
}

.command-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2020;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-size: 26rpx;
  .command-mask {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0);
  }
  .command-body {
    position: absolute;
    /* #ifdef MP-WEIXIN */
    left: 20rpx;
    /* #endif */
    /* #ifndef MP-WEIXIN */
    right: 20rpx;
    /* #endif */
    top: calc(var(--status-bar-height) + 75rpx);
    min-width: 40%;
    background-color: white;
    box-shadow: 0 0 15rpx 0 rgba(0,0,0,.2);
    border-radius: 10rpx;
    padding: 15rpx 30rpx;
    overflow: hidden;
    .command-item {
      color: #333;
      border-bottom: 1rpx solid $border-color;
      padding: 26rpx 18rpx;
      @include left;
      .icon {
        color: #999999;
        font-size: 32rpx;
        margin-right: 20rpx;
      }
      .img-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }
      &:last-child {
        border-bottom: 0 none;
      }
    }
  }
}
</style>