build

package.json

@@ -18,6 +18,7 @@
     "browserslist": "^4.13.0",
     "caniuse-lite": "^1.0.30001109",
     "clean-deep": "^3.3.0",
+    "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.8.35",
     "default-passive-events": "^1.0.10",
     "element-ui": "^2.13.2",

src/views/teamBuild/modals/change-voice.vue

@@ -72,6 +72,26 @@
           </el-option>
         </el-select> -->
       </el-form-item>
+      <el-form-item label="查看链接" prop="name" v-if="detail.subjectChange">
+        <div class="viewlink">
+          <el-tooltip class="item" effect="dark" :content="copyLink" placement="top">
+            <span class="link">{{copyLink}}</span>
+          </el-tooltip>
+          <el-popover
+            placement="top"
+            width="220"
+            trigger="click">
+            <div class="left-code">
+              <div id="qrcode"
+                  class="qrcode code"
+                  ref="qrCodeUrl"></div>
+              <p class="code-url"
+                v-if="copyLink">{{ copyLink }} <el-link @click="copyUrl(copyLink)" class="linkbtn" type="primary">复制</el-link></p>
+            </div>
+            <el-button type="primary" class="btn" slot="reference" @click="onCreateQRCode">二维码</el-button>
+          </el-popover>
+        </div>
+      </el-form-item>
       <el-form-item label="支付差价" prop="name">
         <span style="color: red;" v-if="!detail.subjectChange">{{ spread | moneyFormat }}元</span>
         <span style="color: red;" v-else>{{ editSpread | moneyFormat }}元</span>
@@ -101,6 +121,8 @@
   </div>
 </template>
 <script>
+import QRCode from 'qrcodejs2'
+import copy from 'copy-to-clipboard'
 import { getStudentOriginal, getSubjectGoodsAndInfo, subjectChangeAdd, subjectChangeCancel, getChangeInfo } from '@/api/buildTeam'
 import accessories from './accessories'
 
@@ -220,6 +242,12 @@ export default {
     },
   },
   computed: {
+    copyLink() {
+      if (this.detail.subjectChange) {
+        return location.origin + '/#/change-voice?id=' + this.detail.subjectChange.id
+      }
+      return ''
+    },
     filterVoiceList() {
       return this.voiceList.filter(item => item.subjectId !== this.detail.actualSubjectId)
     },
@@ -268,6 +296,10 @@ export default {
     }
   },
   methods: {
+    copyUrl(url) {
+      copy(url)
+      this.$message.success('复制成功')
+    },
     fetchDetail() {
       const setRes = res => {
         const { data } = res
@@ -340,6 +372,20 @@ export default {
       }
       return Math.floor(_num * 100) / 100
     },
+    onCreateQRCode () {
+      setTimeout(() => {
+        document.getElementById('qrcode').innerHTML = '';
+        this.qrcode = new QRCode('qrcode', {
+          width: 200,
+          height: 200,
+          colorDark: '#000000',
+          colorLight: '#ffffff',
+          correctLevel: QRCode.CorrectLevel.H
+        })
+        this.qrcode.makeCode(this.copyLink)
+        this.codeUrl = this.copyLink
+      }, 500)
+    },
     submit() {
       this.$refs['form'].validate((valid) => {
         if (valid) {
@@ -392,5 +438,29 @@ export default {
 }
 </script>
 <style lang="less" scoped>
-
+  .viewlink{
+    display: flex;
+    .link{
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+      white-space: nowrap;
+    }
+    .btn{
+      width: 100px;
+      margin-left: 20px;
+    }
+  }
+  .left-code{
+    height: 255px;
+    .code-url{
+      margin-top: 10px;
+      .linkbtn{
+        margin-top: 0;
+        margin-bottom: 0;
+        font-size: 12px;
+      }
+    }
+  }
 </style>