331 lines
9.6 KiB
Vue
331 lines
9.6 KiB
Vue
<template>
|
|
<view class="content" v-if="istrue">
|
|
<view v-if="noq" class="noq"></view>
|
|
<!-- mask -->
|
|
<view class="mask flex_items flex_center" v-if="ismask" @click="closemsk">
|
|
<view class="mk plr50 pos flex_column flex_items">
|
|
<view class="f40 abs bold" style="color: #CA7340;top: 24rpx;">活动规则</view>
|
|
<view class="plr50 flex_column f24" style="color: #2B6DA8;">
|
|
<view class="" style="margin-top:130rpx;">1.【活动时间】2023年11月1日至2023年12月31日。</view>
|
|
<view class="mt20">
|
|
2.【活动内容】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。</view>
|
|
<view class="mt20">
|
|
3.【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容。</view>
|
|
<view class="mt20">4【活动细则】此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为文字内容此为。</view>
|
|
</view>
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'cha.png'" style="width: 52rpx;height: 52rpx;bottom: -100rpx;"
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
<!-- 中将 -->
|
|
<view class="mask flex_items flex_center" v-if="ismask2">
|
|
<view class="mk2 plr50 flex_column flex_items pos">
|
|
<view v-if="jiang=='很遗憾，未中奖'" class="f36 bold" style="color: #003A6E;margin-top:150rpx;opacity: 0;">未中奖
|
|
</view>
|
|
<view v-else class="f36 bold" style="color: #003A6E;margin-top:150rpx;">恭喜您获得</view>
|
|
<view class="mt40 f40" style="color: #003A6E;">{{jiang}}</view>
|
|
<view class="mt30 f24" style="color: #003A6E;">请到【我的奖品】中查看</view>
|
|
<view class="flex_items flex_center btnl mt40" @click="gomyp">
|
|
<text class="f32" style="color: #fff;">确认</text>
|
|
</view>
|
|
<image @click="closemsk" class="abs" :src="imgUrl+'cha.png'" style="width: 52rpx;height: 52rpx;bottom: -100rpx;"
|
|
mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="flex_column flex_items t1" style="">
|
|
<view class="" style="margin-top:540rpx;">
|
|
<image :src="imgUrl+'xy.png'" style="width: 600rpx;height:126rpx;"></image>
|
|
</view>
|
|
<image :src="imgUrl+'chu.png'" style="width: 300rpx;height:60rpx;" mode=""></image>
|
|
<view class="flex_items flex_center mt60 pos" style="width: 100%;">
|
|
<view class="pos flex_column flex_items" style="width: 100%;">
|
|
<image :src="imgUrl+'lw.png'" style="width: 430rpx;height: 330rpx;z-index: 1;" mode=""></image>
|
|
<image class="abs" :src="imgUrl+'dp.png'"
|
|
style="width: 750rpx;height: 362rpx;left: 50%;transform: translate(-50%);top:180rpx;z-index: 0;"
|
|
mode=""></image>
|
|
<image class="abs" :src="imgUrl+'hua.png'" style="width: 100%;height: 183rpx;z-index: 2;left: 0;top:320rpx;"
|
|
mode=""></image>
|
|
</view>
|
|
<view class="flex_column flex_items mt30 abs" style="right: 0;top:0rpx;">
|
|
<view @click="openmask" class="tagr flex_items flex_center" style="color: #fff;z-index: 8;">
|
|
<text class="f24">活动规则</text>
|
|
<image class="ml10" :src="imgUrl+'rightg.png'" style="width:22rpx;height:20rpx;" mode=""></image>
|
|
</view>
|
|
<view class="tagr flex_items flex_center mt20" style="color: #fff;z-index: 8" @click="gomyp">
|
|
<text class="f24">我的奖品</text>
|
|
<image class="ml10" :src="imgUrl+'rightg.png'" style="width:22rpx;height:20rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="gw pos" style="margin-top:100rpx;background: #FCC988;z-index: 8;">
|
|
<image :src="imgUrl+'gw.png'" class="" mode="" style="width:600rpx;height: 361rpx;"></image>
|
|
<scrap v-if="isscap" class="abs" @zhong="zhong" style="left:-94rpx;top:116rpx;"></scrap>
|
|
</view>
|
|
<view class="mt50 flex_column flex_items" style="width: 100%;">
|
|
<text class="bolder f40" style="color: #E57524;">
|
|
中奖名单
|
|
</text>
|
|
<view class="mt30 ptb30"
|
|
style="width:calc(100% - 120rpx);background: #FFE9B8;border-radius: 20rpx;border: 4rpx solid #fff;">
|
|
<div class="marquee">
|
|
<div class="marquee_box" ref="marquee_box">
|
|
<div class="marquee_list" :class="{marquee_top:animate}">
|
|
<div class="">
|
|
<div v-for="(item,index) in zjlist" :key="index"
|
|
class="mt30 flex_start flex_items pb30" style="width:100%;color: #E57524;">
|
|
<text class="f24 ml10">恭喜：{{item.user_name}}的用户获得</text>
|
|
<text class="f24">{{item.price}}积分</text>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
<view class="" style="width: 100%;height: 260rpx;margin-top: 12rpx;">
|
|
<image :src="imgUrl+'yun.png'" style="width: 100%;height: 260rpx;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import scrap from './scrap.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
zjlist: [],
|
|
animate: false,
|
|
showNum: 3, // 可见列表条数
|
|
ismask: false,
|
|
ismask2: false,
|
|
jiang: "",
|
|
istrue: false,
|
|
prizeList: [],
|
|
acid: "",
|
|
noq: false,
|
|
isscap:false,
|
|
imgUrl:""
|
|
}
|
|
},
|
|
components: {
|
|
scrap
|
|
},
|
|
onLoad(options) {
|
|
this.acid = options.id
|
|
this.imgUrl = this.api.imgUrl
|
|
this.getData()
|
|
},
|
|
created() {
|
|
// 页面显示
|
|
let that = this
|
|
setInterval(that.showMarquee, 2000)
|
|
},
|
|
mounted() {
|
|
// 可见数据高度
|
|
this.$refs.marquee_box.style.height = this.showNum * 30 + 'px'
|
|
},
|
|
methods: {
|
|
getData(id) {
|
|
uni.showLoading({
|
|
title: "加载中..."
|
|
})
|
|
this.api.getdatas({
|
|
id: this.acid
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
this.zjlist = res.data.data.win_list
|
|
this.prizeList = res.data.data.prizes
|
|
this.istrue = true
|
|
this.getover()
|
|
} else {
|
|
uni.hideLoading()
|
|
this.istrue = true
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
getover() {
|
|
let that = this
|
|
that.api.getover({
|
|
id: that.acid
|
|
}).then((res) => {
|
|
console.log(res)
|
|
if (res.data.code == 200) {
|
|
if (res.data.data.length == 0) {
|
|
uni.setStorageSync('good', "很遗憾，未中奖")
|
|
uni.setStorageSync('good2', "很遗憾，未中奖")
|
|
this.jiang = "很遗憾，未中奖"
|
|
} else {
|
|
for (let i = 0; i < that.prizeList.length; i++) {
|
|
if (that.prizeList[i].prize_id == res.data.data.prize_id) {
|
|
// uni.setStorageSync('good', Number(i + 1) + "等奖")
|
|
// uni.setStorageSync('good2', that.prizeList[i].name)
|
|
// uni.setStorageSync('pid', that.prizeList[i].prize_id)
|
|
// this.jiang = that.prizeList[i].name
|
|
// setTimeout(function() {
|
|
// uni.hideLoading()
|
|
// that.istrue = true
|
|
// }, 1800)
|
|
this.jiang = res.data.data.name
|
|
uni.setStorageSync('good', Number(i + 1) + "等奖")
|
|
setTimeout(function() {
|
|
uni.hideLoading()
|
|
that.istrue = true
|
|
}, 1800)
|
|
}
|
|
}
|
|
}
|
|
this.isscap = true
|
|
} else {
|
|
that.istrue = true
|
|
this.noq = true
|
|
uni.showToast({
|
|
title: res.data.message,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 处理数组方法
|
|
showMarquee() {
|
|
this.animate = true
|
|
this.zjlist.push(this.zjlist[0])
|
|
setTimeout(() => {
|
|
this.zjlist.shift()
|
|
this.animate = false
|
|
}, 1000)
|
|
},
|
|
closemsk() {
|
|
this.ismask = false
|
|
this.ismask2 = false
|
|
},
|
|
openmask() {
|
|
this.ismask = true
|
|
},
|
|
gomyp() {
|
|
uni.navigateTo({
|
|
url: "/pages/my/prizes?acid=" + this.acid
|
|
})
|
|
},
|
|
zhong(val) {
|
|
console.log(val)
|
|
// this.jiang = val
|
|
this.ismask2 = true
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background: #F9AF64 !important;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
background-image: url('https://pfapi.86698.cn/static/images/bg.png');
|
|
background-size: 100% 100%;
|
|
height: 1500rpx;
|
|
}
|
|
|
|
.t1 {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
|
|
.marquee {
|
|
width: 100%;
|
|
align-items: center;
|
|
color: #3a3a3a;
|
|
/* // background-color: white; */
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.marquee_title {
|
|
padding: 0 20px;
|
|
height: 21px;
|
|
font-size: 14px;
|
|
border-right: 1px solid #d8d8d8;
|
|
align-items: center;
|
|
}
|
|
|
|
.marquee_box {
|
|
display: block;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
height: 490rpx;
|
|
}
|
|
|
|
.marquee_list {
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
width: calc(100% - 150rpx);
|
|
}
|
|
|
|
.marquee_top {
|
|
transition: all 1s;
|
|
margin-top: -30px;
|
|
}
|
|
|
|
.tagr {
|
|
width: 159rpx;
|
|
height: 44rpx;
|
|
background: linear-gradient(180deg, #FFF2BA 0%, #F14A1A 100%);
|
|
border-radius: 22rpx 0rpx 0rpx 22rpx;
|
|
}
|
|
|
|
.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/zj.png');
|
|
background-size: 100% 100%;
|
|
width: 494rpx;
|
|
height: 684rpx;
|
|
}
|
|
|
|
.btnl {
|
|
background-image: url('https://pfapi.86698.cn/static/images/btn.png');
|
|
background-size: 100% 100%;
|
|
width: 218rpx;
|
|
height: 76rpx;
|
|
}
|
|
|
|
.mk {
|
|
background-image: url('https://pfapi.86698.cn/static/images/js.png');
|
|
background-size: 100% 100%;
|
|
width: 580rpx;
|
|
height: 716rpx;
|
|
}
|
|
|
|
.noq {
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: 555;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
background: none;
|
|
}
|
|
</style>
|