discounts-minapp/luckyDraw/index.vue

<template>
	<view class="luckyDraw" :style="{backgroundImage:`url(${bg})` }">

		<view class="lucky-box" :class="isHidden?'hidden':''">
			<LuckyWheel ref="myLucky" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes"
				:buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
			<view class="desk">
				<image class="icon"
					src="https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/HmntmDPPKjjS11b74d9dd70452a39648bfab16eb88cb.png/1.png"
					mode=""></image>
				<view class="times">
					抽奖次数：{{prizeNum}}次
				</view>
			</view>
		</view>
		
		<view class="rule-btn" @click="handleRule">
			抽奖规则
		</view>
		
		
		<view class="box">
			<view class="title">
				<image class="icon" src="https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/K4cEa0zOfcQ6371bdc4794cc3926a80e57995db464c9.png/1.png" mode=""></image>
				<!-- 中奖记录 -->
			</view>
			<view class="content box-container">
			<u-empty v-if="!logList.length" text="中奖记录空空如也" iconSize="200rpx" textSize="28rpx">
				</u-empty>
				<zs-list class="store-box" mt="0" @load="prizeList" :status="status">
					<view class="item" v-for="(item,index) in logList" :key="index">
						恭喜 
						<text class="yellow">
							{{item.nickname}}
						</text>
						获得
						<text class="yellow">
							{{item.prizeName}}
						</text>
					</view>
				</zs-list>
			</view>
		</view>
		<view class="box">
			<view class="title">
				<image class="icon" src="https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/NWz4vrvoR3UX83e62d6820324af95a2878ccedd39049.png/1.png" mode=""></image>
				<!-- 活动奖品 -->
			</view>
			<view class="content flex-box">
				<view class="item" v-for="(item,index) in list" :key="index">
					<image class="icon" :src="item.prizeImg" mode=""></image>
					<view class="name">
						{{item.prizeName}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="box">
			<view class="title">
				<image class="icon" src="https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/YfCL69lDjHXI5b33c3b17b10267f2aa2a41a152aa42f.png/1.png" mode=""></image>
				<!-- 我的奖品 -->
			</view>
			<view class="more-btn" @click="handleMore">
				查看
			</view>
			<view class="content table-box">
				<view class="header">
					<view class="num">
						序号
					</view>
					<view class="time">
						获奖时间
					</view>
					<view class="info">
						奖品信息
					</view>
				</view>
				<view class="table-body">
			<u-empty v-if="!myLogList.length" text="你还没有中奖记录" iconSize="200rpx" textSize="28rpx"></u-empty>
					<view class="item" v-for="(item,index) in myLogList" :key="index">
						<view class="num">
							{{index+1}}
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
						<view class="info">
							{{item.prizeName}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<!-- 视频会员 -->
		<zs-luck-dialog v-if="show" btnText="立即充值" @submit="submit" @close="handleClose('show')">
			<view class="result-box">
				<view class="goods-name">
					{{result.prizeName}}
				</view>
				<image class="img" :src="result.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">
					{{result.prizeName}}
				</view>
				<image class="img" :src="result.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">
					{{result.prizeName}}
				</view>
				<image class="img" :src="result.prizeImg" mode=""></image>
				<view class="address">
					取货地址：{{result.address}}
				</view>
				<view class="notice">
					{{result.sendType == 1?`兑换有效期：请在${result.valid}个工作日内到自提点取货，过期失效`:'优惠劵已存入【我的优惠劵】，可前往【我的优惠劵】中查看使用'}}
					
				</view>
			</view>
		</zs-luck-dialog>
		
		<!-- 未中奖 -->
		<zs-luck-dialog v-if="show3" :titleIcon="result.prizeType == 5?'https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/R5gnXtO4tU9I391ccdbfe29a8a21e97108077dbbf4c5.png/1.png':'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/ApX9kwEUYgE84e54016e951eaab20c5a504e8c5df6f2.png/1.png'" @submit="handleClose('show3')" @close="handleClose('show3')">
			<view class="result-box">
				<view class="goods-name">
					{{result.prizeName}}
				</view>
				<image class="img" :src="result.prizeImg" mode=""></image>
				<view class="address">
					{{result.prizeType == 5?'好可惜啊，差一点就中了':result.address}}
				</view>
				
			</view>
		</zs-luck-dialog>
		
		
		
		<zs-luck-dialog titleIcon="https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/DNbGhIUkgQSc756a0dc349b888bddc286ecea867f25f.png/1.png" v-if="show4" @submit="handleClose('show4')" @close="handleClose('show4')">
			
			<view class="rule-content">
				<rich-text class="rule-text" :nodes="rule"></rich-text>
			</view>
		</zs-luck-dialog>

	</view>
</template>

<script>
	import {
		prizeList,
		getLuckyDrawDetail,
		prize,
		sendVipPrize,
		notes,
		remainder
	} from "@/api/luckyDraw.js"
	import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel' // 大转盘
	export default {
		components: {
			LuckyWheel
		},
		data() {
			return {
				fullPrize:[],//完整奖品
				bg:'https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/rP86PRmpk21z60fd17f0e1363aacf412d0a7f9983abb.png/1.png',
				isPrize:false,
				isGet:false,
				prizeId:0,
				prizeNum:'',
				rule:'',
				prizeIndex:0,
				result:{
					prizeImg:'',
					prizeName:'',
				},
				query:{
					raffleId:0,
					currentPage:1,
					pageSize:10,
				},
				status:'more',
				list:[],
				logList:[],//中奖记录
				myLogList:[],//我的中奖纪录
				account:'',//充值账号
				show: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				colorList:['#E2EEF5','#FFF4DC','#FFEAC0'],
				blocks: [{
					padding: '60rpx',
					imgs: [{
						src: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/G4CJbO8GK7vJ26e48d74c4cd60260313494a367fbe7b.png/1.png',
						width: "600rpx",
						height: '600rpx',
					}]
				}],
				prizes: [],
				buttons: [{
						radius: '110rpx',
						imgs: [{
							src: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/eTft9lkLzsdTf25c64b3163deb68039b574142a917bb.png/1.png',
							top: '-87rpx',
							width: "110rpx",
							height: '152rpx',
						}]
					},
				
				],
				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']
					},
				}
				
			}
		},
		computed: {
			isHidden() {
				if(this.show||this.show1||this.show2||this.show3||this.show4){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			handleMore(url){
				uni.navigateTo({
					url:'/luckyDraw/prizeList?id='+this.query.raffleId
				})
			},
			handleClose(val){
				this[val] = false
			},
			handleRule(){
				this.show4 = true
			},
			// 点击抽奖按钮触发回调
			startCallBack() {
				if(this.isPrize) return
				// 先开始旋转
				if(this.prizeNum>0){
					this.isPrize = true
					this.prizeNum--
					// this.$refs.myLucky.play()
					this.prize()
				}else{
					return uni.showToast({
						title:'抽奖次数不足',
						icon:'none'
					})
				}
				
			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				this.isPrize = false
				console.log(prize)
				if(JSON.stringify(prize) == '{}') return
				this.initLogs()
				// 奖品详情
				if(this.result.prizeType == 2){//视频会员
					this.show = true
				}else if(this.result.prizeType == 5){//未中奖
					this.show3 = true
				}else if(this.result.sendType == 2){//邮寄
					this.show1 = true
					this.$nextTick(() => {
						this.$refs.uForm.setRules(this.rules)
					})
				}else if(this.result.sendType == 1 || this.result.sendType == 3){//线上线下发货
					this.show2 = true
				}
			},
			// 将两个数组交替插入一个数组
			mergeArraysAlternately(arr1, arr2) {
			  const result = [];
			  const length1 = arr1.length;
			  const length2 = arr2.length;
			  let i = 0, j = 0;
			
			  while (i < length1 || j < length2) {
			    if (i < length1) {
			      result.push(arr1[i]);
			      i++;
			    }
			    if (j < length2) {
			      result.push(arr2[j]);
			      j++;
			    }
			  }
			
			  return result;
			},

			getLuckyDrawDetail(raffleId) {
				getLuckyDrawDetail({
					raffleId,
					regionCode:'520100'
				}).then(res => {
					if (res.state == 'Success') {
						this.bg = res.content.backImg
						this.rule =  res.content.raffleRule
						let prizeList = [] // 奖品列表
						let failList = []//未中奖列表
						res.content.prizes.map(item=>{
							if(item.prizeType == 5){
								failList.push(item)
							}else{
								prizeList.push(item)
							}
						})
						
						this.fullPrize = this.mergeArraysAlternately(prizeList,failList)
						
						this.list = prizeList
						
						this.prizes = []
						this.fullPrize.map((item,index)=>{
							this.prizes.push({
								fonts: [{
									text: item.prizeName,
									top: '10%',
									fontSize:'20rpx',
									wordWrap:true,
									lengthLimit:'70%',
									fontColor:'#FF8A26'
								}],
								background: this.colorList[(index+1)%3] ,
								imgs:[{
									src:item.prizeIcon,
									top: '50rpx',
									width:'70rpx',
								}]
							})
						})
						
					}
				})
			},
			
			initLogs(){
				this.myPrizeList()
				this.status = 'more'
				this.logList = []
				this.query.currentPage = 1
				this.prizeList()
			},
			
			prizeList(){
				this.status = 'loading'
				prizeList(this.query).then(res=>{
					if (res.state == 'Success') {
						this.logList = this.logList.concat(res.content.records)
						if(this.logList.length>= res.content.total){
							this.status = 'noMore'
						}else{
							this.status = 'more'
							this.query.currentPage++
						}
					}
				})
			},
			myPrizeList(){
				prizeList({raffleId:this.query.raffleId,currentPage:1,pageSize:10,phoneNum:JSON.parse(uni.getStorageSync('userInfo')).phoneNum}).then(res=>{
					if (res.state == 'Success') {
						this.myLogList = res.content.records
					}
				})
			},
			prize(){
				prize({raffleId:this.prizeId}).then(res=>{
					this.remainder(this.query.raffleId)
					if (res.state == 'Success') {
						this.$refs.myLucky.play()
						let id = res.content.rafflePrizeId
						this.fullPrize.map((item,index)=>{
							if(item.id == id){
								this.result = item
								this.prizeIndex = index
							}
						})
						this.result.rafflePrizeId =  res.content.rafflePrizeId
						this.result.rafflePrizeLogId =  res.content.rafflePrizeLogId
						console.log(this.result);
						setTimeout(()=>{
							this.$refs.myLucky.stop(this.prizeIndex)
						},500)
					}else{
						console.log('baoc');
						this.isPrize = false
						this.$refs.myLucky.stop()
					}
				})
			},
			// 视频会员领取
			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.result.prizeContent,userId:this.userId,rafflePrizeLogId:this.result.rafflePrizeLogId,rafflePrizeId:this.result.rafflePrizeId}).then(res=>{
						if (res.state == 'Success') {
							uni.hideLoading({noConflict:true})
							this.show1 = false
							this.account=JSON.parse(uni.getStorageSync('userInfo')).phoneNum
							uni.showToast({
								title:'提交成功',
								icon:'none'
							})
						}
					})
				}
			},
			// 邮寄信息
			submit1(){
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title:'提交中'
					})
					this.noteQuery.rafflePrizeLogId = this.result.rafflePrizeLogId
					notes(this.noteQuery).then(res=>{
						if (res.state == 'Success') {
							this.show1 = false
							uni.hideLoading({noConflict:true})
							uni.showToast({
								title:'领取成功',
								icon:'none'
							})
						}
					})
				})
				
			},
			remainder(raffleId){
				if(this.isGet) return
				this.isGet = true
				remainder({raffleId}).then(res=>{
					this.isGet = false
					if (res.state == 'Success') {
						this.prizeNum = res.content
					}
				})
			}
		},
		mounted() {
			// this.startCallBack()
		},
		onLoad(options) {
			this.query.raffleId = options.id
			this.prizeId = options.id
			this.remainder(options.id)
			this.getLuckyDrawDetail(options.id)
			this.myPrizeList()
			try{
				this.userId=JSON.parse(uni.getStorageSync('userInfo')).userId
				this.account=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">
	.luckyDraw {
		padding-top: 500rpx;
		padding-bottom: 80rpx;
		position: relative;
		background-image: url('https://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/rP86PRmpk21z60fd17f0e1363aacf412d0a7f9983abb.png/1.png') ;
		background-size: 750rpx ;
		.rule-btn{
			width: 56rpx;
			height: 204rpx;
			background: linear-gradient( 89deg, #FEBF37 0%, #FF8A26 100%);
			box-shadow: 0rpx 4rpx 2rpx 2rpx rgba(249,115,29,0.63), inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.49);
			border-radius: 20rpx 0rpx 0rpx 20rpx;
			border: 0rpx solid #FF8B26;
			font-size: 28rpx;
			color: #FFFFFF;
			writing-mode: vertical-lr;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			letter-spacing: 10rpx;
			position: absolute;
			right: 0%;
			top: 430rpx;
		}
		.lucky-box {
			z-index: 3;
			.desk {
				position: relative;
				// top: -100rpx;
				margin-top: -100rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;

				.icon {
					width: 618rpx;
					height: 234rpx;
				}

				.times {
					position: absolute;
					bottom: 22rpx;
					left: 50%;
					transform: translateX(-50%);
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}
		}
		
		.box{
			width: 710rpx;
			background: #FFE3A9;
			box-shadow: 0rpx 2rpx 12rpx 2rpx #FF8B26, inset 0rpx 6rpx 12rpx 2rpx rgba(255,255,255,0.58);
			border-radius: 16rpx;
			margin: 0 auto 28rpx;
			padding-bottom: 20rpx;
			position: relative;
			.title{
				font-size: 48rpx;
				color: #EE4320;
				text-align: center;
				padding: 20rpx 0;
				.icon{
					width: 192rpx;
					height: 48rpx;
				}
			}
			.more-btn{
				font-size: 28rpx;
				color: #FF8F2E;
				position: absolute;
				right: 24rpx;
				top: 34rpx;
			}
			.content{
				width: 668rpx;
				max-height: 480rpx;
				overflow: auto;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin: 0 auto;
				padding: 14rpx 28rpx;
				box-sizing: border-box;
				
			}
			.box-container{
				.item{
					font-size: 28rpx;
					color: #222222;
					padding: 12rpx 0;
					line-height: 40rpx;
					.yellow{
						color: #FF8B26;
					}
				}
			}
			.flex-box{
				display: flex;
				flex-wrap: wrap;
				padding: 14rpx 0;
				.item{
					width: 167rpx;
					padding: 14rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					.icon{
						width: 80rpx;
						height: 80rpx;
					}
					.name{
						width: 140rpx;
						font-size: 24rpx;
						color: #222222;
						margin-top: 12rpx;
						text-align: center;
						overflow: hidden;
						text-overflow: ellipsis;
						/* 弹性伸缩盒子模型显示 */
						display: -webkit-box;
						/* 限制在一个块元素显示的文本的行数 */
						-webkit-line-clamp: 2;
						/* 设置或检索伸缩盒对象的子元素的排列方式 */
						-webkit-box-orient: vertical;
					}
				}
			}
			
			.table-box{
				padding: 0;
				.header{
					padding: 14rpx 0;
					font-size: 28rpx;
					color: #222222;
					display: flex;
					align-items: center;
					.num{
						width: 120rpx;
						text-align: center;
					}
					.time{
						flex: 1;
						text-align: center;
					}
					.info{
						flex: 1;
						text-align: center;
					}
					
				}
				.table-body{
					max-height: 360rpx;
					overflow: auto;
					.item{
						padding: 14rpx 0;
						display: flex;
						align-items: center;
						font-size: 24rpx;
						.num{
							width: 120rpx;
							text-align: center;
						}
						.time{
							flex: 1;
							text-align: center;
						}
						.info{
							flex: 1;
							color: #FF8B26;
							text-align: center;
						}
					}
				}
			}
		}

		.vue-ref {
			box-shadow: 0rpx 20rpx 20rpx 2rpx rgba(165, 81, 9, 0.3);
		}

		.hidden {
			position: fixed;
			top: 999999rpx;
			left: 999999rpx;
		}

		.modal {
			position: fixed;
			top: 0%;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(0, 0, 0, .4);

		}

		.dialog-border {
			width: 590rpx;
			height: 672rpx;
			background: #FF5642;
			box-shadow: inset 0rpx 6rpx 12rpx 2rpx #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 1rpx solid #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			.close{
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				bottom: -70rpx;
				left: calc(50% - 20rpx);
			}

			.top-icon {
				width: 332rpx;
				height: 142rpx;
				position: absolute;
				top: -130rpx;
				left: calc(50% - 166rpx);
				vertical-align: bottom;
			}

			.btn-box {
				position: absolute;
				left: 0%;
				bottom: 0%;
				width: 590rpx;
				height: 134rpx;
				background: linear-gradient(180deg, #FFF3E2 0%, #F4AF9E 100%);
				border-radius: 0rpx 0rpx 24rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.btn {
					width: 258rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #FF4D3A;
					box-shadow: 0rpx 6rpx 12rpx 2rpx #FF4D3A, inset 0rpx 16rpx 4rpx 2rpx #E8422F;
					border-radius: 72rpx 72rpx 72rpx 72rpx;
					border: 2rpx solid #FFFFFF;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;

				}
				
			}

			.dialog-content {
				width: 542rpx;
				height: 612rpx;
				overflow: auto;
				background: linear-gradient(151deg, #FFFFFF 0%, #FFFFFF 0%, #FFD9BF 100%);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.title-icon {
					width: 430rpx;
					height: 84rpx;
					margin-left: 84rpx;
					margin-top: 30rpx;
				}
			}
		}
		
		// .result-box{
		// 	width: 80%;
		// 	text-align: center;
		// 	margin: 0 auto;
		// 	.goods-name{
		// 		font-weight: bold;
		// 		font-size: 28rpx;
		// 		color: #222222;
		// 	}
		// 	.img{
		// 		width: 168rpx;
		// 		height: 168rpx;
		// 		margin-top: 20rpx;
		// 	}
		// 	.address{
		// 		font-weight: bold;
		// 		font-size: 28rpx;
		// 		color: #222222;
		// 		margin-top: 20rpx;
		// 	}
		// 	.notice{
		// 		font-size: 20rpx;
		// 		color: #AAAAAA;
		// 		margin-top: 20rpx;
		// 	}
		// }
		
		.result-box{
			// width: 80%;
			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;
			}
		}
		
		.rule-content{
			padding: 0 28rpx 160rpx;
			overflow: auto;
			max-height: 380rpx;
			.rule-text{
				font-size: 24rpx;
				color: #222222;
				word-break: break-all;
			}
		}
		
	}
</style>