kailin_mp/pages/coupon/active.vue

<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" v-if="activeInfo.city_ids">活动范围：{{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" v-if="activeInfo.product_list.length" >
			<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" v-if="activeInfo.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;
			// 如果有scene参数的话，获取其中的ID
			if( param.scene )	{
				// 转键值对参数
				let scene		= this.$http.strToParam(param.scene);
				// 如果没有传入ID，但是传入了场景ID，获取场景ID
				if( !param.id && scene.id )	this.requestParam.id = scene.id;
			}
			// #ifdef MP-WEIXIN
			//分享按钮
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShareAppMessage(obj) {
			return {
				title: this.activeInfo.name,
				path: '/pages/coupon/active?id='+this.requestParam.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{
						if( re.code != 'no_login' ){
							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;
						overflow: hidden;
						font-size: 36rpx;
						line-height: 60rpx;
						font-weight: bold;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.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>