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.
391 lines
9.2 KiB
391 lines
9.2 KiB
<template>
|
|
<view class="page">
|
|
|
|
<!-- 基础表单校验 -->
|
|
<uni-forms ref="valiForm" :modelValue="valiFormData" label-position="left">
|
|
<view class="example">
|
|
|
|
<uni-forms-item label="头像" labelWidth="180rpx" required name="avatar">
|
|
<view class="avatar">
|
|
<view style="display: flex;flex:1"></view>
|
|
<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
|
|
file-mediatype="image" :value="avatars" @select="upload">
|
|
<image style="width: 40rpx; height: 40rpx;" src="/static/icon/head.png"></image>
|
|
</uni-file-picker>
|
|
<uni-icons custom-prefix="iconfont" type="right" size="16" color="#777777"></uni-icons>
|
|
</view>
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="昵称" labelWidth="180rpx" required name="nickName">
|
|
<uni-easyinput v-model="valiFormData.nickName" maxlength="10" placeholder="请输入" :inputBorder="false"
|
|
placeholderStyle="color: #999;font-size:32rpx"
|
|
style="borderColor:#FFF;color:#0E1521;font-size:32rpx" />
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="性别" labelWidth="180rpx" required name="sex">
|
|
<uni-data-checkbox v-model="valiFormData.sex" :localdata="sexs" style="margin-top: 10rpx;" />
|
|
</uni-forms-item>
|
|
<uni-forms-item label="个性签名" labelWidth="180rpx" required name="signature">
|
|
<uni-easyinput v-model="valiFormData.signature" maxlength="10" placeholder="请输入" :inputBorder="false"
|
|
placeholderStyle="color: #999;font-size:32rpx" style="borderColor:#FFF;color:#0E1521;font-size:32rpx" />
|
|
</uni-forms-item>
|
|
|
|
</view>
|
|
</uni-forms>
|
|
|
|
<view class="submitcon">
|
|
<button type="primary" class="bbtn" @click="submit('valiForm')">保存</button>
|
|
</view>
|
|
|
|
<!-- 提示信息弹窗 -->
|
|
<uni-popup ref="message" type="message">
|
|
<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myCache } from '@/utils/utils.js';
|
|
export default {
|
|
data() {
|
|
return {
|
|
openId:"",
|
|
phone:"",
|
|
userid:"",
|
|
imageStyles: {
|
|
width: 40,
|
|
height: 40,
|
|
border: false
|
|
},
|
|
listStyles: {
|
|
border: false
|
|
},
|
|
id: '',
|
|
avatars: [],
|
|
messageText: '', //错误提示框
|
|
msgType: 'error',
|
|
sexs: [
|
|
{
|
|
text: '未知',
|
|
value: 0
|
|
},
|
|
{
|
|
text: '男',
|
|
value: 2
|
|
}, {
|
|
text: '女',
|
|
value: 1
|
|
}],
|
|
// 校验表单数据
|
|
valiFormData: {
|
|
id: 1,
|
|
nickName: "",
|
|
avatar: "",
|
|
sex: "",
|
|
signature: '',
|
|
},
|
|
// 校验规则
|
|
rules: {
|
|
nickName: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '昵称不能为空'
|
|
}]
|
|
},
|
|
sex: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '性别不能为空'
|
|
}]
|
|
},
|
|
signature: {
|
|
rules: [{
|
|
required: true,
|
|
errorMessage: '个性签名不能为空'
|
|
}]
|
|
}
|
|
},
|
|
}
|
|
},
|
|
onReady() {
|
|
// 需要在onReady中设置规则
|
|
this.$refs.valiForm.setRules(this.rules);
|
|
},
|
|
onLoad(options) {
|
|
// 获取用户信息
|
|
this.getmember();
|
|
},
|
|
onShow() {
|
|
this.iflogin();
|
|
},
|
|
methods: {
|
|
iflogin(){
|
|
this.openId = myCache('openId');
|
|
var user = myCache('user');
|
|
this.userid = user.userid? user.userid:'';
|
|
this.phone = user.userphone;
|
|
if(this.userid==""||this.userid=="0"||this.phone==""){
|
|
uni.navigateTo({
|
|
url: `/pages/login/login`
|
|
});
|
|
return false;
|
|
}
|
|
else{
|
|
return true;
|
|
}
|
|
},
|
|
upload(e) {
|
|
var that = this;
|
|
const tempFilePaths = e.tempFilePaths; //e是获取的图片源
|
|
console.log(tempFilePaths)
|
|
uni.showLoading({
|
|
title: '头像上传中...'
|
|
});
|
|
tempFilePaths.forEach(item => {
|
|
console.log(item)
|
|
this.upimg(item)
|
|
});
|
|
},
|
|
// 先上传图片
|
|
upimg(tempFilePaths) {
|
|
var that = this;
|
|
var token = uni.getStorageSync("token");
|
|
try{
|
|
uni.uploadFile({
|
|
url: 'https://www.sanduolantoyoga.com/yoga/api/my/avatarUpload', //上传图片的后端接口
|
|
filePath: tempFilePaths,
|
|
name: 'file',
|
|
header: {
|
|
// 'content-type': 'multipart/form-data',
|
|
'Authorization': token
|
|
},
|
|
success: res => {
|
|
uni.hideLoading();
|
|
myCache("ifuserEdit", true);
|
|
var data = JSON.parse(res.data);
|
|
if (data.success) {
|
|
uni.showToast({
|
|
title: "头像上传成功！",
|
|
icon: 'success'
|
|
});
|
|
that.valiFormData.avatar = data.data;
|
|
that.avatars = [];
|
|
var img = {
|
|
url: data.data,
|
|
imgurl: data.data
|
|
}
|
|
that.avatars.push(img);
|
|
} else {
|
|
uni.showToast({
|
|
title: "头像上传失败！" + data.msg,
|
|
icon: 'error'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
catch(e){
|
|
console.log(e)
|
|
}
|
|
},
|
|
// 获取用户基本编辑信息
|
|
async getmember() {
|
|
const { data: res } = await uni.$http.get("/api/my/myInformation");
|
|
if (res.data) {
|
|
myCache('member', res.data);
|
|
this.valiFormData.id = res.data.id ? res.data.id : '';
|
|
this.valiFormData.nickName = res.data.nickName ? res.data.nickName : '';
|
|
this.valiFormData.avatar = res.data.avatar ? res.data.avatar : '';
|
|
this.valiFormData.sex = res.data.sex ? res.data.sex : '';
|
|
this.valiFormData.signature = res.data.signature ? res.data.signature : '';
|
|
if (this.valiFormData.avatar) {
|
|
this.avatars.push({
|
|
imgurl: this.valiFormData.avatar,
|
|
url: this.valiFormData.avatar
|
|
})
|
|
}
|
|
this.$forceUpdate();
|
|
}
|
|
},
|
|
submit(ref) {
|
|
var that = this;
|
|
this.$refs[ref].validate().then(res => {
|
|
that.savedo();
|
|
}).catch(err => {
|
|
console.log('err', err);
|
|
});
|
|
},
|
|
async savedo() {
|
|
var that = this;
|
|
try {
|
|
uni.showLoading({
|
|
title: '信息保存中....'
|
|
});
|
|
const { data: res } = await uni.$http.post("/api/my/modifyMyInformation", that.valiFormData);
|
|
if (res.success) {
|
|
this.msgType = 'success';
|
|
this.messageText = `提交成功！`;
|
|
this.$refs.message.open();
|
|
myCache("ifuserEdit", true);
|
|
setTimeout(() => {
|
|
// 返回 关闭当前页面
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}, 2000);
|
|
} else {
|
|
this.msgType = 'error';
|
|
this.messageText = res.msg ? res.msg : '提交失败！';
|
|
this.$refs.message.open();
|
|
}
|
|
} catch (res) {
|
|
this.msgType = 'error';
|
|
this.messageText = res.msg ? res.msg : '提交失败！';
|
|
this.$refs.message.open();
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .uni-icon-wrapper {
|
|
padding: 0 0 0 8rpx !important;
|
|
}
|
|
|
|
::v-deep .uni-forms-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-items: flex-start;
|
|
justify-content: center;
|
|
border-radius: 0 !important;
|
|
border-bottom: 2rpx solid #eeeeee !important;
|
|
padding-bottom: 10rpx !important;
|
|
margin-top: 20rpx !important;
|
|
margin-bottom: 20rpx !important;
|
|
}
|
|
|
|
::v-deep .uni-forms-item__label {
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #0E1521;
|
|
}
|
|
|
|
::v-deep .uni-data-checklist .checklist-group {
|
|
justify-content: flex-end !important;
|
|
}
|
|
|
|
::v-deep .uni-data-checklist .checklist-group .checklist-box {
|
|
margin-left: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text {
|
|
font-size: 32rpx !important;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400 !important;
|
|
color: #0E1521 !important;
|
|
}
|
|
|
|
::v-deep .uni-easyinput__content-input {
|
|
text-align: right;
|
|
}
|
|
|
|
.avatar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
width: 200rpx;
|
|
height: 80rpx;
|
|
position: absolute;
|
|
right: 0;
|
|
top: -40rpx;
|
|
}
|
|
|
|
.ftext {
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #0E1521;
|
|
}
|
|
|
|
.sconr {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.tvalue {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #0E1521;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.nvalue {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: flex-end;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.page {
|
|
height: calc(100vh - var(--window-top) - var(--window-bottom));
|
|
box-shadow: 0rpx -4rpx 60rpx 2rpx rgba(1, 31, 63, 0.1);
|
|
background: #f7f8fa;
|
|
}
|
|
|
|
.submitcon {
|
|
margin-top: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bbtn {
|
|
margin: 20rpx 10rpx 54rpx;
|
|
font-size: 32rpx;
|
|
font-family: PingFang SC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FCFCFD;
|
|
width: 560rpx;
|
|
height: 76rpx;
|
|
line-height: 76rpx;
|
|
background: #89965f;
|
|
box-shadow: 0rpx 12rpx 64rpx 2rpx rgba(137,150,95,0.4);
|
|
border-radius: 10rpx;
|
|
opacity: 1;
|
|
&::after{
|
|
border:none;
|
|
}
|
|
}
|
|
|
|
.example {
|
|
width: 750rpx;
|
|
height: 800rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
opacity: 1;
|
|
padding: 10rpx 48rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |