bnyer
/
bnyer-cloud-hub
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

邀请注册页面样式， 上传图片接口路径统一配置

feature-1.0
helming 3 years ago
parent
449f63356d
commit
b20d3aa89a
4 changed files with 180 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      main.js
  2. 2
      pages-userInfo/extends/extends.vue
  3. 4
      pages/index/upload/upload.vue
  4. 288
      pages/register/register.vue

2
main.js
View File

@ -10,6 +10,8 @@ const baseURL = 'http://localhost:7010'
Vue.prototype.$baseURL = baseURL;
Vue.prototype.$uploadURL = "/file/upload"; // ”/file/uploadBatch“
Vue.prototype.$uploadType = "file"; // files
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;
// #ifndef VUE3

2
pages-userInfo/extends/extends.vue
View File

@ -85,7 +85,7 @@
}
return {
title: '邀请更多',
path: '/pages/register/register',
path: `/pages/register/register?inviteCode=${this.userInfo.inviteCode}`,
}
},
methods:{

4
pages/index/upload/upload.vue
View File

@ -231,8 +231,8 @@
for (var i = 0; i < tempFilePaths.length; i++) {
//const tempFile = e.tempFiles[i];
const [error, res] = await uni.uploadFile({
url: 'http://8tiis2.natappfree.cc/file/upload',
name: 'file',
url: `${that.$baseURL}${that.$uploadURL}`,
name: `${that.$uploadType}`,
// url: 'http://pc2zer.natappfree.cc/file/uploadBatch',
// name: 'files',
header:{

288
pages/register/register.vue
View File

@ -1,34 +1,54 @@
<template>
<view>
<uni-forms :modelValue="formData" validate-trigger='blur' ref="form">
<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="请输入昵称" />
<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="请输入手机号" />
<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="请输入密码" />
<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="请输入搜索码" />
<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="请输入邀请码" />
<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="请输入简介" />
<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="请输入第三方平台账号详情地址" />
<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="uploadImg" @delete="deleteImg">
@success="imgUploadSuccess" @fail="imgUploadFail" @select="selectImage" @delete="deleteImg">
</uni-file-picker>
</uni-forms-item>
</uni-forms>
<button type="primary" @click="register(formData)">注册</button>
<button class="confirmBtn" size="default" @click="$noMultipleClicks(submit)">注册</button>
</view>
</template>
@ -61,7 +81,8 @@
url: '',
img: ''
},
fileList: [],
noClick:true, //防止重复提交
rules: {
name: {
rules: [{
@ -132,7 +153,7 @@
scanCode: this.formData.scanCode
}
checkScanCode(params).then(res => {
console.log('请求scanCode')
// console.log('请求scanCode')
if (res.data.code === 105003) {
// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
this.scanCodeFlag = false;
@ -162,7 +183,7 @@
inviteCode: this.formData.inviteCode
}
checkInviteCode(params).then(res => {
console.log('请求inviteCode')
// console.log('请求inviteCode')
if (res.data.code === 105002) {
// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
this.inviteCodeFlag = false;
@ -190,66 +211,67 @@
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(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();
}
});
}
}
});
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) {
console.log('e',this.formData.img)
const param = {
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)
// console.log('response',response)
if(response.data.code === 200){
uni.showToast({
title: '图片删除成功',
@ -264,7 +286,7 @@
})
}
});
console.log('图片删除成功')
console.log('图片删除成功')*/
},
// 上传成功
imgUploadSuccess(e) {
@ -275,75 +297,115 @@
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) {
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();
}
})
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()
}
}).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('尚未全部达成')
// console.log('尚未全部达成')
uni.showToast({
title: '注册验证尚未全部通过,请更正后提交!',
icon: 'none',
duration: 3000
})
}
}*/
}
}
}
</script>
<style>
<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>

Write Preview
Loading…
Cancel
Save