<!-- 我的规则 -->
<template>
	<view class="rule-page">
		<HeaderCom></HeaderCom>
		<scroll-view scroll-y class="main">
			
			<view class="contain">
				<view class="ql-snow" v-if="detailTxt">
					<view class="ql-editor" v-html="detailTxt"></view>
				</view>
				<template v-else>
					<view class="title">规则</view>
					<view class="content indent-txt">教您玩转妙趣盲盒~</view>
					<view class="content indent-txt">一、怎么抽取盲盒？</view>
					<view class="content indent-txt">1）在首页上方点击充值按钮进行代币充值;</view>
					<view class="content indent-txt">2）在首页滑动盲盒款式，点击图片可详细查看商品明细和抽取概率;</view>
					<view class="content indent-txt">3）选中一款心仪的盲盒，点击“立即开盒”即可进行抽取；</view>
					<view class="content indent-txt">4）抽取形式多样，一发入魂or霸气五连！霸气五连购买优惠力度更高哦~</view>
					<view class="content indent-txt">| 一发入魂：一次抽取一个</view>
					<view class="content indent-txt">| 欧气三连：一次抽取三个</view>
					<view class="content indent-txt">| 霸气五连：一次抽取五个</view>
					<view class="content indent-txt">5）开盒100%获得商品，所抽中的商品将自动进入您的“仓库”，您可以在“仓库”页面中查看。</view>
					<view class="content indent-txt">二、没抽到心仪的商品怎么办？</view>
					<view class="content indent-txt">1）丝毫不用担心！如果没抽到心仪的盲盒商品，可选择兑换成积分前往商城兑换其他商品哦~</view>
					<view class="content indent-txt">2）兑换积分时，平台将收取部分手续费，最终积分数量将以兑换页面展示为准。</view>
					<view class="content indent-txt">三、怎么提货？是否包邮？</view>
					<view class="content indent-txt">1）进入我的仓库，选择要提货的商品并填写正确的收货信息，实物最快当日发货哦~</view>
					<view class="content indent-txt">2）单次提取≥{{detail.num}}件商品包邮<template v-if="detail.exclude.length > 0">（{{detail.exclude.join(',')}}地区除外）</template>。</view>
					<view class="content indent-txt red">四、特别说明</view>
					<view class="content indent-txt red">本活动与苹果等品牌方公司无关。</view>
					<view class="content indent-txt red">商品抽奖存在概率性，付费请谨慎。</view>
					<view class="content indent-txt">【关于退款】</view>
					<view class="content indent-txt">基于盲盒商品特殊属性，开盒后不支持7天无理由退换货和退款。</view>
				</template>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import HeaderCom from '@/pages/components/header.vue'
	import { carriageGetRule } from '@/API/shop.js'
	import { agreementDetailApi } from '@/API/login.js'
	export default{
		components:{HeaderCom},
		data(){
			return{
				detail:{
					exclude:[],
				},
				detailTxt:''
			}
		},
		mounted() {
			this.getCarriageGetRule()
			this.getAgreementDetail()
		},
		methods:{
			getAgreementDetail(){
				agreementDetailApi({type:'gameRules'}).then(res => {
					console.log(res)
					if(res.code === 200 && res.data){
						this.detailTxt = res.data
					}
				})
			},
			getCarriageGetRule(){
				carriageGetRule().then(res => {
					if(res.code === 200){
						console.log(res)
						this.detail = res.data
					}else{
						this.$api.msg(res.message)
					}
				}).catch(err => {
					
				})
			}
		}
	}
</script>

<style>
	@import url('@/static/quill.snow.css');
</style>
<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.rule-page {
		padding: 112rpx 32rpx 32rpx 32rpx;
		.main{
			height: calc(100vh - 162rpx);
			width: 686rpx;
			.contain{
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 32rpx;
				.title{
					font-weight: bold;
					font-size: 40rpx;
					color: #000000;
					margin-bottom: 32rpx;
				}
				.content{
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 8rpx;
				}
				.indent-txt{
					text-indent: 2ch;
				}
				.red{
					color: red;
				}
			}
			
		}
		
	}
</style>
