<template>
	<view class="preferential">
		<view class="ml30" style="margin-top:100rpx;">
			<image :src="qmt" style="width:322rpx;height:71rpx;" mode=""></image>
		</view>
		<view class="ml30 mt10" style="">
			<image :src="zuigao" style="width:695rpx;height:136rpx;" mode=""></image>
		</view>
		<view class="mt40 flex_items flex_center">
			<view class="dwm flex_items flex_center f40" style="width:508rpx;height: 146rpx;color: #fff;">
				<view class="flex_start flex_items" @click="submit('1')">
					<text>我要订外卖</text>
					<view class="f24 ml10 f-center"
						style="color: #F15858;width: 48rpx;height: 48rpx;border-radius: 50%;background: #fff;line-height: 48rpx;">
						Go</view>
				</view>
			</view>
		</view>
		<view class="flex_items flex_center">
			<image :src="xxiao" style="width: 752rpx;height:452rpx;" mode=""></image>
		</view>
		<view class="flex_items flex_center pos" style="margin-top: -80rpx;z-index: 1;">
			<view class="dhb">
				<view class="bold f50 f-center mt60" style="color: #DC3A2F;">满减用券巨省钱</view>
				<view v-if="hbs.length!=0" class="flex_column plr20 mt100" style="">
					<view class="flex_start flex_items">
						<view v-for="(item,index) in hbs.slice(0,2)" :key="index" class="pb20 mr30"
							style="background: linear-gradient(90deg, #F7DFB6 0%, #F8F3DD 48%, #FADAAD 100%);border-radius:24rpx;overflow: hidden;width:314rpx;height: 224rpx;">
							<view class="ptb5" style="background: #E54523;width: 100%;height: 45rpx;">
								<text v-if="item.full_amount==''" class="f24 ml30" style="color: #fff;">· 无门槛 ·</text>
								<text v-else class="f24 ml30" style="color: #fff;">· 满{{item.full_amount}}减 ·</text>
							</view>
							<view class="flex_column ml30">
								<view class="flex_start flex_items mt20" style="color: #E03F35;">
									<text class="f24" style="margin-top: -20rpx;">￥</text>
									<text class="bold f58">{{item.amount}}</text>
									<!-- <text class="f26 mt35">{{item.name}}</text> -->
								</view>
								<text style="color: #E03F35;" class="f22">{{item.name}}</text>
								<view class="f22 pb20 mt5" style="color: #E03F35;">
									{{item.remark}}
								</view>
							</view>
						</view>
					</view>
					<!-- two -->
					<view class="flex_start flex_items mt35">
						<view v-for="(item,index) in hbs.slice(2,3)" :key="index" class="pb20 mr20"
							style="background: linear-gradient(90deg, #F7DFB6 0%, #F8F3DD 48%, #FADAAD 100%);border-radius:24rpx;overflow: hidden;width:224rpx;height:224rpx;">
							<view class="ptb5 f-center" style="background: #E54523;width: 100%;height: 45rpx;">
								<text v-if="item.full_amount==''" class="f24" style="color: #fff;">· 无门槛 ·</text>
								<text v-else class="f24" style="color: #fff;">· 满{{item.full_amount}}减 ·</text>
							</view>
							<view class="flex_column flex_items">
								<view class="flex_start flex_items mt20" style="color: #E03F35;">
									<text class="f24" style="margin-top: -20rpx;">￥</text>
									<text class="bold f50">{{item.amount}}</text>
								</view>
								<view class="f24" style="color: #E03F35;">
									{{item.name}}
								</view>
								<view class="f24 pb10" style="color: #E03F35;">
									<text
										v-if="item.get_condition.limit=='2'">可领取{{item.get_condition.limit_num}}次</text>
									<text v-else>不限次</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="mt120 pt50 f30 f-center" style="color: #FBECCF;">--暂无红包--</view>
				<view v-if="hbs.length!=0" class="flex_items flex_center pos" @click="takehb">
					<view class="lq f28 bold f-center" style="color: #FFF;">立即领取</view>
					<image class="abs" :src="shouzhi" style="width: 112rpx;height: 114rpx;bottom: -30rpx;left: 350rpx;"
						mode=""></image>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 40rpx;"></view>
		<!-- zj -->
		<view v-if="ismask2" class="mask flex_items flex_center">
			<view class="abs" style="width: 100%;left: 50%;top:50%;transform: translate(-50%,-128%);z-index: 1;">
				<image :src="dhh" style="width: 100%;height: 388rpx;" mode=""></image>
			</view>
			<view class="abs f-center f36"
				style="width: 256rpx;height: 64rpx;background: #EC4434;border-radius: 32rpx;left: 50%;transform: translate(-50%,-290rpx);line-height: 64rpx;z-index: 3;color: #fff;">
				领取成功</view>
			<view class="pos plr20 ptb30"
				style="width:calc(100% - 80rpx);border-radius: 36rpx;background: #fff;border:5px solid #DC3A2F;z-index: 2;">
				<view class="hb1 mt40 pos flex_start" style="z-index: 2;">
					<view v-if="hbs[0].full_amount==''" class="f20 f-center mr30"
						style="writing-mode: vertical-rl;color: #fff;letter-spacing:5rpx;width:84rpx;">无门槛
					</view>
					<view v-else class="f20 f-center mr30 flex_items flex_center"
						style="writing-mode: vertical-rl;color: #fff;letter-spacing:5rpx;width:84rpx;">
						<view>满<text class="ml20"
								style="writing-mode: horizontal-tb;word-wrap:break-word">{{hbs[0].full_amount}}</text>减
						</view>
					</view>
					<view style="width: 400rpx;" class="ml35 flex_column">
						<view class="flex_start flex_items mt10" style="color: #E03F35;">
							<text class="f24" style="margin-top: -20rpx;">￥</text>
							<text class="bold f48">{{hbs[0].amount}}</text>
						</view>
						<text style="color: #E03F35;" class="f20">{{hbs[0].name}}</text>
						<view class="f20 pb20 mt5" style="color: #E03F35;">
							{{hbs[0].remark}}
						</view>
					</view>
				</view>
				<view class="flex_warp flex_items">
					<view v-for="(item,index) in hbs.slice(1,4)" :key="index" class="xiaob mt20">
						<view class="f-center" style="margin-top: -8rpx;">
							<text v-if="item.full_amount==''" class="f20" style="color: #fff;">· 无门槛 ·</text>
							<text v-else class="f20" style="color: #fff;">· 满{{item.full_amount}}减 ·</text>
						</view>
						<view class="flex_column flex_items">
							<view class="flex_start flex_items mt10" style="color: #E03F35;">
								<text class="f20" style="margin-top: -20rpx;">￥</text>
								<text class="bold f44">{{item.amount}}</text>
							</view>
							<view class="f20" style="color: #E03F35;">
								{{item.name}}
							</view>
							<view class="f20 pb10" style="color: #E03F35;">
								<text v-if="item.get_condition.limit=='2'">可领取{{item.get_condition.limit_num}}次</text>
								<text v-else>不限次</text>
							</view>
						</view>
					</view>
					<view class="flex_items flex_center" style="width: 100%;">
						<view class="hbsy f-center f28" style="color: #fff;" @click="gomt">去使用</view>
					</view>
				</view>
				<image @click="closemsk" class="abs" :src="imgUrl+'cha.png'"
					style="width: 52rpx;height: 52rpx;bottom: -100rpx;left: 50%;transform: translate(-50%);" mode="">
				</image>
			</view>
		</view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qmt: require("@/static/qmt.png"),
				xxiao: require("@/static/xxiao.png"),
				hb1: require("@/static/zjhb1.png"),
				zjh: require("@/static/zjh.png"),
				zuigao: require("@/static/zuigao.png"),
				shouzhi: require("@/static/shouzhi.png"),
				dhh: require("@/static/dhh.png"),
				hbs: [],
				imgUrl: "",
				ismask: false,
				ismask2: false,
				list: [],
				curindex: 0,
				urls: uni.getStorageSync('uu'),
				usernumber: "",
				modalShow: false,
				user: ""
			}
		},
		onLoad(options) {
			this.imgUrl = this.api.imgUrl
			this.user = options.user
			this.getData()
		},
		methods: {
			getData() {
				this.api.tjproduct().then((res) => {
					console.log(res)
					if (res.data.code == '200') {
						this.list = JSON.parse(res.data.data)
						this.gethb()
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			gethb() {
				this.api.hblist().then((res) => {
					console.log(res)
					if (res.data.code == '200') {
						res.data.data.data.forEach((item, index) => {
							item.get_condition = JSON.parse(item.get_condition)
							if (index < 5) {
								this.hbs.push(item)
							}
						})
						// this.hbs = res.data.data.data
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			closemsk() {
				this.ismask = false
				this.ismask2 = false
			},
			openmask() {
				this.ismask = true
			},
			gomt() {
				this.api.gomt({
					user_number: this.user,
					type: 1,
					dinner_type: ''
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.hideLoading()
						var href = res.data.url
						window.open(href, '_self')
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})

			},
			take(id, index) {
				this.curindex = index
				this.api.takehb({
					id: id
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						this.ismask2 = true
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			},
			goorder(types) {
				let that = this
				this.types = types
				this.usernumber = ""
				that.modalShow = true
			},
			out() {
				this.modalShow = false
			},
			yes() {
				if (this.usernumber == "") {
					uni.showToast({
						title: "账号不能为空",
						icon: "none"
					})
					return false
				}
				this.submit(this.types, this.usernumber)
			},
			takehb() {
				let arr = []
				this.hbs.forEach((item, index) => {
					arr.push(item.id)
				})
				this.api.allhb({
					id: arr
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						this.ismask2 = true
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
				this.ismask2 = true
			},
			submit(types, dinnertype) {
				if (dinnertype) {
					this.dinnertype = dinnertype
				} else {
					this.dinnertype = ""
				}
				this.api.gomt({
					user_number: this.user,
					type: types,
					dinner_type: this.dinnertype
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.hideLoading()
						var href = res.data.url
						window.open(href, '_self')
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.preferential {
		background-image: url('~@/static/pbg.jpg');
		background-size: 100% 100%;
		width: 100%;
		/* min-height: 1936rpx; */
		border: 1px solid transparent;
	}

	.dwm {
		background-image: url('~@/static/dwm.png');
		background-size: 100% 100%;
	}

	.xiaob {
		background-image: url('~@/static/xxhb.png');
		background-size: 100% 100%;
		width: 222rpx;
		height: 192rpx;
	}

	.hb1 {
		background-image: url('~@/static/zjhb1.png');
		background-size: 100% 100%;
		width: 100%;
		height: 154rpx;
	}

	.xd {
		background-image: url('~@/static/xdbtn.png');
		background-size: 100% 100%;
		width: 288rpx;
		height: 84rpx;
		line-height: 84rpx;
		color: #fff;
	}

	.wan {
		background-image: url('~@/static/wanwan.png');
		background-size: 100% 100%;
		line-height: 278rpx;
		height: 162rpx;
	}

	.hb {
		background-image: url('~@/static/hbbg.png');
		background-size: 100% 100%;
		height: 306rpx;
		width: calc(100% - 60rpx);
	}

	.hbtn {
		background-image: url('~@/static/hbbtn.png');
		background-size: 100% 100%;
		height: 64rpx;
		width: 336rpx;
		line-height: 64rpx;
		position: absolute;
		left: 50%;
		transform: translate(-50%, -32rpx);
		font-size: 34rpx;
		color: #fff;
	}

	.quan {
		width: calc(100% - 80rpx);
		height: 174rpx;
		background-image: url('~@/static/quan.png');
		background-size: 100% 100%;
	}

	.quan2 {
		width: calc(100% - 60rpx);
		height: 138rpx;
		background-image: url('~@/static/xhb.png');
		background-size: 100% 100%;
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 2;
	}

	.hd {
		background-image: url('~@/static/hdbg.png');
		background-size: 100% 100%;
		height: 716rpx;
		width: calc(100% - 160rpx);
		position: relative;
	}

	.qu {
		background-image: url('~@/static/qsy.png');
		background-size: 100% 100%;
		width: calc(100% - 60rpx);
		height: 102rpx;
		margin-top: 50rpx;
		line-height: 102rpx;
	}

	.tkk {
		width: 80%;
		background-color: #fff;
		text-align: center;
		border-radius: 3px;
		overflow: hidden;
	}

	.dhb {
		background-image: url('~@/static/dhb.png');
		background-size: 100% 100%;
		width: 682rpx;
		height: 940rpx;
	}

	.lq {
		background-image: url('~@/static/lqbg.png');
		background-size: 100% 100%;
		width: 476rpx;
		height: 196rpx;
		line-height: 180rpx;
	}

	.hbsy {
		background-image: url('~@/static/hbsy.png');
		background-size: 100% 100%;
		width: 458rpx;
		height: 80rpx;
		margin-top: 20rpx;
		line-height: 80rpx;
	}
</style>