<template>

	<view
		style="display: flex;flex-direction: column; height: 100vh;background: -webkit-linear-gradient(left,#FEA65F,#FB9440); box-sizing: border-box;"
		id="page">

		<view class="top">
			<NavBar ref="nav" navTitle=" " :showIcon="false" :start-change-height="page.startHeight"
				:end-change-height="page.endHeight">
			</NavBar>

			<view style="display: flex;flex-direction: row;align-items: center;
			margin-top: 25vw; margin-left: 8vw;">

				<image style="width: 70px;height: 70px;border-radius: 50%;" :src="userInfo.photo" @click="showDiaLog">
				</image>

				<view style="display: flex;flex-direction: column;margin-left: 10px;">
					<text style="font-size: 16px;color: #fff;" @click="showDiaLog">{{userInfo.nick}}</text>
					<text style="font-size: 14px;color: #fff;">{{userInfo.mobile}}</text>
				</view>

			</view>

		</view>

		<view
			style="background: #F7F7F7;flex-flow: 1; height: calc(100vh - 50vw - 48px); width: 100%; margin-top: -18vw;border-radius: 25px;">

			<scroll-view scroll-y="true"
				style=" height: 100%;  width: 100%; padding: 15px;border-radius: 25px; box-sizing: border-box;"
				bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">

				<!-- <view
					style=" display: flex;flex-direction: column;padding-top: 5vw;padding-left: 5vw;padding-right: 5vw;">

					<view style="display: flex;flex-direction: row;align-items: center;">

						<view
							style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center;">

							<image src="https://supervise.yxtsoft.com/lpk/image/reservation_icon.png"
								style="width: 30px;height: 30px;"></image>
							<text style="margin-top: 5px;">预约记录</text>
						</view>
						<view
							style="display: flex;flex-direction: column; flex: 1;justify-content: center; align-items: center;">

							<image src="https://supervise.yxtsoft.com/lpk/image/order_icon.png"
								style="width: 30px;height: 30px;"></image>
							<text style="margin-top: 5px;">订单</text>
						</view>
						<view
							style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center; ">

							<image src="https://supervise.yxtsoft.com/lpk/image/forward_icon.png"
								style="width: 30px;height: 30px;"></image>
							<text style="margin-top: 5px;">转赠记录</text>
						</view>
						<view
							style="display: flex;flex-direction: column; flex: 1;justify-content: center;align-items: center; ">

						</view>

					</view>
				</view> -->
				<!-- 预约记录 -->
				<view
					style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px;">

					<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">预约记录</text>

					<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

							<view style="position: relative;width: 35px;height: 35px;">
								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
									src="../../static/basket_icon.png" mode="aspectFill"></image>

								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 2px;
								  right: 0px;
								  padding: 2px 5px;
								  width: auto;">{{data.count}}</view>

							</view>
							<text style="font-size: 13px; color: #101010;margin-top: 5px;">全部预约</text>
						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

							<view style="position: relative;width: 35px;height: 35px;">
								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
									src="../../static/basket_icon.png" mode="aspectFill"></image>

								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 2px;
								  right: 0px;
								  padding: 2px 5px;
								  width: auto;">{{data.count}}</view>

							</view>
							<text style="font-size: 13px; color: #101010;margin-top: 5px;">待提菜</text>
						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

							<view style="position: relative;width: 35px;height: 35px;">
								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
									src="../../static/basket_icon.png" mode="aspectFill"></image>

								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 2px;
								  right: 0px;
								  padding: 2px 5px;
								  width: auto;">{{data.count}}</view>

							</view>
							<text style="font-size: 13px; color: #101010;margin-top: 5px;">已提菜</text>
						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

							<view style="position: relative;width: 35px;height: 35px;">
								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
									src="../../static/basket_icon.png" mode="aspectFill"></image>

								<view v-if="data.count==0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 2px;
								  right: 0px;
								  padding: 2px 5px;
								  width: auto;">{{data.count}}</view>

							</view>
							<text style="font-size: 13px; color: #101010;margin-top: 5px;">过期未提</text>
						</view>

					</view>

				</view>

				<!-- 订单记录 -->
				<view
					style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px; margin-top: 10px;">

					<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">订单记录</text>

					<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

							<view style="position: relative;width: 35px;height: 35px;">
								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
									src="../../static/basket_icon.png" mode="aspectFill"></image>

								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 2px;
								  right: 0px;
								  padding: 2px 5px;
								  width: auto;">{{data.count}}</view>

							</view>
							<text style="font-size: 13px; color: #101010;margin-top: 5px;">待付款</text>
						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

							<view style="position: relative;width: 35px;height: 35px;">
								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
									src="../../static/basket_icon.png" mode="aspectFill"></image>

								<view v-if="data.count==0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 2px;
								  right: 0px;
								  padding: 2px 5px;
								  width: auto;">{{data.count}}</view>

							</view>
							<text style="font-size: 13px; color: #101010;margin-top: 5px;">已付款</text>
						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">
						</view>

					</view>

				</view>

				<!-- 转赠记录 -->
				<view
					style="display: flex;flex-direction: column; border-radius: 10px;background: #fff; padding: 10px; margin-top: 10px;">

					<text style="font-size: 15px; color: #101010;font-weight: 600;font-family: sans-serif;">转赠记录</text>

					<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

							<view style="position: relative;width: 35px;height: 35px;">
								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 5px; "
									src="../../static/basket_icon.png" mode="aspectFill"></image>

								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 2px;
								  right: 0px;
								  padding: 2px 5px;
								  width: auto;">{{data.count}}</view>

							</view>
							<text style="font-size: 13px; color: #101010;margin-top: 5px;">赠与我的</text>
						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

							<view style="position: relative;width: 35px;height: 35px;">
								<image style="width: 25px;height: 25px;margin-left: 5px; margin-top: 10px; "
									src="../../static/basket_icon.png" mode="aspectFill"></image>

								<view v-if="data.count>0" style="border-radius: 50%;text-align: center;background: #f00;color: #fff;font-size: 8px;
								position: absolute;
								  top: 2px;
								  right: 0px;
								  padding: 2px 5px;
								  width: auto;">{{data.count}}</view>

							</view>
							<text style="font-size: 13px; color: #101010;margin-top: 5px;">我的转赠</text>
						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

						</view>

						<view
							style="flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;">

						</view>

					</view>

				</view>

				<view style="display: flex;flex-direction: column; border-radius: 10px;background: #fff;
					 padding: 10px; margin-top: 10px;width: 100%;box-sizing: border-box;">

					<view style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;">
						<view style="display: flex;flex-direction: row;align-items: center;flex: 1;">
							<text
								style="font-size: 15px;color: #101010;font-weight: 600;font-family: sans-serif;">推荐有礼</text>
							<image src="../../static/share_gift.png"
								style="margin-left: 5px; width: 20px;height: 20px;"></image>
						</view>

						<!-- <view style="display: flex;flex-direction: row;align-items: center;" @click="">
							<text style="margin-right: 5px;color: #FF9900;font-size: 12px;">马上邀请</text>
							<image src="../../static/right_icon.png" style="width: 15px;height: 15px;"></image>
						</view> -->

						<button open-type="share" class='sharebtn'>
							<view
								style="display: flex;flex-direction: row;align-items: center;justify-content: flex-end;">
								<text style="margin-right: 5px;color: #FF9900;font-size: 12px;">马上邀请</text>
								<image src="../../static/right_icon.png" style="width: 15px;height: 15px;"></image>
							</view>
						</button>

					</view>


					<text style="font-size: 12px;color: #4B4B4B; margin-top: 8px;">邀请新朋友后，您和您的朋友将获得“蔬菜品鉴礼包”。</text>

					<!-- <view style="display: flex;flex-direction: row;align-items: center; ">

						<image :src="recommend.iconUrl" style="width: 35%;height: 150px; border-radius: 10px;"
							mode="aspectFill">

						</image>

						<view style="display: flex;flex-direction: column; margin-left: 20px; ">
							<view v-for="(child,pos) in recommend.recordList" :key="pos"
								style="display: flex;flex-direction: column;">

								<text style="color: #424242; font-size: 12px;line-height: 20px;">* {{child.content}}</text>

							</view>
						</view>


					</view> -->


				</view>


				<!-- </loading-state> -->

			</scroll-view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					startHeight: 0,
					endHeight: 0
				},
				data: {
					count: "1",
				},
				userInfo: {
					nick: "",
					mobile: "绑定手机号",
					photo: "../../static/userHead.png"
				},
				dialogInfo: {
					url: "../../static/userHead.png",
					name: "",
					mobile: ""
				},
				headImage: "",
				recommend: {},
				banKInfo: null
			}
		},
		onShow() {
			if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 2
				})

			}
			this.getUserInfo()
			this.myRecommend()
		},
		onLoad(options) {
			// this.request()
			let info = uni.getSystemInfoSync();

			this.page.startHeight = info.windowWidth * 0.6
			this.page.endHeight = info.windowWidth * 0.8
		},
		onPageScroll(res) {
			// 渐变
			this.$refs.nav.defaultColorBgAlpha(res)
		},
		methods: {
			getUserInfo() {
				let _this = this
				_this.$api.getUserInfo(getApp().globalData.sid).then((resp) => {

					_this.userInfo = {
						nick: resp.nick,
						mobile: resp.mobile,
						photo: resp.photo
					}

					_this.headImage = resp.data.photo


				}).catch(e => {

				})

			},
			myRecommend() {
				let _this = this
				_this.$api.myRecommend(getApp().globalData.sid).then((resp) => {

					_this.recommend = resp

				}).catch(e => {

				})
			},
			showDiaLog() {
				uni.navigateTo({
					url: '/pages/me/base_info'
				})
			},
			onShareAppMessage: function(res) {
				console.log("res", res)
				console.log("data", res.target.dataset)
				var data = res.target.dataset.info
				// ①
				let shareData = JSON.stringify({
					// params: {
					// 	code: data.code,
					// 	codeKey: data.codeKey,
					// 	customerSid: ''
					// },
					// functionName: 'bindCard',
					// url: '/pages/detail/detail_affeection?sid=' + data.sid

					url:'/pages/home/cloudCard2?shareSid='+getApp().globalData.sid,
					functionName:'share'
				})
				// 转码传输
				let value = encodeURIComponent(shareData)

				return {
					title: '汇融惠享-云菜窖',
					// ②
					path: '/pages/login/login?data=' + value,
					imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。
					success: function(res) {
						console.log('aaaa', "分享成功")
					},
					fail: function(res) {
						// 转发失败
						console.log('aaaa', "用户点击了取消")
					}
				}
			},
		}
	}
</script>

<style>
	.sharebtn {
		margin-right: -10px;
		background: #fff;
		/* font-size: 12px;
		color: #fff;
		width: 30vw;
		border-radius: 20px; */
	}


	.sharebtn::after {
		border: none;
	}


	.top {
		width: 100vw;
		/* height: 126.66vw; */
		height: 65vw;
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/my_bj.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}
</style>