营销单页

library/pageDetail/index.css

@@ -768,4 +768,28 @@
 .code-image{
 	width: 400rpx;
 	height: 400rpx;
-}
+}
+
+.ruzhu{padding: 30rpx 0;justify-content: center;}
+.ruzhu text{font-size: 24rpx;color: #a5a5a5;}
+.ruzhu .rz-text{color: #2B8CFF;margin: 0 10px;}
+
+/* 按钮悬浮 */
+.bot-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;z-index: 50;background-color: #fff;}
+.btn{width: 100%;height: 80rpx;background-color: #2B8CFF;font-size: 30rpx;color: #fff;border-radius: 10rpx;text-align: center;line-height: 80rpx;}
+.btn-red{background-color: #fe0419;}
+/* 商品悬浮 */
+.product-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;background-color: #fff;z-index: 50;border-top: 1rpx solid #f1f1f1;}
+.product-fixed image{width: 100rpx;height: 100rpx;border-radius: 10rpx;margin-right: 20rpx;}
+.product-tit{font-size: 28rpx;color: #333;font-weight: bold;}
+.product-opt{margin-top: 10rpx;justify-content: space-between;}
+.product-price .product-price-m{font-size: 28rpx;color: #C5020B;font-weight: bold;}
+.product-price .product-price-t{font-weight: normal;font-size: 24rpx;margin-left: 10rpx;color: #252A3B;}
+.product-btn{background-color: #2B8CFF;height: 50rpx;border-radius: 25rpx;padding: 0 20rpx;font-size: 28rpx;color: #fff;text-align: center;line-height: 50rpx;}
+/* 优惠券悬浮 */
+.coupon-fixed{position: fixed;left: 0;right: 0;bottom: 0;padding: 30rpx;background-color: #fff;z-index: 50;border-top: 1rpx solid #f1f1f1;}
+.coupon-fixed image{width: 80rpx;height: 80rpx;margin-right: 15rpx;}
+.coupon-fixed .title{font-size: 32rpx;}
+.coupon-fixed .money{justify-content: flex-start;}
+.coupon-fixed .money text{font-size: 30rpx;}
+.coupon-fixed .money .texts{font-size: 24rpx;}

library/pageDetail/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="page-div">
+	<view class="page-view">
 		<block v-if="jsonContent && jsonContent.length > 0" v-for="(item, index) in jsonContent" tid="index">
 			<view class="ban" v-if="item.key == 'banner'">
 				<swiper class="swiper" @change="swiperChange" autoplay="true" interval="5000" duration="300">
@@ -13,9 +13,9 @@
 					<block v-for="(it,idx) in item.value.imageList" tid="idx"><view :class="['dot', idx == swiperCurrent ? 'active' : '']"></view></block>
 				</view>
 			</view>
-			<view class="form flex-col ddflex" v-if="item.key == 'applicationForm'">
+			<view class="form" v-if="item.key == 'applicationForm'">
 				<text class="form-title" v-if="item.value.title.isShow">{{ item.value.title.value }}</text>
-				<view class="form-list flex-col ddflex">
+				<view class="form-list">
 					<view class="li ddflex" v-for="(it,idx) in item.value.formItemList" tid="idx">
 						<block v-if="it.type == 1">
 							<!-- <input value="{{it.fieldValue}}" placeholder="{{'请填写0' + it.label}}" placeholder-class="placeholder" class="ipt fflex" if="{{it.dataType == 1}}" data-item="{{it}}" @change="changeFieldValue"/>
@@ -56,7 +56,7 @@
 						</picker> -->
 					</view>
 				</view>
-				<text class="form-btn" @click="formSubmit(item.value)">{{ item.value.buttonName }}</text>
+				<view class="form-btn" id="view-box" @click="formSubmit(item.value)">{{ item.value.buttonName }}</view>
 			</view>
 			<view class="richText" v-if="item.key == 'text'">
 				 <richtext type="html">{{item.value.content}}</richtext>
@@ -223,6 +223,7 @@
 				</view>
 				<text
 					class="chongzhi"
+					id="view-box"
 					@click="remainder()"
 					:style="item.value.mainColor ? 'background-color: ' + item.value.mainColor + ';border: 1px solid ' + item.value.mainColor + ';' : ''"
 				>
@@ -231,6 +232,73 @@
 			</view>
 		</block>
 
+		<block v-if="jsonContent && jsonContent.length > 0" v-for="(item,index) in jsonContent" :key="index">
+			<block v-if="item.key == 'fixedNode'">
+				<block v-if="item.value.type == 'applicationForm' || item.value.type == 'recharge'">
+					<block v-if="isShowBotFixed">
+						<view style="height: 140px;"></view>
+						<view class="bot-fixed">
+							<view :class="'btn'+(item.value.type == 'recharge' ? ' btn-red':'')" @click="anchor(item.value.type == 'applicationForm' ? 'form':'recharge')">{{item.value.contentObj.value.buttonName}}</view>
+						</view>
+					</block>
+				</block>
+				<block v-if="item.value.type == 'product'">
+					<view style="height: 160px;"></view>
+					<block v-for="(it,idx) in item.value.contentObj.value.productList" :key="idx">
+						<view class="product-fixed ddflex" v-if="it.isFixedNode" @click="jumpUrl('pages/product/detail', {id:it.id})">
+							<image :src="it.pic" mode="aspectFill"></image>
+							<view class="fflex flex-col">
+								<view class="product-tit tover">{{it.title}}</view>
+								<view class="product-opt ddflex">
+									<view class="product-price">
+									<view class="product-price-m">￥{{ it.minSalePrice }}</view>
+									<!-- <text class="product-price-t">/起</text> -->
+									</view>
+									<view class="product-btn">立即购买</view>
+								</view>
+							</view>
+						</view>
+					</block>
+				</block>
+				<block v-if="item.value.type == 'coupon'">
+					<view style="height: 140px;"></view>
+					<block v-for="(it,idx) in item.value.contentObj.value.couponList" :key="idx">
+						<view class="coupon-fixed ddflex" v-if="it.isFixedNode">
+							<image :src="it.couponIcon" mode="aspectFill" v-if="it.couponIcon"></image>
+							<view class="fflex flex-col">
+								<view class="title tover">{{it.couponTitle}}</view>
+								<view class="money">
+									<view class="texts">￥</view>
+									<view>{{ it.couponAmount }}</view>
+								</view>
+							</view>
+							<block v-if="it.userCount >= it.userReceive && it.userCount != 0 && it.userReceive != -1">
+								<view class="yong ddflex" @click="jumpUrl('pages/mine/coupons')">去使用</view>
+							</block>
+							<block v-else>
+								<view
+									@click="getCoupon(it)"
+									class="yong ddflex"
+									v-if="item.value.contentObj.value.btnBackground.length == 2"
+									:style="'background: linear-gradient(90deg, ' + item.value.contentObj.value.btnBackground[0] + ' 0%, ' + item.value.contentObj.value.btnBackground[1] + ' 100%);'"
+								>
+									{{ item.value.contentObj.value.buttonName }}
+								</view>
+								<view
+									@click="getCoupon(it)"
+									class="yong ddflex"
+									v-else-if="item.value.contentObj.value.btnBackground.length == 1"
+									:style="'background: ' + item.value.contentObj.value.btnBackground[0] + ';'"
+								>
+									{{ item.value.contentObj.value.buttonName }}
+								</view>
+								<view class="yong ddflex" v-else @click="getCoupon(it)">{{ item.value.contentObj.value.buttonName }}</view>
+							</block>
+						</view>
+					</block>
+				</block>
+			</block>
+		</block>
 	
 		<view class="mask" v-if="isShowMask"></view>
 		<!-- <view class="guide" :style="'top:'+37+'rpx;'">
@@ -359,6 +427,10 @@ export default {
 			//使用用券
 			isShowCard: false,
 			currentCard: {},
+			ruzhuItem: '',
+
+			isShowBotFixed: true,//是否显示悬浮按钮
+			windowHeight: '',
 		}
 	},
 	async onLoad(options) {
@@ -617,68 +689,76 @@ export default {
 			this.$forceUpdate();
 		},
 		getParams() {
-			let that = this;
-			let params = {
-				code: this.code
-			};
-			return new Promise((resolve, reject) => {
-				req.getRequest(
-					'/api/material/library/detail',
-					params,
-					data => {
-						data.params.jsonContent.map(item => {
-							if (item.key == 'applicationForm') {
-								//表单
-								item.value.formItemList.map(it => {
-									if (it.label.indexOf('姓名') > -1) {
-										if (that.userInfo.nickName) {
-											it.fieldValue = that.userInfo.nickName;
+				let that = this;
+				let params = {
+					code: this.code
+				};
+				return new Promise((resolve, reject) => {
+					req.getRequest(
+						'/api/material/library/detail',
+						params,
+						data => {
+							data.params.jsonContent.map(item => {
+								if (item.key == 'applicationForm') {
+									//表单
+									item.value.formItemList.map(it => {
+										if (it.label.indexOf('姓名') > -1) {
+											if (that.userInfo.nickName) {
+												it.fieldValue = that.userInfo.nickName;
+											}
 										}
-									}
-									if (it.label.indexOf('手机') > -1) {
-										if (that.userInfo.mobile) {
-											it.fieldValue = that.userInfo.mobile;
+										if (it.label.indexOf('手机') > -1) {
+											if (that.userInfo.mobile) {
+												it.fieldValue = that.userInfo.mobile;
+											}
+										}
+										if (it.type == 4) {
+											//备注
+											it.fieldValue = '';
+										}
+										if (it.type == 5) {
+											it.option = ['大健康', '快销品'];
 										}
-									}
-									if (it.type == 4) {
-										//备注
-										it.fieldValue = '';
-									}
-									if (it.type == 5) {
-										it.option = ['大健康', '快销品'];
-									}
-								});
-							} else if (item.key == 'recharge') {
-								//充值
-								if (item.value.fastRechargeList && item.value.fastRechargeList.length > 0) {
-									that.TabList = item.value.fastRechargeList.map(it => {
-										var itm = {
-											rechargeAmount: it,
-											active: false
-										};
-										return itm;
 									});
-									if (that.TabList && that.TabList.length > 0) {
-										that.TabList[0].active = true;
-										that.pay = that.TabList[0].rechargeAmount;
+								} else if (item.key == 'recharge') {
+									//充值
+									if (item.value.fastRechargeList && item.value.fastRechargeList.length > 0) {
+										that.TabList = item.value.fastRechargeList.map(it => {
+											var itm = {
+												rechargeAmount: it,
+												active: false
+											};
+											return itm;
+										});
+										if (that.TabList && that.TabList.length > 0) {
+											that.TabList[0].active = true;
+											that.pay = that.TabList[0].rechargeAmount;
+										}
+										console.log('TabList数据====', that.TabList);
+									}
+								} else if (item.key == 'coupon') {
+									if (item.value.couponList && item.value.couponList.length > 0) {
+										item.value.couponList.map(itx => {
+											itx.isShow = false;
+											return itx;
+										})
 									}
-									console.log('TabList数据====', that.TabList);
 								}
-							}
-							return item;
-						});
-						that.params = data;
-						that.jsonContent = data.params.jsonContent;
-						uni.setNavigationBarTitle({
-							title:data.title
-						})
-						console.log('data.title==', data.title);
-						resolve();
-					},
-					true
-				);
-			});
-		},
+								return item;
+							});
+							that.params = data;
+							that.jsonContent = data.params.jsonContent;
+							uni.setNavigationBarTitle({
+								title:data.title
+							})
+							console.log('data.title==', data.title);
+							console.log('data.params.jsonContent==', data.params.jsonContent);
+							resolve();
+						},
+						true
+					);
+				});
+			},
 		swiperChange(e) {
 			this.swiperCurrent = e.index;
 		},
@@ -801,15 +881,65 @@ export default {
 		getDateFormat(date) {
 			return util.formatTime(new Date(date)).t3;
 		},
+		anchor(id) {
+				let that = this;
+				let query = that.$element(id);
+				let top = that.$element('topId');
+				top.getBoundingClientRect({
+					success: (data) => {
+						query.getBoundingClientRect({
+							success: (res) => {
+								that.$page.scrollTo({top:res.top - data.top - 100, behavior:'smooth'})
+							}
+						});
+					}
+				});
+			},
+			getDevideInfo() {
+				let that = this;
+				device.getInfo({
+					success: function (ret) {
+						// px转换到rpx的比例
+						let pxToRpxScale = 800 / ret.windowWidth;
+						let systems = {
+							ktxStatusHeight: ret.statusBarHeight * pxToRpxScale, // 状态栏的高度
+							navigationHeight: 44 * pxToRpxScale // 导航栏的高度
+						};
+						systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
+						that.systems = systems;
+						that.windowHeight = ret.windowHeight;
+						console.log('ret==',ret)
+					}
+				});
+			},
 	},
+	onPageScroll(e) {
+			console.log('滚动==',e)
+			var that = this;
+			let query = uni.createSelectorQuery().in(this).select('#view-box');
+			if(query){
+				query.boundingClientRect(data=>{
+					console.log('data==',data.top,data.height)
+					if (data.top <= 0) {
+						that.isShowBotFixed = true;
+					}else if (data.top-data.height > that.windowHeight) {// 向下滑动
+						that.isShowBotFixed = true;
+					}else{
+						that.isShowBotFixed = false;
+					}
+				}).exec();
+			}
+		},
 	mounted() {
 		const systemInfo = uni.getSystemInfoSync();
 		// px转换到rpx的比例
 		let pxToRpxScale = 750 / systemInfo.windowWidth;
 		let systems = {
 			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
-			navigationHeight: 44 * pxToRpxScale // 导航栏的高度
+			navigationHeight: 44 * pxToRpxScale ,// 导航栏的高度
+			windowHeight:systemInfo.windowHeight
 		};
+		this.windowHeight = systemInfo.windowHeight
 		systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
 		this.systems = systems;
 	}