245 lines
7.1 KiB
Vue
245 lines
7.1 KiB
Vue
<template>
|
|
<view class="my-info-box">
|
|
<navigation-bar-vue title="个人信息" style="width: 100%;" background-color="#ffffff"
|
|
title-color="#000000"></navigation-bar-vue>
|
|
<view class="form-data-box">
|
|
<!-- 基础表单校验 -->
|
|
<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
|
|
<uni-forms-item labelWidth="280rpx" label="头像" name="avatar">
|
|
<uni-file-picker small="true" :value="fileList" :sizeType="sizeType" @select="afterRead"
|
|
@delete="deleteFile" limit="1"></uni-file-picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item labelWidth="280rpx" label="昵称" required name="nickName">
|
|
<uni-easyinput v-model="valiFormData.nickName" placeholder="请输入" />
|
|
</uni-forms-item>
|
|
<uni-forms-item labelWidth="280rpx" label="联系方式" required name="phonenumber">
|
|
<uni-easyinput v-model="valiFormData.phonenumber" placeholder="请输入" />
|
|
</uni-forms-item>
|
|
<uni-forms-item labelWidth="280rpx" label="绑定手机号" required name="userName">
|
|
<uni-easyinput disabled v-model="valiFormData.userName" />
|
|
</uni-forms-item>
|
|
<uni-forms-item labelWidth="280rpx" label="收款码" name="trecipientImage">
|
|
<uni-file-picker small="true" :value="recipientImageList" :sizeType="sizeType"
|
|
@select="afterReadRecipient" @delete="deleteFileRecipient" limit="1"></uni-file-picker>
|
|
</uni-forms-item>
|
|
<uni-forms-item labelWidth="280rpx" label="收款码真实姓名" name="trecipientName">
|
|
<uni-easyinput v-model="valiFormData.trecipientName" placeholder="请输入" />
|
|
</uni-forms-item>
|
|
<uni-forms-item labelWidth="280rpx" label="通告报名免打扰" name="topenDisturb">
|
|
<uni-data-checkbox v-model="valiFormData.topenDisturb" :localdata="ranges" />
|
|
</uni-forms-item>
|
|
</uni-forms>
|
|
<button type="primary" style="background-color: #FC2B49;" @click="submit('valiForm')">提交</button>
|
|
<view class="my-black-list" @click="goMyBlackList()">我的黑名单<uni-icons type="right" color="#623109"
|
|
size="12"></uni-icons></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
|
import config from '@/config'
|
|
import {
|
|
queryDetail,uniSaveMember
|
|
} from '@/api/business/member.js'
|
|
import upload from '@/utils/upload'
|
|
export default {
|
|
components: {
|
|
navigationBarVue
|
|
},
|
|
data() {
|
|
return {
|
|
userType:'',
|
|
sizeType: ['compressed'],
|
|
//头像数组
|
|
fileList: [],
|
|
fileImageUrl:[],
|
|
//收款码数组
|
|
recipientImageList: [],
|
|
recipientImageUrl: [],
|
|
ranges: [{
|
|
text: '开启',
|
|
value: "1"
|
|
}, {
|
|
text: '关闭',
|
|
value: "0"
|
|
}],
|
|
// 校验表单数据
|
|
valiFormData: {
|
|
avatar: "",
|
|
nickName: "",
|
|
phonenumber: "",
|
|
userName: "",
|
|
trecipientImage: "",
|
|
trecipientName: "",
|
|
topenDisturb: "0"
|
|
},
|
|
// 校验规则
|
|
rules: {
|
|
// avatar: {
|
|
// rules: [{
|
|
// required: true,
|
|
// errorMessage: '头像不能为空'
|
|
// }]
|
|
// },
|
|
nickName: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '昵称不能为空'
|
|
}]
|
|
},
|
|
phonenumber: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '联系方式不能为空'
|
|
}]
|
|
},
|
|
// trecipientImage: {
|
|
// rules: [{
|
|
// required: true,
|
|
// errorMessage: '收款码不能为空'
|
|
// }]
|
|
// },
|
|
// trecipientName: {
|
|
// rules: [{
|
|
// required: true,
|
|
// errorMessage: '收款码真实姓名不能为空'
|
|
// }]
|
|
// },
|
|
},
|
|
}
|
|
},
|
|
onLoad(options){
|
|
this.userType = options.userType
|
|
this.userId = options.userId
|
|
this.initData(options.userType,options.userId)
|
|
},
|
|
methods: {
|
|
goMyBlackList() {
|
|
this.$tab.navigateTo('/pages/mine/set/black-list?userId='+this.userId)
|
|
},
|
|
submit(ref) {
|
|
this.valiFormData.avatar = this.fileImageUrl.join(',');
|
|
this.valiFormData.trecipientImage = this.recipientImageUrl.join(',');
|
|
let that = this
|
|
this.$refs[ref].validate().then(res => {
|
|
uniSaveMember(that.valiFormData).then(res => {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
duration: 2000,
|
|
title: '保存成功'
|
|
});
|
|
uni.navigateBack()
|
|
})
|
|
}).catch(err => {
|
|
console.log('err', err);
|
|
})
|
|
},
|
|
|
|
/**初始化数据*/
|
|
initData(userType,userId){
|
|
this.fileList = []
|
|
this.fileImageUrl = []
|
|
this.recipientImageList = []
|
|
this.recipientImageUrl = []
|
|
queryDetail({userType:userType,userId:userId}).then(res=>{
|
|
console.log(res,131)
|
|
this.valiFormData = res.data
|
|
if (this.valiFormData.avatar != null && this.valiFormData.avatar != ''){
|
|
this.fileImageUrl = this.valiFormData.avatar.split(',')
|
|
this.fileImageUrl.map((item)=>{
|
|
this.fileList.push({
|
|
url:config.baseUrl + item
|
|
})
|
|
})
|
|
}
|
|
if (this.valiFormData.trecipientImage != null && this.valiFormData.trecipientImage != ''){
|
|
this.recipientImageUrl = this.valiFormData.trecipientImage.split(',')
|
|
this.recipientImageUrl.map((item)=>{
|
|
this.recipientImageList.push({
|
|
url:config.baseUrl + item
|
|
})
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
afterRead(file) {
|
|
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
|
upload({
|
|
url: '',
|
|
filePath: file.tempFilePaths[i]
|
|
}).then((res) => {
|
|
console.log(res, '215')
|
|
this.fileList.push({
|
|
url: res.url
|
|
})
|
|
this.fileImageUrl.push(res.fileName)
|
|
console.log(this.fileList, 'fileList')
|
|
})
|
|
}
|
|
},
|
|
deleteFile(file, index) {
|
|
console.log('删除文件');
|
|
this.fileList.splice(index, 1);
|
|
this.fileImageUrl.splice(index, 1);
|
|
},
|
|
afterReadRecipient(file) {
|
|
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
|
upload({
|
|
url: '',
|
|
filePath: file.tempFilePaths[i]
|
|
}).then((res) => {
|
|
console.log(res, '215')
|
|
this.recipientImageList.push({
|
|
url: res.url
|
|
})
|
|
this.recipientImageUrl.push(res.fileName)
|
|
})
|
|
}
|
|
},
|
|
deleteFileRecipient(file, index) {
|
|
console.log('删除文件');
|
|
this.recipientImageList.splice(index, 1);
|
|
this.recipientImageUrl.splice(index, 1);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.my-info-box {
|
|
padding-top: calc(90rpx + var(--status-bar-height));
|
|
border-top: 1rpx solid #F4F4F4;
|
|
background-color: white;
|
|
width: 100%;
|
|
color: #363636;
|
|
font-size: 30rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.form-data-box {
|
|
border-top: 1rpx solid #F4F4F4;
|
|
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
padding: 20rpx 30rpx;
|
|
background-color: white;
|
|
|
|
.my-black-list {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 26rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |