124 lines
4.1 KiB
Vue
124 lines
4.1 KiB
Vue
<!-- 我的规则 -->
|
||
<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>
|