hwnc/components/nx-coupon/nx-coupon.vue

<template>
	<view class="coupon-item" @tap="selectCoupon">
		
		<view class="coupon_index" >
			<view class="coupon_indexs">
				<view class="coupon_index_1">
					<view class="coupon_index_2">
						<view class="coupon_index_3">{{item.typetitle}}</view>
						<view class="coupon_index_4">
							<view class="coupon_index_4_1">￥{{ item.money }}</view>
							<view class="coupon_index_5">满元{{ item.usemoney }}可用</view>
						</view>
					</view>
					<view>
						<u-line color="gray" direction="col" length="100%" dashed></u-line>
					</view>
					
					<view class="coupon_index_6">
 						<view class="coupon_index_8">
							<view class="coupon_index_8_1">优惠券</view>
							<view class="coupon_index_9">领取{{ item.day }}日内有效</view>
						</view>
		
					</view>
				</view>
		   <u-line color="#939393"  margin="25rpx 10rpx 0 0"  ></u-line> 
		 	<view class="coupon_index_10"  >
					<image :src="item.farm_logo"></image>
					<view class="coupon_index_10_1">{{item.farm_name}}</view>
				</view>
			</view>
		      <view class="coupon_index_11">
				  	<text  v-if="item.status===1" @click="gouse(item.type)"> 立   即   使   用</text>
					<text  v-if="item.status===2">已    使    用</text>
					<text  v-if="item.status===3">已    过    期</text>
				 <!-- <view     @click.stop="!isover?gouse(item):''" >
				  	{{isover?(item.status==2?'已使用':'已过期'):'立即     使用'}}
				  </view> -->
			  </view>
		    
			<!-- <view  class="coupon_index_11   " v-if="item.status === 0"   @click="getcoupon(item.id)">
				<text class="coupon_index_11_1"> 立   即   领   取</text>
		
				</view>
				<view v-else     class="coupon_index_11"  >
					<text class="coupon_index_11_1"> 已   领   取</text>
					</view>
					
					<!-- <view class="coupon_item_jin"  ></view> -->  
		</view> 
		
		
		
		<!-- <view class="box-con">
			<view :class="'box-text'+(!isover?item.type:'')" v-if="item.type==2">商城</view>
			
			<view :class="'box-text'+(!isover?item.type:'')" v-else-if="item.type==3">认养</view>
			<view :class="'box-text'+(!isover?item.type:'')" v-else-if="item.type==4">通用</view>
		</view> -->
	<!-- 	<view class="coupon-money">
			<view class="nick" v-if="!types">ID:{{item.cardno}}</view>
			<view class="layof" :style="{color:theme}">￥{{item.money}}</view>
			<view class="end_time">{{item.etime}}前使用</view>
			<view v-if="!types">
				<view class="demand">{{item.title}}</view>
			</view>
			<view style="padding: 4px 0;text-decoration:underline;" class="demand" @click.stop="gotoDetails()">
				使用规则：满{{item.usemoney}}元，{{item.type==2?'商城':''}}{{item.type==3?'认养':''}}{{item.type==4?'全场':''}}可使用
			</view>
		</view> -->
	<!-- 	<view style="z-index: 9;">
			<view v-if="isShowCheck">
				<checkbox class='round orange' :disabled="item.disable" :class="item.checked?'checked':''"
					:checked="item.checked?true:false">
				</checkbox>
			</view>
			<view v-else>
				<view @click.stop="!isover?gouse(item):''" :class="!isover?'get-btn':'get-btn1'"
					:style="{background:solid}">
					{{isover?(item.status==2?'已使用':'已过期'):'去使用'}}
				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
import { object } from '../../js/underscore';
	export default {
		components: {

		},
		data() {
			return {

			}
		},
		props: {
			index: {
				type: Number,
				default: 0
			},
			// 是否有勾选框
			isShowCheck: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object
			},
			types: {
				type: String,
				default: ''
			},
			theme: {
				type: String,
				default: '#FF4A26'
			},
			solid: {
				type: String,
				default: '#ffffff'
			},
			color: {
				type: String,
				default: '#FF4A26'
			},
			isover: {
				type: Boolean,
				default: false
			},
			site:{
				type:Object
			}
		},
		methods: {
			gouse(item) {
				if(item==2){
					uni.switchTab({
						url: '/pages/mall/mall'
					})
				}else if(item==3){
					uni.switchTab({
						url: '/pages/index/adoplist/adoplist'
					})
				}else if(item==4){
					uni.switchTab({
						url: '/pages/land/land'
					})
				}
				
			},
			// 查看优惠券使用范围
			gotoDetails() {
				console.log('优惠券使用范围')
			},
			selectCoupon() {
				let that = this;
				if (that.isShowCheck) {
					that.$bus.$emit('updateChecked', that.index);

				}

			}

		}
	}
</script>

<style lang='scss'>
	
	.coupon-item {
		/* height: auto; */
		/* height: 131px; */
		/* display: table; */
		border-radius: 20rpx;
		/* padding: 0 30upx; */
		/* padding: 15px 5px 15px 15px; */
		margin-top: 20rpx;
		/* border: 1px solid #FFFFFF; */
		/* position: relative; */
		background-color: #fff;
		
		
	.coupon_index {
		display: flex;
		justify-content: space-between;
		background-color: #ffffff; 
		border-radius: 20rpx;
	   
		.coupon_indexs {
			   display: flex;
			   flex-direction:column;
			   width: 95%;
			   
			   
			.coupon_index_1 {
				display: flex;
				justify-content: flex-start;
	
				.coupon_index_2 {
					width: 13vh;
	                 
					.coupon_index_3 {
						background-color: lightcoral;
						width: 6vh;
						text-align: center;
						border-top-left-radius: 20rpx;
						border-bottom-right-radius: 25rpx;
						line-height: 40rpx;
						color: #fff;
						font-size: 25rpx;
					}
	
					.coupon_index_4 {
	
						align-items: center;
						text-align: center;
	
						.coupon_index_4_1 {
							font-size: 50rpx;
							color: red;
							font-weight: 600;
							padding: 10rpx 0;
						}
	
						.coupon_index_5 {
							font-size: 30rpx;
							color: indianred;
						}
					}
	
				}
	
				.coupon_index_6 {
					width: 25vh;
	               
					.coupon_index_7 {
						background-color: brown;
						line-height: 40rpx;
						width: 10vh;
						text-align: center;
						font-size: 24rpx;
						color: #fff;
						border-radius: 40rpx;
						float: right;
						margin-top: 20rpx;
						 
						 margin-bottom: 30rpx;
					}
	
					.coupon_index_8 {
						   margin-left: 1vh;
	
						.coupon_index_8_1 {
	
							font-size: 35rpx;
							font-weight: 600;
							padding: 90rpx 0 30rpx 0;
	
						}
	
						.coupon_index_9 {
							font-size: 26rpx;
							color:  #939393;
						}
					}
	
				}
			}
		}
		.coupon_index_10{
			display: flex;
			justify-content: flex-start;
			text-align: center;
			align-items: center;
			padding: 10rpx;
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}
			.coupon_index_10_1{
				padding: 0 10rpx;
				color: #939393;
				font-size: 26rpx;
			}
		}
		 
	    .coupon_index_11{
				 position: relative;
				 background-color: limegreen;
				 border-top-right-radius: 20rpx;
				 border-bottom-right-radius: 20rpx;
				 display: flex;
				 width:5vh;
				 min-height: 20px;
				 padding: 6px 0 6px 20px;
				 color: #fff; 
				 align-items: center;
				  text-align: center;
				 
			text{
				  writing-mode : tb-rl;
				  color: #fff;
				  text-align: center;
				 
			}
		}
		.coupon_index_11::before {
		    content: ' ';
		    width: 0;
		    height: 100%;
		    width: 0;
		    position: absolute;
		    border-right: 6px dotted white;
		    top: 0;
		    left: -3px;    
		}
		
		/* // .coupon_index_11::after {
		//     content: ' ';
		//     height: 100%;
		//     position: absolute;
		//     border-left: 6px dotted white;
		//     top: 0;
		//     right: -3px;    
		
		// }   
	
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

		.box-con {
			width: 85px;
			height: 88px;
			overflow: hidden;
			position: absolute;
			top: -3px;
			right: -3px;
			z-index: 1;
		}
		.box-text {
			color: white;
			text-align: center;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			position: relative;
			padding: 2px 0;
			left: 37px;
			top: 4px;
			width: 65px;
			background-color: #eeeeee;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#eeeeee));
			background-image: -webkit-linear-gradient(top, #eeeeee, #eeeeee);
			background-image: -moz-linear-gradient(top, #eeeeee, #eeeeee);
			background-image: -ms-linear-gradient(top, #eeeeee, #eeeeee);
			background-image: -o-linear-gradient(top, #eeeeee, #eeeeee);
			-webkit-box-shadow: 0px 0px 3px #eeeeee;
			-moz-box-shadow: 0px 0px 3px #eeeeee;
			box-shadow: 0px 0px 3px #eeeeee;
		}
		.box-text2 {
			color: white;
			text-align: center;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			position: relative;
			padding: 2px 0;
			left: 37px;
			top: 4px;
			width: 65px;
			background-color: #76c500;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#76c500), to(#76c500));
			background-image: -webkit-linear-gradient(top, #76c500, #76c500);
			background-image: -moz-linear-gradient(top, #76c500, #76c500);
			background-image: -ms-linear-gradient(top, #76c500, #76c500);
			background-image: -o-linear-gradient(top, #76c500, #76c500);
			-webkit-box-shadow: 0px 0px 3px #76c500;
			-moz-box-shadow: 0px 0px 3px #76c500;
			box-shadow: 0px 0px 3px #76c500;
		}

		.box-text2:before,
		.box-text2:after {
			content: "";
			position: absolute;
			bottom: -3px;
		}

		.box-text2:before {
			left: 0;
		}

		.box-text2:after {
			right: 0;
		}

		.box-text3 {
			color: white;
			text-align: center;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			position: relative;
			padding: 2px 0;
			left: 37px;
			top: 4px;
			width: 65px;
			background-color: #ff1b40;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#ff503e), to(#ff2f50));
			background-image: -webkit-linear-gradient(top, #ff503e, #ff2f50);
			background-image: -moz-linear-gradient(top, #ff503e, #ff2f50);
			background-image: -ms-linear-gradient(top, #ff503e, #ff2f50);
			background-image: -o-linear-gradient(top, #ff503e, #ff2f50);
			-webkit-box-shadow: 0px 0px 3px #ff1b40;
			-moz-box-shadow: 0px 0px 3px #ff1b40;
			box-shadow: 0px 0px 3px #ff1b40;
		}

		.box-text3:before,
		.box-text3:after {
			content: "";
			position: absolute;
			bottom: -3px;
		}

		.box-text3:before {
			left: 0;
		}

		.box-text3:after {
			right: 0;
		}

		.box-text4 {
			color: white;
			text-align: center;
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			position: relative;
			padding: 2px 0;
			left: 37px;
			top: 4px;
			width: 65px;
			background-color: #aa55ff;
			background-image: -webkit-gradient(linear, left top, left bottom, from(#aa55ff), to(#aa55ff));
			background-image: -webkit-linear-gradient(top, #aa55ff, #aa55ff);
			background-image: -moz-linear-gradient(top, #aa55ff, #aa55ff);
			background-image: -ms-linear-gradient(top, #aa55ff, #aa55ff);
			background-image: -o-linear-gradient(top, #aa55ff, #aa55ff);
			-webkit-box-shadow: 0px 0px 3px #aa55ff;
			-moz-box-shadow: 0px 0px 3px #aa55ff;
			box-shadow: 0px 0px 3px #aa55ff;
		}

		.box-text4:before,
		.box-text4:after {
			content: "";
			position: absolute;
			bottom: -3px;
		}

		.box-text4:before {
			left: 0;
		}

		.box-text4:after {
			right: 0;
		}

		.coupon-money {
			width: 465upx;
			height: auto;
			/* display: table;
             */
			/* float: left; */
		/* 	text-align: left;
			padding: 26upx 0;
			border-style: none dotted none none;
			border-color: #eeeeee; */

			/* .nick {
				width: 100%;
				height: 50upx;
				line-height: 30upx;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
			}
 */
		/* 	.tit {
				width: 100%;
				height: 50upx;
				line-height: 50upx;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
			} */

		/* 	.demand {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
			} */

		/* 	.layof {
				width: 100%;
				height: 48upx;
				line-height: 30upx;
				font-size: 44upx;
				color: #FF4A26;
				font-weight: bold;
			} */

			/* .end_time {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
			} */
		}

		/* .get-btn {
			width: 146upx;
			height: 52upx;
			line-height: 50upx;
			z-index: 99999999999999999;
			/* position: absolute;
            top: 50%;
            right: 20upx; */
		/* 	margin-top: -26upx;
			text-align: center;
			border-radius: 60upx;
			color: #FF4A26;
			border: 1px solid #FF4A26;
			font-size: $uni-font-size-sm; */
			/* float: right; */
		/* } */ 
		/* .get-btn1 {
			width: 146upx;
			height: 52upx;
			line-height: 50upx;
			z-index: 99999999999999999;
			 
			margin-top: -26upx;
			text-align: center;
			border-radius: 60upx;
			color: #eeeeee;
			border: 1px solid #eeeeee;
			font-size: $uni-font-size-sm;
			 
		} */
	}

	/* .coupon-item:after {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 470upx;
		top: -1px;
		border-radius: 0 0 40upx 40upx;
		content: "";
		display: block;
		background: #F5F5F7;
		border: 1px solid #eeeeee;
		border-top: 0px;
	} */

	/* .coupon-item:before {
		width: 40upx;
		height: 20upx;
		position: absolute;
		left: 470upx;
		bottom: -1px;
		border-radius: 40upx 40upx 0 0;
		content: "";
		display: block;
		background: #F5F5F7;
		border: 1px solid #eeeeee;
		border-bottom: 0px;
	} */
</style>