zhwl-miniapp/pages/my/yearCard.vue

240 lines
6.9 KiB
Vue
Raw Normal View History

2025-06-26 12:38:35 +08:00
<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>