页面修改

src/components/administrative/ContractManage.vue

@@ -32,6 +32,48 @@
     margin-left: 0 !important;
   }
 
+  /*灰色遮罩层*/
+  .ContractManage .fade {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 99;
+  }
+
+  /*弹出层*/
+  .ContractManage .qrCodeDiv {
+    width: 236px;
+    height: 275px;
+    background-color: #fff;
+    text-align: center;
+    border: 1px solid #d1d1d1;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    margin-left: -100px;
+    margin-top: -118px;
+    z-index: 999;
+    border-radius: 5px;
+  }
+  .ContractManage .Ec_cha {
+    position: absolute;
+    cursor: pointer;
+    right: -20px;
+    top: -25px;
+    width: 30px;
+    height: 30px;
+    background-color: #fff;
+    text-align: center;
+    border-radius: 50%;
+    line-height: 30px;
+  }
+
+  .ContractManage .Ec_cha:hover {
+    color: red;
+  }
 </style>
 
 <template>
@@ -189,15 +231,21 @@
             <el-button type="warning" icon="iconfont icon-copy" circle @click="CopyContract(item)" style="padding:4px;">
             </el-button>
           </el-tooltip>
-          <el-tooltip class="item" effect="dark" content="下载" placement="top-start" v-if="item.Status==2||item.Status==4">
+          <el-tooltip class="item" effect="dark" content="下载" placement="top-start"
+            v-if="item.Status==2||item.Status==4">
             <el-button type="success" icon="el-icon-download" circle @click="DownLoadContract(item)"></el-button>
           </el-tooltip>
-          <el-tooltip class="item" effect="dark" content="提交审核" placement="top-start" v-if="item.Status==0||item.Status==3">
+          <el-tooltip class="item" effect="dark" content="提交审核" placement="top-start"
+            v-if="item.Status==0||item.Status==3">
             <el-button type="info" icon="el-icon-upload2" circle @click="SubmitContract(item)"></el-button>
           </el-tooltip>
-          <el-tooltip class="item" v-if="item.Status==2" effect="dark" content="复制链接发送给客户">
+          <!-- <el-tooltip class="item" v-if="item.Status==2" effect="dark" content="复制链接发送给客户">
             <el-button type="info" icon="iconfont icon-copy-l" circle @click="CopyUrl(item)"
               style="padding:4px;background-color:#9266f9;border-color:#9266f9;"></el-button>
+          </el-tooltip> -->
+          <el-tooltip class="item" v-if="item.Status==2" effect="dark" content="复制链接发送给客户">
+            <el-button type="info" icon="iconfont icon-copy-l" circle @click="GetQrCode(item)"
+              style="padding:4px;background-color:#9266f9;border-color:#9266f9;"></el-button>
           </el-tooltip>
           <el-tooltip class="item" effect="dark" content="取消" placement="top-start" v-if="item.Status==0">
             <el-button type="danger" icon="el-icon-close" circle @click="DeleteContract(item)"></el-button>
@@ -213,6 +261,15 @@
     <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
       layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
     </el-pagination>
+
+    <div class="fade" v-show="isShowFade"></div>
+    <div class="qrCodeDiv" v-show="isShowFade">
+      <div style="margin-top:15px;">请扫码签字 <br/>【{{clickObj.T_ContractNum}}】</div>
+      <div id="qrcode" style="margin:25px;" ref="qrcode">
+        <img class="WeiXinShare" :src="'data:image/png;base64,'+QRCodeStr" />
+      </div>
+      <i class="iconfont icon-cha Ec_cha" @click="isShowFade=false"></i>
+    </div>
   </div>
 </template>
 
@@ -237,7 +294,7 @@
           TravelAgency_DealMan: "", //经办人
           C_TCNUM: "", //团号
           C_ProductName: "", //线路名称
-          IsQueryAll:0
+          IsQueryAll: 0
         },
         pickerBeginDateBefore: {
           disabledDate: time => {
@@ -254,7 +311,10 @@
             let startTime = new Date(this.msg.StartDate);
             return startTime.getTime() >= time.getTime();
           }
-        }
+        },
+        clickObj:{},//当前选择的合同
+        isShowFade: false, //是否显示二维码图片
+        QRCodeStr: "", //二维码图片
       };
     },
     mounted() {
@@ -303,6 +363,29 @@
           );
         });
       },
+      //生成二维码
+      GetQrCode(item) {
+        let urlObj = this.domainManager();
+        let msg = {
+          ContractId: item.ID,
+        };
+        this.clickObj=item;
+        this.$http({
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          method: 'post',
+          url: urlObj.DomainUrl + '/api/file/GetSingleContractQrCode?',
+          data: {
+            "msg": msg
+          }
+        }).then(res => {
+          if (res.data.resultCode === 1) {
+            this.isShowFade = true;
+            this.QRCodeStr = res.data.data;
+          }
+        }).catch(err => {})
+      },
       //复制URL
       CopyUrl(item) {
         var oInput = document.createElement('input');
@@ -322,7 +405,6 @@
           this.goContract('SingleContract', 0, '单项委托合同');
         }
       },
-
       //下载合同
       DownLoadContract(item) {
         let msg = {