<template>
	<view>
		<view class="width100 fotct coupon-status font14 fcor41c">已使用</view>
		<view class="line1"></view>
		<view class="coupon-cont width90">
			<view class="flright fotct">
				<image class="coupon-img" src="../../../static/img/goods/oil.png"></image>
			</view>
			<view class="coupon-mes mart10">
				<view class="fcor333 fontwig6 font24 width100">好利来10元券</view>
				<view class="fcor666  font15 width100 mart5">中国石化</view>
				<view class="fcor666  font13 width100 mart5">获得时间:2020/12/02 13:12:21</view>
				<view class="fcor666  font13 width100 mart5">使用时间:2020/12/03 23:23:22</view>
				<view class="fcorred  font15 width100 mart5">过期时间:2021/11/01 23:59:22</view>
			</view>
		</view>
		<view class="line1 mart15"></view>
		<view class="width90 mart10 fcor666">核销码(商户扫客户)</view>
		<view class="width90 mart20 fotct">
			<image class="coupon-qr" src="../../../static/img/qr.png"></image>
		</view>

		<view class="width90 mart60" style="height: 80px;">
			<view class="coupon-des flleft">
				立即<br>前往
			</view>
			<view class="coupon-cont-dh">
				<view class="coupon-title flleft width70">
					<view class="font20 fcor333 fontwig6 width100">重庆好利来大坪店</view>
					<view class="font14 fcor999 width100 text2 mart5">长江二路2号(中国石化肖家湾加油站)</view>
				</view>
				<view class="coupon-map flright width30 fotrt">
					<!-- 地图logo -->
					<image src="../../../static/img/goods/oil.png"></image>
					<view class="mart5 fcor999 font13">2.28KM</view>
				</view>
			</view>
		</view>
		<view class="width90 mart60" style="height: 80px;">
			<view class="coupon-des flleft">
				立即<br>前往
			</view>
			<view class="coupon-cont-dh">
				<view class="coupon-title flleft width70">
					<view class="font20 fcor333 fontwig6 width100">重庆好利来大坪店</view>
					<view class="font14 fcor999 width100 text2 mart5">长江二路2号(中国石化肖家湾加油站)</view>
				</view>
				<view class="coupon-map flright width30 fotrt">
					<!-- 地图logo -->
					<image src="../../../static/img/goods/oil.png"></image>
					<view class="mart5 fcor999 font13">2.28KM</view>
				</view>
			</view>
		</view>

		<view class="width90 mart60" style="height: 80px;">
			<view class="coupon-des flleft">
				立即<br>前往
			</view>
			<view class="coupon-cont-dh">
				<view class="coupon-title flleft width70">
					<view class="font20 fcor333 fontwig6 width100">重庆好利来大坪店</view>
					<view class="font14 fcor999 width100 text2 mart5">长江二路2号(中国石化肖家湾加油站)</view>
				</view>
				<view class="coupon-map flright width30 fotrt">
					<!-- 地图logo -->
					<image src="../../../static/img/goods/oil.png"></image>
					<view class="mart5 fcor999 font13">2.28KM</view>
				</view>
			</view>
		</view>
		<view class="height60"></view>
		<button class="coupne-btn width100" @click="scan">其他门店</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			scan() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.coupon-status {
		height: 35px;
		line-height: 35px;
	}

	.coupon-cont {
		height: 130px;
	}

	.coupon-mes {
		margin-right: 90px;
	}

	.coupon-img {
		width: 80px;
		height: 80px;
		margin-top: 10px;
	}

	.coupon-qr {
		width: 150px;
		height: 150px;
	}

	.coupon-des {
		width: 80px;
		height: 80px;
		text-align: center;
		color: white;
		font-size: 28px;
		border-radius: 10px;
		background-color: red;
	}

	.coupon-cont-dh {
		margin-left: 90px;
	}

	.coupon-map image {
		width: 45px;
		height: 45px;
	}

	.coupon-no {
		height: 80px;
		line-height: 80px;
		border: 1px solid #b2b2b2;
		border-radius: 10px;
	}

	.coupne-btn {
		position: fixed;
		bottom: 0px;
		background-color: red;
		color: #FFFFFF;
	}
</style>
