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

<template>
  <view class="registerShop">

    <navbar :title="titleList[titleIndex]" leftClick @leftClick="$utils.navigateBack"/>

    <view class="frame">
      <!--基本信息-->
      <view class="basicInfo">

        <view class="item">
          <view>{{ $t('components.username')}}</view>
          <view>
            <input v-model="form.name" :placeholder="$t('components.enterUserName')" clearable></input>
          </view>
        </view>
        <view class="item">
          <view>{{ $t('components.password')}}</view>
          <view>
            <input v-model="form.userName" password clearable :placeholder="$t('components.enterYourPassword')" clearable></input>
          </view>
        </view>
        <view class="item">
          <view>{{ $t('other.companyName')}}</view>
          <view>
            <input v-model="form.phone" type="number" :placeholder="$t('other.enterCompanyName')" clearable></input>
          </view>
        </view>
        <view class="item">
          <view>{{ $t('other.taxCode')}}</view>
          <view>
            <input v-model="form.address" :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>
        <view class="item">
          <view>{{ $t('components.lxPhone')}}</view>
          <view>
            <input v-model="form.address" :placeholder="$t('components.plePhoneNumber')" clearable></input>
          </view>
        </view>
        <view class="item">
          <view>{{ $t('other.companyAccount')}}</view>
          <view>
            <input v-model="form.address" :placeholder="$t('other.enterCompanyAccount')" clearable></input>
          </view>
        </view>
        <view class="item">
          <view>{{ $t('components.bankName')}}</view>
          <view>
            <input v-model="form.address" :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: {
        userName: '',
        name: '',
        phone: '',
        currentRegion: '',
        address: '',
        latitude: '',
        longitude: '',
      },
      yyzzfileList: [],
      jbhxxfileList: [],
      skyhfileList: [],
    }
  },
  methods: {
    // 申请审核
    applyReview() {

    },
    // 联系我们
    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>