yizhizan-h5/pages/my/businessLicense.vue

<template>
  <view class="switch-roles">
    <view class="roles-content">
      <view class="content">
        <view class="title">Hi，欢迎加入亿职赞</view>
        <view class="desc">填写企业信息，开启高效招聘方式</view>
        <view class="title-second">公司营业执照名称</view>
        <view class="input-box">
			<u-input
				placeholder="请输入您所属公司营业执照上的公司名称"
				v-model="companyName"
				clearable
				class="custom-input"
				maxlength="46"
				@input="handleInput"
			>
				<template #prefix>
					<u-icon name="phone" size="36rpx" color="#999" marginRight="20rpx"></u-icon>
	            </template>
			</u-input>
		 	<view class="word-count" style="margin-right: 20rpx; color: #999; font-size: 22rpx;">
		 		{{ currentLength }} / 46
		 	</view>
        </view>
		
		<view class="join-btn" @click="handleJoinCompany">加入已认证的公司</view>
		
        <view class="desc-txt">
          <view class="desc-txt-item">注意事项：</view>
          <view class="desc-txt-item">1.请输入您所述公司营业执照上的公司名称</view>
          <view class="desc-txt-item"
            >2.公司名称将用于后续企业认证环节，请确保准确性</view
          >
        </view>
        <image src="@/static/images/my/join-yzz.svg" mode="scaleToFill" />
      </view>
    </view>
	
	<view class="fixed-section">
		<u-button type="primary" class="submit-btn" @click="goPeopleNumber">下一步</u-button>
	</view>
  </view>
  
</template>
<script>
import navBar from "@/components/nav-bar/index.vue";
export default {
  data() {
    return {
		companyName: '', 
		currentLength: 0,
		loading: false,
	};
  },
  components: {
    navBar,
  },
  watch: {
      companyName: {
        immediate: true,
        handler(val) {
          this.currentLength = val.length;
        }
      }
    },
  methods: {
    goPeopleNumber(){
		console.log(this.companyName)
		
		if(this.companyName&& this.currentLength>6){
			// uni.navigateTo({ url: '/pages/my/peopleNumber?companyName='+this.companyName})
			this.createCompany()
		}else{
			uni.showToast({
				title: '请完整输入营业执照名称',
				icon :"none",
				duration: 2000
			});
		}
        
    },
	    // 处理输入事件，更新字数统计
	handleInput(value) {
	  this.currentLength = value.length;
	},
	
	// 创建公司
	createCompany() {
		if (this.loading) return
		this.loading = true
		
		uni.showLoading({
			title: '创建中'
		})
		this.$Request
			.postJson('/app/company/insertCompany', {
				companyAllName: this.companyName,
				companyPeople: '',
			})
			.then(res => {
				if (res.code === 0) {
					// 跳转至招聘岗位页面
					uni.navigateTo({
						url: `/pages/my/jobPosting?companyName=${this.companyName}&companyId=${res.data.companyId}&isBack=${false}&status=${res.data.status}`
					})
				} else {
					uni.showToast({
						title: res.msg || '提交失败，请重试',
						icon: 'none'
					})
				}
				uni.hideLoading()
				this.loading = false
			})
			.catch(() => {
				uni.hideLoading()
				this.loading = false
				uni.showToast({
					title: '网络异常，请稍后重试',
					icon: 'none'
				})
			})
	},
	
	// 加入公司
	handleJoinCompany() {
		uni.navigateTo({
			url: '/pages/my/joinCompany'
		})
	}
  },
};
</script>
<style lang="scss" scoped>
@import '@/common.scss';
	
.input-box{
    width: 100%;
    padding: 16rpx 0 32rpx 0;
    box-sizing: border-box;
	position: relative;
}
::v-deep .u-input {
  text-align: left !important;
}
::v-deep .u-input__suffix {
  /* 确保插槽区域不被压缩 */
  display: flex;
  align-items: center;
}
.custom-input {
    width: 100%;
  box-sizing: border-box;
  border: 2rpx solid rgba(158, 161, 168, 1);
  border-radius: 100rpx;
  background: rgba(255, 255, 255, 1);
  padding: 0rpx 24rpx !important;
}
/* 字数统计样式 */
.word-count {
  position: absolute;
  right: 0;
  color: #999;
  font-size: 22rpx;
  font-family: DM Sans;
  top: 30%;
}

::v-deep .u-input {
  text-align: left !important;
}
.custom-input {
  width: 100%;
  box-sizing: border-box;
  border: 2rpx solid rgba(158, 161, 168, 1);
  border-radius: 100rpx;
  background: rgba(255, 255, 255, 1);
  padding: 0rpx 24rpx !important;
  padding-right: 80rpx !important;  /* 右侧留空避免文字被字数统计覆盖 */
}
.switch-roles {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 60rpx;
  padding-top: 80rpx;
  display: flex;
  flex-direction: column;
  .roles-content {
    width: 100%;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    .content {
      padding-top: 60rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        width: 100%;
        color: rgba(29, 33, 41, 1);
        font-family: DM Sans;
        font-size: 36rpx;
        font-weight: 800;
        line-height: 44rpx;
        text-align: left;
      }
      .desc {
        width: 100%;
        color: rgba(102, 102, 102, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 32rpx;
        text-align: left;
        padding: 22rpx 0;
        box-sizing: border-box;
      }
      .title-second {
        width: 100%;
        color: #1f2c37;
        font-family: DM Sans;
        font-size: 30rpx;
        font-weight: 600;
        line-height: 44rpx;
        text-align: left;
      }
      .desc-txt {
        width: 100%;
        color: rgba(102, 102, 102, 1);
        font-family: DM Sans;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 32rpx;
        text-align: left;
        .desc-txt-item {
          margin-top: 8rpx;
        }
      }
      image {
        margin-top: 106rpx;
        width: 550rpx;
        height: 550rpx;
      }
    }
  }
  .next-btn {
    border-radius: 999px;
    background: rgba(255, 102, 0, 1);
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    color: rgba(255, 255, 255, 1);
    font-family: DM Sans;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.join-btn {
	width: 100%;
	color: rgba(1, 107, 246, 1);
	font-size: 32rpx;
	line-height: 1;
	margin-bottom: 32rpx;
}
</style>