页面修改

src/components/clientProtocol.vue

+<style>
+  * {
+    margin: 0;
+    padding: 0;
+  }
+
+  .dic_content {
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  .dic_content {
+    width: 100%;
+    margin: auto;
+    background-color: #fff;
+  }
+
+  .dic_content .contractLeft {
+    width: 150px;
+    display: block;
+    border: 0;
+    float: left;
+    position: fixed;
+  }
+
+  .dic_content .contractRight {
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-color: #fff;
+    z-index: 99;
+  }
+
+  .dic_contenttable th {
+    padding: 8px 0;
+  }
+
+  .dic_contenttable td {
+    padding: 8px 0;
+  }
+
+  .dic_content h1,
+  .dic_content h2,
+  .dic_content p {
+    margin: 0 auto;
+    padding: 0 10px;
+  }
+
+  .dic_content .decoration {
+    text-decoration: underline;
+  }
+
+  .dic_content .leftP {
+    text-align: left;
+    display: inline-block;
+  }
+
+  .dic_content .Contract_Depart {
+    margin: 30px 0;
+  }
+
+  .dic_content .item_content {
+    width: 100%;
+    height: auto;
+  }
+
+  .dic_content .item_content .title {
+    width: 100%;
+    text-align: center;
+    margin-top: 20px;
+  }
+
+  .dic_content .item_content>label {
+    width: 100%;
+    text-align: left;
+    font-weight: bold;
+    background-color: #F2F2F2;
+    margin: 30px 0;
+    padding: 8px 0;
+    text-indent: 20px;
+    display: inline-block;
+    font-size: 16px;
+  }
+
+  .dic_content .item_content>span {
+    font-size: 1.5rem;
+    line-height: 26px;
+    margin-left: 10px;
+  }
+
+  .dic_content .item_content .content_table {
+    border: 1px solid #d1d1d1;
+    margin-top: 10px;
+    width: 100%;
+    text-align: center;
+    font-size: 1.8rem
+  }
+
+  .dic_content .item_content .content_table th {
+    background-color: #F2F2F2;
+  }
+
+  .dic_content .item_content .content_table th,
+  .dic_content .item_content .content_table td {
+    border: 1px solid #808080;
+    text-align: center;
+    padding: 10px;
+  }
+
+  .dic_content .item_content font {
+    color: blue;
+    display: inline-block;
+    padding: 0 10px;
+    font-size: 1.5rem
+  }
+
+  .dic_content .content_table font {
+    min-width: 0;
+  }
+
+  .dic_content .float_div {
+    position: fixed;
+    bottom: 0;
+    line-height: 50px;
+    background-color: #F2F2F2;
+    width: 1190px;
+    padding-left: 10px;
+    height: 50px;
+    display: block;
+    vertical-align: middle;
+    text-align: match-parent;
+  }
+
+  .dic_content .leftSign {
+    float: left;
+    width: 50%;
+    margin: 70px 0;
+    height: auto;
+    line-height: 45px;
+  }
+
+  .dic_content .rightSign {
+    float: right;
+    width: 49%;
+    height: auto;
+    margin: 70px 0;
+    line-height: 45px;
+  }
+
+  .dic_content .leftSign span {
+    display: inline-block;
+    width: 170px;
+    text-align: right;
+  }
+
+  .dic_content .rightSign span {
+    display: inline-block;
+    width: 170px;
+    text-align: right;
+  }
+
+  .dic_content .addressCommon {
+    display: inline-block;
+    width: 300px;
+    display: inline-block;
+    vertical-align: top;
+    text-align: left;
+  }
+
+  .dic_content .shouquanNum {
+    font-weight: bold;
+  }
+
+  .dic_content .zhangTitle {
+    height: 90px;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 90px !important;
+  }
+
+  .dic_content .toTopDistance {
+    margin-top: 15px;
+  }
+
+  .dic_content .travelDan td {
+    border: none !important;
+    text-align: left;
+    text-indent: 20px;
+    padding: 10px 0;
+  }
+
+  .dic_content .travelDan {
+    padding: 50px 0;
+  }
+
+  .dic_content .zhangOne {
+    position: absolute;
+    width: 200px;
+    top: -83px;
+    left: 160px;
+  }
+
+  .dic_content .zhangTwo {
+    position: absolute;
+    width: 200px;
+    top: -60px;
+    left: 80px;
+  }
+
+  .dic_content .comonTb td {
+    padding: 15px 0;
+  }
+
+  .dic_content .remindInfo {
+    position: absolute;
+    top: 42%;
+    left: 35%;
+    font-size: 60px;
+    color: #FF7F7F;
+    letter-spacing: 20px;
+  }
+
+  .dic_content .signName {
+    position: relative;
+    top: 10px;
+    width: 140px;
+  }
+
+  .dic_content .LRTB td:nth-child(odd) {
+    text-align: right;
+    padding: 10px;
+    height: 50px;
+    border: 1px solid #d1d1d1;
+  }
+
+  .dic_content .LRTB td:nth-child(even) {
+    text-align: left;
+    padding: 10px;
+    height: 50px;
+    border: 1px solid #d1d1d1;
+  }
+
+  .dic_content .shouquanNum {
+    margin: 30px 0 !important;
+    font-weight: bold;
+  }
+
+  #canvas {
+    width: 100%;
+    height: 100%;
+    /* position: relative; */
+  }
+
+  #canvas canvas {
+    display: block;
+  }
+
+  .CliSignDiv {
+    position: fixed;
+    border: 1px solid #d1d1d1;
+    width: 100%;
+    background-color: #fff;
+    /* height:500px; */
+    z-index: 999;
+    margin: auto;
+    display: block;
+    z-index: -999;
+  }
+
+  .TopFixed {
+    z-index: 100;
+  }
+
+  .CV_Btn {
+    color: #fff;
+    padding: 10px 30px;
+    background: #E95252;
+    font-size: 30px;
+    border: 1px solid #E95252;
+    cursor: pointer;
+    border-radius: 15px;
+    margin-left: 10px;
+  }
+
+  .isShowSign {
+    z-index: 999;
+  }
+
+  .CisHideen {
+    overflow: hidden;
+  }
+
+  .CliConfirmBtn {
+    color: #fff;
+    height: 60px;
+    width: 150px;
+    font-size: 27px;
+    background: #E95252;
+    border: 1px solid #E95252;
+    border-radius: 15px;
+  }
+
+  .ClientTravelTable td {
+    border: 1px solid #d1d1d1;
+  }
+
+  .dic_content .TipsDiv {
+    background: #fff;
+    width: 75%;
+    margin: 0 auto;
+    border-radius: 0.7rem;
+    padding: 2rem 0;
+    margin-top: 20rem;
+  }
+
+  .dic_content .TipsDiv .readSpan {
+    display: inline-block;
+    background-color: #24ade5;
+    border-radius: 5px;
+    height: 3.4rem;
+    width: 18rem;
+    color: #fff;
+    font-size: 2rem;
+    margin-top: 1rem;
+  }
+
+  .dic_content .TipsDiv li {
+    list-style: none;
+  }
+
+  .dic_content .TipTc {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    background: rgba(0, 0, 0, 0.5);
+    top: 0;
+    left: 0;
+    z-index: 1000;
+  }
+
+  .dic_content .signSpan {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+    background: #fff;
+    border-top: 1px solid #ccc;
+    z-index: 1000;
+  }
+
+  .dic_content .signSpan .sign {
+    width: 75%;
+    margin: 0 auto;
+
+    padding: 1rem 0 0 0;
+    text-align: center;
+    cursor: pointer;
+
+  }
+
+  .dic_content .signSpan .sign .sp1 {
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    background-image: url('../assets/img/dzht/bg1.png');
+    background-size: 132px;
+    background-position: 52px 29px;
+  }
+
+  .dic_content li {
+    list-style: none;
+  }
+
+  .dic_content .navHidden {
+    width: 100%;
+    overflow: hidden;
+    height: 5rem;
+  }
+
+  .dic_content .navHidden .wrap {
+    width: 100%;
+    height: 6rem;
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+
+  .dic_content .navHidden .Navul {
+    width: 113rem;
+    padding: 0;
+    display: flex;
+    height: 5rem;
+    line-height: 5rem;
+    margin: 0;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .dic_content .navHidden .Navul li {
+    display: inline-block;
+    margin-left: 1rem;
+    box-sizing: border-box;
+    cursor: pointer;
+    font-size: 2rem;
+    cursor: pointer;
+  }
+
+  .dic_content .SignbgDiv {
+    position: relative;
+    width: 100%;
+    padding-bottom: 10rem;
+    padding-top: 10rem;
+  }
+
+  .dic_content .SignbgDiv .signContent {
+    overflow: hidden;
+    position: relative;
+    height: 100%;
+  }
+
+  .dic_content .SignbgDiv .signContent .sysm {}
+
+  .navHidden .ActiveLi {
+    border-bottom: 2px solid #24ade5;
+  }
+
+  .dic_content .guestUl li {
+    padding: 10px 6px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #ddd;
+    font-size: 1.8rem;
+  }
+
+  .dic_content .guestUl li:nth-child(even) {
+    background: #f5f5f5;
+  }
+
+  .dic_content .NavFixed {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 200;
+    background: #fff;
+  }
+
+  .dic_content .gzqzUl li {
+    border-bottom: 1px solid #ddd;
+    padding: 14px;
+    position: relative;
+    box-sizing: border-box;
+  }
+
+  .dic_content .gzqzUl li .signImg {
+    position: absolute;
+    left: 45%;
+    z-index: 200;
+  }
+
+  .dic_content .gzqzUl li .el-col:nth-child(2) {
+    text-align: right;
+  }
+
+  .dic_content .gzqzUl .bgli {
+    background: #eee;
+    width: 100%;
+    padding: 0 !important;
+    height: 20px;
+  }
+
+  .dic_content .SignbgDiv p {
+    font-size: 1.8rem;
+  }
+
+  .dic_content .gzqzUl li {
+    font-size: 1.8rem;
+  }
+
+  .dic_content .TcTravel_Table {
+    width: 100%;
+    border: none;
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 1.8rem;
+  }
+
+  .dic_content .TcTravel_Table td {
+    border: 1px solid rgb(0, 0, 0);
+    word-break: break-all;
+    padding: 5px;
+    line-height: 1.5;
+  }
+
+  .Travel_clientQuan {
+    display: inline-block;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid #d1d1d1;
+    border-radius: 5px;
+    text-align: center;
+    line-height: 1.5rem;
+  }
+
+  .Travel_clientQuan i {
+    font-size: 1rem;
+    color: gray;
+  }
+
+</style>
+
+<template>
+  <div class="dic_content" :class="dialogVisible?'CisHideen':''">
+    <!-- 签字 -->
+    <div class="signSpan" v-if="addMsg.GuestSignature==''">
+      <div @click="goUrl" class="sign">
+        <p><span style="font-size:3rem" class="iconfont icon-qianming"></span></p>
+        <span style="font-size:2rem">签字</span>
+      </div>
+    </div>
+    <!-- 头部 -->
+    <div class="NavFixed">
+      <p style="background:#24ade5;text-align:center;color:#fff;padding:6px 0;font-size:3rem">查看</p>
+      <div class="navHidden">
+        <div class="wrap">
+          <ul class="Navul">
+            <li :class="ActiveTab==1?'ActiveLi':''" @click="ChangeTab(1)">使用说明</li>
+            <li :class="ActiveTab==2?'ActiveLi':''" @click="ChangeTab(1)">签字</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <!-- 页面布局 -->
+    <div style="position: relative;background:#fff;">
+      <div class="SignbgDiv">
+        <div class="signContent" style="padding-top:10px;">
+          <!-- 合同信息 -->
+          <div style="padding:0 14px;box-sizing: border-box;" v-show="ActiveTab==1" class="item_content">
+            <p>甲方：<font>{{addMsg.GuestName}}</font>
+            </p>
+            <p>乙方：<font>{{TravelAgency_Name}}</font>
+            </p>
+            <p>甲乙双方在遵循平等、自愿、协商一致、诚实信用的原则下，就双方旅游产品价格保密成如下协议：</p>
+            <p>1.价格保密</p>
+            <p style="text-indent:2em;">经甲乙双方商定，在双方建立合同关系基础之上，乙方给予甲方优惠价
+              <font>{{addMsg.DiscountMoney}}</font>
+              &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 v-show="ActiveTab==2" class="item_content">
+            <ul class="gzqzUl">
+              <li>
+                <el-row>
+                  <el-col :span="12">甲方（盖章） ：{{addMsg.GuestName}}</el-col>
+                  <el-col :span="12">
+                    <template v-if="addMsg.GuestIsSign==1">
+                      <img style="width:120px;" :src="addMsg.GuestSignature" v-if="addMsg.GuestSignature!=''" alt="" />
+                    </template>
+                  </el-col>
+                </el-row>
+              </li>
+              <li>
+                <el-row>
+                  <el-col :span="12">签约日期：</el-col>
+                  <el-col :span="12">{{addMsg.GuestSignDate}}</el-col>
+                </el-row>
+              </li>
+              <li>
+                <el-row>
+                  <el-col :span="12">出境社盖章：</el-col>
+                  <el-col :span="12">
+                    <template v-if="addMsg.CompanyIsSign==1">
+                      <img class="signImg" :src="addMsg.CompanyImage" alt="" />
+                    </template>
+                  </el-col>
+                </el-row>
+              </li>
+              <li>
+                <el-row>
+                  <el-col :span="12">签约日期：</el-col>
+                  <el-col :span="12">{{addMsg.CompanySignDate}}</el-col>
+                </el-row>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="CliSignDiv" :class="dialogVisible?'isShowSign':''" @touchmove.prevent>
+      <div id="canvas" style="position:relative;top:0">
+      </div>
+      <div style="text-align:center;margin-top:20px;">
+        <input type="button" @click="handelClearEl()" class="CV_Btn" value="清除" />
+        <input type="button" @click="dialogVisible=false,handelClearEl()" class="CV_Btn" value="关闭" />
+        <input type="button" @click="handelSaveEl()" class="CV_Btn" value="保存" />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  let canvas = document.createElement("canvas");
+  let cxt = canvas.getContext("2d");
+  export default {
+    data() {
+      return {
+        signShow: true,
+        ActiveTab: 1,
+        //查询参数  
+        msg: {
+          TCID: 0,
+          OrderId: 0,
+          GuestId: 0
+        },
+        //数据源
+        addMsg: {
+          ProtocolId: 0, //协议Id
+          TCID: 0, //团期编号
+          OrderId: 0, //订单编号
+          GuestId: 0, //旅客编号
+          DiscountMoney: 0, //优惠金额
+          GuestName: "", //旅客名称
+          GuestIsSign: 0, //旅客是否签章
+          GuestSignature: "", //旅客签章图片
+          GuestSignDate: "", //旅客签字日期
+          CompanyIsSign: "", //公司是否盖章
+          CompanySignDate: "", //公司盖章日期
+          CompanyImage: "", //公司章图片
+          EnterName: "", //录入人员
+        },
+        TravelAgency_Name: "四川和平国际旅行社有限公司",
+        dialogVisible: false,
+        showCanvas: false,
+        linewidth: 3, //线条粗细，选填
+        color: "black", //线条颜色，选填
+        background: "#fff", //线条背景，选填
+      };
+    },
+    created() {
+      try {
+        if (this.$route.query.str) {
+          this.signShow = false;
+        }
+      } catch (error) {}
+    },
+    methods: {
+      closeTcShowHandler() {
+        let domtemp = document.querySelector("#tcShowDialog")
+        domtemp.remove()
+      },
+      goUrl() {
+        sessionStorage.setItem("SignInfo", JSON.stringify(this.dataList))
+        this.$router.push({
+          name: "SignName",
+          query: {
+            TCID: this.msg.TCID,
+            orderID: this.msg.OrderId,
+            guestId: this.msg.GuestId
+          }
+        })
+      },
+      ChangeTab(num) {
+        this.ActiveTab = num;
+      },
+      //获取数据
+      getList() {
+        this.apipost("travelcontract_post_GetDiscountProtocol", this.msg, res => {
+          if (res.data.resultCode === 1) {
+            var tempObj = res.data.data;
+            if (tempObj.ProtocolId > 0) {
+              this.addMsg.ProtocolId = tempObj.ProtocolId;
+              this.addMsg.TCID = tempObj.TCID;
+              this.addMsg.OrderId = tempObj.OrderId;
+              this.addMsg.GuestId = tempObj.GuestId;
+              this.addMsg.DiscountMoney = tempObj.DiscountMoney;
+              this.addMsg.GuestName = tempObj.GuestName;
+              this.addMsg.GuestIsSign = tempObj.GuestIsSign;
+              this.addMsg.GuestSignature = tempObj.GuestSignature;
+              this.addMsg.GuestSignDate = tempObj.GuestSignDate;
+              this.addMsg.CompanyIsSign = tempObj.CompanyIsSign;
+              this.addMsg.CompanySignDate = tempObj.CompanySignDate;
+              this.addMsg.CompanyImage = tempObj.CompanyImage;
+              this.addMsg.EnterName = tempObj.EnterName;
+            }
+          } else {
+            this.Error(res.data.message);
+          }
+        }, null);
+      },
+      getCanvas() {
+        let el = document.getElementById("canvas");
+        el.appendChild(canvas);
+        canvas.width = el.clientWidth;
+        canvas.height = el.clientHeight;
+        cxt.fillStyle = this.background; //填充绘图的背景颜色
+        cxt.fillRect(0, 0, canvas.width, canvas.height); //绘制“已填色”的矩形
+        cxt.strokeStyle = this.color; //笔触的颜色
+        cxt.lineCap = "round"; //线条末端线帽的样式
+        let linewidth = this.linewidth;
+        //开始绘制
+        canvas.addEventListener(
+          "touchstart",
+          function (e) {
+            cxt.beginPath();
+            cxt.lineWidth = linewidth; //当前线条的宽度，以像素计
+            cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+          }.bind(this),
+          false
+        );
+        //绘制中
+        canvas.addEventListener(
+          "touchmove",
+          function (e) {
+            cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
+            cxt.stroke();
+          }.bind(this),
+          false
+        );
+        //结束绘制
+        canvas.addEventListener(
+          "touchend",
+          function () {
+            cxt.closePath();
+          }.bind(this),
+          false
+        );
+      },
+      handelClearEl() {
+        cxt.clearRect(0, 0, canvas.width, canvas.height);
+      },
+      handelSaveEl() {
+        let imgBase64 = canvas.toDataURL();
+        this.addMsg.GuestSignature = imgBase64;
+        this.SaveMsg();
+      },
+      //提交数据
+      SaveMsg() {
+        this.apipost("travelcontract_post_UpdateGuestSignature", this.addMsg, res => {
+          if (res.data.resultCode === 1) {
+            this.Success(res.data.message);
+            this.dialogVisible = false;
+            this.getList();
+          } else {
+            this.Error(res.data.message);
+          }
+        }, null);
+      },
+    },
+    mounted() {
+      try {
+        this.msg.TCID = this.$route.query.TCID;
+        this.msg.OrderId = this.$route.query.OrderId;
+        this.msg.GuestId = this.$route.query.GuestId;
+        this.msg.ProtocolId = this.$route.query.ProtocolId;
+        var cHeight = document.getElementsByClassName("CliSignDiv")[0];
+        cHeight.style.height = 900 + 'px';
+        this.getList();
+        this.getCanvas();
+      } catch (error) {
+
+      }
+    }
+  };
+
+</script>

src/components/discountProtocol.vue

+<style>
+  .TravelContractView {
+    min-height: 650px;
+    background: url(../assets/img/bodyBg.png);
+    padding-top: 10px;
+    font: normal 13px 'Microsoft Yahei';
+    color: #555;
+  }
+
+  .TravelContractView .container-fluid {
+    padding: 0 20px;
+  }
+
+  .TravelContractView .block {
+    border: 1px solid #cdcdcd;
+    background: #f9f9f9;
+    position: relative;
+    margin-bottom: 20px;
+  }
+
+  .TravelContractView .mtop15 {
+    margin-top: 15px;
+  }
+
+  .TravelContractView .blockTitle {
+    border-bottom: 1px solid #cdcdcd;
+    background-color: #efefef;
+  }
+
+  .TravelContractView .blockTitle span.icon {
+    border-right: 1px solid #CDCDCD;
+    position: absolute;
+    left: 10px;
+    height: 40px;
+    padding-right: 10px;
+    padding-top: 8px;
+  }
+
+  .TravelContractView .blockTitle h2 {
+    font-size: 15px;
+    min-height: 40px;
+    margin: 0;
+    font-family: 'Microsoft Yahei';
+    color: #5b5b5b;
+    padding-right: 15px;
+    padding-left: 48px;
+    line-height: 40px;
+  }
+
+  .TravelContractView .blockTitle h2 span {
+    position: absolute;
+    right: 10px;
+    top: 0;
+  }
+
+  .TravelContractView .contract {
+    background: #f9f9f9;
+    margin-bottom: 20px;
+    margin-top: 20px;
+  }
+
+  .TravelContractView .title {
+    font-size: 18px;
+    margin-top: 10px;
+    color: #555;
+    height: 100px;
+    position: relative;
+    padding-left: 30px !important;
+    padding-right: 30px !important;
+    padding-bottom: 40px !important;
+  }
+
+  .TravelContractView .title p {
+    margin: 0;
+    font-size: 12px;
+  }
+
+  .TravelContractView .contractNo {
+    font-weight: bold;
+    margin-right: 5px;
+  }
+
+  .TravelContractView .title h1 {
+    font-size: 24px;
+    text-align: left;
+  }
+
+  .TravelContractView .title p span {
+    font-style: normal;
+    font-size: 14px;
+    color: #0088cc;
+  }
+
+  .TD-introduction {
+    margin: 20px 30px 30px 30px;
+    font-size: 13px;
+  }
+
+  .TD-introduction p {
+    margin: 5px 0 0 0;
+    line-height: 27px;
+  }
+
+  .TD-introduction p span {
+    border-bottom: #cbcbcb 1px solid;
+    padding: 0 5px;
+    color: #0088cc;
+    margin: 0 5px;
+  }
+
+  .TD-introduction h2 {
+    font-size: 16px;
+  }
+
+  .TravelContractView h1,
+  .TravelContractView h2 {
+    line-height: 40px !important;
+  }
+
+  .TravelContractView .signDiv {
+    width: 160px;
+    height: 120px;
+    position: absolute;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    left: 0;
+    top: 0px;
+    z-Index: 100;
+  }
+
+  .TravelContractView .guests {
+    font-size: 13px;
+    margin: 20px 30px 30px 30px;
+  }
+
+  .TravelContractView .ZTable {
+    width: 100%;
+    border: none;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  .TravelContractView .ZTable>tbody>tr>td {
+    word-break: break-word;
+    border: solid #ddd 1px;
+    padding: 8px;
+    line-height: 25px;
+  }
+
+  .TravelContractView p font {
+    border-bottom: #cbcbcb 1px solid;
+    padding: 0 5px;
+    color: #0088cc;
+    margin: 0 5px;
+  }
+
+</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>
+        </div>
+        <div class="contract">
+          <div class="title">
+            <h1>价格保密协议 </h1>
+            <p class="contractNo">协议编号：<span>{{addMsg.ProtocolId}}</span></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">
+          <table class="ZTable">
+            <tbody>
+              <tr>
+                <td>甲方（盖章） ：</td>
+                <td style="position:relative;">
+                  <font>{{addMsg.GuestName}}</font>
+                  <template v-if="addMsg.GuestIsSign==1">
+                    <div class="signDiv" :style="{backgroundImage: 'url(' + (addMsg.GuestSignature) + ')'}"></div>
+                  </template>
+                </td>
+                <td>乙方（盖章） :</td>
+                <td style="position:relative;">
+                  <font>{{TravelAgency_Name}}</font>
+                  <template v-if="addMsg.CompanyIsSign==1">
+                    <img :src="addMsg.CompanyImage" alt="" style="width:120px;heigth:120px;position:absolute;top:0;" />
+                  </template>
+                </td>
+              </tr>
+              <tr>
+                <td>签约日期：</td>
+                <td>
+                  <font>{{addMsg.GuestSignDate}}</font>
+                </td>
+                <td>签约日期：</td>
+                <td>
+                  <font>{{addMsg.CompanySignDate}}</font>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <div class="fade" v-show="isShowFade"></div>
+    <div class="qrCodeDiv" v-show="isShowFade">
+      <div style="margin-top:15px;">请扫码签字</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>
+
+<script>
+  import moment from 'moment'
+  export default {
+    data() {
+      return {
+        //查询参数
+        msg: {
+          ProtocolId: 0, //协议Id
+          TCID: 0, //团期编号
+          OrderId: 0, //订单编号
+          GuestId: 0, //旅客编号
+        },
+        addMsg: {
+          ProtocolId: 0, //协议Id
+          TCID: 0, //团期编号
+          OrderId: 0, //订单编号
+          GuestId: 0, //旅客编号
+          DiscountMoney: 0, //优惠金额
+          GuestName: "", //旅客名称
+          GuestIsSign: 0, //旅客是否签章
+          GuestSignature: "", //旅客签章图片
+          GuestSignDate: "", //旅客签字日期
+          CompanyIsSign: "", //公司是否盖章
+          CompanySignDate: "", //公司盖章日期
+          CompanyImage: "", //公司章图片
+          EnterName: "", //录入人员
+        },
+        rules: {},
+        //菜单列表
+        menuArr: ['价格保密协议'],
+        TravelAgency_Name: "四川和平国际旅行社有限公司",
+        SaveLoading: false,
+        isShowFade: false, //是否显示二维码弹窗
+        QRCodeStr: "", //二维码base64字符串
+      };
+    },
+    filters: {
+      YMD(date) {
+        return moment(date).format("YYYY-MM-DD HH:mm");
+      }
+    },
+    methods: {
+      GetData() {
+        this.apipost(
+          "travelcontract_post_GetDiscountProtocol", this.msg,
+          res => {
+            if (res.data.resultCode == 1) {
+              var tempObj = res.data.data;
+              if (tempObj.ProtocolId > 0) {
+                this.addMsg.ProtocolId = tempObj.ProtocolId;
+                this.addMsg.TCID = tempObj.TCID;
+                this.addMsg.OrderId = tempObj.OrderId;
+                this.addMsg.GuestId = tempObj.GuestId;
+                this.addMsg.DiscountMoney = tempObj.DiscountMoney;
+                this.addMsg.GuestName = tempObj.GuestName;
+                this.addMsg.GuestIsSign = tempObj.GuestIsSign;
+                this.addMsg.GuestSignature = tempObj.GuestSignature;
+                this.addMsg.GuestSignDate = tempObj.GuestSignDate;
+                this.addMsg.CompanyIsSign = tempObj.CompanyIsSign;
+                this.addMsg.CompanySignDate = tempObj.CompanySignDate;
+                this.addMsg.CompanyImage = tempObj.CompanyImage;
+                this.addMsg.EnterName = tempObj.EnterName;
+              }
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //保存保密协议
+      saveData() {
+        this.SaveLoading = true;
+        this.apipost(
+          "travelcontract_post_SetDiscountProtocol", this.addMsg,
+          res => {
+            this.SaveLoading = false;
+            if (res.data.resultCode == 1) {
+              this.addMsg.ProtocolId = res.data.data;
+              this.msg.ProtocolId = res.data.data;
+              this.GetData();
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //生成二维码
+      createQrCode() {
+        let urlObj = this.domainManager();
+        let msg = {
+          TCID: this.$route.query.TCID,
+          OrderId: this.$route.query.OrderId,
+          GuestId: this.$route.query.GuestId,
+          ProtocolId: this.$route.query.ProtocolId,
+          pUrl: "clientConfirm",
+        };
+        this.$http({
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          method: 'post',
+          url: urlObj.DomainUrl + '/api/file/GetQrCodeImage?',
+          data: {
+            "msg": msg
+          }
+        }).then(res => {
+          if (res.data.resultCode === 1) {
+            this.QRCodeStr = res.data.data;
+          }
+        }).catch(err => {})
+      }
+    },
+    created() {
+      if (this.$route.query) {
+        if (this.$route.query.ProtocolId) {
+          this.msg.ProtocolId = this.$route.query.ProtocolId;
+          this.addMsg.ProtocolId = this.$route.query.ProtocolId;
+        }
+        if (this.$route.query.TCID) {
+          this.msg.TCID = this.$route.query.TCID;
+          this.addMsg.TCID = this.$route.query.TCID;
+        }
+        if (this.$route.query.OrderId) {
+          this.msg.OrderId = this.$route.query.OrderId;
+          this.addMsg.OrderId = this.$route.query.OrderId;
+        }
+        if (this.$route.query.GuestId) {
+          this.msg.GuestId = this.$route.query.GuestId;
+          this.addMsg.GuestId = this.$route.query.GuestId;
+        }
+      }
+    },
+    mounted() {
+      this.GetData();
+    }
+  };
+
+</script>

src/router/config.js

@@ -5894,6 +5894,14 @@ export default {
         title: '日本线电子合同'
       }
     },
+    {
+      path: '/discountProtocol', //价格保密协议
+      name: 'discountProtocol',
+      component: resolve => require(['@/components/discountProtocol'], resolve),
+      meta: {
+        title: '日本线电子合同'
+      }
+    },
     {
       path: '/SingleContract', //单项合同
       name: 'SingleContract',