|
|
@@ -0,0 +1,226 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-skeleton style="width: 282px" :loading="true" animated v-if="item.skeleton">
|
|
|
+ <template slot="template">
|
|
|
+ <el-skeleton-item
|
|
|
+ variant="image"
|
|
|
+ style="width: 282px; height: 174px;"
|
|
|
+ />
|
|
|
+ <div style="padding: 12px;width: 282px;">
|
|
|
+ <el-skeleton-item variant="h3" style="width: 100%; height: 48px" />
|
|
|
+ <el-skeleton-item variant="text" style="margin: 4px 0 12px 0; height: 20px; width:50%;" />
|
|
|
+ <el-skeleton-item variant="text" style="height: 21px; width:70%;" v-if="!type||type!='bookShelf'" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-skeleton>
|
|
|
+ <div class="BookCard" @click="handleLink" v-else>
|
|
|
+ <!-- <div
|
|
|
+ class="image"
|
|
|
+ :style="{height:height?height:'280px'}"
|
|
|
+ ></div> -->
|
|
|
+ <el-image
|
|
|
+ class="image"
|
|
|
+ :src="item.cover_image_url?item.cover_image_url:item.course_type==='baozhi'?require('../../assets/baozhi'+(Math.floor(Math.random()*2)+1)+'.png'):require('../../assets/kecheng'+(Math.floor(Math.random()*3)+1)+'.png')"
|
|
|
+ :fit="'cover'">
|
|
|
+ </el-image>
|
|
|
+ <div class="bottom">
|
|
|
+ <p class="name">{{item.name}}</p>
|
|
|
+ <!-- <template>
|
|
|
+ <el-rate
|
|
|
+ v-model="item.score"
|
|
|
+ disabled
|
|
|
+ show-score
|
|
|
+ :colors="colors"
|
|
|
+ :score-template="score"
|
|
|
+ >
|
|
|
+ </el-rate>
|
|
|
+ </template> -->
|
|
|
+ <p class="author">
|
|
|
+ <span>科普知识与现代技术</span>
|
|
|
+ <label class="xiaoxue">小学版</label>
|
|
|
+ </p>
|
|
|
+ <template v-if="!type||type!='bookShelf'">
|
|
|
+ <p class="price">
|
|
|
+ <span class="OPPOSans">￥{{item.price_discount?item.price_discount:item.price|cutMoneyFiter}}</span>
|
|
|
+ <s v-if="item.price_discount&&item.price_discount!==item.price">￥{{item.price|cutMoneyFiter}}</s>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
|
|
+//例如：import 《组件名称》from ‘《组件路径》';
|
|
|
+import { cutMoneyFiter } from '@/utils/defined';
|
|
|
+export default {
|
|
|
+ name: "BookCard",
|
|
|
+ //import引入的组件需要注入到对象中才能使用
|
|
|
+ components: {},
|
|
|
+ props: ["item", "height","type","LoginNavIndex","userBg","headerBorder","headerBg","previousPage","isBuy"],
|
|
|
+ filters:{
|
|
|
+ cutMoneyFiter
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ goodsTypeList:{
|
|
|
+ 0:{
|
|
|
+ type: 'LB'
|
|
|
+ },
|
|
|
+ 2:{
|
|
|
+ type: 'baozhi'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //计算属性 类似于data概念
|
|
|
+ computed: {
|
|
|
+ score() {
|
|
|
+ return this.item.score.toFixed(1)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //监控data中数据变化
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ changeData(data) {
|
|
|
+ var datasort = data.sort((a, b) => a.date.localeCompare(b.date));
|
|
|
+ var timeArr = new Set(datasort.map(it => it.date))
|
|
|
+ let newarr = []
|
|
|
+ let rateArr = []
|
|
|
+ timeArr.forEach(item => {
|
|
|
+ let a = {
|
|
|
+ date: "",
|
|
|
+ arr: []
|
|
|
+ }
|
|
|
+ data.forEach(items => {
|
|
|
+ if (item == items.date) {
|
|
|
+ a.date = items.date
|
|
|
+ a.arr.push(items.weight)
|
|
|
+ rateArr.push(items.rate)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ newarr.push(a)
|
|
|
+ })
|
|
|
+ newarr.forEach(item => {
|
|
|
+ if (item.arr.length < 3) {
|
|
|
+ for (let i = 0; i < 3 - (item.arr.length - 1); i++) {
|
|
|
+ item.arr.push(0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return { newarr, timeArr, rateArr }
|
|
|
+ },
|
|
|
+ handleLink(){
|
|
|
+ let url = this.LoginNavIndex +'&&&1&&&2&&&3&&&' + this.previousPage
|
|
|
+ this.$router.push({
|
|
|
+ path: "/bookItem",
|
|
|
+ query: {
|
|
|
+ headerConfig: encodeURIComponent(url),
|
|
|
+ isBuy:this.isBuy,
|
|
|
+ cardType: this.item.course_type||this.goodsTypeList[this.item.type].type,
|
|
|
+ id: this.item.id
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ // let data = this.changeData(this.dataContext)
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ //生命周期-创建之前
|
|
|
+ beforeCreated() { },
|
|
|
+ //生命周期-挂载之前
|
|
|
+ beforeMount() { },
|
|
|
+ //生命周期-更新之前
|
|
|
+ beforUpdate() { },
|
|
|
+ //生命周期-更新之后
|
|
|
+ updated() { },
|
|
|
+ //生命周期-销毁之前
|
|
|
+ beforeDestory() { },
|
|
|
+ //生命周期-销毁完成
|
|
|
+ destoryed() { },
|
|
|
+ //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ activated() { }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+/* @import url(); 引入css类 */
|
|
|
+.BookCard {
|
|
|
+ width: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 174px;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ // height: 132px;
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #2F3742;
|
|
|
+ word-break: break-word;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .author {
|
|
|
+ margin-top: 4px;
|
|
|
+ height: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ padding: 0px 8px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #F2F3F5;
|
|
|
+ color: #1D2129;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .xiaoxue{
|
|
|
+ padding: 0px 8px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: #E8FFFB;
|
|
|
+ color: #0FC6C2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ :nth-child(1) {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #EC5E41;
|
|
|
+ }
|
|
|
+ :nth-child(2) {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ text-decoration-line: line-through;
|
|
|
+ color: #929CA8;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha