活动详情跳转公众号

packageOperate/activity/index.vue

@@ -1,6 +1,6 @@
 <template>
-	<view style="background-image: linear-gradient(#FF8000,#FFA524,#FF8000); width: 100%; height: 100%;">
-		
+	<view style="background-image: linear-gradient(#ff8e0c,#ffc555 80%,#ff8e0c); width: 100%; height: 100%;">
+
 		<view v-if="pagesNum > 1">
 			<u-navbar title="免费抽奖" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
 		</view>
@@ -11,7 +11,7 @@
 				</view>
 			</u-navbar>
 		</view>
-		
+
 		<view class="wrap">
 			<view class="wrap-fakeNum">
 				<view class="fakeNum">{{info.fakeNum}}人已参与</view>
@@ -60,9 +60,14 @@
 								<view>
 									<image :src="itemTwo.picUrl" mode="aspectFit"></image>
 								</view>
-								<view class="textone ells-one" v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value == 'coin'" > {{itemTwo.title}}x{{itemTwo.value}} </view>
+								<view class="textone ells-one"
+									v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value == 'coin'">
+									{{itemTwo.title}}x{{itemTwo.value}}
+								</view>
 								<view class="textone ells-one" v-else> {{itemTwo.title}} </view>
-								<view class="texttwo ells-one" v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value != 'coin'"> ￥{{$numberFormat(itemTwo.value)}} </view>
+								<view class="texttwo ells-one"
+									v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value != 'coin'">
+									￥{{$numberFormat(itemTwo.value)}} </view>
 							</view>
 						</view>
 						<view class="effectstwo"></view>
@@ -81,15 +86,23 @@
 									</view>
 								</view>
 								<view class="effectsthree-position">{{item.quantity}}个名额 </view>
-								<view class="effectsthree-positionTwo" v-for="(itemTwo,index) in item.prizeList"
+								<view style="padding-top: 120rpx;"></view>
+								<view class="effectsthree-positionTwo flex" v-for="(itemTwo,index) in item.prizeList"
 									:key="index">
 									<view>
 										<image :src="itemTwo.picUrl" mode="aspectFit" class="imatwo"></image>
 									</view>
-									<image src="../static/activity/effectssix.png" mode="" class="imgone"></image>
-									<view class="textone" v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value == 'coin'" > {{itemTwo.title}}x{{itemTwo.value}} </view>
-									<view class="textone" v-else> {{itemTwo.title}} </view>
-									<view class="texttwo" v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value != 'coin'"> ￥{{$numberFormat(itemTwo.value)}} </view>
+									<view>
+										<view class="textone ells-one"
+											v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value == 'coin'">
+											{{itemTwo.title}}x{{itemTwo.value}}
+										</view>
+										<view class="textone ells-one" v-else> {{itemTwo.title}}</view>
+										<view class="texttwo ells-one"
+											v-if="itemTwo.prizeType && JSON.parse(itemTwo.prizeType).value != 'coin'">
+											￥{{$numberFormat(itemTwo.value)}} </view>
+									</view>
+
 								</view>
 							</view>
 							<view v-if="item.prizeList.length > 1 " class="wrap-award-explain">以上奖品随机获得一件</view>
@@ -117,12 +130,17 @@
 			</view>
 
 			<!-- 关注公众号 -->
-			<view class="wrap-account">
-				<image src="../static/activity/gzh.png" mode=""></image>
+			<view class="wrap-account" @click="toWeixin">
+				<view class="wrap-account-view">
+					<image src="../static/activity/logo.png" mode=""></image>
+					<text>关注盲票公众号，获取中奖提醒</text>
+					<view>去关注</view>
+				</view>
 			</view>
 
 			<!-- 图文介绍 -->
 			<view class="wrap-descriptiontwo">
+				<view style="padding: 36rpx 24rpx 36rpx;">图文介绍</view>
 				<view v-html="description">{{description}} </view>
 			</view>
 
@@ -130,8 +148,8 @@
 
 		<view class="footer-fixed">
 			<view class="flex btn">
-				<button v-if="info.status && JSON.parse(info.status).value == 3" type="default"
-					@click="exChange" open-type="share">获取抽奖码</button>
+				<button v-if="info.status && JSON.parse(info.status).value == 3" type="default" @click="exChange"
+					open-type="share">获取抽奖码</button>
 				<u-count-down v-else :time="activityTimeTwo" format="DD:HH:mm:ss" autoStart millisecond
 					@change="onChange">
 					<button class="buttoncol" type="default">
@@ -141,7 +159,7 @@
 			</view>
 		</view>
 
-<!-- 		<u-popup :show="popupShow" mode="bottom" @close="close" closeable>
+		<!-- 		<u-popup :show="popupShow" mode="bottom" @close="close" closeable>
 			<view class="popupcode">获取抽奖码</view>
 			<view class="popupcodetwo">
 				<view class="popupcodetwo-view">邀请好友助力，获取抽奖码</view>
@@ -151,15 +169,17 @@
 				<button type="default" class="popupcodethree-default" open-type="share">立即邀请好友助力</button>
 			</view>
 		</u-popup> -->
-		
+
 		<!-- <u-popup v-if="info.status && JSON.parse(info.status).value == 4"   mode="bottom" @close="close" closeable> -->
-		<u-popup v-if="info.status && JSON.parse(info.status).value == 4" show="true" mode="center" @close="close" round="11">
+		<u-popup v-if="info.status && JSON.parse(info.status).value == 4" show="true" mode="center" @close="close"
+			round="11">
 			<view style="text-align: center;width: 600rpx; height: 500rpx;">
-					<view style="color: #666;margin-top: 110rpx;font-size: 40rpx;">来晚了，活动已结束</view>
-					<view style="color: #666;margin-top: 50rpx;font-size: 36rpx;">点击前往查看新的免费抽奖活动</view> 
-					<button @click="toActivity" type="default" style="background-color: #FF8000;color: #fff; width: 300rpx;margin-top: 70rpx;">确定</button>
+				<view style="color: #666;margin-top: 110rpx;font-size: 40rpx;">来晚了，活动已结束</view>
+				<view style="color: #666;margin-top: 50rpx;font-size: 36rpx;">点击前往查看新的免费抽奖活动</view>
+				<button @click="toActivity" type="default"
+					style="background-color: #FF8000;color: #fff; width: 300rpx;margin-top: 70rpx;">确定</button>
 			</view>
-		</u-popup>	
+		</u-popup>
 	</view>
 </template>
 
@@ -250,6 +270,13 @@
 				this.popupShow = false
 			},
 
+			//公众号
+			toWeixin() {
+				uni.navigateTo({
+					url: `/packageOperate/activity/wxofficial`
+				})
+			},
+
 
 			/**
 			 * 处理富文本里的图片宽度自适应
@@ -282,7 +309,7 @@
 			return {
 				title: '超值宝贝免费抽，参与活动仅需3秒',
 				path: `/pages/index/index?marketingId=${ this.info.id }&inviteCode=${ this.inviteCode }`,
-				imageUrl:'https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/70/EJ305PQR2IBE45O9AFAI',
+				imageUrl: 'https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/70/EJ305PQR2IBE45O9AFAI',
 			}
 		},
 	}
@@ -518,34 +545,31 @@
 
 				&-positionTwo {
 					width: 100%;
-					height: 600rpx;
-					text-align: center;
+					height: 220rpx;
+					// text-align: center;
+					padding: 0 62rpx;
+					justify-content: flex-start;
+
+
 
 					.imatwo {
-						position: relative;
-						width: 350rpx;
-						height: 350rpx;
-						margin-top: 70rpx;
-						z-index: 10;
+						width: 150rpx;
+						height: 150rpx;
+
 					}
 
 					.textone {
-						position: relative;
-						bottom: 200rpx;
-						z-index: 10;
 						color: #333333;
 						font-size: 30rpx;
-						line-height: 40rpx;
+						margin-left: 20rpx;
+						line-height: 75rpx;
 					}
 
 					.texttwo {
-
-						position: relative;
-						bottom: 195rpx;
-						z-index: 10;
+						margin-left: 20rpx;
 						color: #FE2616;
 						font-size: 28rpx;
-						line-height: 34rpx;
+						line-height: 75rpx;
 					}
 
 					.imgone {
@@ -555,6 +579,7 @@
 						bottom: 80rpx;
 						margin-left: 0%;
 						z-index: 0;
+
 						// width: 45%;
 						// height: 45%;
 					}
@@ -615,12 +640,20 @@
 						height: 200rpx;
 					}
 				}
+
 				.codesix {
-					line-height: 1rpx;color: #9A9FB4; font-size: 30rpx;
+					line-height: 1rpx;
+					color: #9A9FB4;
+					font-size: 30rpx;
 				}
 			}
+
 			&-codesix {
-				text-align: center;line-height: 200rpx;padding-bottom: 10rpx; font-size: 28rpx; color: #666; 
+				text-align: center;
+				line-height: 200rpx;
+				padding-bottom: 10rpx;
+				font-size: 28rpx;
+				color: #666;
 			}
 		}
 
@@ -632,12 +665,43 @@
 		}
 
 		&-account {
-			margin: 15rpx 15rpx 0 15rpx;
+			height: 100rpx;
+			border-radius: 22rpx;
+			background-color: #fff;
+			margin: 30rpx 30rpx 0 30rpx;
+
+			&-view {
+				padding: 0 20rpx;
+
+				image {
+					width: 64rpx;
+					height: 64rpx;
+					vertical-align: -50%;
+				}
+
+				text {
+					line-height: 100rpx;
+					margin: 20rpx;
+					font-size: 30rpx;
+					color: #333333;
+				}
+
+				view {
+					text-align: center;
+					border-radius: 6rpx;
+					display: inline-block;
+					height: 44rpx;
+					line-height: 44rpx;
+					font-size: 26rpx;
+					width: 112rpx;
+					color: #f9822c;
+					background-color: #fff;
+					border: 2rpx solid #f9822c;
+				}
 
-			image {
-				width: 100%;
-				height: 152rpx;
 			}
+
+
 		}
 	}
 
@@ -676,6 +740,7 @@
 				border-radius: 48rpx;
 			}
 		}
+
 		.buttoncol {
 			background-color: #555;
 		}

packageOperate/activity/wxofficial.vue

@@ -0,0 +1,22 @@
+<template>
+	<view class="">
+		<web-view src="https://mp.weixin.qq.com/s/AAWN7irBv2Uv_Lkosof1Gw" bindmessage="getMessage"></web-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages.json

@@ -111,6 +111,9 @@
 				},
 				{
 					"path": "activity/record"
+				},
+				{
+					"path": "activity/wxofficial"
 				}
 			]
 		},

pages/activity/index.vue

@@ -25,16 +25,18 @@
 							<image :src="item.picUrl" mode="" class="list-view-slot-img"></image>
 						</view>
 						<view class="list-view-slot-bor">
-							<view  class="list-view-slot-bor-title">
+							<view class="list-view-slot-bor-title">
 								<view class="time bor-title">{{item.title}}</view>
-								<view v-if="item.status.value == 2" class="time" >开始时间：{{ $parseTime(item.startTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
-								<view v-else class="time" >开奖时间：{{ $parseTime(item.endTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
+								<view v-if="item.status.value == 2" class="time">
+									开始时间：{{ $parseTime(item.startTime, '{y}-{m}-{d} {h}:{i}:{s}')}}</view>
+								<view v-else class="time">开奖时间：{{ $parseTime(item.endTime, '{y}-{m}-{d} {h}:{i}:{s}')}}
+								</view>
 							</view>
 							<view class="details">
-								<button class="details-button" v-if="item.status.value == 3" >查看详情</button>
-								<button class="details-buttonTwo" v-else-if="item.isHit == 0" >未中奖</button>
+								<button class="details-button" v-if="item.status.value == 3">查看详情</button>
+								<button class="details-buttonTwo" v-else-if="item.isHit == 0">未中奖</button>
 								<button class="details-buttonTwo" v-else-if="item.isHit == 1">已中奖</button>
-								<button class="details-buttonTwo" v-else >即将开始</button>
+								<button class="details-buttonTwo" v-else>即将开始</button>
 							</view>
 						</view>
 					</view>
@@ -43,7 +45,12 @@
 			</view>
 
 			<view class="flex empty" v-if="!list.length && !loading">
-				<u-empty text="活动为空" mode="order" />
+				<view class="center">
+					<image class="center-img" src="../../static/activity/null.png" mode=""></image>
+					<view class="center-font">新的活动正在准备中...</view>
+				</view>
+				<!-- <u-empty text="活动为空" mode="order" /> -->
+
 			</view>
 		</view>
 		<custom-tab-bar :activeValue="'activity'" />
@@ -61,12 +68,18 @@
 					name: '参与抽奖'
 				}, {
 					name: '已开奖',
-				},{disabled: true},{disabled: true},{disabled: true}],
+				}, {
+					disabled: true
+				}, {
+					disabled: true
+				}, {
+					disabled: true
+				}],
 				triggerStatus: 0,
 			}
 		},
 		onLoad(opthios) {
-			if(opthios.triggerStatus){
+			if (opthios.triggerStatus) {
 				this.triggerStatus = opthios.triggerStatus
 			}
 		},
@@ -74,15 +87,16 @@
 			this.pageList()
 		},
 		methods: {
-			toRecord(item){
-				if(!uni.getStorageSync('token')) {
+			toRecord(item) {
+				if (!uni.getStorageSync('token')) {
 					uni.navigateTo({
 						url: '/pages/login/index'
 					})
 					return
 				}
 				uni.navigateTo({
-					url: item.status.value == 4 ?`/packageOperate/activity/record?id=${ item.id }`:`/packageOperate/activity/index?id=${ item.id }`
+					url: item.status.value == 4 ? `/packageOperate/activity/record?id=${ item.id }` :
+						`/packageOperate/activity/index?id=${ item.id }`
 				})
 			},
 			changeTab(e) {
@@ -134,6 +148,7 @@
 		padding-bottom: constant(safe-area-inset-bottom);
 		padding-bottom: env(safe-area-inset-bottom);
 	}
+
 	.status {
 		width: 100%;
 		position: fixed;
@@ -141,40 +156,51 @@
 		background-color: #FFFFFF;
 		box-shadow: 0 5rpx 5rpx #ececec;
 	}
+
 	.list {
 		padding: 120rpx 20rpx 100rpx;
+
 		&-view {
 			text-align: center;
 			height: 530rpx;
+
 			&-slot {
 				background-color: #FFFFFF;
 				// margin-bottom: 20rpx;
 				border-radius: 22rpx;
+
 				&-img {
-					 width: 100%;
-					 height: 370rpx;
-					 border-radius: 22rpx 22rpx 0 0;
-					
+					width: 100%;
+					height: 370rpx;
+					border-radius: 22rpx 22rpx 0 0;
+
 				}
+
 				&-bor {
 					line-height: 50rpx;
 					width: 700rpx;
 					height: 120rpx;
 					margin: 0 auto;
-					padding:10rpx 20rpx 0 20rpx;
-					border-radius: 0 0 22rpx 22rpx ;
+					padding: 10rpx 20rpx 0 20rpx;
+					border-radius: 0 0 22rpx 22rpx;
+
 					&-title {
-						text-align: left; float: left;
+						text-align: left;
+						float: left;
+
 						.time {
 							color: #333333;
 						}
+
 						.bor-title {
 							font-size: 34rpx;
 						}
 					}
+
 					.details {
 						float: right;
-						.details-button{
+
+						.details-button {
 							width: 200rpx;
 							height: 72rpx;
 							line-height: 72rpx;
@@ -184,7 +210,8 @@
 							font-size: 30rpx;
 							border-radius: 36rpx;
 						}
-						.details-buttonTwo{
+
+						.details-buttonTwo {
 							width: 200rpx;
 							height: 72rpx;
 							line-height: 72rpx;
@@ -195,7 +222,7 @@
 							border-radius: 36rpx;
 						}
 					}
-					
+
 				}
 			}
 		}
@@ -204,5 +231,19 @@
 
 	.empty {
 		height: 60vh;
+
+		.center {
+			text-align: center;
+
+			&-img {
+				width: 228rpx;
+				height: 350rpx;
+			}
+
+			&-font {
+				font-size: 30rpx;
+				font-weight: 400;
+			}
+		}
 	}
 </style>