yuedu

litian

2024-05-28 4e1859708f3c00c9a7b79a3489ac9a6640f8f7b7

 src/views/bookshelfList/list.vue

@@ -14,26 +14,167 @@
        </el-input>
      </div>
      <div class="manageBox">
        <div class="manageItem"><img :src="jihe" /><div class="label">激活</div></div>
        <div class="manageItem"><img :src="jihe" /><div class="label">管理</div></div>
        <div class="manageItem"><img :src="jihe" /><div class="label">更多教材</div></div>
        <div class="manageItem hover" @click="activateShow">
          <img :src="jihe" />
          <div class="label">激活</div>
        </div>
        <div class="manageItem">
          <img :src="jihe" />
          <div class="label">管理</div>
        </div>
        <div class="manageItem">
          <img :src="jihe" />
          <div class="label">更多教材</div>
      </div>
    </div>
    <div class="contentBox"></div>
  </div>
    <div class="content">
      <div class="list-box" v-loading="pages.loading">
        <el-row :gutter="20" v-if="dataList.length > 0">
          <el-col :span="6" v-for="(item, index) in dataList" :key="index">
            <div
              class="textbook-body-box hover"
              @click="goBookDetails(item)"
            >
              <div class="book-img">
                <img :src="getPublicImage(item.product.icon, '', '')" alt="" />
              </div>
              <div class="books-info">
                <p class="book-title" :title="item.product.name">{{ item.product.name }}</p>
                <p class="flex jc-sb">
                  <!-- <span class="author" :title="item.author">{{ item.author }}</span>
                    <span class="price" v-if="item.price == 0">免费</span>
                    <span class="price" v-else>￥{{ item.price.toFixed(2) }}</span> -->
                </p>
              </div>
            </div>
          </el-col>
        </el-row>
        <div v-if="dataList.length == 0 && !pages.loading" class="noData">
          <el-empty :image-size="200" description="暂无数据" />
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    title="激活教材"
    align-center
    v-model="activateData.dialog"
    :before-close="activateClose"
    width="400"
    class="activateDialog"
  >
    <div class="formBox">
      <span class="label">激活码</span>
      <el-input v-model="activateData.code" placeholder="请输入激活码"></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="activateClose">取 消</el-button>
        <el-button type="primary" @click="userActiveCodeGet" :loading="activateData.loading"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
import { ref, onMounted,inject } from 'vue'
import { ref, onMounted, inject, reactive } from 'vue'
import { getPublicImage } from '@/assets/js/middleGround/tool.js'
const router = useRouter()
const MG: any = inject('MG')

import jihe from '@/assets/images/menu/jihe.png'

const searchText = ref('')
onMounted(() => {})
let dataList = ref([])
let pages = reactive({
  page: 1,
  pageSize: 10,
  count: 0,
  loading: false
})
onMounted(() => {
  getDataList()
})

const searchBook = () => {}

const getDataList = () => {
  pages.loading = true
  const searchData = [
    {
      keywords: 'jsek_digitalTextbooks',
      field: 'ProductType'
    }
  ]
  const data = {
    Size: pages.pageSize,
    Start: pages.pageSize * pages.page - pages.pageSize,
    sort: {
      type: 'Desc',
      field: 'CreateDate'
    },
    searchList: searchData
  }
  MG.store.getPurchasedProductList(data).then((res) => {
    dataList.value = res.datas
    pages.count = res.totalSize
    pages.loading = false
  })
}

// 跳转书本详情
const goBookDetails = (item) => {
  console.log(item)
  router.push({
      name: 'home',
      query: {
          bookId: item.refCode,
      }
  })
  // window.open(config.textReaderUrl+ '?bookId=' + item.product.refCode + "&token=" + localStorage.getItem('jsek-token'))
}

//.。激活商品
const activateData = reactive({
  loading:false,
  dialog: false,
  code:"",
})
const activateShow =()=>{
  activateData.dialog = true
}
const activateClose =()=>{
  activateData.dialog = false
}
// 使用激活码
const userActiveCodeGet = () => {
    let lock = true;
    if (activateData.code == "") {
        ElMessage({
            type: "error",
            message: "请输入激活码！",
        });
    } else {
        if (lock) {
            lock = false;
            MG.store
                .userActiveCode({
                    code: activateData.code,
                })
                .then((res) => {
                    ElMessage({
                        type: res == "激活成功" ? "success" : "error",
                        message: res,
                    });
                    getDataList();
                    lock = true;
                });
        }
    }
}
</script>

<style lang="less">
@@ -44,12 +185,12 @@
  .topBox {
    display: flex;
    .searchBox {
      padding: 0 20px;
      padding: 0 40px;
      .el-input .el-input__wrapper{
        width:220px;
        border-radius:20px !important;
        height:34px;
        background: #FFFFFF;

        background: #ffffff;
      }
    }
    .manageBox {
@@ -64,10 +205,59 @@
            height:24px;
        }
        .label{
          min-width: 40px;
            padding-left:10px;
        }
      }
    }
  }
  .content {
    padding: 40px;
    min-width:1200px;
    .textbook-body-box {
      display: flex;
      .book-img {
        width: 130px;
        height: 180px;
        box-shadow: 0px 0px 20px 1px #ccc;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .books-info {
        padding: 15px;
        flex:1;
        .book-title {
          font-weight: bold;
          height: 45px;
          line-height: 22px;
          display: -webkit-box;
          margin-bottom: 5px;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .noData {
    margin: 100px auto;
  }
}
.activateDialog{
  .formBox{
    display:flex;
    align-items: center;
    .label{
      width:80px;
    }
  }

}
</style>