You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
430 lines
12 KiB
430 lines
12 KiB
<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="false"
|
|
: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} 个字符'
|
|
},
|
|
{
|
|
validateFunction: () =>{
|
|
return new Promise((resolve, reject) => {
|
|
if (/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/.test(this.formData.name)){
|
|
reject(new Error('请输入中文,英文,数字等非特殊字符组成的名称'));
|
|
}else{
|
|
resolve();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
],
|
|
},
|
|
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: 5,
|
|
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;
|
|
console.log('that',that)
|
|
that.$refs.form.validate([], (err, formData) => {
|
|
if (!err) {
|
|
console.log('that.fileList',that.fileList)
|
|
console.log('err',err)
|
|
console.log('formData',formData)
|
|
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>
|
|
|