<template> <div class="full-page"> <div class="container"> <div class="detail-card" v-if="voucherData"> <div class="head"> <span class="before-dot"></span> <span class="after-dot"></span> <div class="picture"> <div class="round"> <mt-spinner v-show="voucherData.logoLoading" type="fading-circle" color="#43d1be"></mt-spinner> <img v-show="!voucherData.logoLoading" :src="voucherData.merchantsLogo" class="full-width"/> </div> </div> <div class="title">{{voucherData.deptName}}</div> <!-- <div class="tool"> <img src="../../assets/images/icon-qr-code.png" class="full-width"/> </div> --> </div> <div class="body"> <div class="big-title" v-if="voucherType === '2'">免费<span class="unit">(价值{{voucherData.cost}}元)</span></div> <div class="big-title" v-else>{{voucherData.cost}}<span class="unit">元</span></div> <div class="text-center">{{voucherData.voucherName}}</div> <div class="qrcode-block"> <div class="qrcode-inner"> <div class="qrcode-frame"> <mt-spinner v-show="qrcodeLoading" type="fading-circle" color="#43d1be"></mt-spinner> <div id="qrcode"></div> </div> </div> <h4 class="text-danger text-center">请在使用时将券码出示给医生</h4> </div> <div class="table"> <div class="tr"> <div class="td label">领取人:</div> <div class="td text-left">{{voucherData.userName}}</div> </div> <div class="tr"> <div class="td label">可用时间:</div> <div class="td text-left">{{voucherData.useStartTime && voucherData.useStartTime !== "" ? voucherData.useStartTime.split(" ")[0] : ""}} - {{voucherData.useEndTime && voucherData.useEndTime !== "" ? voucherData.useEndTime.split(" ")[0]:""}}</div> </div> <div class="tr"> <div class="td label">服务内容:</div> <div class="td text-left">{{voucherData.content}} </div> </div> <div class="tr"> <div class="td label">使用须知:</div> <div class="td text-left">{{voucherData.useNotice}} </div> </div> </div> </div> <div class="footer"> <div class="table"> <div class="tr"> <div class="td" v-for="(item, index) in voucherBtnData" :key="index"> <div class="table-btn" v-if="voucherBtnData.length > 3" :class="voucherBtnData.length > 3?'vertical':'transverse'" @click="handleClick(item.url)"> <!-- transverse:横向 vertical:垂直 --> <div class="cell icon"> <mt-spinner v-show="item.iconLoading" type="fading-circle" color="#43d1be"></mt-spinner> <img v-show="!item.iconLoading" :src="item.picture"/> </div> <div class="cell title">{{item.title}}</div> </div> <div class="table-btn" v-if="voucherBtnData.length == 2" :class="voucherBtnData.length == 2 && index === 0?'transverse pull-right':'pull-left transverse'" @click="handleClick(item.url)"> <!-- transverse:横向 vertical:垂直 --> <div class="cell icon"> <mt-spinner v-show="item.iconLoading" type="fading-circle" color="#43d1be"></mt-spinner> <img v-show="!item.iconLoading" :src="item.picture"/> </div> <div class="cell title">{{item.title}}</div> </div> <div class="table-btn transverse" v-if="voucherBtnData.length == 1" @click="handleClick(item.url)"> <!-- transverse:横向 vertical:垂直 --> <div class="cell icon"> <mt-spinner v-show="item.iconLoading" type="fading-circle" color="#43d1be"></mt-spinner> <img v-show="!item.iconLoading" :src="item.picture"/> </div> <div class="cell title">{{item.title}}</div> </div> </div> </div> </div> </div> </div> <div class="block m-t"> <div class="spinner" v-show="contentMessageSpinner"><mt-spinner type="fading-circle" color="#43d1be" :size="40"></mt-spinner></div> <ul> <li v-for="(item, index) in contentData" :key="index" @click="goToContent(item.imprId)"> <ContentItem :data="item"></ContentItem> </li> </ul> <div v-show="contentMessageVisible" class="message-block"><i class="glyphicon glyphicon-info-sign"></i> 暂无相关健康知识!</div> </div> <!-- 扫码核销 --> <!-- <div class="model" v-show="qrCodeVisible"> <div class="model-body"> <div class="title">医生扫描券码即可服务</div> <div id="qrcode"></div> </div> <div class="text-center model-close"> <i class="glyphicon glyphicon-remove-circle" @click="qrCodeVisible=false"></i> </div> </div> --> <!-- 小贴士 --> <div class="popup-model" v-if="tipsPopupVisible"> <div class="body"> <!-- <p class="label-title">产检时间</p> <p>{{tipsData.tipsTime}}</p> <p class="label-title">产检项目</p> <p>{{tipsData.tipsTitle}}</p> <p class="label-title">产检贴士</p> --> <p v-html="tipsData.tipsDetailed"></p> <div class="footer"> <div style="padding: 10px;"><button class="btn-default btn-block" @click="tipsPopupVisible=false">确认</button></div> </div> </div> </div> </div> </div> </template> <script> import { getVoucherInfoById, getButtonByVoucherId, getContentListByMakeId, getQrCodeByVoucherId, getTipsByVoucherId } from '@/api/apply/apply' import { imageBase64 } from '@/api/admin/admin' import QRCode from 'qrcodejs2' import ContentItem from '@/components/contentItem' // import { noscroll, renewscroll } from '@/util/index' export default { name: 'detail', data () { return { voucherId: this.$route.query.voucherId, makeId: this.$route.query.makeId, voucherType: this.$route.query.voucherType, voucherData: null, voucherBtnData: null, contentData: [], // 内容流数据 contentMessageSpinner: true, // 内容流加载状态,默认显示 contentMessageVisible: false, // 内容流文字提示,默认不显示,接口返回数组为0显示 qrCodeVisible: true, // 二维码显示状态 qrcodeLoading: true, tipsPopupVisible: false, // “小贴士”弹窗显示状态 tipsData: { // “小贴士”数据 tipsTime: '无', tipsTitle: '无', tipsDetailed: '无' } } }, created () { this.getVoucherInfoByIdFn() // 根据voucherId查询该券详情 this.getContentListByMakeIdFn() // 根据券makeId查询内容流 }, mounted: function () { }, computed: { }, components: { ContentItem }, methods: { getVoucherInfoByIdFn () { // 根据voucherId获取该券信息 if (this.voucherId) { getVoucherInfoById(this.voucherId).then(res => { if (res.code === 0) { let data = res.data if (data.merchantsLogo && data.merchantsLogo !== '') { this.imgBase64(data.merchantsLogo).then(res => { // 社区logo图片转换base64插入图片 data.merchantsLogo = res data.logoLoading = false // 图片加载完成标识 }) } data.logoLoading = true // 图片加载中标识 this.voucherData = data this.foreachButtons() // 配置按钮图标 this.qrCodePopup() // 获取券的核销二维码 console.log('getVoucherInfoByIdFn' + this.voucherData.merchantsLogo) } }).catch((error) => { this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) } else { this.$toast({ message: '券id不能为空', position: 'center', duration: 3000 }) } }, foreachButtons () { // 按钮配置接口,多个按钮图标转换base64,插入对应对应按钮图标 let that = this getButtonByVoucherId(this.voucherId).then(res => { if (res && res.msg === 'success') { that.voucherBtnData = res.data that.voucherBtnData.forEach(function (item, index) { item.iconLoading = true // 图片加载中标识 that.imgBase64(item.picture).then(res => { let btn = that.voucherBtnData[index] btn.iconLoading = false // 图片加载完成标识 btn.picture = res }) }) } }).catch((error) => { console.log(error.message) this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }, handleClick (type) { // 券配置按钮点击 console.log(type) switch (type) { case 'popup:code': this.qrCodePopup() // 核销二维码 break case 'jump:report': this.reportLink() break case 'popup:tips': this.tipsPopup() // 小贴士 break case 'jump:appraise': this.commentLink() break } }, qrCodePopup () { // 核销二维码弹窗 console.log(this.voucherId) // document.getElementById('qrcode').innerHTML = '' getQrCodeByVoucherId(this.voucherId).then(res => { this.qrcodeLoading = false if (res && res.msg === 'success') { // this.qrCodeVisible = true let qrcode = new QRCode('qrcode', { width: 200, height: 200, // text: '', // 二维码地址 colorDark: '#000', colorLight: '#fff' }) qrcode.clear() if (res.data) { qrcode.makeCode(JSON.stringify(res.data)) } else { this.qrCodeVisible = false } } else { this.qrCodeVisible = false this.$toast({ message: '获取服务券二维码失败', position: 'center', duration: 3000 }) } }).catch((error) => { console.log(error.message) this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }, tipsPopup () { // 小贴士 this.$Indicator.open() getTipsByVoucherId(this.voucherId).then(res => { this.$Indicator.close() if (res && res.msg === 'success') { if (res.data) { this.tipsPopupVisible = true this.tipsData = res.data this.tipsData.tipsDetailed = this.tipsData.tipsDetailed.replace(/[\r\n]/g, '<br>') } else { this.$toast({ message: '该服务券还没有小贴士噢!', position: 'center', duration: 3000 }) } } else { this.$toast({ message: '该服务券还没有小贴士噢!', position: 'center', duration: 3000 }) } }).catch((error) => { console.log(error.message) this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }, reportLink () { this.$toast({ message: '建设中', position: 'center', duration: 3000 }) }, commentLink () { // 评价 console.log(this.voucherId) this.$router.push({ path: '/comment/comment', query: { voucherId: this.voucherId } }) }, // showTipsPopup () { // this.tipsPopupVisible = true // noscroll() // }, // hideTipsPopup () { // this.tipsPopupVisible = false // renewscroll() // }, getContentListByMakeIdFn () { let params = { curPage: 1, pageSize: 10 } this.contentMessageSpinner = true getContentListByMakeId(this.makeId, params).then(res => { this.contentMessageSpinner = false if (res.code === 0) { this.contentData = res.data.records if (this.contentData.length <= 0) { this.contentMessageVisible = true } else { this.contentMessageVisible = false } } }).catch((error) => { this.$toast({ message: error.message, position: 'center', duration: 3000 }) }) }, imgBase64 (url) { return new Promise((resolve, reject) => { imageBase64(url).then(res => { if (res.code === 0) { resolve(res.data) } }).catch((error) => { reject(error) console.log(error) }) }) }, goToContent (imprId) { // 跳转至知识详情页 this.$router.push({ path: '/content', query: { imprId: imprId } }) } } } </script> <style scoped> .full-page { background-color: #43d1be; } .detail-card { margin-bottom: 1em; } .detail-card .body{ font-size: 1em; } .detail-card .body .table .tr > .td { vertical-align: top; } .detail-card .body .table .tr > .td.label{ width: 5em; font-size: 1em; font-weight:bold; text-align: right; } .detail-card .body .qrcode-block { margin: 2em 0; } .detail-card .body .qrcode-block h4{ font-size: 1.2em; } .detail-card .body .qrcode-inner { margin-bottom: 1em; text-align: center; } .detail-card .body .qrcode-inner .qrcode-frame{ display: inline-block; width: 220px; height: 220px; padding: 10px; background-color: #fff; box-shadow: 0 0 16px rgb(221, 221, 221, 1); } .detail-card .body .qrcode-inner #qrcode { display: inline-block; width: 200px; height: 200px; } /* .detail-card .body .qrcode-inner #qrcode > img:nth-child(2) { display: none; } */ </style> <style> .detail-card .mint-spinner-fading-circle{ width: 5em !important; height: 5em !important; margin: 4em auto 0 auto; } </style>