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

<template>
	<view class="container">
		<uni-forms :modelValue="formData"
               validate-trigger='blur'
               label-position="top"
               label-width="335"
               ref="form">
			<uni-forms-item label="昵称" required name="name">
				<uni-easyinput v-model="formData.name" placeholder="请输入昵称"
                       :clearable="false"
                       :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="手机号" required name="phone">
				<uni-easyinput v-model="formData.phone" placeholder="请输入手机号"
                       :clearable="false"
                       :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="密码" required name="password">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码"
                       :clearable="false"
                       :inputBorder="false"/>
			</uni-forms-item>
			<uni-forms-item label="搜索码" required name="scanCode">
				<uni-easyinput v-model="formData.scanCode" placeholder="请输入搜索码"
                       :clearable="false"
                       :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="邀请码" required name="inviteCode">
				<uni-easyinput v-model="formData.inviteCode" placeholder="请输入邀请码"
                       :disabled="true"
                       :clearable="false"
                       :inputBorder="false" />
			</uni-forms-item>
			<uni-forms-item label="简介" name="intro">
				<uni-easyinput v-model="formData.intro" placeholder="请输入简介"
                       type="textarea"
                       :clearable="false"
                       :inputBorder="false"/>
			</uni-forms-item>
			<uni-forms-item label="第三方平台账号详情地址" required name="url">
				<uni-easyinput v-model="formData.url" placeholder="请输入第三方平台账号详情地址"
                       :clearable="false"
                       :inputBorder="false" />
			</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="selectImage" @delete="deleteImg">
				</uni-file-picker>
			</uni-forms-item>
		</uni-forms>
		<button class="confirmBtn" size="default" @click="$noMultipleClicks(submit)">注册</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: ''
				},
        fileList: [],
        noClick:true, //防止重复提交
				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: '请选择一张头像图片上传'
						}
            ]
					}
				}
			}
		},
    onLoad(option) {
		  if (option.inviteCode) {
        this.formData.inviteCode = option.inviteCode;
      }
    },
		mounted(){
			//设置校验规则
			this.$refs.form.setRules(this.rules);
		},
		methods: {
		  selectImage(e) {
        if (!e.tempFiles) {
          return;
        }
        let that = this;
        that.fileList = [...that.fileList, ...e.tempFilePaths];
        that.formData.img = e.tempFilePaths[0];
      },
			//图片上传
			uploadImg: async function (e) {
				// console.log('选择了文件', e)
        let that = this;
        uni.showLoading({
          title: "上传中"
        });
        const tempFilePaths = e;
        for (var i = 0; i < tempFilePaths.length; i++) {
          const [error, res] = await uni.uploadFile({
            url: `${that.$baseURL}${that.$uploadURL}`,
            filePath: tempFilePaths[i],
            name: `${that.$uploadType}`,
            header:{
              "Content-Type": "multipart/form-data"
            },
          })
          const back = JSON.parse(res.data);
          if (back.code == 200) {
            that.formData.img = back.data;
          }
        }
        uni.hideLoading()
        that.register();
			},

			//删除图片
			deleteImg(e) {
			  let that = this
        that.fileList = [];
			  that.formData.img = ''
				// 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)
			},
      submit() {
        let that = this;
        that.$refs.form.validate([], (err, formData) => {
          if (!err) {
            that.uploadImg(that.fileList)
          } else  {
            uni.showToast({
              title: '注册验证尚未全部通过,请更正后提交!',
              icon: 'none',
              duration: 3000
            })
          }
        })
      },
			//注册
			register(e) {
				let that = this
        uni.showLoading({
          title: '艺术家注册中!',
        });
        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.hideLoading()
            uni.showToast({
              title: response.data.msg,
              icon: 'none'
            })
          }
        }).catch(error => {
          uni.hideLoading()
          uni.showToast({
            title: error,
            icon: 'none'
          })
        })

				// 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('全部达成')

				}else{
					// console.log('尚未全部达成')
					uni.showToast({
						title: '注册验证尚未全部通过,请更正后提交!',
						icon: 'none',
						duration: 3000
					})
				}*/
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
  width: 670rpx;
  margin: 0 auto;
  padding-bottom: 60rpx;


  ::v-deep .uni-forms-item__label {
    color: $uni-white;
  }

  ::v-deep input {
    background: $uni-bg-base-color !important;
    color: $uni-white !important;
    border-radius: 10rpx;
  }
  ::v-deep .uni-easyinput__content {
    background: $uni-bg-base-color !important;
    border-radius: 10rpx;
  }
  ::v-deep textarea {
    background: $uni-bg-base-color !important;
    color: $uni-white !important;
    border-radius: 10rpx;
  }

  ::v-deep .file-title {
    color: $uni-secondary-color !important;
  }

  .confirmBtn{
    color: $uni-btn-text-color;
  }

}
</style>