|
|
@@ -0,0 +1,326 @@
|
|
|
+<template>
|
|
|
+ <view class="container_box">
|
|
|
+ <view class="header-nav" :style="{height: `calc(88rpx + ${statusBarHeight}px)`,paddingTop: statusBarHeight + 'px'}">
|
|
|
+ </view>
|
|
|
+ <view class="conbox" :style="{paddingTop: `calc(88rpx + ${statusBarHeight}px)`}">
|
|
|
+ <image class="activity_yh_right" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_yh_right.png" mode="widthFix"></image>
|
|
|
+ <image class="activity_yh_left" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_yh_left.png" mode="widthFix"></image>
|
|
|
+ <image class="activity_title" v-show="status==0" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_title.png" mode="widthFix"></image>
|
|
|
+ <view class="activity_title2" v-if="status==1">
|
|
|
+ 福袋已经失效了~
|
|
|
+ </view>
|
|
|
+ <template v-if="status==2">
|
|
|
+ <view class="activity_title3">
|
|
|
+ 您已经领取过本次福袋啦~
|
|
|
+ </view>
|
|
|
+ <view class="activity_title4">
|
|
|
+ 赶紧前往芳华未来APP，兑换好物吧
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="ybg_box">
|
|
|
+ <view class="ybg"></view>
|
|
|
+ <image class="activity_lucky_bag" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_lucky_bag.png" mode="heightFix"></image>
|
|
|
+ <image class="activity_ysx" v-show="status==1" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_ysx.png" mode="widthFix"></image>
|
|
|
+ <image class="activity_ylq" v-show="status==2" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_ylq.png" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="activity_btn animation" v-if="status==0" @click="handleReceive">
|
|
|
+ <view class="btn">领取福袋</view>
|
|
|
+ <image src="https://cdn.his.cdwjyyh.com/minapp/course/activity_btn.png" mode="heightFix"></image>
|
|
|
+ </view>
|
|
|
+ <view class="activity_btn_down x-c" @click="navTo">
|
|
|
+ <text>如何下载芳华未来APP</text>
|
|
|
+ <image src="https://cdn.his.cdwjyyh.com/minapp/course/activity_more.png" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <image class="footer_img" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_xy.png" mode="widthFix"></image>
|
|
|
+ <u-popup :show="show" mode="center" bgColor="transparent" :closeOnClickOverlay="false" overlayOpacity="0.7">
|
|
|
+ <view class="popup-box">
|
|
|
+ <image class="activity_jb" src="https://cdn.his.cdwjyyh.com/minapp/course/activity_jb.png" mode="heightFix"></image>
|
|
|
+ <text class="popup-tit">恭喜您获得</text>
|
|
|
+ <view class="con">
|
|
|
+ <view class="numbox color_FB2205"><text class="num">+100</text>芳华币</view>
|
|
|
+ <view>您的芳华币总额：<text class="color_FB2205" style="font-weight: 600;">+100</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="popup-tips">赶紧去芳华未来APP，兑换好物吧~</view>
|
|
|
+ <view class="popbtn x-c" @click="show=false">我知道啦</view>
|
|
|
+ </view>
|
|
|
+ <view class="popup-tips" style="color: #FFFFFF;margin-top: 60rpx;">兑换提示：请前往芳华未来APP兑换</view>
|
|
|
+ <view class="popup-tips" style="color: #FFC05C;text-decoration-line: underline;" @click="navTo">如何下载芳华未来APP？</view>
|
|
|
+ </u-popup>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
|
+ show: false,
|
|
|
+ status:2,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack();
|
|
|
+ },
|
|
|
+ handleReceive() {
|
|
|
+ this.show = true
|
|
|
+ },
|
|
|
+ navTo() {
|
|
|
+ // this.show = false
|
|
|
+ // uni.navigateTo({
|
|
|
+ // url: '/pages_course/appDownload'
|
|
|
+ // })
|
|
|
+ uni.showModal({
|
|
|
+ title: '领取失败',
|
|
|
+ content: '福袋余额不足，请联系客服',
|
|
|
+ showCancel: false,
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ console.log('用户点击确定');
|
|
|
+ } else if (res.cancel) {
|
|
|
+ console.log('用户点击取消');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .color_FB2205 {
|
|
|
+ color: #FB2205;
|
|
|
+ }
|
|
|
+ .activity_title2,.activity_title3,.activity_title4{
|
|
|
+ margin-top: 8vh;
|
|
|
+ margin-bottom: 56rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 48rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ filter: drop-shadow(0px 4rpx 8rpx rgba(174,0,25,0.8));
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ background: linear-gradient(270deg, #FFF5EE 0%, #FFE2B3 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ text-fill-color: transparent;
|
|
|
+ display: inline-block
|
|
|
+ }
|
|
|
+ .activity_title3 {
|
|
|
+ font-size: 48rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ margin-top: 6vh;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ .activity_title4 {
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ }
|
|
|
+ .container_box {
|
|
|
+ min-height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient( 180deg, #FD2F3C 0%, #FFE7CE 100%);
|
|
|
+ }
|
|
|
+ .activity_yh_right {
|
|
|
+ width: 100rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 25%;
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+ .activity_yh_left {
|
|
|
+ width: 114rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .header-nav {
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background-image: url('https://cdn.his.cdwjyyh.com/minapp/course/activity_title.png');
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ z-index: 9999;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .conbox {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ z-index: 3;
|
|
|
+ .activity_title {
|
|
|
+ width: 632rpx;
|
|
|
+ height: auto;
|
|
|
+ margin-top: 28rpx;
|
|
|
+ }
|
|
|
+ .ybg_box {
|
|
|
+ width: 566rpx;
|
|
|
+ height: 580rpx;
|
|
|
+ position: relative;
|
|
|
+ .activity_ysx,.activity_ylq {
|
|
|
+ position: absolute;
|
|
|
+ left: 242rpx;
|
|
|
+ top: 215rpx;
|
|
|
+ width: 300rpx;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .ybg {
|
|
|
+ width: 616rpx;
|
|
|
+ height: 616rpx;
|
|
|
+
|
|
|
+ background: #FFE7CE;
|
|
|
+ border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|
|
+
|
|
|
+ filter: blur(94.30000305175781px);
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ height: 580rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .activity_btn_down {
|
|
|
+ width: 416rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ margin-top: 94rpx;
|
|
|
+ background: rgba(0,0,0,0.3);
|
|
|
+ border-radius: 56rpx 56rpx 56rpx 56rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ image {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .activity_btn {
|
|
|
+ height: 137rpx;
|
|
|
+ width: 502rpx;
|
|
|
+ margin-top: 48rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 44rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ image {
|
|
|
+ height: 137rpx;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 12rpx;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup-box {
|
|
|
+ width: 518rpx;
|
|
|
+ min-height: 568rpx;
|
|
|
+ background: linear-gradient( 180deg, #FFE7AC 0%, #FFFFFF 100%);
|
|
|
+ border-radius: 56rpx 56rpx 56rpx 56rpx;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ box-shadow: 0 0 30px -6px rgba(255, 231, 206, 1);
|
|
|
+ .activity_jb {
|
|
|
+ height: 184rpx;
|
|
|
+ margin-top: -130rpx;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .popup-tit {
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+ .con {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ width: 438rpx;
|
|
|
+ min-height: 170rpx;
|
|
|
+ padding: 16rpx 0;
|
|
|
+ background: #FFE8AE;
|
|
|
+ border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .numbox {
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ font-size: 68rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+ .popbtn {
|
|
|
+ width: 358rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: linear-gradient( 90deg, #F82D31 0%, #FD6C05 100%);
|
|
|
+ box-shadow: 0rpx 8rpx 0rpx 0rpx #FEBC92;
|
|
|
+ border-radius: 64rpx 64rpx 64rpx 64rpx;
|
|
|
+ margin-top: 32rpx;
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup-tips {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #666666;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .footer_img {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .animation {
|
|
|
+ will-change: transform;
|
|
|
+ animation: scaleAnimation 1s ease infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes scaleAnimation {
|
|
|
+ 0% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ 50% {
|
|
|
+ transform: scale(1.05);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
