关于我们-理念与品牌文化

QYF-GitLab1

20 小时以前 cf7e71c6d0fb64eeb6b5deac540da843b4bb465c

 src/views/bookStore/index.vue

@@ -4,7 +4,7 @@
      <img class="bannerImg" :src="banner[0]?.icon" @click="bannerLink(item)" />
      <div class="bannerText">
        <div>数字教材</div>
        <div class="enText">ABOUT US</div>
        <div class="enText">TEXT BOOK</div>
      </div>
    </div>
    <div class="contentBox" style="margin-top: 50px">
@@ -12,15 +12,10 @@
        <img class="autoimg" src="@/assets/images/bookStore/feblei.png" />
      </div>
      <div class="classificationBox">
        <div style="width: 100px">分类：</div>
        <div style="width: 100px; line-height: 60px">分类：</div>
        <div class="classificaListBox">
          <div
            class="classificaItem"
            :class="{ active: currentLevel == item.value }"
            v-for="(item, index) in classfeild"
            :key="index"
            @click="changeLevel(item)"
          >
          <div class="classificaItem" :class="{ active: currentLevel == item.value }"
            v-for="(item, index) in classfeild" :key="index" @click="changeLevel(item)">
            {{ item.name }}
          </div>
        </div>
@@ -30,12 +25,8 @@
        <div class="bookfilterList">
          <div class="listTitle">
            <div>结果：共计{{ total }}条</div>
            <div style="width: 300px">
              <el-input
                v-model="input3"
                placeholder="输入教材名称、作者姓名、出品方名称搜索"
                class="input-with-select"
              >
            <div style="width: 340px">
              <el-input v-model="input3" placeholder="输入书名、作者、书号搜索" class="input-with-select">
                <template #append>
                  <el-button :icon="Search" @click="getBookList" />
                </template>
@@ -45,27 +36,20 @@

          <div>
            <div class="recommendList">
              <div
                class="recommendItem"
                v-for="item in bookListData"
                :key="item.id"
                @click="toDetail(item)"
              >
              <div class="recommendItem" v-for="item in bookListData" :key="item.id" @click="toDetail(item)">
                <div class="recommendItemImg">
                  <img class="autoImg" :src="item.icon" />
                </div>
                <div class="infoBox">
                  <div class="bookName">{{ item.name }}</div>
                  <div class="author">
                    作者：{{ item.authorcaupress_author ? item.caupress_author : '-' }}
                  </div>
                  <div class="author">{{ item.author ? item.author : '-' }} 著</div>
                  <div class="priceBox">
                    <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>¥ {{ item.price }}</span>
                    </span>
                    <span class="price" v-else> 定价：<span class="freePrice">免费</span> </span>
                    <span class="oldPrice" v-if="item.oldPrice > 0">¥ {{ item.oldPrice }}</span>
                    <span class="price" v-if="item.price && item.price == 0"> <span class="freePrice">免费</span>
                    </span>
                  </div>
                </div>
              </div>
@@ -76,35 +60,27 @@
          </div>

          <div class="pagingBox">
            <el-pagination
              layout="total, prev, pager, next"
              :total="total"
              v-model:current-page="currentPage1"
              :page-size="20"
              @current-change="handleCurrentChange"
              hide-on-single-page="true"
            />
            <el-pagination layout="total, prev, pager, next" :total="total" v-model:current-page="currentPage1"
              :page-size="20" @current-change="handleCurrentChange" hide-on-single-page="true" />
          </div>
        </div>
        <div class="recommendBox">
          <div class="recommendTitle">推荐教材</div>
          <div class="newRecommendList">
            <div class="recommendItem" v-for="item in recommendBookListData" :key="item.id">
            <div class="recommendItem" v-for="item in recommendBookListData" :key="item.id" @click="toDetail(item)">
              <div class="recommendItemImg">
                <img class="autoImg" :src="item.icon" />
              </div>
              <div class="infoBox">
                <div class="bookName">{{ item.name }}</div>
                <div class="author">
                  作者：{{ item.authorcaupress_author ? item.caupress_author : '-' }}
                </div>
                <div class="author">{{ item.author ? item.author : '-' }} 著</div>
                <div class="priceBox">
                  <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>¥ {{ item.price }}</span>
                  </span>
                  <span class="price" v-else> 定价：<span class="freePrice">免费</span> </span>
                  <span class="oldPrice" v-if="item.oldPrice > 0">¥ {{ item.oldPrice }}</span>
                  <span class="price" v-if="item.price && item.price == 0"> <span class="freePrice">免费</span>
                  </span>
                </div>
              </div>
            </div>
@@ -178,8 +154,13 @@
      },
    })
    .then((res) => {
      console.log(res, '推荐教材')
      recommendBookListData.value = res.datas
      recommendBookListData.value = res.datas?.map(item => {
        return {
          ...item,
          price: toolClass.toDecimal2(item.price),
          oldPrice: toolClass.toDecimal2(item.oldPrice),
        }
      })
    })
}

@@ -192,17 +173,26 @@
      start: (currentPage1.value - 1) * 20,
      size: 20,
    },
    fields: {},
    fields: {
      author: [],
    },
  }
  if (currentLevel.value !== 'all') {
    query.fields['teachingLevel='] = currentLevel.value
  }
  if (input3.value) {
    query.fields['Name*'] = input3.value
    query.fields['||Name*'] = input3.value
    query.fields['||author*'] = input3.value
    query.fields['||isbn*'] = input3.value
  }
  MG.store.getProductList(query).then((res) => {
    console.log(res, '11111111111')
    bookListData.value = res.datas
    bookListData.value = res.datas?.map(item => {
      return {
        ...item,
        price: toolClass.toDecimal2(item.price),
        oldPrice: toolClass.toDecimal2(item.oldPrice),
      }
    })
    total.value = res.total
  })
}
@@ -212,15 +202,12 @@
    refCodes: ['digitalTextbooks'],
  }
  MG.resource.getCmsTypeByRefCode(query).then((res) => {
    console.log(res, 'res')
    const types = toolClass.handleTypeList(res)
    const typeData = types[0].cmsTypeLinks[0].children
    feildList.push(...typeData)
    const temp_classfeild = typeData.find((item) => item.typeField.refCode === 'teachingLevel')
      ?.typeField.cfg.option
    classfeild.push({ name: '全部', value: 'all' }, ...temp_classfeild)
    console.log(typeData, 'typeData')
    console.log(classfeild, 'classfeild')
  })
}
onMounted(() => {
@@ -241,6 +228,7 @@
  .bannerBox {
    height: 380px;
    position: relative;

    .bannerText {
      position: absolute;
      top: 50%;
@@ -252,8 +240,9 @@
      text-shadow: 0px 0px 10px #000000;
      text-align: center;
    }

    .enText {
      font-size: 36px;
      font-size: 28px;
      opacity: 0.45;
      margin-top: 20px;
    }
@@ -263,9 +252,12 @@
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    .classificaListBox {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .classificaItem {
        display: flex;
        align-items: center;
@@ -280,6 +272,7 @@
      }
    }
  }

  .bookList {
    display: flex;
    justify-content: space-between;
@@ -290,6 +283,7 @@
      border: 1px solid #e4e7ed;
      height: 100%;
      border-radius: 10px;

      .listTitle {
        display: flex;
        justify-content: space-between;
@@ -297,21 +291,27 @@
        padding: 20px 30px;
      }
    }

    .recommendBox {
      width: 19%;
      border: 1px solid #e4e7ed;
      border-radius: 10px;

      .recommendTitle {
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        border-bottom: 1px solid #e4e7ed;
        height: 29px;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #333333;
        font-weight: 700;
        line-height: 29px;
        border-bottom: 1px solid #e4e7ed;
        padding: 0px 10px;
        box-sizing: border-box;
      }
    }
  }
}

.recommendList {
  display: flex;
  padding: 20px;
@@ -320,46 +320,84 @@
  justify-content: start;

  .recommendItem {
    margin-right: 20px;
    width: 22%;
    height: 300px;
    margin-right: 10px;
    width: 240px;
    height: 357px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    border: 1px solid #dedede;
    background-color: #fff;
    background: rgba(255, 255, 255, 0.73);
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #DEDEDE;
    padding-top: 10px;
    margin-top: 10px;
    padding: 30px 0;
    box-sizing: border-box;
    margin-bottom: 10px;

    &:last-child {
      margin-right: 0;
    }
  }
  .recommendItemImg {
    width: 150px;
    height: 200px;
    position: relative;
    margin: 0 auto;
  }
  .infoBox {
    text-align: center;
    margin-top: 10px;
  }
  .author {
    margin-top: 10px;
  }
  .priceBox {
    margin-top: 10px;
    .oldPrice {
      font-size: 16px;
      color: #444444;
      text-decoration: line-through;
      margin-right: 20px;


    &:hover {
      background-image: url(@/assets/images/Mouse_fill.png);
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
    .price {
      span {
        font-weight: bold;
        font-size: 14px;
      }

    .recommendItemImg {
      width: 139px;
      height: 189px;
      position: relative;
      margin: 0 auto;
    }

  }
}

.infoBox {
  text-align: center;
  padding: 20px 0;
  box-sizing: border-box;
  font-family: Microsoft YaHei UI, Microsoft YaHei UI;
  box-sizing: border-box;
}

.bookName {
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  font-weight: 700;
}

.author {
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  padding: 15px 0;
  box-sizing: border-box;
}

.priceBox {
  font-family: DIN, DIN;
  font-weight: 500;
  font-size: 18px;
  color: #D91523;
  padding: 15px 0;
  box-sizing: border-box;

  .oldPrice {
    color: #999999;
    text-decoration: line-through;
    margin-left: 20px;
  }

  .price {
    span {
      font-weight: bold;
      color: #d91523;
    }
  }
}
@@ -370,48 +408,39 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .recommendItem {
    margin-right: 20px;
    height: 300px;
    margin-right: 1%;
    width: 240px;
    height: 357px;
    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;
  }
  .infoBox {
    text-align: center;
    margin-top: 10px;
  }
  .author {
    margin-top: 10px;
  }
  .priceBox {
    margin-top: 10px;
    .oldPrice {
      font-size: 16px;
      color: #444444;
      text-decoration: line-through;
      margin-right: 20px;

    .recommendItemImg {
      width: 150px;
      height: 200px;
      position: relative;
      margin: 0 auto;
    }
    .price {
      span {
        font-weight: bold;
        font-size: 14px;
      }

    .recommendItem:hover {
      background-image: url(@/assets/images/Mouse_fill.png);
      background-position: center;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }
  }

}

.pagingBox {
  display: flex;
  justify-content: center;
@@ -425,3 +454,9 @@
  color: #144941;
}
</style>
<style>
.el-input-group__append {
  background-color: #144941;
  color: #fff;
}
</style>