<template>
	<view class="coffeeBuy" v-if="showPage">
		<view class="topBox">
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/banner2.png"
				mode="widthFix" class="bg"></image>
			<u-sticky>
				<view class="nav" :style="{paddingTop:`${statusNavBar}px`}">
					<u-icon name="arrow-left" size="40" color="#fff" @click="back"></u-icon>
					<view class="title">
						购买
					</view>
				</view>
			</u-sticky>

		</view>
		<view class="con">
			<view v-for="(item,index) in pageData.GiveAwayList" :key="index" class="item">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup2.png"
					style="width: 130rpx;height: 130rpx;"></image>
				<view class="itemInfo">
					<view class="BuyNum">
						星巴克咖啡{{item.BuyNum}}杯
					</view>
					<view class="GiveAway" v-if="item.GiveAwayNum>0">
						买{{item.BuyNum}}杯赠{{item.GiveAwayNum}}杯
					</view>

				</view>
				<view class="itemInfo2">
					<view class="money">
						<text class="icon">¥</text>
						<text>{{item.BuyNum*pageData.SellingPrice}}</text>
					</view>
					<view class="buyBtn" @click="buy(item)">
						立即购买
					</view>
				</view>
			</view>
		</view>
		<view class="menu">
			<u-divider bg-color="#F4F4F5" color="#101010" use-slot>
				<text class="menuTitle">咖啡菜单</text>
			</u-divider>
			<view class="menubox">
				<view v-for="(item,index) in menuList" :key="index" class="menuItem">
					<text class="name">{{item.name}}</text>
					<text class="english">{{item.english}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPage: false,
				statusNavBar: 0,
				pageData: {},
				menuList: [
					{
						name: "意式浓缩",
						english: "Espresso"
					},
					{
						name: "浓郁玛奇朵",
						english: "Rich Macchiato"
					},
					{
						name: "卡布奇诺",
						english: "Cappucino"
					},
					{
						name: "馥芮白 ",
						english: "Flat White"
					},
					{
						name: "美式",
						english: "Cafte Americano"
					},
					{
						name: "拿铁",
						english: "Cafte Lafte"
					},
					{
						name: "拿铁玛奇朵",
						english: "Latte Macchiato"
					},
					{
						name: "摩卡",
						english: "Mocha"
					},
					{
						name: "热巧克力",
						english: "hot chocolate"
					},
					{
						name: "冰美式咖啡",
						english: "Iced Americano"
					},
					{
						name: "冰拿铁咖啡",
						english: "Iced Cafe Latte"
					},
					{
						name: "冰拿铁玛奇朵",
						english: "Iced Latte Macchiato"
					},
					{
						name: "冰摩卡咖啡",
						english: "Ice Mocha"
					},
					{
						name: "冰巧克力",
						english: "Ice chocolate"
					},
					{
						name: "冰馥芮白",
						english: "Iced Flat White"
					},
					{
						name: "冰卡布其诺",
						english: "Iced Cappuccino"
					},
				]
			}
		},
		methods: {
			getData() {
				this.request2({
						url: '/api/AppletCoffee/GetMyCoffeeCouponsInfo',
						data: {}
					},
					res => {
						this.showPage = true
						this.pageData = res.data
					}
				);
			},
			buy(item) {
				let obj = {
					addr: this.pageData.Address,
					price: this.pageData.SellingPrice,
					GoodsId: this.pageData.GoodsId,
					SpecificationSort: this.pageData.SpecificationSort,
					...item
				}
				uni.navigateTo({
					url: "/pages/coffee/confirmOrder?item=" + encodeURIComponent(JSON.stringify(obj))
				})
			},
			back() {
				uni.navigateBack()
			}
		},
		mounted() {
			this.statusNavBar = uni.getSystemInfoSync().statusBarHeight
			this.getData()
		},
	}
</script>

<style lang="scss" scoped>
	.coffeeBuy {
		box-sizing: border-box;
		min-height: 100vh;
		background-color: #FFFFFF;
		padding-bottom: 50rpx;
	}

	.topBox {
		height: 489rpx;
		position: relative;

		.bg {
			width: 100vw;
			height: auto;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}

		.nav {
			height: 80rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			background-color: #3E766E;
			box-sizing: content-box;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #FFFFFF;
				margin-left: 275rpx;
				z-index: 5;
			}
		}

	}

	.con {
		padding: 40rpx;

		.item {
			background-color: #FBF5E9;
			border: 3rpx solid;
			border-radius: 10rpx;
			border-image: -webkit-linear-gradient(left, #f3edda, #eadfbc, #ece0bd) 3 3;
			margin-bottom: 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 40rpx;

			.itemInfo {
				width: 230rpx;
				margin-left: 30rpx;

				.BuyNum {
					font-size: 32rpx;
					font-weight: 500;
					color: #000000;

				}

				.GiveAway {
					padding: 4rpx 10rpx;
					background-color: #F65C10;
					border-radius: 4rpx;
					text-align: center;
					font-size: 20rpx;
					font-weight: 500;
					color: #FFFFFF;
					display: inline-block;
					margin-top: 20rpx;
					margin-bottom: 15rpx;
				}

				.validate {
					font-size: 20rpx;
					font-weight: 400;
					color: #C2B499;
				}
			}

			.itemInfo2 {
				.money {
					text-align: center;
					font-size: 48rpx;
					font-weight: bold;
					color: #F65C10;
					margin-bottom: 10rpx;

					.icon {
						font-size: 28rpx;
						font-weight: 400;
					}
				}

				.buyBtn {
					width: 200rpx;
					height: 78rpx;
					background-color: #3E766E;
					border-radius: 39rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
					line-height: 78rpx;
				}

			}
		}
	}

	.menu {
		width: 670rpx;
		background-color: #F4F4F5;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 25rpx 40rpx;

		.menuTitle {
			font-size: 28rpx;
			font-weight: bold;
			color: #101010;
		}

		.menubox {
			display: flex;
			flex-wrap: wrap;
		}

		.menuItem {
			min-width: 50%;
			margin: 10rpx 0;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;

			.english {
				font-size: 20rpx;
				margin-left: 4rpx;
			}
		}
	}
</style>
