index.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <div class="page">
  3. <Loading :loading="loading" />
  4. <div v-show="!loading">
  5. <van-image-preview class="preview" v-model="vshowList" :images="detailData.imageFiles" :start-position='0' @change="onChange"
  6. @scale='onScale' @close='onClose' ref='imagePreview'>
  7. <template v-slot:index>
  8. <div>
  9. 第{{curPage}}页
  10. </div>
  11. </template>
  12. <template v-slot:cover v-if="showBottom">
  13. <div class="pdf-cover-bottom">
  14. <input class="pdf-barinputL" ref='pdfInput' type="number" id="spinner_amount" :value="curPage"
  15. @input="pdfInput" />
  16. <!-- oninput="" -->
  17. <div class="pdf-barinputR">/{{ detailData.imageFiles.length}}</div>
  18. </div>
  19. </template>
  20. </van-image-preview>
  21. <div v-show="!vshowList" class="jurisdiction">
  22. <van-image :src="require('../../../static/images/icon_jurisdiction.png')" />
  23. <div>{{nomessage}}</div>
  24. </div>
  25. </div>
  26. <!-- <div style="position: absolute;left:0;top:40%;z-index: 10000000;">-->
  27. <!-- <div style="width:100%;text-align:center;font-size:50px;color:#000;opacity: 0.15">{{watermark}}</div>-->
  28. <!-- </div>-->
  29. <div style="position: relative;width: 100%;height: 100%;z-index: 99999;">
  30. <div style="width:300px;font-style:oblique;text-align:center;font-size:30px;color:#000;opacity: 0.2;position: absolute;left: 0;right: 0;margin: 55% auto;">{{watermark}}</div>
  31. </div>
  32. </div>
  33. </template>
  34. <script>
  35. import * as dd from 'dingtalk-jsapi';
  36. import Loading from '@/components/Loading';
  37. import {
  38. ImagePreview
  39. } from 'vant';
  40. export default {
  41. name: 'page',
  42. data() {
  43. return {
  44. nomessage: '',
  45. vshowList: false,
  46. pdfFile: null,
  47. loading: true,
  48. curPage: 1,
  49. curPage2: 1,
  50. totals: 0,
  51. scale: 2,
  52. show: true,
  53. detailData: null,
  54. showBottom: false,
  55. timeCountId: null,
  56. watermark: 'HSAY',
  57. }
  58. },
  59. watch: {
  60. vshowList(nval, oval) {
  61. if (oval && !nval) {
  62. this.vshowList = true;
  63. }
  64. }
  65. },
  66. created() {
  67. if (this.$route.query.path) {
  68. this.loadPdfHandler(this.$route.query.path);
  69. }
  70. if (this.$route.query.title) {
  71. this.ChangePageTitle(this.$route.query.title)
  72. }
  73. if (this.$route.query.id) {
  74. this.loading = true;
  75. this.getDetail();
  76. } else {
  77. // this.loadPdfHandler('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf');
  78. this.loading = false;
  79. }
  80. if (dd.env.platform != 'notInDingTalk') {
  81. dd.biz.navigation.setRight({
  82. show: false, //控制按钮显示, true 显示, false 隐藏, 默认true
  83. control: false, //是否控制点击事件,true 控制,false 不控制, 默认false
  84. showIcon: false, //是否显示icon,true 显示, false 不显示,默认true; 注:具体UI以客户端为准
  85. onSuccess: () => {},
  86. onFail: function (err) {
  87. alert('dd error: ' + JSON.stringify(err));
  88. }
  89. });
  90. }
  91. },
  92. destroyed() {
  93. this.clearTimeCount();
  94. },
  95. components: {
  96. Loading,
  97. [ImagePreview.Component.name]: ImagePreview.Component,
  98. },
  99. methods: {
  100. // pdf加载时
  101. loadPdfHandler(path) {
  102. this.$nextTick(() => {
  103. this.$refs.canvas.src = path
  104. this.$refs.canvas.start();
  105. });
  106. },
  107. // 获取详情
  108. getDetail() {
  109. let self = this;
  110. this.$api.user.getDetail(this.$route.query.id, localStorage.userId || '').then((response) => {
  111. const res = response.data.data;
  112. this.loading = false;
  113. if (res.code == 0 && res.data) {
  114. this.detailData = res.data;
  115. this.watermark = res.data.watermark;
  116. this.vshowList = true;
  117. this.$nextTick(() => {
  118. this.showBottom = true
  119. })
  120. // let path = res.data.path || ''
  121. // self.loadPdfHandler(path);
  122. // self.loadPdfHandler("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf");
  123. self.ChangePageTitle(res.data.fileName);
  124. } else if (res.code == 1000) { //没有查看权限
  125. this.vshowList = false;
  126. this.nomessage = res.message
  127. }
  128. }).catch(err => {
  129. console.log(err)
  130. self.loading = false;
  131. });
  132. },
  133. // 修改页面标题
  134. ChangePageTitle(title) {
  135. if (dd.env.platform != 'notInDingTalk') {
  136. dd.ready(function () {
  137. dd.biz.navigation.setTitle({
  138. title: title, //控制标题文本,空字符串表示显示默认文本
  139. onSuccess: function (result) {
  140. console.log(result);
  141. },
  142. onFail: function (err) {
  143. console.log(err);
  144. }
  145. });
  146. });
  147. } else {
  148. document.title = title
  149. }
  150. },
  151. // 缩放
  152. onScale() {
  153. document.getElementById("spinner_amount").blur();
  154. },
  155. // 关闭
  156. onClose() {
  157. document.getElementById("spinner_amount").blur();
  158. },
  159. // 页面切换
  160. onChange(val) {
  161. this.curPage = val + 1;
  162. document.getElementById("spinner_amount").blur();
  163. },
  164. // 开始输入计时
  165. startTimeCount(f) {
  166. this.clearTimeCount();
  167. this.timeCountId = setTimeout(() => {
  168. f();
  169. }, 700)
  170. },
  171. // 清除输入计时
  172. clearTimeCount() {
  173. if (this.timeCountId) {
  174. clearTimeout(this.timeCountId);
  175. this.timeCountId = null;
  176. }
  177. },
  178. // 页码输入
  179. pdfInput(e) {
  180. let value = e.target.value;
  181. if (value) {
  182. value = value.replace(/[^\d]/g, '')
  183. }
  184. this.curPage = value;
  185. this.startTimeCount(() => {
  186. if (!value) {
  187. this.jumpPage(0);
  188. } else if (parseInt(value) > parseInt(this.detailData.imageFiles.length)) {
  189. this.jumpPage(this.detailData.imageFiles.length);
  190. } else {
  191. this.jumpPage(value)
  192. }
  193. })
  194. },
  195. // 输入框失去焦点
  196. pdfInputBlur() {
  197. let spinner = document.getElementById('spinner_amount');
  198. let val = spinner.valueAsNumber
  199. if (val) {
  200. if (this.detailData.imageFiles.length < val) {
  201. val = this.detailData.imageFiles.length;
  202. spinner.valueAsNumber = this.detailData.imageFiles.length;
  203. }
  204. this.jumpPage(val);
  205. } else {
  206. spinner.valueAsNumber = this.curPage
  207. }
  208. },
  209. // 切换页面
  210. jumpPage(val) {
  211. console.log(val)
  212. if (0 < val && val <= this.detailData.imageFiles.length) {
  213. this.curPage = val;
  214. this.$refs.imagePreview.swipeTo(val - 1);
  215. }
  216. },
  217. }
  218. }
  219. </script>
  220. <style scoped>
  221. .jurisdiction {
  222. margin: 10px;
  223. margin-top: 10vh;
  224. text-align: center;
  225. font-size: 17px;
  226. color: #17a8ff;
  227. opacity: 1;
  228. }
  229. .pdf-cover-bottom {
  230. position: fixed;
  231. bottom: 0;
  232. left: 0;
  233. right: 0;
  234. background: #fff;
  235. display: flex;
  236. flex-direction: row;
  237. align-items: center;
  238. justify-content: center;
  239. padding: 20px 10px;
  240. }
  241. .pdf-barinputL {
  242. width: 40px;
  243. height: 20px;
  244. text-align: center;
  245. }
  246. .pdf-barinputR {
  247. margin-left: 5px;
  248. text-align: center;
  249. }
  250. .pdf-jump-button {
  251. position: absolute;
  252. top: 50%;
  253. right: 30px;
  254. transform: translateY(-50%);
  255. border-radius: 5px;
  256. background: #17a8ff;
  257. color: #fff;
  258. }
  259. .preview * { pointer-events: none!important; }
  260. </style>