nsgk_mobile/src/views/project/signUp.vue

<template>
  <div class="app-container" style="background: #fff;height: 100%">
    <van-nav-bar
      title="报名"
      left-arrow
      fixed
      placeholder
      @click-left="$router.back(-1)"
    />
    <van-row>
      <p class="" style="padding:20px 20px 0px;font-size: 0.4rem">
        <span>项目名称:</span>
        <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ projectName }}</span>
      </p>
      <p style="padding:10px 20px 0;font-size: 0.4rem;">
        <span>缴纳保证金:</span>
        <span style="color:#C21F3A;font-size: 0.45rem;font-weight: bold;">¥{{ deposit }}</span>
      </p>
      <p class="" style="padding:10px 20px 0px;font-size: 0.4rem">
        <span>保证金缴纳账号:</span>
        <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ payAccount }}</span>
      </p>
      <p class="" style="padding:10px 20px 0px;font-size: 0.4rem">
        <span>账户名称:</span>
        <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ accountName }}</span>
      </p>
      <p class="" style="padding:10px 20px 0px;font-size: 0.4rem;margin-bottom: 20px">
        <span>开户银行:</span>
        <span style="color:#007E72;font-size: 0.45rem;font-weight: bold;">{{ bankName }}</span>
      </p>
    </van-row>
    <van-row style="padding:0 20px;">
      <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>
    <p>竞买人身份信息无法在此修改，请前往<span style="color: #c12e2a;">个人中心 > 账户设置 > 银行账户信息</span>进行修改维护</p>
    </van-row>
    <van-row style="padding:0 10px;margin-top: 20px;">
      <h2 style="margin-bottom:10px;padding:0 10px">2.竞买人身份确认</h2>
      <van-form @submit="onSubmit">
        <van-field
          readonly
          v-model="realname"
          name="realname"
          label="姓名"
          placeholder="姓名"
          required
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          readonly
          v-model="phone"
          name="phone"
          label="会员账号"
          placeholder="会员账号"
          required
          :rules="[{ required: true, message: '请填写会员账号' }]"
        />
        <van-field
          readonly
          v-model="accountType"
          name="accountType"
          label="账户类型"
          placeholder="账户类型"
          required
          :rules="[{ required: true, message: '请填写账户类型' }]"
        />
        <van-field
          readonly
          v-model="bankType"
          name="bankType"
          label="所属银行"
          placeholder="所属银行"
          required
          :rules="[{ required: true, message: '请填写所属银行' }]"
        />
        <van-field
          readonly
          v-model="bankCardName"
          name="bankCardName"
          label="开户姓名"
          placeholder="开户姓名"
          required
          :rules="[{ required: true, message: '请填写开户姓名' }]"
        />
        <van-field
          readonly
          v-model="bankAddress"
          name="bankAddress"
          label="开户银行"
          placeholder="开户银行"
          required
          :rules="[{ required: true, message: '请填写开户银行' }]"
        />
        <van-field
          readonly
          v-model="bankCardNum"
          name="bankCardNum"
          label="银行卡号"
          placeholder="银行卡号"
          required
          :rules="[{ required: true, message: '请填写银行卡号' }]"
        />
        <van-field
          readonly
          v-model="payeePaymentLines"
          name="payeePaymentLines"
          label="联行号"
          placeholder="联行号"
          required
          :rules="[{ required: true, message: '请填写联行号' }]"
        />
        <van-field
          readonly
          v-model="idCardNum"
          name="idCardNum"
          label="身份证号"
          placeholder="身份证号"
          required
          :rules="[{ required: true, message: '请填写身份证号' }]"
        />
        <van-field
          v-model="projectId"
          name="projectId"
          style="display: none"
        />
        <van-field
          v-model="memberId"
          name="memberId"
          style="display: none"
        />
        <van-field
          v-model="status"
          name="status"
          style="display: none"
        />
        <van-field label="缴款凭证">
          <template #input>
            <van-uploader v-model="fileList" multiple>
              <van-button icon="plus" size="small" round color="#007E72">点击上传</van-button>
            </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, getWebConfig,signUp} from "../../api/project";
import {getInfo} from "../../api/login";
  import $ from "jquery";
  import {signSecond} from "@/api/sunVillage_info/fixedAssets";
  import {Toast} from "vant";

export default {
  name: "signUp",
  data() {
    return {
      projectId:this.$route.query.projectId,
      deposit:this.$route.query.deposit,
      projectName:this.$route.query.projectName,
      bankAddress:"",
      bankCardNum:"",
      bankCardName:"",
      idCardNum:"",
      phone:"",
      memberId:"",
      status:"N",
      checked: false,
      show1: false,
      show2: false,
      color:"#007E72",
      nickName:"",
      userName:"",
      password:"",
      fileList:[],
      tableId:"",
      realname:"",
      accountType:"",
      bankType:"",
      payeePaymentLines:"",
      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;
    console.log(this.$route.query.projectId)
    console.log(this.$route.query.deposit)
    console.log(this.$route.query.projectName)
    getInfo().then(response => {
      getMember(response.user.userId).then(res => {
        this.realname = res.data.realname
        this.bankCardName = res.data.bankCardName
        this.idCardNum = res.data.idCardNum
        this.bankAddress = res.data.bankAddress
        this.bankCardNum = res.data.bankCardNum
        this.phone = res.data.phone
        this.memberId = res.data.id
        this.payeePaymentLines = res.data.payeePaymentLines

        this.getDicts("bank_account_type").then(rr => {
          this.accountType = this.selectDictLabel(rr.data,res.data.accountType);
        });

        this.getDicts("bank_type_all").then(rr => {
          this.bankType = this.selectDictLabel(rr.data,res.data.bankType);
        });

      })
    });
    getOutProjectDetail(this.$route.query.projectId).then(res => {
      // this.projectId = res.data.projectId
      // this.deposit = res.data.deposit
      // this.projectName = res.data.projectName

      this.payAccount = res.data.payAccount
      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() {

      this.$toast.loading({
        message: "正在生成签字",
        forbidClick: true,
        duration: 0,
      });

      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.clear();
          // 画布没有签字时会执行这里提示一下
          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) {
      this.$toast.loading({
        message: "正在提交签名",
        forbidClick: true,
        duration: 0,
      });
        let data = {};
        let f = []
        for (let i of file){
          f.push(i.content)
        }
        data['files']= f
        data['fileType']= ""
        data['bizPath']= "transaction"
        data['tableName']= "t_transaction_signup"
        data['tableId']= this.tableId
        uploadPic(data).then(response => {
          if(response.code=="200"){
            let _this = this
            this.$toast({
              icon: 'success', // 找到自己需要的图标
              message: '提交申请，等待审核',
              duration:"2000",
              onClose:function(){
                _this.$router.back(-1);
              }
            })
          }
        })
    },
    onSubmit(values){
      if(!this.checked){
        this.$toast({
          icon: 'warning', // 找到自己需要的图标
          message: '保存之前，请先勾选<<竞拍服务协议>>!'
        })
        return;
      }
      if(this.signFileUrlUp==''){
        this.$toast({
          icon: 'warning', // 找到自己需要的图标
          message: '请签名后提交'
        })
        return;
      }
      // if(this.fileList.length<1){
      //   this.$toast({
      //     icon: 'warning', // 找到自己需要的图标
      //     message: '请上传相关凭证'
      //   })
      //   return;
      // }
      this.$toast.loading({
        message: "正在提交报名",
        forbidClick: true,
        duration: 0,
      });
      values.signPic = this.signFileUrlUp;
      submmitSignup(values).then(response =>{
        if(response.code==200){
          this.tableId = response.data
          console.log(response)
          if (response.msg!='操作成功'){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: response.msg,
              duration:"2000"
            })
          }else{
            this.onRead(this.fileList)
          }
        }
      })
    }
  },
  watch:{
    checked(val){
      val==true?this.color="#007E72":this.color="#000"
    }
}
}
</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>