cashier_weapp/pages/index/index.vue

<template>
	<view>
		<view class="banner-wrap">
			<u-swiper :list="banners" height="440" radius="0" :indicator="banners.length > 1"
				imgMode="widthFix"></u-swiper>
		</view>
		<view class="container">
			<view class="user-info">
				<view class="top">
					<view class="col">
						<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>
						<text class="t">{{userInfo.nickName}}</text>
					</view>
					<navigator class="ewm-wrap" url="/pages/pay_code/pay_code" hover-class="none">
						<image class="ewm" src="../../static/ewm.png" mode="aspectFit"></image>
						<text class="t">会员码</text>
					</navigator>
				</view>
				<view class="bottom">
					<view class="col">
						<text class="t1 num">{{shopUser.amount || '0'}}</text>
						<text class="t2">余额</text>
					</view>
					<view class="col">
						<text class="t1 num">{{shopUser.levelConsume || '0'}}</text>
						<text class="t2">积分</text>
					</view>
				</view>
			</view>
			<view class="menu-wrap">
				<view class="top-wrap">
					<view class="item" @click="scanCodehandle">
						<image class="bg" src="../../static/index_m2.png" mode="widthFix"></image>
						<view class="btn">
							<text class="t">扫码点餐</text>
						</view>
					</view>
					<view class="item" @click="memberindex">
						<image class="bg" src="../../static/index_m1.png" mode="widthFix"></image>
						<view class="btn">
							<text class="t">会员充值</text>
						</view>
					</view>
				</view>
			</view>
			<view class="footer-banner">
				<u-swiper :list="footerBanners" radius="20" height="160" :indicator="banners.length > 1"
					imgMode="widthFix"></u-swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	export default {
		data() {
			return {
				banners: [require('@/static/banner1.png')],
				footerBanners: [require('@/static/footer_banner1.png')],
				shopUser: {},
				userInfo: {},
				shopInfo:{}
			};
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			if (!uni.cache.get('token')) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
			// #endif
		},
		onShow() {
			if (uni.cache.get('token')) {
				this.loginwxuserInfo()
			}else{
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			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')
				}
			},
			scanCodehandle() {
				uni.scanCode({
					success: (res) => {
						let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
						if (tableCode) {
							uni.pro.navigateTo('order_food/order_food', {
								tableCode: tableCode,
							})
						}
					}
				})

			},
			memberindex() {
				uni.pro.navigateTo('member/index')
			},
			getQueryString(url, name) { //解码
				var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i')
				var r = url.substr(1).match(reg)
				if (r != null) {
					return r[2]
				}
				return null;
			},
			
			// / 更换头像
			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()
					})
			},
		}

	};
</script>

<style scoped lang="scss">
	.container {
		padding: 40upx;
	}

	.user-info {
		background-color: #fff;
		padding: 40upx;
		border-radius: 20upx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1upx solid #ececec;
			padding-bottom: 42upx;

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

				.t {
					margin-left: 20upx;
				}
			}

			.ewm-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;

				.ewm {
					$size: 50upx;
					width: $size;
					height: $size;
				}

				.t {
					font-size: 20upx;
					padding-top: 8upx;
				}
			}
		}

		.bottom {
			padding-top: 40upx;
			display: flex;

			.col {
				flex: 1;
				display: flex;
				align-items: center;
				flex-direction: column;

				.t1 {
					font-size: 38upx;
				}
			}
		}
	}

	.menu-wrap {
		padding: 40upx 0 0 0;
		$gap: 20upx;

		.top-wrap {
			display: flex;
			gap: $gap;

			.item {
				flex: auto;
				display: flex;
				align-items: center;
				flex-direction: column;
				background-color: #fff;
				border-radius: 20upx;
				position: relative;

				.bg {
					width: 100%;
					height: auto;
					border-radius: $gap;
				}

				.btn {
					margin-top: $gap;
					padding: $gap $gap * 2;
					border-radius: 100upx;
					display: flex;
					justify-content: center;
					font-size: 32upx;
					background-color: #fff;
					box-shadow: 0 12upx 12upx rgba(0, 0, 0, 0.05);
					position: absolute;
					bottom: $gap * 2;
					left: 50%;
					transform: translateX(-50%);
					white-space: nowrap;
				}
			}
		}
	}

	.footer-banner {
		padding-top: 20upx;
	}
</style>