CommunityApp/pagesM/comps/dt_special.vue

<template>
	<view class="dt-page" >
		<image v-for="(img,index) in special.imgs" :src="img" mode="widthFix" :key="index" style="width: 100vw;display: block;"/>
		<view v-for="(item, index) in specialTags" :key="index" style="position: relative;">
			<image v-if="item.isBgImg" :src="item.path1" mode="widthFix" style="width: 100vw;display: block;"></image>
			<view style="position: absolute;top: 0;left: 0;right: 0;display: flex;flex-direction: column;align-items: center;">
				<view v-if="index==0" style="color: #fde9ac;font-size: 40upx;font-weight: bold;letter-spacing: 10upx;margin: 50upx 0 160upx;">{{item.name}}</view>
				<view v-else style="color: #fde9ac;font-size: 40upx;font-weight: bold;letter-spacing: 10upx;margin: 50upx 0;">{{item.name}}</view>
				<view style="display: flex;flex-wrap: wrap;">
					<view v-if="childIndex==0&&childIndex<5" v-for="(child,childIndex) in item.products" :key="childIndex" @tap="jumpGoodsDes(child.id||child.productId)" style="width: 100vw;margin-bottom: 20upx;position: relative;">
						<image v-if="index==0" src="http://139.9.103.171:1888/img/image/festival_goods_bg3.png" style="width: 670upx;margin: 0 40upx;" mode="widthFix"></image>
						<image v-else src="http://139.9.103.171:1888/img/image/festival_goods_bg2.png" style="width: 670upx;margin: 0 40upx;" mode="widthFix"></image>
						<view style="position: absolute;top: 20upx;bottom:20upx;left: 70upx;right:70upx;display: flex;align-items: center;overflow: hidden;">
							<view style="width: 253upx;height: 253upx;">
								<image :src="child.thumbnail||child.img|| 'http://139.9.103.171:1888/img/image/goods_def.png'" style="width: 253upx;height: 253upx;display: block;"></image>
							</view>
							<view :style="{color: index==0?'#dc131b':'#fde9ac'}" style="margin-left: 20upx;font-size: 20upx;width: 350upx;">
								<view class="dt-text-row-one" style="font-size: 30upx;margin-top: 20upx;">{{child.name}}</view>
								<view style="margin: 5upx 0;overflow: hidden;white-space: nowrap;">-------------------------------------------------</view>
								<view class="dt-text-row-one">{{child.caption}}</view>
								<view style="position: relative;">
									<image src="http://139.9.103.171:1888/img/image/festival_goods_boom.png" style="margin-top: 10upx;width: 280upx;display: block;" mode="widthFix"></image>
									<view style="text-decoration: line-through;position: absolute;top: 5upx;left: 0;">原价￥{{child.marketPrice}}</view>
								</view>
								<view style="display: flex;height: 35upx;align-items: flex-end;">
									<view>惊喜价</view>
									<view style="font-size: 30upx;margin-bottom: -6upx;">￥</view>
									<view style="font-size: 40upx;font-weight: bold;margin-bottom: -8upx;">{{child.price}}</view>
									<view v-if="index==0" style="background-color: #dc131b;color: #fde9ac;border-radius: 25px;padding: 4upx;margin-left: 20upx;font-size: 16upx;">立即购买>></view>
									<view v-else style="background-color: #fde9ac;color: #183f6a;border-radius: 25px;padding: 4upx;margin-left: 20upx;font-size: 16upx;">立即购买>></view>
								</view>
							</view>
						</view>
					</view>
					
					<view v-if="childIndex!=0&&childIndex<5" v-for="(child,childIndex) in item.products" :key="childIndex" @tap="jumpGoodsDes(child.id||child.productId)" style="width: 306upx;margin-left: 45upx;margin-bottom: 20upx;position: relative;">
						<image src="http://139.9.103.171:1888/img/image/festival_goods_bg.png" style="width: 100%;display: block;" mode="widthFix"></image>
						<view style="position: absolute;top: 20upx;left: 15upx;right: 8upx;bottom:10upx;border-radius: 14upx;overflow: hidden;">
							<view style="width: 283upx;height: 283upx;">
							  <image :src="child.thumbnail||child.img|| 'http://139.9.103.171:1888/img/image/goods_def.png'" style="width: 283upx;height: 283upx;"></image>
							  <view class="goods_sell_out_tip" v-if="false">补货中</view>
							</view>
							<view style="background-color: #c01e1c;height: 80upx;padding: 10upx;color:#fde9ac;">
								<view class="dt-text-row-one" style="font-size: 25upx;">{{child.name}}</view>
								<view style="display: flex;font-size: 20upx;height: 45upx;display: flex;align-items: flex-end;">
									<view style="text-decoration: line-through;">原价￥{{child.marketPrice}}</view>
									<view style="margin-left: 20upx;">惊喜价￥</view>
									<view style="font-size: 30upx;">{{child.price}}</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import DtEmpty from '../comps/dt_empty.vue'
	import DtGoodsList from '../comps/dt_goods_list.vue'
	import DtNoMore from '../comps/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:''
			};
		},
		computed: {
		  calcHeight() {
		    return "height:" + this.winHeight + "px;";
		  },
		  swiperHeight() {
		    return "height:" + this.winHeight + "px;";
		  }
		},
		onReady() {
			//swiper高度自适应
			this.getElementHeight('.swiper-wrapper')
		},
		methods:{
			jumpGoodsDes(id) {
			  console.log(id);
			  uni.navigateTo({
			    url: "/pagesM/pages/goods_des?id=" + id
			  })
			},
			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;
			},
			// async getCoupons() {
			//   let resp = await this.$api.getCoupons({
			//     memberId: this.memberId
			//   });
			  
			//   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;
			  this.coupons = resp.coupons;
			  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;
		}
	}
	
</style>