icve-urc 1.0.0

package/src/components/AliPlayer.vue

@@ -0,0 +1,158 @@
+<template>
+  <!-- 播放器容器 -->
+  <div id="player-container"></div>
+</template>
+
+<script>
+export default {
+  name: "AliPlayer",
+  props: {
+    source: {
+      // 视频源
+      type: Object,
+      required: true,
+    },
+    options: {
+      // 其他配置项
+      type: Object,
+      default: () => ({}),
+    },
+    savedProgress: {
+      // 上次播放进度
+      type: Number,
+      default: 0,
+    },
+    // 是否拖动
+    isDrag: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      player: null,
+      progress: this.savedProgress, // 当前播放进度
+      lastValidTime: this.savedProgress, // 新增：记录上次有效的播放时间
+      whetherDragAndDropIsAllowed: this.isDrag,
+      videoTime: 0, // 新增：记录当前播放时间
+    };
+  },
+  created() {},
+  mounted() {
+    this.initPlayer();
+  },
+  beforeDestroy() {
+    this.destroyPlayer();
+  },
+  methods: {
+    initPlayer() {
+      const config = {
+        id: "player-container",
+        muted: true, // 静音状态下更可能遵守autoplay设置
+        isLive: false, // 是否为直播
+        playsinline: true, // 内联播放（iOS）
+        preload: true,
+        controlBarVisibility: "hover",
+        useH5Prism: true,
+        ...this.options,
+        ...this.source,
+        autoplay: false, // 自动播放
+      };
+      this.player = new Aliplayer(config, (player) => {
+        // 设置上次播放进度
+        this.$emit("player", this.player); // 触发player事件，传递player实例
+        if (this.progress > 0) {
+          this.$nextTick(() => {
+            // 可选：显示继续播放提示
+            this.$confirm(
+              `检测到上次播放至${this.formatTime(this.progress)}，是否继续？`,
+              "提示",
+              {
+                confirmButtonText: "继续播放",
+                cancelButtonText: "重新开始",
+              }
+            )
+              .then(() => {
+                this.player.seek(this.progress);
+              })
+              .catch(() => {
+                this.player.seek(0); // 重新开始
+              });
+          });
+        }
+        this.$nextTick(() => {
+          setTimeout(() => {
+            this.player.pause();
+            this.$emit("loadedmetadata", this.player.getDuration());
+          }, 1000);
+        });
+      });
+      // 监听 timeupdate 事件，禁止快进
+      this.player.on("timeupdate", () => {
+        const currentTime = this.player.getCurrentTime();
+        if (
+          currentTime > this.lastValidTime &&
+          this.whetherDragAndDropIsAllowed
+        ) {
+          var num =
+            parseFloat(this.player.getCurrentTime()) -
+            parseFloat(this.lastValidTime);
+
+          if (num < 1) {
+            //正常播放时，记录当前播放时间
+            this.lastValidTime = this.player.getCurrentTime();
+            this.videoTime = this.player.getCurrentTime();
+          } else {
+            this.videoTime = this.lastValidTime;
+            this.player.seek(this.lastValidTime);
+          }
+        }
+      });
+      // 监听事件
+      this.player.on("play", () => {
+        const currentTime = this.player.getCurrentTime();
+        this.$emit("play", currentTime);
+      });
+
+      this.player.on("pause", () => {
+        const currentTime = this.player.getCurrentTime();
+        this.$emit("pause", currentTime);
+      });
+
+      this.player.on("ended", () => {
+        const currentTime = this.player.getCurrentTime();
+        this.$emit("ended", currentTime);
+      });
+    },
+    formatTime(seconds) {
+      const mins = Math.floor(seconds / 60);
+      const secs = Math.floor(seconds % 60);
+      return `${mins}分${secs}秒`;
+    },
+    destroyPlayer() {
+      if (this.player) {
+        this.player.dispose();
+        this.player = null;
+      }
+    },
+  },
+  watch: {
+    source: {
+      deep: true,
+      handler(newVal) {
+        if (this.player) {
+          this.player.loadByUrl(newVal.source, newVal.vid, newVal.playauth);
+          // 视频源变更时，重置上次有效时间
+          this.lastValidTime = 0;
+        }
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+#player-container {
+  width: 100%;
+}
+</style>

package/src/components/Pagination/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div
+    :class="{ hidden: hidden }"
+    class="pagination-container"
+  >
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      type: Number,
+      default: 1,
+    },
+    limit: {
+      type: Number,
+      default: 20,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      },
+    },
+    // 移动端页码按钮的数量端默认值5
+    pagerCount: {
+      type: Number,
+      default: document.body.clientWidth < 992 ? 5 : 7,
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper',
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      },
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      if (this.currentPage * val > this.total) {
+        this.currentPage = 1
+      }
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+::v-deep .el-pagination__jump {
+  display: none !important;
+}
+</style>