<template>
	<view class="container">
		
		<image class="topBack" :src="shopExtend?shopExtend.value:'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/myTopBack.png'" mode="aspectFill"></image>
		<view class="myContent">
			<view class="my_info flex-between">
				<view class="my_info_left">
					<image class="my_info_left_head" :src="userInfo.headImg" mode="aspectFill"></image>
					<view class="name">{{userInfo.nickName || '无'}}</view>
				</view>
				<image class="my_info_right_qr" @click="clickEvent" v-if="shopInfo.isVip!=0" :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_qRcode.png'" mode="aspectFill"></image>
				<view class="my_info_right" @click="clickEvent" v-else>
					<text>免费入会</text> 
				</view>
			</view>
			
			
			<view class="my_item my_assets">
				<view class="my_item_title">我的资产</view>
				<view class="my_assets_list">
					<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myAssetsList" :key="index">
						<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
						<view class="my_list_item_name">{{item.name}}</view>
						<view class="my_list_item_num">{{item.num || '**'}}</view>
					</view>
				</view>
			</view>
			
			<view class="my_item my_fun">
				<view class="my_item_title">我的功能</view> 
				<view class="my_fun_list">
					<view class="my_list_item" @click="clickTo(item,index)" v-for="(item,index) in myFunList" :key="index">
						<view class="my_list_item_left">
							<image class="my_list_item_icon" :src="item.icon" mode="aspectFill"></image>
							<view class="my_list_item_name">{{item.name}}</view>
						</view>
						<view class="my_list_item_right">
							<u-icon name="play-right-fill" color="#999999" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>
			
		</view>

	</view>
</template>

<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	export default {
		components: {
		},
		data() {
			return {
				userInfo: {},
				teblist: [],
				myAssetsList: [
					{ name: "储值", type: "recharge", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/storedValue.png"},
					// { name: "积分", type: "", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/points.png"},
					{ name: "优惠券", type: "my_coupon", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/coupon.png"},
					// { name: "权益卡", type: "", num: 0, icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/equityCard.png"}
				],
				myFunList: [
					{ name: "我的优惠券", type: "my_coupon", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_coupon.png"},
					{ name: "我的订单", type: "my_order", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_order.png"},
					// { name: "收货地址", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_address.png"},
					{ name: "个人资料", type: "my_info", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/personal.png"},
					{ name: "我的会员卡", type: "my_member", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/my_member.png"},
					// { name: "关于", type: "", icon: "https://czg-qr-order.oss-cn-beijing.aliyuncs.com/my/inRegard.png"},
				],
				shopInfo: {},
				shopExtend: null,
			};
		},
		onLoad() {
			uni.cache.set('forceUpdate',1)
		},
		computed: {
			HeighT() { //手机类型的尺寸
				return this.$store.getters.is_BarHeight
			},
		},
		mounted() {

		},
		
		onShow() {
			this.init_fn()
			this.loginwxuserInfo()
			if (uni.cache.get('shopId') ) {
				this.getShopInfo();
				this.getShopExtend();
			} else{
				
			}
		},
		methods: {
			// 下面初始数据
			init_fn() {
				   
				
			},
			
			/**
			 * 获取背景图
			 */
			async getShopExtend () {
				let res = await this.api.getShopExtend({
					shopId: uni.cache.get('shopId'),
					autokey: "my_bg" //index_bg my_bg member_bg shopInfo_bg
				})
				if ( res.code == 0) {
					this.shopExtend = res.data;
				}
			},
			
			/**
			 * 获取用户信息
			 */
			async loginwxuserInfo() {
				let res = await this.api.loginwxuserInfo({
					// userId: 109
					userId: uni.cache.get('userInfo').id
				})
				console.log(res)
				if (res.code == 0) {
					uni.cache.set('userInfo', res.data);
					this.userInfo = res.data;
				}
			},
			
			
			async tbPlatformDict() {
				let res = await this.api.tbPlatformDict({
					type: 'ownMenu'
				})
				// console.log(res)
				if (res.code == 0) {
					this.teblist = res.data
				}
			},
			
			clickphone() {
				uni.makePhoneCall({
					phoneNumber: uni.cache.get('userInfo').custPhone
				});
			},
		
			loginClick() {
				uni.cache.clear();
				uni.reLaunch({
					url: '/pages/login/login'
				});
			},
			
			/**
			 * 获取店铺信息
			 */
			async getShopInfo() {
				let res = await this.api.shopUserInfo({
					"shopId": uni.cache.get('shopId'),
					"userId": uni.cache.get('userInfo').id,
				})
				if (res.code == 0) {
					this.shopInfo = res.data
				}
				if ( res.data.isVip == 0 ) {
					this.memberOpen = true;
					return;
				}
			},
			
			/**
			 * 查看二维码
			 */
			clickEvent() {
				if (uni.cache.get('shopId') && uni.cache.get('token')) {
					if ( this.shopInfo.isVip == 0 ) {
						uni.pro.navigateTo('member/memberdetails', {
							shopId_id: uni.cache.get('shopId')
						})
					} else {
						uni.navigateTo({
							url: '/pages/pay_code/pay_code?shopInfo=' + JSON.stringify(this.shopInfo)
						})
					}
				} else{
					uni.pro.navigateTo('member/list', {
						type: 'user_payCode'
					})
				}
				
				
			},
		
			clickTo(item, index) {
				let shopId = null;
				if (uni.cache.get('shopId') && uni.cache.get('token')) {
					shopId = uni.cache.get('shopId');
				} else{
					
				}
				switch (item.type) {
					case 'my_order':
						uni.switchTab({
							url: '/pages/order/order'
						});
						break
					case 'my_member':
						uni.pro.navigateTo('member/list')
						break
					case 'recharge':
						if (uni.cache.get('shopId') && uni.cache.get('token')) {
							uni.pro.navigateTo('member/index', {
								shopId: uni.cache.get('shopId'),
								type: 'index',
							})
						} else{
							uni.pro.navigateTo('member/list', {
								type: 'user_recharge'
							})
						}
					
						break
					case 'my_coupon': //内部页面
						uni.pro.navigateTo('user/coupon')
						break;
					case 'my_info': //内部页面
						uni.pro.navigateTo('user/my_info')
						break;
					case 'scan_applet':
						uni.navigateToMiniProgram(JSON.parse(item.value))
						break
					
					case 'absolute': //外链url
						uni.navigateTo({
							url: `/pages/webview/webview?url=${item.menuUrl}`
						});
						break;
				}
			},
			
		}
	};
</script>

<style scoped lang="scss">
	
	.topBack{
		width: 100%;
		height: 400rpx;
		position: absolute;
	}
	
	.myContent{
		position: relative;
		z-index: 1;
		padding: 298rpx 20rpx 0 20rpx;
		.my_info{
			height: 172rpx;
			align-items: center;
			background-color: #fff;
			padding: 0 32rpx;
			border-radius: 18rpx;
			.my_info_left{
				display: flex;
				align-items: center;
				.my_info_left_head{
					width: 84rpx;
					height: 84rpx;
					margin-right: 18rpx;
					border-radius: 50%;
				}
				.name{
					font-weight: 400;
					font-size: 36rpx;
					color: #333333;
				}
			}
			.my_info_right{
				width: 136rpx;
				height: 48rpx;
				background-color: #E3AD7F;
				border-radius: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			.my_info_right_qr{
				width: 60rpx;
				height: 60rpx;
			}
			
		}
		
		
		
		.my_item{
			background-color: #fff;
			padding: 22rpx 32rpx;
			border-radius: 18rpx;
			margin-top: 16rpx;
			.my_item_title{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				font-family: Source Han Sans CN, Source Han Sans CN;
			}
		}
		
		.my_assets{
			.my_item_title{
				margin-bottom: 26rpx;
			}
			.my_assets_list{
				display: flex;
				justify-content: space-around;
				padding: 0 38rpx;
				.my_list_item{
					display: flex;
					flex-direction: column;
					align-items: center;
					.my_list_item_icon{
						width: 52rpx;
						height: 44rpx;
					}
					.my_list_item_name{
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-top: 16rpx;
						margin-bottom: 16rpx;
					}
					.my_list_item_num{
						font-weight: 400;
						font-size: 20rpx;
						color: #E3AD7F;
						
					}
				}
			}
		}
		
		.my_fun{
			.my_item_title{
				margin-bottom: 18rpx;
			}
			.my_fun_list{
				display: flex;
				flex-direction: column;
				.my_list_item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 24rpx 0 26rpx 0;
					border-bottom: 1rpx solid #E5E5E5;
					.my_list_item_left{
						display: flex;
						align-items: center;
						.my_list_item_icon{
							width: 44rpx;
							height: 44rpx;
							margin-right: 18rpx;
						}
						.my_list_item_name{
							font-weight: 400;
							font-size: 28rpx;
							color: #333333;
						}
					}
				}
				.my_list_item:last-child{
					border-bottom: none;
				}
			}
		}
	}
	

</style>