【Add】增加领券活动

pages.json

@@ -153,6 +153,13 @@
 			{
 				"navigationBarTitleText" : "积分抽奖"
 			}
+		},
+		{
+			"path" : "pages/coupon/active",
+			"style" : 
+			{
+				"navigationBarTitleText" : "领券活动"
+			}
 		}
 	],
 	"globalStyle": {

pages/coupon/active.vue

@@ -0,0 +1,408 @@
+<template>
+	<view>
+		<view class="banner_box">
+			<image class="banner_img" :src="activeInfo.banner_img" ></image>
+		</view>
+		<view class="active_info">
+			<view class="active_name">{{activeInfo.name}}</view>
+			<view class="active_time">活动时间：{{activeInfo.start_date}} ~ {{activeInfo.end_date}}</view>
+			<view class="active_citys">活动范围：{{activeInfo.city_ids}}</view>
+		</view>
+		<view class="active_coupon">
+			<view class="active_subtitle">优惠券</view>
+			<view class="coupon_list">
+				<view class="coupon_item" v-for="(item,index) in activeInfo.coupon_list" :key="index">
+					<view class="left_box">
+						<view class="rebate" v-if="item.rebate_type == 1" > ￥{{item.rebate}}</view>
+						<view class="rebate" v-if="item.rebate_type == 2" > 打 {{item.rebate}} 折</view>
+						<view class="rebate" v-if="item.rebate_type == 3" > 赠 <text v-if="item.rebate_scope.length">{{item.rebate_scope[0].product_name}}</text> </view>
+						<view class="std_pay">满 ￥{{item.std_pay}} 可用</view>
+						<view class="coupon_exp">有效期：{{item.exp_time}}</view>
+					</view>
+					<view class="right_box">
+						<button class="get_btn" v-if="item.is_have == 0" @click="getCoupon(index)">立即领取</button>
+						<button class="get_btn" v-if="item.is_have == 1"  @click="toUse(item)">去使用</button>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="active_product">
+			<view class="active_subtitle">活动商品</view>
+			<view class="product_list" :class="show_more_product?'more':''">
+				<view class="product_item" v-for="(item,index) in activeInfo.product_list" :key="index" >
+					<image class="product_image" :src="item.thumb" mode=""></image>
+					<view class="product_name"><text>{{item.product_name}}</text></view>
+					<view class="stock_price">
+						<view class="product_price" >
+							<text >￥ {{item.price}} </text>
+						</view>
+						<view class="product_stock">剩{{item.stock}}个</view>
+					</view>
+				</view>
+			</view>
+			<view class="more_product" v-if="!show_more_product"  @click.stop="show_more_product = true">
+				<uni-icons type="down" size="20" ></uni-icons>
+			</view>
+		</view>
+		<view class="active_rule">
+			<view class="active_subtitle">活动规则</view>
+			<view class="active_rule_info">
+				<rich-text class="rich_text" :nodes="activeInfo.active_rule"></rich-text>
+			</view>
+		</view>
+		<view class="" style="height: 10rpx;"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// 是否显示更多的产品
+				show_more_product:false,
+				// 活动信息
+				activeInfo:{
+					id:0,
+					name:"",
+					banner_img:"",
+					active_rule:"",
+					status:0,
+					start_time:0,
+					end_time:0,
+					city_ids:"",
+					allow_join:0,
+					start_date:"",
+					end_date:"",
+					coupon_list:[],
+					product_list:[],
+				},
+				// 请求参数
+				requestParam:{
+					id:0
+				},
+			}
+		},
+		onLoad(param) {
+			this.requestParam.id = param.id;
+		},
+		onShow() {
+			// 登录提示
+			if( !this.$checkAccess.alterLogin() )  return ;
+			// 如果存在产品ID的话
+			if( this.requestParam.id > 0) {
+				// 请求详情
+				this.$http.request('api/coupon_active/get_detail',this.requestParam).then((re)=>{
+					// 成功渲染数据
+					if( re.code == 'success' ) {
+						// 刷新数据
+						this.activeInfo = re.data;
+						// 列表大于2.显示
+						if( re.data.product_list.length <= 2 ) this.show_more_product = true;
+					}else{
+						uni.showModal({
+							content:re.msg,
+							showCancel:false,
+						})
+					}
+				});		
+			}else{
+				uni.showModal({
+					content:"未知的活动ID",
+					showCancel:false,
+				})
+			}
+		},
+		methods: {
+			toUse(item){
+				// 没有范围
+				if( item.type_id == 2 ){
+					uni.switchTab({url:"/pages/index/index"});
+					return;
+				}
+				// 只有一个商品，直接跳转到对应商品
+				if( item.product_scope.length == 1 ){
+					uni.navigateTo({
+						url:"/pages/product/index?product_id="+item.product_scope[0]
+					})
+					return;
+				}
+				// 没有范围
+				if( item.product_scope.length > 1 ){
+					uni.navigateTo({
+						url:"/pages/coupon/product?coupon_id="+item.coupon_id
+					});
+					return;
+				}
+			},
+			getCoupon(index){
+				// 获取对应的数据
+				let couponId = this.activeInfo.coupon_list[index].coupon_id;
+				// 如果不能参与
+				if( !this.activeInfo.allow_join ) {
+					uni.showModal({
+						content:"暂不可参与活动",
+						showCancel:false,
+					})
+					return;
+				}
+				// 如果存在优惠券
+				if( couponId > 0) {
+					// 请求详情
+					this.$http.request('api/custom_coupon/get_coupon',{coupon_id:couponId}).then((re)=>{
+						// 成功渲染数据
+						if( re.code == 'success' ) {
+							this.activeInfo.coupon_list[index].is_have = 1;
+						}else{
+							uni.showModal({
+								content:re.msg,
+								showCancel:false,
+							})
+						}
+					});		
+				}else{
+					uni.showModal({
+						content:"请选择要领取的优惠券",
+						showCancel:false,
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.banner_box{
+		width: 750rpx;
+		height: 240rpx;
+		display: block;
+		overflow: hidden;
+		margin: 0rpx auto;
+		.banner_img{
+			width: 750rpx;
+			height: 240rpx;
+		}
+	}
+	.active_info{
+		width: 750rpx;
+		display: block;
+		overflow: hidden;
+		margin: 0rpx auto;
+		padding: 10rpx 35rpx;
+		background-color: #FFFFFF;
+		.active_name{
+			display: block;
+			height: 60rpx;
+			font-size: 36rpx;
+			font-weight: bold;
+			line-height: 60rpx;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+		.active_time{
+			display: block;
+			height: 40rpx;
+			font-size: 26rpx;
+			line-height: 40rpx;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+		.active_citys{
+			display: block;
+			max-height: 80rpx;
+			font-size: 26rpx;
+			line-height: 40rpx;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+	}
+	.active_coupon{
+		display: block;
+		overflow: hidden;
+		margin-top: 20rpx;
+		padding: 0rpx 35rpx;
+		.active_subtitle{
+			display: block;
+			height: 80rpx;
+			overflow: hidden;
+			font-size: 32rpx;
+			font-weight: bold;
+			line-height: 80rpx;
+		}
+		.coupon_list{
+			display: block;
+			overflow: hidden;
+			.coupon_item{
+				display: block;
+				height: 140rpx;
+				overflow: hidden;
+				padding: 10rpx 25rpx;
+				border-radius: 15rpx;
+				margin-bottom: 10rpx;
+				background-color: #FFFFFF;
+				.left_box{
+					float: left;
+					width: 400rpx;
+					height: 140rpx;
+					display: block;
+					.rebate{
+						color: #E03519;
+						height: 60rpx;
+						font-size: 36rpx;
+						line-height: 60rpx;
+						font-weight: bold;
+					}
+					.std_pay{
+						color: #666666;
+						height: 40rpx;
+						font-size: 24rpx;
+						line-height: 40rpx;
+					}
+					.coupon_exp{
+						color: #666666;
+						height: 40rpx;
+						font-size: 24rpx;
+						line-height: 40rpx;
+					}
+				}
+				.right_box{
+					float: right;
+					width: 160rpx;
+					height: 60rpx;
+					display: block;
+					margin-top: 40rpx;
+					.get_btn{
+						display: block;
+						width: 160rpx;
+						height: 60rpx;
+						color: #FFFFFF;
+						font-size: 26rpx;
+						line-height: 60rpx;
+						text-align: center;
+						padding: 0rpx 0rpx;
+						border-radius: 10rpx;
+						background-color: #E03519;
+					}
+				}
+			}
+		}
+	}
+	.active_product{
+		display: block;
+		overflow: hidden;
+		margin-top: 10rpx;
+		padding: 0rpx 35rpx;
+		.active_subtitle{
+			display: block;
+			height: 80rpx;
+			overflow: hidden;
+			font-size: 32rpx;
+			font-weight: bold;
+			line-height: 80rpx;
+		}
+		.product_list{
+			display: block;
+			height: 520rpx;
+			overflow: hidden;
+			.product_item{
+				float: left;
+				width: 320rpx;
+				height: 480rpx;
+				display: block;
+				overflow: hidden;
+				margin-top: 20rpx;
+				margin-right: 40rpx;
+				background-color: #FFFFFF;
+				border-radius: 20rpx;
+				.product_image{
+					width: 320rpx;
+					height: 320rpx;
+				}
+				.product_name{
+					height: 80rpx;
+					font-size: 30rpx;
+					line-height: 40rpx;
+					overflow: hidden;
+					margin: 0rpx 0rpx;
+					padding: 0rpx 10rpx;
+					text-overflow: ellipsis;
+				}
+				.stock_price{
+					color: #dddddd;
+					font-size: 20rpx;
+					overflow: hidden;
+					line-height: 30rpx;
+					padding: 0rpx 10rpx;
+					.product_price{
+						float: left;
+						color: red;
+						font-size: 30rpx;
+						line-height: 60rpx;
+						.product_market{
+							font-size: 24rpx;
+							color: #999999;
+							line-height: 30rpx;
+							vertical-align: top;
+							text-decoration: line-through;
+						}
+					}
+					.product_stock{
+						float: right;
+						font-size: 20rpx;
+						line-height: 60rpx;
+					}
+				}
+			}
+			.product_item:nth-child(even){
+				margin-right: 0rpx;
+			}
+		}
+		.product_list.more{
+			height: auto !important;
+		}
+		.more_product{
+			z-index: 8;
+			left: 0rpx;
+			top: -10rpx;
+			height: 40rpx;
+			display: block;
+			font-size: 20rpx;
+			line-height: 40rpx;
+			text-align: center;
+			position: relative;
+			border-radius: 5rpx;
+			background-color: rgba(0, 0, 0, 0.1);
+		}
+	}
+	.active_rule{
+		display: block;
+		overflow: hidden;
+		margin-top: 10rpx;
+		padding: 0rpx 35rpx;
+		margin-bottom: 160rpx;
+		.active_subtitle{
+			display: block;
+			height: 80rpx;
+			overflow: hidden;
+			font-size: 32rpx;
+			font-weight: bold;
+			line-height: 80rpx;
+		}
+		.active_rule_info{
+			display: block;
+			overflow: hidden;
+			font-size: 24rpx;
+			min-height: 500rpx;
+			line-height: 40rpx;
+			border-radius: 10rpx;
+			padding: 20rpx 20rpx;
+			box-sizing: border-box;
+			background-color: #FFFFFF;
+			.rich_text{
+				white-space: break-spaces;
+			}
+		}
+	}
+</style>