CBB3/pages/user/userinfo/index.vue

<style>
	page {
		background: #f5f5f5
	}

	.user-line {
		padding: 0 15px;
		height: 70px;
		background: #fff;
		border-top: 1px #f5f5f5 solid;
		display: flex;
		align-items: center
	}

	.ul-left {
		color: #585858;
		font-size: 14px
	}

	.ul-right {
		width: 60%;
		margin-left: auto;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}

	.ulr-name {
		color: #9b9b9b;
		font-size: 13px
	}

	.ulr-img {
		width: 50px;
		height: 50px
	}

	.ulr-img image {
		width: 100%;
		height: 100%;
		border-radius: 100%
	}

	.ulr-jiantou {
		width: 16px;
		height: 16px;
		margin-left: 10px
	}

	.ulr-jiantou image {
		width: 100%;
		height: 100%
	}
</style>
<template>
	<view id="box">
		<view class="user-line">
			<view class="ul-left"><text>头像</text></view>
			<view class="ul-right" @tap="upImgs">
				<view class="ulr-img">
					<image :src="userInfo.avatar ? userInfo.avatar : '/static/img/user-avatar2.png'" mode="aspectFill">
					</image>
				</view>
				<view class="ulr-jiantou">
					<image src="/static/img/ic_next.png"></image>
				</view>
			</view>
		</view>
		<view class="user-line" @tap="tapOpen" :data-url="'/pages/user/userinfo/mobile'">
			<view class="ul-left"><text>手机号码</text></view>
			<view class="ul-right">
				<view class="ulr-name">
					<text>{{userInfo.mobile}}</text>
				</view>

			</view>
		</view>

		<view class="user-line" @tap="tapOpen" :data-url="'/pages/user/userinfo/area?val='+ userInfo.region">
			<view class="ul-left"><text>地区</text></view>
			<view class="ul-right">
				<view class="ulr-name">
					<text>{{userInfo.region || "请输入省市区"}}</text>
				</view>
				<view class="ulr-jiantou">
					<image src="/static/img/ic_next.png"></image>
				</view>
			</view>
		</view>

		<view class="user-line" @tap="tapOpen" :data-url="'/pages/user/userinfo/nickname?val='+ userInfo.nickname">
			<view class="ul-left"><text>昵称</text></view>
			<view class="ul-right">
				<view class="ulr-name">
					<text>{{userInfo.nickname}}</text>
				</view>
				<view class="ulr-jiantou">
					<image src="/static/img/ic_next.png"></image>
				</view>
			</view>
		</view>


		<view class="user-line" @tap="tapOpen" data-url="/pages/user/address/address">
			<view class="ul-left"><text>地址管理</text></view>
			<view class="ul-right">
				<view class="ulr-name">
					<text></text>
				</view>
				<view class="ulr-jiantou">
					<image src="/static/img/ic_next.png"></image>
				</view>
			</view>
		</view>

		<view class="user-line" @tap="tapOpen" data-url="/pages/user/userinfo/password">
			<view class="ul-left"><text>修改密码</text></view>
			<view class="ul-right">
				<view class="ulr-name">
					<text></text>
				</view>
				<view class="ulr-jiantou">
					<image src="/static/img/ic_next.png"></image>
				</view>
			</view>
		</view>









	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		computed: mapState(['user']),
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			...mapMutations(['loginOut']),
			getData() {
				this
					.request
					.post("userInfo")
					.then(res => {
						if (res.code == 200) {
							this.userInfo = res.data;
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(err => {
						this.utils.Tip("网络错误，请稍后尝试");
					});
			},
			/**
			 * 打开文件
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				console.log(ev)
				let url = ev.currentTarget.dataset.url
				uni.navigateTo({
					url: url
				});
			},


			upImgs: function() {
				// #ifdef APP-PLUS
				this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
					// if (res !== 1) return;
					console.log(res,'11');
					this.upImg();
				});
				return;
				// #endif
				// #ifndef APP
				this.upImg();
				// #endif
			},

			upImg: function() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: (res) => {
						let img = res.tempFilePaths[0];
						this.utils.loadIng();
						this
							.request
							.post("qiniu")
							.then(res => {
								uni.uploadFile({
									url: 'https://up-z0.qiniup.com',
									filePath: img,
									name: 'file',
									formData: {
										'key': res.data.mk_str,
										'token': res.data.token
									},
									success: (uploadFileRes) => {
										this.request.post("saveAvatar", {
											img: res.data.url
										}).then(
											(res2) => {
												uni.hideLoading();
												if (res2.code == 200) {
													this.userInfo.avatar = res.data
													.url;
												} else {
													this.utils.Tip(res2.msg);
												}
											}).catch(err => {
											this.utils.Tip("网络错误，请稍后尝试");
										});
									},
									fail: () => {
										uni.hideLoading();
										this.utils.Tip("上传失败，请重新尝试");
									}
								});
							})
							.catch(err => {
								uni.hideLoading();
								this.utils.Tip("请重新上传图片");
							});
					}
				});
			},
		},
	}
</script>