zhangjing/cardtest
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[修改账变]

Browse Source
This commit is contained in:
zhangjing
2021-06-24 14:15:58 +08:00
parent c8def77dc3
commit b555234d49
13 changed files with 204 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
pages/frozen/frozen.js
View File

@@ -10,10 +10,10 @@ Page({
* 页面的初始数据
*/
data: {
current : 0, //轮播标
type : '', //类型
frozenData : [], //数组列表
blockeds : '', //待发放金额
current : 0, //轮播标
type : '', //类型
frozenData : [], //数组列表
blockeds : '', //待发放金额
},
/**
@@ -33,9 +33,17 @@ Page({
*/
frozenInfo() {
wx.$api.user.ungrants(this.data.type).then(res=>{
console.log(res)
this.setData({
frozenData: res.data
})
})
},
// 轮播滑动
monitorCurrent(e) {
this.setData({
current: e.detail.current
})
}
})

258
pages/frozen/frozen.wxml
View File

@@ -28,205 +28,87 @@
</view> -->
<view class="grantSwiper">
<swiper class="banner-swiper" bindchange="monitorCurrent" current="{{current}}">
<swiper-item bindtap="userUrl">
<view class="banner-height">
<view class="grantTop">
<image class="grantTop-img" src="/static/img/frozen_back.png" mode="scaleToFill"></image>
<view class="grantTop-text">
<image src="/static/img/frozen_identity.png"></image>
<view class="grantTop-price">
<text>待发放(额度)</text>
0
<view wx:if="{{frozenData.length > 0}}">
<view class="grantSwiper">
<swiper class="banner-swiper" bindchange="monitorCurrent" current="{{current}}">
<swiper-item bindtap="userUrl" wx:for="{{frozenData}}" wx:key="frozenData">
<view class="banner-height">
<view class="grantTop">
<image class="grantTop-img" src="/static/img/frozen_back.png" mode="scaleToFill"></image>
<view class="grantTop-text">
<image src="/static/img/frozen_identity_00.png"></image>
<view class="grantTop-price">
<text>待发放(额度)</text>
<view class="grantTop-price-tips">￥</view>{{item.ungrant}}
</view>
</view>
<view class="grantTop-tips">
<view class="grantTop-time">发放周期 {{item.cycle}}</view>
<view class="grantTop-number">共{{item.num}}期</view>
</view>
</view>
<view class="grantTop-tips">
<view class="grantTop-time">发放周期 2021.06.22 ~ 2022.06.22</view>
<view class="grantTop-number">共0期</view>
<view class="grantTitle">
<view class="nowrap grantTitle-name">{{item.source.remark}}</view>
<view class="grantTitle-tel">{{item.mobile}}</view>
</view>
</view>
<view class="grantTitle">
<view class="grantTitle-name">权益名称</view>
<view class="grantTitle-tel">13836142496</view>
</view>
</view>
<view class="grantIssue">
<view class="grantIssue-title">
<view class="grantIssue-title-name">
<image src="/static/img/frozen_icon.png"></image><text>账户余额分期</text>
</view>
<view class="grantIssue-title-tips">共分<text>24期</text>发放，一共<text>1254</text>积分。到账即可使用</view>
</view>
<view class="grantIssue-list">
<view class="grantIssue-label">
<image class="grantIssue-label-img" src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top">第<text>1</text>期</view>
<view class="grantIssue-left-number">共<text>24</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top"><text>120</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：2021-06-22</view>
</view>
<view class="grantIssue-label-right">
待发放
</view>
<view class="grantIssue">
<view class="grantIssue-title">
<view class="grantIssue-title-name">
<image src="/static/img/frozen_icon.png"></image><text>消费红包分期发放</text>
</view>
<image class="grantIssue-label-tips" src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
<view class="grantIssue-title-tips">应发余额<text>￥{{item.variable}}</text>，发放期数<text> {{item.num}}
</text>期，每期发放<text>￥{{item.avg}}/期</text></view>
</view>
<view class="grantIssue-label">
<image class="grantIssue-label-img" src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top">第<text>2</text>期</view>
<view class="grantIssue-left-number">共<text>24</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top"><text>120</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：2021-06-22</view>
</view>
<view class="grantIssue-label-right">
待发放
<view class="grantIssue-list">
<view class="grantIssue-label" wx:for="{{item.items}}" wx:for-item="listItem" wx:key="items">
<image class="grantIssue-label-img {{listItem.status == 0 ? 'active' : ''}}"
src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top {{listItem.status == 0 ? 'active' : ''}}">
第<text>{{listItem.num}}</text>期</view>
<view class="grantIssue-left-number {{listItem.status == 0 ? 'active' : ''}}">
共<text>{{item.items.length}}</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top {{listItem.status == 0 ? 'active' : ''}}">
<text>{{listItem.variable}}</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：{{listItem.start_at}}</view>
</view>
<view class="grantIssue-label-right {{listItem.status == 0 ? 'active' : ''}}">
{{listItem.status_text}}
</view>
</view>
<image class="grantIssue-label-tips {{listItem.status == 0 ? 'active' : ''}}"
src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
</view>
<image class="grantIssue-label-tips" src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
</view>
<view class="grantIssue-label">
<image class="grantIssue-label-img" src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top">第<text>3</text>期</view>
<view class="grantIssue-left-number">共<text>24</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top"><text>120</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：2021-06-22</view>
</view>
<view class="grantIssue-label-right">
待发放
</view>
</view>
<image class="grantIssue-label-tips" src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
</view>
<view class="grantIssue-label">
<image class="grantIssue-label-img" src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top">第<text>4</text>期</view>
<view class="grantIssue-left-number">共<text>24</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top"><text>120</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：2021-06-22</view>
</view>
<view class="grantIssue-label-right">
待发放
</view>
</view>
<image class="grantIssue-label-tips" src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
</view>
<view class="grantIssue-label">
<image class="grantIssue-label-img" src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top">第<text>5</text>期</view>
<view class="grantIssue-left-number">共<text>24</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top"><text>120</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：2021-06-22</view>
</view>
<view class="grantIssue-label-right">
待发放
</view>
</view>
<image class="grantIssue-label-tips" src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
</view>
<view class="grantIssue-label">
<image class="grantIssue-label-img" src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top">第<text>6</text>期</view>
<view class="grantIssue-left-number">共<text>24</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top"><text>120</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：2021-06-22</view>
</view>
<view class="grantIssue-label-right">
待发放
</view>
</view>
<image class="grantIssue-label-tips" src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
</view>
<view class="grantIssue-label">
<image class="grantIssue-label-img" src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top">第<text>7</text>期</view>
<view class="grantIssue-left-number">共<text>24</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top"><text>120</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：2021-06-22</view>
</view>
<view class="grantIssue-label-right">
待发放
</view>
</view>
<image class="grantIssue-label-tips" src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
</view>
<view class="grantIssue-label">
<image class="grantIssue-label-img" src="/static/img/frozen_img.png" mode="scaleToFill"></image>
<view class="grantIssue-label-cont">
<view class="grantIssue-label-left">
<view class="grantIssue-left-top">第<text>8</text>期</view>
<view class="grantIssue-left-number">共<text>24</text>期</view>
</view>
<view class="grantIssue-label-center">
<view class="grantIssue-center-top"><text>120</text>( 发放额度 )</view>
<view class="grantIssue-center-time">发放时间：2021-06-22</view>
</view>
<view class="grantIssue-label-right">
待发放
</view>
</view>
<image class="grantIssue-label-tips" src="/static/img/frozen_btn.png" mode="scaleToFill">
</image>
</view>
</view>
</view>
</swiper-item>
<swiper-item bindtap="userUrl">
2
</swiper-item>
</swiper>
</view>
<view class="frozenArrow">
<view class="frozenArrow-left">
<image src="/static/icon/frozen_arrow.png"></image>
向右滑动
</swiper-item>
</swiper>
</view>
<view class="frozenArrow-right">
<image src="/static/icon/frozen_arrow.png"></image>
向左滑动
<view class="frozenArrow">
<view class="frozenArrow-left" wx:if="{{current != 0}}">
<image src="/static/icon/frozen_arrow.png"></image>
返回上一个权益
</view>
<view class="frozenArrow-right" wx:if="{{frozenData.length > 1}}">
<image src="/static/icon/frozen_arrow.png"></image>
查看下一个权益
</view>
</view>
<!-- 自定义轮播图进度点 -->
<view class="dots">
<block wx:for="{{frozenData}}" wx:key="frozenData">
<view class='{{index == current ? "active":""}}'></view>
</block>
</view>
</view>
<!-- 自定义轮播图进度点 -->
<view class="dots">
<!-- wx:for="{{adverts}}" wx:key="cardBanner" -->
<block>
<view class='{{index == swiperCurrent ? "active":""}}'></view>
</block>
<!-- 暂无内容 -->
<view class="pack-center pages-hint" wx:else>
<view>抱歉，目前暂无内容~</view>
</view>

65
pages/frozen/frozen.wxss
View File

@@ -102,18 +102,29 @@
/* 最新样式 2021-06-22 */
page {
page,
.pack-center {
background-image: linear-gradient(to bottom, #24315d, #24315d);
}
.pack-center {
color: #fff;
}
.banner-swiper {
height: 100vh;
overflow: hidden;
}
.banner-swiper swiper-item {
padding: 0 20rpx;
box-sizing: border-box;
}
.grantSwiper {
width: 100%;
height: 100vh;
padding: 0 80rpx;
padding: 0 40rpx;
box-sizing: border-box;
}
@@ -167,13 +178,18 @@ page {
color: #fff;
}
.grantTop-price-tips {
display: inline-block;
font-size: 40rpx;
}
.grantTop-tips {
bottom: 0;
font-size: 26rpx;
display: flex;
line-height: 70rpx;
height: 70rpx;
padding: 0 40rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
@@ -197,11 +213,11 @@ page {
box-sizing: border-box;
height: 90rpx;
line-height: 90rpx;
font-size: 32rpx;
font-size: 30rpx;
}
.grantTitle-name {
padding-left: 30rpx;
padding-left: 20rpx;
font-weight: 600;
background-image:-webkit-linear-gradient(left,#fbdebe,#e5ad7a);
-webkit-background-clip:text;
@@ -237,14 +253,14 @@ page {
}
.grantIssue-title-name image {
width: 44rpx;
height: 44rpx;
width: 42rpx;
height: 42rpx;
margin-right: 20rpx;
}
.grantIssue-title-name text {
font-weight: 600;
font-size: 34rpx;
font-size: 32rpx;
background-image:-webkit-linear-gradient(left,#fbdebe,#e5ad7a);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
@@ -290,6 +306,16 @@ page {
left: 0;
}
.grantIssue-label-img.active,
.grantIssue-label-tips.active {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.grantIssue-label-cont {
position: absolute;
width: 100%;
@@ -312,6 +338,17 @@ page {
font-size: 26rpx;
}
.grantIssue-left-top.active,
.grantIssue-center-top.active,
.grantIssue-label-right.active {
color: gray;
}
.grantIssue-left-number.active {
background: -webkit-linear-gradient(left,#e2e2e2,#e2e2e2);
color: gray;
}
.grantIssue-left-top text {
font-size: 34rpx;
font-weight: 600;
@@ -331,16 +368,16 @@ page {
}
.grantIssue-label-right {
width: 90rpx;
width: 80rpx;
font-weight: 600;
text-align: center;
font-size: 30rpx;
font-size: 26rpx;
color: #3d2a26;
line-height: 140rpx;
}
.grantIssue-label-center {
width: calc(100% - 250rpx);
width: calc(100% - 240rpx);
margin: 20rpx 20rpx 0 20rpx;
}
@@ -391,13 +428,13 @@ page {
}
.frozenArrow-left {
left: 10rpx;
left: 8rpx;
-webkit-animation: bounce-left 1s linear infinite;
animation: bounce-left 1s linear infinite;
}
.frozenArrow-right {
right: 10rpx;
right: 8rpx;
-webkit-animation: bounce-right 1s linear infinite;
animation: bounce-right 1s linear infinite;
}
@@ -443,5 +480,5 @@ page {
.dots .active {
width: 24rpx;
border-radius: 40rpx;
background-color: #f46851;
background-color: #b13509;
}