<template>
	<view class="more-coupon-page">
		<NavCom title="更多优惠券"></NavCom>
		<view v-if="list.length === 0" style="padding-top: 200rpx;">
			<empty></empty>
		</view>
		<scroll-view scroll-y="true" class="main" v-if="list.length > 0">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="price">
					<text class="price-sym">¥</text>20
				</view>
				<view class="title">商城通用券</view>
				<view class="operation">
					<image src="@/static/mine/coupon-sub.png" mode="" class="operation-img" @click="sub(index)"></image>
					<view class="operation-num">{{item.quantity}}</view>
					<image src="@/static/mine/coupon-add.png" mode="" class="operation-img" @click="add(index)"></image>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="price">
				<text class="title">应付合计</text>
				<text class="sym">¥</text>
				60
			</view>
			<view class="buy">去结算</view>
		</view>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import NavCom from '@/pages/components/nav.vue'
	export default{
	mixins: [myMixins],
		data(){
			return{
				list:[
					{quantity:0},
					{quantity:0},
					{quantity:0},
					{quantity:0},
					{quantity:0},
					{quantity:0},
					{quantity:0},
					{quantity:0},
					{quantity:0},
					{quantity:0},
				]
			}
		},
		components:{NavCom},
		onLoad(option) {
			
		},
		methods:{
			//减
			sub(index){
				if(this.list[index].quantity === 0){
					return;
				}
				if(this.list[index].quantity >= 1){
					this.list[index].quantity--
				}
				
			},
			//加
			add(index){
				this.list[index].quantity++
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}
	.more-coupon-page{
		.main{
			padding: 130rpx 0;
			height: 100vh;
			.list{
				width: 711rpx;
				height: 169rpx;
				background-image: url('@/static/mine/coupon.png');
				background-size: 100%;
				background-repeat: no-repeat;
				margin-left: 17rpx;
				margin-bottom: 19rpx;
				display: flex;
				align-items: center;
				.price{
					width: 210rpx;
					font-weight: 600;
					font-size: 94rpx;
					color: #FFFFFF;
					text-align: center;
					.price-sym{
						font-weight: bold;
						font-size: 40rpx;
						color: #FFFFFF;
					}
				}
				.title{
					margin-left: 30rpx;
					width: 270rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.operation{
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					.operation-img{
						width: 44rpx;
						height: 44rpx;
					}
					.operation-num{
						// border: 1px solid #000;
						width: 60rpx;
						text-align: center;
					}
				}
			}
		}
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			padding: 0 22rpx 0 76rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price{
				font-weight: 500;
				font-size: 46rpx;
				color: #F04638;
				.title{
					font-size: 24rpx;
					color: #888888;
					margin-right: 14rpx;
				}
				.sym{
					font-size: 24rpx;
				}
			}
			.buy{
				width: 274rpx;
				height: 68rpx;
				background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
				border-radius: 34rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>