clean
Lei OT
2 years ago
parent
97c2134455
commit
61e2568931
@ -0,0 +1 @@
|
||||
index-*.html
|
||||
@ -1,6 +0,0 @@
|
||||
# GHH-feedback
|
||||
海外供应商反馈表
|
||||
|
||||
1. [供应商平台 反馈表录入地址](http://p.mycht.cn/php/gys.php/welcome/feedback_detail/256910/215427)
|
||||
2. [海外反馈表案例-老版本](https://www.chinahighlights.com/customerservice/feedback/PostTourSurveyFormToWLGH.asp?LGC=1&COLI_SN=988185&MEI_SN=954295&Email=jennroth18@hotmail.com&ToC=0&ShowType=&page_class=4&dei_sn=28&country=30,490)
|
||||
3. [海外反馈表录入地址](https://www.asiahighlights.com/customerfeedback/index.html?g=338947&v=30008)
|
||||
@ -1,104 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Questionnaire</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.container {
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.question {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.radio-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.radio-container input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.radio-container label {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.radio-container input[type="radio"]:checked+.radio-label {
|
||||
background-color: #d54e21;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
border: 1px solid #d54e21;
|
||||
border-radius: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.question label {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Questionnaire</h1>
|
||||
<form>
|
||||
<h2>Question 1</h2>
|
||||
<div class="question">
|
||||
<div class="radio-container">
|
||||
<input type="radio" id="excellent" name="question1">
|
||||
<label for="excellent" class="radio-label">👍 Excellent</label>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input type="radio" id="veryGood" name="question1">
|
||||
<label for="veryGood" class="radio-label">🙂 Very Good</label>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input type="radio" id="fair" name="question1">
|
||||
<label for="fair" class="radio-label">😐 Fair</label>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input type="radio" id="poor" name="question1">
|
||||
<label for="poor" class="radio-label">🙁 Poor</label>
|
||||
</div>
|
||||
<div class="radio-container">
|
||||
<input type="radio" id="unacceptable" name="question1">
|
||||
<label for="unacceptable" class="radio-label">👎 Unacceptable</label>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Question 2</h2>
|
||||
<div class="question">
|
||||
<label><input type="radio" name="question2" value="option5"><span> 😃 Excellent</span></label>
|
||||
<label><input type="radio" name="question2" value="option4"><span> 🙂 Very Good</span></label>
|
||||
<label><input type="radio" name="question2" value="option3"><span> 😐 Fair</span></label>
|
||||
<label><input type="radio" name="question2" value="option2"><span> ☹️ Poor</span></label>
|
||||
<label><input type="radio" name="question2" value="option1"><span> 😠 Unacceptable</span></label>
|
||||
</div>
|
||||
<h2>Feedback</h2>
|
||||
<textarea name="feedback" rows="4" cols="50" id="feedback"></textarea><br>
|
||||
<input type="submit" value="Submit">
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
// var feedback = document.getElementById("feedback");
|
||||
// feedback.onfocus = function() {
|
||||
// alert("Please provide your valuable feedback!");
|
||||
// }
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,198 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>test</title>
|
||||
<link rel="stylesheet" href="./grid.css">
|
||||
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
|
||||
<!-- <script src="https://unpkg.com/unfetch/polyfill"></script> -->
|
||||
<script src="./utils.js"></script>
|
||||
<script src="./vue@2.js"></script>
|
||||
</head>
|
||||
<script>
|
||||
</script>
|
||||
<style>
|
||||
/* @font-face {
|
||||
font-family: 'DIN';
|
||||
src: url('/dashboard/styles/DIN-BOLD-2.TTF');
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
} */
|
||||
|
||||
body {
|
||||
font-size: 12px;
|
||||
font-family: DIN;
|
||||
}
|
||||
|
||||
#main {
|
||||
/* padding-right: 50px !important;
|
||||
padding-left: 50px !important; */
|
||||
margin-top: 12px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.fz-22 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.z {
|
||||
color: #E75A25;
|
||||
}
|
||||
|
||||
.d {
|
||||
color: #5EAD7D;
|
||||
}
|
||||
|
||||
.info {
|
||||
color: #343240;
|
||||
}
|
||||
|
||||
/* loading */
|
||||
#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
|
||||
}
|
||||
}
|
||||
|
||||
/* end loading */
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<input id="debug" type="checkbox" />
|
||||
<label for="debug">Show grid lines</label>
|
||||
|
||||
<div class="content">
|
||||
<div>Content</div>
|
||||
<div class="popout">Popout</div>
|
||||
<div class="feature">Feature</div>
|
||||
<div class="full">Full</div>
|
||||
</div>
|
||||
|
||||
<div class="content debug">
|
||||
<div class="full"></div>
|
||||
<div class="feature"></div>
|
||||
<div class="popout"></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid" id="main">
|
||||
<template>
|
||||
<div v-for="(item, i) in feedbackItemList" :key="item.id">
|
||||
<div>{{item.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<div id="loading-mask" v-if="loading">
|
||||
<div class="lds-facebook">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script defer>
|
||||
// const HOST = `http://discovery.mycht.cn/api/index.php`;
|
||||
const HOST = `http://localhost:3001/api/index.php`;
|
||||
const defaultHeaders = { mode: 'no-cors', 'Sec-Fetch-Mode': 'no-cors' };
|
||||
|
||||
const rateList = [
|
||||
{ name: 'Excellent', value: 5 },
|
||||
{ name: 'Very Good', value: 4 },
|
||||
{ name: 'Fair', value: 3 },
|
||||
{ name: 'Poor', value: 2 },
|
||||
{ name: 'Unacceptable', value: 1 }
|
||||
];
|
||||
const rateListMapped = rateList.reduce((r, v) => ({...r, [v.value + '']: v.name}), {});
|
||||
console.log(rateListMapped);
|
||||
/**
|
||||
*
|
||||
*/
|
||||
const index = new Vue({
|
||||
el: '#main',
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
loading: false,
|
||||
feedbackItemList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log('invoke vue', typeof this);
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.loading = true;
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
const that = this;
|
||||
postForm(
|
||||
`${HOST}/feedback/customer_feedback`,
|
||||
// {group_id: 348323, tour_guide_id: 141},
|
||||
{ group_id: 69291, tour_guide_id: 730 },
|
||||
{ headers: { ...{} } }
|
||||
).then((res) => {
|
||||
that.loading = false;
|
||||
that.feedbackItemList = res.feedbackItemList;
|
||||
console.log(res)
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,106 +0,0 @@
|
||||
<!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;
|
||||
}
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.question {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.feedback {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.star-rating {
|
||||
direction: rtl;
|
||||
display: inline-block;
|
||||
}
|
||||
.star-rating input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
.star-rating label {
|
||||
font-size: 30px;
|
||||
color: lightgray;
|
||||
cursor: pointer;
|
||||
}
|
||||
.star-rating input[type=radio]:checked ~ label,
|
||||
.star-rating label:hover,
|
||||
.star-rating label:hover ~ label {
|
||||
color: #d54e21;
|
||||
}
|
||||
.rate-meaning {
|
||||
display: inline-block;
|
||||
margin-left: 15px;
|
||||
vertical-align: middle;
|
||||
color: #d54e21;
|
||||
}
|
||||
.rate-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
/* background: url('thumbsup.svg') no-repeat center; */
|
||||
/* background-size: contain; */
|
||||
filter: invert(27%) sepia(97%) saturate(7482%) hue-rotate(359deg) brightness(100%) contrast(107%);
|
||||
}
|
||||
.rate-icon path {
|
||||
/* stroke: #d54e21; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- <h1>Questionnaire</h1> -->
|
||||
<form>
|
||||
<div class="question">
|
||||
<h4>Passion with Job</h4>
|
||||
<div class="star-rating">
|
||||
<input type="radio" id="q1-5" name="q1" value="5" checked>
|
||||
<label for="q1-5">★</label>
|
||||
<input type="radio" id="q1-4" name="q1" value="4">
|
||||
<label for="q1-4">★</label>
|
||||
<input type="radio" id="q1-3" name="q1" value="3">
|
||||
<label for="q1-3">★</label>
|
||||
<input type="radio" id="q1-2" name="q1" value="2">
|
||||
<label for="q1-2">★</label>
|
||||
<input type="radio" id="q1-1" name="q1" value="1">
|
||||
<label for="q1-1">★</label>
|
||||
</div>
|
||||
<span class="rate-meaning">
|
||||
<span id="rate-text">Excellent</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div class="feedback">
|
||||
<h2>Any additional feedback?</h2>
|
||||
<textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
|
||||
</div>
|
||||
<input type="submit" value="Submit"> -->
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
var ratings = {
|
||||
"1": { text: "Unacceptable", icon: "./img/thumbsdown.svg" },
|
||||
"2": { text: "Poor", icon: "./img/sadface.svg" },
|
||||
"3": { text: "Fair", icon: "./img/neutralface.svg" },
|
||||
"4": { text: "Very Good", icon: "./img/happyface.svg" },
|
||||
"5": { text: "Excellent", icon: "./img/thumbsup.svg" }
|
||||
};
|
||||
var rateInputs = document.querySelectorAll('.star-rating input[type="radio"]');
|
||||
var rateText = document.getElementById('rate-text');
|
||||
var rateIcon = document.getElementById('rate-icon');
|
||||
|
||||
rateInputs.forEach(function(input) {
|
||||
input.addEventListener('change', function() {
|
||||
var rating = ratings[this.value];
|
||||
rateText.textContent = rating.text;
|
||||
// rateIcon.src = rating.icon;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue