first commit
This commit is contained in:
160
pages/my/annualCard.vue
Normal file
160
pages/my/annualCard.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<u-navbar :autoBack="true" :bgColor="bgColor">
|
||||
<view slot='center' style="font-size: 36rpx; font-weight: bold;">旅游年卡</view>
|
||||
</u-navbar>
|
||||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
|
||||
<view class="list_waper" v-if="list.length">
|
||||
<view class="list" v-for="(i, index) in list" :key="index" @click="goDetail(i)">
|
||||
<!-- <image class="img" :src="$utils.setImgUrl(i.orderItemList[0].image11)" mode=""></image> -->
|
||||
<image class="img" src="../../static/image/mine/card.png" mode=""></image>
|
||||
<image class="icon" v-if="i.orderItemList[0].ticketOrderDetailList[0].activationStatus == 1" src="../../static/image/mine/activate.png" mode=""></image>
|
||||
<view class="list_cont">
|
||||
<view class="name">{{i.orderItemList[0].ticketOrderDetailList[0].ticketName}}</view>
|
||||
<view class="time" v-if="i.orderItemList[0].ticketOrderDetailList[0].activationStatus == 1">剩余天数 {{getResidueDays(i.orderItemList[0].ticketOrderDetailList[0].availableEndTime)}} 天</view>
|
||||
<view class="time" v-if="i.orderItemList[0].ticketOrderDetailList[0].activationStatus == 2">已禁用</view>
|
||||
<view class="btn" @click.stop="toOrder(i)" v-if="i.orderItemList[0].ticketOrderDetailList[0].activationStatus == 0">立即激活</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="noData" v-if="!list.length">
|
||||
<image class="img" src="../../static/image/mine/noData.png" mode=""></image>
|
||||
<view class="label">暂无年卡～</view>
|
||||
</view> -->
|
||||
</mescroll-body>
|
||||
<!-- 确认激活弹框 -->
|
||||
<u-popup :show="showActivate" bgColor="transparent" mode="center">
|
||||
<view class="popup_waper">
|
||||
<image src="https://common/refundPopup.png" mode=""></image>
|
||||
<div class="refund_box">
|
||||
<view class="title">温馨提示</view>
|
||||
<view class="content">确认激活{{activateName}}吗？</view>
|
||||
<view class="btns">
|
||||
<view @click="closePopup">取消</view>
|
||||
<view @click="submitPopup">确认</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
data () {
|
||||
return {
|
||||
paddingTop: 0,
|
||||
bgColor: '#FFF',
|
||||
list: [],
|
||||
showActivate: false,
|
||||
activateName: '',
|
||||
activateId: ''
|
||||
}
|
||||
},
|
||||
onLoad () {
|
||||
this.paddingTop = this.$paddingTop;
|
||||
},
|
||||
onShow () {
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
},
|
||||
methods: {
|
||||
goDetail(item) {
|
||||
if (item.orderItemList[0].ticketOrderDetailList[0].activationStatus == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/my/yearCard?id=${item.id}`
|
||||
})
|
||||
} else {
|
||||
uni.showToast({ mask: true, title: item.orderItemList[0].ticketOrderDetailList[0].activationStatus == 0 ? '请激活后使用' : '该年卡已被禁用', icon: 'none' })
|
||||
}
|
||||
},
|
||||
async upCallback (page) {
|
||||
let obj = { pageNum: page.num, pageSize: page.size, classifyList: '4' };
|
||||
let info = await this.$http.orderNklist(obj);
|
||||
if(page.num == 1) this.list = [];
|
||||
this.list = this.list.concat(info.rows);
|
||||
this.mescroll.endBySize(info.rows.length, info.total);
|
||||
},
|
||||
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;
|
||||
},
|
||||
toOrder (i) {
|
||||
this.activateName = i.orderItemList[0].ticketOrderDetailList[0].ticketName;
|
||||
this.activateId = i.orderItemList[0].ticketOrderDetailList[0].id;
|
||||
this.showActivate = true;
|
||||
},
|
||||
closePopup() {
|
||||
this.showActivate = false;
|
||||
},
|
||||
async submitPopup() {
|
||||
let obj = { id: this.activateId, activationStatus: 1 };
|
||||
let info = await this.$http.orderActivation(obj);
|
||||
if (info.code == 200) {
|
||||
uni.showToast({ mask:true, title: '激活成功', icon: 'success' });
|
||||
this.closePopup();
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
} else uni.showToast({ mask:true, title: info.msg, icon: 'none' });
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.uni-container{
|
||||
width: 100%;
|
||||
background: #FBFBFB;
|
||||
.list_waper{
|
||||
width: 100%; box-sizing: border-box; padding: 32rpx;
|
||||
.list{
|
||||
width: 100%; margin-bottom: 20rpx; height: 214rpx; position: relative; border-radius: 10rpx; display: flex; align-items: center;
|
||||
.img{ width: 100%; vertical-align: top; }
|
||||
.icon {
|
||||
position: absolute;
|
||||
top: -1rpx;
|
||||
right: -1rpx;
|
||||
width: 124rpx;
|
||||
height: 124rpx;
|
||||
}
|
||||
.list_cont{
|
||||
width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 24rpx 40rpx; color: #fff;
|
||||
.name{ font-weight: bold; font-size: 42rpx; color: #FFFFFF; }
|
||||
.time{ margin-top: 12rpx; font-size: 24rpx; color: rgba(255,255,255,0.7); }
|
||||
.btn{ margin-top: 39rpx; width: 181rpx; height: 68rpx; line-height: 68rpx; text-align: center; background: #FDCE88; border-radius: 34rpx; font-size: 28rpx; color: #552F11; }
|
||||
}
|
||||
}
|
||||
}
|
||||
.noData {
|
||||
margin-top: 210rpx;
|
||||
text-align: center;
|
||||
.img {
|
||||
width: 438rpx;
|
||||
height: 438rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup_waper{
|
||||
width: 596rpx; height: 398rpx; position: relative;
|
||||
.refund_box{
|
||||
width: 100%; box-sizing: border-box; padding: 64rpx 46rpx 0; position: absolute; left: 0; top: 0;
|
||||
.title{ line-height: 56rpx; text-align: center; color: #000; font-size: 40rpx; font-weight: 500; }
|
||||
.content{ margin-top: 28rpx; color: #333; font-size: 30rpx; font-weight: 500; line-height: 42rpx; text-align: center; }
|
||||
.btns{
|
||||
margin-top: 62rpx; display: flex; justify-content: space-between; align-items: center;
|
||||
view{
|
||||
width: 240rpx; height: 80rpx; border-radius: 10rpx; text-align: center; box-sizing: border-box; line-height: 76rpx; color: #666; font-size: 30rpx; border: 2rpx solid #EBECEE;
|
||||
&:last-child{ background: #01BE69; border-color: #01BE69; color: #fff; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user