Haina
/
GHH-feedback
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: signature 高DPI

Browse Source
main
Lei OT 1 year ago
parent 7d82c19ab5
commit edb22c0aa6
2 changed files with 15 additions and 66 deletions
Show Stats Download Patch File Download Diff File

23
index.html
Unescape Escape View File

@ -10,7 +10,7 @@
#result{text-align:center;padding:20px}.bi-check-circle-fill,.bi-exclamation-circle-fill,.bi-x-circle-fill{fill:#d54e21}.bi-x-circle-fill{fill:#d54e21}
</style>
<style>#loading-mask{width:100vw;height:100vh;background-color:#00000099;position:fixed;left:0;top:0;display:flex}.lds-facebook{display:inline-block;position:relative;width:80px;height:80px;margin:auto}.lds-facebook div{display:inline-block;position:absolute;left:8px;width:16px;background:#fff;animation:lds-facebook 1.2s cubic-bezier(0,.5,.5,1) infinite}.lds-facebook div:nth-child(1){left:8px;animation-delay:-.24s}.lds-facebook div:nth-child(2){left:32px;animation-delay:-.12s}.lds-facebook div:nth-child(3){left:56px;animation-delay:0}@keyframes lds-facebook{0%{top:8px;height:64px}100%,50%{top:24px;height:32px}}</style>
<style>.city-page{display:flex;flex-direction:column;align-items:center}.city-list{list-style-type:none;padding:0;width:260px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1)}.city-list li{padding:20px;border-top:1px solid #d54e21;border-bottom:1px solid #d54e21;transition:background-color .3s;position:relative}.city-list li.filled::after{content:'✔';position:absolute;right:20px;color:#d54e21;transition:color .3s}.city-list li:hover{background-color:#d54e21;color:#fff}.city-list li.filled:hover::after{color:#fff}</style>
<style>.city-page{display:flex;flex-direction:column;align-items:center}.city-list{list-style-type:none;padding:0;width:260px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1)}.city-list li{padding:20px;border-top:1px solid #d54e21;border-bottom:1px solid #d54e21;transition:background-color .3s;position:relative}.city-list li.active{color:#d54e21}.city-list li.filled::after{content:'✔';position:absolute;right:20px;color:#d54e21;transition:color .3s}.city-list li:hover{background-color:#d54e21;color:#fff}.city-list li.filled:hover::after{color:#fff}</style>
<style>.float-button{position:fixed;right:20px;bottom:120px;background-color:transparent;color:#d54e21;border:1px solid #d54e21;border-radius:50%;width:60px;height:60px;text-align:center;line-height:60px;font-size:24px;cursor:pointer;box-shadow:0 0 10px rgba(0,0,0,.1);z-index:1}.float-button:hover{background-color:#d54e21;color:#fff}.float-text{position:fixed;right:20px;bottom:190px;color:#d54e21;font-size:18px;text-align:right;z-index:-1;width: 100px;}.expand-list{list-style-type:none;position:fixed;right:20px;bottom:190px;width:260px;background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);padding:0;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s ease,opacity .5s ease}.expand-list.open{max-height:500px;opacity:1;z-index: 99;}.expand-list li{padding:20px;border-bottom:1px solid #d54e21;transition:background-color .3s;position: relative;}.expand-list li:last-child{border-bottom:none}.expand-list li.active{color:#d54e21}.expand-list li.filled::after{content:'✔';position:absolute;right:20px;color:#d54e21;transition:color .3s}.expand-list li:hover{background-color:#d54e21;color:#fff}.expand-list li.filled:hover::after{color:#fff}</style>
<style>.star-rating{direction:rtl;display:inline-block}.star-rating input[type=radio]{display:none}.star-rating label{font-size:30px;color:#d3d3d3;cursor:pointer}.star-rating input[type=radio]:checked~label,.star-rating input[type=radio]~label.checked,.star-rating label:hover,.star-rating label:hover~label{color:#d54e21}.rate-meaning{display:inline-block;margin-left:15px;vertical-align:middle;color:#d54e21}</style>
<script src="./utils.js"></script>
@ -56,7 +56,7 @@
<h4 v-if="!isFilled">Thank you for completing the Feedback Evaluation. Once submitted the tour guide would not be able to view your comments. </h4>
<div class="city-page">
<ul class="city-list" v-for="(city, index) in cityList" v-bind:key="city.cityName" v-on:click="selectCity(city)">
<li v-bind:class="[city.feedback_Filled ? 'filled' : '']">{{city.cityName}}</li>
<li v-bind:class="[city.feedback_Filled ? 'filled' : '', city.cii_sn === currentCity.cii_sn ? 'active' : '' ]">{{city.cityName}}</li>
</ul>
</div>
</template>
@ -96,7 +96,7 @@
<h4>2. How about the Driver and Car/Van?</h4>
<div class="question-items" v-for="(q, qi) in feedbackItem.driver" v-bind:key="q.id">
<h5>{{q.Describe}}</h5>
<options-item v-if="isWideScreen"question="Driver" v-bind:qitem="q" v-bind:si="2" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
<options-item v-if="isWideScreen" question="Driver" v-bind:qitem="q" v-bind:si="2" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
<options-item-star v-else question="Driver" v-bind:qitem="q" v-bind:si="2" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
</div>
</div>
@ -109,7 +109,7 @@
</div>
</div>
<div class="question " v-if="showPhotos">
<h4>4. Would you give Asia Highlights permission to use photos taken by your tour guide(s) that contain your picture?</h2>
<h4>4. Would you give Asia Highlights permission to use photos taken by your tour guide(s) that contain your picture?</h4>
<judgment-item question="photo" v-bind:qitem="{id: 'photo_permission', rate: feedbackEvaluation.usePhotos}" si="photo" qi="photo" key="photo" v-bind:disabled="resultPage"></judgment-item>
</div>
<div class="feedback question">
@ -120,7 +120,7 @@
<div class="signature">
<h4>Signature:</h4>
<div class="signature-container" v-if="!resultPage">
<canvas id="signature-pad" class="signature-pad" v-bind:width="drawWidth" height=200 ></canvas>
<canvas id="signature-pad" class="signature-pad" v-bind:style="{'width': drawWidth+'px', 'height':'200px'}" ></canvas>
<div class="button-container">
<button type="button" id="clear" class="button" v-on:click="clearSignature()">Clear</button>
</div>
@ -315,6 +315,7 @@
this.param.l = urlPath[2] || 1;
this.resultPage = !isEmpty(urlPath[3]);
}
console.log(this.param);
if (!(this.param.v && this.param.g)) {
this.error = true;
this.errorMsg = 'Invalid URL';
@ -367,7 +368,7 @@
if (this.currentCity.cii_sn === city.cii_sn) {
return false;
}
this.cityListPage = false;
// this.cityListPage = false;
this.loading = true;
const _param = {
GRI_SN: this.param.g,
@ -390,12 +391,18 @@
initSignature() {
var canvas = document.getElementById('signature-pad');
this.signaturePad = new SignaturePad(canvas, {
backgroundColor: '#f8f8f8',
penColor: "rgb(50, 50, 50)",
});
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
},
clearSignature() {
// var data = this.signaturePad.toDataURL("image/svg+xml");
// console.log(data);
var data = this.signaturePad.toDataURL("image/svg+xml");
console.log(data);
this.signaturePad.clear();
},
getData(param, continually = false) {

58
utils.js
Unescape Escape View File

@ -71,22 +71,6 @@ async function postForm(path, data, config) {
return console.log('Request Failed', err);
}
}
/**
* 千分位 格式化数字
*/
const numberFormatter = (number, d = 2, m = 2) => {
return new Intl.NumberFormat(undefined, {
minimumFractionDigits: d,
maximumFractionDigits: m,
}).format(number);
};
/**
* 人民币:元 转换为 万元
*/
const CNYConvertK = (number, scale = 10) => {
return numberFormatter((number/(1000*scale)), 0, 0);
};
function isEmpty(val) {
// return val === undefined || val === null || val === "";
return [Object, Array].includes((val || {}).constructor) && !Object.entries((val || {})).length;
@ -103,45 +87,3 @@ function groupBy(array, callback) {
return groups;
}, {});
}
var now = new Date(); //当前日期
var nowDayOfWeek = now.getDay(); //今天本周的第几天
var nowDay = now.getDate(); //当前日
var nowMonth = now.getMonth(); //当前月
var nowYear = now.getYear(); //当前年
nowYear += nowYear < 2000 ? 1900 : 0; //
var lastMonthDate = new Date(); //上月日期
lastMonthDate.setDate(1);
lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
var lastYear = lastMonthDate.getYear();
var lastMonth = lastMonthDate.getMonth();
//格式化日期：yyyy-MM-dd
function formatDate(date) {
var myyear = date.getFullYear();
var mymonth = date.getMonth() + 1;
var myweekday = date.getDate();
if (mymonth < 10) {
mymonth = '0' + mymonth;
}
if (myweekday < 10) {
myweekday = '0' + myweekday;
}
return myyear + '-' + mymonth + '-' + myweekday;
}
//获得某月的天数
function getMonthDays(myMonth) {
var monthStartDate = new Date(nowYear, myMonth, 1);
var monthEndDate = new Date(nowYear, myMonth + 1, 1);
var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24);
return days;
}
//获得本月的开始日期
function getMonthStartDate() {
var monthStartDate = new Date(nowYear, nowMonth, 1);
return formatDate(monthStartDate);
}
//获得本月的结束日期
function getMonthEndDate() {
var monthEndDate = new Date(nowYear, nowMonth, getMonthDays(nowMonth));
return formatDate(monthEndDate);
}

Write Preview
Loading…
Cancel
Save