web-base-h5/pages/selfService/realName/realName.vue

<template>
  <view class="content">
    <div class="img_cen" v-if="hasRegin">
      <div class="status-img">
        <img src="@/static/images/status3.png" />
      </div>
      <div class="status-size bolds">{{ '已认证' }}</div>
    </div>
    <view class="theform" v-else>
      <u--form
        labelPosition="left"
        :model="dataForm"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item required label-width="180rpx" :label="'证件(正面)'">
          <uploadImg
            :ifsfz="true"
            @imageUploaded="imageUploaded1"
            prop="idFront"
            ref="uploadImg1"
            style="margin-right: 30rpx"
            :bgimg="`../../../static/images/idCard1.png`"
            v-model="dataForm.idFront"
          ></uploadImg>
        </u-form-item>
        <u-form-item required label-width="180rpx" :label="'证件(反面)'">
          <uploadImg
            :ifsfz="true"
            @imageUploaded="imageUploaded2"
            prop="idBack"
            ref="uploadImg2"
            style="margin-right: 30rpx"
            :bgimg="`../../../static/images/idCard2.png`"
            v-model="dataForm.idBack"
          ></uploadImg>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'真实姓名'"
          prop="accountName"
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.accountName"
          ></u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'性别'"
          prop="sex"
          ref="item1"
        >
          <u-radio-group v-model="dataForm.sex" @change="radioGroupChange">
            <u-radio
              :customStyle="{ marginRight: '16rpx' }"
              v-for="(item, index) in sexList"
              :key="index"
              :name="item.value"
              >{{ item.label }}</u-radio
            >
          </u-radio-group>
        </u-form-item>
        <!-- </u-form-item> -->
        <u-form-item
          required
          label-width="180rpx"
          :label="'证件类型'"
          prop="idName"
          @click="showCtype = true"
          ref="item1"
        >
          <u--input
            suffixIcon="arrow-right"
            readonly
            v-model="dataForm.idName"
            disabled
            :placeholder="'请选择'"
          >
          </u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'证件号码'"
          prop="idCard"
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.idCard"
          ></u--input>
        </u-form-item>
        <!-- <u-form-item
          required
          label-width="180rpx"
          :label="'银行名称'"
          @click="showAmount = true"
          prop="bankName"
          ref="item1"
        >
          <u--input
            suffixIcon="arrow-right"
            readonly
            v-model="dataForm.bankName"
            disabledColor="#ffffff"
            :placeholder="'请选择'"
          >
          </u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'银行卡号'"
          prop="cardNumber"
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.cardNumber"
            disabledColor="#F5F5F5;"
          ></u--input>
        </u-form-item>

        <u-form-item
          required
          label-width="180rpx"
          :label="'开户支行'"
          prop="subBankName"
          ref="item1"
        >
          <u--input
            :placeholder="'请输入'"
            v-model="dataForm.subBankName"
            disabledColor="#F5F5F5;"
          ></u--input>
        </u-form-item> -->
        <!-- <u-form-item
          required
          @click="getDiqu"
          :label="'所在地区'"
          label-width="180rpx"
          prop="theaddress"
        >
          <u--input
            v-model="dataForm.theaddress"
            readonly
            suffixIcon="arrow-right"
            disabledColor="#ffffff"
            :placeholder="'请选择'"
          >
          </u--input>
        </u-form-item> -->

        <view class="view-class">
          <u-form-item
            required
            :label="'详细地址'"
            class="label-style"
            label-width="180rpx"
            prop="address"
          >
            <u-textarea
              v-model="dataForm.address"
              placeholder-class="place-class"
              class="border-color"
              maxlength="200"
              :placeholder="'请输入'"
            />
          </u-form-item>
        </view>
        <u-form-item
          required
          label-width="180rpx"
          :label="'联系方式'"
          prop="phone"
          ref="item1"
        >
          <u--input v-model="dataForm.phone" :placeholder="'请输入'"></u--input>
        </u-form-item>
        <u-form-item
          required
          label-width="180rpx"
          :label="'验证码'"
          prop="verificationCode"
          ref="item1"
        >
          <u--input v-model="dataForm.verificationCode" :placeholder="'请输入'">
            <template slot="suffix">
              <text style="color: #18acff" @tap="getCode">{{ tips }}</text>
            </template>
          </u--input>
        </u-form-item>

        <u-code
          :seconds="seconds"
          @end="end"
          @start="start"
          ref="uCode"
          @change="codeChange"
        ></u-code>
        <u-picker
          @cancel="showAmount = false"
          :show="showAmount"
          ref="uPicker"
          :columns="bankCardChioceList"
          @confirm="confirm"
          keyName="bankName"
        ></u-picker>
        <!-- <u-picker @cancel='showCtype=false' :show="showCtype" ref="uPicker2" :columns="cardTypeList"
					@confirm="confirm2" keyName='label'></u-picker> -->
      </u--form>
      <!-- <view class="footer_l">
        <u-checkbox-group v-model="agreementShow"
                          shape="circle"
                          activeColor="#005BAC">
          <u-checkbox @change="toCheck"
                      :name="1">
          </u-checkbox>
        </u-checkbox-group>
        <view class="tit3">{{'我已阅读并同意以上协议'}}</view>
        <view class="tit2"
              @click="toAgree"> 《推广人员服务协议》</view>
      </view> -->
      <view class="btnbox" style="padding-bottom: 180rpx">
        <u-button class="subbtn" @click="submit">{{ '确定' }}</u-button>
      </view>
    </view>
    <u-popup
      :show="agreeMent"
      :closeable="true"
      @close="agreeMent = false"
      :round="10"
      class="popAll"
      mode="center"
    >
      <view class="popList">
        <view class="pop_box">
          <view v-html="context"></view>
          <view class="disflx">
            <u-button
              type="success"
              class="uBtn"
              shape="circle"
              color="linear-gradient(to right, #005BAC, #005BAC )"
              @tap="((agreeMent = false), (isRead = 1))"
              >{{ '我已阅读并同意以上协议' }}</u-button
            >
          </view>
        </view>

        <!-- <view class="footer">


        </view> -->
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
    <v-address
      ref="address"
      @getAddressData="AddressData"
      :defaultCode="defaultCode"
      @addressData="addressData"
    ></v-address>
  </view>
</template>

<script>
import * as ban from '@/config/balance.js'
import address from '@/components/address.vue'
import uploadImg from '@/components/uploadImg.vue'
export default {
  components: {
    'v-address': address,
    uploadImg,
  },
  data() {
    return {
      isRead: 0,
      agreeMent: false,
      agreementShow: [],
      showAmount: false,
      showCtype: false,
      dataForm: {
        // bankName: '',
        // cardNumber: '',
        // pkBank: '',
        // subBankName: '',
        accountName: '',
        idCard: '',
        pkProvince: '',
        pkCity: '',
        pkCounty: '',
        theaddress: '',
        idFront: '',
        idBack: '',
        idName: '身份证',
        idType: 1,
        sex: 1,
      },
      sexRadio: 1,
      address: '',
      defaultCode: [],
      bankCardChioceList: [], //银行选择
      cardTypeList: [], //证件类型
      sexList: [
        {
          label: '男',
          value: 1,
        },
        {
          label: '女',
          value: 2,
        },
      ],
      rules: {
        accountName: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        sexRadio: [
          {
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        idName: [
          {
            type: 'string',
            required: true,
            message: '请选择',
            trigger: ['change'],
          },
        ],
        idCard: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        pkBank: [
          {
            type: 'string',
            required: true,
            message: '请选择',
            trigger: ['change'],
          },
        ],
        address: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        cardNumber: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        subBankName: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        theaddress: [
          {
            type: 'string',
            required: true,
            message: '请选择',
            trigger: ['change'],
          },
        ],
        idFront: [
          {
            required: true,
            message: '请上传',
          },
        ],
        idBack: [
          {
            required: true,
            message: '请上传',
          },
        ],
        phone: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
        verificationCode: [
          {
            type: 'string',
            required: true,
            message: '请输入',
            trigger: ['blur', 'change'],
          },
        ],
      },
      tips: '',
      // refCode: null,
      seconds: 60,
      hasRegin: false,
      context:
        '<p>\t</p><p class="ql-align-center" style="text-align:center;font-size:18px"><span class="ql-size-large">\t</span><strong style="color: rgb(35, 31, 32);text-align:center" class="ql-size-large">推广服务协议</strong></p><p>&nbsp;</p><p><br></p><p><strong style="color: rgb(35, 31, 32);">甲方：青岛海之圣生物工程有限公司</strong></p><p><strong style="color: rgb(35, 31, 32);">乙方：</strong></p><p><strong style="color: rgb(35, 31, 32);">身份证号: </strong></p><p><strong style="color: rgb(35, 31, 32);">手机号:</strong></p><p><br></p><p><span style="color: rgb(35, 31, 32);">甲乙双方经平等协商一致，乙方愿意就甲方所有或经销的产品批发及&nbsp;/ 或零售的业务提供促销推广服务，双方自愿签署并遵守本协议。</span></p><p><strong style="color: rgb(35, 31, 32);">一&nbsp;、定义</strong></p><p><span style="color: rgb(35, 31, 32);">《营业守则》：指甲方提供给乙方的关于权利和责任的声明，其为本协议的重要组成部分。《营业守则》详细规定了乙方提供服务的有关政策、程 序及双方的权利义务。甲方拥有对《营业守则》的排他的解释权和修改权。</span></p><p><span style="color: rgb(35, 31, 32);">产品：指甲方的产品，包括甲方在中国大陆地区销售或者生产的所有种类的产品及就其产品提供的相关服务。</span></p><p><strong>二、 协议期限与延续 </strong>&nbsp;&nbsp;<span style="color: rgb(35, 31, 32);">&nbsp;&nbsp;&nbsp;&nbsp;</span></p><p><span style="color: rgb(35, 31, 32);">1.本协议有效期为十二个月。首个协议期限是以会员注册日起至会员身份到期日为止。</span></p><p><span style="color: rgb(35, 31, 32);">2.乙方应切实履行本协议规定，于本协议到期前三个月向甲方申请延续本协议，甲方将按收到申请时的制度予以审查。若审核合格，视为原协议有效期限的变更，其他协议内容不变。</span></p><p>\t<span style="color: rgb(35, 31, 32);">乙方未按时提出申请，甲方保留不予延续本协议效力的权利。</span></p><p><span style="color: rgb(35, 31, 32);">3.推广服务人员服务协议到期、个人退出或因违规处分等原因被海之圣公司终止资格，普通会员自退出之日起六个月之后，可以重新注册；拥有主任级别以上的经销商自退出之日起十二</span></p><p>\t<span style="color: rgb(35, 31, 32);">个月之后，可以重新注册。并且海之圣公司保留是否接受重新申请的权利。</span></p><p><strong style="color: rgb(35, 31, 32);">三&nbsp;、服务内容</strong></p><p><span style="color: rgb(35, 31, 32);">甲方委托乙方为顾客提供协助订货、产品使用示范、产品功能特点、使用方法介绍、产品满意度调查以及解答顾客对产品所提出问题等售前售后服务；为甲方推广产品， 协助甲方拓展市场， 建立忠实的顾客消费群。乙方同意履行本条所规定的服务。</span></p><p><strong style="color: rgb(35, 31, 32);">四&nbsp;、</strong><strong>服务方式</strong></p><p><span style="color: rgb(35, 31, 32);">1. 乙方作为独立法律主体为甲方提供服务，就其在本协议项下为甲方提供的服务做出独立的判断和决定，并承担相应的风险；由于乙方自身原因所导致的法律责任，由乙方自行承担。</span></p><p><span style="color: rgb(35, 31, 32);">2. 双方同意并了解双方之间不存在劳动关系，乙方不受甲方员工规章制度的管理和支配。在任何情况下，乙方均不应视为甲方的员工，无权享受任何中国法律或者甲方规章制度中规定</span></p><p><span style="color: rgb(35, 31, 32);">甲方应当向其员工提供的福利，亦不受限于甲方员工应当向甲方承担的义务。</span></p><p><span style="color: rgb(35, 31, 32);">3. 乙方应该自行完成本协议项下的服务，不得以任何方式转让或者委托给第三方。</span></p><p><strong style="color: rgb(35, 31, 32);">五
    }
  },
  onLoad() {
    this.getDetail()
    this.getList()
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },

  methods: {
    toAgree() {
      this.agreeMent = true
    },
    getDetail() {
      ban.authenticationDetails().then(res => {
        if (res.data) {
          this.hasRegin = true
        } else {
          this.hasRegin = false
        }
      })
    },

    getIdCardInfo(n) {
      ban
        .ocrIdCard({
          idCardUrl: n,
        })
        .then(res => {
          if (res.code == 200) {
            this.$set(this.dataForm, 'accountName', res.data.name)
            this.$set(this.dataForm, 'idCard', res.data.idCard)
            this.$set(this.dataForm, 'sex', res.data.sex)
            this.$set(this.dataForm, 'address', res.data.address)
          } else {
            this.$nextTick(() => {
              this.$refs.uploadImg1.deletePic({ index: 0 })
              this.$set(this.dataForm, 'accountName', '')
              this.$set(this.dataForm, 'idCard', '')
              this.$set(this.dataForm, 'sex', '')
              this.$set(this.dataForm, 'idFront', '')
            })
          }
        })
    },
    idBackChange(e) {
      if (e) {
        ban
          .ocrIdCardBack({
            idCardBackUrl: e,
          })
          .then(res => {
            if (res.code == 200) {
            } else {
              this.$nextTick(() => {
                this.$refs.uploadImg2.deletePic({ index: 0 })
                this.$set(this.dataForm, 'idBack', '')
              })
            }
          })
      }
    },
    imageUploaded1(url) {
      if (!url) return
      this.dataForm.idFront = url
      this.getIdCardInfo(url)
    },
    imageUploaded2(url) {
      this.dataForm.idBack = url
      this.idBackChange(url)
    },
    // radio选择发生变化
    radioGroupChange(e) {
      this.dataForm.sex = e
      // console.log('🌈eeee',e)
    },
    AddressData(name) {
      this.dataForm.theaddress = name
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    addressData(diqu, obj) {
      this.dataForm.theaddress = diqu
      this.dataForm.pkProvince = obj.province
      this.dataForm.pkCity = obj.city
      this.dataForm.pkCounty = obj.county
      this.$forceUpdate()
    },

    codeChange(text) {
      this.tips = text
    },
    getCode() {
      if (this.dataForm.phone && this.$u.test.mobile(this.dataForm.phone)) {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码',
          })
          ban
            .getVerification({
              phone: this.dataForm.phone,
            })
            .then(res => {
              uni.hideLoading()
              // 这里此提示会被this.start()方法中的提示覆盖
              uni.$u.toast('验证码已发送')
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start()
            })
        } else {
          uni.$u.toast('倒计时结束后再发送')
        }
      } else {
        uni.$u.toast(
          this.dataForm.phone ? '手机号格式不正确' : '请先输入手机号'
        )
        return
      }
    },
    end() {},
    start() {},
    getList() {
      ban.getBankCardChoiceList().then(res => {
        this.bankCardChioceList = [res.data]
      })
      //证件类型
      ban.getCardType().then(res => {
        this.cardTypeList = [res.data]
      })
    },

    submit() {
      this.$refs.uForm
        .validate()
        .then(res => {
          ban
            .addAuthentication(this.dataForm)
            .then(res => {
              if (res.code == 200) {
                uni.$u.toast(res.msg)
                setTimeout(() => {
                  uni.navigateBack()
                }, 1500)
              } else {
                uni.$u.toast(res.msg)
              }
            })
            .catch(err => {})
        })
        .catch(errors => {
          uni.$u.toast('校验失败')
          return false
        })
    },
    confirm2(e) {
      this.dataForm.idName = e.value[0].label
      this.dataForm.idType = e.value[0].value
      this.showCtype = false
    },
    confirm(e) {
      this.dataForm.bankName = e.value[0].bankName
      this.dataForm.pkBank = e.value[0].pkId
      this.showAmount = false
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .u-input--radius,
.u-input--square {
  border-radius: 12rpx;
  // border:2rpx solid #cccccc;
}

.content {
  padding: 0 20rpx;
  background: #fff;

  .uni-textarea {
    height: 100rpx;
  }

  .theform {
    margin-top: 6rpx;
    background: #ffffff;
    padding: 20rpx 23rpx 48rpx 23rpx;

    .contentye {
      font-size: 28rpx;
      margin-left: 200rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
    }
  }

  .btnbox {
    margin-top: 38rpx;
    padding: 0 20rpx;

    .subbtn {
      background: #005bac;
      border-radius: 46rpx;
      font-size: 30rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }
  }

  .getcodes {
    background: #2fbc42;
    border-radius: 38rpx;
    color: #fff;
  }
}
.img_cen {
  padding: 100px 0;
  margin: 0 auto;
  text-align: center;
}
.status-img img {
  width: 80px;
  height: 80px;
}
.footer_l {
  display: flex;
  justify-content: center;

  .tit2 {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #005bac;
  }

  .tit3 {
    font-size: 26rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
  }
  margin: 30rpx 0 40rpx 0;
}
.popAll ::v-deep .u-popup__content {
  width: 90%;
}
.pop_box {
  max-height: 70vh;
  overflow-y: scroll;
  padding: 40rpx;
  img {
    width: 100%;
    margin-bottom: 20px;
  }
}
.footer {
  margin-bottom: 40rpx;
  padding: 20rpx;
}
.disflx {
  margin-top: 10px;
}
</style>