409 lines
10 KiB
Vue
409 lines
10 KiB
Vue
<template>
|
|
<view class="container">
|
|
|
|
<view class="info_list">
|
|
|
|
<view class="list_item">
|
|
<view class="list_item_left">头像</view>
|
|
<view class="list_item_right flex-center">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button class="list_item_right_head" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<button class="list_item_right_head" type="default" open-type="chooseAvatar" @chooseAvatar="onChooseAvatar">
|
|
<!-- #endif -->
|
|
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
|
</button>
|
|
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="list_item">
|
|
<view class="list_item_left">昵称</view>
|
|
<view class="list_item_right" style="width: 100%;">
|
|
<u-input v-model="nickName" type="text" input-align="right" placeholder="请输入不支持特殊字符10个字以内" :custom-style="{color:'#333',fontSize: '28rpx',border:'none'}" placeholder-style="color:#999;font-size: 28rpx"/>
|
|
</view>
|
|
</view>
|
|
<view class="list_item">
|
|
<view class="list_item_left">账号</view>
|
|
<view class="list_item_right ">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button class="phone" v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getPhone">
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<button class="phone" v-if="!mobile" open-type="getAuthorize" scope='phoneNumber' @getAuthorize="getPhone" @error="getPhoneError">
|
|
<!-- #endif -->
|
|
<view class="flex-colum-end">
|
|
<view class="text">请授权手机号</view>
|
|
</view>
|
|
</button>
|
|
<view v-else >
|
|
<view class="flex-colum-end">
|
|
<view class="text">{{phonetitle }}</view>
|
|
<view class="place">绑定的手机号不能修改</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="list_item">
|
|
<view class="list_item_left">性别</view>
|
|
<view class="list_item_right flex-center">
|
|
<view class="place r" @click="sexShow = true">{{sexText}}</view>
|
|
<u-picker @cancel="sexShow = false" itemHeight="66" :show="sexShow" :columns="sexList" keyName="label" @confirm="confirmSex"></u-picker>
|
|
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="list_item">
|
|
<view class="list_item_left">生日</view>
|
|
<view class="list_item_right flex-center">
|
|
<view class="place r" @click="calendarShow = (birthDay ? false : true)"> {{ birthDay || '生日一旦填写不能修改'}}</view>
|
|
<!-- <u-calendar @close="calendarShow = false" monthNum="99" minDate="1945-01-01" maxDate="2055-12-12" :show="calendarShow" mode="single" @confirm="confirmCalendar"></u-calendar> -->
|
|
<!-- <u-picker :show="calendarShow" ref="uPicker" :columns="columns" @confirm="confirm" @change="changeHandler"></u-picker> -->
|
|
<!-- <picker :show="calendarShow" mode="date"></picker> -->
|
|
<u-datetime-picker
|
|
mode="date"
|
|
itemHeight="90"
|
|
visibleItemCount="5"
|
|
@cancel="calendarShow = false"
|
|
:show="calendarShow"
|
|
:minDate="-2208988800000"
|
|
v-model="value1"
|
|
@confirm="confirmTime"
|
|
></u-datetime-picker>
|
|
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="list_item" @click="boxClick">
|
|
<view class="list_item_left">绑定微信</view>
|
|
<view class="list_item_right flex-center">
|
|
<view class="text r">已绑定</view>
|
|
<u-icon name="arrow-right" color="#999999" size="16"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="save active" @click="$u.debounce(sumbit, 500)">保存</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
sexShow: false,
|
|
calendarShow: false,
|
|
sexText: '请选择',
|
|
value1: Number(new Date()),
|
|
form: {
|
|
sex: 1,
|
|
address: '', //地址
|
|
type: '', //品类
|
|
orderBy: '', //1.理我最近 2.销量优先 3.价格优先
|
|
other: '', //附近1KM 1选中 0不选中
|
|
page: 1, //页数
|
|
size: 10, //页容量
|
|
status: 'loadmore',
|
|
},
|
|
sexList: [
|
|
[{
|
|
value: 1,
|
|
label: '男'
|
|
},
|
|
{
|
|
value: 0,
|
|
label: '女'
|
|
},]
|
|
],
|
|
|
|
userInfo: uni.cache.get('userInfo'),
|
|
userHeadImg: "",
|
|
nickName: '',
|
|
birthDay: "",
|
|
mobile: "",
|
|
phonetitle: ""
|
|
};
|
|
},
|
|
computed:{
|
|
|
|
},
|
|
onLoad() {
|
|
this.userInfo = uni.cache.get('userInfo')
|
|
this.userHeadImg = this.userInfo.headImg;
|
|
this.nickName = this.userInfo.nickName;
|
|
this.sex = this.userInfo.sex;
|
|
if ( this.userInfo.sex != null ) {
|
|
this.sexText = this.userInfo.sex == 1 ? '男' : '女';
|
|
}
|
|
this.birthDay = this.userInfo.birthDay;
|
|
this.phonetitle = this.userInfo.telephone ? (this.userInfo.telephone.substr(0, 3) + "****" + this.userInfo.telephone.substr(7)) : ""
|
|
this.mobile = this.userInfo.telephone;
|
|
this.date = this.getDate({ format: true})
|
|
},
|
|
|
|
methods: {
|
|
|
|
/**
|
|
* 确定生日
|
|
* @param {Object} e
|
|
*/
|
|
confirmTime(e) {
|
|
this.calendarShow = false;
|
|
this.birthDay = this.getDate(e.value);
|
|
},
|
|
|
|
/**
|
|
* 确定性别
|
|
* @param {Object} e
|
|
*/
|
|
confirmSex(e) {
|
|
this.sexShow = false;
|
|
this.sex = e.value[0].value;
|
|
this.sexText = e.value[0].label;
|
|
console.log(e)
|
|
},
|
|
|
|
getDate(time) { //年月日
|
|
const date = new Date(time);
|
|
// const date = new Date();
|
|
let year = date.getFullYear();
|
|
let month = date.getMonth() + 1;
|
|
let day = date.getDate();
|
|
|
|
|
|
month = month > 9 ? month : '0' + month;
|
|
day = day > 9 ? day : '0' + day;
|
|
return `${year}-${month}-${day}`;
|
|
},
|
|
|
|
/**
|
|
* 获取手机号
|
|
* @param {Object} d
|
|
*/
|
|
async getPhone(d) {
|
|
console.log(d)
|
|
// #ifdef MP-WEIXIN
|
|
if (d.detail.iv) {
|
|
uni.login({
|
|
provider: 'weixin',
|
|
success: async (data) => {
|
|
// 微信小程序环境
|
|
console.log(data)
|
|
let res = await this.api.userwxlogins({
|
|
code: data.code,
|
|
encryptedData: d.detail.encryptedData,
|
|
iv: d.detail.iv,
|
|
source: "wechar"
|
|
})
|
|
this.phonetitle = res.data.substr(0, 3) + "****" + res.data.substr(7)
|
|
this.mobile = res.data;
|
|
}
|
|
});
|
|
}
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
// 支付宝小程序环境
|
|
my.getAuthCode({
|
|
scopes: 'auth_user',
|
|
success: (res) => {
|
|
console.log(res)
|
|
let authCode = res.authCode;
|
|
my.getPhoneNumber({
|
|
success: async (data) => {
|
|
let res = await this.api.userwxlogins({
|
|
// code: authCode,
|
|
encryptedData: JSON.parse(data.response).response,
|
|
source: "alipay"
|
|
})
|
|
this.phonetitle = res.data.substr(0, 3) + "****" + res.data.substr(7)
|
|
this.mobile = res.data;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
|
|
getPhoneError (e) {
|
|
console.log(e)
|
|
},
|
|
|
|
/**
|
|
* 取消绑定/退出登录
|
|
*/
|
|
boxClick() {
|
|
uni.showModal({
|
|
title: '注意',
|
|
content: '确定要取消绑定吗？',
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
try {
|
|
await this.api.loginOut();
|
|
} catch (e) {
|
|
//TODO handle the exception
|
|
}
|
|
uni.cache.clear();
|
|
uni.reLaunch({
|
|
url: '/pages/login/login'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 上传头像
|
|
* @param {Object} e
|
|
*/
|
|
onChooseAvatar(e) {
|
|
const { avatarUrl } = e.detail
|
|
// this.userHeadImg = avatarUrl
|
|
uni.uploadFile({
|
|
url: uni.conf.baseUrl + '/common/upload',
|
|
// url: uni.conf.baseUrl + '/common/upload',
|
|
filePath: avatarUrl,
|
|
header: {
|
|
environment: 'app',
|
|
type: 'android',
|
|
version: '1.7.3',
|
|
},
|
|
name: "file",
|
|
formData: {
|
|
file: avatarUrl,
|
|
},
|
|
success: (uploadFileRes) => {
|
|
console.log(uploadFileRes)
|
|
let {
|
|
data
|
|
} = JSON.parse(uploadFileRes.data)
|
|
this.userHeadImg = data
|
|
},
|
|
fail: (res) => {
|
|
console.log(res)
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 保存
|
|
*/
|
|
async sumbit() {
|
|
let res = await this.api.upUserInfo({
|
|
headImg: this.userHeadImg,
|
|
nickName: this.nickName,
|
|
sex: this.sex,
|
|
birthDay: this.birthDay,
|
|
telephone: this.mobile,
|
|
})
|
|
if (res.code == 0) {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
|
|
},
|
|
computed: {
|
|
HeighT() { //手机类型的尺寸
|
|
return this.$store.getters.is_BarHeight
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background: #fff;
|
|
}
|
|
.container{
|
|
|
|
::v-deep .u-input input{
|
|
background-color: transparent;
|
|
}
|
|
.info_list{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 20rpx;
|
|
.list_item{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
.list_item_left{
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
flex-shrink: 0;
|
|
}
|
|
.list_item_right{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
.list_item_right_head{
|
|
width: 98rpx;
|
|
height: 98rpx;
|
|
border-radius: 50rpx;
|
|
margin-right: 16rpx;
|
|
padding: 0;
|
|
}
|
|
.phone{
|
|
border: none;
|
|
background-color: transparent;
|
|
// #ifdef MP-ALIPAY
|
|
display: initial;
|
|
// #endif
|
|
}
|
|
.place{
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
line-height: initial;
|
|
}
|
|
.text{
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: initial;
|
|
}
|
|
|
|
.r{
|
|
margin-right: 16rpx;
|
|
}
|
|
button{
|
|
outline: none;
|
|
text{
|
|
color: #fff!important;
|
|
}
|
|
}
|
|
button::after{
|
|
border: none;
|
|
}
|
|
button:active {
|
|
background-color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.save{
|
|
width: 502rpx;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
text-align: center;
|
|
background-color: #E0E0E0;
|
|
border-radius: 48rpx;
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
position: fixed;
|
|
bottom: 100rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
}
|
|
.save.active{
|
|
background-color: #E3AD7F;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|