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>· 已阅读并知晓：拍下不买的后果，即保证金不予退还并承担相应的后果包括处罚等</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>
    </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>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" color="#007E72">保存</van-button>
        </div>
      </van-form>
    </van-row>
  </div>
</template>

<script>
import {getMember, submmitSignup, uploadPic,getOutProjectDetail} from "../../api/project";
import {getInfo} from "../../api/login";

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: true,
      color:"#007E72",
      nickName:"",
      userName:"",
      password:"",
      fileList:[],
      tableId:"",
      realname:"",
      accountType:"",
      bankType:"",
      payeePaymentLines:"",
      payAccount :"",
      accountName :"",
      bankName:"",
    };
  },
  created() {
    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
    });
  },
  methods: {
    onRead (file) {
        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.fileList.length<1){
      //   this.$toast({
      //     icon: 'warning', // 找到自己需要的图标
      //     message: '请上传相关凭证'
      //   })
      //   return;
      // }
      submmitSignup(values).then(response =>{
        if(response.code==200){
          this.tableId = response.data
          this.onRead(this.fileList)
        }
      })
    }
  },
  watch:{
    checked(val){
      val==true?this.color="#007E72":this.color="#000"
    }
}
}
</script>

<style scoped lang="scss">

</style>