aluminium-trading-uniapp-240925/pages_order/auth/customsClearApply.vue

<template>
  <view class="registerShop">

    <navbar :title="$t('other.domesticCustomsClearanceApplication')" leftClick @leftClick="$utils.navigateBack"/>

    <view class="frame">
      <!--基本信息-->
      <view class="basicInfo">
        <!--用户名-->
        <view class="item">
          <view>{{ $t('components.username') }}</view>
          <view>
            <input v-model="form.userName" :placeholder="$t('components.enterUserName')" clearable></input>
          </view>
        </view>
        <!--密码-->
        <view class="item">
          <view>{{ $t('components.password') }}</view>
          <view>
            <input v-model="form.password" password clearable :placeholder="$t('components.enterYourPassword')"
                   clearable></input>
          </view>
        </view>
        <!--公司名称-->
        <view class="item">
          <view>{{ $t('other.companyName') }}</view>
          <view>
            <input v-model="form.companyName" type="number" :placeholder="$t('other.enterCompanyName')"
                   clearable></input>
          </view>
        </view>
        <!--税收编码-->
        <view class="item">
          <view>{{ $t('other.taxCode') }}</view>
          <view>
            <input v-model="form.taxCode" :placeholder="$t('other.enterTaxCode')" clearable></input>
          </view>
        </view>
        <!--公司地址-->
        <view class="item">
          <view>{{ $t('other.companyAddress') }}</view>
          <view>
            <input v-model="form.address" :placeholder="$t('other.enterCompanyAddress')" clearable></input>
          </view>
        </view>
        <!--dian-->
        <view class="item">
          <view>{{ $t('components.lxPhone') }}</view>
          <view>
            <input v-model="form.phone" :placeholder="$t('components.plePhoneNumber')" clearable></input>
          </view>
        </view>
        <view class="item">
          <view>{{ $t('other.companyAccount') }}</view>
          <view>
            <input v-model="form.bankAccount" :placeholder="$t('other.enterCompanyAccount')" clearable></input>
          </view>
        </view>
        <view class="item">
          <view>{{ $t('components.bankName') }}</view>
          <view>
            <input v-model="form.bankNama" :placeholder="$t('components.enterBankName')" clearable></input>
          </view>
        </view>
      </view>

      <!--证件信息-->
      <view class="certificateInfo">

        <!--营业执照-->
        <view class="certificateInfoItem">
          <view class="title">
            <span
                style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
            <span>{{ $t('components.businessLicense') }}</span>
          </view>
          <view class="upload">
            <uv-upload
                :fileList="yyzzfileList"
                :maxCount="4"
                multiple
                width="150rpx"
                height="150rpx"
                @delete="(file) => deleteImage(0, file)"
                @afterRead="(file) => afterRead(0, file)"
                :previewFullImage="true"></uv-upload>
          </view>

        </view>
        <!--基本户信息-->
        <view class="certificateInfoItem">
          <view class="title">
            <span
                style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
            <span>{{ $t('components.basicAccountInfo') }}</span>
          </view>
          <view class="upload">
            <uv-upload
                :fileList="jbhxxfileList"
                :maxCount="4"
                multiple
                width="150rpx"
                height="150rpx"
                @delete="(file) => deleteImage(1, file)"
                @afterRead="(file) => afterRead(1, file)"
                :previewFullImage="true"></uv-upload>
          </view>
        </view>
        <!--收款银行-->
        <view class="certificateInfoItem">
          <view class="title">
             <span
                 style="width: 10rpx;height: 40rpx;background-color: #f78142;border-radius: 10rpx;overflow: hidden;"></span>
            <span>{{ $t('components.receivingBank') }}</span>
          </view>
          <view class="upload">
            <uv-upload
                :fileList="skyhfileList"
                :maxCount="4"
                multiple
                width="150rpx"
                height="150rpx"
                @delete="(file) => deleteImage(2, file)"
                @afterRead="(file) => afterRead(2, file)"
                :previewFullImage="true"></uv-upload>
          </view>
        </view>

      </view>
    </view>

    <view class="bottom">
      <view class="btns">
        <span @click="applyReview" class="sqsh">
          {{ $t('components.submitReview') }}
        </span>
        <span @click="contactUs" class="lxwm">
          {{ $t('components.contactUs') }}
        </span>
      </view>
      <view class="others">
        <span @click="applyReview" class="zcxz">
          {{ $t('components.registrationNotice') }}
        </span>
        <span @click="contactUs" class="kjhtyl">
          {{ $t('other.frameworkContractPreview') }}
        </span>
      </view>
    </view>

  </view>
</template>


<script>
export default {
  // onLoad(option) {
  //   this.titleIndex = option.identity
  // },
  data() {
    return {
      // titleIndex: 0,
      // titleList: [
      //   //   采购商注册 供应商注册  国内清关申请
      //   this.$t('other.buyerRegistration'),
      //   this.$t('other.supplierRegistration'),
      //   this.$t('other.domesticCustomsClearanceApplication')
      // ],
      form: {
        "address": "",
        "bankAccount": "",
        "bankInfo": "",
        "bankNama": "",
        "basicAccount": "",
        "businessLicense": "",
        "companyName": "",
        "id": "",
        "password": "",
        "phone": "",
        "role": 0,
        "taxCode": "",
        "userName": ""
      },
      yyzzfileList: [],
      jbhxxfileList: [],
      skyhfileList: [],
    }
  },
  methods: {
    // 申请审核
    applyReview() {

      this.form.basicAccount =  this.jbhxxfileList.join(",")  //基本户信息照片上传
      this.form.bankInfo = this.skyhfileList.join(",")   //收款银行照片上传
      this.form.businessLicense =this.yyzzfileList.join(",")   //营业执照上传
      this.$api('addCustoms',this.form, res => {
        if (res.code == 200) {
          uni.redirectTo({
            url: '/pages/index/clearanceService'
          })
        }
      })
    },
    // 联系我们
    contactUs() {

    },


    // 上传图片
    afterRead(type, e) {
      let self = this

      e.file.forEach(file => {
        self.$Oss.ossUpload(file.url).then(url => {
          if (type == 0) {
            self.yyzzfileList.push({url})
          } else if (type == 1) {
            self.jbhxxfileList.push({url})
          } else if (type == 2) {
            self.skyhfileList.push({url})
          }
        })
      })
    },
    // 删除图片
    deleteImage(type, e) {
      console.log(e, type, "===========")
      if (type == 0) {
        this.yyzzfileList.splice(e.index, 1)
      } else if (type == 1) {
        this.jbhxxfileList.splice(e.index, 1)
      } else if (type == 2) {
        this.skyhfileList.splice(e.index, 1)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.registerShop {
  .frame {
    height: 79vh;
    overflow: auto;

    .basicInfo {
      display: flex;
      flex-direction: column;
      gap: 5rpx;
      background-color: #FFF;
      margin-top: 20rpx;
      padding: 20rpx;


      .item {
        display: flex;
        align-items: center;
        background-color: #FFF;
        height: 80rpx;
        // margin: 10rpx 0 0 0;
        padding: 10rpx 0 0 20rpx;

        > view:nth-of-type(1) {
          width: 30%;
          // font-weight: 700;
        }

        > view:nth-of-type(2) {
          width: 70%;
          border-radius: 10rpx;
          overflow: hidden;

          input {
            background-color: #f5f5f5;
            font-size: 28rpx;
            padding: 16rpx 8rpx 16rpx 15rpx;
          }
        }
      }


    }

    .certificateInfo {
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      background-color: #FFF;
      margin-top: 20rpx;
      padding: 20rpx;


      .certificateInfoItem {
        .title {
          display: flex;
          // padding-top: 40rpx;
          font-size: 30rpx;
          font-weight: 700;
          padding: 0 0 0 20rpx;

          > span:nth-of-type(1) {
            margin: 4rpx 0 0 8rpx;
            background-color: #FFF;
          }

          > span:nth-of-type(2) {
            margin: 0 0 0 8rpx;
            background-color: #FFF;
          }
        }

        .upload {
          margin: 5rpx 0 0 40rpx;
        }
      }


    }
  }

  .bottom {
    position: fixed;
    bottom: 10rpx;
    left: 0;
    right: 0;

    background-color: #FFF;

    .btns {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40rpx;

      .sqsh {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
        height: 70rpx;
        border-radius: 40rpx;
        color: white;
        font-size: 28rpx;
        margin: 20rpx 10rpx 0 0;
        background: #293143;
        //margin-top: 20rpx;
        border-radius: 40rpx;
      }

      .lxwm {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
        height: 70rpx;
        border-radius: 40rpx;
        color: #000000;
        font-size: 28rpx;
        margin: 20rpx 10rpx 0 0;
        background: #f2f2f2;
        //margin-top: 20rpx;
        border-radius: 40rpx;
      }

    }

    .others {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 200rpx;
      color: #707070;
      font-size: 24rpx;

      .zcxz {
        text-decoration: underline;
      }

      .kjhtyl {
        text-decoration: underline;
      }

    }
  }
}

</style>