427 lines
11 KiB
Vue
427 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 H5 -->
|
||
<button class="phone" v-if="!mobile" open-type="getAuthorize" scope='phoneNumber'
|
||
@getAuthorize="getPhone" @error="getPhoneError">
|
||
<!-- #endif -->
|
||
<!-- #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 setup>
|
||
import {
|
||
reactive,
|
||
ref
|
||
} from 'vue';
|
||
|
||
|
||
const sexShow = ref(false)
|
||
const calendarShow = ref(false)
|
||
const sexText = ref('请选择')
|
||
const value1 = ref(Number(new Date()))
|
||
const listinfo = reactive({
|
||
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: '女'
|
||
},
|
||
]
|
||
],
|
||
})
|
||
|
||
const userInfo = uni.cache.get('shopUserInfo')
|
||
// 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
|
||
// })
|
||
const confirmTime = (e) => {
|
||
this.calendarShow = false;
|
||
this.birthDay = this.getDate(e.value);
|
||
}
|
||
|
||
const confirmSex = (e) => {
|
||
this.sexShow = false;
|
||
this.sex = e.value[0].value;
|
||
this.sexText = e.value[0].label;
|
||
}
|
||
|
||
const 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}`;
|
||
}
|
||
|
||
// 获取手机号
|
||
const 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
|
||
}
|
||
|
||
const 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'
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 上传头像
|
||
const 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
|
||
}
|
||
|
||
const sumbit = async () => {
|
||
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()
|
||
}
|
||
}
|
||
</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> |