419 lines
11 KiB
Vue
419 lines
11 KiB
Vue
<template>
|
||
<view v-if="istrue" class="">
|
||
<view class="t1 pos">
|
||
<view class="f-center f32" style="color: #FFF;margin-top: 190rpx;letter-spacing: 18rpx;">最高可领500元立减金</view>
|
||
<view class="abs flex_column flex_items" style="right: 10rpx;top: 120rpx;">
|
||
<image @click="gomy" :src="jpsl" style="width: 50rpx;height: 64rpx;" mode=""></image>
|
||
<image @click="tk('guize')" :src="gz" style="width: 50rpx;height: 64rpx;margin-top:20rpx;" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="flex_items flex_column" style="margin-top:240rpx;">
|
||
<view v-if="zjtitle==''" class="f26" style="color: #FA483D;">限时领取微信立减金,翻牌享惊喜</view>
|
||
<view v-else class="f26" style="color: #333;">
|
||
恭喜您获得{{zjtitle}},<text class="bold" @click="createState()" style="color: #FA483D;">点此再次领取</text>
|
||
</view>
|
||
<view class="flex_items flex_center">
|
||
<view v-if="cardStateArray.length!=0" class="flex_warp flex_items ml10 drawBox" style="">
|
||
<view v-for="(item,index) in cardStateArray" :key="index"
|
||
:class="[index!=2&&index!=5?'mr15':'','mt10','draw-card']" @click="flip(index)">
|
||
<view :class="[item.state?'front_reverse':'','front']">
|
||
<image :src="imgs[index].src" style="width:145rpx;height:216rpx;" mode="aspectFit">
|
||
</image>
|
||
</view>
|
||
<view :class="[item.state&&index==curindex?'back_reverse':'','back','pos']">
|
||
<view class="f-center f22 abs"
|
||
style="color:#FFF2A3;width: 100%;left: 0;top:12rpx;z-index: 1;">
|
||
{{item.name}}
|
||
</view>
|
||
<image :src="zj" style="width:145rpx;height:216rpx;" mode="aspectFit"></image>
|
||
<view @click="godui" class="abs"
|
||
style="width: 100%;height: 40rpx;background:none;bottom: 15rpx;"></view>
|
||
</view>
|
||
<view :class="[item.state&&index!=curindex?'back_reverse':'','back','pos']">
|
||
<view class="f-center f22 abs"
|
||
style="color:#818181;width: 100%;left: 0;top:12rpx;z-index: 1;">
|
||
{{item.name}}
|
||
</view>
|
||
<image :src="wjz" style="width:145rpx;height:216rpx;" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="f30 count" style="color: #FFF2A3;">
|
||
<text>剩余<text class="" style="color: #fff;">{{receive_num}}</text>次机会</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex_items flex_center pos" style="margin-top: -106rpx;z-index: 1;overflow: hidden;">
|
||
<view class="t2 flex_column flex_items" style="">
|
||
<image :src="jptitle" style="width: 439rpx;height: 25rpx;margin-top: 166rpx;margin-bottom: 20rpx;" mode=""></image>
|
||
<view class="flex_start flex_items mt10" style="width: calc(100% - 180rpx);">
|
||
<view style="width:460rpx;">
|
||
<u-line-progress :percentage="process_rate" inactiveColor="#FF5937" activeColor="#FFE7B8">
|
||
<view class="u-percentage-slot"></view>
|
||
</u-line-progress>
|
||
</view>
|
||
<view class="ml30 f26" style="color: #FF5937;width: 204rpx;">已领：{{process_rate}}%</view>
|
||
</view>
|
||
<view class="flex_items flex_center" style="width: 100%;">
|
||
<view v-if="prizes.length!=0" class="flex_warp flex_items ml20" style="width: calc(100% - 80rpx);">
|
||
<view v-for="(item,index) in prizes" :key="index"
|
||
:class="[index!=2&&index!=5?'mr50':'','mt30']">
|
||
<view class="jcb pos">
|
||
<view class="abs f-center f22" style="width: 100%;left: 0;bottom:15rpx;color: #FFE0A8;">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-else class="p30 f26 f-center" style="color: #9a9a9a;margin-top:50rpx;">--暂无数据--
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex_items flex_center">
|
||
<view class="t4 flex_items flex_column" style="">
|
||
<view class="f28" style="color: #8E4D41;width:calc(100% - 130rpx);margin-top: 80rpx;">
|
||
<view>活动期间:</view>
|
||
<view class="mt20">1.单击右上角奖品按钮，进入奖品列表页面</view>
|
||
<view class="mt20">2.选择奖品，点击去兑换</view>
|
||
<view class="mt20">3.进入兑换页，点击立即兑换</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex_items flex_center">
|
||
<view class="t3 flex_items flex_column" style="">
|
||
<view class="f28" style="color: #8E4D41;width:calc(100% - 130rpx);margin-top: 80rpx;">
|
||
<view>活动期间:</view>
|
||
<view class="mt20">1.成功签约积存金有机会获得1次领取机会</view>
|
||
<view class="mt20">2.成功签约柜台债有机会获得1次领取机会</view>
|
||
<view class="mt20">3.成功签约结构性存款有机会获得2次领取机会</view>
|
||
<view class="mt20">4.成功买入1笔2000元面值(含)以上二级流通柜台债，有机会获得1次领取机会</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<overlay v-if="isshow" :istype="istype" :isshow="isshow" :title="zjtitle" :link="link" @backshow="backshow">
|
||
</overlay>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import overlay from "@/components/overlay.vue"
|
||
import {Debounce} from "@/util/common.js"
|
||
export default {
|
||
data() {
|
||
return {
|
||
t1: require('@/static/lhj.png'),
|
||
zj: require('@/static/zj.png'),
|
||
wjz: require('@/static/wzj.png'),
|
||
jptitle: require('@/static/jptitle.png'),
|
||
hj: require('@/static/hj.png'),
|
||
jpsl: require('@/static/jpsl.png'),
|
||
gz: require('@/static/gz.png'),
|
||
out: require('@/static/out.png'),
|
||
lu: require('@/static/gtz.png'),
|
||
imgs: [{
|
||
src: require('@/static/gtz.png'),
|
||
}, {
|
||
src: require('@/static/jcj.png'),
|
||
}, {
|
||
src: require('@/static/xxy.png'),
|
||
}, {
|
||
src: require('@/static/jcj.png'),
|
||
}, {
|
||
src: require('@/static/xxy.png'),
|
||
}, {
|
||
src: require('@/static/gtz.png'),
|
||
}, {
|
||
src: require('@/static/jcj.png'),
|
||
}, ],
|
||
cardStateArray: [],
|
||
prizes: [],
|
||
istype: 'login',
|
||
isshow: true,
|
||
istrue: true,
|
||
receive_num: null,
|
||
ids: "",
|
||
process_rate: 0,
|
||
zjtitle: "",
|
||
link: "",
|
||
zjlink: "",
|
||
}
|
||
},
|
||
onLoad() {
|
||
// this.isshow = false
|
||
// this.getData()
|
||
if (uni.getStorageSync('token')) {
|
||
getApp().globalData.token = uni.getStorageSync('token')
|
||
this.isshow = false
|
||
this.getData()
|
||
} else {
|
||
this.isshow = true
|
||
}
|
||
},
|
||
components: {
|
||
overlay
|
||
},
|
||
methods: {
|
||
getData(aa) {
|
||
if (!aa) {
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
})
|
||
}
|
||
this.api.homedata().then((res) => {
|
||
if (res.data.code == '200') {
|
||
this.receive_num = res.data.data.receive_num
|
||
this.gethome(aa)
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getAccountInfo(){
|
||
this.api.homedata().then((res) => {
|
||
if (res.data.code == '200') {
|
||
this.receive_num = res.data.data.receive_num
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
gethome(aa) {
|
||
this.api.getprizes({
|
||
activity_id: 1
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == '200') {
|
||
this.ids = res.data.data.id
|
||
this.process_rate = res.data.data.process_rate
|
||
|
||
if(this.cardStateArray.length>0){
|
||
this.cardStateArray.forEach((item, index) => {
|
||
item.state = false
|
||
})
|
||
}
|
||
this.prizes = res.data.data.prizes
|
||
|
||
const temp = res.data.data.prizes.slice();
|
||
const arrayLen = temp.length
|
||
while(temp.length < 6){
|
||
const randomNumber = Math.floor(Math.random() * arrayLen);
|
||
temp.push(res.data.data.prizes[randomNumber])
|
||
}
|
||
console.log(temp)
|
||
temp.forEach((item, index) => {
|
||
item.state = false
|
||
})
|
||
this.cardStateArray = this.shuffleArray(temp)
|
||
|
||
|
||
this.istrue = true
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
flip:Debounce(function(index) {
|
||
let that = this
|
||
console.log(that.cardStateArray)
|
||
if (that.cardStateArray[index].state) {
|
||
return
|
||
}
|
||
that.api.takeit({
|
||
ids: 1
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == '200') {
|
||
that.link = res.data.data.link
|
||
that.zjtitle = res.data.data.name
|
||
that.cardStateArray[index].name = res.data.data.name
|
||
that.curindex = index
|
||
that.cardStateArray.forEach((item, index) => {
|
||
item.state = true
|
||
})
|
||
setTimeout(function() {
|
||
that.istype = 'iszj'
|
||
that.isshow = true
|
||
}, 800);
|
||
that.getAccountInfo()
|
||
// that.getData('tip')
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
// }, 600);
|
||
},1000),
|
||
godui() {
|
||
window.open(this.link, "_blank")
|
||
},
|
||
createState() {
|
||
this.cardStateArray.forEach((item, index) => {
|
||
item.state = false
|
||
})
|
||
// this.cardStateArray = this.shuffleArray(this.cardStateArray);
|
||
this.curindex = null
|
||
this.zjtitle = ""
|
||
this.getData('aa')
|
||
},
|
||
shuffleArray(array) {
|
||
return array.sort(() => Math.random() - 0.5);
|
||
},
|
||
tk(val) {
|
||
this.istype = val
|
||
this.isshow = true
|
||
},
|
||
gomy() {
|
||
uni.navigateTo({
|
||
url: "/pages/my/index"
|
||
})
|
||
},
|
||
backshow(e) {
|
||
this.isshow = false
|
||
if (e.types == 'loginok') {
|
||
this.getData()
|
||
}
|
||
if (e.types == 'go') {
|
||
this.createState()
|
||
}
|
||
},
|
||
},
|
||
onReachBottom() {
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background: #FFE4BD !important;
|
||
}
|
||
|
||
.u-line-progress {
|
||
overflow: initial !important;
|
||
}
|
||
|
||
.t1 {
|
||
background-image: url('~@/static/lhj.png') !important;
|
||
background-size: 100% 100%;
|
||
height: 1344rpx;
|
||
overflow: hidden;
|
||
|
||
.count {
|
||
background-image: url('~@/static/count.png') !important;
|
||
background-size: 100% 100%;
|
||
width: 263rpx;
|
||
height: 63rpx;
|
||
line-height: 63rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%);
|
||
bottom: 70rpx;
|
||
}
|
||
}
|
||
|
||
.t2 {
|
||
background-image: url('~@/static/jpzs.png') !important;
|
||
background-size: 100% 100%;
|
||
width: 726rpx;
|
||
height: 902rpx;
|
||
|
||
.u-percentage-slot {
|
||
background-image: url('~@/static/hj.png') !important;
|
||
background-size: 100% 100%;
|
||
width: 55rpx;
|
||
height: 38rpx;
|
||
margin-right: -5px;
|
||
}
|
||
|
||
.jcb {
|
||
background-image: url('~@/static/jcbg.png') !important;
|
||
background-size: 100% 100%;
|
||
width: 179rpx;
|
||
height: 250rpx;
|
||
}
|
||
}
|
||
|
||
.t3 {
|
||
background-image: url('~@/static/rwzx.png') !important;
|
||
background-size: 100% 100%;
|
||
width: 728rpx;
|
||
height: 497rpx;
|
||
}
|
||
|
||
.t4 {
|
||
background-image: url('~@/static/flow.png') !important;
|
||
background-size: 100% 100%;
|
||
width: 728rpx;
|
||
height: 370rpx;
|
||
}
|
||
|
||
.drawBox {
|
||
width: calc(100% - 280rpx);
|
||
height: 464rpx;
|
||
// margin-top: 50rpx;
|
||
// padding: 0 20rpx;
|
||
flex-wrap: wrap;
|
||
justify-content: space-evenly;
|
||
|
||
.draw-card {
|
||
position: relative;
|
||
width: 145rpx;
|
||
height: 216rpx;
|
||
perspective: 1000rpx;
|
||
/* 设置透视投影 */
|
||
// margin: 0 10rpx;
|
||
|
||
.front,
|
||
.back {
|
||
width: 100%;
|
||
position: absolute;
|
||
backface-visibility: hidden;
|
||
/* 隐藏背面元素 */
|
||
}
|
||
|
||
.front {
|
||
z-index: 2;
|
||
/* 设置正面元素位于背面元素之上 */
|
||
transform: rotateY(0deg);
|
||
/* 初始状态正面朝上 */
|
||
transition: transform 0.6s ease;
|
||
|
||
/* 添加过渡效果 */
|
||
&_reverse {
|
||
transform: rotateY(-180deg);
|
||
/*正面翻转为背面 */
|
||
}
|
||
}
|
||
|
||
.back {
|
||
transform: rotateY(180deg);
|
||
/* 初始状态背面朝上 */
|
||
transition: transform 0.6s ease;
|
||
|
||
/* 添加过渡效果 */
|
||
&_reverse {
|
||
transform: rotateY(0deg);
|
||
/*背面翻转为正面 */
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |