数字教材相关

杨磊

1 天以前 cabc1ce19c57a7c7388502952eaaafd558363145

 src/views/bookStore/detail.vue

@@ -167,6 +167,7 @@
              <el-button v-if="currentRoute == 'teachingServices'" plain @click="addPaperBook"
                >纸质样书</el-button
              >
              <el-button plain @click="applyTextBook">申请使用</el-button>
            </div>
          </div>
        </div>
@@ -244,31 +245,105 @@
        <div v-if="editableTabsValue == '1'" class="textbookInfo">
          <div class="textbookInfoItem">
            <div class="titleBorderBox">图书简介</div>
            <div class="textbookContent"></div>
            <div class="textbookContent" v-if="bookInfo.content" v-html="bookInfo.content"></div>
            <div v-else>
              <el-empty description="暂无数据" />
            </div>
          </div>
          <div class="textbookInfoItem">
            <div class="titleBorderBox">作者简介</div>
            <div class="authorInfo"></div>
            <div
              class="authorInfo"
              v-if="bookInfo.authorIntroduction"
              v-html="bookInfo.authorIntroduction"
            ></div>
            <div v-else>
              <el-empty description="暂无数据" />
            </div>
          </div>
        </div>
        <div v-else-if="editableTabsValue == '2'" class="catalogue">bbbb</div>
        <div v-else-if="editableTabsValue == '6'" class="supportingResources">
          <div class="resourcesBox">
            <el-empty v-if="!resourceHave" :image-size="150" description="暂无内容"></el-empty>
            <div class="distribution" v-if="resourceHave">
              <div class="title">资源分布</div>
              <div class="echartsBox">
                <div class="left">
                  <div id="chartsContent" style="width: 600px; height: 400px"></div>
                </div>
                <div class="right">
                  <div>
                    <p>资源种类</p>
                    <p>
                      <span class="num">{{ resourceData.length }}</span
                      >种
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="recommendBox"></div>
      <div class="recommendBox">
        <div class="recommendTitle">推荐教材</div>
        <div class="newRecommendList">
          <div class="recommendItem" v-for="item in recommendBookListData" :key="item.id">
            <div class="recommendItemImg">
              <img class="autoImg" :src="item.icon" />
            </div>
            <div class="infoBox2">
              <div class="bookName2">{{ item.name }}</div>
              <div class="author2">
                作者：{{ item.authorcaupress_author ? item.caupress_author : '-' }}
              </div>
              <div class="priceBox2">
                <span class="oldPrice" v-if="item.oldPrice">原价：¥{{ item.oldPrice }}</span>
                <span class="price" v-if="item.price && item.price > 0">
                  定价：¥
                  <span>{{ item.price }}</span>
                </span>
                <span class="price" v-else> 定价：<span class="freePrice">免费</span> </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment'
import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'
import imgIcon from '@/assets/images/digitalTextbooks/img.png'
import AudioIcon from '@/assets/images/digitalTextbooks/Audio.png'
import DIcon from '@/assets/images/digitalTextbooks/3D.png'
import PPTIcon from '@/assets/images/digitalTextbooks/PPT.png'
import shijuanIcon from '@/assets/images/digitalTextbooks/shijuan.png'
import shixunIcon from '@/assets/images/digitalTextbooks/shixun.png'
import tuozhanIcon from '@/assets/images/digitalTextbooks/tuozhan.png'
import videoIcon from '@/assets/images/digitalTextbooks/video.png'
import VRIcon from '@/assets/images/digitalTextbooks/VR.png'
import ziliaoIcon from '@/assets/images/digitalTextbooks/ziliao.png'
import { ref, onBeforeMount, inject, reactive, onMounted, watchEffect } from 'vue'
const MG = inject('MG')
const config = inject('config')
import { useRouter, useRoute } from 'vue-router'
import { applyBookStore } from '@/store'
const route = useRoute()
const router = useRouter()
let bookInfo = ref({})
let digitalTextId = ref('')
let resourceData = ref([])
let recommendBookListData = ref([])
let editableTabsValue = ref('1')

let resourceHave = ref(true)
var chartDom = null
var myChart = {}
var option = null
const editableTabs = reactive([
  {
    title: '教材信息',
@@ -299,7 +374,153 @@
onMounted(() => {
  digitalTextId.value = route.query.bookId
  getBookDetail(digitalTextId.value)
  getRecommendBookList()
})

watchEffect(() => {
  if (editableTabsValue.value == '6') {
    getBookResource()
  }
})

//申请试用
const applyTextBook = () => {
  localStorage.setItem('applyBookInfo', JSON.stringify(bookInfo.value))
  router.push({
    path: '/textBookApply',
  })
}

const getRecommendBookList = () => {
  MG.store
    .getProductList({
      path: 'recommendedTextbooks',
      paging: {
        start: 0,
        size: 5,
      },
      fields: {
        author: [],
      },
    })
    .then((res) => {
      console.log(res, '推荐教材')
      recommendBookListData.value = res.datas
    })
}

const getBookResource = () => {
  try {
    axios
      .get('https://yxjy.pumcp.com/books/resource/' + bookInfo.value.refCode + '/resource.json')
      .then(async (res) => {
        console.log(res, 'resource')
        if (res.data.length > 0) {
          res.data.forEach((item) => {
            if (item.resourceTypeShow == '图片') {
              item.icon = imgIcon
            } else if (item.resourceTypeShow == '视频') {
              item.icon = videoIcon
            } else if (item.resourceTypeShow == '音频') {
              item.icon = AudioIcon
            } else if (item.resourceTypeShow == 'PPT') {
              item.icon = PPTIcon
            } else if (item.resourceTypeShow == '拓展') {
              item.icon = tuozhanIcon
            } else if (item.resourceTypeShow == '资料') {
              item.icon = ziliaoIcon
            } else if (item.resourceTypeShow == '试卷') {
              item.icon = shijuanIcon
            } else if (item.resourceTypeShow == '3D') {
              item.icon = DIcon
            } else if (item.resourceTypeShow == '实训') {
              item.icon = shixunIcon
            } else if (item.resourceTypeShow == 'VR') {
              item.icon = VRIcon
            } else {
              item.icon = ziliaoIcon
            }
          })
          resourceData.value = await groupByResourceTypeShow(res.data)
          resourceHave.value = true
          console.log(resourceData.value, 'resourceData')
          initChart(resourceData.value)
        } else {
          resourceHave.value = false
        }
      })
      .catch((error) => {
        console.log(error, 'error1')

        resourceData = []
        resourceHave = false
      })
  } catch (error) {
    console.log(error, 'error')
    resourceData = []
    resourceHave = false
  }
}

const groupByResourceTypeShow = (resources) => {
  const grouped = resources.reduce((acc, item) => {
    const key = item.resourceTypeShow
    if (!acc[key]) {
      acc[key] = {
        resourceTypeShow: key,
        list: [],
      }
    }
    acc[key].list.push(item)
    return acc
  }, {})
  return Object.values(grouped)
}

const initChart = (data) => {
  let dataList = []
  let num = []
  data.forEach((item) => {
    dataList.push(item.resourceTypeShow)
    num.push(item.list.length)
  })
  chartDom = document.getElementById('chartsContent')
  console.log(chartDom, 'chartDom')

  myChart = echarts.init(chartDom)
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: dataList,
    },
    yAxis: {},
    series: [
      {
        name: '数量',
        type: 'bar',
        data: num,
        itemStyle: {
          color: function (params) {
            // params.dataIndex是数据项的索引，你可以根据这个索引来设置不同的颜色
            const colors = [
              '#5EA1FF',
              '#FF5A85',
              '#7E7AFF',
              '#3CB768',
              '#FF8F54',
              '#FF574B',
              '#3DB0BF',
              '#FBBB3B',
              '#3B5EFB',
              '#B1FB3B',
            ]
            return colors[params.dataIndex % colors.length]
          },
        },
      },
    ],
  })
}

const getBookDetail = (id) => {
  const query = {
@@ -572,8 +793,10 @@

.detailContent {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  .resourceBox {
    width: 80%;
    width: 76%;
  }
  .textbookInfo {
    padding: 20px 0;
@@ -590,4 +813,126 @@
.textbookInfoItem {
  margin-top: 20px;
}

.distribution {
  .title {
    margin: 10px 0;
    font-weight: bold;
  }
  .echartsBox {
    height: 400px;
    border-radius: 7px 7px 7px 7px;
    border: 1px solid #e4e7ed;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .left {
  }
  .right {
    background: rgba(64, 158, 255, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 200px;
    p {
      line-height: 30px;
    }
    .num {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .list {
    display: flex;
    margin-bottom: 40px;
    .listItem {
      width: 100px;
      display: block;
      box-sizing: border-box;
      .imgBox {
        margin: 0 auto;
        position: relative;
        width: 80px;
        height: 80px;
      }
      .bookInfo {
        margin: 0;
        overflow: hidden;
        text-align: center;
        .title {
          color: #333;
          margin: 10px 0;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }
}

.recommendBox {
  width: 23%;
  border: 1px solid #e4e7ed;
  border-radius: 10px;
  .recommendTitle {
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid #e4e7ed;
    color: #333333;
    font-weight: 700;
  }
}

.newRecommendList {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .recommendItem {
    margin-right: 20px;
    height: 300px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    background-color: #fff;
    padding-top: 10px;
    margin-top: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
  .recommendItemImg {
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
  }
  .infoBox2 {
    text-align: center;
    margin-top: 10px;
  }
  .author2 {
    margin-top: 10px;
  }
  .priceBox2 {
    margin-top: 10px;
    .oldPrice {
      font-size: 16px;
      color: #444444;
      text-decoration: line-through;
      margin-right: 20px;
    }
    .price {
      span {
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}
</style>