<template>
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="服务核销码" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
<view class="coreshop-list menu-avatar">
|
<view class="coreshop-bg-white coreshop-padding-10 coreshop-solid-bottom coreshop-flex coreshop-justify-between">
|
<view class="u-line-2 coreshop-font-weight-bold">{{ info.title }}</view>
|
<view class="coreshop-width-fit-content" @click="goServicesDetail(info.id)">
|
<u-button size="mini">详情</u-button>
|
</view>
|
</view>
|
<view class="coreshop-list-item">
|
<view class="coreshop-avatar radius lg">
|
<image class='services-img' :src="info.thumbnail" mode="widthFix"></image>
|
</view>
|
<view class="content">
|
<view class="coreshop-text-gray coreshop-font-sm coreshop-flex coreshop-flex-nowrap">
|
<view class="u-line-3">{{ info.description }}</view>
|
</view>
|
</view>
|
</view>
|
<view class="coreshop-bg-white coreshop-padding-10 coreshop-solid-bottom">
|
<view class="coreshop-text-gray coreshop-font-xs coreshop-flex coreshop-flex-nowrap coreshop-padding-10">
|
订单编号：{{serviceOrderId}}
|
</view>
|
<view class="coreshop-text-gray coreshop-font-xs coreshop-flex coreshop-flex-nowrap coreshop-padding-10">
|
兑换级别：
|
<view class="coreshop-width-fit-content coreshop-padding-right-5" v-if="info.allowedMemberships && info.allowedMemberships.length>0" v-for="(item, index) in info.allowedMemberships" :key="index">
|
<u-tag :text="item" mode="light" size="mini" class="coreshop-margin-right-5" />
|
</view>
|
</view>
|
<view class="coreshop-text-gray coreshop-font-xs coreshop-flex coreshop-flex-nowrap coreshop-padding-10">
|
兑换门店：
|
<view class="coreshop-width-fit-content coreshop-padding-right-3" v-if="info.consumableStores && info.consumableStores.length>0" v-for="(item, index) in info.consumableStores" :key="index">
|
<view class="coreshop-bg-orange-light sm coreshop-padding-4 coreshop-margin-right-5">{{item}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="coreshop-padding-left-15 coreshop-padding-right-15 coreshop-padding-top-15">
|
<u-subsection :list="items" :current="current" :animation="true" @change="onClickItem" active-color="#ff9900"></u-subsection>
|
</view>
|
|
|
|
<view class="taobao">
|
<view class="ticket" :class="item.status==3?'grayscale':''" v-if="listData.length" v-for="(item, index) in listData" :key="index" @click="showQrcodeBox(index)">
|
<view class="left">
|
<view class="introduce">
|
<view class="top" v-if="current==0">
|
核销码：<text class="big">{{item.redeemCode}}</text>
|
</view>
|
<view class="topD" v-if="current!=0">
|
核销码：<text class="big">{{item.redeemCode}}</text>
|
</view>
|
<view class="type">{{item.validityType==1?'长期有效':'限时间段内消费'}}</view>
|
<view class="date u-line-1" v-if="item.validityStartTime && item.validityEndTime">{{item.validityStartTime}} 至 {{item.validityEndTime}}</view>
|
</view>
|
</view>
|
<view class="right coreshop-flex coreshop-align-center coreshop-justify-center">
|
<view class="coreshop-width-fit-content">
|
<u-button text="正常" type="info" plain size="mini" v-if="item.status==0"></u-button>
|
<u-button text="过期" type="default" plain size="mini" v-if="item.status==1"></u-button>
|
<u-button text="作废" type="warning" plain size="mini" v-if="item.status==2"></u-button>
|
<u-button text="已核销" type="success" plain size="mini" v-if="item.status==3"></u-button>
|
</view>
|
</view>
|
</view>
|
<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
|
</view>
|
<u-popup :show="show" mode="center" width="180px" height="180px" @close="close">
|
<canvas canvas-id="qrcode" style="width: 180px; height: 180px; " />
|
</u-popup>
|
</view>
|
</template>
|
|
<script>
|
import uQRCode from '@/common/utils/uqrcode.js'
|
|
export default {
|
|
computed: {
|
},
|
data() {
|
return {
|
items: ['正常', '过期', '作废', '已核销'],
|
current: 0,
|
|
page: 1,
|
limit: 10,
|
listData: [],
|
serviceOrderId: '',
|
info: {},
|
show: false,
|
status: 'loadmore',
|
iconType: 'flower',
|
loadText: {
|
loadmore: '轻轻上拉',
|
loading: '努力加载中',
|
nomore: '实在没有了'
|
}
|
};
|
},
|
onLoad(e) {
|
this.serviceOrderId = e.id;
|
this.getServicesById();
|
this.getServicesTickets();
|
},
|
onShow() {
|
},
|
onReachBottom() {
|
if (this.status === 'loadmore') {
|
this.getServicesTickets()
|
}
|
},
|
methods: {
|
// tab点击切换
|
onClickItem(index) {
|
if (this.current !== index) {
|
this.current = index;
|
this.page = 1;
|
this.listData = [];
|
this.getServicesTickets();
|
}
|
},
|
getServicesById() {
|
let _this = this;
|
let data = {
|
id: this.serviceOrderId
|
}
|
this.$u.api.getServicesById(data).then(res => {
|
if (res.status) {
|
this.info = res.data;
|
} else {
|
_this.$u.toast(res.msg)
|
}
|
})
|
},
|
getServicesTickets() {
|
let _this = this;
|
let data = {
|
id: this.serviceOrderId,
|
status: this.current,
|
page: this.page,
|
limit: this.limit
|
}
|
this.status = 'loading'
|
|
this.$u.api.getServicesTickets(data).then(res => {
|
if (res.status) {
|
let _list = res.data
|
this.listData = [...this.listData, ..._list]
|
|
if (res.data.count > _this.listData.length) {
|
_this.page++
|
_this.status = 'loadmore'
|
} else {
|
_this.status = 'nomore'
|
}
|
} else {
|
_this.$u.toast(res.msg)
|
}
|
})
|
},
|
close() {
|
this.show = false
|
},
|
showQrcodeBox(index) {
|
if (this.current != 0) {
|
return;
|
}
|
let _this = this;
|
var item = _this.listData[index];
|
if (item.status == 0) {
|
_this.make(item.redeemCode);
|
_this.show = true;
|
}
|
},
|
make(textStr) {
|
console.log(textStr);
|
console.log(uQRCode);
|
uQRCode.make({
|
canvasId: 'qrcode',
|
componentInstance: this,
|
text: textStr,
|
size: 180,
|
margin: 30,
|
backgroundColor: '#ffffff',
|
foregroundColor: '#000000',
|
fileType: 'jpg',
|
correctLevel: uQRCode.errorCorrectLevel.H,
|
success: res => {
|
console.log(res)
|
}
|
})
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "details.scss";
|
</style>
|
