修改精读卡片

src/components/common/BookPeruseCard.vue

@@ -1,31 +1,51 @@
 <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
+  <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-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
@@ -35,72 +55,109 @@
                 >
                 </el-rate>
             </template> -->
-            <span class="batch">第 {{item.iread_batch||item.batch}} 期</span>
-            <span class="isNew" v-if="item.is_new&&item.is_new==='true'">NEW</span>
-            <p class="author">
-               <span>{{item.iread_label||item.label}}</span> 
-               <label class="xiaoxue" :style="{background:phaseTypeList[item.study_phase]?phaseTypeList[item.study_phase].bg:'',color:phaseTypeList[item.study_phase]?phaseTypeList[item.study_phase].color:''}">{{item.study_phase_name}}</label>
-            </p>
-            <template v-if="!type||type!='bookShelf'">
-                <p class="price">
-                <span class="OPPOSans">￥{{item.hasOwnProperty('price_discount')?item.price_discount:item.price|cutMoneyFiter}}</span>
-                <s v-if="item.hasOwnProperty('price_discount')&&item.price_discount!==item.price">￥{{item.price|cutMoneyFiter}}</s>
-                </p>
-            </template>
-            </div>
-        </div> 
+        <span class="batch">第 {{ item.iread_batch || item.batch }} 期</span>
+        <span class="isNew" v-if="item.is_new && item.is_new === 'true'"
+          >NEW</span
+        >
+        <p class="author">
+          <span>{{ item.iread_label || item.label }}</span>
+        </p>
+        <p class="author">
+          <label
+            class="xiaoxue"
+            :style="{
+              background: phaseTypeList[item.study_phase]
+                ? phaseTypeList[item.study_phase].bg
+                : '',
+              color: phaseTypeList[item.study_phase]
+                ? phaseTypeList[item.study_phase].color
+                : '',
+            }"
+            >{{ item.study_phase_name }}</label
+          >
+        </p>
+        <template v-if="!type || type != 'bookShelf'">
+          <p class="price">
+            <span class="OPPOSans"
+              >￥{{
+                item.hasOwnProperty("price_discount")
+                  ? item.price_discount
+                  : item.price | cutMoneyFiter
+              }}</span
+            >
+            <s
+              v-if="
+                item.hasOwnProperty('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';
+import { cutMoneyFiter } from "@/utils/defined";
 import { getLogin } from "@/api/ajax";
 export default {
   name: "BookCard",
   //import引入的组件需要注入到对象中才能使用
   components: {},
-  props: ["item", "height","type","LoginNavIndex","userBg","headerBorder","headerBg","previousPage","isBuy"],
-  filters:{
-    cutMoneyFiter
+  props: [
+    "item",
+    "height",
+    "type",
+    "LoginNavIndex",
+    "userBg",
+    "headerBorder",
+    "headerBg",
+    "previousPage",
+    "isBuy",
+  ],
+  filters: {
+    cutMoneyFiter,
   },
   data() {
     //这里存放数据
     return {
-      goodsTypeList:{
-        0:{
-            type: 'LB'
+      goodsTypeList: {
+        0: {
+          type: "LB",
+        },
+        2: {
+          type: "baozhi",
         },
-        2:{
-            type: 'baozhi'
-        }
       },
-      phaseTypeList:{
-        11:{
-            bg:'#E8FFFB',
-            color: '#0FC6C2'
+      phaseTypeList: {
+        11: {
+          bg: "#E8FFFB",
+          color: "#0FC6C2",
         },
-        21:{
-            bg: '#F5E8FF',
-            color: '#722ED1'
+        21: {
+          bg: "#F5E8FF",
+          color: "#722ED1",
         },
-        22:{
-            bg: '#FFECE8',
-            color: '#F53F3F'
+        22: {
+          bg: "#FFECE8",
+          color: "#F53F3F",
         },
         23: {
-            bg: '#E8F3FF',
-            color: '#165DFF'
-        }
-      }
-    }
+          bg: "#E8F3FF",
+          color: "#165DFF",
+        },
+      },
+    };
   },
   //计算属性 类似于data概念
   computed: {
     score() {
-      return this.item.score.toFixed(1)
-    }
+      return this.item.score.toFixed(1);
+    },
   },
   //监控data中数据变化
   watch: {},
@@ -108,88 +165,83 @@ export default {
   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 => {
+      var timeArr = new Set(datasort.map((it) => it.date));
+      let newarr = [];
+      let rateArr = [];
+      timeArr.forEach((item) => {
         let a = {
           date: "",
-          arr: []
-        }
-        data.forEach(items => {
+          arr: [],
+        };
+        data.forEach((items) => {
           if (item == items.date) {
-            a.date = items.date
-            a.arr.push(items.weight)
-            rateArr.push(items.rate)
+            a.date = items.date;
+            a.arr.push(items.weight);
+            rateArr.push(items.rate);
           }
-        })
-        newarr.push(a)
-      })
-      newarr.forEach(item => {
+        });
+        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)
+            item.arr.push(0);
           }
         }
-      })
-      return { newarr, timeArr, rateArr }
+      });
+      return { newarr, timeArr, rateArr };
+    },
+    async handleLink() {
+      if (this.LoginNavIndex === 1) {
+        let MethodName = "/ShopServer/Client/BookshelfQuery/SetMyGoodsIsLooked";
+        let data = {
+          goods_id: this.item.id,
+          goods_type: this.item.type,
+        };
+        await getLogin(MethodName, data).then((res) => {});
+      }
+      let url = this.LoginNavIndex + "&&&1&&&2&&&3&&&" + this.previousPage;
+      if (!this.$route.query.from && this.LoginNavIndex !== 1) {
+        this.$router.push({
+          path: "/bookPeruseItem",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            cardType: "jingdu",
+            id: this.item.id,
+          },
+        });
+      } else {
+        this.$router.push({
+          path: "/articlePeruseDetail",
+          query: {
+            headerConfig: encodeURIComponent(url),
+            peruseId: this.item.id,
+          },
+        });
+      }
     },
-    async handleLink(){
-        if(this.LoginNavIndex===1){
-            let MethodName = "/ShopServer/Client/BookshelfQuery/SetMyGoodsIsLooked";
-            let data = {
-                goods_id: this.item.id,
-                goods_type: this.item.type
-            }
-            await getLogin(MethodName, data)
-            .then((res) => {
-            })
-        }
-        let url  = this.LoginNavIndex +'&&&1&&&2&&&3&&&' + this.previousPage
-        if(!this.$route.query.from&&this.LoginNavIndex!==1){
-            this.$router.push({
-                path: "/bookPeruseItem",
-                query: {
-                    headerConfig: encodeURIComponent(url),
-                    cardType: 'jingdu',
-                    id: this.item.id
-                },
-            });
-        }else{
-            this.$router.push({
-                path: "/articlePeruseDetail",
-                query: {
-                    headerConfig: encodeURIComponent(url),
-                    peruseId: this.item.id
-                },
-            });
-        }
-        
-    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     // let data = this.changeData(this.dataContext)
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {
-
-  },
+  mounted() {},
   //生命周期-创建之前
-  beforeCreated() { },
+  beforeCreated() {},
   //生命周期-挂载之前
-  beforeMount() { },
+  beforeMount() {},
   //生命周期-更新之前
-  beforUpdate() { },
+  beforUpdate() {},
   //生命周期-更新之后
-  updated() { },
+  updated() {},
   //生命周期-销毁之前
-  beforeDestory() { },
+  beforeDestory() {},
   //生命周期-销毁完成
-  destoryed() { },
+  destoryed() {},
   //如果页面有keep-alive缓存功能，这个函数会触发
-  activated() { }
-}
+  activated() {},
+};
 </script>
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
@@ -197,7 +249,7 @@ export default {
   width: 100%;
   cursor: pointer;
   position: relative;
-  .batch{
+  .batch {
     position: absolute;
     left: 0;
     top: 0;
@@ -205,7 +257,7 @@ export default {
     background: rgba(0, 0, 0, 0.64);
     padding: 4px 8px;
     display: block;
-    color: #FFF;
+    color: #fff;
     font-size: 14px;
     font-weight: 500;
     line-height: 22px;
@@ -225,15 +277,15 @@ export default {
   }
   .name {
     width: 100%;
-    height: 48px;
+    height: 24px;
     font-weight: 400;
     font-size: 14px;
     line-height: 22px;
-    color: #2F3742;
+    color: #2f3742;
     word-break: break-word;
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: 1;
     text-overflow: ellipsis;
     overflow: hidden;
   }
@@ -245,18 +297,17 @@ export default {
     font-weight: 500;
     display: flex;
     align-items: center;
-    span{
-       padding: 0px 8px; 
-       border-radius: 2px;
-       background: #F2F3F5;
-       color: #1D2129;
-       margin-right: 4px;
+    span {
+      padding: 0px 8px;
+      border-radius: 2px;
+      background: #f2f3f5;
+      color: #1d2129;
     }
-    .xiaoxue{
-        padding: 0px 8px;
-        border-radius: 2px;
-        background: #E8FFFB;
-        color: #0FC6C2;
+    .xiaoxue {
+      padding: 0px 8px;
+      border-radius: 2px;
+      background: #e8fffb;
+      color: #0fc6c2;
     }
   }
   .price {
@@ -267,16 +318,16 @@ export default {
       font-weight: 700;
       font-size: 14px;
       line-height: 22px;
-      color: #EC5E41;
+      color: #ec5e41;
     }
     :nth-child(2) {
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
       text-decoration-line: line-through;
-      color: #929CA8;
+      color: #929ca8;
       margin-left: 8px;
     }
   }
 }
-</style>
+</style>

src/views/bookShelf/bookPeruseItem.vue

@@ -141,6 +141,7 @@
         :data="info"
         :payWay="payWay"
         @handleClose="handleClose"
+        @handleSuccess="handleSuccess"
         :orderId="orderId"
         :qr_code_url="qr_code_url"
         :order_amount="order_amount"
@@ -235,6 +236,10 @@ export default {
       this.paymentShow = false;
       this.getInfo();
     },
+    handleSuccess() {
+      this.paymentShow = false;
+      this.getInfo();
+    },
     // 详情
     getInfo() {
       let MethodName = "/PaperServer/Client/Iread/GetIreadBriefInfo";