<template>
|
<view>
|
<view :class="join?'page1':'page'">
|
<image class="logo1" :src="bankCardStyle.logo"></image>
|
<view class="douyu-txt page-title">刷<text>{{info.bankCardName}}</text></view>
|
<view class="douyu-txt page-title">最高可得{{info.totalDiscount/100}}元礼包</view>
|
<view class="detils-title">刷{{info.bankCardName}}，累积笔数获礼包 <navigator class="detail"
|
url="/pages/pay/shuaKa/introduce">详情
|
</navigator>
|
</view>
|
<view v-if="join" class="step-box">
|
<view class="step">
|
<view class="step-title">本活动剩余<text>{{diffDay}}</text>天</view>
|
<scroll-view :scroll-into-view="`step-item-${current-1}`" class="step-item-box"
|
scroll-with-animation scroll-x>
|
<view :id="`step-item-${i}`" class="jmy-flex step-item" v-for="(item,i) in milepost" :key="i">
|
<view @click="stepClick(i)" class="jmy-text-center">
|
<image class="step-icon"
|
:src="item.lackBrushCount>0?'/static/shuaka/pay-by-card-step.png':'/static/shuaka/pay-by-card-step-act.png'">
|
</image>
|
<view :class="['step-item-title',{'step-item-title-act':current==i}]">
|
{{item.nodeName}}
|
</view>
|
</view>
|
<view v-if="item.lackBrushCount==0&&item.curt&&i<milepost.length-1"
|
class="step-line step-line-cur"></view>
|
<view v-else-if="item.lackBrushCount>0&&i<milepost.length-1"
|
class="step-line step-line-next">
|
</view>
|
<view v-else-if="item.lackBrushCount==0&&i<milepost.length-1" class="step-line"></view>
|
</view>
|
</scroll-view>
|
</view>
|
<swiper @change="bindchange" next-margin="62rpx" style="height: calc(100vh - 600rpx);" :current="current">
|
<swiper-item v-for="(post,i) in milepost" :key="i">
|
<scroll-view scroll-y="true" style="height: calc(100% - 40rpx);">
|
<view class="coupon-box">
|
<view class="jmy-flex coupon-box-title">
|
<image src="/static/shuaka/coupon-title-left.png"></image>
|
<view v-if="post.lackBrushCount==0">你已获得以下优惠券</view>
|
<view v-else>
|
<view v-if="post.nodeNumOfMin-post.lackBrushCount">
|
已刷{{post.nodeNumOfMin-post.lackBrushCount}}笔</view>
|
<view>再刷<text style="color: #D31F28;">{{post.lackBrushCount}}</text>笔可解锁以下优惠券
|
</view>
|
</view>
|
|
<image src="/static/shuaka/coupon-title-right.png"></image>
|
</view>
|
<view v-for="(item,i) in post.lackBrushCount==0?post.coupIdsMap:post.coupIds" :key="i"
|
:class="['coupon',post.lackBrushCount==0?'coupon-get':'coupon-lock' ]">
|
<view class="num">
|
<view>
|
<text class="unit">￥</text>
|
<text class="money">{{parseFloat(item.discount/100)}}</text>
|
</view>
|
<view class="condition">
|
满{{parseFloat((item.threshold_value||item.thresholdValue)/100)}}元使用
|
</view>
|
</view>
|
<view class="info">
|
<view class="title">{{item.name}}</view>
|
<view v-if="item.validityDay" class="validity">
|
有效期：领取后{{item.validityDay}}天</view>
|
<view v-else class="validity">
|
有效期至：{{$u.timeFormat(item.out_time||item.validityEndTime, 'yyyy-mm-dd hh:MM')}}
|
</view>
|
</view>
|
<image v-if="post.lackBrushCount!=0" class="lock-icon"
|
src="/static/shuaka/pay-by-card-lock.png" mode=""></image>
|
</view>
|
</view>
|
</scroll-view>
|
</swiper-item>
|
</swiper>
|
|
<!-- <view @click="checkNotice" :class="['notice',{'check':notice}]">通知我参与活动进展</view> -->
|
</view>
|
<image v-else @click="joinActivity" class="btn" src="/static/shuaka/pay-by-card-btn.png"></image>
|
</view>
|
<u-popup :show="popup" @close="popup=false;getDto()" mode="center" bgColor="transparent">
|
<view class="popup">
|
<view class="popup-title">恭喜获得</view>
|
<view class="jmy-flex popup-sub-title">
|
<image src="/static/shuaka/coupon-title-left.png"></image>
|
<view>已获<text>{{couponIds.length}}</text>张优惠券</view>
|
<image src="/static/shuaka/coupon-title-right.png"></image>
|
</view>
|
<scroll-view class="scroll-view" scroll-y>
|
<view v-for="(item,i) in couponIds" :key="i" class="coupon1">
|
<view class="num">
|
<view>
|
<text class="unit">￥</text>
|
<text class="money">{{parseFloat(item.discount/100)}}</text>
|
</view>
|
<view class="condition">满{{parseFloat(item.threshold_value/100)}}元使用</view>
|
</view>
|
<view class="info">
|
<view class="title">{{item.name}}</view>
|
<view v-if="item.validityDay" class="validity">
|
有效期：领取后{{item.validityDay}}天</view>
|
<view v-else class="validity">
|
有效期至：{{$u.timeFormat(item.out_time||item.validityEndTime, 'yyyy-mm-dd hh:MM')}}</view>
|
</view>
|
</view>
|
</scroll-view>
|
<navigator class="popup-btn jmy-flex" url="/pages/myCard/myCard">查看卡包</navigator>
|
</view>
|
<image @click="popup=false;getDto()" class="popup-close" src="/static/shuaka/popup-close.png"></image>
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import {
|
bankCardStyle,
|
} from '@/common/api/index'
|
import {
|
activityInfo,
|
signActivity,
|
myBrushDetail
|
} from '@/common/api/shuaka'
|
export default {
|
data() {
|
return {
|
brushCount: 0,
|
bankCardStyle: {
|
color: '',
|
logo: ''
|
}, //银行卡风格
|
current: 0,
|
join: false,
|
notice: true,
|
popup: false,
|
couponList: [],
|
couponIds: [],
|
info: {
|
bankCardName: '',
|
totalDiscount: 0,
|
milepost: []
|
},
|
milepost: [],
|
diffDay: 0,
|
};
|
},
|
onLoad() {
|
//获取银行卡风格配置
|
bankCardStyle().then(res => {
|
try {
|
res.logo = this.$utils.getGoodsImg(res.logo, '2')
|
} catch (e) {
|
//TODO handle the exception
|
res.logo = ''
|
}
|
this.bankCardStyle = res
|
// console.log(this.bankCardStyle);
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
/* 活动详情 */
|
activityInfo().then(res => {
|
this.info = res
|
})
|
this.getDto()
|
},
|
methods: {
|
getDto() {
|
uni.showLoading()
|
/* 参与信息 */
|
myBrushDetail().then(res => {
|
uni.hideLoading()
|
if (res) {
|
this.diffDay = this.$utils.getDiffDay(res.taskStartTime, res.taskEndTime)
|
this.join = true
|
this.brushCount = Number(res.brushCount)
|
res.milePost.map((item, i) => {
|
if (item.lackBrushCount == 0) {
|
this.current = i
|
}
|
})
|
res.milePost[this.current].curt = true
|
if (res.milePost[this.current].lackBrushCount == 0) {
|
this.couponList = res.milePost[this.current].coupIdsMap
|
} else {
|
this.couponList = res.milePost[this.current].coupIds
|
}
|
|
this.milepost = res.milePost
|
}
|
}).catch(() => {
|
uni.hideLoading()
|
})
|
},
|
stepClick(i) {
|
const cur = this.milepost[i]
|
if (cur.lackBrushCount == 0) {
|
this.couponList = cur.coupIdsMap
|
} else {
|
this.couponList = cur.coupIds
|
}
|
this.current = i
|
},
|
bindchange({
|
detail: {
|
current
|
}
|
}) {
|
this.current = current
|
},
|
joinActivity() {
|
signActivity().then(res => {
|
if (res.isOk) {
|
if (this.couponIds) {
|
this.couponIds = res.couponIds
|
this.popup = true
|
} else {
|
this.join = true
|
uni.showToast({
|
icon: 'success',
|
title: '参与成功'
|
})
|
}
|
} else {
|
uni.showToast({
|
icon: 'none',
|
title: res.reason
|
})
|
}
|
})
|
},
|
checkNotice() {
|
this.notice = !this.notice
|
},
|
closePopup() {
|
this.popup = !this.popup
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@font-face {
|
font-family: "DOUYU";
|
src: url("https://zhkj.jinmingyuan.com:8443/sftpxcx/jrstq/font/DOUYU.ttf");
|
}
|
|
.jmy-flex {
|
display: flex;
|
align-items: center;
|
}
|
|
.jmy-flex-nowrap {
|
flex-wrap: nowrap;
|
}
|
|
.jmy-text-center {
|
text-align: center;
|
}
|
|
|
.douyu-txt {
|
font-family: "DOUYU";
|
}
|
|
.page {
|
min-height: 100vh;
|
background-image: url('~@/static/shuaka/pay-by-card-bg.png');
|
background-position: center top;
|
background-color: #FDEDDE;
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
}
|
|
.page1 {
|
min-height: 100vh;
|
background-image: url('~@/static/shuaka/pay-by-card-bg-top.png');
|
background-position: center top;
|
background-color: #F8F9F9;
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
}
|
|
.logo1 {
|
box-sizing: border-box;
|
padding: 10rpx;
|
width: 90rpx;
|
height: 90rpx;
|
background-color: #ffffff;
|
border-radius: 45rpx;
|
margin: 30rpx 30rpx 0;
|
}
|
|
.page-title {
|
font-size: 60rpx;
|
font-weight: 400;
|
color: #6670E7;
|
text-align: center;
|
line-height: 1.3;
|
}
|
|
.page-title text {
|
color: #FB5B4A;
|
}
|
|
.detils-title {
|
width: 590rpx;
|
height: 65rpx;
|
line-height: 65rpx;
|
margin: 20rpx auto;
|
background-image: url('~@/static/shuaka/pay-by-card-dto-ttitle-bg.png');
|
background-size: cover;
|
color: #6670E7;
|
font-size: 25rpx;
|
font-weight: 400;
|
text-align: center;
|
}
|
|
.detail {
|
display: inline-block;
|
font-size: 28rpx;
|
color: #FB5B4A;
|
margin-left: 30rpx;
|
}
|
|
.detail::after {
|
content: '';
|
display: inline-block;
|
width: 10rpx;
|
height: 10rpx;
|
border-top: 1rpx solid #FB5B4A;
|
border-right: 1rpx solid #FB5B4A;
|
transform: rotate(45deg);
|
position: relative;
|
bottom: 4rpx;
|
}
|
|
.demo {
|
display: block;
|
width: 683rpx;
|
height: 708rpx;
|
margin: auto;
|
}
|
|
.btn {
|
position: fixed;
|
bottom: 30rpx;
|
bottom: calc(24rpx + constant(safe-area-inset-bottom));
|
/* 兼容 iOS < 11.2 */
|
bottom: calc(24rpx + env(safe-area-inset-bottom));
|
/* 兼容 iOS >= 11.2 */
|
left: 0;
|
width: 703rpx;
|
height: 137rpx;
|
}
|
|
.step-box {
|
flex: 1;
|
background-color: #F8F9F9;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.step {
|
background-color: #ffffff;
|
}
|
|
.step-title {
|
font-size: 28rpx;
|
color: #7B4324;
|
font-weight: 500;
|
text-align: center;
|
padding: 20rpx;
|
}
|
|
.step-title text {
|
color: #D31F28;
|
font-weight: 700;
|
}
|
|
.step-icon {
|
width: 70rpx;
|
height: 70rpx;
|
}
|
|
.step-item-title {
|
font-size: 22rpx;
|
font-weight: 400;
|
color: #7B4324;
|
}
|
|
.step-item-title-act {
|
color: #FB5B4A;
|
}
|
|
.step-line {
|
background-image: linear-gradient(to right, #FFA91E 0, #FFA91E 100%);
|
width: 117rpx;
|
height: 4rpx;
|
border-radius: 2rpx;
|
position: relative;
|
top: -20rpx;
|
}
|
|
.step-line-cur {
|
background-image: linear-gradient(to right, #FFA91E 0, #FFA91E 50%, #EFEFEF 51%, #EFEFEF 100%);
|
}
|
|
.step-line-next {
|
background-image: linear-gradient(to right, #EFEFEF 0, #EFEFEF 100%);
|
}
|
|
.step-item-box {
|
background-color: #ffffff;
|
white-space: nowrap;
|
}
|
|
.step-item {
|
display: inline-flex;
|
padding-bottom: 20rpx;
|
}
|
|
.step-item-box .step-item:first-child {
|
padding-left: 40rpx;
|
}
|
|
.step-item-box .step-item:last-child {
|
padding-right: 40rpx;
|
}
|
|
.coupon-box {
|
width: 652rpx;
|
margin: 32rpx;
|
border-radius: 10rpx;
|
border: 1rpx solid rgba(255, 177, 166, 1);
|
background: linear-gradient(180.4deg, rgba(255, 255, 255, 1) 0%, rgba(255, 253, 249, 1) 100%);
|
}
|
|
.coupon-box-title {
|
justify-content: center;
|
text-align: center;
|
margin: 20rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333;
|
}
|
|
.coupon-box-title image {
|
width: 132rpx;
|
height: 21rpx;
|
}
|
|
.coupon-box-title text {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333;
|
margin: 0 10rpx;
|
}
|
|
.coupon {
|
width: 598rpx;
|
height: 180rpx;
|
background-size: cover;
|
margin: 20rpx auto;
|
display: flex;
|
align-items: center;
|
}
|
|
.lock-icon {
|
width: 58rpx;
|
height: 58rpx;
|
margin-left: 15rpx;
|
}
|
|
.coupon-get {
|
background-image: url('~@/static/shuaka/pay-by-card-coupon-get.png');
|
}
|
|
.coupon-lock {
|
background-image: url('~@/static/shuaka/pay-by-card-coupon-lock.png');
|
}
|
|
.num {
|
color: #D31F28;
|
width: 150rpx;
|
text-align: center;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
}
|
|
.coupon-lock .num {
|
color: #CBCBCB;
|
}
|
|
.unit {
|
font-size: 36rpx;
|
font-weight: 900;
|
}
|
|
.money {
|
line-height: 1;
|
font-size: 64rpx;
|
font-weight: 900;
|
}
|
|
.condition {
|
font-size: 20rpx;
|
font-weight: 400;
|
}
|
|
.info {
|
width: 360rpx;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
padding: 0 10rpx;
|
}
|
|
.title {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
/* white-space:nowrap; */
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
|
.coupon-lock .title {
|
opacity: 0.33;
|
}
|
|
.validity {
|
margin-top: 15rpx;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #999;
|
}
|
|
.coupon-lock .validity {
|
opacity: 0.33;
|
}
|
|
.notice {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24rpx;
|
line-height: 1;
|
font-weight: 400;
|
color: #333;
|
margin-bottom: 40rpx;
|
}
|
|
.notice::before {
|
box-sizing: border-box;
|
display: inline-block;
|
content: '';
|
margin-right: 10rpx;
|
width: 28rpx;
|
height: 28rpx;
|
border: 1px solid #999;
|
border-radius: 4rpx;
|
transition: all 0.3s;
|
}
|
|
.notice.check::before {
|
border: none;
|
background-image: url('~@/static/shuaka/notice-check.png');
|
background-size: cover;
|
transition: all 0.3s;
|
}
|
|
|
.popup {
|
box-sizing: border-box;
|
width: 632rpx;
|
height: 935rpx;
|
background-image: url('~@/static/shuaka/pay-by-card-modal-bg.png');
|
background-size: cover;
|
padding: 210rpx 40rpx 20rpx;
|
}
|
|
.popup-close {
|
display: block;
|
margin: 40rpx auto 0;
|
width: 64rpx;
|
height: 64rpx;
|
}
|
|
.popup-title {
|
font-size: 42rpx;
|
font-weight: 700;
|
color: #F2281F;
|
text-align: center;
|
line-height: 1;
|
margin-top: 20rpx;
|
}
|
|
.popup-sub-title {
|
justify-content: center;
|
margin: 20rpx 0 10rpx;
|
color: #B36C44;
|
font-size: 28rpx;
|
}
|
|
.popup-sub-title view {
|
margin: 0 10rpx;
|
}
|
|
.popup-sub-title text {
|
color: #D31F28;
|
}
|
|
.popup-sub-title image {
|
width: 132rpx;
|
height: 21rpx;
|
}
|
|
.popup-btn {
|
margin: 20rpx auto 0;
|
width: 478rpx;
|
height: 88rpx;
|
border-radius: 44rpx;
|
background-color: rgba(238, 68, 82, 1);
|
font-size: 36rpx;
|
font-weight: 500;
|
color: #fff;
|
justify-content: center;
|
}
|
|
.scroll-view {
|
height: 435rpx;
|
}
|
|
.coupon1 {
|
width: 508rpx;
|
height: 145rpx;
|
background-image: url('~@/static/shuaka/pay-by-card-coupon.png');
|
background-size: cover;
|
margin: 20rpx auto;
|
display: flex;
|
align-items: center;
|
}
|
|
.coupon1 .num {
|
height: 110rpx;
|
border-right: 1rpx dashed #FA969A;
|
}
|
|
.coupon1 .unit {
|
font-size: 24rpx;
|
}
|
|
.coupon1 .money {
|
font-size: 50rpx;
|
}
|
|
.coupon1 .condition {
|
font-size: 20rpx;
|
}
|
|
.coupon1 .title {
|
text-align: left;
|
font-size: 24rpx;
|
}
|
|
.coupon1 .validity {
|
font-size: 20rpx;
|
}
|
</style>
|
