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;margin-bottom: 20px">
        <span>缴纳保证金:</span>
        <span style="color:#C21F3A;font-size: 0.45rem;font-weight: bold;">¥{{ deposit }}</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 10px;margin-top: 20px;">
      <h2 style="margin-bottom:10px;padding:0 10px">2.竞买人身份确认</h2>
      <van-form @submit="onSubmit">
        <van-field
          v-model="nickName"
          name="nickName"
          label="姓名"
          placeholder="姓名"
          required
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="phone"
          name="phone"
          label="会员账号"
          placeholder="会员账号"
          required
          :rules="[{ required: true, message: '请填写会员账号' }]"
        />
        <van-field
          v-model="bankCardName"
          name="bankCardName"
          label="开户银行"
          placeholder="开户银行"
          required
          :rules="[{ required: true, message: '请填写开户银行' }]"
        />
        <van-field
          v-model="bankCardNum"
          name="bankCardNum"
          label="银行卡号"
          placeholder="银行卡号"
          required
          :rules="[{ required: true, message: '请填写银行卡号' }]"
        />
        <van-field
          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="上传相关凭证" required>
          <template #input>
            <van-uploader accept="*" 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} 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,
      bankCardName:"",
      bankCardNum:"",
      idCardNum:"",
      phone:"",
      memberId:"",
      status:"Y",
      checked: true,
      color:"#007E72",
      nickName:"",
      userName:"",
      password:"",
      fileList:[],
      tableId:"",
    };
  },
  created() {
    getInfo().then(response => {
        getMember(response.user.userId).then(res => {
          this.nickName = res.data.realname
          this.idCardNum = res.data.idCardNum
          this.bankCardName = res.data.bankCardName
          this.bankCardNum = res.data.bankCardNum
          this.phone = res.data.phone
          this.memberId = res.data.id
        })
      })
  },
  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: '保存之前，请先勾选<<竞拍服务协议>>!'
        })
      }
      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>