rt_fhyx_user_miniapp/pages_shopping/shopping/activityDetails.vue

<template>
  <view class="content">
	  <view class="banner-box" >
	  	<view class="inner">
	  		<swiper 
	  			class="swiper" 
	  			:autoplay="true" 
	  			:interval="3000" 
	  			:duration="1000"
	  		>
	  			<swiper-item class="swiper-item" v-for="(item,index) in images" :key="index"  >
	  				<image :src="item" mode=""></image>
	  			</swiper-item>
	  		</swiper>
	  	</view>
	  </view>
	  <view class="share">
		  <view class="item">
			  <view class="name">
			  			 已有{{activity.shareNumber}}人分享 
			  </view>
			  <view class="btn">
			  		分享 
					<button  class="share" data-name="shareBtn" open-type="share">分享</button>
			  </view>
		  </view>
		  
	  </view>
	 <view class="inner">
	 	<view  v-html="activity.content" style="font-size:0"></view>
	 </view>
	 <view class="product">
		<view>
			<special-banner :banner-list="productList" v-on:selectBanner="selectProduct" :swiper-config="swiperConfig"></special-banner>
		</view>
		 <!-- <view class="list">
			  <scroll-view   scroll-y="true" style="height: 500rpx;" >
				<view class="medic-list">
					<view v-for="(item,index) in products" :key="index" class="item" @click="showDetail(item)">
						<view class="img-box">
							<image :src="item.image" mode="aspectFit"></image>
						</view>
						<view class="info-box">
							<view class="title ellipsis2">{{item.productName}}</view>
							<view class="intro ellipsis">{{item.productInfo}}</view>
							<view class="prce-num">
								<view class="price">
									<text class="unit">¥</text>
									<text class="num">{{item.price.toFixed(2)}} </text>
								</view>
								<view class="cart-img" @click="navgetTo('../shopping/cart')">
									<view class="sale">已售 {{item.sales}} {{item.unitName}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</scroll-view>
		 </view> -->
		 
	 </view>
  </view>
</template>
<script>
import { getStoreActivityDetails,share } from '@/api/activity'
import specialBanner from '../components/specialBanner.vue'
	
export default {
	components: {
		specialBanner
	},
  data: function() {
    return {
       activityId:null,
	   products:[],
	   activity:null,
	   images:[],
	   productList:[],
	   swiperConfig: {
	   	indicatorDots: true,
	   	indicatorColor: 'rgba(255, 255, 255, .4)',
	   	indicatorActiveColor: 'rgba(255, 255, 255, 1)',
	   	autoplay: false,
	   	interval: 3000,
	   	duration: 300,
	   	circular: true,
	   	previousMargin: '58rpx',
	   	nextMargin: '58rpx'
	   }
    }
  },
  onLoad: function(options) {
    this.activityId=options.activityId;
	this.getStoreActivityDetails();
	// uni.setStorageSync(this.activityId,null);
  },
  onShareAppMessage(res) {
	this.share();
  	return {
  		title: this.activity.title,
  		path: '/pages_shopping/shopping/activityDetails?activityId='+this.activity.activityId,
  		imageUrl: this.activity.logoUrl //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  	}
  },
  //分享到朋友圈
  onShareTimeline(res) {
	this.share();
  	return {
  		title: this.activity.title,
  		query:'',//页面参数
  		imageUrl: this.activity.logoUrl //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  	}
  },
  methods: {
		selectProduct(item){
			console.log(item);
			uni.navigateTo({
				url: '../../pages/shopping/productDetails?productId='+item.id
			})
		},
		showDetail(item) {
			uni.navigateTo({
				url: '../../pages/shopping/productDetails?productId='+item.productId
			})
		},
		getStoreActivityDetails() {
			var that=this;
			let data = { activityId: this.activityId }
			getStoreActivityDetails(data).then(res => {
				this.activity=res.activity;
				this.products=res.products;
				this.products.forEach (function (value) {
					var item={
						picture: value.image,
						title: value.productName,
						description:value.keyword,
						id: value.productId,
						obj:value
					}
					that.productList.push(item)
				});
				this.images=res.activity.images.split(',')
				uni.setNavigationBarTitle({
					title: this.activity.title
				});
			})
		},
		share() {
			share(this.activityId).then(res => {
			})
		},
  },
}
</script>
<style lang="less" scoped>
	.content{
		position: relative;
		.banner-box{
			.inner{
				width: 100%;
				height: 400upx;
				overflow: hidden;
				.swiper,
				.swiper-item,
				.swiper-item image{
					width: 100%;
					height: 100%;
				}
				
			}
		}
		.share{
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #c8f2ee;
			.item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				background-color: #fff;
				border-radius: 15rpx;
				padding: 15rpx;
				margin: 15rpx;
			}
			.name{
				margin-left: 10rpx;
				flex: 1;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #b5b5b5;
			}
			.btn{
				margin-right: 15rpx;
				border-radius: 10rpx;
				padding: 10rpx 30rpx;
				background-color: #FF6633;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
				position: relative;
				.share{
					display: inline-block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%rpx;
					opacity: 0;
				}
			}
		}
		.product{
			position: fixed;
			bottom: 120rpx;
			left:0rpx;
			.list{
				display: flex;
				background-color: #fff;
				border-radius: 15rpx;
				margin: 15rpx;
				padding: 15rpx;
				.medic-list{
					.item{
						box-sizing: border-box;
						background: #FFFFFF;
						border: 4upx solid #FFFFFF;
						border-radius: 16upx;
						padding: 20upx 30upx;
						display: flex;
						.img-box{
							width: 200upx;
							height: 200upx;
							margin-right: 30upx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.info-box{
							width: calc(100% - 210upx);
							.title{
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #111111;
								line-height: 40rpx;
								height: 80rpx;
							}
							.intro{
								font-size: 26upx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #999999;
								line-height: 1;
								margin-top: 26upx;
							}
						 
							.prce-num{
								display: flex;
								align-items: center;
								justify-content: space-between;
								margin-top: 30upx;
								.price{
									display: flex;
									align-items: flex-end;
									.unit{
										font-size: 24upx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #FF6633;
										line-height: 1.2;
										margin-right: 4upx;
									}
									.num{
										font-size: 36upx;
										font-family: PingFang SC;
										font-weight: bold;
										color: #FF6633;
										line-height: 1;
									}
								}
								.cart-img{
									.sale{
										font-size: 20upx;
										font-family: PingFang SC;
										color: #999999;
									}
									 
								}
							}
						}
					}
				}
				
			}
		}
	}
</style>