From 51a35a1cea7a381c33c86e9a9697ecef602c773f Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期日, 24 八月 2025 16:25:37 +0800
Subject: [PATCH] 激活列样式调整
---
src/views/personalCenter/class.vue | 446 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 443 insertions(+), 3 deletions(-)
diff --git a/src/views/personalCenter/class.vue b/src/views/personalCenter/class.vue
index 7293e29..f6a6dff 100644
--- a/src/views/personalCenter/class.vue
+++ b/src/views/personalCenter/class.vue
@@ -1,7 +1,447 @@
<template>
- <div class="myBook">
- <div class="myBook_header">
- <div class="myBook_header_title">鎴戠殑鐝骇</div>
+ <div class="coursePage">
+ <div class="personalPage-title">鎴戠殑鐝骇</div>
+ <div class="tabs">
+ <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+ <el-tab-pane :label="'褰撳墠鐝骇锛�' + calssList.length + '锛�'" name="1"></el-tab-pane>
+ <!-- <el-tab-pane label="鍘嗗彶鐝骇(5)" name="2"></el-tab-pane> -->
+ </el-tabs>
+ </div>
+ <div class="headerBox">
+ <div class="searchBox">
+ <el-input v-model="searchKey" clearable @clear="searchList()" placeholder="璇疯緭鍏ュ叧閿瓧">
+ <template #append>
+ <el-button type="primary" class="searchBtn" @click="searchList()" :icon="Search" />
+ </template>
+ </el-input>
+ </div>
+ <el-button type="primary" class="applyStartClasses" @click="openJoin()">鍔犲叆鐝骇</el-button>
+ <el-dialog v-model="dialogVisible" title="鍔犲叆鐝骇" width="500">
+ <div class="codeContent">
+ <span>閭�璇风爜锛�</span>
+ <el-input style="width: 330px" v-model="codeText" placeholder="璇疯緭鍏ラ個璇风爜" />
+ <el-button type="primary" @click="getClassDetail">纭</el-button>
+ </div>
+ <div class="classInfo" v-if="classDetail?.name">
+ <div class="itemCon">
+ <span>鐝骇鍚嶇О锛�</span>
+ <span>{{ classDetail.name }}</span>
+ </div>
+ <div class="itemCon">
+ <span>鐝骇浜烘暟锛�</span>
+ <span>{{ classDetail.memberCount }} / {{ classDetail.maxUserCount }}</span>
+ </div>
+ <div class="itemCon">
+ <span>寮�璇炬椂闂达細</span>
+ <span
+ >{{ moment(classDetail.beginDate).format('YYYY-MM-DD') }} -
+ {{ moment(classDetail.endDate).format('YYYY-MM-DD') }}</span
+ >
+ </div>
+ </div>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="dialogVisible = false"> 鍙栨秷 </el-button>
+ <el-button type="primary" @click="joinClass()"> 纭 </el-button>
+ </div>
+ </template>
+ </el-dialog>
+ </div>
+ <div class="courseListBox" v-if="calssList.length > 0 && !isLoading">
+ <div class="courseItem" v-for="(item, index) in calssList" :key="index">
+ <div class="itemHeader">
+ <div class="title">{{ item.name }}</div>
+ <div class="courseId">锛圛D锛歿{ item.id }}锛�</div>
+ <!-- <div class="copyIdBtn" @click="copy(item.refCode)">澶嶅埗閭�璇风爜</div> -->
+ </div>
+ <div class="itemInfo" @click="goClassManage(item)">
+ <div class="infoBox">
+ <p>
+ 鐘舵�侊細<span v-if="item.userState == 'WaitValid'" style="color: #ef9f29"> 瀹℃牳涓� </span
+ ><span v-if="item.userState == 'Normal'" style="color: #1dbd11"> 杩涜涓� </span
+ ><span v-if="item.userState == 'Reject'" style="color: red"> 鏈�氳繃 </span>
+ </p>
+ <p>鐝骇浜烘暟锛歿{ item.memberCount }} / {{ item.maxUserCount }}</p>
+ <p>鏈夋晥鏈燂細{{ item.classTime }}</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <el-empty description="鏆傛棤鏁版嵁" v-if="calssList.length == 0 && !isLoading" />
+ <div style="min-height: 200px" v-if="isLoading" v-loading="isLoading"></div>
+ <div class="pageBox">
+ <el-pagination
+ v-model:current-page="pages.currentPage"
+ :page-size="pages.pageSize"
+ :size="'small'"
+ :disabled="pages.count <= 1"
+ layout="total, prev, pager, next"
+ :total="pages.count"
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ />
</div>
</div>
</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, inject, watch } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { getPublicImage } from '@/assets/js/middleGround/tool.js'
+import moment from 'moment'
+import useClipboard from 'vue-clipboard3'
+
+const { toClipboard } = useClipboard()
+const MG: any = inject('MG')
+const config: any = inject('config')
+const router = useRouter()
+const activeName = ref('1')
+
+interface ClassItem {
+ id: string
+ name: string
+ memberCount: number
+ maxUserCount: number
+ userState: string
+ beginDate: string
+ endDate: string
+ classTime: string
+ linkProductDto: {
+ product: {
+ name: string
+ icon: string
+ }
+ }
+}
+
+const calssList = ref<ClassItem[]>([])
+const searchKey = ref('')
+const codeText = ref('')
+const dialogVisible = ref(false)
+const classDetail = ref()
+const isLoading = ref(true)
+
+let pages = reactive({
+ currentPage: 1,
+ page: 1,
+ pageSize: 6,
+ count: 0,
+ loading: false,
+})
+
+onMounted(() => {
+ getCurrentClassList()
+})
+
+// 鍒嗛〉
+const handleSizeChange = (val: number) => {
+ pages.pageSize = val
+ getCurrentClassList()
+}
+
+const handleCurrentChange = (val: number) => {
+ pages.page = val
+ pages.currentPage = val
+ getCurrentClassList()
+}
+
+const handleClick = (val: any) => {
+ activeName.value = val
+}
+
+const openJoin = () => {
+ dialogVisible.value = true
+ classDetail.value = null
+ codeText.value = ''
+}
+
+// 鎼滅储
+const searchList = () => {
+ pages.page = 1
+ pages.currentPage = 1
+ getCurrentClassList()
+}
+
+// 澶嶅埗
+const copy = async (text: string) => {
+ try {
+ await toClipboard(text)
+ ElMessage({
+ message: '澶嶅埗鎴愬姛',
+ type: 'success',
+ })
+ } catch (e) {
+ console.error(e)
+ }
+}
+
+// 鍔犲叆鐝骇
+const joinClass = () => {
+ if (!codeText.value) {
+ ElMessage({
+ message: '鏃犳晥鐨勯個璇风爜',
+ type: 'error',
+ })
+ return false
+ }
+ const data = { refCode: codeText.value }
+ MG.identity.joinGroupByRefCode(data).then((res: any) => {
+ if (res == '缁勪笉瀛樺湪') {
+ ElMessage({
+ message: '鏃犳晥鐨勭彮绾�',
+ type: 'error',
+ })
+ }
+ if (res == '缁勬垚鍛樻暟閲忓凡鏈�澶�,涓嶈兘鍔犲叆') {
+ ElMessage({
+ message: '鐝骇鎴愬憳鏁伴噺宸叉渶澶э紝涓嶈兘鍔犲叆',
+ type: 'error',
+ })
+ }
+ if (res == '宸茬粡鐢宠杩囧姞鍏ユ缁�') {
+ ElMessage({
+ message: '宸茬粡鐢宠杩囧姞鍏ユ鐝骇',
+ type: 'error',
+ })
+ }
+ dialogVisible.value = false
+ getCurrentClassList()
+ })
+}
+
+// 鑾峰彇褰撳墠鐝骇鍒楄〃
+const getCurrentClassList = () => {
+ isLoading.value = true
+ const data = {
+ start: (pages.page - 1) * pages.pageSize,
+ size: pages.pageSize,
+ sort: {
+ type: 'Desc',
+ field: 'CreateDate',
+ subSorts: [],
+ },
+ filterList: [],
+ searchList: searchKey.value
+ ? [
+ {
+ keywords: searchKey.value,
+ field: 'Name',
+ compareType: 'Contains',
+ },
+ ]
+ : [],
+ }
+ MG.identity.joinedGroupByList(data).then((res: any) => {
+ isLoading.value = false
+ pages.count = res.totalSize
+ if (res.datas) {
+ calssList.value = res.datas.map((item: any) => {
+ return {
+ ...item,
+ classTime:
+ moment(item.beginDate).format('YYYY.MM.DD') +
+ '--' +
+ moment(item.endDate).format('YYYY.MM.DD'),
+ bookName: item.linkProductDto.product.name,
+ bookIcon: getPublicImage(item.linkProductDto.product.icon, 100),
+ }
+ })
+ }
+ })
+}
+
+// 璺宠浆鐝骇绠＄悊
+const goClassManage = async (item: any) => {
+ if (item.userState == 'WaitValid') {
+ ElMessage({
+ message: '姝ｅ湪瀹℃牳涓�....',
+ type: 'warning',
+ })
+ return false
+ }
+ if (item.userState == 'Reject') {
+ ElMessage({
+ message: '瀹℃牳鏈�氳繃',
+ type: 'warning',
+ })
+ return false
+ }
+ const bookInfo = await getBookDetail(item.linkProductDto?.product)
+ let info = {
+ id: item.id,
+ name: item.name,
+ icon: bookInfo.icon,
+ rootCmsItemId: bookInfo.rootCmsItemId,
+ bookId: bookInfo.id,
+ author: bookInfo.author,
+ isbn: bookInfo.isbn,
+ bookRefCode: bookInfo.refCode,
+ }
+ let page = router.resolve({
+ path: '/classManage',
+ query: {
+ classInfo: JSON.stringify(info),
+ },
+ })
+ window.open(page.href, '_blank')
+ // router.push({
+ // path: '/classManage',
+ // query: {
+ // classInfo: JSON.stringify(info)
+ // }
+ // })
+}
+
+// 鑾峰彇鏁欐潗璇︽儏
+const getBookDetail = async (item: any) => {
+ const path = item.refCode ? '*' : config.goodsStore
+ let query = {
+ path,
+ queryType: '*',
+ productId: String(item.id),
+ coverSize: {
+ height: 300,
+ width: 210,
+ },
+ fields: {
+ author: [],
+ isbn: [],
+ },
+ }
+ const res = await MG.store.getProductDetail(query)
+ return res.datas ?? null
+}
+
+// 閫氳繃code鏌ヨ鐝骇
+const getClassDetail = () => {
+ if (codeText.value == '') {
+ ElMessage({
+ message: '璇疯緭鍏ラ個璇风爜',
+ type: 'warning',
+ })
+ return false
+ }
+ const data = {
+ classIdOrRefCode: codeText.value,
+ }
+ MG.edu
+ .getCourseClass(data)
+ .then((res: any) => {
+ classDetail.value = res
+ })
+ .catch((err: any) => {
+ console.log(err)
+ })
+}
+</script>
+
+<style lang="less" scoped>
+.coursePage {
+ .tabs {
+ padding: 0 20px;
+ }
+ .headerBox {
+ padding: 5px 20px;
+ margin-bottom: 10px;
+ overflow: hidden;
+ .searchBox {
+ width: 300px;
+ float: left;
+ .searchBtn {
+ background-color: var(--el-color-primary);
+ color: #fff;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ }
+ .applyStartClasses {
+ float: right;
+ }
+ }
+ .courseListBox {
+ overflow: hidden;
+ .courseItem {
+ float: left;
+ width: 45%;
+ margin: 0 2% 20px;
+ border-radius: 8px;
+ border: 1px solid #efefef;
+ overflow: hidden;
+ .itemHeader {
+ height: 40px;
+ line-height: 40px;
+ padding: 0 20px;
+ // color: #fff;
+ background-color: #f8f8f8;
+ box-sizing: border-box;
+ .title {
+ font-weight: 600;
+ }
+ div {
+ display: inline-block;
+ }
+ .courseId {
+ margin-left: 6px;
+ font-size: 12px;
+ color: #999;
+ }
+ .copyIdBtn {
+ float: right;
+ height: 20px;
+ line-height: 20px;
+ margin-top: 10px;
+ font-size: 12px;
+ background-color: #fff;
+ color: #3b93fe;
+ padding: 0 6px;
+ border-radius: 50px;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ }
+ .itemInfo {
+ padding: 15px;
+ box-sizing: border-box;
+ flex: 1;
+ display: flex;
+ cursor: pointer;
+ .imgBox {
+ width: 90px;
+ height: 120px;
+ margin-right: 20px;
+ }
+ .infoBox {
+ flex: 1;
+ font-size: 12px;
+ padding: 10px 0;
+ p {
+ margin-bottom: 10px;
+ }
+ }
+ }
+ }
+ }
+ .codeContent {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 30px;
+ }
+ .classInfo {
+ padding: 30px 0;
+ border-top: 2px dashed #ccc;
+
+ .itemCon {
+ margin-bottom: 20px;
+ }
+ }
+ .pageBox {
+ padding: 10px 0;
+ display: flex;
+ justify-content: center;
+ }
+}
+</style>
--
Gitblit v1.9.1