zhangguoping
/
marketingSaaS-front_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

兴业银行活动

This commit is contained in:
zhangguoping 2024-09-11 10:38:26 +08:00
parent 56f9356a48
commit d7190a02c2
3 changed files with 274 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/xyyh/activity.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 MiB

BIN
src/assets/images/xyyh/rules_bgm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

274
src/pages/xyyh/activity.vue Normal file
View File

@ -0,0 +1,274 @@
<route lang="json5" type="page">
{
layout: 'default',
style: {
navigationStyle: 'custom',
navigationBarTitleText: '优酷热播视频',
},
}
</route>
<template>
<view class="xyyh">
<view class="rules" @click="rulesFun"></view>
<view class="btn1" @click="btnFun(1)"></view>
<view class="btn2" @click="btnFun(2)"></view>
<view class="btn3" @click="btnFun(3)"></view>
<view class="btn4" @click="btnFun(4)"></view>
<view class="btn5" @click="btnFun(5)"></view>
<view class="video1" @click="videoFun(1)"></view>
<view class="video2" @click="videoFun(2)"></view>
<view class="video3" @click="videoFun(3)"></view>
<view class="video4" @click="videoFun(4)"></view>
<view class="video5" @click="videoFun(5)"></view>
<view class="video6" @click="videoFun(6)"></view>
<view class="video7" @click="videoFun(7)"></view>
<wd-popup custom-style="width: 100%;" v-model="show" closable>
<view v-if="show">
<video class="video" :src="videoSrc" controls autoplay></video>
</view>
</wd-popup>
<view class="rulespopup">
<wd-popup
custom-style="width: 100%;top: 356rpx;overflow: hidden;"
position="bottom"
v-model="showRules"
closable
>
<view class="rules-popup">
<view class="rules-text">
<view class="rules-text-title">一、活动时间：</view>
<view class="rules-text-txt">2024年9月10日-2024年9月30日</view>
<view class="rules-text-title">二、使用方法：</view>
<view class="rules-text-txt">
1、兑换后进入订单详情，复制“兑换网址”到浏览器，打开兑换网址，复制兑换码及验证码，输入需要充值的手机号点击“立即兑换”即可。
2、充值成功后，可同时获得优酷月卡和奈雪的茶10元代金券，并实时自动充值到用户账户（中国大陆地区手机号）查看优酷月卡，至“优酷视频客户端”“会员”查看优酷会员状态及有效期，查看奈雪的茶10元代金券，至“奈雪的茶小程序”，凭充值商品的手机号码登录“奈雪点单”小程序-我的-奈雪券，查看券码信息。
3、兑换码自领取后7天有效，请在有效期内兑换，过期作废不予补发。
4、每一个兑换码都只可使用一次，请妥善保管自己的兑换码。
</view>
<view class="rules-text-title">三、优酷产品介绍：</view>
<view class="rules-text-txt">
1、优酷充值成功后若已属于会员期内的用户将自动叠加会员期限。若充值的账号未注册优酷会员，充值成功系统将自动注册开通，使用手机快捷登录即可。
2、优酷为虚拟产品，一经售出暂不支持退款、退货及更改。
3、优酷有效期(具体有效期以显示为准)，请在有效期内兑换使用，逾期作废，不退不换充值前请确认充值信息是否正确，一旦提交无法取消，如输错为他人账号仍会充值成功，请确保兑换账号正确，以免因账号错误造成损失。
4、优酷不记名，不挂失，不转帐，不可兑换现金，不开具发票，不可与其他优惠同享。
5、优酷中包含的优酷会员可在手机、电脑、平板上使用，不支持电视端，不支持投屏
6、本产品仅适用于中国大陆地区用户，暂不支持开通中国港澳台、海外地区服务。
</view>
<view class="rules-text-title">四、奈雪的茶10元代金券产品介绍：</view>
<view class="rules-text-txt">
1、活动期间，奈雪的茶10元代金券，同一用户仅在第一次充值时赠送。
2、活动期间，奈雪的茶限量4000份，先到先得，兑完即止。
3、用户消费时，打开“奈雪点单”小程序进入点餐页面，选择心仪的商品，进入支付页面时，点击奈雪券在线抵扣相应的金额，若饮品券金额等于或小于消费金额，用户无需额外支付现金，若消费金额大于饮品券抵扣金额，超额部分需用户现金补差价支付。
4、奈雪的茶代金券有有效期(具体有效期以显示为准)，请在有效期内兑换使用，逾期作废。
5、奈雪的茶代金券适用商品：在有效期内，购买任意商品享受优惠券面值优惠。
6、适用门店：奈雪中国地区内地门店((不含东阳横店香港街、东阳横店梦幻谷、机场、高铁、港澳台及海外地区门区门店）。
7、适用场景：仅限奈雪线下门店出示会员码或"奈雪的茶"小程序自取/外卖使用，不适用于第三方外送服务。
8、优惠券仅限单笔订单当次使用，不与其他优惠活动共享，不可兑换现金，不设找零，不可拆分使用，优惠券抵扣金额不予积分，不适用运费。
</view>
<view class="rules-text-title">五、售后服务：</view>
<view class="rules-text-txt-last">
本产品由成都蓝色兄弟网络科技有限公司提供，如兑换及使用过程中有任何疑问，均可致电客服热线:400-118-1216(服务时间09:00-18:00)进行咨询。
</view>
</view>
</view>
</wd-popup>
</view>
</view>
</template>
<script>
import video1 from '@/assets/video/xyyh/video1.mp4'
import video2 from '@/assets/video/xyyh/video2.mp4'
import video3 from '@/assets/video/xyyh/video3.mp4'
import video4 from '@/assets/video/xyyh/video4.mp4'
import video5 from '@/assets/video/xyyh/video5.mp4'
import video6 from '@/assets/video/xyyh/video6.mp4'
import video7 from '@/assets/video/xyyh/video7.mp4'
export default {
name: 'Home',
data() {
return {
show: false,
showRules: false,
videoSrcList: [video1, video2, video3, video4, video5, video6, video7],
videoSrc: video1,
btnUrl: 'https://mall.cib.com.cn/unified-mall-mobile-update/#/details?jumpFrom=1',
}
},
onLoad(options) {},
created() {},
mounted() {},
onUnload() {
uni.hideLoading()
},
methods: {
rulesFun() {
this.showRules = true
},
btnFun(type) {
window.location.href = `${this.btnUrl}&skuId=${type}`
},
videoFun(type) {
this.show = true
this.videoSrc = this.videoSrcList[type - 1]
},
},
}
</script>
<style lang="scss">
.xyyh {
position: relative;
height: 2880rpx;
background: url('@/assets/images/xyyh/activity.png') no-repeat left top;
background-size: 100% 100%;
.rules {
position: absolute;
top: 128rpx;
right: 0;
z-index: 1;
width: 34rpx;
height: 164rpx;
}
.rules-text {
height: calc(100vh - 296px);
padding: 22rpx 24rpx 36rpx;
overflow-y: auto;
font-family:
PingFang SC,
Source Han Sans;
font-size: 24rpx;
line-height: 48rpx;
color: rgba(226, 114, 12, 1);
background: linear-gradient(180deg, #fdfbf6 0%, #fdf2e1 100%);
border-radius: 28rpx;
}
.rules-text-title {
font-family:
PingFang SC,
Source Han Sans;
}
.rules-text-txt-last {
margin-bottom: 50rpx;
}
.video {
width: 100%;
}
.btn1 {
position: absolute;
top: 862rpx;
left: 134rpx;
z-index: 1;
width: 482rpx;
height: 78rpx;
}
.btn2 {
position: absolute;
top: 1072rpx;
left: 256rpx;
z-index: 1;
width: 100rpx;
height: 36rpx;
}
.btn3 {
position: absolute;
top: 1072rpx;
right: 60rpx;
z-index: 1;
width: 100rpx;
height: 36rpx;
}
.btn4 {
position: absolute;
top: 1228rpx;
left: 256rpx;
z-index: 1;
width: 100rpx;
height: 36rpx;
}
.btn5 {
position: absolute;
top: 1228rpx;
right: 60rpx;
z-index: 1;
width: 100rpx;
height: 36rpx;
}
.video1 {
position: absolute;
top: 1456rpx;
left: 48rpx;
z-index: 1;
width: 320rpx;
height: 222rpx;
}
.video2 {
position: absolute;
top: 1456rpx;
right: 48rpx;
z-index: 1;
width: 320rpx;
height: 222rpx;
}
.video3 {
position: absolute;
top: 1730rpx;
left: 48rpx;
z-index: 1;
width: 320rpx;
height: 222rpx;
}
.video4 {
position: absolute;
top: 1730rpx;
right: 48rpx;
z-index: 1;
width: 320rpx;
height: 222rpx;
}
.video5 {
position: absolute;
top: 2010rpx;
left: 48rpx;
z-index: 1;
width: 320rpx;
height: 222rpx;
}
.video6 {
position: absolute;
top: 2010rpx;
right: 48rpx;
z-index: 1;
width: 320rpx;
height: 222rpx;
}
.video7 {
position: absolute;
top: 2440rpx;
right: 48rpx;
z-index: 1;
width: 654rpx;
height: 378rpx;
}
}
.xyyh .rules-popup {
height: 2982rpx;
padding: 114rpx 24rpx 24rpx;
margin: 24rpx 24rpx 24rpx;
background: url('@/assets/images/xyyh/rules_bgm.png') no-repeat left top;
background-size: 100% 100%;
}
.xyyh .rulespopup {
padding-top: 346rpx;
}
:deep(.xyyh .wd-overlay) {
background: var(--wot-overlay-bg, rgba(0, 0, 0, 0.85));
}
:deep(.xyyh .rulespopup .wd-overlay) {
background: var(--wot-overlay-bg, rgba(0, 0, 0, 0));
}
.xyyh .wd-overlay {
background: var(--wot-overlay-bg, rgba(0, 0, 0, 0.85));
}
</style>