first commit
This commit is contained in:
240
pages/my/yearCard.vue
Normal file
240
pages/my/yearCard.vue
Normal file
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<view class="uni-container" v-if="cardData">
|
||||
<u-navbar :autoBack="true" :placeholder="true" :bgColor="bgColor">
|
||||
<view slot='center' style="font-size: 36rpx; font-weight: bold;">旅游年卡</view>
|
||||
</u-navbar>
|
||||
<view class="card-box">
|
||||
<view class="card-item">
|
||||
<!-- <image class="img" :src="$utils.setImgUrl(cardData.orderItemList[0].image11)" mode=""></image> -->
|
||||
<image class="img" src="../../static/image/mine/card_detail.png" mode=""></image>
|
||||
<view class="title">{{cardData.orderItemList[0].ticketOrderDetailList[0].ticketName}}</view>
|
||||
<view class="time">剩余天数 {{getResidueDays(cardData.orderItemList[0].ticketOrderDetailList[0].availableEndTime)}} 天</view>
|
||||
<view class="use">
|
||||
<!-- <view class="btn" @click="showQrCode">立即使用</view> -->
|
||||
<view></view>
|
||||
<view class="code">{{cardData.orderItemList[0].ticketOrderDetailList[0].verificationCode}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form2">
|
||||
<view class="row" @click="goDetail(1)">
|
||||
<view class="label">
|
||||
<image class="icon" src="../../static/image/mine/ywjl.png" mode=""></image>
|
||||
游玩记录
|
||||
</view>
|
||||
<uni-icons class="icon" type="right"></uni-icons>
|
||||
</view>
|
||||
<view class="row" @click="goDetail(2)">
|
||||
<view class="label">
|
||||
<image class="icon" src="../../static/image/mine/qyxq.png" mode=""></image>
|
||||
权益详情
|
||||
</view>
|
||||
<uni-icons class="icon" type="right"></uni-icons>
|
||||
</view>
|
||||
<view class="row" @click="goDetail(3)">
|
||||
<view class="label">
|
||||
<image class="icon" src="../../static/image/mine/hyxx.png" mode=""></image>
|
||||
会员信息
|
||||
</view>
|
||||
<uni-icons class="icon" type="right"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="codePopup" background-color="transparent" :is-mask-click="false">
|
||||
<view class="code_popup">
|
||||
<u-icon name="close" color="#999" size="34rpx" @click="closeCodePopup"></u-icon>
|
||||
<view class="title">扫码使用</view>
|
||||
<view class="qrcode" v-if="qrCodeInfo" @click="showCode">
|
||||
<uqrcode ref="uqrcode" canvas-id="qrcode" :value="qrCodeInfo" :size="size" :options="{ margin: 4, backgroundColor: '#fff' }" class="qrcode_box" @complete="complete"></uqrcode>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import _config from '../../common/http/config.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
qrCodeInfo: null,
|
||||
id: '',
|
||||
bgColor: '#FFF',
|
||||
cardData: null,
|
||||
size: 0
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options.id;
|
||||
this.size = uni.upx2px(300);
|
||||
this.orderNkDetail()
|
||||
},
|
||||
methods: {
|
||||
async orderNkDetail() {
|
||||
let info = await this.$http.orderNkDetail(this.id)
|
||||
this.cardData = info.data;
|
||||
},
|
||||
showCode () {
|
||||
this.$refs.uqrcode && this.$refs.uqrcode.toTempFilePath({
|
||||
success: res => {
|
||||
uni.previewImage({
|
||||
urls: [res.tempFilePath],
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
setQrCode () {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.uqrcode && this.$refs.uqrcode.make();
|
||||
})
|
||||
},
|
||||
complete(e) {
|
||||
if (e.success) {
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ mask: true, title: '二维码生成失败', icon: 'none' });
|
||||
}
|
||||
},
|
||||
async showQrCode () {
|
||||
this.qrCodeInfo = this.cardData.orderItemList[0].ticketOrderDetailList[0].verificationCode;
|
||||
this.$refs.codePopup.open('center')
|
||||
this.setQrCode();
|
||||
},
|
||||
async closeCodePopup () {
|
||||
this.$refs.codePopup.close()
|
||||
this.qrCodeInfo = null;
|
||||
},
|
||||
goDetail(type) {
|
||||
let pageUrl = ''
|
||||
if (type === 1) {
|
||||
pageUrl = '/pages/my/record'
|
||||
} else if (type === 2) {
|
||||
pageUrl = '/pages/my/equityDetails'
|
||||
} else if (type === 3) {
|
||||
pageUrl = '/pages/my/member'
|
||||
}
|
||||
uni.navigateTo({ url: pageUrl + `?id=${this.id}` })
|
||||
},
|
||||
getResidueDays(time) {
|
||||
let endTime = this.$moment(time).format('YYYY/MM/DD')
|
||||
let nowTime = this.$moment().format('YYYY/MM/DD');
|
||||
const days = this.$moment(endTime).diff(this.$moment(nowTime), 'days');
|
||||
return days;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.code_popup{
|
||||
position: relative;
|
||||
width: 638rpx; height: 638rpx; background: #fff; border-radius: 20rpx; box-sizing: border-box; background: linear-gradient( 180deg, #E8F8F4 0%, #fff 100%);
|
||||
/deep/.u-icon {
|
||||
position: absolute;
|
||||
top: 32rpx;
|
||||
right: 32rpx;
|
||||
}
|
||||
.title{ padding-top: 63rpx; font-weight: 500; font-size: 40rpx; color: #000000; text-align: center; }
|
||||
.qrcode{
|
||||
width: 300rpx; height: 300rpx; margin: 80rpx auto 0;
|
||||
.qrcode_box{ width: 100%; height: 100%; }
|
||||
}
|
||||
}
|
||||
.uni-container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #FBFBFB;
|
||||
.card-box {
|
||||
padding: 32rpx 0 0;
|
||||
margin: 0 32rpx;
|
||||
border-radius: 10rpx;
|
||||
.card-item {
|
||||
position: relative;
|
||||
.img {
|
||||
width: 686rpx;
|
||||
height: 364rpx;
|
||||
border-radius: 10rpx;
|
||||
vertical-align: top;
|
||||
}
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
left: 40rpx;
|
||||
font-weight: bold;
|
||||
font-size: 42rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.time {
|
||||
position: absolute;
|
||||
top: 111rpx;
|
||||
left: 40rpx;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
.use {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 40rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
.btn {
|
||||
width: 181rpx;
|
||||
height: 68rpx;
|
||||
background: #FDCE88;
|
||||
border-radius: 34rpx;
|
||||
line-height: 68rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #552F11;
|
||||
}
|
||||
.code {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form2 {
|
||||
background: #FFFFFF;
|
||||
border-radius: 10rpx;
|
||||
padding: 0 32rpx;
|
||||
margin: 32rpx 32rpx 0;
|
||||
.row {
|
||||
height: 95rpx;
|
||||
line-height: 95rpx;
|
||||
border-bottom: 1rpx solid rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
.label {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
.icon {
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
/deep/.uniui-right {
|
||||
font-size: 34rpx !important;
|
||||
color: #999999 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user