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

fix: 结果页面判断; 城市列表标识已填写判断; 导游城市重复去重; 合并城市后的酒店数据在选择城市时初始化

Browse Source
master
Lei OT 2 years ago
parent 94b0d235e2
commit 7d0328b87f
1 changed files with 42 additions and 28 deletions
Show Stats Download Patch File Download Diff File

70
index.html
Unescape Escape View File

@ -4,6 +4,7 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>One Minute Feedback - Help Us Serve You Better！</title>
<style>body{font-family:Arial,sans-serif;color:#333}.text-primary{color:#b43c1a}h3,h5,p{margin:.5em 0}.header-m{background:#ad1818;color:#fff;padding:.5em}.header-pc{height:90px!important;display:flex;align-items:center;justify-content:flex-start;background:#ad1818;color:#fff;padding:0 20px}.header-pc img{position:absolute;top:0;margin-right:20px;height:104px;width:auto;border-radius:0 0 3px 3px;background-color:#fff;box-shadow:1px 1px 10px 1px rgba(77,77,77,.7);-webkit-box-shadow:1px 1px 10px 1px rgba(77,77,77,.7);-moz-box-shadow:1px 1px 10px 1px rgba(77,77,77,.7)}.header-pc h1{margin:0;margin-left:240px}.form-container{width:100%;max-width:768px;margin:0 auto;margin-top:1.5em}.question{display:flex;flex-direction:column;align-items:start;margin-bottom:10px}.question h4{position:sticky;top:0;background-color:#fff;margin-top:0;padding-top:1.33em}.question-items{display:flex;flex-direction:column;align-items:start;margin-bottom: 10px;}.options{display:flex;flex-direction:column;align-items:start;}.options-row{flex-direction:row;justify-content:flex-end;align-items:baseline}.options-row-reverse{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline}.radio-container{display:flex;align-items:center;margin-bottom:5px;margin-top: 5px;}.radio-container input[type=radio]{display:none}.radio-container label{margin-left:8px}.radio-container input[type=radio]:checked+.radio-label{background-color:#d54e21;color:#fff}.radio-label{display:inline-block;padding:5px 10px;border:1px solid #d54e21;border-radius:20px;transition:all .3s ease;font-size:14px}label.radio-label svg{vertical-align:text-bottom}.feedback{margin-top:10px}.feedback textarea{width:90%;padding:10px;resize:vertical;border:1px solid #d54e21;border-radius:5px}.form-btn{display:block;width:100%;padding:10px;margin-top:20px;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease;background:0 0;border:1px solid #d54e21;color:#d54e21}.submit-btn{background-color:#d54e21;color:#fff}.submit-btn:hover{background-color:#b43c1a}.cancel-btn:hover{background-color:#00000011}.info-container{display:flex;flex-direction:column;justify-content:space-between;margin-bottom:10px}.info-item{margin-bottom:10px}.info-item p{color:#b43c1a}.signature-pad{border:1px solid #d54e21;border-radius:5px;z-index:10}.signature-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.button-container{margin-left:.5em;display:flex;flex-direction:column;justify-content:flex-start}.button{margin-top:1em;padding:10px;background-color:#d54e21;color:#fff;border:none;border-radius:5px;cursor:pointer}@media (min-width:768px){body{margin-left:0;margin-right:0;margin-top:0;padding-left:0;padding-right:0;padding-top:0}.question-items{width:100%;flex-direction:row;justify-content:space-between;align-items:baseline}.question-items h5{max-width: 230px;}.question-items .options{flex:1 1 auto}.options{flex-direction:row;justify-content:flex-end;align-items: center;}.info-container{flex-direction:row}.info-item{flex:1;margin-right:10px;margin-bottom:0}.info-item:last-child{margin-right:0}.header-m{display:none}.signature-container{flex-direction:row}}@media (max-width:767px){.header-pc{display:none}}</style> <style>body{font-family:Arial,sans-serif;color:#333}.text-primary{color:#b43c1a}h3,h5,p{margin:.5em 0}.header-m{background:#ad1818;color:#fff;padding:.5em}.header-pc{height:90px!important;display:flex;align-items:center;justify-content:flex-start;background:#ad1818;color:#fff;padding:0 20px}.header-pc img{position:absolute;top:0;margin-right:20px;height:104px;width:auto;border-radius:0 0 3px 3px;background-color:#fff;box-shadow:1px 1px 10px 1px rgba(77,77,77,.7);-webkit-box-shadow:1px 1px 10px 1px rgba(77,77,77,.7);-moz-box-shadow:1px 1px 10px 1px rgba(77,77,77,.7)}.header-pc h1{margin:0;margin-left:240px}.form-container{width:100%;max-width:768px;margin:0 auto;margin-top:1.5em}.question{display:flex;flex-direction:column;align-items:start;margin-bottom:10px}.question h4{position:sticky;top:0;background-color:#fff;margin-top:0;padding-top:1.33em}.question-items{display:flex;flex-direction:column;align-items:start;margin-bottom: 10px;}.options{display:flex;flex-direction:column;align-items:start;}.options-row{flex-direction:row;justify-content:flex-end;align-items:baseline}.options-row-reverse{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline}.radio-container{display:flex;align-items:center;margin-bottom:5px;margin-top: 5px;}.radio-container input[type=radio]{display:none}.radio-container label{margin-left:8px}.radio-container input[type=radio]:checked+.radio-label{background-color:#d54e21;color:#fff}.radio-label{display:inline-block;padding:5px 10px;border:1px solid #d54e21;border-radius:20px;transition:all .3s ease;font-size:14px}label.radio-label svg{vertical-align:text-bottom}.feedback{margin-top:10px}.feedback textarea{width:90%;padding:10px;resize:vertical;border:1px solid #d54e21;border-radius:5px}.form-btn{display:block;width:100%;padding:10px;margin-top:20px;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease;background:0 0;border:1px solid #d54e21;color:#d54e21}.submit-btn{background-color:#d54e21;color:#fff}.submit-btn:hover{background-color:#b43c1a}.cancel-btn:hover{background-color:#00000011}.info-container{display:flex;flex-direction:column;justify-content:space-between;margin-bottom:10px}.info-item{margin-bottom:10px}.info-item p{color:#b43c1a}.signature-pad{border:1px solid #d54e21;border-radius:5px;z-index:10}.signature-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap}.button-container{margin-left:.5em;display:flex;flex-direction:column;justify-content:flex-start}.button{margin-top:1em;padding:10px;background-color:#d54e21;color:#fff;border:none;border-radius:5px;cursor:pointer}@media (min-width:768px){body{margin-left:0;margin-right:0;margin-top:0;padding-left:0;padding-right:0;padding-top:0}.question-items{width:100%;flex-direction:row;justify-content:space-between;align-items:baseline}.question-items h5{max-width: 230px;}.question-items .options{flex:1 1 auto}.options{flex-direction:row;justify-content:flex-end;align-items: center;}.info-container{flex-direction:row}.info-item{flex:1;margin-right:10px;margin-bottom:0}.info-item:last-child{margin-right:0}.header-m{display:none}.signature-container{flex-direction:row}}@media (max-width:767px){.header-pc{display:none}}</style>
<style> <style>
#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} #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}
@ -55,14 +56,14 @@
<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> <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"> <div class="city-page">
<ul class="city-list" v-for="(city, index) in cityList" v-bind:key="city.cityName" v-on:click="selectCity(city)"> <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_id ? 'filled' : '']">{{city.cityName}}</li> <li v-bind:class="[city.feedback_Filled ? 'filled' : '']">{{city.cityName}}</li>
</ul> </ul>
</div> </div>
</template> </template>
<template v-if="!cityListPage"> <template v-if="!cityListPage">
<!-- <h1>One Minute Feedback - Help Us Serve You Better！</h1> --> <!-- <h1>One Minute Feedback - Help Us Serve You Better！</h1> -->
<p>Did you enjoy your stay in the <span class="text-primary">{{group.cityName}}</span> area? Your honest feedback is appreciated to help us continually improve our service.</p> <p>Did you enjoy your stay in the <span class="text-primary">{{currentCity.cityName}}</span> area? Your honest feedback is appreciated to help us continually improve our service.</p>
<div class="info-container"> <div class="info-container">
<div class="info-item"> <div class="info-item">
<h3>Reference NO.:</h3> <h3>Reference NO.:</h3>
@ -74,7 +75,7 @@
</div> </div>
<div class="info-item"> <div class="info-item">
<h3>City:</h3> <h3>City:</h3>
<p id="city">{{group.cityName}}</p> <p id="city">{{currentCity.cityName}}</p>
</div> </div>
</div> </div>
<hr> <hr>
@ -87,38 +88,38 @@
<h4>1. How satisfied were you with your tour guide?</h4> <h4>1. How satisfied were you with your tour guide?</h4>
<div class="question-items" v-for="(q, qi) in feedbackItem.guide" v-bind:key="q.id"> <div class="question-items" v-for="(q, qi) in feedbackItem.guide" v-bind:key="q.id">
<h5>{{q.Describe}}</h5> <h5>{{q.Describe}}</h5>
<options-item v-if="isWideScreen" question="guide" si="1" v-bind:qitem="q" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="isFilled"></options-item> <options-item v-if="isWideScreen" question="guide" si="1" v-bind:qitem="q" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
<options-item-star v-else question="guide" si="1" v-bind:qitem="q" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="isFilled"></options-item-star> <options-item-star v-else question="guide" si="1" v-bind:qitem="q" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item-star>
</div> </div>
</div> </div>
<div class="question"> <div class="question">
<h4>2. How about the Driver and Car/Van?</h4> <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"> <div class="question-items" v-for="(q, qi) in feedbackItem.driver" v-bind:key="q.id">
<h5>{{q.Describe}}</h5> <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="isFilled"></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="isFilled"></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>
</div> </div>
<div class="question" v-if="feedbackItem.experience.length > 0"> <div class="question" v-if="feedbackItem.experience.length > 0">
<h4>3. General Experience with:</h4> <h4>3. General Experience with:</h4>
<div class="question-items" v-for="(q, qi) in feedbackItem.experience" v-bind:key="q.id"> <div class="question-items" v-for="(q, qi) in feedbackItem.experience" v-bind:key="q.id">
<h5>{{q.Describe}}</h5> <h5>{{q.Describe}}</h5>
<options-item v-if="isWideScreen" question="Experience" v-bind:qitem="q" v-bind:si="3" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="isFilled"></options-item> <options-item v-if="isWideScreen" question="Experience" v-bind:qitem="q" v-bind:si="3" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
<options-item-star v-else question="Experience" v-bind:qitem="q" v-bind:si="3" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="isFilled"></options-item> <options-item-star v-else question="Experience" v-bind:qitem="q" v-bind:si="3" v-bind:qi="qi" v-bind:key="q.id" v-bind:disabled="resultPage"></options-item>
</div> </div>
</div> </div>
<div class="question " v-if="showPhotos"> <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?</h2>
<judgment-item question="photo" v-bind:qitem="{id: 'photo_permission', rate: feedbackEvaluation.usePhotos}" si="photo" qi="photo" key="photo" v-bind:disabled="isFilled"></judgment-item> <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>
<div class="feedback question"> <div class="feedback question">
<h4>Any other comments that you would like to share with us?</h4> <h4>Any other comments that you would like to share with us?</h4>
<p v-if="isFilled">{{feedbackEvaluation.otherComments ? feedbackEvaluation.otherComments : '--'}}</p> <p v-if="resultPage">{{feedbackEvaluation.otherComments ? feedbackEvaluation.otherComments : '--'}}</p>
<textarea v-else name="comments" rows="4" v-bind:value="feedbackEvaluation.otherComments" v-bind:disabled="isFilled"></textarea> <textarea v-else name="comments" rows="4" v-bind:value="feedbackEvaluation.otherComments" v-bind:disabled="resultPage"></textarea>
</div> </div>
<div class="signature"> <div class="signature">
<h4>Signature:</h4> <h4>Signature:</h4>
<div class="signature-container" v-if="!isFilled"> <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:width="drawWidth" height=200 ></canvas>
<div class="button-container"> <div class="button-container">
<button type="button" id="clear" class="button" v-on:click="clearSignature()">Clear</button> <button type="button" id="clear" class="button" v-on:click="clearSignature()">Clear</button>
@ -128,17 +129,19 @@
<img id="signature-img" v-bind:src="feedbackEvaluation.signatureDataUrl" v-bind:width="drawWidth" /> <img id="signature-img" v-bind:src="feedbackEvaluation.signatureDataUrl" v-bind:width="drawWidth" />
</div> </div>
</div> </div>
<template v-if="!isFilled"> <template v-if="!resultPage">
<button type="button" id="submit_a" class="form-btn submit-btn" v-on:click="submitForm">Finish & Submit</button> <button type="button" id="submit_a" class="form-btn submit-btn" v-on:click="submitForm">Finish & Submit</button>
<button type="button" id="back" class="form-btn cancel-btn" v-on:click="cancel">Cancel</button> <button type="button" id="back" class="form-btn cancel-btn" v-on:click="cancel" v-if="cityList.length > 1">Cancel</button>
</template> </template>
</form> </form>
<span id="currentCity" class="float-text" v-show="!cityListOpen">{{currentCity.cityName}}</span> <template v-if="cityList.length > 1">
<button class="float-button" v-on:click="toggleCityList">≡</button> <span id="currentCity" class="float-text" v-show="!cityListOpen">{{currentCity.cityName}}</span>
<ul v-bind:class="['expand-list', cityListOpen ? 'open' : '']"> <button class="float-button" v-on:click="toggleCityList" >≡</button>
<li v-for="city in cityList" v-bind:key="city.cityName" v-on:click="selectCity(city)" v-bind:class="{'active': city.cii_sn === currentCity.cii_sn, 'filled': (currentCity.feedback_id ? true : false)}">{{city.cityName}}</li> <ul v-bind:class="['expand-list', cityListOpen ? 'open' : '']">
</ul> <li v-for="city in cityList" v-bind:key="city.cityName" v-on:click="selectCity(city)" v-bind:class="{'active': city.cii_sn === currentCity.cii_sn, 'filled': (currentCity.feedback_Filled ? true : false)}">{{city.cityName}}</li>
</ul>
</template>
</template> </template>
</template> </template>
@ -247,6 +250,7 @@
}, },
}); });
const defaultHeaders = { mode: 'no-cors', 'Sec-Fetch-Mode': 'no-cors' }; const defaultHeaders = { mode: 'no-cors', 'Sec-Fetch-Mode': 'no-cors' };
// const HOST = `http://202.103.68.144:890/service-CooperateSOA`; // debug: 0
const HOST = `https://p9axztuwd7x8a7.mycht.cn/service-CooperateSOA`; const HOST = `https://p9axztuwd7x8a7.mycht.cn/service-CooperateSOA`;
const index = new Vue({ const index = new Vue({
el: '#app', el: '#app',
@ -317,6 +321,7 @@
return false; return false;
} }
this.loading = true; this.loading = true;
// console.log(this.resultPage);
this.getCityList(); this.getCityList();
}, },
getCityList() { getCityList() {
@ -336,17 +341,24 @@
const mergeCity = groupBy(res.cityList, ele => isEmpty(ele.tourGuideId) ? 'unknown' : ele.tourGuideId); const mergeCity = groupBy(res.cityList, ele => isEmpty(ele.tourGuideId) ? 'unknown' : ele.tourGuideId);
const mergeCityA = Object.keys(mergeCity).reduce((r, tgid) => { const mergeCityA = Object.keys(mergeCity).reduce((r, tgid) => {
if ( (tgid !== 'unknown')) { if ( (tgid !== 'unknown')) {
const uniqueCII_SN = mergeCity[tgid].map(v => v.cii_sn).filter((v, i, a) => a.indexOf(v) === i);
const uniqueCII_Name = mergeCity[tgid].map(v => v.cityName).filter((v, i, a) => a.indexOf(v) === i);
return r.concat(mergeCity[tgid].length > 1 ? [{ return r.concat(mergeCity[tgid].length > 1 ? [{
...mergeCity[tgid][0], ...mergeCity[tgid][0],
cii_sn: mergeCity[tgid].map(v => v.cii_sn).join('_'), cii_sn: uniqueCII_SN.join('_'),
cii_sn_arr: mergeCity[tgid].map(v => v.cii_sn), cii_sn_arr: uniqueCII_SN,
cityName: mergeCity[tgid].map((v) => v.cityName).join(' & '), cityName: uniqueCII_Name.join(' & '),
cities: mergeCity[tgid], feedback_Filled: mergeCity[tgid].reduce((r, v) => r+v.feedback_Filled, 0) > 0,
// cities: mergeCity[tgid],
}] : mergeCity[tgid][0] ); }] : mergeCity[tgid][0] );
} }
return r.concat(mergeCity[tgid]); return r.concat(mergeCity[tgid]);
}, []); }, []);
// console.log(mergeCityA);
that.cityList = mergeCityA; that.cityList = mergeCityA;
if (mergeCityA.length === 1) {
that.selectCity(mergeCityA[0]);
}
}); });
}, },
selectCity(city) { selectCity(city) {
@ -366,6 +378,7 @@
const selectedCity = Object.assign({}, city, _param); const selectedCity = Object.assign({}, city, _param);
// console.log(selectedCity); // console.log(selectedCity);
this.currentCity = selectedCity; this.currentCity = selectedCity;
this.feedbackItem.hotel = [];
if (selectedCity.cii_sn_arr) { if (selectedCity.cii_sn_arr) {
for (const iterator of selectedCity.cii_sn_arr) { for (const iterator of selectedCity.cii_sn_arr) {
this.getData(Object.assign({}, _param, { CITY_SN: iterator }), true); this.getData(Object.assign({}, _param, { CITY_SN: iterator }), true);
@ -417,7 +430,7 @@
if (itemGroup.A) { if (itemGroup.A) {
hotel = hotel.concat(itemGroup.A.map(function (ele) { hotel = hotel.concat(itemGroup.A.map(function (ele) {
var newEle = Object.assign({}, ele); var newEle = Object.assign({}, ele);
newEle.Describe = 'Hotel\n' + ele.name; newEle.Describe = `${ele.name} ${res.group[0].cityName}`;
return newEle; return newEle;
})); }));
that.currentCity[`city_${res.feedbackEvaluation[0].feedback_cii_sn}`] = hotel; that.currentCity[`city_${res.feedbackEvaluation[0].feedback_cii_sn}`] = hotel;
@ -436,9 +449,10 @@
that.group = res.group[0]; that.group = res.group[0];
// 已经填写过了 // 已经填写过了
that.isFilled = !isEmpty(res.feedbackEvaluation[0].feedbackId); // that.isFilled = !isEmpty(res.feedbackEvaluation[0].signatureDataUrl);
that.cityListPage = !that.resultPage; that.isFilled = that.currentCity.feedback_Filled || !isEmpty(res.feedbackEvaluation[0].signatureDataUrl);
if (!isEmpty(res.feedbackEvaluation[0].feedbackId)) { that.cityListPage = that.resultPage ? false : that.isFilled;
if (that.resultPage || that.isFilled) {
// that.signaturePad.fromDataURL(that.feedbackEvaluation.signatureDataUrl); // that.signaturePad.fromDataURL(that.feedbackEvaluation.signatureDataUrl);
} else { } else {
that.initSignature(); that.initSignature();

Write Preview
Loading…
Cancel
Save