1.处理一下表单验证

这一块主要看Uniapp文档 正则表达式给AI写就完了

2.发送验证码 实际上要从服务器获取验证码 并且设置点击发送验证码之后显示60秒倒计时

const getCode = async () => {
	try {
		// 先验证手机号
		await formRef.value.validateField('phone')
		// 这里应该调用API发送验证码
		// await sendSmsApi(formData.phone)
		uni.showToast({
			title: '验证码已发送',
			icon: 'none'
		})
		// 开始倒计时
		isCounting.value = true
		const timer = setInterval(() => {
			countdown.value--
			countdownText.value = `${countdown.value}秒后重试`

			if (countdown.value <= 0) {
				clearInterval(timer)
				isCounting.value = false
				countdown.value = 60
				countdownText.value = '获取验证码'
			}
		}, 1000)
	} catch (e) {
		console.error(e)
	}
}

3.实现图片上传Logo, 营业执照 uni.chooseImage

const chooseLogo = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			// 实际项目中这里应该上传到服务器
			formData.value.logo = res.tempFilePaths[0]
		},
		fail: (err) => {
			console.error('选择LOGO失败:', err)
			uni.showToast({
				title: '选择图片失败',
				icon: 'none'
			})
		}
	})
}

4.使用Pinia管理登录状态和公司验证状态

需要在多处导入仓库并实例化使用 很烦 想全局使用 但是官方推荐按需导入 听官方的吧

5.实现边框渐变色 使用伪类元素和mask遮罩层

CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 mask – CSS：层叠样式表 | MDN

.item_status::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 2rpx solid transparent;
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(148, 56, 252, 1), rgba(105, 136, 250, 1)) border-box;
	-webkit-mask: linear-gradient(#fff, #fff) padding-box, linear-gradient(#fff, #fff);
	-webkit-mask-composite: xor;
}

关键点1 border-box 背景色设置渐变带边框

background: linear-gradient(90deg, rgba(148, 56, 252, 1), rgba(105, 136, 250, 1)) border-box;

关键点2 设置两个不同mask 一个是全部mask 一个是内容部分(不带边框)mask

-webkit-mask: linear-gradient(#fff, #fff) padding-box, linear-gradient(#fff, #fff);

关键点3 mask异或操作 只保留边框部分渐变

-webkit-mask-composite: xor;

为了微信小程序中的兼容性 建议给每个属性前面加上 ‘-webkit-‘

5.把uni-data-select组件代码部分复制到自己的components中了 准备尝试二次封装

6.删除文件需要管理员权限? 直接Shift + Delete 即可