公司小程序
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

<!--个人中心-->>
<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>