ec.uniapp-master/pages/user/my/setting.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" title="设置"></lf-nav>
		<view class="lf-p-l-32 lf-p-r-32 lf-bg-white">
			<view class="set-tag lf-border-bottom" @click="$url('/pages/user/my/editname')">
				<view class="lf-font-28 lf-color-black">
					昵称
				</view>
				<view class="lf-flex">
					<view class="lf-font-28 lf-color-555">{{ userInfo.nick_name || userInfo.mobile }}</view>
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
		<view class="lf-p-l-32 lf-p-r-32 lf-bg-white">
			<view class="set-tag lf-border-bottom" @click="changeImage">
				<view class="lf-font-28 lf-color-black">
					头像
				</view>
				<view class="lf-flex">
					<view class="lf-row-center">
						<image :src="userInfo.avatar" mode="aspectFill" class="set-img" v-if="userInfo.avatar"></image>
						<image src="/static/images/empty.png" mode="aspectFill" class="set-img" v-else></image>
					</view>
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
		<view class="lf-p-l-32 lf-p-r-32 lf-bg-white">
			<view class="set-tag lf-border-bottom" @click="$url('/pages/user/my/vipinfo')">
				<view class="lf-font-28 lf-color-black">
					会员资料
				</view>
				<view class="lf-flex">
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
		<view class="lf-p-l-32 lf-p-r-32 lf-bg-white">
			<view class="set-tag" @click="$url('/pages/address/list/list')">
				<view class="lf-font-28 lf-color-black">
					地址管理
				</view>
				<view class="lf-flex">
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
		<self-line/> 
		<view class="lf-p-l-32 lf-p-r-32 lf-bg-white">
			<view class="set-tag lf-border-bottom" @click="$url('/pages/user/my/verificationPhone')">
				<view class="lf-font-28 lf-color-black">
					修改手机号
				</view>
				<view class="lf-flex">
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
		<view class="lf-p-l-32 lf-p-r-32 lf-bg-white">
			<view class="set-tag" @click="$url('/pages/user/my/setPassword')">
				<view class="lf-font-28 lf-color-black">
					支付密码设置
				</view>
				<view class="lf-flex">
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
		<self-line/> 
		<view class="lf-p-l-32 lf-p-r-32 lf-bg-white">
			<view class="set-tag lf-border-bottom" @click="$url('/pages/user/agreement/agreement')">
				<view class="lf-font-28 lf-color-black">
					关于我们
				</view>
				<view class="lf-flex">
					<text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
		<view class="lf-p-l-32 lf-p-r-32 lf-bg-white">
			<view class="set-tag" @click="makePhoneCall">
				<view class="lf-font-28 lf-color-black">
					客服电话
				</view>
				<view class="lf-flex">
					<view class="lf-font-28 lf-color-555">0315-7483482</view><text class="lf-iconfont icon-xiangyou lf-font-24 lf-m-l-10 lf-color-777"></text>
				</view>
			</view>
		</view>
		
		<button class="set-btn" hover-class="lf-opacity" @click="signOut">退出账号</button>
	</view>
</template>

<script>
	import { config, getUpdateUserInfo } from '@/common/js/utils.js';
	export default {
		data(){
			return {
				userInfo: {},
				token: '',
				shou_count: 0
			}
		},
		onLoad(){
			// var userInfo = this.$cookieStorage.get('user_info');
			// this.userInfo = userInfo || {};
			var token = this.$cookieStorage.get('user_token');
			this.token = token;
			this.getMeInfo();
		},
		onShow(){
			this.shou_count++;
			if(this.shou_count > 1){
				this.getMeInfo();
			}
		},
		methods: {
			// 获取页面信息
			getMeInfo(){
				uni.showLoading({
					title: '正在获取资料'
				})
				this.$http.get({
					api: 'api/me',
					header: {
						Authorization: this.token
					}
				}).then(res => {
					this.userInfo = res.data.data;
					uni.hideLoading();
				}).catch(err => uni.hideLoading())
			},
			// 上传更换用户头像
			changeImage: function() {
				uni.chooseImage({
					 count: 1,
					 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					 sourceType: ['album'], //从相册选择
					success: res => {
						var tempFilePaths = res.tempFilePaths;
						this.newImage = tempFilePaths[0];
						
						uni.uploadFile({
							header: {
								Authorization: this.token
							},
							url: config.GLOBAL.baseUrl + 'api/users/upload/avatar',
							filePath: tempFilePaths[0],
							fileType: 'image',
							name: 'avatar_file',
							success: res => {
								var result = JSON.parse(res.data); 
								// this.setData({
								// 	'userInfo.avatar': result.data.url
								// });
								this.userInfo.avatar = result.data.url;
								getUpdateUserInfo(this.token);
							}
						})
					}
				});
			},
			// 拨打电话
			makePhoneCall(){
				uni.makePhoneCall({
					phoneNumber: String('13132794740')
				})
			},
			signOut(){
				uni.showModal({
					title: '温馨提示',
					content: '您确定退出登录吗？',
					success: result => {
						if(result.confirm){
							this.$cookieStorage.clear('user_token');
							this.$msg('操作成功', {icon: 'success'}).then(() => {
								this.$toBack();
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F8F8F8;
	}
</style>
<style scoped lang="scss">
	.set-btn {
		width: 550rpx;
		height: 100rpx;
		background: #15716E;
		border-radius: 50rpx;
		margin: 40rpx auto;
		font-size: 32rpx;
		color: white;
		line-height: 100rpx;
	}
	.set-img {
		width: 41rpx;
		height: 41rpx;
		border-radius: 50%;
	}
	.set-tag {
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
</style>