|
|
@@ -0,0 +1,205 @@
|
|
|
+<!--
|
|
|
+ * @Description: 公共课程
|
|
|
+ * @Author: 空白格
|
|
|
+ * @Date: 2023-04-24 10:52:11
|
|
|
+ * @LastEditors: 空白格
|
|
|
+ * @LastEditTime: 2023-04-24 17:20:19
|
|
|
+ * @FilePath: \veterans_client_web\src\views\PublicClasses\PublicClassesIndex.vue
|
|
|
+ * @Copyright: Copyright (c) 2016~2023 by 空白格, All Rights Reserved.
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="app-main">
|
|
|
+ <div class="BannerBreadcrumb-wrap">
|
|
|
+ <BannerBreadcrumb title="颂军魂" :breadcrumb="true" />
|
|
|
+ </div>
|
|
|
+ <section class="app-main-box">
|
|
|
+ <div class="app-main-box-content">
|
|
|
+ <div class="video-title">颂军魂</div>
|
|
|
+ <div class="video-list" v-if="videoList.length" v-loading="loading">
|
|
|
+ <el-row :gutter="48">
|
|
|
+ <el-col
|
|
|
+ :xs="24"
|
|
|
+ :sm="12"
|
|
|
+ :md="6"
|
|
|
+ :lg="6"
|
|
|
+ :xl="6"
|
|
|
+ v-for="(item, index) in videoList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="video-list-item" @click="videoClick(item)">
|
|
|
+ <div class="video-list-item-image">
|
|
|
+ <el-image
|
|
|
+ style="width: 100%; height: 100%; border-radius: 6px"
|
|
|
+ :src="item.coverUrl"
|
|
|
+ />
|
|
|
+ <el-image
|
|
|
+ class="play-btn"
|
|
|
+ :src="require('@/assets/images/play-btn.png')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="video-list-item-title">{{ item.chapterName }}</div>
|
|
|
+ <div class="video-list-item-subtitle">{{ '颂军魂' }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <el-empty description="暂无数据" v-else />
|
|
|
+ <div class="pagination" v-if="total">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="queryParams.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @current-change="currentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import BannerBreadcrumb from "@/components/BannerBreadcrumb";
|
|
|
+import { getDictData } from "@/api/Dict";
|
|
|
+import { getPublicClassesList } from "@/api/PublicClasses";
|
|
|
+export default {
|
|
|
+ name: "PublicClassesIndex",
|
|
|
+ components: {
|
|
|
+ BannerBreadcrumb,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 8,
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ loading: false,
|
|
|
+ videoList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.initDict();
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initDict() {
|
|
|
+ const { code, data } = await getDictData({ key: "site_type" });
|
|
|
+ if (code === 200) {
|
|
|
+ const type = this.iswap();
|
|
|
+ const { text } = data.find((item) => item.label === type);
|
|
|
+ console.log(location.href.includes(text));
|
|
|
+ if (!location.href.includes(text)) {
|
|
|
+ location.href = text;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async getList() {
|
|
|
+ this.loading = true;
|
|
|
+ const { code, data } = await getPublicClassesList({ id: 1 });
|
|
|
+ if (code === 200) {
|
|
|
+ this.videoList = data?.rows ?? [];
|
|
|
+ this.total = Number(data?.total ?? 0);
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ videoClick(item) {
|
|
|
+ this.$router.push({
|
|
|
+ path: "/classesvideo",
|
|
|
+ query: {
|
|
|
+ videoUrl: item.videoUrl,
|
|
|
+ chapterName: item.chapterName
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ currentChange(page) {
|
|
|
+ this.queryParams.pageNum = page;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ iswap() {
|
|
|
+ var uA = navigator.userAgent.toLowerCase();
|
|
|
+ var ipad = uA.match(/ipad/i) == "ipad";
|
|
|
+ var iphone = uA.match(/iphone os/i) == "iphone os";
|
|
|
+ var midp = uA.match(/midp/i) == "midp";
|
|
|
+ var uc7 = uA.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
|
|
|
+ var uc = uA.match(/ucweb/i) == "ucweb";
|
|
|
+ var android = uA.match(/android/i) == "android";
|
|
|
+ var windowsce = uA.match(/windows ce/i) == "windows ce";
|
|
|
+ var windowsmd = uA.match(/windows mobile/i) == "windows mobile";
|
|
|
+ if (
|
|
|
+ !(
|
|
|
+ ipad ||
|
|
|
+ iphone ||
|
|
|
+ midp ||
|
|
|
+ uc7 ||
|
|
|
+ uc ||
|
|
|
+ android ||
|
|
|
+ windowsce ||
|
|
|
+ windowsmd
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ // PC 端
|
|
|
+ return "Pc";
|
|
|
+ } else {
|
|
|
+ // 移动端
|
|
|
+ return "Mobile";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.video-title {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #222222;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.video-list {
|
|
|
+ // margin-bottom: 40px;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ margin-bottom: 40px;
|
|
|
+
|
|
|
+ &-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 162px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .play-btn {
|
|
|
+ position: absolute;
|
|
|
+ width: 70px;
|
|
|
+ height: 70px;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -35px;
|
|
|
+ margin-top: -35px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-title {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #2e2e2e;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-subtitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #818181;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pagination {
|
|
|
+ text-align: center;
|
|
|
+ :deep(.el-pager .active) {
|
|
|
+ background-color: #ff3939;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
|
|
|
+ background-color: #ff3939;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
