我的页面、个人资料、会员充值页面修改
This commit is contained in:
GaoHao
333
pages/user/my_info.vue
Normal file
333
pages/user/my_info.vue
Normal file
@@ -0,0 +1,333 @@
|
||||
<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">
|
||||
<button class="list_item_right_head" type="default" open-type="chooseAvatar" @chooseavatar="uploadImg">
|
||||
<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 ">
|
||||
<button open-type="getPhoneNumber" @getphonenumber="getPhone">
|
||||
<view class="flex-colum-end">
|
||||
<view class="text">{{phonetitle || '请授权手机号'}}</view>
|
||||
<view class="place" v-if="phonetitle">绑定的手机号不能修改</view>
|
||||
</view>
|
||||
</button>
|
||||
</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" :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 = true">生日一旦填写不能修改</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"
|
||||
@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" @click="sumbit">保存</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: 2,
|
||||
label: '女'
|
||||
},]
|
||||
],
|
||||
|
||||
userInfo: uni.cache.get('userInfo'),
|
||||
userHeadImg: "",
|
||||
nickName: '',
|
||||
phonetitle: ""
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
|
||||
},
|
||||
onLoad() {
|
||||
this.userInfo = uni.cache.get('userInfo')
|
||||
this.userHeadImg = this.userInfo.headImg;
|
||||
this.nickName = this.userInfo.nickName;
|
||||
this.sex = this.userInfo.sex;
|
||||
this.phonetitle = this.userInfo.telephone ? (this.userInfo.telephone.substr(0, 3) + "****" + this.userInfo.telephone.substr(7)) : ""
|
||||
this.date = this.getDate({ format: true})
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 确定生日
|
||||
* @param {Object} e
|
||||
*/
|
||||
confirmTime(e) {
|
||||
console.log(e);
|
||||
console.log(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) {
|
||||
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,
|
||||
})
|
||||
this.phonetitle = res.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 取消绑定/退出登录
|
||||
*/
|
||||
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
|
||||
*/
|
||||
uploadImg(e) {
|
||||
console.log(e)
|
||||
const {
|
||||
avatarUrl
|
||||
} = e.detail
|
||||
console.log(e)
|
||||
console.log(e.detail)
|
||||
// this.userHeadImg = avatarUrl
|
||||
uni.uploadFile({
|
||||
url: 'https://wxcashiertest.sxczgkj.cn/cashierService/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) => {
|
||||
let {
|
||||
data
|
||||
} = JSON.parse(uploadFileRes.data)
|
||||
this.userHeadImg = data
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
async sumbit() {
|
||||
let res = await this.api.upUserInfo({
|
||||
headImg: this.userHeadImg,
|
||||
nickName: this.nickName,
|
||||
sex: this.sex,
|
||||
telephone: this.phonetitle == '请授权手机号' ? '' : this.phonetitle
|
||||
})
|
||||
if (res.code == 0) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
HeighT() { //手机类型的尺寸
|
||||
return this.$store.getters.is_BarHeight
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
.container{
|
||||
.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;
|
||||
}
|
||||
.place{
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
line-height: initial;
|
||||
}
|
||||
.text{
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.r{
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
button{
|
||||
text{
|
||||
color: #fff!important;
|
||||
}
|
||||
}
|
||||
button::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.save{
|
||||
width: 502rpx;
|
||||
height: 96rpx;
|
||||
line-height: 96rpx;
|
||||
text-align: center;
|
||||
background: #E0E0E0;
|
||||
border-radius: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #999999;
|
||||
position: fixed;
|
||||
bottom: 100rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user