init project
This commit is contained in:
limqhz
142
pages/myMembershipCard/index.js
Normal file
142
pages/myMembershipCard/index.js
Normal file
@@ -0,0 +1,142 @@
|
||||
// pages/myMembershipCard/index.js
|
||||
const app = getApp();
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
unfoldIndex: 1,
|
||||
cards: [],
|
||||
showCardMask: false,
|
||||
venues: {},
|
||||
isShowNewplot: false
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function(options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function() {
|
||||
this.getData();
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function() {
|
||||
return {
|
||||
title: '智慧云馆'
|
||||
}
|
||||
},
|
||||
|
||||
// 展开Cell
|
||||
unfoldCell(e) {
|
||||
let index = e.currentTarget.dataset.index;
|
||||
if (this.data.unfoldIndex == index) {
|
||||
this.setData({
|
||||
unfoldIndex: ''
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
unfoldIndex: index
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 选择默认
|
||||
selectDefault(e) {
|
||||
let cardFlg = e.currentTarget.dataset.cardflg;
|
||||
let id = e.currentTarget.dataset.id;
|
||||
if (cardFlg == 0) {
|
||||
app.$api.memberVenueUpdateCard({
|
||||
cardId: id
|
||||
}).then(res => {
|
||||
this.getData();
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取数据
|
||||
getData() {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true,
|
||||
})
|
||||
app.$api.memberVenueCard({}).then(res => {
|
||||
let list = [];
|
||||
for (let i = 0; i < res.cards.length; i++) {
|
||||
let card = res.cards[i];
|
||||
for (let j = 0; j < card.memberCards.length; j++) {
|
||||
card.memberCards[j].startTime = card.memberCards[j].startTime.split(' ')[0];
|
||||
card.memberCards[j].endTime = card.memberCards[j].endTime.split(' ')[0];
|
||||
}
|
||||
list.push(card);
|
||||
}
|
||||
this.setData({
|
||||
cards: list,
|
||||
isShowNewplot: true
|
||||
})
|
||||
}, err => {
|
||||
this.setData({
|
||||
isShowNewplot: true
|
||||
})
|
||||
});
|
||||
},
|
||||
|
||||
// 关闭
|
||||
cancelCardMask() {
|
||||
this.setData({
|
||||
showCardMask: false
|
||||
})
|
||||
},
|
||||
|
||||
// 开启会员卡提示
|
||||
showCardContent(e) {
|
||||
this.setData({
|
||||
showCardMask: true,
|
||||
venues: this.data.cards[e.currentTarget.dataset.index]
|
||||
})
|
||||
},
|
||||
|
||||
})
|
||||
6
pages/myMembershipCard/index.json
Normal file
6
pages/myMembershipCard/index.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "我的会员卡",
|
||||
"usingComponents": {
|
||||
"header": "/component/header/header"
|
||||
}
|
||||
}
|
||||
40
pages/myMembershipCard/index.wxml
Normal file
40
pages/myMembershipCard/index.wxml
Normal file
@@ -0,0 +1,40 @@
|
||||
<!--pages/myMembershipCard/index.wxml-->
|
||||
<header title="我的会员卡"></header>
|
||||
<view class='container'>
|
||||
<view class='cell' wx:for="{{cards}}" wx:key="{{index}}">
|
||||
<view class='header' data-index='{{index + 1}}' bindtap='unfoldCell'>
|
||||
<text class='default'>默认</text>
|
||||
<image class='icon' src='../../images/40@3x.png'></image>
|
||||
<image class='tip-icon' src='../../images/5@3x.png' catchtap='showCardContent' data-index='{{index}}' wx:if="{{item.cardContent}}"></image>
|
||||
<text class='title'>{{item.name}}</text>
|
||||
<image class='right-arrow' src='../../images/48@3x.png' wx:if="{{unfoldIndex == index + 1}}"></image>
|
||||
<image class='right-arrow' src='../../images/49@3x.png' wx:else></image>
|
||||
</view>
|
||||
<view class='body' wx:if="{{unfoldIndex === index + 1}}">
|
||||
<view class='card-cell' wx:for="{{item.memberCards}}" wx:for-item="data" wx:for-index="i" wx:key="{{i}}" data-id='{{data.id}}' data-cardflg='{{data.cardFlg}}' bindtap='selectDefault'>
|
||||
<image class='default-icon' src='../../images/4@3x.png' wx:if="{{data.status == 1}}" mode='aspectFit'></image>
|
||||
<view class='unClickClass' wx:elif="{{data.cardFlg == 1}}"></view>
|
||||
<view class='unClickClass' wx:elif="{{data.cardFlg == 2}}"></view>
|
||||
<image class='default-icon' src='../../images/3@3x.png' mode='aspectFit' wx:else></image>
|
||||
<text class='tab {{data.cardFlg != 2 ? "" : "isActive"}}'>{{data.cardType}}</text>
|
||||
<text class='indate'>有效期: {{data.startTime}} - {{data.endTime}}</text>
|
||||
<text class='state {{data.cardFlg != 2 ? "isActive" : ""}}'>{{data.cardFlg == 0 ? "可使用" : (data.cardFlg == 1 ? "待使用" : "已失效")}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='card-mask' catchtouchmove='unMove' wx:if="{{showCardMask}}" bindtap='cancelCardMask'>
|
||||
<view class='card-box' catchtap='unMove'>
|
||||
<view class='close' catchtap='cancelCardMask'>
|
||||
<image src='../../images/23@3x.png'></image>
|
||||
</view>
|
||||
<view class='title'>VIP会员享受专属特权</view>
|
||||
<rich-text class='info-rich' nodes="{{venues.cardContent}}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='newplot' wx:if="{{isShowNewplot && cards.length == 0}}">
|
||||
<image src='../../images/noContent.png'></image>
|
||||
<text>暂无会员卡 ~</text>
|
||||
</view>
|
||||
182
pages/myMembershipCard/index.wxss
Normal file
182
pages/myMembershipCard/index.wxss
Normal file
@@ -0,0 +1,182 @@
|
||||
/* pages/myMembershipCard/index.wxss */
|
||||
|
||||
.container {
|
||||
min-height: calc(100vh - 190rpx);
|
||||
padding: 160rpx 30rpx 30rpx 30rpx;
|
||||
}
|
||||
|
||||
.cell {
|
||||
margin-bottom: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
background: #1a191e;
|
||||
}
|
||||
|
||||
.cell .header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 90rpx;
|
||||
padding: 0 20rpx;
|
||||
border-bottom: 2rpx solid #212025;
|
||||
}
|
||||
|
||||
.cell .header .default {
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.cell .header .icon {
|
||||
width: 32rpx;
|
||||
height: 30rpx;
|
||||
margin: 0 26rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.cell .header .title {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cell .header .tip-icon {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.cell .header .right-arrow {
|
||||
width: 22rpx;
|
||||
height: 12rpx;
|
||||
}
|
||||
|
||||
.cell .body {
|
||||
animation: dropDown 0.5s linear;
|
||||
}
|
||||
|
||||
.cell .body .card-cell {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 90rpx;
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.cell .body .card-cell .default-icon {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
}
|
||||
|
||||
.cell .body .card-cell .tab {
|
||||
width: 100rpx;
|
||||
height: 26rpx;
|
||||
padding: 0 4rpx;
|
||||
margin-left: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
font-size: 20rpx;
|
||||
color: #b69d29;
|
||||
border: 2rpx solid #b69d29;
|
||||
line-height: 26rpx;
|
||||
border-radius: 13rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cell .body .card-cell .tab.isActive {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
border: 2rpx solid #737275;
|
||||
}
|
||||
|
||||
.cell .body .card-cell .indate {
|
||||
flex: 1;
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.cell .body .card-cell .state {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.cell .body .card-cell .state.isActive {
|
||||
color: #b69d29;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.card-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.card-mask .card-box {
|
||||
position: relative;
|
||||
width: 70%;
|
||||
/* min-height: 300rpx; */
|
||||
border-radius: 20rpx;
|
||||
background: #1a191e;
|
||||
font-size: 24rpx;
|
||||
line-height: 30rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.card-mask .card-box .close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.card-mask .card-box .close>image {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
|
||||
.card-mask .card-box .info-rich {
|
||||
padding: 30rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.card-mask .card-box .title {
|
||||
text-align: center;
|
||||
color: #ffda2e;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.newplot {
|
||||
position: fixed;
|
||||
top: 120rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.newplot>image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-top: -200rpx;
|
||||
}
|
||||
|
||||
.unClickClass {
|
||||
height: 28rpx;
|
||||
width: 28rpx;
|
||||
border-radius: 50%;
|
||||
/* background: #737275; */
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
Reference in New Issue
Block a user