veterans_H5/h5_web/components/wyb-pagination/wyb-pagination.vue

<template>
  <view
    class="wyb-pagination-box"
    :style="{
      paddingLeft: padding + 'rpx',
      paddingRight: padding + 'rpx',
      '--hover': autoHover
    }"
  >
    <view class="wyb-pagination-left" :style="{ opacity: currentPage === 1 ? 0.5 : 1 }">
      <view
        v-if="showFirst"
        :class="'wyb-pagination-first-page-' + (showIcon ? 'i' : 't')"
        :style="btnStyleStr"
        :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'"
        @tap="onPageBtnTap('first-page')"
      >
        <view v-if="showIcon" class="iconfont icon-shuangjiantou left-arrow" />
        <text v-else>{{ firstText }}</text>
      </view>
      <view
        :class="'wyb-pagination-prev-page-' + (showIcon ? 'i' : 't')"
        :style="btnStyleStr"
        :hover-class="currentPage === 1 ? '' : 'wyb-pagination-hover'"
        @tap="onPageBtnTap('prev-page')"
      >
        <view v-if="showIcon" class="iconfont icon-danjiantou left-arrow" />
        <text v-else>{{ prevText }}</text>
      </view>
    </view>
    <view class="wyb-pagination-info" @tap.stop="onInfoTap">
      <view class="wyb-pagination-num" v-if="!infoClick">
        <text :style="{ color: currentColor }">{{ currentPage }}</text>
        <text class="wyb-pagination-span" :style="{ color: pageInfoColor }">/</text>
        <text :style="{ color: pageInfoColor }">{{ totalPage }}</text>
        <text v-if="showTotalItem" class="wyb-pagination-info-total" :style="{ color: RGBChange(pageInfoColor, 0.5, 'light') }">
          ({{ totalItems }})
        </text>
      </view>
      <!-- #ifndef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
      <view class="wyb-pagination-input" v-else>
        <input
          type="number"
          v-model="inputPage"
          :onpaste="false"
          :focus="infoFocus"
          :value="currentPage"
          :style="{ color: currentColor }"
          :cursor-spacing="cursorSpacing"
          @confirm="onInfoConfirm"
          @blur="onInfoBlur"
        />
      </view>
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN || APP-VUE || APP-NVUE || APP-PLUS || APP-PLUS-NVUE -->
      <view class="wyb-pagination-input" v-else>
        <input
          type="number"
          v-model="inputPage"
          :focus="infoFocus"
          :name="currentPage"
          :style="{ color: currentColor }"
          :cursor-spacing="cursorSpacing"
          @confirm="onInfoConfirm"
          @blur="onInfoBlur"
        />
      </view>
      <!-- #endif -->
    </view>
    <view class="wyb-pagination-right" :style="{ opacity: currentPage === totalPage ? 0.5 : 1 }">
      <view
        :class="'wyb-pagination-next-page-' + (showIcon ? 'i' : 't')"
        :style="btnStyleStr"
        :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'"
        @tap="onPageBtnTap('next-page')"
      >
        <view v-if="showIcon" class="iconfont icon-danjiantou right-arrow" />
        <text v-else>{{ nextText }}</text>
      </view>
      <view
        v-if="showLast"
        :class="'wyb-pagination-last-page-' + (showIcon ? 'i' : 't')"
        :style="btnStyleStr"
        :hover-class="currentPage === totalPage ? '' : 'wyb-pagination-hover'"
        @tap="onPageBtnTap('last-page')"
      >
        <view v-if="showIcon" class="iconfont icon-shuangjiantou right-arrow" />
        <text v-else>{{ lastText }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentPage: this.current || 1,
      inputPage: '',
      infoClick: false,
      infoFocus: false
    };
  },
  computed: {
    totalPage() {
      return Math.ceil(parseFloat(this.totalItems) / parseFloat(this.pageItems));
    },
    autoHover() {
      if (this.btnStyle.backgroundColor) {
        return this.RGBChange(this.btnStyle.backgroundColor, 0.1, 'dark');
      } else {
        return this.RGBChange('#f8f8f8', 0.05, 'dark');
      }
    },
    btnStyleStr() {
      let styleStr = '';
      for (let key in this.btnStyle) {
        styleStr += `${this.sortFieldMatch(key)}: ${this.btnStyle[key]}; `;
      }
      return styleStr;
    }
  },
  watch: {
    current(val) {
      const oPage = this.currentPage;
      if (!Object.is(oPage, val)) {
        this.currentPage = val;
        this.$emit('change', {
          type: 'prop-page',
          current: this.currentPage
        });
      }
    }
  },
  props: {
    totalItems: {
      type: [String, Number],
      default: 20
    },
    pageItems: {
      type: [String, Number],
      default: 5
    },
    current: {
      type: Number,
      default: 1
    },
    prevText: {
      type: String,
      default: '上一页'
    },
    nextText: {
      type: String,
      default: '下一页'
    },
    firstText: {
      type: String,
      default: '首页'
    },
    lastText: {
      type: String,
      default: '尾页'
    },
    pageInfoColor: {
      type: String,
      default: '#494949'
    },
    currentColor: {
      type: String,
      default: '#007aff'
    },
    padding: {
      type: [String, Number],
      default: 15
    },
    btnStyle: {
      type: Object,
      default() {
        return {};
      }
    },
    showIcon: {
      type: Boolean,
      default: false
    },
    showTotalItem: {
      type: Boolean,
      default: false
    },
    showFirst: {
      type: Boolean,
      default: true
    },
    showLast: {
      type: Boolean,
      default: true
    },
    couldInput: {
      type: Boolean,
      default: true
    },
    cursorSpacing: {
      type: Number,
      default: 0
    }
  },
  methods: {
    onPageBtnTap(type) {
      switch (type) {
        case 'first-page':
          if (!Object.is(this.currentPage, 1)) {
            this.currentPage = 1;
            this.$emit('change', { type, current: this.currentPage });
          }
          break;
        case 'prev-page':
          if (!Object.is(this.currentPage, 1)) {
            this.currentPage--;
            this.$emit('change', { type, current: this.currentPage });
          }
          break;
        case 'next-page':
          if (!Object.is(this.currentPage, this.totalPage)) {
            this.currentPage++;
            this.$emit('change', { type, current: this.currentPage });
          }
          break;
        case 'last-page':
          if (!Object.is(this.currentPage, this.totalPage)) {
            this.currentPage = this.totalPage;
            this.$emit('change', { type, current: this.currentPage });
          }
          break;
      }
    },
    onInfoTap() {
      if (this.couldInput) {
        this.infoClick = true;
        this.inputPage = this.currentPage;
        setTimeout(() => {
          this.infoFocus = true;
        }, 10);
      }
    },
    onInfoConfirm(e) {
      let input = e.detail.value;
      const oPage = this.currentPage;
      if (parseFloat(input) > this.totalPage) {
        this.currentPage = this.totalPage;
      } else if (parseFloat(input) < 1) {
        this.currentPage = 1;
      } else if (input === '') {
        this.currentPage = oPage;
      } else {
        this.currentPage = parseFloat(input);
      }
      if (!Object.is(oPage, this.currentPage)) {
        this.$emit('change', {
          type: 'input-page',
          current: this.currentPage
        });
      }
      this.infoClick = false;
      this.$nextTick(() => {
        this.infoFocus = false;
      });
    },
    onInfoBlur(e) {
      let input = e.detail.value;
      const oPage = this.currentPage;
      if (parseFloat(input) > this.totalPage) {
        this.currentPage = this.totalPage;
      } else if (parseFloat(input) < 1) {
        this.currentPage = 1;
      } else if (input === '') {
        this.currentPage = oPage;
      } else {
        this.currentPage = parseFloat(input);
      }
      if (!Object.is(oPage, this.currentPage)) {
        this.$emit('change', {
          type: 'input-page',
          current: this.currentPage
        });
      }
      this.infoClick = false;
      this.$nextTick(() => {
        this.infoFocus = false;
      });
    },
    RGBChange(color, level, type) {
      // 判断颜色类型
      let r = 0,
        g = 0,
        b = 0,
        hasAlpha = false,
        alpha = 1;
      if (color.indexOf('#') !== -1) {
        // hex转rgb
        if (color.length === 4) {
          let arr = color.split('');
          color = '#' + arr[1] + arr[1] + arr[2] + arr[2] + arr[3] + arr[3];
        }
        let color16List = [color.substring(1, 3), color.substring(3, 5), color.substring(5, 7)];
        r = parseInt(color16List[0], 16);
        g = parseInt(color16List[1], 16);
        b = parseInt(color16List[2], 16);
      } else {
        hasAlpha = color.indexOf('a') !== -1;
        let root = color.slice();
        let idx = root.indexOf('(') + 1;
        root = root.substring(idx);
        let firstDotIdx = root.indexOf(',');
        r = parseFloat(root.substring(0, firstDotIdx));
        root = root.substring(firstDotIdx + 1);
        let secondDotIdx = root.indexOf(',');
        g = parseFloat(root.substring(0, secondDotIdx));
        root = root.substring(secondDotIdx + 1);
        if (hasAlpha) {
          let thirdDotIdx = root.indexOf(',');
          b = parseFloat(root.substring(0, thirdDotIdx));
          alpha = parseFloat(root.substring(thirdDotIdx + 1));
        } else {
          b = parseFloat(root);
        }
      }

      let rgbc = [r, g, b];
      // 减淡或加深
      for (var i = 0; i < 3; i++)
        type === 'light' ? (rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])) : (rgbc[i] = Math.floor(rgbc[i] * (1 - level)));

      if (hasAlpha) {
        return `rgba(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]}, ${alpha})`;
      } else {
        return `rgb(${rgbc[0]}, ${rgbc[1]}, ${rgbc[2]})`;
      }
    },
    sortFieldMatch(field) {
      const stringArray = field.split('');
      let newField = field;
      stringArray.forEach((t) => {
        if (/[A-Z]/.test(t)) {
          newField = field.replace(t, `-${t.toLowerCase()}`);
        }
      });
      return newField;
    }
  }
};
</script>

<style>
@import 'iconfont.css';
.wyb-pagination-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.wyb-pagination-left {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.wyb-pagination-right {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.wyb-pagination-first-page-t,
.wyb-pagination-prev-page-t,
.wyb-pagination-next-page-t,
.wyb-pagination-last-page-t {
  font-size: 27rpx;
  padding: 14rpx 25rpx;
  box-sizing: border-box;
  background-color: #f8f8f8;
  border: 1px solid #e5e5e5;
  white-space: nowrap;
}

.wyb-pagination-first-page-i,
.wyb-pagination-prev-page-i,
.wyb-pagination-next-page-i,
.wyb-pagination-last-page-i {
  font-size: 27rpx;
  padding: 14rpx 33rpx;
  box-sizing: border-box;
  background-color: #f8f8f8;
  border: 1px solid #e5e5e5;
  white-space: nowrap;
}

.wyb-pagination-first-page-t,
.wyb-pagination-first-page-i {
  margin-right: 15rpx;
}

.wyb-pagination-last-page-t,
.wyb-pagination-last-page-i {
  margin-left: 15rpx;
}

.wyb-pagination-info {
  font-size: 33rpx;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.wyb-pagination-input input {
  text-align: center;
}

.wyb-pagination-span {
  margin: 0 2rpx;
}

.wyb-pagination-info-total {
  margin-left: 10rpx;
}

.wyb-pagination-first-page-t:active,
.wyb-pagination-prev-page-t:active,
.wyb-pagination-next-page-t:active,
.wyb-pagination-last-page-t:active,
.wyb-pagination-first-page-i:active,
.wyb-pagination-prev-page-i:active,
.wyb-pagination-next-page-i:active,
.wyb-pagination-last-page-i:active {
  background-color: var(--hover) !important;
}

.left-arrow {
  transform: scale(0.9);
  margin-right: 5rpx;
}

.right-arrow {
  margin-left: 5rpx;
  transform: scale(0.9) rotate(180deg);
  -webkit-transform: scale(0.8) rotate(180deg);
}
</style>