wjt
2024-06-26 59f4dc012a2c42eebd31301444e0f8df9af088e0
pages/registerCompany/registerCompany.vue
@@ -4,34 +4,44 @@
         <view class="form">
            <view class="form-item">
               <text class="label require">姓名</text>
               <input type="text" placeholder="请输入"/>
               <input type="text" placeholder="请输入" v-model="form.companyUser"/>
            </view>
            <view class="form-item">
               <text class="label require">手机号</text>
               <input type="text" placeholder="请输入"/>
               <input type="number" placeholder="请输入" v-model="form.companyPhone"/>
            </view>
            <view class="form-item">
               <text class="label require">验证码</text>
               <input type="text" placeholder="请输入"/>
               <text>获取验证码</text>
               <input type="text" placeholder="请输入" v-model="form.code"/>
               <text @click="getCode">{{tips}}</text>
            </view>
         </view>
      </view>
      <view class="top-box">
      <view class="top-box" style="margin-top: 20rpx;">
         <view class="form">
            <view class="form-item">
               <text class="label require">企业名称</text>
               <input type="text" placeholder="请输入"/>
               <input type="text" placeholder="请输入" v-model="form.companyName"/>
            </view>
            <view class="form-item">
               <text class="label require">统一社会信用代码</text>
               <input type="text" placeholder="请输入"/>
               <input type="text" placeholder="请输入" v-model="form.companyCode"/>
            </view>
            <view class="form-item">
               <text class="label require">企业地址</text>
               <input type="text" placeholder="请输入" v-model="form.companyAddress"/>
            </view>
            <view class="form-item">
               <text class="label require">营业执照</text>
               <input type="text" placeholder="请输入"/>
            </view>
         </view>
         <view style="text-align: center;" @click="startUpload">
            <img src="/static/i07.png" v-if="!form.companyImg" alt="" class="sc" />
            <image :src="config + form.companyImg" mode="aspectFit" class="sc border" v-else></image>
         </view>
      </view>
      <!-- <view class="form">
         <view class="form-item">
@@ -63,43 +73,160 @@
            <input type="text" placeholder="请输入" v-model="form.companyAddress"/>
         </view>
      </view> -->
      <u-button @click="register">
         注册
      </u-button>
      <view class="bottom">
         <view @click="register" class="button">
            注册
         </view>
      </view>
   </view>
</template>
<script>
   import { registerCompany, checkCode } from '@/api/auth.js'
   import { registerCompany, checkCode, getNewVerify } from '@/api/auth.js'
   import { upload } from '@/common/upload'
   import { config } from '@/common/config.js'
   export default {
      data() {
         return {
            form: {
            }
               companyImg: ''
            },
            config: config.baseUrl,
            isSendCode: false,
            countdownTime: 20,
            timer: null,
            tips: '获取验证码',
         }
      },
      methods: {
         startCountdown() {
            if(this.timer) {
               clearTimeout(this.timer)
               this.timer = null
            }
            if(this.countdownTime <= 0) {
               this.tips = "重新获取"
               this.isSendCode = false
               this.countdownTime = 20
               return
            }
            this.timer = setTimeout(() => {
               this.countdownTime--
               this.tips = `${this.countdownTime}s后重新获取`
               this.startCountdown()
            }, 1000)
         },
         getCode() {
            if(!this.form.companyPhone){
               uni.showToast({
                  title: '请输入手机号',
                  icon: 'none'
               })
               return
            }
            if(!this.$u.test.mobile(this.form.companyPhone)){
               uni.showToast({
                  title: '请输入正确的手机号',
                  icon: 'none'
               })
               return
            }
            if (!this.isSendCode) {
               this.isSendCode = true
               uni.showLoading({
                  title: '正在获取验证码'
               })
               getNewVerify({phone: this.form.companyPhone }).then(val => {
                  if(val.data.code == 200) {
                     this.startCountdown()
                     uni.hideLoading();
                     this.tips = `${this.countdownTime}s后重新获取`
                     uni.$u.toast('验证码已发送');
                  }
               })
            } else {
               uni.$u.toast('倒计时结束后再发送');
            }
         },
         uploadImage(file) {
            upload(file).then(val => {
               // console.log(val.fileName)
               this.form.companyImg = val.fileName
            })
         },
         // 图片上传接口
         startUpload() {
            uni.chooseImage({
               count: 1,
               success: val => {
                  // console.log(val.tempFilePaths[0])
                  this.uploadImage(val.tempFilePaths[0])
               },
               fail: err => {
                  uni.showToast({
                     title: "上传出错",
                     icon: 'none'
                  })
               }
            })
         },
         // 校验字段
         authField(){
            if(!this.form.companyUser) {
               return '请输入姓名'
            }
            if(!this.form.companyPhone) {
               return '请输入手机号'
            }
            if(!this.form.code){
               return '请输入验证码'
            }
            if(!this.form.companyName) {
               return "请输入企业名称"
            }
            if(!this.form.companyCode){
               return '请输入统一社会信用代码'
            }
            if(!this.form.companyAddress){
               return "请输入企业地址"
            }
            if(!this.form.companyImg || !this.form.companyImg.length){
               return '请上传营业执照'
            }
            return false
         },
         // 校验code
         async checkCode() {
            try {
               const { code, data } = await checkCode({ code: this.form.code, phone: this.form.companyPhone, userType: '02' })
               if(code == 200) {
               const { data } = await checkCode({ code: this.form.code, phone: this.form.companyPhone, userType: '02' })
               console.log(data.data)
               if(data.code == 200 && data.data != false) {
                  return Promise.resolve()
               } else {
                  uni.showToast({
                     title: '验证码错误',
                     icon: 'none'
                  })
                  throw "校验失败"
                  return Promise.refject()
               }
            }catch(err){
               throw "校验失败"
            }
         },
         // 注册接口
         async register(){
            try{
               const value = this.authField()
               if(value){
                  uni.showToast({
                     title: value,
                     icon: 'none'
                  })
                  return
               }
               await this.checkCode()
               // this.form.companyStatus = 1
               registerCompany(this.form).then(val=>{
@@ -126,15 +253,18 @@
   }
</style>
<style scoped lang="scss">
   .page-content{
      padding: 30rpx;
   }
.page-content{
   padding: 32rpx;
}
.form{
   padding: 24rpx;
   .form-item{
      margin-top: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #F1F1F1;
      input{
         text-align: right;
         font-size: 26rpx;
@@ -144,6 +274,7 @@
         
      }
      .require{
         color: #4A4E60;
         position: relative;
         &::after{
            content: '*';
@@ -153,5 +284,49 @@
         }
      }
   }
   .form-item:last-child{
      padding-bottom: 0;
      border-bottom: none;
   }
   .form-item:first-child{
      margin-top: 0;
   }
}
.top-box{
   background: #fff;
   border-radius: 5px;
}
.bottom{
   position: fixed;
   bottom: 0;
   width: 100%;
   background: #fff;
   height: 132rpx;
   left: 0;
   display: flex;
   align-items: center;
   .button{
      margin: 0 32rpx;
      height: 88rpx;
      border-radius: 20rpx;
      border: 1px solid #1171E0;
      background: #1171E0;
      color: #fff;
      line-height: 88rpx;
      width: 100%;
      text-align: center;
      font-size: 32rpx;
   }
}
.sc{
   width: 90%;
   height: 346rpx;
   margin-bottom: 20rpx;
   border-radius: 20rpx;
}
.border{
   border: 2rpx solid #efefef;
}
</style>