270 lines
6.9 KiB
Vue
270 lines
6.9 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="container">
|
|
<view class="my-header">
|
|
<view class="my-icons" @click="goBack"> <uni-icons type="left" size="16"></uni-icons> </view>
|
|
<view class="my-text">设置</view>
|
|
<view class="my-icons"></view>
|
|
</view>
|
|
<!-- 顶部区域 -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<button class="box-hang" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
|
|
<view class="">头像</view>
|
|
<view class="touxiang">
|
|
<image class="touxiang" v-if="user.avatar!='' && user.avatar!=null && user.avatar!=undefined"
|
|
:src="baseUrl + user.avatar" mode="aspectFit"></image>
|
|
<image class="touxiang" v-else src="@/static/imgs/myx.png" mode="aspectFit"></image>
|
|
</view>
|
|
</button>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<button class="box-hang" @click="onChooseAvatar1">
|
|
<view class="">头像</view>
|
|
<view class="touxiang">
|
|
<image class="touxiang" v-if="user.avatar!='' && user.avatar!=null && user.avatar!=undefined"
|
|
:src="baseUrl + user.avatar" mode="aspectFit"></image>
|
|
<image class="touxiang" v-else src="@/static/imgs/myx.png" mode="aspectFit"></image>
|
|
</view>
|
|
</button>
|
|
<!-- #endif -->
|
|
<view class="box-hang" @click="goEdit(0)">
|
|
<view class="">昵称</view>
|
|
<view class="dis">
|
|
<text v-if="!user.name">未填写</text>
|
|
<text v-else>{{user.name}}</text>
|
|
<uni-icons type="right" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="box-hang" @click="show1 =!show1">
|
|
<view class="">性别</view>
|
|
<view class="dis"> <text>{{user.sex}}</text> <uni-icons type="right" size="16"></uni-icons> </view>
|
|
</view>
|
|
<view class="box-hang" @click="show=!show">
|
|
<view class="">生日</view>
|
|
<view class="dis"> <text>{{user.birthday}}</text> <uni-icons type="right" size="16"></uni-icons> </view>
|
|
</view>
|
|
<!-- <view class="box-hang">
|
|
<view class="">手机号</view>
|
|
<view class="dis"> <text>{{user.mobile}}</text> <uni-icons type="right" size="16"></uni-icons> </view>
|
|
</view>
|
|
<view class="box-hang">
|
|
<view class="">会员号</view>
|
|
<view class="dis"> <text>{{user.userNo}}</text> <uni-icons type="right" size="16"></uni-icons> </view>
|
|
</view> -->
|
|
<view class="box-hang" @click="goEdit(2)">
|
|
<view class="">车牌号</view>
|
|
<view class="dis">
|
|
<text v-if="!user.carNo">未填写</text>
|
|
<text v-else>{{user.carNo}}</text> <uni-icons type="right" size="16"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="box-hang" @click="goEdit(3)">
|
|
<view class="">会员支付设置</view>
|
|
<view class="dis"> <text>已设置</text> <uni-icons type="right" size="16"></uni-icons> </view>
|
|
</view> -->
|
|
|
|
<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel="cancel1"
|
|
@confirm="confirm1"></u-datetime-picker>
|
|
<u-picker :show="show1" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import request from "../../utils/request";
|
|
import upload from '@/utils/upload.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: '',
|
|
// 用户信息
|
|
user: {
|
|
// 用户头像
|
|
avatar: "",
|
|
},
|
|
// url信息
|
|
baseUrl: this.$baseUrl,
|
|
columns: [
|
|
['全部类型', '消费有礼', '会员充值']
|
|
],
|
|
show: false,
|
|
show1: false,
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getUser()
|
|
},
|
|
components: {
|
|
|
|
},
|
|
methods: {
|
|
|
|
confirm(e) {
|
|
this.show1 = false
|
|
},
|
|
cancel() {
|
|
this.show1 = false
|
|
},
|
|
timestampToString(timestamp) {
|
|
// 将时间戳转换为Date对象
|
|
const date = new Date(timestamp);
|
|
// 使用toLocaleDateString和toLocaleTimeString可以根据本地格式转换日期和时间
|
|
const dateString = date.toLocaleDateString()
|
|
const timeString = date.toLocaleTimeString();
|
|
// 返回日期和时间的组合
|
|
return date.getFullYear() + '-' + (date.getMonth() + 1);
|
|
},
|
|
confirm1(e) {
|
|
this.show = false
|
|
},
|
|
cancel1() {
|
|
this.show = false
|
|
},
|
|
// 用户选择头像
|
|
onChooseAvatar(e) {
|
|
let _this = this;
|
|
let tempFilePath = e.detail.avatarUrl //上传的图片地址
|
|
let maxSizeInBytes = 1024 * 1024 //限制大小
|
|
uni.getFileInfo({
|
|
filePath: tempFilePath,
|
|
success(res) {
|
|
let fileSize = res.size
|
|
if (fileSize > maxSizeInBytes) {
|
|
uni.showToast({
|
|
title: "请上传小于1MB的图片",
|
|
icon: "error"
|
|
})
|
|
return
|
|
}
|
|
console.log(tempFilePath)
|
|
// 将图片上传服务器
|
|
upload({
|
|
url: '/clientApi/file/upload',
|
|
filePath: tempFilePath,
|
|
}).then((res) => {
|
|
console.log('images', res.data.fileName);
|
|
_this.user.avatar = res.data.fileName
|
|
_this.editUser()
|
|
})
|
|
},
|
|
})
|
|
},
|
|
// 用户选择头像
|
|
onChooseAvatar1(e) {
|
|
let _this = this;
|
|
//从本地相册选择图片或使用相机拍照
|
|
uni.chooseImage({
|
|
sourceType: ['album', 'camera'], //选择方式相册或者相机
|
|
success: (res) => {
|
|
console.log('图片', res)
|
|
var tempFilePath = res.tempFilePaths;
|
|
var filePath = tempFilePath[0];
|
|
console.log(filePath); //输出本地头像路径
|
|
//调用上传下载api
|
|
// 将图片上传服务器
|
|
upload({
|
|
url: '/clientApi/file/upload',
|
|
filePath: filePath,
|
|
}).then((res) => {
|
|
console.log('images', res.data.fileName);
|
|
_this.user.avatar = res.data.fileName
|
|
_this.editUser()
|
|
})
|
|
}
|
|
});
|
|
},
|
|
// 修改用户信息
|
|
editUser() {
|
|
request({
|
|
url: 'business/userManager/user/edit',
|
|
method: 'put',
|
|
data: this.user,
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
this.getUser()
|
|
}
|
|
})
|
|
},
|
|
// 跳转修改页面
|
|
goEdit(val) {
|
|
uni.navigateTo({
|
|
url: '/pagesMy/editUser/index?editType=' + val,
|
|
})
|
|
},
|
|
// 查询当前登录用户信息
|
|
getUser() {
|
|
request({
|
|
url: 'business/userManager/user/getUser',
|
|
method: 'get',
|
|
}).then(res => {
|
|
if (res.data != null && res.data != "" && res.data != undefined) {
|
|
this.user = res.data
|
|
}
|
|
})
|
|
},
|
|
goBack() {
|
|
uni.navigateTo({
|
|
url: "/pages/my/my"
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background: #f4f5f6;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
padding-top: 88px;
|
|
}
|
|
|
|
.my-header {
|
|
width: 100%;
|
|
height: 88px;
|
|
background: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
color: #000;
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
padding-top: 40px;
|
|
|
|
.my-icons {
|
|
width: 20px;
|
|
|
|
}
|
|
|
|
position: fixed;
|
|
top: 0px;
|
|
}
|
|
|
|
.box-hang {
|
|
background-color: white;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 15px 10px;
|
|
border-bottom: 1px solid #f4f5f6;
|
|
}
|
|
|
|
.touxiang {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
// background-color: #f4f5f6;
|
|
}
|
|
|
|
.dis {
|
|
color: #a69999;
|
|
}
|
|
</style> |