feat: 新增分享链接二维码

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jmal-cloud-view",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "jmalcloud",
   "author": "Jmal <zhushilun084@163.com>",
   "license": "MIT",
@@ -40,6 +40,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "pinyin": "^2.9.1",
+    "qrcode": "^1.5.1",
     "scriptjs": "^2.5.9",
     "sockjs-client": "1.4.0",
     "sortablejs": "^1.10.2",

src/components/Icon/Icon.vue

@@ -5,7 +5,7 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: document.location.protocol + '/resource/font_2024484_b4h46y1d4ho.js'
+  scriptUrl: document.location.protocol + '/resource/font_2024484_2muuviii2m.js'
 })
 
 // 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
@@ -16,7 +16,7 @@ const IconFont = Icon.createFromIconfontCN({
 // console.log(iconNames.slice(80,160))
 
 export const iconFonts = {
-  list: ["arrow1_left", "wulianwang-","zuji","disk-drive", "menu-fuzhi", "iso", "zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
+  list: ["qrcode", "arrow1_left", "wulianwang-","zuji","disk-drive", "menu-fuzhi", "iso", "zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
     "maren", "zhutou", "qie", "youling", "apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
 }
 

src/components/ShareDialog/index.vue

@@ -1,11 +1,13 @@
 <template>
   <di>
     <!--分享-->
-    <el-dialog title="分享文件" style="{'font-weight': 600}" :visible.sync="shareDialogVisible" @close="shareDialogClose">
+    <el-dialog title="分享文件" style="{'font-weight': 600}" :visible.sync="shareDialogVisible"
+               @close="shareDialogClose">
       <div>
         <div class="share-content">
           <div class="share-icon">
-            <icon-file class="share-icon-font" :item="file" :grid="true" :details="true" :image-url="imageUrl" :audio-cover-url="audioCoverUrl"></icon-file>
+            <icon-file class="share-icon-font" :item="file" :grid="true" :details="true" :image-url="imageUrl"
+                       :audio-cover-url="audioCoverUrl"></icon-file>
           </div>
           <div class="share-filename">
             <span>{{ file.name }}</span>
@@ -50,9 +52,23 @@
                   </el-select>
                 </el-col>
               </el-form-item>
-              <el-col  class="share-link">
+              <el-col class="share-link">
-                <el-input size="small" v-if="shareOptionConfig.shared" readonly="readonly" v-model="shareLink"></el-input>
+                <el-input size="small" v-if="shareOptionConfig.shared" readonly="readonly" v-model="shareLink">
-                <el-input class="share-link-code" size="small" v-if="shareOptionConfig.shared && shareOption.isPrivacy" readonly="readonly" v-model="extractionCode">
+                  <el-popover
+                    slot="append"
+                    class="share-link-qrcode"
+                    placement="right"
+                    trigger="hover"
+                    >
+                    <img alt="qrcode-share-link" :src="qrCodeshareLink"/>
+                    <el-button slot="reference" class="qrcode-btn tag-share-link" @click="copyShareLink('链接复制成功')"
+                               :data-clipboard-text="shareLink">
+                      <svg-icon icon-class="qrcode" class="qrcode"/>
+                    </el-button>
+                  </el-popover>
+                </el-input>
+                <el-input class="share-link-code" size="small" v-if="shareOptionConfig.shared && shareOption.isPrivacy"
+                          readonly="readonly" v-model="extractionCode">
                   <template slot="prepend">提取码</template>
                 </el-input>
               </el-col>
@@ -61,9 +77,16 @@
         </div>
       </div>
       <div slot="footer" class="dialog-footer">
-        <el-button size="small" v-if="!shareOptionConfig.shared" type="primary" @click="submitShare" v-loading="generateShareLinkLoading">创建分享</el-button>
+        <el-button size="small" v-if="!shareOptionConfig.shared" type="primary" @click="submitShare"
-        <el-button size="small" class="tag-share-link" v-if="shareOptionConfig.shared && shareOption.isPrivacy" @click="copyShareLink('口令复制成功')" :data-clipboard-text="file.name + ' ' + shareLink + ' 提取码：' + extractionCode">复制口令</el-button>
+                   v-loading="generateShareLinkLoading">创建分享
-        <el-button size="small" class="tag-share-link" v-if="shareOptionConfig.shared" type="primary" @click="copyShareLink('链接复制成功')" :data-clipboard-text="shareLink">复制链接</el-button>
+        </el-button>
+        <el-button size="small" class="tag-share-link" v-if="shareOptionConfig.shared && shareOption.isPrivacy"
+                   @click="copyShareLink('口令复制成功')"
+                   :data-clipboard-text="file.name + ' ' + shareLink + ' 提取码：' + extractionCode">复制口令
+        </el-button>
+        <el-button size="small" class="tag-share-link" v-if="shareOptionConfig.shared" type="primary"
+                   @click="copyShareLink('链接复制成功')" :data-clipboard-text="shareLink">复制链接
+        </el-button>
       </div>
     </el-dialog>
   </di>
@@ -75,10 +98,14 @@ import moment from 'moment'
 import IconFile from "@/components/Icon/IconFile";
 import api from '@/api/file-api'
 import Clipboard from "clipboard";
+import Icon from "@/components/Icon/Icon.vue";
+import QRCode from 'qrcode';
+
 
 export default {
   name: "ShareDialog",
   components: {
+    Icon,
     IconFile
   },
   props: {
@@ -155,6 +182,7 @@ export default {
         expiresDate: '',
       },
       shareLink: "",
+      qrCodeshareLink: "",
       extractionCode: '',
       shareOptionConfig: {
         shared: false,
@@ -164,12 +192,12 @@ export default {
   },
   watch: {
     status(visible) {
-      if(visible){
+      if (visible) {
         this.shareDialogVisible = true
         if (this.file.shareId) {
           this.shareOptionConfig.shared = true
           this.shareOptionConfig.linkLabel = '分享链接'
-          this.shareLink = this.getShareLink(this.file.shareId)
+          this.setShareLink(this.getShareLink(this.file.shareId))
           this.shareOption.isPrivacy = this.file.isPrivacy
           if (this.file.expireDate) {
             this.shareOption.expiresDate = moment(this.file.expireDate).format('x')
@@ -187,6 +215,16 @@ export default {
     }
   },
   methods: {
+    setShareLink(sahreLink) {
+      this.shareLink = sahreLink
+      QRCode.toDataURL(sahreLink)
+        .then(url => {
+          this.qrCodeshareLink = url
+        })
+        .catch(error => {
+          console.error(error)
+        })
+    },
     shareDialogClose() {
       this.shareOptionConfig.shared = false
       this.$emit('update:status', this.shareDialogVisible)
@@ -245,7 +283,7 @@ export default {
       }).then(res => {
         if (res.data) {
           let {shareId, extractionCode} = res.data
-          this.shareLink = this.getShareLink(shareId)
+          this.setShareLink(this.getShareLink(shareId))
           this.generateShareLinkLoading = false
           this.shareOptionConfig.shared = true
           this.shareOption.expiresDateOption = 2
@@ -261,7 +299,7 @@ export default {
               duration: 3000,
               dangerouslyUseHTMLString: true,
               iconClass: 'el-icon-success',
-              message: '<strong>&nbsp;&nbsp;有效期已设置为: <span>'+ expireDate + '</span> </strong>'
+              message: '<strong>&nbsp;&nbsp;有效期已设置为: <span>' + expireDate + '</span> </strong>'
             });
           }
         }
@@ -298,8 +336,9 @@ export default {
 
 <style lang="scss" scoped>
 
->>> .el-dialog {
+> > > .el-dialog {
-  max-width: 440px;
+  max-width: 460px;
+
   .el-dialog__title {
     font-weight: 600;
   }
@@ -308,13 +347,16 @@ export default {
 .share-icon {
   margin: 20px 0 20px 0;
   text-align: center;
-  >>> .icon-favorite {
+
+  > > > .icon-favorite {
     display: none;
   }
-  >>> .icon-share {
+
+  > > > .icon-share {
     display: none;
   }
-  .share-icon-font >>> .svg-icon {
+
+  .share-icon-font > > > .svg-icon {
     font-size: 8rem;
   }
 }
@@ -326,29 +368,33 @@ export default {
 
 .share-option {
 
-  >>>.el-form-item--mini.el-form-item {
+  > > > .el-form-item--mini.el-form-item {
     margin-bottom: 10px;
   }
 
   .share-expires-data {
-    >>> .el-input__inner {
+    > > > .el-input__inner {
       cursor: pointer;
       padding-right: 0;
     }
-    >>> .el-date-editor.el-input {
+
+    > > > .el-date-editor.el-input {
       width: 100%;
     }
   }
-  >>> .el-form-item__label {
+
+  > > > .el-form-item__label {
     line-height: 32px;
   }
+
   .shared-expires-text {
     text-align: right;
     line-height: 32px;
     padding-right: 5px;
   }
 }
->>> .dialog-footer {
+
+> > > .dialog-footer {
   .el-loading-spinner .circular {
     width: 25px !important;
   }
@@ -361,16 +407,25 @@ export default {
   .share-link-code {
     width: 130px;
     margin-top: 10px;
-    >>> .el-input-group__prepend {
+
-      padding:0 10px;
+    > > > .el-input-group__prepend {
+      padding: 0 10px;
       font-weight: 500;
     }
   }
 
-  >>> .el-input__inner {
+  .qrcode-btn {
+    padding: 12px 10px;
+  }
+
+  .qrcode {
+    font-size: 1.5rem;
+  }
+
+  > > > .el-input__inner {
     background-color: #84858d14;
     text-align: center;
+    padding: 0 10px;
   }
 }
-
 </style>

src/components/preview/AudioPreview.vue

@@ -64,7 +64,6 @@ export default {
       if (this.$store.getters.token === undefined) {
         url = fileConfig.publicPreviewUrl(newFile.id, window.shareId, this.$store.getters.shareToken);
       }
-      console.log('sfdsf', url)
       let music = newFile.music
       let fileName = newFile.name.substring(0, newFile.name.length - newFile.suffix.length - 1)
       let musicOperation = {