页面调整

src/components/discountProtocol.vue

@@ -155,58 +155,96 @@
     margin: 0 5px;
   }
 
+  /*弹出层*/
+  .TravelContractView .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;
+  }
+
+  .TravelContractView .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;
+  }
+
 </style>
 <template>
   <div class="TravelContractView">
     <div class="container-fluid">
       <div class="block mtop15">
         <div class="blockTitle">
-          <span class="icon"><i class="iconfont icon-wenjian"></i></span>
-          <h2>协议详情
-            &nbsp;&nbsp;<template v-if="addMsg.EnterName&&addMsg.EnterName!=''">
-              销售人员:{{addMsg.EnterName}}</template>
-          </h2>
-
-          <el-button type="primary" size="medium" @click="saveData()" :loading="SaveLoading">保存</el-button>
-          <el-button type="primary" size="medium" @click="isShowFade=true;createQrCode()">生成二维码</el-button>
+          <table style="width:100%">
+            <tr>
+              <td> <span class="icon"><i class="iconfont icon-wenjian"></i></span>
+                <h2>协议详情
+                  &nbsp;&nbsp;<template v-if="addMsg.EnterName&&addMsg.EnterName!=''">
+                    销售人员:{{addMsg.EnterName}}</template>
+                </h2>
+              </td>
+              <td align="right">
+                <el-button type="primary" size="medium" @click="saveData()" :loading="SaveLoading">保存</el-button>
+                <el-button type="primary" size="medium" @click="isShowFade=true;createQrCode()">生成二维码</el-button>
+              </td>
+            </tr>
+          </table>
         </div>
-        <div class="contract">
-          <div class="title">
-            <h1>价格保密协议 </h1>
-            <p class="contractNo">协议编号：<span>{{addMsg.ProtocolId}}</span></p>
+        <div v-loading="Loading">
+          <div class="contract">
+            <div class="title">
+              <h1>价格保密协议 </h1>
+              <p class="contractNo">协议编号：<span
+                  v-if="addMsg.ProtocolId&&addMsg.ProtocolId>0">{{addMsg.ProtocolId}}</span></p>
+            </div>
+          </div>
+          <!-- 使用说明 -->
+          <div class="TD-introduction">
+            <p>甲方：<font>{{addMsg.GuestName}}</font>
+            </p>
+            <p>乙方：<font>{{TravelAgency_Name}}</font>
+            </p>
+            <p style="text-indent:2em;">甲乙双方在遵循平等、自愿、协商一致、诚实信用的原则下，就双方旅游产品价格保密成如下协议：</p>
+            <p>1、价格保密</p>
+            <p style="text-indent:2em;">经甲乙双方商定，在双方建立合同关系基础之上，乙方给予甲方优惠价<el-input v-model="addMsg.DiscountMoney"
+                style="width:110px;" @keyup.native="checkPrice(addMsg,'DiscountMoney')"></el-input>
+              &nbsp;&nbsp;&nbsp;&nbsp;元/人，但双方必须保证，不向外透露具体价格。</p>
+            <p>2、双方的权利和义务
+            </p>
+            <p style="text-indent:2em;">
+              甲乙双方所签订的价格，双方必须严加保密，不向第三方提供。
+            </p>
+            <p>
+              3、违约责任
+            </p>
+            <p style="text-indent:2em;">
+              对于因双方泄露价格而引起的不必要纠纷，所有造成的损失由产生方全部承担。
+            </p>
+            <p>
+              4、协议的效力和变更
+            </p>
+            <p style="text-indent:2em;">
+              本协议自双方签字或盖章后生效。
+            </p>
+            <p style="text-indent:2em;">
+              本协议的任何修改必须经甲乙双方书面同意。
+            </p>
           </div>
-        </div>
-        <!-- 使用说明 -->
-        <div class="TD-introduction">
-          <p>甲方：<font>{{addMsg.GuestName}}</font>
-          </p>
-          <p>乙方：<font>{{TravelAgency_Name}}</font>
-          </p>
-          <p>甲乙双方在遵循平等、自愿、协商一致、诚实信用的原则下，就双方旅游产品价格保密成如下协议：</p>
-          <p>1.价格保密</p>
-          <p style="text-indent:2em;">经甲乙双方商定，在双方建立合同关系基础之上，乙方给予甲方优惠价<el-input v-model="addMsg.DiscountMoney"
-              style="width:110px" @keyup.native="checkPrice(addMsg,'DiscountMoney')"></el-input>
-            &nbsp;&nbsp;元/人，但双方必须保证，不向外透露具体价格。</p>
-          <p>2.双方的权利和义务
-          </p>
-          <p style="text-indent:2em;">
-            甲乙双方所签订的价格，双方必须严加保密，不向第三方提供。
-          </p>
-          <p>
-            3.违约责任
-          </p>
-          <p style="text-indent:2em;">
-            对于因双方泄露价格而引起的不必要纠纷，所有造成的损失由产生方全部承担
-          </p>
-          <p>
-            4.协议的效力和变更
-          </p>
-          <p style="text-indent:2em;">
-            本协议自双方签字或盖章后生效
-          </p>
-          <p style="text-indent:2em;">
-            本协议的任何修改必须经甲乙双方书面同意
-          </p>
         </div>
         <!-- 签字盖章 -->
         <div class="guests">
@@ -252,11 +290,8 @@
       <i class="iconfont icon-cha Ec_cha" @click="isShowFade=false"></i>
     </div>
   </div>
-
 </template>
-
 <script>
-  import moment from 'moment'
   export default {
     data() {
       return {
@@ -282,25 +317,23 @@
           CompanyImage: "", //公司章图片
           EnterName: "", //录入人员
         },
-        rules: {},
-        //菜单列表
-        menuArr: ['价格保密协议'],
         TravelAgency_Name: "四川和平国际旅行社有限公司",
         SaveLoading: false,
         isShowFade: false, //是否显示二维码弹窗
         QRCodeStr: "", //二维码base64字符串
+        Loading: false,
       };
     },
     filters: {
-      YMD(date) {
-        return moment(date).format("YYYY-MM-DD HH:mm");
-      }
+
     },
     methods: {
       GetData() {
+        this.Loading = true;
         this.apipost(
           "travelcontract_post_GetDiscountProtocol", this.msg,
           res => {
+            this.Loading = false;
             if (res.data.resultCode == 1) {
               var tempObj = res.data.data;
               if (tempObj.ProtocolId > 0) {