产权交易

src/api/project/index.js

@@ -84,3 +84,12 @@ export function biddingSubmit (params) {
   })
 }
 
+//签名
+export function signUp(data) {
+  return request({
+    url: '/open/attachment/sign',
+    method: 'post',
+    data: data
+  })
+}
+

src/views/project/signUp.vue

@@ -30,13 +30,30 @@
       </p>
     </van-row>
     <van-row style="padding:0 20px;">
-    <h2 style="margin-bottom:10px;">1.竞买人请确认以下事项并勾选</h2>
-    <p>· 已阅读并知晓：拍下不买的后果，即保证金不予退还并承担相应的后果包括处罚等</p>
-    <p>· 已阅读并知晓：本次报名仅代表本人，未接受他人委托参与竞买。（如需办理委托，请在报名前联系处置单位将双方信息录入系统</p>
-    <p>· 已阅读并知晓：如您报名成功，您的姓名、证件号码、手机号、联系地址等信息将披露给资产处置单位及相关服务提供方，用于核实竞买人的真是身份、竞买资格及相关服务提供</p>
-    <p>· 已阅读并知晓：竞买人如果没有进行实地看样，视为接受标的所有瑕疵等细则</p>
-    <p style="margin-bottom:10px;">· 已阅读并知晓：已阅读并同意 <span style="color:#C21F3A">《竞拍服务协议》</span></p>
-    <van-checkbox v-model="checked" shape="square" checked-color="#007E72" ><p :style="{color:color}">本人已知晓并同意以上所有事项</p></van-checkbox>
+      <h2 style="margin-bottom:10px;">1.竞买人条件确认</h2>
+      <p style="margin-bottom:10px;">· 已阅读并知晓：
+        <span style="color:#C21F3A" @click="show1=true">《乳山市农村产权交易项目报名服务协议》</span>
+      </p>
+      <van-dialog v-model="show1" title="乳山市农村产权交易项目报名服务协议" confirmButtonText="关闭">
+
+        <div class="dialog_content_center" v-html="fwxyConfig"></div>
+
+      </van-dialog>
+
+
+      <p style="margin-bottom:10px;">· 已阅读并知晓：
+        <span style="color:#C21F3A" @click="show2=true">《竞买人承诺书》</span>
+      </p>
+      <van-dialog v-model="show2" title="竞买人承诺书" confirmButtonText="关闭">
+
+        <div class="dialog_content_center" v-html="cnsConfig"></div>
+
+      </van-dialog>
+
+      <van-checkbox v-model="checked" shape="square" checked-color="#007E72" >
+        <p :style="{color:color}">确认已知晓并同意以上所有内容
+        </p>
+      </van-checkbox>
     </van-row>
     <van-row style="padding:0 20px;margin-top:10px;">
     <h2 style="margin-bottom:10px;">竞买人身份确认说明：</h2>
@@ -148,17 +165,46 @@
             </van-uploader>
           </template>
         </van-field>
+        <van-field label="电子签名" required name="signPic" v-model="signFileUrlUp">
+          <template #input>
+              <van-button @click="show=true" native-type="button" icon="plus" size="small" round color="#007E72">点击签名</van-button>
+          </template>
+        </van-field>
+        <img :src="signFileUrl" style="width: 100%;" alt="">
         <div style="margin: 16px;">
           <van-button round block type="info" native-type="submit" color="#007E72">保存</van-button>
         </div>
       </van-form>
     </van-row>
+    <van-popup v-model="show" closeable position="right" :style="{ height: '100%' }" >
+      <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">
+        <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
+          <vue-esign
+            ref="esign"
+            class="mySign"
+            :width="500"
+            :height="height"
+            :isCrop="signature.isCrop"
+            :lineWidth="signature.lineWidth"
+            :lineColor="signature.lineColor"
+            :bgColor.sync="signature.bgColor"
+          />
+        </div>
+        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
+        <div class="signature-footer">
+          <van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>
+          <van-button @click="handleReset" class="clearBtn" type="info" plain  size="small">清空画板</van-button>
+        </div>
+      </van-cell-group>
+    </van-popup>
   </div>
 </template>
 
 <script>
-import {getMember, submmitSignup, uploadPic,getOutProjectDetail} from "../../api/project";
+  import {getMember, submmitSignup, uploadPic, getOutProjectDetail, getWebConfig,signUp} from "../../api/project";
 import {getInfo} from "../../api/login";
+  import $ from "jquery";
+  import {signSecond} from "@/api/sunVillage_info/fixedAssets";
 
 export default {
   name: "signUp",
@@ -175,6 +221,8 @@ export default {
       memberId:"",
       status:"N",
       checked: true,
+      show1: false,
+      show2: false,
       color:"#007E72",
       nickName:"",
       userName:"",
@@ -188,9 +236,26 @@ export default {
       payAccount :"",
       accountName :"",
       bankName:"",
+      show: false,
+      signatureImg:'',
+      //电子签名
+      signature:{
+        lineWidth: 6, // 画笔的线条粗细
+        lineColor: "#000000", // 画笔的颜色
+        bgColor: "", // 画布的背景颜色
+        resultImg: "", // 最终画布生成的base64图片
+        isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
+      },
+      signaId:'',
+      height:null,
+      cnsConfig:'',
+      fwxyConfig:'',
+      signFileUrl:'',
+      signFileUrlUp:'',
     };
   },
   created() {
+    this.height = window.screen.height*1.28-20;
     this.projectId = this.$route.query.projectId;
     this.deposit = this.$route.query.deposit;
     this.projectName = this.$route.query.projectName;
@@ -227,8 +292,63 @@ export default {
       this.accountName = res.data.accountName
       this.bankName = res.data.bankName
     });
+    getWebConfig().then(response =>{
+      this.fwxyConfig = response.data[15].configValue;
+      this.cnsConfig = response.data[16].configValue;
+    });
   },
   methods: {
+    canvasTTdown(){
+      $('#canvasTT').css('display','none')
+    },
+    // 清空画板
+    handleReset() {
+      this.$refs.esign.reset();
+      $('#canvasTT').css('display','block')
+    },
+    handleGenerate() {
+      console.log(this.$refs.esign)
+      this.$refs.esign
+        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
+        .then((res) => {
+          console.log(res)
+          this.signature.resultImg = res;
+          let wj  =  this.dataURLtoBlob(res);
+          let param = new FormData()  // 创建form对象
+          param.append('file', wj)  // 通过append向form对象添加数据
+          param.append('isAngle', 'true')  // 通过append向form对象添加数据
+
+          console.log(param)
+          signUp(param).then(response => {
+            this.$notify({ type: 'success', message: '签字成功' });
+            this.show = false;
+            this.signFileUrl = '/api'+response.fileUrl;
+            this.signFileUrlUp = response.fileUrl;
+            console.log(response)
+          });
+
+        })
+        .catch((err) => {
+          console.log(err)
+          // 画布没有签字时会执行这里提示一下
+          this.$toast.fail('请签名后再保存签字');
+
+        });
+    },
+    dataURLtoBlob (dataurl, filename = 'file') {
+      let arr = dataurl.split(',')
+      let mime = arr[0].match(/:(.*?);/)[1]
+      let suffix = mime.split('/')[1]
+      let bstr = atob(arr[1])
+      let n = bstr.length
+      let u8arr = new Uint8Array(n)
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new File([u8arr], `${filename}.${suffix}`, {
+        type: mime
+      })
+    },
     onRead (file) {
         let data = {};
         let f = []
@@ -262,6 +382,13 @@ export default {
         })
         return;
       }
+      if(this.signFileUrlUp==''){
+        this.$toast({
+          icon: 'warning', // 找到自己需要的图标
+          message: '请签名后提交'
+        })
+        return;
+      }
       // if(this.fileList.length<1){
       //   this.$toast({
       //     icon: 'warning', // 找到自己需要的图标
@@ -269,10 +396,20 @@ export default {
       //   })
       //   return;
       // }
+      values.signPic = this.signFileUrlUp;
       submmitSignup(values).then(response =>{
         if(response.code==200){
           this.tableId = response.data
-          this.onRead(this.fileList)
+          console.log(response)
+          if (response.msg!='操作成功'){
+            this.$toast({
+              icon: 'fail', // 找到自己需要的图标
+              message: response.msg,
+              duration:"2000"
+            })
+          }else{
+            this.onRead(this.fileList)
+          }
         }
       })
     }
@@ -286,5 +423,37 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+  .dialog_content_center{
+    height: 40vh;
+    overflow-y: scroll;
+    margin-top: 2vh;
+    padding: 0 2vh;
+  }
+  .signature-box{
+    border:1px dashed #666;
+    margin:2px 20px;
+    height: 100%;
+    /*canvas{*/
+    /*  height: 100%!important;*/
+    /*}*/
+  }
+  .signature-footer{
+    transform: rotate(90deg);
+    width: auto;
+    position: absolute;
+    top: 50%;
+    left: 0PX;
+    .clearBtn{
+      margin-left: 15px;
+    }
+  }
+  .esigh-result{
+    margin:15px 20px;
+    // height: 110px;
+    border:1px solid #666;
+    font-size: 0;
+    .imgs{
+      width: 100%;
+    }
+  }
 </style>