bnyer-cloud-hub/pages/register/register.vue

<template>
	<view>
		<uni-forms :modelValue="formData" validate-trigger='blur' ref="form">
			<uni-forms-item label="昵称" required name="name">
				<uni-easyinput v-model="formData.name" placeholder="请输入昵称" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required name="phone">
				<uni-easyinput v-model="formData.phone" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="搜索码" required name="scanCode">
				<uni-easyinput v-model="formData.scanCode" placeholder="请输入搜索码" />
			</uni-forms-item>
			<uni-forms-item label="邀请码" required name="inviteCode">
				<uni-easyinput v-model="formData.inviteCode" placeholder="请输入邀请码" />
			</uni-forms-item>
			<uni-forms-item label="简介" name="intro">
				<uni-easyinput v-model="formData.intro" placeholder="请输入简介" /> 
			</uni-forms-item>
			<uni-forms-item label="第三方平台账号详情地址" required name="url">
				<uni-easyinput v-model="formData.url" placeholder="请输入第三方平台账号详情地址" />
			</uni-forms-item>
			<uni-forms-item label="头像" required name="img">
				<uni-file-picker limit="1" file-mediatype="image" title="选择一张头像图片上传吧!" file-extname="png,jpg,jpeg"
					@success="imgUploadSuccess" @fail="imgUploadFail" @select="uploadImg" @delete="deleteImg">
				</uni-file-picker>
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="register(formData)">注册</button>
	</view>
</template>

<script>
	import {
		insertCreator,
		checkPhone,
		checkScanCode,
		checkInviteCode
	} from '@/api/userInfo.js'
	import {
		uploadBatch,
		uploadBanner,
		deleteFile
	} from '@/api/common.js'
	import md5 from "js-md5"
	export default {
		data() {
			return {
				phoneFlag: false,
				scanCodeFlag: false,
				inviteCodeFlag: false,
				formData: {
					name: '',
					phone: '',
					password: '',
					scanCode: '',
					inviteCode: '',
					intro: '',
					url: '',
					img: ''
				},

				rules: {
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入昵称'
							},
							{
								minLength: 1,
								maxLength: 8,
								errorMessage: '昵称长度应在 {minLength} 到 {maxLength} 个字符'
							}
						],
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}, {
							minLength: 8,
							errorMessage: '密码长度最短 {minLength} 个字符'
						}]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号'
							},
							{
								pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
								errorMessage: '请输入正确的手机号'
							},
							{
								validateFunction: () => {
									return new Promise((resolve, reject) => {
										const params = {
											phone: this.formData.phone
										}
										checkPhone(params).then(res => {
											if (res.data.code === 105001) {
												// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
												this.phoneFlag = false;
												reject(new Error(res.data.msg))
											} else {
												// 如果校验通过，也要执行callback()回调
												this.phoneFlag = true;
												resolve()
											}
										})
									})
								},
							}
						],
					},
					scanCode: {
						rules: [{
								required: true,
								errorMessage: '请输入搜索码'
							},
							{
								minLength: 1,
								maxLength: 6,
								errorMessage: '搜索码长度应在 {minLength} 到 {maxLength} 个字符'
							},
							{
								validateFunction: () => {
									return new Promise((resolve, reject) => {
										const params = {
											scanCode: this.formData.scanCode
										}
										checkScanCode(params).then(res => {
											console.log('请求scanCode')
											if (res.data.code === 105003) {
												// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
												this.scanCodeFlag = false;
												reject(new Error(res.data.msg))
											} else {
												// 如果校验通过，也要执行callback()回调
												this.scanCodeFlag = true;
												resolve()
											}
										})
									})
								},
							}
						],
					},
					inviteCode: {
						rules: [{
							required: true,
							errorMessage: '请输入邀请码'
						}, {
							minLength: 6,
							errorMessage: '邀请码长度最短 {minLength} 个字符'
						}, {
							validateFunction: () => {
								return new Promise((resolve, reject) => {
									const params = {
										inviteCode: this.formData.inviteCode
									}
									checkInviteCode(params).then(res => {
										console.log('请求inviteCode')
										if (res.data.code === 105002) {
											// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
											this.inviteCodeFlag = false;
											reject(new Error(res.data.msg))
										} else {
											// 如果校验通过，也要执行callback()回调
											this.inviteCodeFlag = true;
											resolve()
										}
									})
								})
							},
						}]
					},
					url: {
						rules: [{
							required: true,
							errorMessage: '请输入第三方平台账号详情地址'
						}, {
							format: 'url',
							errorMessage: '请输入以"https://"格式开头格式第三方平台账号详情地址'
						}]
					},
					img: {
						rules: [{
							required: true,
							errorMessage: '请选择一张头像图片上传'
						}]
					}
				}
			}
		},
		mounted(){
			//设置校验规则
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			//图片上传
			uploadImg(e) {
				console.log('选择了文件', e)
				let that = this
				uni.showLoading({
					title: "上传中",
					success() {
						const tempFilePaths = e.tempFilePaths;
						for (var i = 0; i < tempFilePaths.length; i++) {
							const tempFile = e.tempFiles[i];
							uni.uploadFile({
								url: `${Vue.prototype.$baseURL}/file/uploadBatch`, 
								filePath: tempFilePaths[i],
								name: 'files',
								success: (uploadFileRes) => {
									uni.hideLoading();
									const result = JSON.parse(uploadFileRes.data);
									console.log('result', result)
									if (result.code === 200) {
										that.$set(result.data, "url", tempFile.url)
										that.formData.img = result.data[0]
										console.log('that.formDataInner',that.formData)
										uni.showToast({
											title: '上传成功',
											icon: 'success',
											duration: 1500
										})
									}
								},
								fail: () => {
									uni.hideLoading();
									uni.showToast("上传失败")
								},
								complete: function() {
									uni.hideLoading();
								}
							});
						}
					}
				});
			},

			//删除图片
			deleteImg(e) {
				console.log('e',this.formData.img)
				const param = {
					url : this.formData.img
				}
				deleteFile(param).then(response =>{
					console.log('response',response)
					if(response.data.code === 200){
						uni.showToast({
							title: '图片删除成功',
							icon: 'success',
							duration: 1500
						})
					}else{
						uni.showToast({
							title: '删除失败',
							icon: 'fail',
							duration: 1500
						})
					}
				});
				console.log('图片删除成功')
			},
			// 上传成功
			imgUploadSuccess(e) {
				console.log('上传成功')
			},

			// 上传失败
			imgUploadFail(e) {
				console.log('上传失败：', e)
			},

			//注册
			register(e) {
				console.log(e)
				let that = this
				console.log('that.phoneFlag',that.phoneFlag)
				console.log('that.scanCodeFlag',that.scanCodeFlag)
				console.log('that.inviteCodeFlag',that.inviteCodeFlag)
				if(that.phoneFlag === true && that.scanCodeFlag === true && that.inviteCodeFlag === true){ 
					console.log('全部达成')
					uni.showLoading({
						title: '艺术家注册中!',
						duration: 3000,
						success() {
							let pwd = md5(that.formData.password)
							const param = {
								name: that.formData.name,
								scanCode: that.formData.scanCode,
								phone: that.formData.phone,
								password: pwd,
								img: that.formData.img,
								intro: that.formData.intro,
								inviteCode: that.formData.inviteCode,
								url: that.formData.url
							}
							console.log('form', param)
							insertCreator(param).then(response => {
								if (response.data.code === 200) {
									//注册成功，页面跳转到登录页
									uni.redirectTo({
										url: '../login/login',
										success() {
											uni.showToast({
												title: '艺术家注册成功!请耐心等待审核或联系客服',
												icon: 'none',
												duration: 4000
											})
										}
									});
								} else {
									uni.showToast({
										title: response.data.msg,
										icon: 'none'
									})
								}
							})
						},
						fail: () => {
							uni.hideLoading();
							uni.showToast("注册失败")
						},
						complete: function() {
							uni.hideLoading();
						}
					})
				}else{
					console.log('尚未全部达成')
					uni.showToast({
						title: '注册验证尚未全部通过,请更正后提交!',
						icon: 'none',
						duration: 3000
					})
				}
				
			}
		}
	}
</script>

<style>

</style>