454 lines
11 KiB
Vue
454 lines
11 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">
|
||
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
||
</button>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP-ALIPAY -->
|
||
<button class="list_item_right_head" @click="onChooseAvatar">
|
||
<image class="list_item_right_head" :src="userHeadImg" mode="aspectFill"></image>
|
||
</button>
|
||
<!-- #endif -->
|
||
|
||
<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) {
|
||
let _this = this;
|
||
//#ifdef MP-WEIXIN
|
||
let avatarUrl = e.detail.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',
|
||
'content-type': 'multipart/form-data'
|
||
},
|
||
fileType:'image',
|
||
name: "file",
|
||
formData: {
|
||
file: avatarUrl,
|
||
},
|
||
success: (uploadFileRes) => {
|
||
let { data } = JSON.parse(uploadFileRes.data)
|
||
this.userHeadImg = data
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
});
|
||
// #endif
|
||
//#ifdef MP-ALIPAY
|
||
uni.chooseImage({
|
||
count: 1, // 默认9，设置图片的数量
|
||
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
||
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
||
success: function (res) {
|
||
// 成功选择图片后
|
||
let avatarUrl = res.tempFilePaths[0]; // 获取文件路径
|
||
|
||
my.uploadFile({
|
||
url: uni.conf.baseUrl + '/common/upload',
|
||
// url: uni.conf.baseUrl + '/common/upload',
|
||
filePath: avatarUrl,
|
||
header: {
|
||
environment: 'app',
|
||
type: 'android',
|
||
version: '1.7.3',
|
||
'content-type': 'multipart/form-data'
|
||
},
|
||
fileType:'image',
|
||
name: "file",
|
||
formData: {
|
||
file: avatarUrl,
|
||
},
|
||
success: (uploadFileRes) => {
|
||
let { data } = JSON.parse(uploadFileRes.data)
|
||
_this.userHeadImg = data
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
});
|
||
},
|
||
fail: (res) => {
|
||
console.log(res)
|
||
}
|
||
});
|
||
|
||
// #endif
|
||
|
||
|
||
},
|
||
|
||
/**
|
||
* 保存
|
||
*/
|
||
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>
|