dbsd_kczx/src/views/site/renKeJiaoCheng/zjkcList.vue

<template>
  <a-card class="rowGutter" id="rkjcDom" v-if="allList.length>0">
    <template #title>
      <span style="font-size: 24px;font-weight: bold;" >助教课程</span>
    </template>
    <div>
      <a-row>
        <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }" :key="index" v-for="(item, index) in allList">
          <div class=" ketangback ketangCard ketangCardcol">
            <div class="rjkcTopDiv">
              <div style="text-align: left">
                <Icon icon="ant-design:read-outlined" /><span>{{ item.sksj }}</span>
              </div>
            </div>
            <div class="rjkcBodyDiv">
              <div class="kcmcDiv">
                <span style="font-size: 20px">{{ item.kcmc }}</span>
              </div>
              <div class="skddDiv">{{ item.skdd }}</div>
              <div class="xkrsDiv skdd-Left-section">
                <div style="width:70%; display: flex; justify-content: flex-start; ">
                  <div class="skdd-line" >
                    <div class="xkrs-color">{{ item.skjs }}</div>
                    <div class="skddDiv">授课教师</div>
                  </div>
                </div>
                <a-button class="buttonClass" @click="goZjms(item)">助教模式</a-button>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-card>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';

import { defHttp } from '/@/utils/http/axios';

import { useUserStoreWithOut } from '/@/store/modules/user';
import { useMessage } from '/@/hooks/web/useMessage';
const allList = ref<any>([]);
  const { createMessage } = useMessage();

//进入就加载
onMounted(() => {
  loadData();
});

function loadData() {
  defHttp.get({ url: '/ktgl/kcKechengbiao/getZjlist', params: { checkType: '0' } }).then((res) => {
    console.log(res);
    allList.value = res.records;
  });
}
function goZjms(item) {
  console.log("🚀 ~ openKechengDetail ~ item:", item)
  
  //提交表单
  let params = { username: item.jgh };
  console.log('🙄', params);
  defHttp.post({ url: '/sys/qhlogin', params }, { isTransformResponse: false }).then((res) => {
    console.log('👩‍🦲', res);
    if (res.success) {

      const userStore = useUserStoreWithOut();
      userStore.setToken(undefined);
      userStore.setToken(res.result.token);
      userStore.setUserInfo(res.result.userInfo);
      window.location.reload();
    } else {
      createMessage.warning(res.message);
    }
  });

}
</script>
<style lang="less" scoped>
.ketangCard {
  margin: 0.5rem;
}

.ketangCardcol {
  background-color: #f3f3f3;
  padding: 1px;
  box-shadow: 1px 1px 5px 1px #e1e1e1;
}

.rjkcTopDiv {
  padding: 0.5rem;
  color: #798394;
  font-size: 15px;
  text-align: right;
}

.nDayDiv {
  top: -14px;
  right: -14px;
  position: relative;
  background: #1ab394;
  color: #fff;
  font-weight: 200;
  padding: 2px 6px 2px 6px;
  border-radius: 0 0 0 5px;
  text-align: left;
}

.rjkcBodyDiv {
  margin-top: 1px;
  background: #fff;
  padding: 1rem;
}

.kcmcDiv {
  font-size: 24px;
  font-weight: bold;
}

.skddDiv {
  color: #333333;
  font-size: 14px;
  // font-weight: bold;
}

.xkrsDiv {
  padding-top: 1rem;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}

.buttonClass {
  background: #1ab394;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  line-height: 22px;

  &[disabled] {
    background: #6cafda;
  }
}

.skdd-Left-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.ketangback {
  background: #f7f7f7;
  border-radius: 5px;
}

.skdd-line {
  text-align: left;
  width: 30%;
  margin-right: 10rpx;
}


.ant-btn {
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 5px;
  border-color: #fff;
  color: #fff;
}
</style>