新增免费抽奖模块

packageOperate/activity/index.vue

@@ -1,22 +1,251 @@
 <template>
 	<view>
-		11111111111111111111
+		<u-navbar title="免费抽奖" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
+		<u-count-down :time="30 * 60 * 60 * 1000" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
+			<view style="height: 98rpx;background-color: #fff;margin: 0 30rpx;line-height: 98rpx;overflow: hidden;">
+				<view class="data-btn">距离开奖时间：
+					<text>{{timeData.days}}&nbsp;天</text>
+					<text>{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;:</text>
+					<text>{{timeData.minutes}}&nbsp;:</text>
+					<text>{{timeData.seconds}}</text>
+				</view>
+				<view style="float: right;"><span style="font-weight: 600;">{{info.fakeNum}}</span>人已参与</view>
+			</view>
+		</u-count-down>
+
+
+		<view>
+			<view v-for="(item,index) in awardsList" :key="index">
+				<view v-if="item.name == '一等奖'">
+					<view style="height: 90rpx;">
+						<view style="float: left;">
+							<text
+								style="display: inline-block; background-color: #bbbbbb;width: 200rpx;height: 90rpx;line-height:90rpx;text-align: center;">{{item.name}}</text>
+						</view>
+						<view style="float: right;line-height: 90rpx;">{{item.quantity}}个名额</view>
+					</view>
+					<view v-for="(itemTwo,index) in item.prizeList" :key="index">
+						<view style="text-align: center;">
+							<image :src="itemTwo.picUrl" mode="" style="width: 400rpx;"></image>
+							<view>{{itemTwo.title}}</view>
+							<view>￥{{itemTwo.value}}</view>
+						</view>
+					</view>
+					<view v-if="item.prizeList.length > 1 " style="text-align: center;">以上奖品随机获得一件</view>
+				</view>
+			</view>
+			<view v-for="(item,index) in awardsList" :key="index">
+				<view v-if="item.name == '一等奖'">
+					<view style="height: 60rpx;">
+						<view style="float: left;"> 
+							<text style="display: inline-block; background-color: #bbbbbb;width: 200rpx;height: 60rpx;line-height:60rpx;text-align: center;">{{item.name}}</text>
+						</view>
+						<view style="float: right;line-height: 60rpx;">{{item.quantity}}个名额</view>
+					</view>
+					<view v-for="(itemTwo,index) in item.prizeList" :key="index">
+						<view style="overflow: hidden; width: 100%;padding: 10rpx 20rpx;">
+							<view style="display: inline-block;">
+								<image :src="itemTwo.picUrl" mode="" style="width: 100rpx;height: 100rpx;"></image>
+							</view>
+							<view style="display: inline-block;width: 60%;margin-left: 20rpx;">
+								<view>{{itemTwo.title}}</view>
+								<view>￥{{itemTwo.value}}</view>
+							</view>
+
+						</view>
+					</view>
+					<view v-if="item.prizeList.length > 1 " style="text-align: center;">以上奖品随机获得一件</view>
+				</view>
+			</view>
+		</view>
+		<view>
+			<view style="height: 90rpx;line-height: 90rpx;">
+				<text
+					style="display: inline-block; background-color: #bbbbbb;width: 200rpx;text-align: center;">图文介绍</text>
+			</view>
+			<view v-html="description">{{description}} </view>
+		</view>
+		<view v-if="false"> 关注公众号：获取抽奖码和开奖提醒 > </view>
+
+		<view>
+			<view>我的抽奖码</view>
+			<view style="text-align: center;margin-top: 20rpx;margin-bottom: 50rpx;">
+				<view v-if="info.codeList.length > 0">
+					<view v-for="(item,index) in info.codeList">{{item}}</view>
+				</view>
+				<view v-else>还没有抽奖码</view>
+			</view>
+
+			<view style="text-align: center;line-height: 90rpx;border-top: 2rpx solid #555;">抽奖码越多，中奖概率越大</view>
+		</view>
+
+		<view style="height: 200rpx;"></view>
+		<view class="footer-fixed">
+			<view class="flex btn">
+				<button type="default" @click="exChange">获取抽奖码</button>
+			</view>
+		</view>
+		<u-popup :show="popupShow" mode="bottom" @close="close" closeable>
+			<view
+				style="height: 98rpx;width: 100%; border-bottom: 2rpx solid #bbbbbb;text-align: center;line-height: 98rpx;">
+				获取抽奖码</view>
+			<view style="padding: 30rpx 20rpx;">
+				<view style="color: #101010; line-height: 50rpx;">邀请好友助力，获取抽奖码</view>
+				<text style="color: #8c8c8c; font-size: 24rpx;">每邀请一位好友助力成功，即可获得1个抽奖码，没有上限</text>
+			</view>
+			<view style="padding: 0rpx 20rpx 50rpx ; ">
+				<button type="default" @click="exChange" style="background-color: #f7682b; color: #fff;"  open-type="share">立即邀请好友助力</button>
+			</view>
+
+
+		</u-popup>
 	</view>
 </template>
 
 <script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
 	export default {
 		data() {
 			return {
-				
+				popupShow: false,
+				id: '',
+				description: '', //富文本
+				info: {}, //列表
+				timeData: {}, //时间
+				awardsList: [], //奖品
+				inviteCode: '', //邀请码
 			}
+		},
+		onLoad(opthios) {
+			this.id = opthios.id
+			this.getDetail()
+		},
+		onShow() {
+
 		},
 		methods: {
-			
-		}
+			getDetail() {
+				uni.showLoading({
+					title: '加载中'
+				});
+				$http.post(`/api/v1/mp/user/marketing/detail/${this.id}`, {}).then(res => {
+					uni.hideLoading();
+					console.log(res)
+					if (res.code == 0) {
+						this.info = res.data
+						let awardsList = res.data.awardsList
+						awardsList.forEach(item => {
+							item.prizeList.forEach(itemTwo => {
+								itemTwo.picUrl = (env.filePublic + itemTwo.picUrl.split(',')[0] +
+									'?imageView2/2/w/750')
+							})
+						})
+						this.awardsList = awardsList
+						// let picUrlArr = res.data.picUrl.split(',')
+						// picUrlArr.forEach(item => {
+						// 	this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
+						// })
+						// 处理富文本
+						const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
+							.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
+								".png?imageView2/2/w/750\"");
+						this.description = this.formatRichText(description);
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			},
+			onChange(e) {
+				this.timeData = e
+			},
+			exChange() {
+				//弹出层打开
+				this.popupShow = true
+				$http.post('/api/v1/mp/user/marketing/inviteCode', {}).then(res=>{
+					if(res.code == 0){
+						this.inviteCode = res.data
+					}
+					
+				})
+			},
+			close() {
+				//弹出层收起
+				this.popupShow = false
+			},
+
+
+			/**
+			 * 处理富文本里的图片宽度自适应
+			 * 1.去掉img标签里的style、width、height属性
+			 * 2.img标签添加style属性：max-width:100%;height:auto
+			 * 3.修改所有style里的width属性为max-width:100%
+			 * 4.去掉<br/>标签
+			 * @param html
+			 * @returns {void|string|*}
+			 */
+			formatRichText(html) { //控制小程序中图片大小
+				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
+					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
+					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
+					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
+					return match;
+				});
+				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
+					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
+						'max-width:100%;');
+					return match;
+				});
+				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
+				newContent = newContent.replace(/\<img/gi,
+					'<img style="max-width:100%;height:auto;font-size: 0;margin-top: -5px;"');
+				return newContent;
+			},
+		},
+		onShareAppMessage(res) {
+			return {
+				title: '超值宝贝免费抽，参与活动仅需3秒',
+				path: `/pages/index/index?marketingId=${ this.info.id }?inviteCode=${ this.inviteCode }`
+			}
+		},
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.data-btn {
+		float: left;
 
+		text {
+			display: inline-block;
+			width: 60rpx;
+		}
+	}
+
+	.footer-fixed {
+		position: fixed;
+		bottom: var(--window-bottom);
+		left: 0;
+		right: 0;
+		z-index: 11;
+		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
+		background: #fff;
+		// 设置ios刘海屏底部横线安全区域
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+
+		.btn {
+			padding: 20rpx 0;
+
+			/deep/ button {
+				width: 640rpx;
+				height: 90rpx;
+				line-height: 90rpx;
+				font-size: 36rpx;
+				color: #fff;
+				background-color: $uni-bg-color;
+				border: none;
+				border-radius: 20rpx;
+			}
+		}
+	}
 </style>

packageOperate/activity/record.vue

@@ -0,0 +1,9 @@
+<template>
+	<view>中奖记录</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

pages.json

@@ -99,6 +99,12 @@
 				},
 				{
 					"path": "webview/index"
+				},
+				{
+					"path": "activity/index"
+				},
+				{
+					"path": "activity/record"
 				}
 			]
 		},

pages/activity/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view style="width: 100%;height: 100%;">
 		<u-navbar leftIconSize="0" :placeholder="true" bgColor="#ffffff">
 			<view class="u-nav-slot" slot="left">
 				<u-tabs @change="changeTab" :scrollable="false" :list="statusArr" lineWidth="30" lineHeight="1"
@@ -16,51 +16,30 @@
 				</u-tabs>
 			</view>
 		</u-navbar>
-		<view class="order-list">
-			<view class="order-list-data">
-				<view class="order-list-data-item" v-for="(item, index) in list" :key="index">
-					<view class="order-list-data-item__info">
-						<view class="flex order-list-data-item__info__title">
-							<view class="number">
-								<text>订单编号：</text>
-								<text>{{ item.orderId }}</text>
-							</view>
-							<view class="success" v-if="item.status.value == 1">{{ item.status.desc }}</view>
-							<view v-else>{{ item.status.desc }}</view>
-						</view>
-						<navigator :url="`/packageGoods/order/detail?id=${ item.orderId }`" hover-class="navigator-hover">
-							<view class="flex order-list-data-item__info__detail"
-								v-for="(items, index) in item.items" :key="index">
-								<view class="order-list-data-item__info__detail__left">
-									<view class="img">
-										<image class="img" :src="items.picUrl" mode="aspectFill">
-										</image>
-									</view>
-								</view>
-								<view class="order-list-data-item__info__detail__right">
-									<view class="ells title">{{ items.title }}</view>
-									<view class="sku" v-if="items.properties">规格：{{ items.properties }}</view>
-									<view class="num">数量：{{ items.goodsNum }}</view>
-								</view>
-							</view>
-						</navigator>
-		
-						<view class="order-list-data-item__info__total">
-							<view>共{{ item.orderNum }}个商品</view>
-							<view class="money">
-								<text v-if="item.status.value == 0">应付：</text>
-								<text v-else>实付：</text>
-								<text>￥{{ $numberFormat(item.payAmt) }}</text>
-							</view>
+		<view class="list" style="padding: 0 10rpx;">
+			<view v-for="(item,index) in list" :key="index" style="text-align: center;">
+				<view class="" style="background-color: #FFFFFF;margin-bottom: 20rpx;">
+					<view style="">
+						<image :src="item.picUrl" mode="" style="width: 730rpx;height: 350rpx;"></image>
+					</view>
+					<view class="" style="width: 730rpx;height: 100rpx; margin: 0 auto;">
+						<view style="text-align: left; float: left;">
+							<view>活动名称：{{item.title}}</view>
+							<view>开始时间：{{item.startTime}}</view>
 						</view>
-
-						<view class="order-list-data-item__info__btn" v-if="item.status.value == 0">
-							<text @click="cancelOrder(item.orderId)" style="border-color: #666;">取消订单</text>
-							<text @click="payOrder(item)">去支付</text>
+						<view style="float: right;">
+							<navigator :url="`/packageOperate/activity/index?id=${ item.id }`">
+								<button v-if="item.status.value == 3"
+									style="height: 65rpx;line-height: 65rpx;background-color:#901199;color: #fff;margin-top: 16rpx;">查看详情</button>
+								<button v-else
+									style="height: 65rpx;line-height: 65rpx;background-color:#901199;color: #fff;margin-top: 16rpx;">即将开始</button>
+							</navigator>
 						</view>
 					</view>
 				</view>
+
 			</view>
+
 			<view class="flex empty" v-if="!list.length && !loading">
 				<u-empty text="活动为空" mode="order" />
 			</view>
@@ -70,160 +49,71 @@
 </template>
 
 <script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
 	export default {
 		data() {
 			return {
-				list:[],
+				list: [],
 				statusArr: [{
-					name: '正在进行'
+					name: '待开奖'
 				}, {
 					name: '已开奖',
-				} ],
+				}],
+				triggerStatus: 0,
 			}
 		},
+		onShow() {
+			this.pageList()
+		},
 		methods: {
 			changeTab(e) {
 				if (e.index == 0) {
-					this.status = null
+					this.triggerStatus = 0
 				} else if (e.index == 1) {
-					this.status = '0'
+					this.triggerStatus = 1
 				}
-				// this.pageList()
+				this.pageList()
+			},
+			pageList() {
+				this.pageNum = 1
+				this.list = []
+				this.getList()
 			},
+			getList() {
+				uni.showLoading({
+					title: '加载中'
+				});
+				this.loading = true
+				$http.post(`/api/v1/mp/user/marketing/list?pageNum=${ this.pageNum }&pageSize=20`, {
+					triggerStatus: this.triggerStatus,
+				}).then(res => {
+					console.log(res);
+					uni.hideLoading();
+					this.loading = false
+					if (res.code == 0) {
+						res.rows.forEach(item => {
+							let picUrlArr = item.picUrl.split(',')
+							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
+							item.status = JSON.parse(item.status)
+						})
+						this.total = res.total
+						this.list = this.list.concat(res.rows)
+					}
+				}).catch(() => {
+					uni.hideLoading();
+					this.loading = false
+				})
+			},
+
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-.order-list {
-			background-color: #F8F8F8;
-			margin: 0rpx 10rpx 0;
-			padding-top: 100rpx;
-
-			&-data {
-
-				navigator {
-					margin-bottom: 10rpx;
-				}
-
-				navigator:last-child {
-					margin-bottom: 0;
-				}
-
-				&-item {
-					margin-bottom: 10rpx;
-					padding: 20rpx 30rpx;
-					background-color: #FFFFFF;
-					justify-content: space-between;
-					background-color: #FFFFFF;
-				}
-
-				&-item {
-					&__info {
-
-						&__title {
-							justify-content: space-between;
-
-							.number {
-								line-height: 40rpx;
-							}
+	.list {}
 
-							.success {
-								color: $uni-text-color;
-							}
-						}
-
-						&__detail {
-							padding: 20rpx 0;
-							justify-content: space-between;
-							border-bottom: 1px solid rgba(236, 236, 236, 100);
-
-							&__left {
-								display: flex;
-								height: 170rpx;
-
-								.img {
-									image {
-										width: 170rpx;
-										height: 170rpx;
-										margin-right: 20rpx;
-									}
-								}
-							}
-
-							&__right {
-								flex: 1;
-								display: flex;
-								height: 170rpx;
-								flex-direction: column;
-								justify-content: space-between;
-								align-items: flex-start;
-								font-size: 30rpx;
-								
-								.title{
-									font-weight: bold;
-								}
-
-								.sku {
-									color: #848484;
-								}
-							}
-
-						}
-
-						&__detail:last-child {
-							border: none;
-						}
-
-						&__total {
-							display: flex;
-							align-items: center;
-							justify-content: flex-end;
-							padding: 10rpx 0;
-
-							.money {
-								font-weight: bold;
-								margin-left: 54rpx;
-							}
-						}
-
-						&__btn {
-							display: flex;
-							align-items: center;
-							justify-content: flex-end;
-							padding-top: 10rpx;
-							border-top: 1px solid rgba(236, 236, 236, 100);
-
-							text {
-								display: block;
-								box-sizing: border-box;
-								margin: 0 0 0 40rpx;
-								width: 160rpx;
-								height: 60rpx;
-								line-height: 60rpx;
-								text-align: center;
-								font-size: 24rpx;
-								border-radius: 8rpx;
-								border: none;
-							}
-
-							text:first-child {
-								background-color: #fff;
-								line-height: 56rpx;
-								border: 2rpx solid $uni-bg-color;
-							}
-
-							text:last-child {
-								background-color: $uni-bg-color;
-								color: #FFFFFF;
-							}
-						}
-					}
-				}
-			}
-		}
-
-		.empty {
-			height: 60vh;
-		}
+	.empty {
+		height: 60vh;
+	}
 </style>