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>
|