feat: 文库详情页功能调整

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

jydocs-pc/src/api/modules/publicapply.js

@@ -3,15 +3,15 @@ import mockRequest from '@/api/mock'
 import qs from 'qs'
 
 let request = httpRequest
-// if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true') {
-//   // @ts-ignore
-//   request = mockRequest
-// }
+if (process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true') {
+  // @ts-ignore
+  request = mockRequest
+}
 
 export function getJyAdListApi (data) {
   // data = qs.stringify(data)
   return request({
-    baseURL: 'publicapply',
+    baseURL: '/publicapply',
     url: '/free/getJyAdList',
     contentType: 'application/json',
     method: 'post',

jydocs-pc/src/components/dialog/Dialog.vue

@@ -0,0 +1,178 @@
+<template>
+  <el-dialog
+    class="custom-dialog"
+    :custom-class="customClass"
+    v-bind="$props"
+    :show-close="showClose"
+    :visible="visible"
+    :before-close="beforeClose"
+    @update:visible="update"
+    @open="$emit('open')"
+    @opened="$emit('opened')"
+    @close="$emit('close')"
+    @closed="$emit('closed')"
+  >
+    <slot name="default"></slot>
+    <span slot="footer" v-if="showFooter" class="dialog-footer">
+      <div class="footer-btn" :class="{'single-btn': !showCancel}">
+        <slot name="footer">
+          <button
+            class="action-button confirm"
+            :disabled="disabled"
+            @click="onClickConfirm"
+          >
+            {{ confirmText }}
+          </button>
+          <button v-if="showCancel" class="action-button cancel" @click="onClickCancel">
+            {{ cancelText }}
+          </button>
+        </slot>
+      </div>
+      <div slot="footText" class="foot-text">
+        <slot name="footText"></slot>
+      </div>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { Dialog, Button } from 'element-ui'
+
+export default {
+  name: 'CustomDialog',
+  components: {
+    [Dialog.name]: Dialog,
+    [Button.name]: Button
+  },
+  props: {
+    visible: Boolean,
+    showClose: Boolean,
+    beforeClose: Function,
+    showFooter: {
+      type: Boolean,
+      default() {
+        return true
+      }
+    },
+    top: String,
+    title: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '30%'
+    },
+    'show-close': {
+      type: Boolean,
+      default: false
+    },
+    center: {
+      type: Boolean,
+      default: true
+    },
+    customClass: {
+      type: String,
+      default: ''
+    },
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    disabled: Boolean,
+    confirmText: {
+      type: String,
+      default: '确定'
+    },
+    cancelText: {
+      type: String,
+      default: '取消'
+    }
+  },
+  methods: {
+    update(e) {
+      this.$emit('update:visible', e)
+    },
+    onClickCancel() {
+      this.$emit('cancel')
+    },
+    onClickConfirm() {
+      this.$emit('confirm')
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep {
+  .el-dialog {
+    border-radius: 8px;
+  }
+  .el-dialog__body {
+    color: #686868;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  .el-dialog__body,
+  .el-dialog__footer {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+  .el-dialog__footer {
+    padding-top: 6px;
+  }
+  .dialog-footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    .footer-btn{
+      display: flex;
+      width: 100%;
+      &.single-btn {
+        justify-content: center;
+        .action-button{
+          flex: none;
+          width: 132px;
+        }
+      }
+    }
+    .foot-text {
+      margin-top: 8px;
+      font-size: 14px;
+      color: #686868;
+    }
+  }
+  .action-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    height: 36px;
+    border-radius: 6px;
+    &.cancel {
+      border: 1px solid #e0e0e0;
+      background-color: #fff;
+      color: #686868;
+    }
+    &.confirm {
+      border: 1px solid #2ABED1;
+      background-color: #2ABED1;
+      color: #fff;
+      &:disabled {
+        opacity: 0.5;
+      }
+    }
+    &:not(:last-of-type) {
+      margin-right: 48px;
+    }
+  }
+}
+.text-center {
+  ::v-deep {
+    .el-dialog__body {
+      text-align: center;
+    }
+  }
+}
+</style>

jydocs-pc/src/views/Content.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="detail-main">
+  <div class="detail-main" v-loading="loading">
     <div class="c-details">
       <div class="d-left">
         <div class="tops">
@@ -84,12 +84,12 @@
                 <div class="file-action-content member-free" v-if="datas.productType === 1">
                   <div class="coin before-coin" v-if="!userMemberInfo.docMemberStatus && userMemberInfo.free_download !== 1">原价：<i class="el-icon-jy-iconJianYu"></i><span style="text-decoration: line-through;">{{ datas.price }}</span></div>
                   <div v-if="userMemberInfo.docMemberStatus">会员免费</div>
-                  <el-button type="primary" @click="loadFile" v-if="!userMemberInfo.docMemberStatus && userMemberInfo.free_download === 1">
+                  <el-button type="primary" @click="primeLoadFile" v-if="!userMemberInfo.docMemberStatus && userMemberInfo.free_download === 1">
                     <i class="el-icon-jy-iconJianYu"></i>
                     <span>{{ datas.price }}</span>
                     <span>原价下载</span>
                   </el-button>
-                  <el-button class="prime-cost" v-if="!userMemberInfo.docMemberStatus && userMemberInfo.free_download !== 1">
+                  <el-button class="prime-cost" @click="downLoadFreeEvent" v-if="!userMemberInfo.docMemberStatus && userMemberInfo.free_download !== 1">
                     <span>使用免费下载特权</span>
                     <span>（1次机会）</span>
                   </el-button>
@@ -114,6 +114,18 @@
           </div>
         </div>
       </div>
+      <common-dialog
+        width="386px"
+        @confirm="dialogConfirm"
+        @cancel="dialogInfo.visible = false"
+        :confirm-text="dialogInfo.confirmText"
+        :cancel-text="dialogInfo.cancelText"
+        :title="dialogInfo.title"
+        :show-cancel="dialogInfo.showCancel"
+        :visible="dialogInfo.visible">
+        <div class="dialog-content" v-html="dialogInfo.content"></div>
+        <span slot="footText">{{ dialogInfo.footText }}</span>
+      </common-dialog>
       <div class="d-right">
         <div class="r-tops">
           <a :href="item.s_link" v-for="item in adsUrl" :key="item.s_pic">
@@ -127,10 +139,12 @@
 </template>
 <script>
 import { Button, Tooltip, Divider, Message } from 'element-ui'
-import { getDetails, getShow, getRecommend, getDown, getAdverse, getCoin, getAdd, getRemove, getSimpleData } from '../api/modules/detail'
+import { getDetails, getShow, getRecommend, getDown, getCoin, getAdd, getRemove, getSimpleData } from '../api/modules/detail'
 import { formatSize, dateFormatter, recoveryPageData } from '@/utils/'
 import vRecommend from '@/components/recommend'
+import commonDialog from '@/components/dialog/Dialog'
 import { getSearchTag } from '../api/modules/home'
+import { getJyAdListApi } from '../api/modules/publicapply'
 import { getUserInfo } from '../api/modules/user'
 export default {
   components: {
@@ -138,10 +152,12 @@ export default {
     [Tooltip.name]: Tooltip,
     [Divider.name]: Divider,
     [Message.name]: Message,
-    vRecommend
+    vRecommend,
+    commonDialog
   },
   data () {
     return {
+      loading: false,
       docIds: '',
       locaHref: '',
       datas: [],
@@ -174,7 +190,15 @@ export default {
       },
       tabs: [],
       islogin: false,
-      userMemberInfo: {}
+      userMemberInfo: {},
+      dialogInfo: {
+        visible: false,
+        title: '文档下载成功',
+        content: `已添加到您的文库中，您可前往<span>【工作台-服务-我的文库】</span>查看。`,
+        footText: '会员免费文档下载特权：消耗1篇 | 今日还剩余99篇',
+        showCancel: false,
+        confirmText: '我知道了'
+      }
     }
   },
   created () {
@@ -184,7 +208,7 @@ export default {
     this.getSimpleData_()
     this.setTop()
     this.adverse()
-    this.getDocMemberInfo()
+    this.getDocInfo()
   },
   beforeCreate () {
     $('.docs-app').addClass('page-content')
@@ -216,8 +240,20 @@ export default {
     }
   },
   methods: {
-    // 获取文库会员信息
-    getDocMemberInfo () {
+    // 使用免费下载特权
+    downLoadFreeEvent () {
+      if(this.userMemberInfo.free_download === 0) {
+        // 未留资，去留资
+        vm.isNeedSubmit('pc_Library_details_free')
+      } else if(this.userMemberInfo.free_download === 1) {
+        
+      }
+    },
+    dialogConfirm () {
+
+    },
+    async getDocInfo () {
+      // 获取文库会员信息
       getUserInfo().then(res => {
         if(res && res.data && res.data.error_code === 0) {
           this.userMemberInfo = res.data.data
@@ -229,6 +265,7 @@ export default {
         }
       })
     },
+    
     loginCallback () {
       this.islogin = true
       this.adverse()
@@ -417,8 +454,13 @@ export default {
       })
     },
     adverse () {
-      getAdverse({ code: 'jydoc-content-right', num: 1 }).then(res => {
-        this.adsUrl = res.data.data
+      // 获取广告信息
+      getJyAdListApi({ codes: ['jydoc-content-right'] }).then(res => {
+        const resData = res.data
+        if(resData && resData.error_code === 0) {
+          // this.jydocContentRight = resData.data['jydoc-content-right']
+          this.adsUrl = resData.data['jydoc-content-right']
+        }
       })
     },
     shoucang () {
@@ -480,6 +522,30 @@ export default {
         }
       }
     },
+    // 原价下载
+    primeLoadFile () {
+      if (!this.islogin) {
+        try {
+          window.openLoginDig()
+        } catch (e) {
+          console.log(e)
+        }
+        return
+      }
+      if(this.coinNum < this.datas.price) {
+        // 剑鱼币余额不足
+        const params = {
+          visible: true,
+          title: '剑鱼币余额不足',
+          content: `现有 ${this.coinNum} 剑鱼币，还需 ${this.datas.price - this.coinNum} 剑鱼币，请先充值`,
+          footText: '',
+          showCancel: true,
+          confirmText: '立即充值',
+          cancelText: '我再想想',
+        }
+        this.dialogInfo = params
+      }
+    },
     fileType (val) {
       if (val === 1) {
         return 'word'