12 changed files with 571 additions and 605 deletions
@ -0,0 +1,140 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<uni-forms validate-trigger='blur' :modelValue="formData" ref="form"> |
||||
|
<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> |
||||
|
<button type="primary" @click="login(formData)">登录</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { |
||||
|
login |
||||
|
} from '@/api/index.js' |
||||
|
import md5 from "js-md5" |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
phoneFlag: false, |
||||
|
passwordFlag: false, |
||||
|
formData: { |
||||
|
phone: '', |
||||
|
password: '' |
||||
|
}, |
||||
|
|
||||
|
rules: { |
||||
|
password: { |
||||
|
rules: [{ |
||||
|
required: true, |
||||
|
errorMessage: '请输入密码' |
||||
|
}, { |
||||
|
minLength: 8, |
||||
|
errorMessage: '密码长度最短 {minLength} 个字符' |
||||
|
}, { |
||||
|
validateFunction: (value, data) => { |
||||
|
if (value.length < 6) { |
||||
|
this.passwordFlag = false |
||||
|
callback('密码长度最短8个字符') |
||||
|
}else{ |
||||
|
this.passwordFlag = true |
||||
|
return true |
||||
|
} |
||||
|
} |
||||
|
}] |
||||
|
}, |
||||
|
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: (data) => { |
||||
|
// 异步需要返回 Promise 对象 |
||||
|
return new Promise((resolve, reject) => { |
||||
|
if (data.length = 11) { |
||||
|
this.phoneFlag = true |
||||
|
resolve() |
||||
|
} else { |
||||
|
this.phoneFlag = false |
||||
|
reject(new Error('手机号长度应为11个字符')) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
//设置校验规则 |
||||
|
this.$refs.form.setRules(this.rules); |
||||
|
}, |
||||
|
methods: { |
||||
|
login(e) { |
||||
|
console.log(e) |
||||
|
let that = this |
||||
|
console.log('that.phoneFlag', that.phoneFlag) |
||||
|
console.log('that.passwordFlag', that.passwordFlag) |
||||
|
if (that.phoneFlag === true && that.passwordFlag === true) { |
||||
|
console.log('全部达成') |
||||
|
uni.showLoading({ |
||||
|
title: '艺术家登录中!', |
||||
|
duration: 3000, |
||||
|
success() { |
||||
|
let pwd = md5(that.formData.password) |
||||
|
const param = { |
||||
|
phone: that.formData.phone, |
||||
|
password: pwd |
||||
|
} |
||||
|
console.log('form', param) |
||||
|
login(param).then(response => { |
||||
|
if (response.data.code === 200) { |
||||
|
//登录成功，页面跳转到主页 |
||||
|
uni.redirectTo({ |
||||
|
url: '../index/index', |
||||
|
success() { |
||||
|
uni.showToast({ |
||||
|
title: '艺术家登录成功!', |
||||
|
icon: 'success', |
||||
|
duration: 1500 |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: response.data.msg, |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
fail: () => { |
||||
|
uni.hideLoading(); |
||||
|
uni.showToast("登录失败") |
||||
|
}, |
||||
|
complete: function() { |
||||
|
uni.hideLoading(); |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
console.log('尚未全部达成') |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,328 @@ |
|||||
|
<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 |
||||
|
} 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: 'http://bnyer.vaiwan.com/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('图片删除成功') |
||||
|
}, |
||||
|
// 上传成功 |
||||
|
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> |
||||
Loading…
Reference in new issue