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

标识是否已填写; 相同导游的城市合并

Browse Source
master
Lei OT 2 years ago
parent 5dd052645f
commit 5c2123fe55
1 changed files with 92 additions and 65 deletions
Show Stats Download Patch File Download Diff File

109
index.html
Unescape Escape View File

@ -9,8 +9,8 @@
#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:200px;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>.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}.expand-list{list-style-type:none;position:fixed;right:20px;bottom:190px;width:200px;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>.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>.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>
<script src="./vue@2.js"></script>
@ -54,7 +54,7 @@
<template v-if="cityListPage">
<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.cii_sn" 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>
</ul>
</div>
@ -134,10 +134,10 @@
</template>
</form>
<span id="currentCity" class="float-text" v-show="!cityListOpen">{{group.cityName}}</span>
<span id="currentCity" class="float-text" v-show="!cityListOpen">{{currentCity.cityName}}</span>
<button class="float-button" v-on:click="toggleCityList">≡</button>
<ul v-bind:class="['expand-list', cityListOpen ? 'open' : '']">
<li v-for="city in cityList" v-bind:key="city.cii_sn" v-on:click="selectCity(city)" v-bind:class="{'active': city.cii_sn === currentCity.cii_sn, 'filled': (currentCity.feedback_id ? true : false)}">{{city.cityName}}</li>
<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>
</template>
@ -191,7 +191,7 @@
// template: '<div :class="[\'options\', isWideScreen ? \'\': \'options-row1\']">' +
'<span class="rate-meaning" v-if="!isWideScreen"><span>{{selectedRatingText}}</span></span>' +
'<div class="radio-container" v-for="item in rateList">' +
'<input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.id" v-bind:value="item.value" v-bind:disabled="disabled" v-model="selectItem" >' +
'<input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.type+\'-\'+qitem.syc_sn+\'-\'+qitem.sn" v-bind:value="item.value" v-bind:disabled="disabled" v-model="selectItem" >' +
'<label v-bind:for="item.value+\'-\' + si + \'-\' + qi" class="radio-label"><span v-html="item.svg"></span> {{isWideScreen ? item.name : ""}}</label>' +
'</div>' +
'</div>',
@ -213,7 +213,7 @@
Vue.component('options-item-star', {
props: ['question', 'si', 'qi', 'qitem', 'disabled'],
template: '<div><div class="star-rating">' +
'<template v-for="item in rateList"><input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.id" v-bind:value="item.value" v-bind:disabled="disabled" v-model="selectItem" >' +
'<template v-for="item in rateList"><input type="radio" v-bind:id="item.value + \'-\' + si + \'-\' + qi" v-bind:name="\'rate-\'+qitem.type+\'-\'+qitem.syc_sn+\'-\'+qitem.sn" v-bind:value="item.value" v-bind:disabled="disabled" v-model="selectItem" >' +
'<label v-bind:for="item.value+\'-\' + si + \'-\' + qi" :class="{\'checked\': selectItem>=item.value}">★</label></template>' +
'</div>' +
'<span class="rate-meaning"><span id="rate-text">{{selectedRatingText}}</span></span>' +
@ -275,9 +275,11 @@
currentCity: {},
cityListOpen: false,
feedbackCity: {},
isFilled: false,
feedbackItemList: [],
feedbackItem: { guide: [], driver: [], experience: [] },
feedbackItem: { guide: [], driver: [], experience: [], hotel: [] },
tourGuideList: [],
feedbackEvaluation: {},
group: {},
@ -324,32 +326,53 @@
const that = this;
get(
`${HOST}/get_feedback_city`,
// g=338947&v=30008&e=245176&c=1186
{ GRI_SN: that.param.g, VEI_SN: that.param.v, lgc: this.param.l },
{ headers: { ...{} } }
).then((res) => {
that.loading = false;
that.cityList = res.cityList;
console.log(groupBy(res.cityList, 'tourGuideId'));
that.error = res.cityList.length === 0;
that.errorMsg = 'No city found';
const mergeCity = groupBy(res.cityList, ele => isEmpty(ele.tourGuideId) ? 'unknown' : ele.tourGuideId);
const mergeCityA = Object.keys(mergeCity).reduce((r, tgid) => {
if ( (tgid !== 'unknown')) {
return r.concat(mergeCity[tgid].length > 1 ? [{
...mergeCity[tgid][0],
cii_sn: mergeCity[tgid].map(v => v.cii_sn).join('_'),
cii_sn_arr: mergeCity[tgid].map(v => v.cii_sn),
cityName: mergeCity[tgid].map((v) => v.cityName).join(' & '),
cities: mergeCity[tgid],
}] : mergeCity[tgid][0] );
}
return r.concat(mergeCity[tgid]);
}, []);
that.cityList = mergeCityA;
});
},
selectCity(city) {
window.scrollTo({ top: 100, behavior: 'smooth' });
this.cityListOpen = false;
if (this.currentCity.cii_sn === city.cii_sn) {
return false;
}
this.cityListPage = false;
this.loading = true;
const _param = {
GRI_SN: this.param.g,
VEI_SN: this.param.v,
CITY_SN: city.cii_sn,
// CITY_SN: city.cii_sn,
lgc: this.param.l
};
this.currentCity = Object.assign({}, city, _param);
this.getData(_param);
window.scrollTo({ top: 100, behavior: 'smooth' });
this.cityListOpen = false;
const selectedCity = Object.assign({}, city, _param);
// console.log(selectedCity);
this.currentCity = selectedCity;
if (selectedCity.cii_sn_arr) {
for (const iterator of selectedCity.cii_sn_arr) {
this.getData(Object.assign({}, _param, { CITY_SN: iterator }), true);
}
} else {
this.getData(Object.assign({}, _param, { CITY_SN: selectedCity.cii_sn }));
}
},
initSignature() {
var canvas = document.getElementById('signature-pad');
@ -362,16 +385,11 @@
// console.log(data);
this.signaturePad.clear();
},
getData(param) {
getData(param, continually = false) {
const that = this;
get(
// `${HOST}/feedback/customer_feedback`,
`${HOST}/get_feedback_service_item`,
// {group_id: 69291, tour_guide_id: 730},
// { group_id: that.param.g, tour_guide_id: that.param.tg },
// g=338947&v=30008&e=245176&c=1186
param,
// { GRI_SN: that.param.g, VEI_SN: that.param.v, EOI_SN: that.param.e, CITY_SN: that.param.c, lgc: 1 },
{ headers: { ...{} } }
).then((res) => {
that.loading = false;
@ -380,13 +398,11 @@
that.errorMsg = 'Data error.';
return false;
}
that.feedbackCity[`city_${res.feedbackEvaluation[0].feedback_cii_sn}`] = res;
const itemGroup = groupBy(res.feedbackItemList, ele => ele.type);
that.feedbackItem.guide = itemGroup.W ? itemGroup.W : [];
that.feedbackItem.driver = itemGroup.Y ? itemGroup.Y : [];
// that.feedbackItem.experience = [
// ...(itemGroup['7'] || []),
// ...(itemGroup.C || []),
// ...(itemGroup.A || []).map(ele => ({ ...ele, Describe: 'Hotel\n' + ele.name })),];
let experience = [];
if (itemGroup['7']) {
experience = experience.concat(itemGroup['7']);
@ -397,14 +413,22 @@
if (itemGroup.G) {
experience = experience.concat(itemGroup.G);
}
let hotel = [];
if (itemGroup.A) {
experience = experience.concat(itemGroup.A.map(function (ele) {
hotel = hotel.concat(itemGroup.A.map(function (ele) {
var newEle = Object.assign({}, ele);
newEle.Describe = 'Hotel\n' + ele.name;
return newEle;
}));
that.currentCity[`city_${res.feedbackEvaluation[0].feedback_cii_sn}`] = hotel;
}
if (continually) {
const mergeHotel = [].concat(that.feedbackItem.hotel, hotel);
that.feedbackItem.experience = [].concat(experience, mergeHotel);
that.feedbackItem.hotel = mergeHotel;
} else {
that.feedbackItem.experience = [].concat(experience, hotel);
}
that.feedbackItem.experience = experience;
that.feedbackItemList = res.feedbackItemList;
that.tourGuideList = res.tourGuideList;
@ -428,9 +452,9 @@
submitForm() {
const that = this;
if (that.signaturePad.isEmpty()) {
alert("Please provide a signature first.");
event.preventDefault();
if (that.signaturePad?.isEmpty()) {
// alert("Please provide a signature first.");
} else {
that.loading = true;
// var data = that.signaturePad.toDataURL(); // default: image/png
@ -446,14 +470,14 @@
return obj;
}, {});
// Print the form values to the console
var rateArr = that.feedbackItemList.map(ele => {
return { id: ele.id, sn: ele.sn, rate: formValues[`rate-${ele.id}`] || 0, };
const citySNList = that.currentCity.cii_sn_arr || [that.currentCity.cii_sn]
for (const iterator of citySNList) {
const rateArr = that.feedbackCity[`city_${iterator}`].feedbackItemList.map(ele => {
return { id: ele.id, rate: formValues[`rate-${ele.type}-${ele.syc_sn}-${ele.sn}`] || 0, };
});
// Send data to server along with the form data...
// Submit the form manually
// form.submit();
// console.log(formValues); return;
// console.log(formValues, rateArr);
// continue;
postForm(
`${HOST}/save_feedback`,
{
@ -461,13 +485,14 @@
GRI_SN: that.currentCity.GRI_SN,
VEI_SN: that.currentCity.VEI_SN,
// country_id:,
city_sn: that.currentCity.cii_sn,
tour_guide_id: that.currentCity.tourGuideId,
// tour_guide_id: that.currentCity.tourGuideId,
tour_guide_id: that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0]?.tourGuideId || undefined,
city_sn: iterator,
use_the_photos: formValues.photo_permission || -1,
other_comments: formValues.comments,
feedback_id: that.feedbackCity[`city_${iterator}`].feedbackEvaluation[0]?.feedbackId || undefined,
service_item_answer: JSON.stringify(rateArr),
signature_data_url: formValues.signature,
feedback_id: that.feedbackEvaluation.feedbackId || undefined,
},
{ headers: { ...{} } }
).then(res => {
@ -478,6 +503,8 @@
that.currentCity = {};
} else { }
});
}
}
},

Write Preview
Loading…
Cancel
Save