cashier_weapp/pages/user/user.vue

<template>
	<view class="container">
		<view class="user-info-wrap">
			<view style="width: 36px; height: 36px;border-radius: 10rpx;">
				<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar'
					style="padding: 0;margin: 0; width: 36px; height: 36px;border-radius: 10rpx;">
					<image style="width: 36px; height: 36px;" v-if="userInfo.avatar" :src="userInfo.avatar"
						mode="aspectFill">
					</image>
					<image style="width: 36px; height: 36px;" v-else src="@/static/avatar.png" mode="aspectFill">
					</image>
				</button>
			</view>
			<view class="info flex-colum-start">
				<text class="phone">{{userInfo.telephone || '无'}}</text>
			</view>
		</view>
		<view class="card">
			<view class="header-wrap">
				<view class="header">
					<text class="title">我的订单</text>
					<view class="more" @click="orderHandle(1)">
						<text class="t">全部订单</text>
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</view>
			</view>
			<view class="order-menu">
				<view class="item" @click="orderHandle(2)">
					<image class="icon" src="@/static/user/user_icon1.png" mode="aspectFit"></image>
					<text class="t">待付款</text>
				</view>
				<view class="item" @click="orderHandle(3)">
					<image class="icon" src="@/static/user/user_icon2.png" mode="aspectFit"></image>
					<text class="t">待发货</text>
				</view>
				<view class="item" @click="orderHandle(4)">
					<image class="icon" src="@/static/user/user_icon3.png" mode="aspectFit"></image>
					<text class="t">已完成</text>
				</view>
				<view class="item" @click="orderHandle(5)">
					<image class="icon" src="@/static/user/user_icon4.png" mode="aspectFit"></image>
					<text class="t">退款</text>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="header-wrap">
				<view class="header">
					<text class="title">更多服务</text>
				</view>
			</view>
			<view class="order-menu">
				<navigator class="item" hover-class="none" url="/pages/user/coupon">
					<!-- <image class="icon" src="@/static/user_icon5.png" mode="aspectFit"></image> -->
					<text class="t">优惠券</text>
				</navigator>
				<view class="item">
					<!-- <image class="icon" src="@/static/user_icon6.png" mode="aspectFit"></image> -->
					<text class="t">寄存记录</text>
				</view>
				<view class="item">
					<!-- <image class="icon" src="@/static/user_icon7.png" mode="aspectFit"></image> -->
					<text class="t">储值明细</text>
				</view>
				<view class="item">
					<!-- <image class="icon" src="@/static/user_icon8.png" mode="aspectFit"></image> -->
					<text class="t">设置</text>
				</view>
			</view>
		</view>
		<view class="version-wrap">
			<!-- <text class="t">版本号：2.0.0</text> -->
			<text class="t">陕西超掌柜科技有限公司</text>
		</view>
	</view>
</template>

<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	export default {
		data() {
			return {
				shopUser: {},
				userInfo: {},
				shopInfo: {}
			};
		},
		onShow() {
			if (uni.cache.get('token')) {
				this.loginwxuserInfo()
			}

		},
		methods: {
			blurname(e) {
				console.log(e);
				this.userlist.nickname = e.detail.value
			},
			async loginwxuserInfo() {
				let res = await this.api.loginwxuserInfo({
					userId: uni.cache.get('userInfo').id,
					shopId: uni.cache.get('shopUser').shopId
				})
				if (res.code == 0) {
					uni.cache.set('userInfo', res.data.userInfo);
					uni.cache.set('shopUser', res.data.shopUser);
					uni.cache.set('shopInfo', res.data.shopInfo);
					this.shopUser = uni.cache.get('shopUser')
					this.userInfo = uni.cache.get('userInfo')
					this.shopInfo = uni.cache.get('shopInfo')
				}
			},
			// / 更换头像
			onChooseAvatar(e) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				console.log(e.detail.avatarUrl)
				let file = e.detail.avatarUrl;
				uploadImage(file, 'avatar',
					result => {
						//将上传后的图片以对象（官方要求的格式）的形式存入uni-file-picker的value值imageValue（imageValue值的结构为数组包对象）用于图片回显
						// let objAge = {
						// 	'url': result,
						// 	'extname': 'png',
						// 	'name': 'imgss.png'
						// };
						// this.userlist.avatar.push(objAge)
						this.userInfo.avatar = result
						console.log(this.userInfo.avatar)
						uni.hideLoading()
					}, result => {
						uni.hideLoading()
					})
			},
			orderHandle(type) {
				this.useStorage.set('orderType', type);
				uni.switchTab({
					url: '/pages/order/order'
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.user-info-wrap {
		padding: $paddingSize + 20upx $paddingSize;
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 280rpx;
		background: #FFD158;
		border-radius: 0rpx 0rpx 40rpx 0rpx;

		.avatar {
			$size: 120upx;
			width: $size;
			height: $size;
			border-radius: 50%;
			border: 2px solid #fff;
		}

		.info {
			flex: 1;
			padding-left: $paddingSize;
			display: flex;
			flex-direction: column;

			.name {
				input {
					text-align: left;
					font-size: 32upx;
				}
			}

			.phone {
				padding-top: 8upx;
			}
		}
	}

	.card {
		border-radius: 20upx;
		background-color: #fff;
		margin-bottom: $paddingSize;

		.header-wrap {
			padding: 0 $paddingSize;
		}

		.header {
			padding: 38upx 0;
			display: flex;
			justify-content: space-between;
			border-bottom: 1upx solid #f2f2f2;

			.more {
				display: flex;
				align-items: center;

				.t {
					color: #999;
					margin-right: 8upx;
				}
			}
		}

		.order-menu {
			display: flex;

			.item {
				flex: 1;
				padding: 38upx 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon {
					$size: 68upx;
					width: $size;
					height: $size;
				}

				.t {
					padding-top: 20upx;
				}
			}
		}
	}

	.version-wrap {
		padding: 100upx 0;
		display: flex;
		flex-direction: column;
		align-items: center;

		.t {
			color: #999;
		}
	}
</style>