240 lines
6.9 KiB
Vue
240 lines
6.9 KiB
Vue
|
<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>
|