样式调整

QYF-GitLab1

13 小时以前 07b53eedf9771d98485c9d7e310f6126a53af80e

 src/views/personalCenter/class.vue

@@ -3,34 +3,19 @@
    <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="'当前班级（' + 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="请输入关键字"
        >
        <el-input v-model="searchKey" clearable @clear="searchList()" placeholder="请输入关键字">
          <template #append>
            <el-button
              type="primary"
              class="searchBtn"
              @click="searchList()"
              :icon="Search"
            />
            <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-button type="primary" class="applyStartClasses" @click="openJoin()">加入班级</el-button>
      <el-dialog v-model="dialogVisible" title="加入班级" width="500">
        <div class="codeContent">
          <span>邀请码：</span>
@@ -49,8 +34,8 @@
          <div class="itemCon">
            <span>开课时间：</span>
            <span
              >{{ moment(classDetail.beginDate).format("YYYY-MM-DD") }} -
              {{ moment(classDetail.endDate).format("YYYY-MM-DD") }}</span
              >{{ moment(classDetail.beginDate).format('YYYY-MM-DD') }} -
              {{ moment(classDetail.endDate).format('YYYY-MM-DD') }}</span
            >
          </div>
        </div>
@@ -72,10 +57,8 @@
        <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 == '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>
@@ -102,43 +85,43 @@
</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";
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");
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;
  id: string
  name: string
  memberCount: number
  maxUserCount: number
  userState: string
  beginDate: string
  endDate: string
  classTime: string
  linkProductDto: {
    product: {
      name: string;
      icon: string;
    };
  };
      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);
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,
@@ -146,97 +129,97 @@
  pageSize: 6,
  count: 0,
  loading: false,
});
})

onMounted(() => {
  getCurrentClassList();
});
  getCurrentClassList()
})

//  分页
const handleSizeChange = (val: number) => {
  pages.pageSize = val;
  getCurrentClassList();
};
  pages.pageSize = val
  getCurrentClassList()
}

const handleCurrentChange = (val: number) => {
  pages.page = val;
  pages.currentPage = val;
  getCurrentClassList();
};
  pages.page = val
  pages.currentPage = val
  getCurrentClassList()
}

const handleClick = (val: any) => {
  activeName.value = val;
};
  activeName.value = val
}

const openJoin = () => {
  dialogVisible.value = true;
  classDetail.value = null;
  codeText.value = "";
};
  dialogVisible.value = true
  classDetail.value = null
  codeText.value = ''
}

// 搜索
const searchList = () => {
  pages.page = 1;
  pages.currentPage = 1;
  getCurrentClassList();
};
  pages.page = 1
  pages.currentPage = 1
  getCurrentClassList()
}

// 复制
const copy = async (text: string) => {
  try {
    await toClipboard(text);
    await toClipboard(text)
    ElMessage({
      message: "复制成功",
      type: "success",
    });
      message: '复制成功',
      type: 'success',
    })
  } catch (e) {
    console.error(e);
    console.error(e)
  }
};
}

// 加入班级
const joinClass = () => {
  if (!codeText.value) {
    ElMessage({
      message: "无效的邀请码",
      type: "error",
    });
    return false;
      message: '无效的邀请码',
      type: 'error',
    })
    return false
  }
  const data = { refCode: codeText.value };
  const data = { refCode: codeText.value }
  MG.identity.joinGroupByRefCode(data).then((res: any) => {
    if (res == "组不存在") {
    if (res == '组不存在') {
      ElMessage({
        message: "无效的班级",
        type: "error",
      });
        message: '无效的班级',
        type: 'error',
      })
    }
    if (res == "组成员数量已最大,不能加入") {
    if (res == '组成员数量已最大,不能加入') {
      ElMessage({
        message: "班级成员数量已最大，不能加入",
        type: "error",
      });
        message: '班级成员数量已最大，不能加入',
        type: 'error',
      })
    }
    if (res == "已经申请过加入此组") {
    if (res == '已经申请过加入此组') {
      ElMessage({
        message: "已经申请过加入此班级",
        type: "error",
      });
        message: '已经申请过加入此班级',
        type: 'error',
      })
    }
    dialogVisible.value = false;
    getCurrentClassList();
  });
};
    dialogVisible.value = false
    getCurrentClassList()
  })
}

// 获取当前班级列表
const getCurrentClassList = () => {
  isLoading.value = true;
  isLoading.value = true
  const data = {
    start: (pages.page - 1) * pages.pageSize,
    size: pages.pageSize,
    sort: {
      type: "Desc",
      field: "CreateDate",
      type: 'Desc',
      field: 'CreateDate',
      subSorts: [],
    },
    filterList: [],
@@ -244,48 +227,48 @@
      ? [
          {
            keywords: searchKey.value,
            field: "Name",
            compareType: "Contains",
            field: 'Name',
            compareType: 'Contains',
          },
        ]
      : [],
  };
  }
  MG.identity.joinedGroupByList(data).then((res: any) => {
    isLoading.value = false;
    pages.count = res.totalSize;
    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"),
            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") {
  if (item.userState == 'WaitValid') {
    ElMessage({
      message: "正在审核中....",
      type: "warning",
    });
    return false;
      message: '正在审核中....',
      type: 'warning',
    })
    return false
  }
  if (item.userState == "Reject") {
  if (item.userState == 'Reject') {
    ElMessage({
      message: "审核未通过",
      type: "warning",
    });
    return false;
      message: '审核未通过',
      type: 'warning',
    })
    return false
  }
  const bookInfo = await getBookDetail(item.linkProductDto?.product);
  const bookInfo = await getBookDetail(item.linkProductDto?.product)
  let info = {
    id: item.id,
    name: item.name,
@@ -295,30 +278,29 @@
    author: bookInfo.author,
    isbn: bookInfo.isbn,
    bookRefCode: bookInfo.refCode,
  };
  }
  let page = router.resolve({
    path: "/classManage",
    path: '/classManage',
    query: {
      classInfo: JSON.stringify(info),
    },
  });
  window.open(page.href, "_blank");
  })
  window.open(page.href, '_blank')
  // router.push({
  //   path: '/classManage',
  //   query: {
  //     classInfo: JSON.stringify(info)
  //   }
  // })
};
}

// 获取教材详情
const getBookDetail = async (item: any) => {
  const path = item.refCode ? "digitalTextbooks" : config.goodsStore;
  const path = item.refCode ? '*' : config.goodsStore
  let query = {
    path,
    queryType: "*",
    queryType: '*',
    productId: String(item.id),
    storeInfo: path,
    coverSize: {
      height: 300,
      width: 210,
@@ -327,32 +309,32 @@
      author: [],
      isbn: [],
    },
  };
  const res = await MG.store.getProductDetail(query);
  return res.datas ?? null;
};
  }
  const res = await MG.store.getProductDetail(query)
  return res.datas ?? null
}

// 通过code查询班级
const getClassDetail = () => {
  if (codeText.value == "") {
  if (codeText.value == '') {
    ElMessage({
      message: "请输入邀请码",
      type: "warning",
    });
    return false;
      message: '请输入邀请码',
      type: 'warning',
    })
    return false
  }
  const data = {
    classIdOrRefCode: codeText.value,
  };
  }
  MG.edu
    .getCourseClass(data)
    .then((res: any) => {
      classDetail.value = res;
      classDetail.value = res
    })
    .catch((err: any) => {
      console.log(err);
    });
};
      console.log(err)
    })
}
</script>

<style lang="less" scoped>
@@ -382,7 +364,7 @@
    overflow: hidden;
    .courseItem {
      float: left;
      width: 46%;
      width: 45%;
      margin: 0 2% 20px;
      border-radius: 8px;
      border: 1px solid #efefef;
@@ -393,6 +375,7 @@
        padding: 0 20px;
        // color: #fff;
        background-color: #f8f8f8;
        box-sizing: border-box;
        .title {
          font-weight: 600;
        }
@@ -432,6 +415,7 @@
        .infoBox {
          flex: 1;
          font-size: 12px;
          padding: 10px 0;
          p {
            margin-bottom: 10px;
          }