打印词汇类型

src/views/bookShelf/components/LexicalType.vue

@@ -491,6 +491,10 @@
           <span>清除标记</span>
           <svg-icon icon-class="brush-line"></svg-icon>
         </div>
+        <div class="item" v-if="tabsIndex === 0" @click="handlePrint">
+          <span>打印</span>
+          <svg-icon icon-class="print"></svg-icon>
+        </div>
       </div>
     </div>
     <div class="voice-full-screen" :id="'screen-' + mathNum">
@@ -505,12 +509,328 @@
         :likeWord="likeWord"
       />
     </div>
+    <div
+      class="print-model-bottom-left"
+      ref="printAreaManys"
+      id="showWaterMarks"
+      v-if="isPrintMore"
+      :style="{
+        width: '220mm',
+      }"
+    >
+      <template
+        v-if="
+          resArr[0] &&
+          resArr[0].wordsList[0] &&
+          resArr[0].wordsList[0].hasOwnProperty('pno') &&
+          resArr[0].wordsList[0].pno === 0
+        "
+      >
+        <h2 :class="['NNPE-words']">
+          <span
+            v-for="(itemR, indexR) in resArr[0].wordsList"
+            :key="indexR"
+            :style="{
+              color: colorObj.titleColor,
+              fontSize: titleFontsize + 'px',
+              lineHeight: titleFontsize + 8 + 'px',
+              marginRight: itemR.tokens[9] === '' ? '' : '10px',
+              fontWeight: '700',
+              cursor: 'pointer',
+            }"
+            :class="[
+              itemR.tokens[9] === '' ? 'marginRight' : '',
+              itemR.marginRight ? 'marginSingleRight' : '',
+            ]"
+          >
+            <!-- <template v-if="itemR.isShow"> -->
+            <div class="wordshasbottom">
+              <span
+                class="NNPE-chs"
+                :class="[
+                  itemR.type,
+                  itemR.tokens[9] === '' ? 'marginRight' : '',
+                  itemR.marginRight ? 'marginSingleRight' : '',
+                  itemR.highIndex ? 'fontWeight' : '',
+                  itemR.color ? 'wordSelected' : '',
+                  selectWordType.indexOf(itemR.tokens[11]) > -1
+                    ? !hideSelectWord || itemR.showSelectWord
+                      ? ''
+                      : 'word-opacity'
+                    : '',
+                ]"
+                :style="{
+                  background: itemR.color ? itemR.color : '',
+                  borderColor: itemR.borderColor ? itemR.borderColor : '',
+                  color:
+                    tabsIndex === 1
+                      ? selectSentenceIdList.indexOf(itemR.sent_id) > -1
+                        ? colorObj.type === 'white' ||
+                          colorObj.type === 'darkGreen'
+                          ? sentenceLengthType[itemR.sententLenType].color
+                          : sentenceLengthType[itemR.sententLenType].dark
+                        : '#929CA8'
+                      : tabsIndex === 0
+                      ? selectWordType.indexOf(itemR.tokens[11]) > -1
+                        ? vocabularyType[itemR.tokens[11]].color
+                        : colorObj.type === 'white' ||
+                          colorObj.type === 'darkGreen'
+                        ? ''
+                        : ''
+                      : '',
+                }"
+                @click="itemR.showSelectWord = !itemR.showSelectWord"
+                >{{ itemR.tokens[2] }}</span
+              >
+              <div
+                class="word-bottom"
+                v-if="
+                  hideSelectWord &&
+                  selectWordType.indexOf(itemR.tokens[11]) > -1
+                "
+              >
+                <span :style="{ background: colorObj.titleColor }"></span>
+              </div>
+            </div>
+            <!-- <div
+              class="wordshasbottom"
+              v-if="
+                resArr[0].wordsList[indexR + 1] &&
+                resArr[0].wordsList[indexR + 1].tokens[2] &&
+                enFhList.indexOf(resArr[0].wordsList[indexR + 1].tokens[2]) > -1
+              "
+            >
+              <span
+                class="NNPE-chs NNPE-chs-both"
+                :class="[
+                  resArr[0].wordsList[indexR + 1].type,
+                  resArr[0].wordsList[indexR + 1].tokens[8] === ''
+                    ? 'marginLeft'
+                    : '',
+                  resArr[0].wordsList[indexR + 1].marginRight
+                    ? 'marginSingleRight'
+                    : '',
+                  resArr[0].wordsList[indexR + 1].highIndex ? 'fontWeight' : '',
+                  resArr[0].wordsList[indexR + 1].color ? 'wordSelected' : '',
+                  selectWordType.indexOf(
+                    resArr[0].wordsList[indexR + 1].tokens[11]
+                  ) > -1
+                    ? !hideSelectWord ||
+                      resArr[0].wordsList[indexR + 1].showSelectWord
+                      ? ''
+                      : 'word-opacity'
+                    : '',
+                ]"
+                @click="
+                  resArr[0].wordsList[indexR + 1].showSelectWord =
+                    !resArr[0].wordsList[indexR + 1].showSelectWord
+                "
+                :style="{
+                  background: resArr[0].wordsList[indexR + 1].color
+                    ? resArr[0].wordsList[indexR + 1].color
+                    : '',
+                  borderColor: resArr[0].wordsList[indexR + 1].borderColor
+                    ? resArr[0].wordsList[indexR + 1].borderColor
+                    : '',
+                  color:
+                    tabsIndex === 1
+                      ? selectSentenceIdList.indexOf(
+                          resArr[0].wordsList[indexR + 1].sent_id
+                        ) > -1
+                        ? colorObj.type === 'white' ||
+                          colorObj.type === 'darkGreen'
+                          ? sentenceLengthType[
+                              resArr[0].wordsList[indexR + 1].sententLenType
+                            ].color
+                          : sentenceLengthType[itemR.sententLenType].dark
+                        : '#929CA8'
+                      : tabsIndex === 0
+                      ? selectWordType.indexOf(
+                          resArr[0].wordsList[indexR + 1].tokens[11]
+                        ) > -1
+                        ? vocabularyType[
+                            resArr[0].wordsList[indexR + 1].tokens[11]
+                          ].color
+                        : colorObj.type === 'white' ||
+                          colorObj.type === 'darkGreen'
+                        ? ''
+                        : ''
+                      : '',
+                }"
+                >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
+              >
+              <div
+                class="word-bottom"
+                v-if="
+                  hideSelectWord &&
+                  selectWordType.indexOf(
+                    resArr[0].wordsList[indexR + 1].tokens[11]
+                  ) > -1
+                "
+              >
+                <span :style="{ background: colorObj.titleColor }"></span>
+              </div>
+            </div>
+          </template> -->
+            <!-- {{itemR.tokens[2]}} -->
+          </span>
+        </h2>
+      </template>
+      <h2 v-else>
+        <span
+          :style="{
+            color: colorObj.titleColor,
+            fontSize: titleFontsize + 'px',
+            lineHeight: titleFontsize + 8 + 'px',
+            marginRight: '10px',
+            fontWeight: '700',
+            cursor: 'pointer',
+          }"
+          >{{ articleInfo.art_title }}</span
+        >
+      </h2>
+      <h6
+        class="nnpe-article-author"
+        :style="{
+          color: colorObj.sourceColor,
+          fontSize: '14px',
+          lineHeight: '22px',
+          fontWeight: '400',
+        }"
+      >
+        {{
+          articleInfo.art_author +
+          " · " +
+          articleInfo.study_phase_name +
+          "版 · 第 " +
+          articleInfo.iss_no +
+          " 期 · " +
+          articleInfo.release_date +
+          " · " +
+          articleInfo.chn_item +
+          (articleInfo.page_no_in_pub
+            ? " · P" + articleInfo.page_no_in_pub
+            : "")
+        }}
+      </h6>
+      <template v-if="resArr.length > 0">
+        <div class="table-box">
+          <div
+            :class="['NNPE-detail']"
+            v-for="(item, index) in resArr"
+            :key="'detail' + index"
+          >
+            <div class="wordsList-box">
+              <div class="nnpe-sentence-box">
+                <div
+                  v-for="(pItem, pIndex) in item.wordsList"
+                  :key="'wordsList' + pIndex"
+                  :style="{
+                    width:
+                      hideSelectWord &&
+                      selectWordType.indexOf(pItem.tokens[11]) > -1
+                        ? pItem.tokens[2].length * 20 + 'px'
+                        : '',
+                  }"
+                >
+                  <template v-if="pItem.pno !== 0">
+                    <div :class="['NNPE-words']">
+                      <div class="wordshasbottom">
+                        <span
+                          class="NNPE-chs"
+                          :class="[
+                            pItem.noBefore ? 'marginLeft' : '',
+                            pItem.noAfter ? 'marginRight' : '',
+                            pItem.marginRight ? 'marginSingleRight' : '',
+                            pItem.color ? 'wordSelected' : '',
+                            selectWordType.indexOf(pItem.tokens[11]) > -1
+                              ? !hideSelectWord || pItem.showSelectWord
+                                ? ''
+                                : 'word-opacity'
+                              : '',
+                          ]"
+                          :style="{
+                            fontSize: wordFontsize + 'px',
+                            color:
+                              tabsIndex === 1
+                                ? selectSentenceIdList.indexOf(pItem.sent_id) >
+                                  -1
+                                  ? colorObj.type === 'white' ||
+                                    colorObj.type === 'darkGreen'
+                                    ? sentenceLengthType[pItem.sententLenType]
+                                        .color
+                                    : sentenceLengthType[pItem.sententLenType]
+                                        .dark
+                                  : '#929CA8'
+                                : tabsIndex === 0
+                                ? selectWordType.indexOf(pItem.tokens[11]) > -1
+                                  ? vocabularyType[pItem.tokens[11]].color
+                                  : colorObj.type === 'white' ||
+                                    colorObj.type === 'darkGreen'
+                                  ? '#2F3742'
+                                  : '#C1C5CD'
+                                : '#2F3742',
+                          }"
+                          @click="pItem.showSelectWord = !pItem.showSelectWord"
+                          >{{ pItem.tokens[2] }}</span
+                        >
+                        <div
+                          class="word-bottom"
+                          v-if="
+                            hideSelectWord &&
+                            selectWordType.indexOf(pItem.tokens[11]) > -1
+                          "
+                          :style="{
+                            width:
+                              hideSelectWord &&
+                              selectWordType.indexOf(pItem.tokens[11]) > -1
+                                ? pItem.tokens[2].length * 20 + 'px'
+                                : '',
+                          }"
+                        >
+                          <span
+                            :style="{
+                              background:
+                                colorObj.type === 'white' ||
+                                colorObj.type === 'darkGreen'
+                                  ? '#2F3742'
+                                  : '#C1C5CD',
+                            }"
+                          ></span>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+            <template v-if="articleImg && articleImg[index]">
+              <figure
+                v-for="(itemI, indexI) in articleImg[index]"
+                :key="indexI"
+              >
+                <el-image
+                  :width="itemI.width"
+                  :height="itemI.height"
+                  :src="itemI.src"
+                  fit="contain"
+                  :preview-src-list="[itemI.src]"
+                ></el-image>
+              </figure>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
 import AudioLine from "@/components/common/AudioLine.vue";
 import Voicefullscreen from "./Voicefullscreen.vue";
+import { getLogin } from "@/api/ajax";
+import waterMark from "../../../store/watermark";
+import { getToken } from "@/utils/auth";
 export default {
   name: "ArticleView",
   props: [
@@ -709,6 +1029,9 @@ export default {
       hideSelectWord: false,
       isFull: false,
       mathNum: Math.random().toString(36).substr(2),
+      articleId: this.$route.query.id ? this.$route.query.id : "",
+      isPrintMore: false,
+      userMessage: getToken() ? JSON.parse(getToken()) : null,
     };
   },
   computed: {},
@@ -903,6 +1226,58 @@ export default {
         true
       );
     },
+    handlePrint() {
+      let MethodName =
+        "/ShopServer/Client/PrintRecordManager/GetMyPrintCount_Article";
+      getLogin(MethodName, {
+        goods_type: 21,
+        date_range: "ALL",
+        article_id: this.articleId,
+      }).then((res) => {
+        if (res.status === 1) {
+          if (res.print_count < 5) {
+            getLogin(
+              "/ShopServer/Client/PrintRecordManager/AddPrintRecord_Article",
+              {
+                goods_type: 21,
+                article_id: this.articleId,
+              }
+            ).then((res) => {
+              if (res.status === 1) {
+              }
+            });
+            this.isPrintMore = true;
+            setTimeout(() => {
+              waterMark.set(
+                this.userMessage.user_name + " " + this.userMessage.phone,
+                "",
+                "showWaterMarks"
+              );
+            }, 1000);
+            setTimeout(() => {
+              this.$nextTick(() => {
+                this.$print(this.$refs["printAreaManys"], {
+                  noPrint: ".noPrint",
+                  type: "html",
+                  scanStyles: true,
+                  showModal: true,
+                  // style: style,// 亦可使用引入的外部css;
+                  onStart: () => {
+                    // console.log("打印开始");
+                  },
+                  onEnd: () => {
+                    // console.log("打印完成");
+                  },
+                });
+                this.isPrintMore = false;
+              });
+            }, 1500);
+          } else {
+            this.$message.warning("每篇文章打印+下载次数共5次，现已达上限。");
+          }
+        }
+      });
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},