hz-zhhq-app/pages/couponList/couponList.vue

<template>
	<view>
		<!-- 餐券列表 -->
		<view style='height: 100%' class="wrap" v-if="list.length>0" v-cloak>
			<view v-for="(item,index) in list" :key="index" class="couponImg" @click="bindDetails(item)" v-cloak>
				<view class="bgpic">
					<img src="http://47.99.190.179:80/appImageDir/coupon_bg.png" alt="">
				</view>
				<view class="imgText">
					<view class="day" v-cloak>使用日期：{{item.use_date}}</view>
					<view>
						<view class="quan">
							<span>午餐券</span>
							<!-- <span class="number" v-cloak>({{item.usenum}}/{{item.ticketCount}}次)</span> -->
							<p v-if="item.kind == 1">【永久使用】</p>
							<p v-else>【仅限当天使用】</p>
						</view>
						<view class="erweima">
							<img src="http://47.99.190.179:80/appImageDir/1.png" alt="">
							<img src="img/logo.png" alt=""> 
						</view>
					</view>
				</view>
			</view> 
			<!-- 空白 -->
			<view class="kongbai"></view>
		</view>
		<view class="bc-bg" v-else>
			<img src="http://47.99.190.179:80/appImageDir/conpouNo.png" alt="">
			<span>暂无餐券可用</span>
		</view>
		<!-- add btn -->
		<view class="addicon">
			<view class="btn" @click="get()">领取餐券</view>
			<view class="btn" @click="toDetail()">申请餐券</view>
		</view>
	</view>
</template>

<script>
	import {alertTip} from '@/common/util.js';
	import {callbackRequest, setStorage, getStorage } from '@/common/util.js';
	export default {
		data() {
			return {
				list: [{"use_date":"2020-01-07","usenum":"zs","ticketCount":"3"}],
				num:0,
				suply_time:""
			}
		},
		onLoad:function(){
			let params = {
				"method": "greenMealTicket/list",
				"data": {userId:this.userId}
			};
			callbackRequest(params)
			.then(res =>{
				// this.list = res;
			})
		},
		methods: {
			toDetail(){
				var url = "/pages/coupongLists/coupongLists";
				uni.navigateTo({
					url
				})
			},
			get(){
				//获取当前时间
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				if (month < 10) {
					month = "0" + month;
				}
				if (day < 10) {
					day = "0" + day;
				}
				var nowDate = year + "-" + month + "-" + day;
				if(this.suply_time == nowDate && this.num == 2){
					alertTip("今日已领取完部门配置的餐券！");
					return;
				}
				this.suply_time = nowDate;
				this.num++;
				this.list.push({"use_date":nowDate,"usenum":"张三","ticketCount":"3","kind":"1"});
				alertTip("领取成功！");
			},
			bindDetails: function (item) {
				var param = {
					num: item.usenum,
					time: item.use_date,
					use_id: item.use_id
				};
				setStorage('param', param);
				var url = "/pages/coupon/coupon";
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style>
.couponImg{
	width: 90%;
	height: 200rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	position: relative;
	margin: 36rpx;
	/* background: #00C277; */
	padding: 0;
}
.couponImg .bgpic{
	width: 100%;
	height: 100%;
	margin: 0;
}
.couponImg .bgpic img{
	width: 100%;
	height: 100%;
}
.couponImg .imgText{
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
}
.couponImg .imgText img {
    width: 60rpx;
    height: 60rpx;
}

.couponImg .imgText .quan {
    position: absolute;
    left: 50rpx;
    top: 70rpx;
    font-size: 36rpx;
    color: #99610a;
}
.couponImg .imgText .quan p {
    color: #f52121;
    font-size: 24rpx;
	margin-top: 10rpx;
}
.couponImg .imgText .number {
    font-size: 24rpx;
    margin-left: 26rpx;

}

.couponImg .imgText .day {
    font-size: 24rpx;
    color: #ffffff;
    position: absolute;
    top: 10rpx;
    right: 26rpx;
}
.erweima {
    width: 60rpx;
    height: 60rpx;
    display: block;
    position: absolute;
    right: 80rpx;
    bottom: 60rpx;
}

.erweima img {
    display: block;
}

.erweima img:nth-child(1) {
    height: 100%;
    width: 100%;
}

.erweima img:nth-child(2) {
    width: 50%;
    height: 50%;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
}
/* 暂无券可用 */
.bc-bg{
	font-size: 28rpx;
	margin-top: 40%;
	height: 60%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}
.bc-bg img {
	margin-top:40%;
    width: 120rpx;
    height: 80rpx;
    margin-top: 20rpx;
}
.bc-bg span {
    margin-top: 15rpx;
}
.kongbai{
	height: 50rpx;
	margin: 20rpx;
}
.addicon{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 10;
}
.addicon .btn{
	float: left;
	margin: 20rpx 4%;
	width: 42%;
	background: -webkit-linear-gradient(left, #ffc200, #ff9000);
	background: linear-gradient(to right, #ffc200, #ff9000);
	font-size: 28rpx;
	color: #fff;
	text-align: center;
	line-height: 80rpx;
	border-radius: 8rpx;
}
</style>