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