Skip to content

B
bigwood
Commit 9f0fa6e1 authored by youjie's avatar youjie
Browse files
Options

no message

parent a1fe71d6
Show whitespace changes
Inline Side-by-side
Showing with 280 additions and 0 deletions
package.json
View file @ 9f0fa6e1
......@@ -24,6 +24,7 @@
"md5-ts": "^0.1.6",
"mermaid": "^8.12.1",
"opencc-js": "^1.0.4",
"print-js": "^1.6.0",
"quasar": "^2.10.1",
"quasar-tiptap-branch": "^1.8.1",
"vue": "^3.0.0",
......
src/assets/svg/offer/Bag.svg 0 → 100644
View file @ 9f0fa6e1
<?xml version="1.0" encoding="UTF-8"?>
<svg width="176px" height="165px" viewBox="0 0 176 165" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>Stockholm-icons / offer / Bag1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Stockholm-icons-/-offer-/-Bag" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M-10.001 135.168Cz-10.001 151.643 3.87924 165.001 20.9985 165.001C38.1196 165.001 51.998 151.643 51.998 135.168C51.998 118.691 38.1196 105.335 20.9985 105.335C3.87924 105.335 -10.001 118.691 -10.001 135.168Z" fill="#AD84FF"></path>
<path d="M28.749 64.3117C28.749 78.7296 40.8927 90.4163 55.8745 90.4163C70.8563 90.4163 83 78.7296 83 64.3117C83 49.8954 70.8563 38.207 55.8745 38.207C40.8927 38.207 28.749 49.8954 28.749 64.3117Z" fill="#AD84FF"></path>
<path d="M82.9996 120.249C82.9996 144.964 103.819 165 129.501 165C155.181 165 176 144.964 176 120.249C176 95.5342 155.181 75.5 129.501 75.5C103.819 75.5 82.9996 95.5342 82.9996 120.249Z" fill="#AD84FF"></path>
<path d="M98.4976 23.2928C98.4976 43.8887 115.848 60.5856 137.249 60.5856C158.65 60.5856 176 43.8887 176 23.2928C176 2.69692 158.65 -14 137.249 -14C115.848 -14 98.4976 2.69692 98.4976 23.2928Z" fill="#AD84FF"></path>
<path d="M-10.0011 8.37466C-10.0011 20.7322 0.409554 30.7493 13.2503 30.7493C26.0911 30.7493 36.5 20.7322 36.5 8.37466C36.5 -3.98287 26.0911 -14 13.2503 -14C0.409554 -14 -10.0011 -3.98287 -10.0011 8.37466Z" fill="#AD84FF"></path>
<path d="M-2.24881 82.9565C-2.24881 87.0757 1.22081 90.4147 5.50108 90.4147C9.78135 90.4147 13.251 87.0757 13.251 82.9565C13.251 78.839 9.78135 75.5 5.50108 75.5C1.22081 75.5 -2.24881 78.839 -2.24881 82.9565Z" fill="#AD84FF"></path>
<path d="M55.8744 12.1044C55.8744 18.2841 61.0788 23.2926 67.5001 23.2926C73.9196 23.2926 79.124 18.2841 79.124 12.1044C79.124 5.92653 73.9196 0.917969 67.5001 0.917969C61.0788 0.917969 55.8744 5.92653 55.8744 12.1044Z" fill="#AD84FF"></path>
</g>
</svg>
\ No newline at end of file
src/components/global/svg-icon.vue
View file @ 9f0fa6e1
......@@ -71,6 +71,10 @@ svg g [fill]{
transition: fill 0.3s ease;
fill: var(--q-dark) !important;
}
.svg-icon-72B7FF g [fill] {
transition: fill 0.3s ease;
fill: #72B7FF !important;
}
.hover:hover .svg-icon-dark g [fill] {
transition: fill 0.3s ease;
fill: var(--q-primary) !important;
......
src/i18n/zh-TW/index.ts
View file @ 9f0fa6e1
......@@ -434,6 +434,13 @@ export default {
t7: '銀行郵變',
t8: '重新番号',
t9: '汇款日本账户后请及时告知信息，方便日本旅行社查询谢谢体谅',
},
btn:{
yulan: '預覽',
qxyulan: '取消預覽',
dayin: '打印',
xiaza: '下載',
cjfaipiao: '創建發票'
}
}
}
......
src/pages/hotel/ListOfQuotation.vue 0 → 100644
View file @ 9f0fa6e1
<template>
<div class="fix-height-subpage column no-wrap q-pa-md">
<div class="col">
<div class="column no-wrap q-pb-md items-center">
<div class="rounded-borders" style="overflow: hidden;" :style="{'width':$q.platform.is.desktop?'80%':'90%',
'max-width':$q.platform.is.desktop?'1290px':'760px',
'min-width':$q.platform.is.desktop?'810px':'370px'}" ref="quotationbox" id="quotationbox">
<div :style="{'padding':$q.platform.is.desktop?'100px 15%':'20px 10px','height':$q.platform.is.desktop?'':'205px'}" style="position: relative;background-color: #3699FF;">
<div style="position: absolute; left: 0;top: 0;">
<svg-icon color="72B7FF" icon="offer/Bag.svg" :size="130"></svg-icon>
</div>
<div class="row wrap items-center" :class="{'justify-between':$q.platform.is.desktop}" :style="{'padding':$q.platform.is.desktop?'0 36px':'0 36px','position':$q.platform.is.desktop?'':'absolute','left':0,'right':0}">
<div class="column">
<q-avatar square size="50px">
<img src="../../assets/images/logo.png">
</q-avatar>
<div class="text-white text-weight-bold fz14 q-pt-md">Cecilia Chapman, 711-2880 Nulla St, Mankato
Mississippi 96522</div>
</div>
<div class="text-white text-weight-bold fz20 text-right" style="font-size: 1.6rem;">{{$t('v101.Listofquotation.dindanbaojia')}}</div>
</div>
</div>
<div class="bg-white column" :style="{'padding': $q.platform.is.desktop?'80px 0':'15px 0'}">
<div :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" :style="{'padding': $q.platform.is.desktop?'0 80px':'0 20px'}">
<div :class="{'col-3':$q.platform.is.desktop}" :style="{'border-right': $q.platform.is.desktop?'1px solid #EEEEEE':'0','padding': $q.platform.is.desktop?'0 40px 0 0':'0'}">
<div :class="{'q-pb-lg':$q.platform.is.desktop,'q-pb-xs':$q.platform.is.mobile}">
<div class="text-grey-6 q-pb-sm">{{$t('v101.Listofquotation.zhutuanhao')}}</div>
<span class="q-pb-lg">
VS218394AA
</span>
</div>
<div :class="{'q-pb-lg':$q.platform.is.desktop,'q-pb-xs':$q.platform.is.mobile}">
<div class="text-grey-6 q-pb-sm">{{$t('v101.Listofquotation.dindanhao')}}</div>
<span class="q-pb-lg">
VS218394AA
</span>
</div>
<div :class="{'q-pb-lg':$q.platform.is.desktop,'q-pb-xs':$q.platform.is.mobile}">
<div class="text-grey-6 q-pb-sm">{{$t('v101.Listofquotation.riqi')}}</div>
<span class="q-pb-lg">
2022 12-02
</span>
</div>
</div>
<div :class="{'col':$q.platform.is.desktop||$q.platform.is.mobile}" :style="{'padding': $q.platform.is.desktop?'0 0 0 40px':'0'}">
<div class="row justify-between text-grey-6" :class="{'q-py-md':$q.platform.is.desktop,'q-py-xs':$q.platform.is.mobile,}">
<div :class="{'col-6':$q.platform.is.desktop,'col-4':$q.platform.is.mobile}">{{$t('v101.Listofquotation.HotelDate')}}</div>
<div class="col text-right">{{$t('v101.Listofquotation.HotelName')}}</div>
<div class="col text-right">{{$t('v101.Listofquotation.HotelInfor')}}</div>
<div class="col text-right">{{$t('v101.Listofquotation.xiaoji')}}</div>
</div>
<q-separator color="grey-3" class="q-my-sm" />
<div class="column">
<div class="row justify-between" v-for="(x,index) in 3">
<div :class="{'col-6':$q.platform.is.desktop,'col-4':$q.platform.is.mobile}">
2022-09-36
</div>
<div class="col text-right">11</div>
<div class="col text-right">22</div>
<div class="col text-right text-weight-bold">33</div>
</div>
</div>
</div>
</div>
<div class="items-center justify-between" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" :style="{'padding': $q.platform.is.desktop?'40px 80px 0 80px':'0px 20px 0'}">
<div class="col-5">
<q-separator color="grey-3" class="q-my-sm" />
<div class="q-pt-lg q-pb-sm">{{$t('v101.Listofquotation.riben')}}</div>
<div class="row q-pb-sm">
<div class="col-3">{{$t('v101.Listofquotation.col.t1')}}:</div>
<div class="col text-grey-6 text-right">232</div>
</div>
<div class="row q-pb-sm">
<div class="col-3">{{$t('v101.Listofquotation.col.t2')}}:</div>
<div class="col text-grey-6 text-right">232</div>
</div>
<div class="row q-pb-sm">
<div class="col-3">{{$t('v101.Listofquotation.col.t3')}}:</div>
<div class="col text-grey-6 text-right">232</div>
</div>
<div class="row q-pb-sm">
<div class="col-3">{{$t('v101.Listofquotation.col.t4')}}:</div>
<div class="col text-grey-6 text-right">232</div>
</div>
<div class="row q-pb-sm">
<div class="col-3">{{$t('v101.Listofquotation.col.t5')}}:</div>
<div class="col text-grey-6 text-right">232</div>
</div>
<div class="row q-pb-sm">
<div class="col-3">{{$t('v101.Listofquotation.col.t6')}}:</div>
<div class="col text-grey-6 text-right">232</div>
</div>
<div class="row q-pb-sm">
<div class="col-3">{{$t('v101.Listofquotation.col.t7')}}:</div>
<div class="col text-grey-6 text-right">232</div>
</div>
<div class="row q-pb-sm">
<div class="col-3">{{$t('v101.Listofquotation.col.t8')}}:</div>
<div class="col text-grey-6 text-right">232</div>
</div>
<div class="row q-pb-sm">
<div class="col-12 text-red">{{$t('v101.Listofquotation.col.t9')}}</div>
</div>
</div>
<div :class="{'q-pb-lg q-pt-md':$q.platform.is.mobile}" :style="{'width':$q.platform.is.desktop?'':'100%'}" style="text-align: right;">
<div class="row justify-between items-center bg-blue text-white rounded-borders q-px-lg text-weight-bold" :class="{'q-py-md ':$q.platform.is.desktop}" style="position: relative;"
:style="{'height':$q.platform.is.desktop?'83px':'83px','width':$q.platform.is.desktop?'350px':'100%'}">
<div style="position: absolute;right: 3px;top: -1px;transform: rotate(90deg);">
<svg-icon color="72B7FF" icon="offer/Bag.svg" :size="18"></svg-icon>
</div>
<span class="q-pr-lg fz16">{{$t('v101.Listofquotation.heji')}}</span>
<span class="fz20 text-white q-pl-lg" style="padding: 0 0 0 150px;">$2000</span>
</div>
</div>
</div>
<template v-if="!isGengernal">
<q-separator color="grey-3" class="q-my-sm" />
<div class="row justify-between ListOfQuotation-btn-form" :style="{'padding':$q.platform.is.desktop?'60px 80px':'30px 40px'}">
<div class="row">
<!-- gt-xl gt-lg gt-md gt-sm gt-xs -->
<q-btn class=" inline q-mr-lg" color="blue" @click="saveImage(0)">
<div>{{$t('v101.Listofquotation.btn.dayin')}}</div>
</q-btn>
<q-btn color="blue-4" @click="saveImage(1)" :loading="isGengernal">
<div>{{$t('v101.Listofquotation.btn.xiaza')}}</div>
</q-btn>
</div>
<div class="row">
<q-btn color="blue">
<div>{{$t('v101.Listofquotation.btn.cjfaipiao')}}</div>
</q-btn>
</div>
</div>
</template>
</div>
</div>
<div v-if="showImg" class="rounded-borders" style="overflow: hidden;width: 80%;height: 100%;" ref="prin" id="prinbox"><q-img width="100%" height="100%" :src="images" /></div>
</div>
</div>
</div>
</template>
<script lang="ts">
import html2canvas from "html2canvas";
import print from 'print-js'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../components/global/svg-icon.vue'
import { defineComponent, inject, provide, reactive, ref, toRefs, watch } from 'vue'
import { DirtionmaryHelper } from '../../config/dictionary'
import { currentRouter } from '../../router'
import ListHeader from '../../components/hotel/list/ListHeader.vue'
import ListTable from '../../components/hotel/list/ListTable.vue'
import HotelTips from '../../components/hotel/list/HotelTips.vue'
import { date } from 'quasar'
import ImagePreview from 'src/components/common/ImagePreview.vue'
export default defineComponent({
components: { svgIcon, ListHeader, ListTable, HotelTips, ImagePreview },
setup() {
const data = reactive({
model:'',
isGengernal: false,
images: '',
showImg: false
})
let { setTitle } = useMetaModule()
const { locale, t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('v101.Listofquotation.pageTitle')
setTitle(pageTitle.value)
const menu=inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value=1
const methods = {
dataURLToBlob(dataurl) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
},
saveImage(type) {
if (!data.isGengernal) {
data.isGengernal = true;
setTimeout(() => {
let canvasID = document.getElementById("quotationbox");
let a = document.createElement("a");
html2canvas(canvasID, {
useCORS: true,
allowTaint: true,
backgroundColor: "#FFFFFF",
scale: 1.3,
taintTest: false
}).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = "none";
a.style.display = "none";
document.body.removeChild(dom);
let blob = methods.dataURLToBlob(dom.toDataURL("image/png"));
a.setAttribute("href", URL.createObjectURL(blob));
var name = `${t('v101.Listofquotation.btn.bjd')}.png`;
if (data.model) {
name = data.model.Name + `${t('v101.Listofquotation.btn.bjd')}.png`;
}
a.setAttribute("download", name);
document.body.appendChild(a);
if(type==1){
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
data.isGengernal = false;
}else{
// data.images = URL.createObjectURL(blob)
// data.showImg = true
const style = '@page {margin:0mm 10mm};'//打印时去掉眉页眉尾
print({
printable: 'quotationbox',// 标签元素id
type: 'html',
header: '',
targetStyles: ['*'],
style
});
setTimeout(()=>{
data.isGengernal = false;
},3000)
}
});
}, 1000);
}
}
}
return {
...toRefs(data),
...methods
}
}
})
</script>
<style></style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment