<!DOCTYPE html>
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< style > body { font-family : Arial , sans-serif ; color : #333 } . text-primary { color : #b43c1a } h3 , h5 , p { margin : .5 em 0 } . header-m { background : #ad1818 ; color : #fff ; padding : .5 em } . header-pc { height : 90 px !important ; display : flex ; align-items : center ; justify-content : flex-start ; background : #ad1818 ; color : #fff ; padding : 0 20 px } . header-pc img { position : absolute ; top : 0 ; margin-right : 20 px ; height : 104 px ; width : auto ; border-radius : 0 0 3 px 3 px ; background-color : #fff ; box-shadow : 1 px 1 px 10 px 1 px rgba ( 77 , 77 , 77 , .7 ) ; -webkit- box-shadow : 1 px 1 px 10 px 1 px rgba ( 77 , 77 , 77 , .7 ) ; -moz- box-shadow : 1 px 1 px 10 px 1 px rgba ( 77 , 77 , 77 , .7 ) } . header-pc h1 { margin : 0 ; margin-left : 240 px } . form-container { width : 100 % ; max-width : 768 px ; margin : 0 auto ; margin-top : 1.5 em } . question { display : flex ; flex-direction : column ; align-items : start ; margin-bottom : 10 px } . question h4 { position : sticky ; top : 0 ; background-color : #fff ; margin-top : 0 ; padding-top : 1.33 em } . question-items { display : flex ; flex-direction : column ; align-items : start } . options { display : flex ; flex-direction : column ; align-items : start ; margin-bottom : 10 px } . 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 : 10 px } . radio-container input [ type = radio ] { display : none } . radio-container label { margin-left : 8 px } . radio-container input [ type = radio ] : checked + . radio-label { background-color : #d54e21 ; color : #fff } . radio-label { display : inline-block ; padding : 5 px 10 px ; border : 1 px solid #d54e21 ; border-radius : 20 px ; transition : all .3 s ease ; font-size : 14 px } label . radio-label svg { vertical-align : text - bottom } . feedback { margin-top : 10 px } . feedback textarea { width : 90 % ; padding : 10 px ; resize : vertical ; border : 1 px solid #d54e21 ; border-radius : 5 px } . form-btn { display : block ; width : 100 % ; padding : 10 px ; margin-top : 20 px ; border : none ; border-radius : 20 px ; cursor : pointer ; transition : all .3 s ease ; background : 0 0 ; border : 1 px solid #d54e21 ; color : #d54e21 } . submit-btn { background-color : #d54e21 ; color : #fff } . submit-btn : hover { background-color : #b43c1a } . cancel-btn : hover { background-color : #000000 11 } . info-container { display : flex ; flex-direction : column ; justify-content : space-between ; margin-bottom : 10 px } . info-item { margin-bottom : 10 px } . info-item p { color : #b43c1a } . signature-pad { border : 1 px solid #d54e21 ; border-radius : 5 px ; 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 : .5 em ; display : flex ; flex-direction : column ; justify-content : flex-start } . button { margin-top : 1 em ; padding : 10 px ; background-color : #d54e21 ; color : #fff ; border : none ; border-radius : 5 px ; 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 . options { flex : 1 1 auto } . options { flex-direction : row ; justify-content : flex-end } . info-container { flex-direction : row } . info-item { flex : 1 ; margin-right : 10 px ; 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 >
#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 : 100 vw ; height : 100 vh ; background-color : #000000 99 ; position : fixed ; left : 0 ; top : 0 ; display : flex } . lds-facebook { display : inline-block ; position : relative ; width : 80 px ; height : 80 px ; margin : auto } . lds-facebook div { display : inline-block ; position : absolute ; left : 8 px ; width : 16 px ; background : #fff ; animation : lds-facebook 1.2 s cubic-bezier ( 0 , .5 , .5 , 1 ) infinite } . lds-facebook div : nth-child ( 1 ) { left : 8 px ; animation-delay : -.24 s } . lds-facebook div : nth-child ( 2 ) { left : 32 px ; animation-delay : -.12 s } . lds-facebook div : nth-child ( 3 ) { left : 56 px ; animation-delay : 0 } @ keyframes lds-facebook { 0 % { top : 8 px ; height : 64 px } 100 % , 50 % { top : 24 px ; height : 32 px } } < / style >
< style > . city-page { display : flex ; flex-direction : column ; align-items : center } . city-list { list-style-type : none ; padding : 0 ; width : 200 px ; background-color : #fff ; border-radius : 5 px ; box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , .1 ) } . city-list li { padding : 20 px ; border-top : 1 px solid #d54e21 ; border-bottom : 1 px solid #d54e21 ; transition : background-color .3 s } . city-list li : hover { background-color : #d54e21 ; color : #fff } < / style >
< style > . float-button { position : fixed ; right : 20 px ; bottom : 120 px ; background-color : transparent ; color : #d54e21 ; border : 1 px solid #d54e21 ; border-radius : 50 % ; width : 60 px ; height : 60 px ; text-align : center ; line-height : 60 px ; font-size : 24 px ; cursor : pointer ; box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , .1 ) ; z-index : 1 } . float-button : hover { background-color : #d54e21 ; color : #fff } . float-text { position : fixed ; right : 20 px ; bottom : 190 px ; color : #d54e21 ; font-size : 18 px ; text-align : right ; z-index : -1 } . expand-list { list-style-type : none ; position : fixed ; right : 20 px ; bottom : 190 px ; width : 200 px ; background-color : #fff ; border-radius : 5 px ; box-shadow : 0 0 10 px rgba ( 0 , 0 , 0 , .1 ) ; padding : 0 ; max-height : 0 ; overflow : hidden ; opacity : 0 ; transition : max-height .5 s ease , opacity .5 s ease } . expand-list . open { max-height : 500 px ; opacity : 1 } . expand-list li { padding : 20 px ; border-bottom : 1 px solid #d54e21 ; transition : background-color .3 s } . expand-list li : last-child { border-bottom : none } . expand-list li . active { color : #d54e21 } . expand-list li : hover { background-color : #d54e21 ; color : #fff } < / style >
< style > . star-rating { direction : rtl ; display : inline-block } . star-rating input [ type = radio ] { display : none } . star-rating label { font-size : 30 px ; 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 : 15 px ; vertical-align : middle ; color : #d54e21 } < / style >
< script src = "./utils.js" > < / script >
< script src = "./vue@2.js" > < / script >
< script src = "./signature_pad.umd.min.js" > < / script >
< / head >
< body >
< div id = "app" >
< div class = "header-pc" >
< a href = "https://www.asiahighlights.com/" v-if = "webcode=='ah'" >
< img src = "https://data.asiahighlights.com/pic/logo-ah.png" alt = "Logo" width = "130" height = "104" >
< / a >
< a href = "https://www.globalhighlights.com/" v-if = "webcode=='gh'" >
< img src = "https://data.chinahighlights.com/image/aboutus/logo-gh.png" alt = "Logo" width = "130" height = "104" >
< / a >
< h1 > One Minute Feedback - Help Us Serve You Better！ < / h1 >
< / div >
< div class = "header-m" >
< h1 > One Minute Feedback - Help Us Serve You Better！ < / h1 >
< / div >
< div class = "form-container" id = "main" >
< div id = "result" v-if = "error" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "50" height = "50" fill = "currentColor" class = "bi bi-x-circle-fill" viewBox = "0 0 16 16" >
< path d = "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.5-4.5a.5.5 0 0 0-.707 0L8 7.293 5.207 4.5a.5.5 0 0 0-.707.707L7.293 8l-2.793 2.793a.5.5 0 0 0 .707.707L8 8.707l2.793 2.793a.5.5 0 0 0 .707-.707L8.707 8l2.793-2.793a.5.5 0 0 0 0-.707z" / >
< / svg >
< h2 > Error!< / h2 >
< p > {{errorMsg}}< / p >
< / div >
< template v-else >
< div id = "result" v-if = "isFilled" >
< svg xmlns = "http://www.w3.org/2000/svg" width = "50" height = "50" fill = "currentColor" class = "bi bi-check-circle-fill" viewBox = "0 0 16 16" >
< path d = "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 10.417 5.384 8.323A.75.75 0 0 0 4.303 9.7l2.693 2.677a.75.75 0 0 0 1.086-.02l5.17-5.85a.75.75 0 0 0-.02-1.107z" / >
< / svg >
< h2 > Thank you for your feedback!< / h2 >
<!-- <p>All actions are done.</p> -->
< / div >
< 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)" >
< li > {{city.cityName}}< / li >
< / ul >
< / div >
< / template >
< template v-if = "!cityListPage" >
<!-- <h1>One Minute Feedback - Help Us Serve You Better！ -->
< 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 >
< div class = "info-container" >
< div class = "info-item" >
< h3 > Reference NO.:< / h3 >
< p id = "referenceNo" > {{group.groupNumber}}< / p >
< / div >
< div class = "info-item" >
< h3 > Guide's Name:< / h3 >
< p id = "guideName" > {{group.tourGuideName}}< / p >
< / div >
< div class = "info-item" >
< h3 > City:< / h3 >
< p id = "city" > {{group.cityName}}< / p >
< / div >
< / div >
< hr >
< p > Thank you for completing the Feedback Evaluation. Once submitted the tour guide would not be able to view your comments. < / p >
< form class = "form-container" id = "myForm" action = "/sub" method = "post" >
< div class = "question" >
< 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" >
< 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" > < / options-item >
< options-item-star v-else question = "guide" si = "1" v-bind:qitem = "q" v-bind:qi = "qi" v-bind:key = "q.id" > < / options-item-star >
< / div >
< / div >
< div class = "question" >
< 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" > < / 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" > < / options-item >
< / div >
< / div >
< div class = "question" v-if = "feedbackItem.experience.length > 0" >
< h4 > 3. General Experience with:< / h4 >
< div class = "question-items" v-for = "(q, qi) in feedbackItem.experience" v-bind:key = "q.id" >
< 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" > < / 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" > < / options-item >
< / 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 >
< judgment-item question = "photo" v-bind:qitem = "{id: 'photo_permission', rate: feedbackEvaluation.usePhotos}" si = "photo" qi = "photo" key = "photo" > < / judgment-item >
< / div >
< div class = "feedback question" >
< h4 > Any other comments that you would like to share with us?< / h4 >
< textarea name = "comments" rows = "4" v-bind:value = "feedbackEvaluation.otherComments" > < / textarea >
< / div >
< div class = "signature" >
< h4 > Signature:< / h4 >
< div class = "signature-container" >
< canvas id = "signature-pad" class = "signature-pad" width = 'auto' height = 200 > < / canvas >
< div class = "button-container" >
< button type = "button" id = "clear" class = "button" v-on:click = "clearSignature()" > Clear< / button >
< / div >
< / div >
< / div >
< 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 >
< / form >
< span id = "currentCity" class = "float-text" v-show = "!cityListOpen" > {{group.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}" > {{city.cityName}}< / li >
< / ul >
< / template >
< / template >
< div id = "loading-mask" v-if = "loading" >
< div class = "lds-facebook" >
< div > < / div >
< div > < / div >
< div > < / div >
< / div >
< / div >
< / div >
< / div >
< script defer >
/**
*
*/
const thumbsUp = '< svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 1024 1024" fill = "currentColor" stroke = "currentColor" stroke-width = "1" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M693.07 289.952v0.17l0.257-4.69-0.256 4.605z m309.823 164.932c-32.406-58.844-82.04-92.103-149.581-95.343-40.934-1.877-81.869-0.683-122.889-0.853l-5.543-0.17c0-0.939 0-1.45 0.17-1.962a778.607 778.607 0 0 0 11.855-88.35c2.302-28.143 3.837-56.37 4.35-84.598 0.425-24.39 2.728-48.866-0.854-73a121.95 121.95 0 0 0-69.247-96.281c-43.408-21.405-86.56-18.591-127.238 7.59-30.274 19.444-48.61 47.757-55.432 83.233-2.985 15.095-2.303 30.275-2.303 45.54 0.171 40.508-7.334 79.566-26.266 115.469-49.121 92.87-126.64 141.224-232.217 143.185-40.764 0.768-81.613 0.17-122.462 0.085-12.11 0-23.964 1.45-35.392 5.458C26.437 430.237 0 467.761 0 514.068v404.483c0 13.9 1.876 27.46 7.42 40.082 17.055 38.888 46.648 61.913 89.288 63.704 44.09 1.876 88.35 0.597 132.525 0.682 4.264 0 8.528-0.597 12.28-2.558 10.66-5.714 14.498-14.924 14.498-26.437-0.086-173.46 0-346.92 0-520.293 0-4.69-1.962-10.831 0.852-13.645 2.388-2.559 8.528-1.535 12.963-2.218a303.682 303.682 0 0 0 131.075-49.462 304.45 304.45 0 0 0 120.672-157.768c11.939-34.965 16.373-70.953 15.862-107.709-0.086-8.784-0.341-17.567 0.853-26.351a76.752 76.752 0 0 1 152.566 13.218c-0.086 45.71-1.28 91.335-5.288 136.875-3.155 36.67-6.822 73.34-18.761 108.561a25.072 25.072 0 0 0-0.939 13.56c2.815 13.048 12.793 20.637 27.29 20.723 49.377 0.17 98.584 0.511 147.876 0.597 16.885 0.085 33.43 1.705 49.292 7.93a128.346 128.346 0 0 1 76.41 156.575c-7.845 26.863-17.056 53.3-26.522 79.651-32.918 92.103-68.735 183.097-104.297 274.176a65.24 65.24 0 0 1-24.134 29.25c-15.692 11.258-33.686 14.157-52.448 14.157H388.536c-2.388 0-4.776 0-7.164 0.256a25.413 25.413 0 0 0-19.273 38.717c5.8 9.381 14.839 12.28 25.584 12.28 124.594-0.17 249.274-0.085 373.868-0.085 30.7 0 58.843-7.845 83.489-26.607 16.032-12.195 29.507-26.693 37.011-45.966 13.645-34.965 27.46-69.93 41.02-105.065a5069.898 5069.898 0 0 0 85.28-232.218c6.993-20.978 13.474-42.213 14.668-64.471a171.498 171.498 0 0 0-20.126-93.808zM199.214 972.022c-31.468-0.17-62.937 0-94.49-0.085-31.213 0-53.556-22.003-53.556-53.13v-405.08c0-30.616 22.002-52.874 52.703-53.044 32.15-0.256 64.301 0 96.452-0.17 4.434 0 4.35 1.96 4.35 5.116v250.723l0.084 250.297c0 4.605-1.194 5.373-5.543 5.373z" > < / path > < / svg > ';
const thumbsDown = '< svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 1024 1024" fill = "currentColor" stroke = "currentColor" stroke-width = "1" stroke-linecap = "round" stroke-linejoin = "round" > < path d = "M48.464 631.08700001c48.699 62.928 143.57 58.704 250.284 56.35599999-2.209 25.413-4.421 50.832-6.63 76.246-19.954 124.422 6.40100001 225.148 107.739 243.653 25.172 4.597 57.261 1.206 76.246-6.63 50.216-20.73 66.13900001-69.316 76.244-130.943 6.03-36.774-4.886-78.582 3.314-111.053 10.411-41.21899999 42.025-71.825 74.588-91.163 39.233-23.301 89.891-37.523 142.546-46.411 84.102-14.197 199.811 28.752 228.737-39.78 12.732-30.167 4.972-88.664 4.97199999-127.629 0-98.887 0-197.80700001 1e-8-296.694 0.005-56.361 3.995-104-28.178-127.629-32.115-23.589-175.184-12.1-232.052-11.602 0 183.962 0 367.98499999 0 551.951-108.558 5.808-220.308 82.921-245.311 174.039-18.901 68.882 15.14099999 176.963-44.751 203.87300001-126.281 56.74-118.138-130.886-104.42199999-217.13100001 3.316-33.147 6.63-66.303 9.94499999-99.451 0-1.65700001 0-3.314 0-4.97200001-88.64 3.39599999-225.769 27.517-270.174-31.49199999-24.46-32.502-25.201-96.493-11.603-142.546 25.901-87.719 115.413-308.391 174.039-354.708 35.045-27.688 60.869-9.38899999 114.369-18.232 97.231-1.658 194.49-3.314 291.721-4.972 0-18.784 0-37.573 0-56.354-131.482 1.657-263.004 3.314-394.486 4.971-26.544 7.717-60.47599999 39.373-76.246 59.671-25.17 32.401-38.386 72.814-59.67100001 109.396-42.378 72.842-80.09 159.218-104.42299999 246.97-18.87300001 68.061-11.397 147.559 23.206 192.269zM802.631 74.165c46.958 0 93.93099999 0 140.89-1e-8 15.929 26.039 6.63 94.318 6.62999999 132.60100001-0.553 117.671-1.106 235.37700001-1.65699999 353.05-22.059 12.835-111.344 5.428-145.861 4.972 0-163.524 0-327.101 0-490.623z" > < / path > < / svg > ';
const happyFace = '< svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "1" stroke-linecap = "round" stroke-linejoin = "round" > < circle cx = "12" cy = "12" r = "10" > < / circle > < path d = "M8 14s1.5 2 4 2 4-2 4-2" > < / path > < line x1 = "9" y1 = "9" x2 = "9.01" y2 = "9" > < / line > < line x1 = "15" y1 = "9" x2 = "15.01" y2 = "9" > < / line > < / svg > ';
const NeutralFace = '< svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "1" stroke-linecap = "round" stroke-linejoin = "round" > < circle cx = "12" cy = "12" r = "10" > < / circle > < line x1 = "9" y1 = "9" x2 = "9.01" y2 = "9" > < / line > < line x1 = "15" y1 = "9" x2 = "15.01" y2 = "9" > < / line > < line x1 = "9" y1 = "15" x2 = "15" y2 = "15" > < / line > < / svg > ';
const sadFace = '< svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "1" stroke-linecap = "round" stroke-linejoin = "round" > < circle cx = "12" cy = "12" r = "10" > < / circle > < path d = "M16 16s-1.5-2-4-2-4 2-4 2" > < / path > < line x1 = "9" y1 = "9" x2 = "9.01" y2 = "9" > < / line > < line x1 = "15" y1 = "9" x2 = "15.01" y2 = "9" > < / line > < / svg > ';
const rateList = [
{ name: 'Excellent', value: 5, url: './img/thumbsup.svg', svg: thumbsUp },
{ name: 'Very Good', value: 4, url: './img/happyface.svg', svg: happyFace },
{ name: 'Fair', value: 3, url: './img/neutralface.svg', svg: NeutralFace },
{ name: 'Poor', value: 2, url: './img/sadface.svg', svg: sadFace },
{ name: 'Unacceptable', value: 1, url: './img/thumbsdown.svg', svg: thumbsDown }
];
const rateListMapped = rateList.reduce((r, v) => Object.assign(r, { [v.value + '']: v }), {});
const trueFalseList = [
{ name: 'Yes', value: 1, url: './img/thumbsup.svg', svg: thumbsUp },
{ name: 'No', value: 0, url: './img/thumbsdown.svg', svg: thumbsDown },
];
const webList = {
"default": 'ah',
"www.asiahighlights.com": 'ah',
"www.globalhighlights.com": 'gh',
};
< / script >
< script defer >
// 定义名为 options-item 的新组件
Vue.component('options-item', {
props: ['question', 'si', 'qi', 'qitem'],
template: '< div :class = "[\'options\', isWideScreen ? \'\': \'options-row-reverse\']" > ' +
// 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-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 > ',
data() {
return {
rateList: rateList,
selectItem: String(this.qitem.rate),
}
},
computed: {
isWideScreen() {
return window.innerWidth >= 768; // Adjust the threshold as needed
},
selectedRatingText() {
return (rateListMapped[this.selectItem] & & rateListMapped[this.selectItem].name) || '';
},
},
});
Vue.component('options-item-star', {
props: ['question', 'si', 'qi', 'qitem'],
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-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 > ' +
'< / div > ',
data() {
return {
rateList: rateList,
selectItem: String(this.qitem.rate),
}
},
computed: {
selectedRatingText() {
return (rateListMapped[this.selectItem] & & rateListMapped[this.selectItem].name) || '';
// return rateListMapped[this.selectItem]?.name || '';
},
},
});
// yes or no
Vue.component('judgment-item', {
props: ['question', 'si', 'qi', 'qitem'],
template: '< div class = "options options-row" > ' +
'< div class = "radio-container" v-for = "item in rateList" > ' +
'< input type = "radio" v-bind:id = "item.value + \'-\' + si + \'-\' + qi" v-bind:name = "qitem.id" v-bind:value = "item.value" v-bind:checked = "qitem.rate===item.value" > ' +
'< label v-bind:for = "item.value+\'-\' + si + \'-\' + qi" class = "radio-label" > < span v-html = "item.svg" > < / span > {{item.name}}< / label > ' +
'< / div > ' +
'< / div > ',
data() {
return {
rateList: trueFalseList
}
},
});
const defaultHeaders = { mode: 'no-cors', 'Sec-Fetch-Mode': 'no-cors' };
const HOST = `https://p9axztuwd7x8a7.mycht.cn/service-CooperateSOA`;
const index = new Vue({
el: '#app',
computed: {
isWideScreen() {
return window.innerWidth >= 768; // Adjust the threshold as needed
},
},
data() {
return {
timer: null,
error: false,
errorMsg: '',
webcode: 'ah',
param: {},
loading: false,
cityListPage: true,
cityList: [],
currentCity: {},
cityListOpen: false,
isFilled: false,
feedbackItemList: [],
feedbackItem: { guide: [], driver: [], experience: [] },
tourGuideList: [],
feedbackEvaluation: {},
group: {},
showPhotos: false,
signaturePad: null,
};
},
created() {
console.log('invoke vue', typeof this);
this.initData();
},
methods: {
initData() {
var hostname = window.location.hostname.toLowerCase();
this.webcode = webList[hostname] || webList.default;
var urlParams = new URLSearchParams(window.location.search);
for (const param of urlParams) {
this.param[param[0]] = param[1];
}
if (!(this.param.v & & this.param.g)) {
this.error = true;
this.errorMsg = 'Invalid URL';
return false;
}
this.loading = true;
this.getCityList();
},
getCityList() {
if (!(this.param.v & & this.param.g)) {
return false;
}
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: 1 },
{ headers: { ...{} } }
).then((res) => {
that.loading = false;
that.cityList = res.cityList;
that.error = res.cityList.length === 0;
that.errorMsg = 'No city found';
});
},
selectCity(city) {
this.cityListPage = false;
this.loading = true;
const _param = {
GRI_SN: this.param.g,
VEI_SN: this.param.v,
CITY_SN: city.cii_sn,
lgc: 1
};
this.currentCity = Object.assign({}, city, _param);
this.getData(_param);
window.scrollTo({ top: 100, behavior: 'smooth' });
this.cityListOpen = false;
},
initSignature() {
var canvas = document.getElementById('signature-pad');
this.signaturePad = new SignaturePad(canvas, {
penColor: "rgb(50, 50, 50)",
});
},
clearSignature() {
var data = this.signaturePad.toDataURL("image/svg+xml");
console.log(data);
this.signaturePad.clear();
},
getData(param) {
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;
if (res.errcode !== 0) {
that.error = true;
that.errorMsg = 'Data error.';
return false;
}
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']);
}
if (itemGroup.C) {
experience = experience.concat(itemGroup.C);
}
if (itemGroup.A) {
experience = experience.concat(itemGroup.A.map(function (ele) {
var newEle = Object.assign({}, ele);
newEle.Describe = 'Hotel\n' + ele.name;
return newEle;
}));
}
that.feedbackItem.experience = experience;
that.feedbackItemList = res.feedbackItemList;
that.tourGuideList = res.tourGuideList;
that.feedbackEvaluation = res.feedbackEvaluation[0];
that.group = res.group[0];
// that.signaturePad.fromDataURL(that.feedbackEvaluation.signatureDataUrl); // debug: -1
// that.isFilled = !isEmpty(res.feedbackEvaluation[0].feedbackId); // 已经填写过了
that.isFilled = false;
that.showPhotos = res.group[0].inTheEnd;
// alert("Thank you for completing the Feedback Evaluation. Once submitted the tour guide would not be able to view your comments. ");
that.initSignature();
});
},
submitForm() {
const that = this;
if (that.signaturePad.isEmpty()) {
alert("Please provide a signature first.");
event.preventDefault();
} else {
that.loading = true;
// var data = that.signaturePad.toDataURL(); // default: image/png
var data = that.signaturePad.toDataURL("image/svg+xml");
var form = document.getElementById('myForm');
// Create a FormData instance
var formData = new FormData(form);
formData.append('signature', data);
// Convert the FormData to a plain object
var formValues = Array.from(formData.entries()).reduce((obj, [key, value]) => {
obj[key] = value;
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, };
});
// Send data to server along with the form data...
// Submit the form manually
// form.submit();
// console.log(formValues); return;
postForm(
`${HOST}/save_feedback`,
{
EOI_SN: that.group.EOI_SN,
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,
use_the_photos: formValues.photo_permission || -1,
other_comments: formValues.comments,
service_item_answer: JSON.stringify(rateArr),
signature_data_url: formValues.signature,
feedback_id: that.feedbackEvaluation.feedbackId || undefined,
},
{ headers: { ...{} } }
).then(res => {
that.loading = false;
if (res.errcode == 0) {
that.isFilled = true;
that.cityListPage = true;
that.currentCity = {};
} else { }
});
}
},
cancel() {
this.cityListPage = true;
this.currentCity = {};
},
toggleCityList() {
this.cityListOpen = !this.cityListOpen;
},
},
});
< / script >
< / body >
< / html >
