<template>
	<view>
		<!-- <u-swiper :list="banners" height="460" radius="0" :indicator="banners.length > 1" imgMode="widthFix"></u-swiper> -->
		
		<view class="container">
			<view class="after"></view>
			<view class="onecontent flex-between">
				<view class="onecontentone flex-start">
					<image :src="userInfo.headImg" mode="aspectFill">
						<text>{{userInfo.nickName || '无'}}</text>
				</view>
				<view class="onecontenttow flex-start">
					<view class="onecontenttowring flex-colum" @click="memberindex(0)">
						<text class="onecontenttowringone">{{usershopUserinfo.amount || '0.00'}}</text>
						<text class="onecontenttowringtow">余额</text>
					</view>
					<!-- <view class="onecontenttowring flex-colum">
						<text class="onecontenttowringone">282</text>
						<text class="onecontenttowringtow">积分</text>
					</view> -->
					<view class="onecontenttowring flex-colum" @click="memberindex(1)">
						<image class="onecontenttowringone image"
							src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/rwm.png" mode="aspectFill">
						</image>
						<text class="onecontenttowringtow">会员码</text>
					</view>
				</view>
			</view>
			<view class="towcontent flex-between">
				<view class="towcontentitem flex-colum" @click="scanCodehandle(0)">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/Instore.png" mode="widthFix"
						style="width: 86.88rpx; height: 140.94rpx;"></image>
					<text class="towcontentitemtext">店内就餐</text>
				</view>
				<view class="towcontentitem flex-colum" @click="scanCodehandle(1)">
					<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/takeaway.png" mode="widthFix"
						style="width: 164rpx; height: 164rpx"></image>
					<text class="towcontentitemtext">会员充值</text>
				</view>
			</view>
			<view class="footer-banner">
				<!-- 	<u-swiper :list="footerBanners" radius="20" height="274" :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: ['https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/banner1.png'],
				footerBanners: ['https://czg-qr-order.oss-cn-beijing.aliyuncs.com/index/footer_banner1.png'],
			};
		},
		props: {
			usershopUserinfo: {
				type: Object,
				default () {
					return {
						amount: '',
						shopName: ""
					}
				}
			},
			userInfo: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		methods: {
			scanCodehandle(i) {
				if (i == 0) {
					uni.scanCode({
						success: (res) => {
							let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
							uni.cache.set('tableCode', tableCode)
							if (tableCode) {
								uni.pro.navigateTo('order_food/order_food')
							}
							// let tableCode = this.getQueryString(decodeURIComponent(res.result), 'code')
							// if (tableCode) {
							// 	uni.pro.navigateTo('order_food/order_food', {
							// 		tableCode: tableCode,
							// 	})
							// }
						}
					})
					// uni.navigateTo({
					// url:'/pages/order_food/order_food'
					// })
				} else {
					// uni.pro.navigateTo('pay_code/pay_code?shopInfo=', {
					// 	shopName: this.usershopUserinfo.shopName,
					// 	amount: this.usershopUserinfo.amount,
					// 	shopId: uni.cache.get('shopUser')
					// })
					uni.pro.navigateTo('member/memberdetails', {
						shopId_id: uni.cache.get('shopUser'),
					})
				}
			},
			memberindex(i) {
				if (i == 0) {
					uni.pro.navigateTo('member/memberdetails', {
						shopId_id: uni.cache.get('shopUser'),
					})
				} else {
					// uni.pro.navigateTo('pay_code/pay_code?shopInfo=', {
					// 	shopName: this.usershopUserinfo.shopName,
					// 	amount: this.usershopUserinfo.amount,
					// 	shopId: uni.cache.get('shopUser')
					// })
					let data = {
						shopName: this.usershopUserinfo.shopName,
						amount: this.usershopUserinfo.amount,
						shopId: uni.cache.get('shopUser')
					}
					uni.navigateTo({
						url: '/pages/pay_code/pay_code?shopInfo=' + JSON.stringify(data)
					})
				}


			},
			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">
	page {
		background: #F6F8FA;
	}

	.container {
		border-radius: 0 0 0 40rpx;
		position: relative;
		padding: 0 28rpx;

		.after {
			position: absolute;
			top: 46rpx;
			right: 0;
			width: 40rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			background-image: radial-gradient(160rpx at 0px 0px, rgba(0, 0, 0, 0) 40rpx, #f9f9f9 40rpx);
		}

		.onecontent {
			width: 100%;
			margin-top: -86rpx;
			position: relative;
			height: 172rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 14rpx;
			padding: 0 30rpx;

			.onecontentone {
				image {
					width: 108rpx;
					height: 108rpx;
					background: #FFFFFF;
					border: 2rpx solid #707070;
					border-radius: 50%;
				}

				text {
					margin-left: 12rpx;
					width: 146rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.onecontenttow {
				.onecontenttowring {
					margin-left: 32rpx;
					height: 110rpx;
					justify-content: flex-end;

					.onecontenttowringone {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					.image {
						width: 42rpx;
						height: 42rpx;
					}

					.onecontenttowringtow {
						margin-top: 20rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}

		.towcontent {
			margin-top: 48rpx;
			position: relative;
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			height: 314rpx;
			padding: 0 90rpx 0 120rpx;

			&::after {
				position: absolute;
				content: '';
				display: inline-block;
				height: 188rpx;
				width: 2rpx;
				left: 50%;
				margin-left: -1rpx;
				background: #D8D8D8;
			}

			.towcontentitem {
				.towcontentitemtext {
					margin-top: 26rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
			}
		}

		.footer-banner {
			margin-top: 48upx;
		}
	}
</style>