kailin_mp/pages/orders/lottery.vue

<template>
	<view>
		<view class="lottery_box" :style="height">
			<view class="lottery_time" v-if="lotteryInfo.id">活动时间：{{lotteryInfo.start_date}} ~ {{lotteryInfo.end_date}}</view>
			<view class="lottery_info">
				<image class="lottery_logo" v-if="lotteryInfo.logo" :src="lotteryInfo.logo" mode="widthFix"></image>
				<button class="lottery_rule_btn" @click="showRule">活动规则</button>
			</view>
			<l-dialer :customStyle="'width: 500rpx;height: 500rpx;margin: 0rpx auto;'" @click="onClick" dial-style="color: rgba(60,48,158,0.7); padding: 32rpx;background-image: url(https://mall.findit.ltd/uploads/images/default/lottery_bg.png)" :prizeList="prizeList" :turns="5" :duration="5" @done="onDone" ref="dialer" />
			<view class="record_box">
				<view class="score_info">
					<view class="custom_score">可用次数：{{lotteryInfo.join_num}}</view>
					<view class="need_score" v-if="!lotteryInfo.id" >暂无可参与的活动</view>
				</view>
				<button class="lottery_record" @click="showRecord" v-if="lotteryInfo.id">
					<image class="lottery_record_img" src="https://mall.findit.ltd/uploads/images/default/lottery_record.png" mode=""></image>
					<text class="lottery_record_text">中奖记录</text>
				</button>
			</view>
		</view>
		<uni-popup ref="lotteryRule" type="center">
			<view class="lottery_rule_box">
				<view class="lottery_rule_title">
					<text>活动规则</text>
					<view class="close_btn" @click="closeRule"> X </view>
				</view>
				<scroll-view class="lottery_rule_info" scroll-y="true" >
					<rich-text :nodes="lotteryInfo.rule" class="rich_text"></rich-text>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="lotteryRecord" type="bottom">
			<view class="lottery_record_box">
				<view class="lottery_record_title">
					<text>我的奖品</text>
					<view class="close_btn" @click="closeRecord"> X </view>
				</view>
				<view class="lottery_record_none" v-if="!recordList.length">这里还是空的哦~</view>
				<scroll-view class="lottery_record_list" scroll-y="true" >
					<view class="lottery_record_item" v-for="(item,index) in recordList" :key="index">
						<view class="reward_time">{{item.insert_time}}</view>
						<view class="reward_name">{{item.reward_name}}</view>
						<view class="reward_state" v-if="item.status">{{item.state}}</view>
						<view class="reward_state" v-if="!item.status" @click="openAddr(index)">{{item.state}}</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="addrPopup" type="bottom" class="popup" background-color="#FFFFFF" >
			<view class="popup_title">收货地址 <navigator url="/pages/addr/index?notify=addr" class="to_addr_page">管理</navigator> </view>
			<view class="addr_list">
				<view class="addr_item" v-for="(item,index) in addrList" :key="index" @click="checkedAddrItem(item)">
					<view class="radio_label">
						<image class="radio_icon" :src="item.id == checkedAddr.id? '../../static/icon/radioed.png' : '../../static/icon/radio.png'" ></image> 
					</view>
					<view class="contact_user">
						<text class="contact_name">{{item.contact_name}}</text>
						<text class="contact_phone">{{item.contact_phone}}</text>
						<text class="contact_default" v-if="item.is_default">默认</text>
						<text class="contact_shop">{{item.contact_shop}}</text>
					</view>
					<view class="contact_addr">
						{{item.contact_province}} {{item.contact_city}} {{item.contact_area}} {{item.contact_addr}}
					</view>
				</view>
			</view>
			<view class="create_box">
				<navigator url="/pages/addr/index?notify=addr&type=create" class="create_addr"  >新建收货地址</navigator>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height:"",
				// 奖项列表，
				prizeList: [],
				// 中奖记录
				recordList: [],
				// 地址列表
				addrList:[],
				// 抽奖信息
				lotteryInfo:{
					id:0,
					name:"",
					logo:"",
					join_num:"0",
					start_date:"",
					end_date:"",
					start_time:"",
					end_time:"",
					rule:"",
				},
				recordId:0,
				// 请求参数
				requestParam:{
					id:0
				},
			}
		},
		onLoad(param) {
			// 接收参数
			this.requestParam.id = param.id;
			// 如果有scene参数的话，获取其中的ID
			if( param.scene )	{
				// 转键值对参数
				let scene		= this.$http.strToParam(param.scene);
				// 如果没有传入ID，但是传入了场景ID，获取场景ID
				if( !param.id && scene.id )	this.requestParam.id = scene.id;
			}
			// 窗口信息
			var sysinfo = uni.getWindowInfo();
			// 获取屏幕可用高度
			this.height = 'height:'+sysinfo.windowHeight + 'px;';
			// 监听地址变动
			uni.$on('addr_list_change',data=>{
				// 地址列表
				this.addrList = data.list;
			});
			// #ifdef MP-WEIXIN
			//分享按钮
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShareAppMessage(obj) {
			return {
				title: this.activeInfo.name,
				path: '/pages/orders/lottery?id='+this.requestParam.id,
			}
		},
		onShow() {
			// 没有数据的话，或者请求中，不允许刷新
			if( this.isReqing )		return ;
			// 登录提示
			if( !this.$checkAccess.alterLogin() )  return ;
			// 如果存在产品ID的话
			if( this.requestParam.id > 0) {
				// 设置请求中
				this.isReqing			= true;
				// 请求
				this.$http.request('api/lottery_order/get_detail',this.requestParam).then((re)=>{
					// 设置非请求中
					this.isReqing		= false;
					// 成功结果
					if( re.code == 'success' ){
						this.lotteryInfo	= re.data;
						this.prizeList 		= re.data.reward_list;
					}else{
						if( re.code != 'no_login' ){
							uni.showModal({
								content:re.msg,
								showCancel:false,
							})
						}
					}
				});
			}else{
				uni.showModal({
					content:"未知的活动ID",
					showCancel:false,
				})
			}
		},
		methods: {
			onDone(index) {
				// 奖项
				let prize = this.prizeList[index];
				// 结果
				uni.showModal({
					title: prize.id == 0 ? '很遗憾': '恭喜您',
					content: (prize.id != 0 ? `获得`:'') + prize.name + (prize.reward_type == 5 ? '，请在中奖记录中填写收货地址':''),
					showCancel:false,
					success: (re) => {
						if( re.confirm && prize.reward_type == 5){
							// 显示中奖列表
							this.showRecord();
						}
					}
				});
			},
			onClick() {
				// 活动是否开始
				if( !this.lotteryInfo.id ){
					uni.showToast({
						title:"暂无可参与活动",
						icon:"none",
					})
					return;
				}
				// 活动是否开始
				if( this.lotteryInfo.start_time * 1000 > new Date().getTime() ){
					uni.showToast({
						title:"活动还没开始哦",
						icon:"none",
					})
					return;
				}
				// 活动是否结束
				if( this.lotteryInfo.end_time * 1000 <= new Date().getTime() ){
					uni.showToast({
						title:"活动已结束了哦",
						icon:"none",
					})
					return;
				}
				// 次数已用完了
				if( this.lotteryInfo.join_num <= 0 ){
					uni.showToast({
						title:"次数已用完了",
						icon:"none",
					})
					return;
				}
				// 次数操作
				this.lotteryInfo.join_num = this.lotteryInfo.join_num - 1;
				// 请求列表
				this.$http.request('/api/lottery_order/get_reward',{lottery_id:this.lotteryInfo.id}).then((re)=>{
					// 设置非请求中
					this.isReqing		= false;
					// 成功结果
					if( re.code == 'success' ){
						// 奖品列表更新
						this.prizeList	= re.data.reward_list;
						// 奖品的索引
						return 			this.$refs.dialer.run(re.data.reward_index);
					}else{
						uni.showToast({
							title:re.msg,
							icon:"none",
						})
						return ;
					}
				});
			},
			showRule(){
				this.$refs.lotteryRule.open('center')
			},
			closeRule(){
				this.$refs.lotteryRule.close();
			},
			showRecord(){
				// 活动是否开始
				if( this.lotteryInfo.id ){
					// 请求列表
					this.$http.request('/api/lottery_order_record/get_list',{lottery_id:this.lotteryInfo.id}).then((re)=>{
						// 设置非请求中
						this.isReqing		= false;
						// 成功结果
						if( re.code == 'success' ){
							this.recordList	= re.data;
						}
					});
				}
				this.$refs.lotteryRecord.open('bottom');
			},
			closeRecord(){
				this.$refs.lotteryRecord.close();
			},
			openAddr(index){
				// 选择的下标
				this.recordIndex = index;
				// 地址列表
				this.getAddrList(true);
			},
			// 选择地址
			checkedAddrItem(item){
				// 判断数据
				this.$http.request('api/lottery_order_record/set_addr',{id:this.recordList[this.recordIndex].id,addr_id:item.id},'post').then((callback)=>{
					// 获取成功
					if( callback.code == 'success' ){
						this.recordList[this.recordIndex].status = 1;
						this.recordList[this.recordIndex].state  = '进行中';
					}
					this.$refs.addrPopup.close();
				});
			},
			getAddrList(showPopup=false){
				// 判断数据
				this.$http.request('api/custom_addr/get_list').then((callback)=>{
					// 获取成功
					if( callback.code == 'success' ){
						this.addrList  = callback.data;
						// 如果有的话
						if( this.addrList.length ){
							// 获取默认的
							for (let i in this.addrList) {
								// 如果是默认的
								if( this.addrList[i].is_default ) this.checkedAddr = this.addrList[i];
							}
							// 如果没有默认的话
							if( !this.checkedAddr.id ){
								this.checkedAddr = this.addrList[this.addrList.length-1];
							}
						}
						// 弹出地址层
						if( showPopup ) this.$refs.addrPopup.open('bottom');
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.lottery_box{
		display: block;
		width: 750rpx;
		height: 1100rpx;
		margin: 0 auto;
		position: relative;
		background: linear-gradient(to bottom, #FC335F 0%, #FB7224 80%, #FFFFFF 100%);
		.lottery_time{
			top: 0rpx;
			left: 35rpx;
			z-index: 1;
			width: 700rpx;
			color: #FFFFFF;
			display: block;
			height: 40rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			text-align: center;
			position: absolute;
			border-radius: 10rpx;
			background-color: rgba(0, 0, 0,0.15);
		}
		.lottery_info{
			width: 750rpx;
			height: 240rpx;
			overflow: hidden;
			margin: 0rpx auto;
			position: relative;
			margin-bottom: 40rpx;
			.lottery_logo{
				float: left;
				width: 750rpx;
				height: 240rpx;
				display: block;
			}
			.lottery_rule_btn{
				top: 50%;
				right: 0rpx;
				width: 120rpx;
				height: 60rpx;
				color: #FFFFFF;
				overflow: hidden;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				position: absolute;
				padding: 0rpx 0rpx;
				border-top-left-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
				border-top-right-radius: 0rpx;
				border-bottom-right-radius: 0rpx;
				background-color: rgba(0, 0, 0,0.3);
			}
			.lottery_rule_btn::after{
				border: 0rpx solid transparent;
			}
		}
		.record_box{
			display: block;
			height: 120rpx;
			overflow: hidden;
			position: relative;
			margin-top: 40rpx;
			.score_info{
				display: block;
				overflow: auto;
				.custom_score{
					height: 60rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 60rpx;
				}
				.need_score{
					height: 60rpx;
					font-size: 32rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
			.lottery_record{
				top: 0rpx;
				right: 0rpx;
				width: 120rpx;
				height: 120rpx;
				overflow: hidden;
				text-align: center;
				position: absolute;
				padding: 0rpx 0rpx;
				background-color: transparent;
				.lottery_record_img{
					width: 60rpx;
					height: 60rpx;
					display: block;
					margin: 0rpx auto;
				}
				.lottery_record_text{
					color: #FFFFFF;
					display: block;
					height: 40rpx;
					width: 120rpx;
					font-size: 24rpx;
					line-height: 40rpx;
				}
			}
			.lottery_record::after{
				border: none;
			}
		}
	}
	.lottery_rule_box{
		width: 500rpx;
		display: block;
		overflow: hidden;
		background: #FFFFFF;
		font-size: 26rpx;
		margin: 0rpx auto;
		line-height: 50rpx;
		border-radius: 10rpx;
		padding: 0rpx 25rpx;
		padding-bottom: 20rpx;
		background-color: #FC335F;
		.lottery_rule_title{
			color: #FFFFFF;
			height: 60rpx;
			font-size: 32rpx;
			line-height: 60rpx;
			text-align: center;
			margin-bottom: 10rpx;
			.close_btn{
				float: right;
				width: 40rpx;
				height: 40rpx;
				font-size: 24rpx;
				margin-top: 9rpx;
				line-height: 40rpx;
				border-radius: 50%;
				border: 1rpx solid #FFFFFF;
			}
		}
		.lottery_rule_info{
			display: block;
			height: 500rpx;
			font-size: 24rpx;
			line-height: 40rpx;
			border-radius: 10rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.rich_text{
				white-space: break-spaces;
			}
		}
	}
	.lottery_record_box{
		display: block;
		color: #DEB887;
		height: 700rpx;
		padding: 10rpx 25rpx;
		background-color: #FAEBD7;
		.lottery_record_title{
			color: #000000;
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: center;
			margin-bottom: 20rpx;
			.close_btn{
				float: right;
				width: 40rpx;
				height: 40rpx;
				color: #DEB887;
				font-size: 24rpx;
				margin-top: 9rpx;
				line-height: 40rpx;
				border-radius: 50%;
				border: 2rpx solid #DEB887;
			}
		}
		.lottery_record_none{
			display: block;
			height: 200rpx;
			color: #DEB887;
			font-size: 26rpx;
			text-align: center;
			line-height: 200rpx;
		}
		.lottery_record_list{
			display: block;
			height: 500rpx;
			.lottery_record_item{
				height: 80rpx;
				display: block;
				font-size: 26rpx;
				overflow: hidden;
				line-height: 80rpx;
				.reward_time{
					float: left;
					width: 300rpx;
				}
				.reward_name{
					float: left;
					width: 200rpx;
				}
				.reward_state{
					float: right;
				}
			}
		}
	}
	.popup{
		overflow: hidden;
		.popup_title{
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			font-size: 36rpx;
			height: 120rpx;
			line-height: 120rpx;
			padding: 0rpx 20rpx;
			border-bottom: 10rpx solid #F8F8F8;
			.to_addr_page{
				float: right;
				color: #F59A23;
				display: block;
				height: 120rpx;
				line-height: 120rpx;
				font-size: 26rpx;
				padding: 0rpx 10rpx;
			}
		}
		.addr_list{
			width: 730rpx;
			display: block;
			overflow: hidden;
			margin: 0rpx auto;
			min-height: 500rpx;
			.addr_item{
				display: block;
				font-size: 24rpx;
				overflow: hidden;
				line-height: 40rpx;
				padding: 15rpx 10rpx;
				border-radius: 15rpx;
				border-bottom: 2rpx solid #dddddd;
				.radio_label{
					width: 40rpx;
					float: left;
					height: 50rpx;
					padding-top: 30rpx;
					margin-right: 20rpx;
					.radio_icon{
						float: left;
						width: 40rpx;
						height: 40rpx;
					}
				}
				.contact_user{
					float: left;
					width: 640rpx;
					display: block;
					height: 50rpx;
					font-size: 24rpx;
					line-height: 50rpx;
					.contact_name{
						font-size: 26rpx;
						font-weight: bold;
						margin-right: 16rpx;
					}
					.contact_default{
						color: #F59A23;
						font-size: 20rpx;
						margin-left: 16rpx;
						border: 1rpx solid #F59A23;
					}
					.contact_shop{
						float: right;
						font-size: 26rpx;
						margin-right: 16rpx;
					}
				}
				.contact_addr{
					float: left;
					width: 640rpx;
					display: block;
					font-size: 24rpx;
					line-height: 30rpx;
					padding: 10rpx 5rpx;
				}
			}
		}
		.create_box{
			height: 140rpx;
			display: block;
			.create_addr{
				width: 700rpx;
				height: 80rpx;
				display: block;
				color: #FFFFFF;
				font-size: 30rpx;
				overflow: hidden;
				line-height: 80rpx;
				padding: 0rpx 0rpx;
				text-align: center;
				margin: 0rpx auto;
				margin-top: 20rpx;
				border-radius: 40rpx;
				background-color: #E03519;
			}
		}
	}
</style>