Skip to content

严立 / mini-shimao

Go to a project
Commit 35dfa2ad by zqm
Options

MM - 个人中心我的预约

parent f1d53533
Inline Side-by-side
Showing with 242 additions and 154 deletions
pages/mine/card/card.js
......@@ -4,57 +4,129 @@ const App = getApp()
Page({
data: {
imageBase: App.globalData.appImageBase,
passListType: 1, // 0为单张卡 1为多张卡
passListType: 1, // 0为单张卡 1为多张卡
privateStatus: true,
swiperCurrent: 0,
passList: [
{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
privateName: '文*海',
phone: '17633564488',
privatePhone: '176****4455',
idNum: '211222009900990090',
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
}
]
shopConfig: App.globalData.shopId,
imageResourcesBase: App.globalData.appResourcesBase,
passList: []
},
onLoad: function (options) {
// if (options.type) options.type = Number(options.type)
// this.setData({
// passListType: options.type
// })
this.setView()
// this.setView()
App.login({
timeout: 0,
success: (result) => {
this.getCardList()
},
})
},
// 跳转订单详情
onOrderDetail: function (event) {
let orderId = event.currentTarget.dataset.id
wx.navigateTo({
url: '/pages/pay/order-detail/order-detail?id=' + orderId,
})
},
// 多二维码 复制券码
setClipboard(e) {
const code = e.currentTarget.dataset.code
wx.setClipboardData({
data: code,
success(res) {
wx.showToast({
title: '复制成功',
})
}
})
},
//获取卡数据
getCardList() {
let that = this
wx.showLoading({
title: '加载中',
})
App.wxRequest({
url: '/api/v1/volume/getVolumeList',
data: {
status: "", //0已过期1待使用2已使用(""全部)
pageNo: 1,
pageSize: -1
},
success: function (res) {
wx.hideLoading({
success: (res) => {},
})
let list = res.data.map(item => {
let shopFilter = that.data.shopConfig.filter(k => {
return k.name.toLowerCase() == item.officeName.toLowerCase()
})
if (item.name.indexOf('年卡') != -1) {
item.cardType = 1
} else if (item.name.indexOf('月卡') != -1) {
item.cardType = 2
} else {
// 次票
item.cardType = 3
}
item.logo = shopFilter.length > 0 ? shopFilter[0].logo : ''
// 名字隐私
if (item.personName.length > 2) {
item.privateName = item.personName.substr(0, 1) + '*' + item.personName.substr(item.personName.length - 1)
} else {
item.privateName = item.personName.substr(0, 1) + '*'
}
// 手机号隐私
item.privatePhone = item.cellphone.substr(0, 3) + '****' + item.cellphone.substr(item.cellphone.length - 4)
// 身份证隐私
item.privateIdNum = item.identityCard.substr(0, 6) + '****' + item.identityCard.substr(item.identityCard.length - 4)
item.privateStatus = true
return item
})
let filterList = list.filter(item => {
return item.officeName == '儿童营地'
})
filterList.length = 1
that.setData({
passList: filterList
})
console.log(that.data.passList);
}
})
},
setView: function () {
switch (this.data.passListType) {
case 0:
this.setData({
passList: [
{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
privateName: '文*海',
phone: '17633564488',
privatePhone: '176****4455',
idNum: '211222009900990090',
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
}
]
passList: [{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
privateName: '文*海',
phone: '17633564488',
privatePhone: '176****4455',
idNum: '211222009900990090',
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
}]
})
break
case 1:
this.setData({
passList: [
{
passList: [{
id: 0,
title: '精灵鸟理想国年卡',
name: '文碧海',
......@@ -65,7 +137,8 @@ Page({
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
useTime: '2019.09.30 - 2020.12.30',
cardType: 1
},
{
id: 0,
......@@ -78,7 +151,8 @@ Page({
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
useTime: '2019.09.30 - 2020.12.30',
cardType: 2
},
{
id: 0,
......@@ -91,7 +165,8 @@ Page({
privateIdNum: '211222****0090',
codeNum: '2719 7092 0925',
codeImg: '',
useTime: '2019.09.30 - 2020.12.30'
useTime: '2019.09.30 - 2020.12.30',
cardType: 1
}
]
})
......@@ -99,18 +174,23 @@ Page({
}
},
// 滑动swiper
eventSwiperChange: function(e) {
eventSwiperChange: function (e) {
let swiperCurrent = e.detail.current
this.setData({
swiperCurrent
})
},
//点击信息是否加密
onShowPrivate: function () {
let privateStatus = !this.data.privateStatus
onShowPrivate: function (event) {
let index = event.currentTarget.dataset.index
let passList = `passList[${index}].privateStatus`
this.setData({
privateStatus
[passList]: !this.data.passList[index].privateStatus
})
}
})
\ No newline at end of file
pages/mine/card/card.wxml
......@@ -2,42 +2,48 @@
<view class="container con-s">
<!-- 单张卡 -->
<view class="card-wrapper" wx:if="{{passListType === 0}}">
<view class="card-wrapper" wx:if="{{passList.length == 1}}">
<view class="card-header">
<image wx:if="{{passList[0].cardType==1}}" class="card-bg year-bg"
src="{{imageResourcesBase +'pay/order-input/card-1.png'}}"></image>
<image wx:elif="{{passList[0].cardType==2}}" class="card-bg year-bg"
src="{{imageResourcesBase +'pay/order-input/card-2.png'}}"></image>
<image wx:else class="card-bg month-bg" src="{{imageResourcesBase +'pay/order-input/card-3.png'}}">
</image>
<view class="use-notice row align-c">
<text>使用须知</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
<view class="card-header-title">
<text>{{passList[0].title}}</text>
<text>{{passList[0].name}}</text>
</view>
<view class="card-header-info">
<view class="row align-c">
<view class="row align-c">
<view class="card-header-info-left row con-b">
<text>姓</text>
<text>名</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{passList[0].privateName}}</text>
<text wx:else>{{passList[0].name}}</text>
<text wx:if="{{passList[0].privateStatus}}">{{passList[0].privateName}}</text>
<text wx:else>{{passList[0].personName}}</text>
</view>
<view class="card-info-visible">
<image wx:if="{{privateStatus}}"></image>
<image wx:else></image>
<view class="card-info-visible" data-index="0" bindtap="onShowPrivate">
<image src="{{imageBase+'icon/eyes_close.png'}}" wx:if="{{passList[0].privateStatus}}"></image>
<image src="{{imageBase+'icon/eyes_open.png'}}" wx:else></image>
</view>
</view>
<view class="row align-c">
</view>
<view class="row align-c">
<view class="card-header-info-left row con-b">
<text>手</text>
<text>机</text>
<text>号</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{passList[0].privatePhone}}</text>
<text wx:else>{{passList[0].phone}}</text>
<text wx:if="{{passList[0].privateStatus}}">{{passList[0].privatePhone}}</text>
<text wx:else>{{passList[0].cellphone}}</text>
</view>
</view>
<view class="row align-c">
</view>
<view class="row align-c">
<view class="card-header-info-left row con-b align-c">
<text>身</text>
<text>份</text>
......@@ -45,70 +51,80 @@
<text>号</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{passList[0].privateIdNmu}}</text>
<text wx:else>{{passList[0].privateIdNmu}}</text>
<text wx:if="{{passList[0].privateStatus}}">{{passList[0].privateIdNmu}}</text>
<text wx:else>{{passList[0].identityCard}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="card-main col align-c">
<view class="code-num-wrapper row align-c con-c">
<text class="code-num-title">券码：</text>
<text class="code-num">{{passList[0].codeNum}}</text>
<text class="code-copy">复制</text>
<text class="code-num">{{passList[0].serialNumber}}</text>
<text class="code-copy" bindtap="setClipboard" data-code="{{passList[0].serialNumber}}">复制</text>
</view>
<view class="QRcode">
<image src="{{passList[0].codeImg}}"></image>
<image src="{{'data:image/jpg;base64,'+passList[0].qrcode}}"></image>
</view>
<view class="code-use-time">
<text>{{passList[0].useTime}}</text>
</view>
<view class="look-order row align-c con-c">
<view class="look-order row align-c con-c" bindtap="onOrderDetail" data-id="{{passList[0].orderId}}">
<text>查看订单</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
</view>
</view>
<!-- 多张卡 -->
<swiper class="card-list" wx:else indicator-dots indicator-color="#fff" indicator-active-color="#E57C99" next-margin="44rpx" bindchange="eventSwiperChange">
<swiper class="card-list" wx:else indicator-dots indicator-color="#fff" indicator-active-color="#E57C99"
next-margin="44rpx" bindchange="eventSwiperChange">
<block wx:for="{{passList}}" wx:key="id">
<swiper-item>
<view class="card-wrapper {{index === swiperCurrent ? 'item-right' : ''}} {{swiperCurrent === passList.length-1 ? 'item-center' : ''}}">
<view
class="card-wrapper {{index === swiperCurrent ? 'item-right' : ''}} {{swiperCurrent === passList.length-1 ? 'item-center' : ''}}">
<view class="card-header">
<image wx:if="{{item.cardType==1}}" class="card-bg year-bg"
src="{{imageResourcesBase +'pay/order-input/card-1.png'}}"></image>
<image wx:elif="{{item.cardType==2}}" class="card-bg year-bg"
src="{{imageResourcesBase +'pay/order-input/card-2.png'}}"></image>
<image wx:else class="card-bg month-bg"
src="{{imageResourcesBase +'pay/order-input/card-3.png'}}">
</image>
<view class="use-notice row align-c">
<text>使用须知</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
<view class="card-header-title">
<text>{{item.title}}</text>
<text>{{item.name}}</text>
</view>
<view class="card-header-info">
<view class="row align-c">
<view class="row align-c">
<view class="card-header-info-left row con-b">
<text>姓</text>
<text>名</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{item.privateName}}</text>
<text wx:else>{{item.name}}</text>
<text wx:if="{{item.privateStatus}}">{{item.privateName}}</text>
<text wx:else>{{item.personName}}</text>
</view>
<view class="card-info-visible" bindtap="onShowPrivate">
<view class="card-info-visible" data-index="{{index}}" bindtap="onShowPrivate">
<image wx:if="{{true}}"></image>
<image wx:else></image>
</view>
</view>
<view class="row align-c">
</view>
<view class="row align-c">
<view class="card-header-info-left row con-b">
<text>手</text>
<text>机</text>
<text>号</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{item.privatePhone}}</text>
<text wx:else>{{item.phone}}</text>
<text wx:if="{{item.privateStatus}}">{{item.privatePhone}}</text>
<text wx:else>{{item.cellphone}}</text>
</view>
</view>
<view class="row align-c">
</view>
<view class="row align-c">
<view class="card-header-info-left row con-b align-c">
<text>身</text>
<text>份</text>
......@@ -116,25 +132,25 @@
<text>号</text>
</view>
<view class="card-header-info-right">
<text wx:if="{{privateStatus}}">{{item.privateIdNum}}</text>
<text wx:else>{{item.idNum}}</text>
<text wx:if="{{item.privateStatus}}">{{item.privateIdNum}}</text>
<text wx:else>{{item.identityCard}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="card-main col align-c">
<view class="code-num-wrapper row align-c con-c">
<text class="code-num-title">券码：</text>
<text class="code-num">{{item.codeNum}}</text>
<text class="code-copy">复制</text>
<text class="code-num">{{item.serialNumber}}</text>
<text class="code-copy" bindtap="setClipboard" data-code="{{item.serialNumber}}">复制</text>
</view>
<view class="QRcode">
<image src="{{item.codeImg}}"></image>
<image src="{{'data:image/jpg;base64,'+item.qrcode}}"></image>
</view>
<view class="code-use-time">
<text>{{item.useTime}}</text>
</view>
<view class="look-order row align-c con-c">
<view class="look-order row align-c con-c" bindtap="onOrderDetail" data-id="{{item.orderId}}">
<text>查看订单</text>
<image src="{{imageBase + 'icon/arrow-r-2.png'}}"></image>
</view>
......
pages/mine/card/card.wxss
......@@ -3,7 +3,12 @@
padding-top: 232rpx;
background: linear-gradient(180deg, #FFFCFC 0%, #F6DADA 100%);
}
.card-bg {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.card-list {
width: 750rpx;
height: 1062rpx;
......@@ -24,8 +29,9 @@
height: 326rpx;
padding: 48rpx 32rpx;
color: #fff;
background: linear-gradient(137deg, #BEDAF9 0%, #7BB2F0 100%);
/* background: linear-gradient(137deg, #BEDAF9 0%, #7BB2F0 100%); */
border-radius: 4rpx;
z-index: 0;
}
.use-notice {
position: absolute;
......@@ -56,10 +62,10 @@
line-height: 52rpx;
}
.card-info-visible {
width: 36rpx;
height: 20rpx;
width: 40rpx;
height: 40rpx;
margin-left: 18rpx;
background-color: #ccc;
/* background-color: #ccc; */
}
.card-main {
......
pages/mine/home/home.js
......@@ -31,6 +31,7 @@ Page({
type: 0, //判断是否是认证的了
approveList: ['园区门票优惠', '餐厅价格优惠', 'SPA服务优惠', '免费观看电影', '无须预约入园', '尽享多重特权'],
activityList: [],
activityListBackup: [],
isRegister: false, // 是否注册,
// 右上角消息
......@@ -380,38 +381,23 @@ Page({
App.wxRequest({
url: '/api/v1/activity/getMyActivityList',
data: {
activeState: '0,1',
pageSize: 10,
pageNo: 1
activeState: '1',
pageSize: 2,
pageNo: 1,
type: 1
},
success: function (res) {
let list = res.data.list
let tmpArr = []
list.forEach(item => {
let state = item.activeState * 1
let type = 0
switch (state) {
case 0:
type = 1;
break;
case 1:
type = 0;
break;
case 2:
type = 2;
break;
}
let obj = {
time: item.enrollDate, //activeDate + ' ' + item.activeTime,
type: type,
content: item.address,
title: item.name,
enrollId: item.enrollId,
}
tmpArr.push(obj)
})
let sliceList = []
let activityListBackup = JSON.parse(JSON.stringify(list))
if (list.length > 2) {
sliceList = list.slice(0, 2)
} else {
sliceList = list
}
that.setData({
activityList: tmpArr
activityList: sliceList,
activityListBackup
})
}
})
......@@ -489,8 +475,6 @@ Page({
let showMoreOrder = !this.data.showMoreOrder
let orderList = `myOrder.artOrder.orderList`
console.log(JSON.parse(JSON.stringify(this.data.orderListBackup)));
if (showMoreOrder) {
// 展开
this.setData({
......@@ -512,10 +496,27 @@ Page({
},
// 我的预约 展开 收起
onShowMoreActivity: function () {
let showMoreActivity = !this.data.showMoreActivity
if (showMoreActivity) {
//展开
this.setData({
activityList: JSON.parse(JSON.stringify(this.data.activityListBackup))
})
} else {
// 收起
let list = JSON.parse(JSON.stringify(this.data.activityListBackup))
let sliceList = list.slice(0, 2)
this.setData({
activityList: sliceList
})
}
this.setData({
showMoreActivity
showMoreActivity,
})
}
})
\ No newline at end of file
pages/mine/home/home.wxml
......@@ -255,45 +255,30 @@
</view>
</view>
<!-- 预约卡片 -->
<view class="appintment" >
<view class="appintment">
<!-- 主题活动 -->
<view class="appointment-wrapper">
<view class="appointment-time">8月15日-7月15日 10:00-12:00</view>
<view class="appointment-wrapper" wx:for="{{activityList}}" wx:key="*this">
<view class="appointment-time">{{item.activeTime}}</view>
<view class="appointment-activity-content row">
<view class="appointment-activity-img">
<image src=""></image>
<image src="{{item.cover}}"></image>
</view>
<view class="appointment-activity-info col con-a">
<view class="appointment-activity-title">
<text>日落观光游船体验活动</text>
<text>{{item.name}}</text>
</view>
<view class="appointment-activity-num">
<text>报名人数 3人</text>
<text>报名人数 {{item.number}}人</text>
</view>
</view>
</view>
</view>
<view class="appointment-wrapper">
<view class="appointment-time">
<text>8月15日-7月15日 10:00-12:00</text>
</view>
<view class="appointment-activity-content row">
<view class="appointment-activity-img">
<image src=""></image>
</view>
<view class="appointment-activity-info col con-a">
<view class="appointment-activity-title">
<text>日落观光游船体验活动之船行碧波共赏美景</text>
</view>
<view class="appointment-activity-num">
<text>报名人数 3人</text>
</view>
</view>
</view>
</view>
<!-- 夜间入园预约 -->
<view class="appointment-wrapper">
<!-- <view class="appointment-wrapper">
<view class="appointment-time">
<text>7月15日 10:00-12:00</text>
</view>
......@@ -307,12 +292,12 @@
</view>
</view>
<view class="border-right"></view>
<!-- <view class="appointment-subscribe" data-item="{{item}}" bindtap="gohotelAccommodation">预约凭证
</view> -->
<view class="appointment-subscribe" data-item="{{item}}" bindtap="gohotelAccommodation">预约凭证
</view>
</view>
</view>
</view> -->
<!-- 看房预约 -->
<view class="appointment-wrapper">
<!-- <view class="appointment-wrapper">
<view class="appointment-time">
<text>7月15日 10:00-12:00</text>
</view>
......@@ -326,10 +311,11 @@
<view class="appointment-subscribe" data-item="{{item}}" bindtap="gohotelAccommodation">预约凭证
</view>
</view>
</view>
</view> -->
</view>
<!-- more -->
<view class="more row align-c con-c" bindtap="onShowMoreActivity" >
<view class="more row align-c con-c" bindtap="onShowMoreActivity" wx:if="{{activityList.length>1}}">
<text wx:if="{{!showMoreActivity}}">展开更多</text>
<text wx:else>收起</text>
<image wx:if="{{!showMoreActivity}}" src="{{imageBase + 'icon/arrow-b-2.png'}}"></image>
......
pages/mine/home/home.wxss
......@@ -506,11 +506,7 @@
height: 50rpx;
}
.pass-logo-wrapper image {
/* width: 64rpx;
height: 50rpx; */
/* background-color: #ccc; */
}
.pass-logo-wrapper text {
height: 50rpx;
......@@ -628,6 +624,7 @@
width: 140rpx;
height: 136rpx;
background-color: #ccc;
border-radius: 5px;
}
.appointment-activity-info {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment