270 lines
8.1 KiB
Vue
270 lines
8.1 KiB
Vue
|
<template>
|
||
|
|
<view class="award">
|
||
|
|
<view class="t1 flex_items flex_center">
|
||
|
|
<view class="flex_around mt120" style="width: calc(100% - 160rpx);">
|
||
|
|
<image :src="imgUrl+'hg.png'" style="width: 100rpx;height: 80rpx;" mode=""></image>
|
||
|
|
<image :src="imgUrl+'wz.png'" style="width: 360rpx;height: 160rpx;" mode=""></image>
|
||
|
|
<image :src="imgUrl+'hg.png'" style="width: 100rpx;height: 80rpx;" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="pos" style="width: 100%;height: 400rpx;">
|
||
|
|
<view class="deng flex_column flex_items" style="left: 120rpx;top: 100rpx;">
|
||
|
|
<text class="bold f28 mt15" style="color: #FEA100;">X5</text>
|
||
|
|
<text class="f16" style="color: #FEA100;">积分领取</text>
|
||
|
|
</view>
|
||
|
|
<view class="deng flex_column flex_items" style="left:40rpx;top:260rpx;">
|
||
|
|
<text class="bold f28 mt15" style="color: #FEA100;">X2</text>
|
||
|
|
<text class="f16" style="color: #FEA100;">积分领取</text>
|
||
|
|
</view>
|
||
|
|
<view class="deng flex_column flex_items" style="right:80rpx;top:200rpx;">
|
||
|
|
<text class="bold f28 mt15" style="color: #FEA100;">X6</text>
|
||
|
|
<text class="f16" style="color: #FEA100;">积分领取</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- kk -->
|
||
|
|
<view class="flex_items flex_center wk" style="width: 100%;">
|
||
|
|
<view class="kk">
|
||
|
|
<view class="flex_items flex_center mt40" style="width: 100%;">
|
||
|
|
<view class="flex_around flex_items" style="width: calc(100% - 340rpx);">
|
||
|
|
<image :src="imgUrl+'xq.png'" style="width:90rpx;height:90rpx;" mode=""></image>
|
||
|
|
<image :src="imgUrl+'xwz.png'" style="width:432rpx;height:100rpx;" mode=""></image>
|
||
|
|
<image :src="imgUrl+'xq2.png'" style="width: 90rpx;height: 90rpx;" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex_items flex_center" style="width: 100%;">
|
||
|
|
<view class="plr30" style="width: calc(100% - 160rpx);">
|
||
|
|
<view class="ptb15" style="background: #FFFFFF;border-radius: 8rpx;border: 1rpx solid #DCD1AE;">
|
||
|
|
<input class="uni-input plr10" focus placeholder="输入手机号" v-model="form.phone" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex_items flex_center mt30" style="width: 100%;">
|
||
|
|
<view class="plr30" style="width: calc(100% - 160rpx);">
|
||
|
|
<view class="ptb15 flex_start flex_items"
|
||
|
|
style="background: #FFFFFF;border-radius: 8rpx;border: 1rpx solid #DCD1AE;">
|
||
|
|
<input class="uni-input plr10" focus placeholder="验证码" v-model="code" />
|
||
|
|
<image @click="getimgcode" :src="imgcode" style="width:210rpx;height:50rpx;" mode=""></image>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex_items flex_center mt30" style="width: 100%;">
|
||
|
|
<view class="plr30" style="width: calc(100% - 160rpx);">
|
||
|
|
<view class="ptb15 flex_start flex_items"
|
||
|
|
style="background: #FFFFFF;border-radius: 8rpx;border: 1rpx solid #DCD1AE;">
|
||
|
|
<input class="uni-input plr10" focus placeholder="输入手机验证码" v-model="form.code" />
|
||
|
|
<view @click="getcode" style="width: 210rpx;color: #F5363A;border-left: 1px solid #ECCACB;"
|
||
|
|
class="f30 f-center">{{codemsg}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex_items flex_center" style="width: 100%;">
|
||
|
|
<view @click="submitgo" class="subg mt40 f24 f-center" style="">立即领取</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 中将 -->
|
||
|
|
<view class="mask flex_items flex_center" v-if="ismask2">
|
||
|
|
<view class="mk2 plr50 flex_column flex_items pos" style="">
|
||
|
|
<image :src="imgUrl+'cgl.png'" class="" style="width: 144rpx;height: 38rpx;margin-top:260rpx;" mode="">
|
||
|
|
</image>
|
||
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'qudiao.png'"
|
||
|
|
style="width: 52rpx;height: 52rpx;bottom: -100rpx;" mode=""></image>
|
||
|
|
<view class="mt30 f24 f-center"
|
||
|
|
style="width: 464rpx;height: 60rpx;line-height: 60rpx;background: #FFEFE2;border-radius: 20rpx;color: #DE9D68;">
|
||
|
|
领取成功后在个人中心我的积分查看
|
||
|
|
</view>
|
||
|
|
<view class="anqi f-center f24 mt80" @click="zhi('cha')">查看规则</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 规则 -->
|
||
|
|
<view class="mask flex_items flex_center" v-if="ismask">
|
||
|
|
<view class="mk2 plr50 flex_column flex_items pos" style="">
|
||
|
|
<image :src="imgUrl+'hdgz.png'" class="" style="width: 144rpx;height: 38rpx;margin-top:260rpx;" mode="">
|
||
|
|
</image>
|
||
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'qudiao.png'"
|
||
|
|
style="width: 52rpx;height: 52rpx;bottom: -100rpx;" mode=""></image>
|
||
|
|
<view class="mt30 f32" style="overflow-y: auto;height:144rpx;width: 100%;color: #666;">
|
||
|
|
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
|
||
|
|
</view>
|
||
|
|
<view class="anqi f-center f24 mt80" @click="zhi('zhi')">我已知晓</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
phone: "",
|
||
|
|
code: ""
|
||
|
|
},
|
||
|
|
code:"",
|
||
|
|
codemsg: '获取验证码',
|
||
|
|
int: null,
|
||
|
|
ismask2: false,
|
||
|
|
ismask: false,
|
||
|
|
imgUrl: "",
|
||
|
|
imgcode: ""
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
this.imgUrl = this.api.imgUrl
|
||
|
|
this.getimgcode()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getimgcode() {
|
||
|
|
this.imgcode = this.api.imgUrl2 + "?tike=" + Math.round(Math.random() * 1000000);
|
||
|
|
},
|
||
|
|
getcode() {
|
||
|
|
let that = this
|
||
|
|
if (that.form.phone == "") {
|
||
|
|
uni.showToast({
|
||
|
|
title: "请输入手机号",
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
if (that.codemsg == "获取验证码" || that.codemsg == "重新发送") {
|
||
|
|
that.codemsg = 5;
|
||
|
|
that.comecode()
|
||
|
|
that.int = setInterval(() => {
|
||
|
|
that.codemsg -= 1;
|
||
|
|
if (that.codemsg == 0) {
|
||
|
|
clearInterval(that.int);
|
||
|
|
that.codemsg = "重新发送";
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
comecode() {
|
||
|
|
this.api.getcode({
|
||
|
|
phone: this.form.phone,
|
||
|
|
serial_number: "655b0f130468bbmcwng",
|
||
|
|
code:this.code
|
||
|
|
}).then((res) => {
|
||
|
|
console.log(res)
|
||
|
|
if (res.data.code == 200) {
|
||
|
|
uni.hideLoading()
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.message,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
this.istrue = true
|
||
|
|
})
|
||
|
|
},
|
||
|
|
submitgo() {
|
||
|
|
uni.showLoading({
|
||
|
|
title: "兑换中..."
|
||
|
|
})
|
||
|
|
this.api.getgift({
|
||
|
|
phone: this.form.phone,
|
||
|
|
serial_number: "655b0f12f1243gnxehu",
|
||
|
|
code: this.form.code
|
||
|
|
}).then((res) => {
|
||
|
|
console.log(res)
|
||
|
|
if (res.data.code == 200) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "兑换成功",
|
||
|
|
icon: "success"
|
||
|
|
})
|
||
|
|
this.ismask2 = true
|
||
|
|
uni.hideLoading()
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.message,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
zhi(types) {
|
||
|
|
if (types == 'zhi') {
|
||
|
|
this.ismask = false
|
||
|
|
this.ismask2 = false
|
||
|
|
} else {
|
||
|
|
this.ismask2 = false
|
||
|
|
this.ismask = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
closemsk() {
|
||
|
|
this.ismask = false
|
||
|
|
this.ismask2 = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.award {
|
||
|
|
background-image: url('https://pfapi.86698.cn/static/images/dhbg.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.deng {
|
||
|
|
background-image: url('https://pfapi.86698.cn/static/images/light.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: 105rpx;
|
||
|
|
height: 105rpx;
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.kk {
|
||
|
|
width: 100%;
|
||
|
|
height: 620rpx;
|
||
|
|
background-image: url('https://pfapi.86698.cn/static/images/kk.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wk {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subg {
|
||
|
|
width: 220rpx;
|
||
|
|
height: 60rpx;
|
||
|
|
background-image: url('https://pfapi.86698.cn/static/images/lqbg.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 60rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.anqi {
|
||
|
|
width: 264rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
background-image: url('https://pfapi.86698.cn/static/images/anqi.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
color: #fff;
|
||
|
|
line-height: 80rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mask {
|
||
|
|
background: rgba(0, 0, 0, 0.60);
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mk2 {
|
||
|
|
background-image: url('https://pfapi.86698.cn/static/images/zjl.png');
|
||
|
|
background-size: 100% 100%;
|
||
|
|
width: 440rpx;
|
||
|
|
height: 692rpx;
|
||
|
|
}
|
||
|
|
</style>
|