金诚优选前端代码
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.
 
 
 
 
 

368 lines
9.0 KiB

<template>
<view id="user-setting">
<view class="head_box">
<view class="head_message">
个人头像
</view>
<view class="head_right">
<view class="headImg" @tap="changeImage">
<image :src="detail.avatar" alt></image>
</view>
<view class="iconfont icon-jiantou head_under"></view>
</view>
</view>
<view class="user_setting">
<view class="code">
<view class="detail">昵称</view>
<input type="text" placeholder="填写您的昵称" @input="changeName" :value="detail.nick_name"></input>
</view>
<view class="code">
<view class="detail">性别</view>
<picker :value="selectedIndex" :range="list" @change="change">
<!--<view class="picker">{{list[selectedIndex]}}</view>-->
<input type="text" placeholder="选择你的性别" disabled :value="list[selectedIndex]"></input>
</picker>
<view class="iconfont icon-jiantou under"></view>
<!--<input type="text" placeholder="选择你的性别"/>-->
</view>
<view class="code" v-if="isChangeB">
<view class="detail">出生日期</view>
<picker mode="date" :end="end" @change="changeDate">
<input type="text" placeholder="请输入出生日期" disabled :value="birthdaydate"></input>
</picker>
<view class="iconfont icon-jiantou under"></view>
</view>
<view class="code" v-if="!isChangeB" @tap="changeB">
<view class="detail">出生日期</view>
<view style="position: relative; flex: 1">
<input type="text" placeholder="请输入出生日期" disabled :value="birthdaydate"></input>
<!--<view class="iconfont icon-jiantou under"></view>-->
</view>
</view>
<!-- <view class="code">
<view class="detail">QQ</view>
<input type="text" placeholder="请输入QQ号码" :value="QQnum" @input="changeQQ"></input>
</view> -->
<view class="code">
<view class="detail">手机号码</view>
<input type="text" placeholder="请输入手机号码" :value="mobileNum" disabled></input>
<view @tap="changeMobile" class="iconfont icon-jiantou phone_under"></view>
</view>
<!-- <view class="code">
<view class="detail">邮箱</view>
<input type="text" placeholder="请输入邮箱" :value="emailSet" @input="changeEmail"></input>
</view> -->
</view>
<view class="submit" @tap="updateUserInfo">
<button type="primary" :style="'background: ' + config.mainColor">确定</button>
</view>
</view>
</template>
<script>
import {
pageLogin,
getUrl,
config,
is
} from '@/common/js/utils.js';
export default {
data() {
return {
list: ['男', '女'],
selectedIndex:-1,
detail: "",
birthdaydate: '',
QQnum: '',
mobileNum: "",
emailSet: "",
config: '',
isChangeB: '',
newImage:''
};
},
onShow() {
pageLogin(getUrl(), () => {
this.gitUserInfo();
});
},
onLoad() {
// 第三方平台配置颜色
var bgConfig = this.$cookieStorage.get('globalConfig') || '';
var initData = this.$cookieStorage.get('init');
this.config = bgConfig;
this.initData = initData;
Date.prototype.format = function(fmt) {
var o = {
"M+": this.getMonth() + 1,
//月份
"d+": this.getDate(),
//日
"h+": this.getHours(),
//小时
"m+": this.getMinutes(),
//分
"s+": this.getSeconds(),
//秒
"q+": Math.floor((this.getMonth() + 3) / 3),
//季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return fmt;
};
var time = new Date().format("yyyy-MM-dd");
this.end = time;
},
methods: {
change: function(e) {
// console.log(e);
// 修改选中项文案
this.setData({
selectedIndex: e.detail.value
});
},
changeName(e) {
this.setData({
'detail.nick_name': e.detail.value
});
},
changeDate(e) {
this.setData({
birthdaydate: e.detail.value
});
},
changeQQ(e) {
this.setData({
QQnum: e.detail.value
});
},
changeB() {
wx.showModal({
content: '暂时无法修改',
showCancel: false
});
},
changeMobile() {
wx.navigateTo({
url: '/pages/user/bindingphone/bindingphone'
});
},
changeEmail(e) {
this.setData({
emailSet: e.detail.value
});
},
gitUserInfo() {
this.$http.get({
api: 'api/me',
header: {
Authorization: this.$cookieStorage.get('user_token')
}
}).then(res => {
if (res.data.status) {
var sex = res.data.data.sex;
var index = this.list.findIndex(val => {
return val == sex;
});
if (index == -1) index = "";
var isChangeB = true;
if (this.initData && this.initData.vip_plan_status == 1 && res.data.data.birthday != '') {
isChangeB = false;
}
// this.setData({
// detail: res.data.data,
// selectedIndex: index,
// birthdaydate: res.data.data.birthday,
// QQnum: res.data.data.qq,
// mobileNum: res.data.data.mobile,
// emailSet: res.data.data.email,
// isChangeB: isChangeB
// });
this.detail = res.data.data;
this.selectedIndex = index;
this.birthdaydate = res.data.data.birthday;
this.QQnum = res.data.data.qq;
this.mobileNum = res.data.data.mobile;
this.emailSet = res.data.data.email;
this.isChangeB = isChangeB;
}
});
},
changeImage: function() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: res => {
var tempFilePaths = res.tempFilePaths;
this.newImage = tempFilePaths[0];
var token = this.$cookieStorage.get('user_token');
/* this.$http.uploadFile({
header: {
'content-type': 'multipart/form-data',
Authorization: token
},
api: 'api/users/upload/avatar',
//仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'avatar_file'
}).then(res => {
console.log(result);
this.setData({
'detail.avatar': result.data.url
});
}); */
uni.uploadFile({
header: {
Authorization: token
},
url: config.GLOBAL.baseUrl + 'api/users/upload/avatar',
filePath: tempFilePaths[0],
fileType: 'image',
name: 'avatar_file',
success: res => {
var result = JSON.parse(res.data);
this.setData({
'detail.avatar': result.data.url
});
}
})
}
});
},
updateUserInfo() {
var message = null;
if (!this.detail.nick_name) {
message = "请填写用户昵称";
}
/* else if (this.emailSet != "" && !is.email(this.emailSet)) {
message = "请填写正确的邮箱";
} */
// else if (!this.birthdaydate) {
// message = "请选择出生日期";
// }
if (message) {
wx.showModal({
content: message,
showCancel: false
});
return;
} // this.updateBirthday();
var token = this.$cookieStorage.get('user_token');
this.$http.post({
api: 'api/users/update/info',
header: {
Authorization:token
},
data: {
nick_name: this.detail.nick_name,
sex: this.list[this.selectedIndex],
avatar: this.detail.avatar,
birthday: this.birthdaydate,
/* qq: this.QQnum, */
/* email: this.emailSet */
}
}).then(res => {
if (res.statusCode == 200) {
res = res.data;
if(res.status){
wx.showToast({
title:"修改成功",
duration: 1500,
success: () => {
setTimeout(() => {
wx.switchTab({
url: '/pages/user/personal/personal'
});
}, 1500);
}
});
}
} else {
wx.showModal({
title: "提示",
content: "修改失败"
});
}
});
},
updateBirthday() {
this.$http.post({
api: 'api/uto/update/birthday',
header: {
Authorization: this.$cookieStorage.get('user_token')
},
data: {
birthday: this.birthdaydate
}
}).then(res => {
console.log(res);
});
},
setData: function(obj) {
let that = this;
let keys = [];
let val, data;
Object.keys(obj).forEach(function(key) {
keys = key.split('.');
val = obj[key];
data = that.$data;
keys.forEach(function(key2, index) {
if (index + 1 == keys.length) {
that.$set(data, key2, val);
} else {
if (!data[key2]) {
that.$set(data, key2, {});
}
}
data = data[key2];
});
});
}
}
};
</script>
<style rel="stylesheet/less" lang="less">
@import "usersetting";
</style>