CommunityApp/pagesM/comps/promotion_detail.vue

<template>
	<view class="dt-page">
		<view v-show="theme==0" 
			style="
			background-color: #dd524d;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 130upx;
			border-bottom-left-radius: 10%;
			border-bottom-right-radius: 10%;">
		</view>
		
		<view v-show="theme==0" style="margin: 0 20upx;position: relative; ">
			<image v-for="(item,index) in special.imgs" :key="index" :src="item" mode="widthFix"  @load="imgload" style="width: 100%;border-radius: 20upx;position: relative;margin-top: 50upx; "></image>
		</view>
		<image v-show="theme!=0" v-for="(item,index) in special.imgs" :key="index" :src="item" mode="widthFix"  @onload="imgload" style="width: 100%;"></image>
		<scroll-view scroll-x="true">
			<view class="menu_scroll" >
				<view 
					v-show="specialTags.length>4"
					v-for="(item,index) in specialTags"
					:key="index" 
					@tap="changetabs(index)"
					 :class="index==selectIndex?'menu_item_active':''"
					 :style="special.imgs?'':'color:#fff'"
					 class="menu_item02">
					<view>
						{{item.name}}
					</view>
					<view
					 v-show="!special.imgs"
					:class="index==selectIndex?'menu_item_line_active':''" 
					style="height: 4upx;width: 60upx;margin: 10upx auto 0;">
					</view>
				</view>
				<view
					v-show="specialTags.length<5"
					v-for="(item,index) in specialTags"
					:key="index" 
					@tap="changetabs(index)"
					 :class="index==selectIndex?'menu_item_active':''"
					 :style="special.imgs?'':'color:#fff'"
					 class="menu_item">
					<view>
						{{item.name}}
					</view>
					<view
					v-show="!special.imgs"
					:class="index==selectIndex?'menu_item_line_active':''" 
					style="height: 4upx;width: 60upx;margin: 10upx auto 0;">
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-show="theme!=0" v-for="(item,index) in specialTags" :key="index"
		style="margin: 0 20upx;
			height:74upx;
			font-size: 32upx;
			color: #DB4444;
			font-weight: 800;
			line-height: 74upx;
			text-align: center;
			background:rgba(255,230,230,1);
			border:2upx solid rgba(219,68,68,1);
			border-radius:25px;">{{item.name}}</view>
			<view class="swiper-wrapper">
				<swiper :style="swiperHeight" duration="300" :current="selectIndex" @change="onSwiperChange">
				  <swiper-item v-for="(tItem, tIdx) in specialTags" :key="tIdx" >
				    <scroll-view @scrolltolower="onReachLower" scroll-y="true" style="height: 100%;">
				      <block v-show="selectIndex==tIdx">
				        <view v-show="emptyType==0" class="content-wrap">
						  <DtGoodsList :dataList="tItem.products" :bgColor="bgColor" />
				          <DtNoMore v-if="isNoMore" />
				        </view>
							<view style="margin-top: 100upx;">
								<DtEmpty :type="emptyType"/>
							</view>
				      </block>
				    </scroll-view>
				  </swiper-item>
				</swiper>
			</view>
			<view v-if="coupons.length>0&&couponShow" class="coupon_mengban">
				<view class="coupon" @tap.stop="tapDrawCoupon">
					<image src="http://139.9.103.171:1888/img/image/promotion_coupon.png" mode="widthFix" style="width: 650upx;height: 680upx;" ></image>
					<image class="ic_off" src="http://139.9.103.171:1888/img/image/ic_coupon_off.png" mode="widthFix" @tap.stop="close_coupon"></image>
					<view class="scroll">
						<view v-if="!item.isReceive&&index<3" v-for="(item, index) in coupons" :key="index" style="position: relative;margin-bottom: 10upx;">
							<image src="http://139.9.103.171:1888/img/image/promotion_coupon_item.png" mode="widthFix"></image>
							<view style="padding: 0 20upx;position: absolute;top:0;bottom: 0;left: 0;right:0;display: flex;align-items: center;color: #ff4300;">
								<view style="display: flex;align-items: flex-end;width: 180upx;">
									<view style="font-size: 30upx;margin-bottom: 5upx;font-weight: bold;">￥</view>
									<view style="font-size: 60upx;font-weight: bold;">{{item.amt}}</view>
								</view>
								<view>
									<view style="font-size: 28upx;margin-bottom: 10upx;">{{item.name}}</view>
									<view style="font-size: 17upx;color: #999999;">此券仅在新邻社区小程序商城使用</view>
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	import DtEmpty from './dt_empty.vue'
	import DtGoodsList from './dt_goods_list.vue'
	import DtNoMore from './dt_no_more.vue'
	export default {
		components: {
		  DtGoodsList,
		  DtEmpty,
		  DtNoMore
		},
		data() {
			return {
				bgColor:'transparent',
				specialId:'',
				specialTags: [], //会场标签
				special: {},//会场
				url:'',
				params:{},
				selectIndex:0,
				theme:0,
				coupons:[],
				winHeight:'',
				couponShow:false
			};
		},
		computed: {
		  calcHeight() {
		    return "height:" + this.winHeight + "px;";
		  },
		  swiperHeight() {
		    return "height:" + this.winHeight + "px;";
		  }
		},
		onReady() {
			//swiper高度自适应
			this.getElementHeight('.swiper-wrapper')
		},
		methods:{
			close_coupon(){
				this.couponShow = false;
			},
			imgload(){
				this.getElementHeight('.swiper-wrapper')
			},
			getElementHeight(element) {
				let windowHeight = 0;
				uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
					success(res) { //成功回调函数
						windowHeight=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
					}
				});
				setTimeout(()=>{
					// let query = uni.createSelectorQuery().in(this);
					// query.select(element).boundingClientRect();
					// query.exec((res) => {
					// 	if (!res) {//如果没获取到，再调一次
					// 		this.getElementHeight();
					// 	}else {
					// 		this.swiperHeight = (windowHeight-res[0][0].top)+'px';
					// 		console.log(res[0][0].top,res)
							
					// 	}
						
					// })
					
					const query = uni.createSelectorQuery().in(this);
					query.selectAll(element).boundingClientRect();
						query.exec((res) => {
							if (!res) {//如果没获取到，再调一次
								this.getElementHeight();
							}else {
								this.winHeight = windowHeight - res[0][0].top;
							}
						})
					
				},20)
			},
			onReachLower(ev) {
			  this.onReachBottomPage();
			},
			onLoadPage(options) {
				uni.setNavigationBarTitle({
					title:options.title
				});
				this.theme = options.style;
				if(options.style==0){
					uni.setNavigationBarColor({
						frontColor: '#ffffff',
						backgroundColor:'#dd524d'
					})
				}
				this.memberId = this.$auth.getMemberId();
				this.url = options.url;
				let strLength = this.findIndexOf(this.url);
				this.params['theme'] = this.url.substring(strLength[strLength.length-3]+1,(strLength[strLength.length-2]));
				this.params['specialAttributeId'] = this.url.substring((strLength[strLength.length-2])+1,(strLength[strLength.length-1]));
				console.log(this.params)
				this.getSpecial();
				
				// 初始化高度
				// let res = uni.getSystemInfoSync();
				// let clientHeight = res.windowHeight;
				// let clientWidth = res.windowWidth;
				// let upxR = 750 / clientWidth;
				// let calc = clientHeight * upxR - 110;
				// let height = uni.upx2px(calc);
				// this.winHeight = height;
			},
			findIndexOf(str) {
				let strArr=[];
			    for(let i =0;i<str.length;i++){
					if(str[i]=='/'){
						strArr.push(i);
					}
				}
				return strArr;
			},
			tapDrawCoupon(){
				let list = []
				this.coupons.map((item,index)=>{
					list.push(this.getCoupons(item))
				})
				Promise.race(list).then((resList) => {
				  console.log(255, resList)
				}).catch(err => {
				  consle.log(err)
				}).finally(() => {
					this.$dialog.toast('领取成功')
					this.couponShow = false
				})
			},
			async getCoupons(item) {
			 //  let resp = await this.$api.getCoupons({
			 //    memberId: this.memberId,
				// id:item.id
			 //  });
			 this.isLogin = this.$auth.isAuth;
			 		if (!this.$auth.isAuth) {
			 			this.$refs.dialogLogin.show();
			 			return;
			 		}
			 		let member = this.$auth.getMemberInfo();
			 		if(member == null){
			 			this.$refs.dialogLogin.show();
			 			return;
			 		}
			 		if(!member.isNewMember){
			 			this.$dialog.toast('仅新人可领取');
			 			return;
			 		}
			 		if(item.isReceive){
			 			this.$dialog.toast('已领取');
			 			return;
			 		}
			 	    let resp = await this.$api.couponExchange({memberId:this.$auth.getMemberId(),couponId:item.id,_isShowLoading: true,})
			  return resp
			},
			async getSpecial() {
			  let resp = await this.$api.getSpecial({
				   _isShowLoading:true,
			    memberId: this.memberId,
				sessionId:null,
				specialAttributeId:this.params.specialAttributeId,
				theme:this.params.theme
			  });
			  this.special = resp.specialAttribute;
			  this.specialTags = resp.specialTags;
			  let respCoupons = await this.$api.getNewCoupons({}) 
			  this.coupons = respCoupons;
			  let member = this.$auth.getMemberInfo();
			  if(respCoupons.length>0){
				  respCoupons.map((item)=>{
					  if(!item.isReceive&&member.isNewMember){
						  this.couponShow = true
					  }
				  })
			  }
			  if(this.specialTags[0].products.length>0){
			  	this.emptyType = 0;
			  }else{
			  	this.emptyType = 1;
			  }
			},
			// async loadProducts(specialTagId){
			//     let hasValue=false,index=null;
			//     for (var i = 0,j=this.specialTags.length; i < j; i++) {
			//         if(this.specialTags[i].id==specialTagId){
			//             hasValue=this.specialTags[i].products.length>0;
			//             index=i;
			//         }
			//     }
			//     if(!hasValue){
			// 		let resp = await this.$api.getProducts({
			// 			specialId:this.params.specialAttributeId,
			// 			specialTagId:specialTagId,
			// 		});
			// 		this.specialTags[index].products=resp;
			//     }
			// },
			changetabs(index){
				this.selectIndex = index;
				// this.isNoMore = false
				// this.emptyType = -1
				// this.pageIndex = 0;
				// this.dataList.length = 0
				if(this.specialTags[index].products.length>0){
					this.emptyType = 0;
				}else{
					this.emptyType = 1;
				}
			    // let specialTagId = this.specialTags[index]['id'];
			    // this.loadProducts(specialTagId);
			},
			onSwiperChange(e){
				this.selectIndex = e.detail.current;
				if(this.specialTags[e.detail.current].products.length>0){
					this.emptyType = 0;
				}else{
					this.emptyType = 1;
				}
			}
		}
	}
</script>

<style lang="scss">
	.menu_scroll{
		padding: 0 20upx;
		white-space: nowrap;
		height: 70upx;
		display: flex;
		align-items: center;
		.menu_item{
			text-align: center;
			font-size: 28upx;
			font-weight: bold;
			flex:1;
			text-align: center;
		}
		.menu_item02{
			text-align: center;
			font-size: 28upx;
			font-weight: bold;
			margin-right: 20upx;
			text-align: center;
		}
		.menu_item_active{
			color: $dt-color-primary;
		}
		.menu_item_line_active{
			background-color: #fff;
		}
	}
	.coupon_mengban{
		transition: all 3s ease;
		position: fixed;
		top: 0;
		bottom: 0;
		right:0;
		left:0;
		background-color: rgba(0,0,0,0.7);
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9;
		.coupon{
			width: 650upx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.scroll {
			  width: 485upx;
			  height: 320upx;
			  bottom: 20upx;
			  position: absolute;
			  image{
				  width: 485upx;
			  }
			 }
		}
		.ic_off{
				  width: 50upx;
				  height: 50upx;
				  position: absolute;
				  bottom: -100upx;
				  z-index:10
			  }
	}	
	
</style>