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.
474 lines
11 KiB
474 lines
11 KiB
<!--个人中心-->>
|
|
<template>
|
|
<view class="main">
|
|
<view class="back" />
|
|
<u-navbar
|
|
title="个人主页"
|
|
:safeAreaInsetTop="true"
|
|
:fixed="true"
|
|
bgColor="#FFFFFF00"
|
|
:placeholder="true"
|
|
@leftClick="onBackTouched"
|
|
/>
|
|
<u-line :dashed="false" color="#E2E2E2" customStyle="border: 1rpx solid #E2E2E2;"></u-line>
|
|
<view class="body">
|
|
<u-form
|
|
labelPosition="left"
|
|
ref="form1"
|
|
:model="player"
|
|
:rules="rules"
|
|
:labelStyle="form_tile_title"
|
|
>
|
|
<u-form-item v-for="(item,index) in rules" :key="item.getValue(player)" :prop="index" borderBottom :ref="index" @click="onTouchOneItem">
|
|
<view class="form_item_global">
|
|
<text class="form_title_global">
|
|
{{item.title}}
|
|
</text>
|
|
<view v-if="index == 'headUrl'">
|
|
<image :src="item.getValue(player)" class="head"/>
|
|
</view>
|
|
<view v-else-if="index == 'phone'">
|
|
<!--手机号码要特殊处理-->
|
|
<button v-if="item.getValue(player) == ''" class="phone_get_button" open-type="getPhoneNumber" @getphonenumber="onTouchToGetPhone">点击获取手机号码></button>
|
|
<text v-else class="form_title_global">{{item.getValue(player)}}</text>
|
|
</view>
|
|
<view v-else style="width: 550rpx;height: 110rpx;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
|
|
<input
|
|
:placeholder="item.message"
|
|
class="form_input_global"
|
|
placeholder-class="form_input_placeholder_global"
|
|
:value="item.getValue(player)"
|
|
@blur='(object)=>{
|
|
onBlurCallback(index,object);
|
|
}'
|
|
v-if="item.enableInput"
|
|
/>
|
|
<view v-else>
|
|
<text v-if="item.getValue(player) == ''" class="form_input_placeholder_global">{{item.message}}</text>
|
|
<text class="form_title_global" v-else>{{item.getValue(player)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
</u-form>
|
|
</view>
|
|
<u-gap height="37rpx" />
|
|
<view class="intro_box">
|
|
<text class="item_title" style="position: absolute;left: 0;">简介</text><!---->
|
|
<view class="intro_area">
|
|
<textarea
|
|
class="textarea"
|
|
placeholder="请输入您的简单介绍"
|
|
placeholder-class='form_holder'
|
|
@blur="onEditPlayerIntro"
|
|
:value="player.introduction"
|
|
>
|
|
</textarea>
|
|
</view>
|
|
</view>
|
|
<u-gap height="50rpx" />
|
|
<button class="confirm_button_global" @click="doConfirm" hover-class="confirm_button_hover_class">
|
|
确认
|
|
</button>
|
|
<u-gap height="20rpx" />
|
|
<button class="cancel_button_global" hover-class="cancel_button_hover_class" @click="doLoginOut">退出登录</button>
|
|
<min-picker
|
|
:startTime="startTime"
|
|
:endTime="endTime"
|
|
@cancel="onDateSelectCanceled"
|
|
@sure="onDateSelectConfirm"
|
|
:show="isDateSelectShowing"
|
|
heightRpx="500"
|
|
:currentTime="currentTime"
|
|
></min-picker>
|
|
<u-modal :show="isShowLogoutModal"
|
|
title="提示"
|
|
content="您确定要退出当前账号吗？"
|
|
confirmText="退出"
|
|
@confirm="onConfirmLogout"
|
|
@cancel="onCancelLogout"
|
|
:closeOnClickOverlay="true"
|
|
:showCancelButton="true"
|
|
@close="onCancelLogout"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var Define = getApp().globalData.Define;
|
|
var Player = getApp().globalData.Player;
|
|
import {post} from '@/common/api.js'
|
|
export default {
|
|
mounted() {
|
|
this.$refs.form1.setRules(this.rules);
|
|
},
|
|
data() {
|
|
return {
|
|
player : Player,
|
|
///生日选择器是否在活动中
|
|
isDateSelectShowing : false,
|
|
///是否显示退出提示的确认框
|
|
isShowLogoutModal : false,
|
|
rules:{
|
|
///头像
|
|
headUrl : {
|
|
type : 'string',
|
|
|
|
title : '头像',
|
|
|
|
message : '',
|
|
//是否允许输入
|
|
enableInput : false,
|
|
|
|
///获取里面的值
|
|
getValue(player){
|
|
if(player.headimgurl == ''){
|
|
return "../../static/images/wode/touxiang_6.png";
|
|
}
|
|
return player.headimgurl;
|
|
},
|
|
|
|
validator:(object)=>{},
|
|
},
|
|
name : {
|
|
type : 'string',
|
|
|
|
title : '昵称',
|
|
|
|
key : 'name',
|
|
|
|
message : '',
|
|
//是否允许输入
|
|
enableInput : false,
|
|
|
|
///获取里面的值
|
|
getValue(player){
|
|
if(player.nickname == ''){
|
|
return "没有获取到昵称";
|
|
}
|
|
return player.nickname;
|
|
},
|
|
|
|
validator:(object)=>{},
|
|
},
|
|
sex : {
|
|
type : 'string',
|
|
|
|
title : '性别',
|
|
|
|
key : 'sex',
|
|
|
|
message : '',
|
|
//是否允许输入
|
|
enableInput : false,
|
|
///获取里面的值
|
|
getValue(player){
|
|
if(player.sex == 0){
|
|
return "未知";
|
|
}else if(player.sex == 1){
|
|
return '男';
|
|
}else{
|
|
return '女';
|
|
}
|
|
|
|
},
|
|
|
|
validator:(object)=>{},
|
|
},
|
|
phone : {
|
|
type : 'string',
|
|
|
|
title : '手机号码',
|
|
|
|
key : 'phone',
|
|
|
|
message : '请输入您的电话号码',
|
|
//是否允许输入
|
|
enableInput : true,
|
|
///获取里面的值
|
|
getValue(player){
|
|
return player.phone;
|
|
},
|
|
|
|
validator:(object)=>{
|
|
this.player.phone = object.detail.value;
|
|
},
|
|
},
|
|
birthday : {
|
|
type : 'string',
|
|
|
|
title : '生日',
|
|
|
|
key : 'birthday',
|
|
|
|
message : '未选择',
|
|
|
|
//是否允许输入
|
|
enableInput : false,
|
|
|
|
///获取当前可以显示的值
|
|
getValue(player){
|
|
return player.birthday;
|
|
},
|
|
validator:(object)=>{},
|
|
},
|
|
profession : {
|
|
type : 'string',
|
|
|
|
title : '职业',
|
|
|
|
key : 'occupation',
|
|
|
|
message : '未填写',
|
|
//是否允许输入
|
|
enableInput : true,
|
|
|
|
trigger : 'blur',
|
|
///获取里面的值
|
|
getValue(player){
|
|
return player.occupation;
|
|
},
|
|
///输入了数据，这里验证
|
|
validator:(object)=>{
|
|
this.player.occupation = object.detail.value;
|
|
},
|
|
},
|
|
},
|
|
form_tile_title : {
|
|
height: '37rpx',
|
|
fontSize: 26,
|
|
fontWeight: 500,
|
|
color: 'black',
|
|
},
|
|
startTime : [1900,1,1],
|
|
endTime : 2022,
|
|
currentTime : this.getCurrentDateSelectTime(),
|
|
};
|
|
},
|
|
methods:{
|
|
onBackTouched(){
|
|
uni.navigateBack({
|
|
|
|
});
|
|
},
|
|
///从player的birtday数据来初始化
|
|
getCurrentDateSelectTime(){
|
|
var player = Player;
|
|
if(player.birthday == ''){
|
|
return null;
|
|
}
|
|
var str = player.birthday;
|
|
//以-分割
|
|
var arr = str.split('-');
|
|
//需要转换称number
|
|
return [parseInt(arr[0]),parseInt(arr[1]),parseInt(arr[2])];
|
|
},
|
|
///显示生日选择器
|
|
onOpenDateSelect(){
|
|
this.isDateSelectShowing = true;
|
|
},
|
|
///当生日选择器点击了确认，返回了一个日志
|
|
onDateSelectConfirm(e){
|
|
console.log(e);
|
|
//关闭选择器
|
|
this.isDateSelectShowing = false;
|
|
//更新用户的生日系统
|
|
var year = parseInt(e.a);
|
|
var mouth = parseInt(e.b);
|
|
var day = parseInt(e.c);
|
|
var str = year + "-" + mouth + "-" + day;
|
|
this.player.birthday = str;
|
|
this.currentTime = [year,mouth,day];
|
|
},
|
|
///生日选择器取消了选择
|
|
onDateSelectCanceled(){
|
|
this.isDateSelectShowing = false;
|
|
},
|
|
///当前几了某一行item，回调参数为当前的prop，prop内容为rules里面的key
|
|
onTouchOneItem(prop){
|
|
console.log(prop);
|
|
if(prop == 'birthday'){
|
|
//点击的是生日，弹出生日选择器
|
|
this.isDateSelectShowing = true;
|
|
return;
|
|
}
|
|
if(prop == "phone"){
|
|
//弹出获取手机号码的授权信息
|
|
|
|
return;
|
|
}
|
|
},
|
|
///当某些输入框失去焦点
|
|
onBlurCallback(key,obj){
|
|
var item = this.rules[key];
|
|
if(item != null){
|
|
item.validator(obj);
|
|
}
|
|
|
|
},
|
|
///用户更新了自己的简介
|
|
onEditPlayerIntro(obj){
|
|
console.log(obj);
|
|
this.player.introduction = obj.detail.value;
|
|
},
|
|
///点击了确认按钮
|
|
async doConfirm(){
|
|
let phone = this.player.phone;
|
|
if(!uni.$u.test.mobile(phone)){
|
|
uni.$u.toast('请输入正确的电话号码');
|
|
return;
|
|
}
|
|
let data = {
|
|
birthday : this.player.birthday,
|
|
introduction : this.player.introduction,
|
|
occupation : this.player.occupation,
|
|
phone : this.player.phone,
|
|
};
|
|
uni.showLoading({
|
|
});
|
|
let res = await post('users/updateselfinfo',data);
|
|
console.log(res);
|
|
uni.hideLoading();
|
|
if(res.length > 1){
|
|
//成功以后，退出当前界面
|
|
uni.navigateBack({
|
|
|
|
});
|
|
}
|
|
},
|
|
///退出登录
|
|
doLoginOut(){
|
|
console.log("You just loginout!");
|
|
this.isShowLogoutModal = true;
|
|
},
|
|
///点击按钮，开始获取用户的手机号码
|
|
async onTouchToGetPhone(e){
|
|
var phonenumber = await this.$utils.wechatGetPlayerPhoneNumberBack(e);
|
|
if(!phonenumber){
|
|
return;
|
|
}
|
|
this.player.phone = phonenumber;
|
|
},
|
|
///同意退出当前账号
|
|
onConfirmLogout(){
|
|
//干掉当前的token,让他从新去获取，把当前player里面数据都干掉
|
|
uni.clearStorageSync(); //清理掉所有缓存
|
|
var Player = getApp().globalData.Player;
|
|
Player.clear();
|
|
this.isShowLogoutModal = false;
|
|
uni.$u.toast('退出成功');
|
|
uni.navigateBack({
|
|
|
|
});
|
|
},
|
|
///取消退出，啥也不做
|
|
onCancelLogout(){
|
|
this.isShowLogoutModal = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/**
|
|
* <view v-else-if="index == 'phone'">
|
|
<!--手机号码要特殊处理-->
|
|
<button v-if="item.getValue(player) == ''" class="phone_get_button" open-type="getPhoneNumber" @getphonenumber="onTouchToGetPhone">点击获取手机号码></button>
|
|
<text v-else class="form_title_global">{{item.getValue(player)}}</text>
|
|
</view>
|
|
*/
|
|
button::after{border: none;padding: 0;}
|
|
.body{
|
|
width: 702rpx;
|
|
height: 920rpx;
|
|
position: relative;
|
|
//background-color: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
left: 24rpx;
|
|
}
|
|
|
|
.head{
|
|
width: 97rpx;
|
|
height: 97rpx;
|
|
position: absolute;
|
|
right: 20rpx;
|
|
top: 6rpx;
|
|
border-radius: 50%;
|
|
}
|
|
///点击获取手机号码的按钮
|
|
.phone_get_button{
|
|
width: 550rpx;
|
|
height: 110rpx;
|
|
background-color: #F6F6F6;
|
|
//text-align: right;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
border: none;
|
|
|
|
}
|
|
|
|
.intro_box{
|
|
width: 702rpx;
|
|
height: 200rpx;
|
|
position: relative;
|
|
border-radius: 20rpx;
|
|
left: 24rpx;
|
|
//background-color: #0081FF;
|
|
}
|
|
|
|
.intro_area{
|
|
width: 702rpx;
|
|
height: 166rpx;
|
|
background: #FFFFFF;
|
|
border: 1rpx solid #E2E2E2;
|
|
opacity: 1;
|
|
border-radius: 12rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 60rpx;
|
|
}
|
|
|
|
.textarea{
|
|
width: 662rpx;
|
|
height: 126rpx;
|
|
//background-color: #1CBBB4;
|
|
left: 20rpx;
|
|
top: 20rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.confirm_button{
|
|
width: 702rpx;
|
|
height: 90rpx;
|
|
background: #D49B4B;
|
|
opacity: 1;
|
|
border-radius: 93rpx;
|
|
position: relative;
|
|
left: 24rpx;
|
|
top: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.confirm_text{
|
|
width: 72rpx;
|
|
height: 50rpx;
|
|
font-size: 36rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
opacity: 1;
|
|
}
|
|
.item_title{
|
|
height: 37rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
</style>
|
|
|