<template>
	<view class="content">
		<view class="store u-flex u-row-between u-p-32">
			<view>
				<view class="lg bold-600 u-flex" @click="chooseStore">
					MEET轻食店
					<u-icon name="arrow-right" size="28" class="right-icon"></u-icon>
				</view>
				<view class="u-flex u-margin-top-8" @click="chooseAddress"> 
					<u-icon name="map" size="32"></u-icon>
					请选择收货地址
				</view>
			</view>
			<view>
				<u-button shape="circle" :hair-line="false" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '36rpx'}" @click="signin">签到</u-button>
			</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="swiper u-relative">
			<u-swiper height="524" :list="list" border-radius="0"></u-swiper>
			<view class="balance bg-white u-flex">
				<view class="u-flex u-row-center">
					<u-image :src="cloudPath + 'img/icon_balance.png'" width="52" height="52"></u-image>
					<view class="u-margin-left-60  u-text-center">
						<view class="nr">0.00</view>
						<view class="text-default xs">余额</view>
					</view>
				</view>
				
				<view class="u-flex u-row-center">
					<u-image :src="cloudPath + 'img/icon_points.png'" width="52" height="52"></u-image>
					<view class="u-margin-left-60 u-text-center">
						<view class="nr">0.00</view>
						<view class="text-default xs">积分</view>
					</view>
				</view>
				
				<view class="u-flex u-row-center">
					<u-image :src="cloudPath + 'img/icon_coupon.png'" width="52" height="52"></u-image>
					<view class="u-margin-left-60 u-text-center">
						<view class="nr">0</view>
						<view class="text-default xs u-text-center">券</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 下单 -->
		<view class="order u-flex u-row-between">
			<view class="bg-white u-text-center">
				<view class="text-default xxl">预约下单</view>
				<view class="xs text-999">极速送达更便捷</view>
				<view class="u-flex u-row-center">
					<u-image :src="cloudPath + 'img/icon_p_order.png'" width="132" height="132"></u-image>
				</view>
			</view>
			<view class="bg-white u-text-center">
				<view class="text-default xxl">现在点单</view>
				<view class="xs text-999">下单更便捷</view>
				<view class="u-flex u-row-center">
					<u-image :src="cloudPath + 'img/icon_order.png'" width="132" height="133" mode="aspectFit"></u-image>
				</view>
			</view>
		</view>
		
		<!-- 活动图 -->
		<view class="mx20 u-margin-bottom-64">
			<u-image :src="cloudPath + 'img/activity.png'" height="264"></u-image>
		</view>
	</view>
</template>

<script>
	import { getConfig } from '@/api/app'
	import { getMenu } from '@/api/store'
	import { setTabbar } from '@/utils/tools'
	export default {
		data() {
			return {
				list: [
					{
						image: "http://jianbing-media.stnav.com/frontend/img/banner.png",
						title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					},
				],
			}
		},
		onLoad() {
			setTabbar()
		},
		onShow() {
		
		},
		methods: {
			// 选择门店
			chooseStore() {
				uni.navigateTo({
					url: '/pages/store/choose_store'
				})
			},
			
			// 选择收货地址
			chooseAddress() {
				uni.navigateTo({
					url: '/pages/store/choose_store'
				})
			},
			
			// 签到
			signin() {
				uni.navigateTo({
					url: '/pages/signin/signin'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.store {
			background-color: #FFFAFB;
			height: 108rpx;
			
			.right-icon {
				font-weight: bold;
				margin-left: 4rpx;
			}
		}
		
		.swiper {
			height: 544rpx;
			box-sizing: border-box;
			width: 100%;
			
			.balance {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				margin: 0 20rpx;
				height: 140rpx;
				border-radius: 16rpx;
		
				
				& > view {
					width: 33.33%;
				}
			}
		}
		
		.order {
			margin: 30rpx 20rpx;
			& > view {
				border-radius: 16rpx;
				padding: 40rpx 86rpx;
			}
		}
	}
</style>
