discounts-minapp/luckyDraw/prizeList.vue

<template>
	<view class="prizeList">
		
		<zs-list class="store-box" mt="0" @load="prizeList" :status="status">
			<view class="item" v-for="(item,index) in list" :key="index">
				<zs-img :src="item.prizeIcon" width="160rpx" height="160rpx" mode=""></zs-img>
				
				<view class="info">
					<view class="title">
						{{item.prizeName}}
					</view>
					
					<view class="time">
						中奖时间：{{item.createTime}}
					</view>
					<view class="valid">
						有效期：中奖在{{item.valid}}天内领取，过期失效
					</view>
					
					<view class="desc">
						奖品说明：{{item.prizeMsg||'无'}}
					</view>
				</view>
				<view class="btn-box">
					<view class="btn" :class="[(item.expire == 2 || item.status == 2)?'disable':'']" @click="handleBtn(item)">
						{{item  | filterStatus}}
					</view>
					<view class="type">
						{{item.sendType |filterType}}
					</view>
				</view>
				
			</view>
		</zs-list>
		
		<!-- 视频会员 -->
		<zs-luck-dialog v-if="show" btnText="立即充值" @submit="submit" @close="handleClose('show')">
			<view class="result-box">
				<view class="goods-name">
					{{prizeInfo.prizeName}}
				</view>
				<image class="img" :src="prizeInfo.prizeImg" mode=""></image>
				
				<view class="input-box">
					<view class="label">
						请输入充值手机号：
					</view>
					<input class="input" type="text" :maxlength="11" v-model.trim="account" placeholder="请输入充值账号" />
				</view>
				
				<view class="notice">
					请立即输入账号进行充值，若不充值则视为放弃
				</view>
			</view>
		</zs-luck-dialog>
		
		<!-- 邮寄 -->
		<zs-luck-dialog v-if="show1" btnText="提交收货信息" @submit="submit1" @close="handleClose('show1')">
			<view class="result-box">
				<view class="goods-name">
					{{prizeInfo.prizeName}}
				</view>
				<image class="img" :src="prizeInfo.prizeImg" mode=""></image>
				<view class="sub-title">
					中奖奖品将邮寄给您，请输入收货信息
				</view>
				<u--form :model="noteQuery" ref="uForm" borderBottom labelWidth="180rpx" :labelStyle="{'color': '#222222','font-weight': 'bold','line-height':'60rpx','font-size': '28rpx'}">
					<u-form-item label="收货人姓名" prop="notes.name" borderBottom ref="item1" required>
						<u--input v-model.trim="noteQuery.notes.name" placeholder="请输入姓名" border="none"></u--input>
					</u-form-item>
					<u-form-item label="收货地址" prop="notes.address" borderBottom ref="item1" required>
						<u--input v-model.trim="noteQuery.notes.address" :maxlength="50" placeholder="请输入收货地址" border="none"></u--input>
					</u-form-item>
					<u-form-item label="联系电话" prop="notes.phone" borderBottom ref="item1" required>
						<u--input v-model.trim="noteQuery.notes.phone" :maxlength="11"  placeholder="请输入手机号" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view class="notice">
					说明：为保障商品及时送到您的手中，请填写准确的地
					址信息，若提交后需要修改地址信息请及时联系客服
				</view>
			</view>
		</zs-luck-dialog>
		
		<!-- 线上发货 线下自提 -->
		<zs-luck-dialog v-if="show2" @submit="handleClose('show2')" @close="handleClose('show2')">
			<view class="result-box">
				<view class="goods-name">
					{{prizeInfo.prizeName}}
				</view>
				<image class="img" :src="prizeInfo.prizeImg" mode=""></image>
				<view class="address">
					取货地址：{{prizeInfo.address}}
				</view>
				<view class="notice">
					{{prizeInfo.sendType == 1?`兑换有效期：请在${prizeInfo.valid}个工作日内到自提点取货，过期失效`:'优惠劵已存入【我的优惠劵】，可前往【我的优惠劵】中查看使用'}}
					
				</view>
			</view>
		</zs-luck-dialog>

	</view>
</template>

<script>
	import {
		prizeList,sendVipPrize,notes
	} from "@/api/luckyDraw.js"
	export default {
		data() {
			return {
				status:'more',
				prizeInfo:{},
				account:'',
				show:false,
				show1:false,
				show2:false,
				list: [],
				query:{
					raffleId:0,
					currentPage:1,
					pageSize:10,
					phoneNum:JSON.parse(uni.getStorageSync('userInfo')).phoneNum
				},
				userId:JSON.parse(uni.getStorageSync('userInfo')).userId,
				noteQuery:{
				  "notes": {
				    "address": "",
				    "name": "",
				    "phone": ""
				  },
				  "rafflePrizeLogId": 0
				},
				rules:{
					'notes.name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'notes.address': {
						type: 'string',
						required: true,
						message: '请输入收货地址',
						trigger: ['blur', 'change']
					},
					'notes.phone': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		filters: {
			filterType: function(value) {
				if(value == 1){
					return '线下自提'
				}else if(value == 2){
					return '邮寄发货'
				}else if(value == 3){
					return '线上发货'
				}
			},
			filterStatus(val){
				if(val.expire == 2){
					return '已过期'
				}else if(val.status == 1){
					return '未领取'
				}else if(val.status == 2){
					return '已领取'
				}
				
			}
		},
		methods: {
			handleBtn(item){
				if(item.expire == 2 || item.status == 2){//已过期 或者已领取
					return
				}
				
				
				if(item.prizeType == 2){//视频会员
					this.show = true
				}else if(item.sendType == 2){//邮寄
					this.show1 = true
					this.$nextTick(() => {
						this.$refs.uForm.setRules(this.rules)
					})
				
				}else{//线上发货 线下自提
					this.show2 = true
				}
				this.prizeInfo = item
				this.account = this.query.phoneNum
			},
			handleClose(key){
				this[key] = false
			},
			// 视频会员领取
			submit(){
				if(!this.account){
					return uni.showToast({
						title:'请输入账号',
						icon:'none'
					})
				}else if(!uni.$u.test.mobile(this.account)){
					return uni.showToast({
						title:'手机号错误',
						icon:'none'
					})
				}else{
					uni.showLoading({
						title:'提交中'
					})
					sendVipPrize({accountType:1,mobile:this.account,productId:this.prizeInfo.prizeContent,userId:this.userId,rafflePrizeLogId:this.prizeInfo.rafflePrizeLogId,rafflePrizeId:this.prizeInfo.rafflePrizeId}).then(res=>{
						if (res.state == 'Success') {
							uni.hideLoading({noConflict:true})
							this.show1 = false
							this.init()
							this.account = this.query.phoneNum
							uni.showToast({
								title:'领取成功',
								icon:'none'
							})
						}
					})
				}
			},
			// 邮寄信息
			submit1(){
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title:'提交中'
					})
					this.noteQuery.rafflePrizeLogId = this.prizeInfo.rafflePrizeLogId
					notes(this.noteQuery).then(res=>{
						if (res.state == 'Success') {
							this.show1 = false
							uni.hideLoading({noConflict:true})
							this.init()
							uni.showToast({
								title:'提交成功',
								icon:'none'
							})
						}
					})
				})
				
			},
			prizeList(){
				this.status = 'loading'
				prizeList(this.query).then(res=>{
					if (res.state == 'Success') {
						this.list = this.list.concat(res.content.records)
						if(this.list.length>= res.content.total){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.currentPage++
						}
					}
				})
			},
			init(){
				this.query.currentPage = 1
				this.list = []
				this.status = 'more'
				this.prizeList()
			}
		},
		onLoad(options) {
			this.query.raffleId = options.id
			try{
				this.query.phoneNum=JSON.parse(uni.getStorageSync('userInfo')).phoneNum
			}catch(e){
				//TODO handle the exception
				return uni.showModal({
					title:'请登录',
					confirmText:'去登录',
					success(res){
						console.log(res);
						if(res.confirm){
							uni.navigateTo({
								url:'../../login/login/login?redirect=/luckyDraw/prizeList'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.prizeList{
	padding: 20rpx 24rpx ;
	background: #F9F9F9;
	min-height: 100vh;
	.item{
		display: flex;
		padding: 28rpx 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 20rpx;
		.info{
			padding-left: 20rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title{
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}
			
			.time{
				font-size: 20rpx;
				color: #AAAAAA;
			}
			
			.valid{
				font-size: 20rpx;
				color: #AAAAAA;
			}
			.desc{
				font-size: 20rpx;
				color: #AAAAAA;
			}
		}
		
		.btn-box{
			width: 120rpx;
			text-align: center;
			.btn{
				width: 120rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #EE4320;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				
			}
			.btn.disable{
				background: #F0F0F0;
				color: #AAAAAA;
			}
			
			.type{
				font-size: 24rpx;
				color: #3B83FF;
				margin-top: 20rpx;
			}
			
		}
	}
	
	.result-box{
		width: 90%;
		text-align: center;
		margin: 0 auto;
		padding-bottom: 200rpx;
		.goods-name{
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}
		.img{
			width: 168rpx;
			height: 168rpx;
			margin-top: 20rpx;
		}
		.sub-title{
			font-size: 24rpx;
			color: #222222;
			margin-top: 20rpx;
		}
		.input-box{
			display: flex;
			font-size: 28rpx;
			color: #222222;
			margin-top: 20rpx;
			.label{
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
				width: 350rpx;
				white-space: nowrap;
			}
			.input{
				font-size: 28rpx;
				color: #222222;
			}
		}
		.address{
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
			margin-top: 20rpx;
		}
		.notice{
			font-size: 20rpx;
			color: #AAAAAA;
			margin-top: 20rpx;
		}
	}
}
</style>