zhangzl
/
nsgk_mobile
2
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
移动端
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
1763 Révisions
7 Branches
80 MiB
 
 
Aborescence: e2c9b114b6
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de 'e2c9b114b6'
${ noResults }
nsgk_mobile/src/views/sunVillage_info/list_signature.vue

503 lignes
16 KiB
Brut Annotations Historique 

  1. <template>

  2.   <div class="home_wrapper">

  3.     <div

  4.       class="header_main"

  5.       :style="`background-image:url(${require(showBtn?'@/assets/images/sunVillage_info/list_head.png':'@/assets/images/sunVillage_info/list_head_red.png')})`"

  6.     >

  7.       流转合同

  8.       <div class="return_btn" @click="onClickLeft"></div>

  9. <!--      <div class="add_btn" @click="goAdd" v-show="showBtn"></div>-->

  10.     </div>

  11. 

  12.     <div class="list_main">

  13.       <van-list

  14.         v-model="loading"

  15.         :finished="finished"

  16.         finished-text="没有更多了"

  17.         @load="getList"

  18.       >

  19.         <!----1-->

  20.         <van-swipe-cell v-for="(item,index) in applicationList" :key="index" :disabled="item.firstIsSign =='是'&&item.attachement ==  null&&item.isArchive == '否'">

  21.           <div class="item" @click="goDetail(item.id)">

  22.             <div class="info">

  23.               <div class="title">

  24.                 <i class="icon_box" v-if="item.firstSigning==null"></i>

  25.                 <i class="icon_box1" v-if="item.firstSigning!=null"></i>

  26.                 <p class="news_title" :style="{'color': item.firstSigning!=null?'#2bc30c':'#eb1616'}">{{item.contractCode}}</p>

  27.                 <p class="tips_mark" :style="{'color': item.firstSigning!=null?'#79bc29':'#f8a83d','background': item.firstSigning!=null?'#e8ffcd':'#ffedcd'}">{{item.signingMode}}</p>

  28.                 <p class="tips_mark2" :style="{'background': item.firstSigning!=null?'#2bc30c':'#eb1616'}">{{item.signingStatus}}</p>

  29.               </div>

  30.               <div class="time">

  31.                 <p>{{item.contractName}}</p>

  32.                 <p style="color:#eb1616;font-weight: bold;"><span style="font-size: 12px;">￥</span>{{item.contractMoney.toFixed(2)}}</p>

  33.               </div>

  34.             </div>

  35.           </div>

  36.           <template #right>

  37.             <div class="operation">

  38.               <!-- delete 删除 edit编辑 view查看 list榜单 -->

  39.               <div class="opera_btn" v-if="item.signingMode == '线上' && item.attachement != null && item.firstIsSign =='否'" @click="openPopup(item.id)">

  40.                 <img src="../../assets/images/sunVillage_info/signature_icon_02.png" alt="" width="35">

  41.                 <p>签名</p>

  42.               </div>

  43.               <div class="opera_btn" v-if="item.signingMode == '线上' && item.attachement !=  null " @click="$router.push({path:'/sunVillage_info/list_signature_pdf',query: {id:item.id,type:$route.query.type}})">

  44.                 <img src="../../assets/images/sunVillage_info/signature_icon_03.png" alt="" width="35">

  45.                 <p>预览</p>

  46.               </div>

  47.               <div class="opera_btn" v-if="item.signingMode == '线上' && item.isArchive == '是' ">

  48.                 <a :href="'/api/profile/download/'+item.contractPdf" download style="color: #333333">

  49.                   <img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">

  50.                   <p>电子合同</p>

  51.                 </a>

  52.               </div>

  53.               <div class="opera_btn" v-if="item.signingMode == '线下' " @click="openPopupFile(item.id)">

  54.                 <img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35">

  55.                 <p>线下合同</p>

  56.               </div>

  57.             </div>

  58.           </template>

  59.         </van-swipe-cell>

  60.       </van-list>

  61.     </div>

  62. 

  63.     <!-- 签字弹出层 -->

  64.     <van-popup v-model="show" closeable position="right" :style="{ height: '100%' }" >

  65.       <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">

  66.         <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">

  67.           <vue-esign

  68.             ref="esign"

  69.             class="mySign"

  70.             :width="500"

  71.             :height="height"

  72.             :isCrop="signature.isCrop"

  73.             :lineWidth="signature.lineWidth"

  74.             :lineColor="signature.lineColor"

  75.             :bgColor.sync="signature.bgColor"

  76.           />

  77.         </div>

  78.         <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">

  79.         <div class="signature-footer">

  80.           <van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>

  81.           <van-button @click="handleReset" class="clearBtn" type="info" plain  size="small">清空画板</van-button>

  82.         </div>

  83.       </van-cell-group>

  84.     </van-popup>

  85. 

  86.     <!-- 附件弹出层 -->

  87.     <van-popup v-model="showFile" round closeable position="bottom" :style="{ height: '40%' , padding: '5vh 2vh' }" >

  88.       <van-uploader v-if="fileList.length>0" v-model="fileList" multiple :deletable="false" :show-upload="false" />

  89.       <van-empty v-else description="暂无附件" />

  90.     </van-popup>

  91.   </div>

  92. </template>

  93. 

  94. <script>

  95.   import { contractFirstList , signFirst , contractFileList , previewContractFile } from "@/api/sunVillage_info/fixedAssets";

  96.   import vueEsign from "vue-esign";

  97.   import signatureUploadSignature from "@/views/yinnong/signatureUploadSignature";

  98.   import $ from "jquery";

  99.   export default {

  100.     name: "sunVillageInfoListSignature",

  101.     components:{vueEsign,signatureUploadSignature},

  102.     data() {

  103.       return {

  104.         applicationList:[],

  105.         loading: false,

  106.         finished: false,

  107.         show: false,

  108.         showFile: false,

  109.         fileList:[],

  110.         listLength:'0',

  111.         queryParams:{

  112.           pageNum:1,

  113.           pageSize:10,

  114.           translate_dict:1,

  115.         },

  116.         showBtn:true,

  117. 

  118.         signatureImg:'',

  119.         //电子签名

  120.         signature:{

  121.           lineWidth: 6, // 画笔的线条粗细

  122.           lineColor: "#000000", // 画笔的颜色

  123.           bgColor: "", // 画布的背景颜色

  124.           resultImg: "", // 最终画布生成的base64图片

  125.           isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分

  126.         },

  127.         signaId:'',

  128.         height:null,

  129.       };

  130.     },

  131.     created() {

  132.       if (this.$route.query.type == 'code'){

  133.         this.showBtn = false;

  134.       }

  135.       this.height = window.screen.height*1.28-20;

  136.     },

  137.     methods: {

  138.       canvasTTdown(){

  139.         $('#canvasTT').css('display','none')

  140.       },

  141.       getList(){

  142.         var _this = this;

  143.         contractFirstList(_this.queryParams).then(response => {

  144.           response.rows.forEach(item => {

  145.             _this.applicationList.push(item);

  146.           });

  147. 

  148.           if(_this.applicationList.length >= response.total){

  149.             _this.finished = true;

  150.             return;

  151.           }else{

  152.             _this.loading = false;

  153.             _this.queryParams.pageNum += 1 ;

  154.           }

  155.         });

  156.       },

  157.       goDetail(id){

  158.         this.$router.push({path:'/sunVillage_info/list_signature_add',query: {id:id,type:this.$route.query.typeX,showBtn:this.showBtn}})

  159.       },

  160.       openPopup(id,url){

  161.         this.show = true;

  162.         this.signaId = id;

  163.       },

  164.       openPopupFile(id){

  165.         this.fileList = [];

  166.         this.showFile = true;

  167.         contractFileList(id).then(response => {

  168.           response.data.map(res=>{

  169.             this.fileList.push({

  170.               url: '/api'+res.fileUrl,

  171.               isImage: true

  172.             })

  173.           })

  174.         });

  175.       },

  176.       signaImgFun(url){

  177.         this.signatureImg = url;

  178.         // console.log(url)

  179.       },

  180.       // 清空画板

  181.       handleReset() {

  182.         this.$refs.esign.reset();

  183.         $('#canvasTT').css('display','block')

  184.       },

  185.       // 生成签字图

  186.       handleGenerate() {

  187.         this.$refs.esign

  188.           .generate() // 使用生成器调用把签字的图片转换成为base64图片格式

  189.           .then((res) => {

  190.             console.log(res)

  191.             this.signature.resultImg = res;

  192.             let wj  =  this.dataURLtoBlob(res);

  193.             let param = new FormData()  // 创建form对象

  194.             param.append('file', wj)  // 通过append向form对象添加数据

  195.             param.append('date', this.format(new Date(),'yyyy-MM-dd'))  // 通过append向form对象添加数据

  196. 

  197.             signFirst(param,this.signaId).then(response => {

  198.               this.$notify({ type: 'success', message: '签字成功' });

  199.               this.show = false;

  200.               location.reload()

  201.             });

  202. 

  203.           })

  204.           .catch((err) => {

  205.             // 画布没有签字时会执行这里提示一下

  206.             this.$toast.fail('请签名后再保存签字');

  207. 

  208.           });

  209.       },

  210.       dataURLtoBlob (dataurl, filename = 'file') {

  211.         let arr = dataurl.split(',')

  212.         let mime = arr[0].match(/:(.*?);/)[1]

  213.         let suffix = mime.split('/')[1]

  214.         let bstr = atob(arr[1])

  215.         let n = bstr.length

  216.         let u8arr = new Uint8Array(n)

  217.         while (n--) {

  218.           u8arr[n] = bstr.charCodeAt(n)

  219.         }

  220.         return new File([u8arr], `${filename}.${suffix}`, {

  221.           type: mime

  222.         })

  223.       },

  224.     },

  225.   }

  226. </script>

  227. 

  228. <style scoped lang="scss">

  229.   .home_wrapper{

  230.     background: #e9e9e9;

  231.     min-height: 100vh;

  232.     width: 100vw;

  233.     .header_main{

  234.       height: 116px;

  235.       background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;

  236.       background-size: 100% 100%;

  237.       position: fixed;

  238.       top: 0;

  239.       left: 0;

  240.       width: 100%;

  241.       font-size: 36px;

  242.       line-height: 116px;

  243.       text-align: center;

  244.       color: #fff;

  245.       position: relative;

  246.       .return_btn{

  247.         width: 24px;

  248.         height: 43.2px;

  249.         background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;

  250.         background-size: 20px 36px;

  251.         position: absolute;

  252.         left: 38px;

  253.         top: 36px;

  254.       }

  255.       .add_btn{

  256.         width: 56.4px;

  257.         height: 40.8px;

  258.         background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;

  259.         background-size: 47px 34px;

  260.         position: absolute;

  261.         right: 38px;

  262.         top: 36px;

  263.       }

  264.     }

  265.     .record_main{

  266.       padding:30px 22px;

  267.       .record_det{

  268.         height: 38px;

  269.         line-height: 38px;

  270.         display: flex;

  271.         justify-content:space-between;

  272.         .year_l{

  273.           font-size: 30px;

  274.           display: flex;

  275.           align-items: center;

  276.           color: #858585;

  277. 

  278.           .unit{

  279.             padding-left: 5px;

  280.           }

  281.           .icon{

  282.             width: 23px;

  283.             height: 12px;

  284.             display: block;

  285.             background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;

  286.             background-size: 100% 100%;

  287.             margin-bottom: 4px;

  288.             margin-right: 8px;

  289.             &.zk {

  290.               transform: rotate(0deg)

  291.             }

  292.             &.ss{

  293.               transform: rotate(180deg)

  294.             }

  295. 

  296.           }

  297.         }

  298.         .total_r{

  299.           font-size: 26px;

  300.           letter-spacing: 2px;

  301.         }

  302.       }

  303.       .record_list{

  304.         display: flex;

  305.         flex-flow: wrap;

  306.         margin-top: 12PX;

  307.         .flex_block{

  308.           font-size: 30px;

  309.           color: #878787;

  310.           padding-right: 30px;

  311.           &.current{

  312.             color: #4199fe;

  313.             font-weight: bold;

  314.           }

  315.         }

  316.       }

  317.     }

  318.     .list_main{

  319.       padding:0 22px;

  320.       margin-top: 15PX;

  321.       .item{

  322.         border-radius: 30px;

  323.         background: #fff;

  324.         box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  325.         padding:25px 32px;

  326.         margin-bottom: 20px;

  327.         .info{

  328.           .title{

  329.             display: flex;

  330.             font-size: 32px;

  331.             align-items: center;

  332.             height: 58px;

  333.             .icon_box{

  334.               width: 34px;

  335.               display: block;

  336.               height: 30px;

  337.               background: url('../../assets/images/sunVillage_info/signature_icon_01.png') no-repeat;

  338.               background-size: 100% 100%;

  339.               margin-right: 10px;

  340.               flex-shrink: 0;

  341.             }

  342.             .icon_box1{

  343.               width: 34px;

  344.               display: block;

  345.               height: 30px;

  346.               background: url('../../assets/images/sunVillage_info/signature_icon_01g.png') no-repeat;

  347.               background-size: 100% 100%;

  348.               margin-right: 10px;

  349.               flex-shrink: 0;

  350.             }

  351.             .news_title{

  352.               display: -webkit-box;

  353.               -webkit-box-orient: vertical;

  354.               -webkit-line-clamp: 1;

  355.               word-break: break-all;

  356.               overflow: hidden;

  357.             }

  358.             .tips_mark{

  359.               background: #ffedcd;

  360.               border-radius: 8px;

  361.               font-size: 24px;

  362.               color: #f8a83d;

  363.               text-align: center;

  364.               line-height: 34px;

  365.               flex-shrink: 0;

  366.               padding: 0 5Px;

  367.               margin-left: auto;

  368.             }

  369.             .tips_mark2{

  370.               background: #eb1616;

  371.               border-radius: 8px;

  372.               font-size: 24px;

  373.               color: #ffffff;

  374.               text-align: center;

  375.               line-height: 34px;

  376.               flex-shrink: 0;

  377.               padding: 0 5Px;

  378.               margin-left: 10PX;

  379.             }

  380.           }

  381.           .time{

  382.             font-size: 16PX;

  383.             color: #333333;

  384.             display: flex;

  385.             align-items: center;

  386.             margin-top: 5PX;

  387.             justify-content: space-between;

  388.             .icon_time{

  389.               width: 25px;

  390.               height: 25px;

  391.               background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;

  392.               background-size: 100% 100%;

  393.               margin-right: 10px;

  394.             }

  395.           }

  396.         }

  397.       }

  398. 

  399.       .operation{

  400.         display: flex;

  401.         align-items: center;

  402.         justify-content: right;

  403.         text-align: center;

  404.         border-radius: 30px;

  405.         background: #fff;

  406.         box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  407.         height: 100%;

  408.         padding: 0 15Px;

  409.         margin-left: 10PX;

  410.         .opera_btn{

  411.           border-radius: 50%;

  412.           margin-left: 10PX;

  413.           &:first-child{margin: 0;}

  414.           &.delete{

  415.             background:#df0707;

  416.             margin-left: 10PX;

  417.             .icon{

  418.               width: 22PX;

  419.               height: 29PX;

  420.               background: url('../../assets/images/sunVillage_info/signature_icon_03.png') no-repeat;

  421.               background-size: 100% 100%;

  422.               display: block;

  423.             }

  424.           }

  425.           &.edit{

  426.             background: #79cf13;

  427.             margin-left: 10PX;

  428.             .icon {

  429.               width: 26PX;

  430.               height: 25PX;

  431.               background: url('../../assets/images/sunVillage_info/signature_icon_02.png') no-repeat;

  432.               background-size: 100% 100%;

  433.               display: block;

  434.             }

  435.           }

  436.           &.view{

  437.             background: #3494ff;

  438.             margin-left: 10PX;

  439.             .icon {

  440.               width: 29PX;

  441.               height: 21PX;

  442.               background: url('../../assets/images/sunVillage_info/signature_icon_04.png') no-repeat;

  443.               background-size: 100% 100%;

  444.               display: block;

  445.             }

  446.           }

  447.           &.list{

  448.             background: #79cf13;

  449.             margin-left: 10PX;

  450.             .icon {

  451.               width: 29px;

  452.               height: 21px;

  453.               background: url('../../assets/images/sunVillage_info/list_icon_10.png') no-repeat;

  454.               background-size: 100% 100%;

  455.               display: block;

  456.             }

  457.           }

  458.         }

  459.       }

  460.     }

  461.     .bottom_tips{

  462.       font-size: 24px;

  463.       color: #a7a6a6;

  464.       text-align: center;

  465.       margin-top: 32px;

  466.       background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;

  467.       background-size: 260px 2px;

  468.       .xs{

  469.         padding:0 8px;

  470.         background: #e9e9e9;

  471.       }

  472.     }

  473. 

  474.     .signature-box{

  475.       border:1px dashed #666;

  476.       margin:2px 20px;

  477.       height: 100%;

  478.       /*canvas{*/

  479.       /*  height: 100%!important;*/

  480.       /*}*/

  481.     }

  482.     .signature-footer{

  483.       transform: rotate(90deg);

  484.       width: auto;

  485.       position: absolute;

  486.       top: 50%;

  487.       left: 0PX;

  488.       .clearBtn{

  489.         margin-left: 15px;

  490.       }

  491.     }

  492.     .esigh-result{

  493.       margin:15px 20px;

  494.       // height: 110px;

  495.       border:1px solid #666;

  496.       font-size: 0;

  497.       .imgs{

  498.         width: 100%;

  499.       }

  500.     }

  501.   }

  502. </style>