Skip to content

S
SURPRISED
Commit 3cb323f3 authored by 黄奎's avatar 黄奎
Browse files
Options

11

parent b61e30af
Hide whitespace changes
Inline Side-by-side
Showing with 1079 additions and 1024 deletions
html/ImpressionOpinionSurvey/busSign.html
View file @ 3cb323f3
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="screen-orientation" content="portrait">
</meta>
<meta name="x5-orientation" content="portrait">
</meta>
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/cssReset.css">
<link rel="stylesheet" href="../../css/bts/bootstrap.min.css">
<title>司机满意度调查</title>
</head>
<body>
<div class="FillincommentsF">
<div class="FillincommentsBox" id="FillincommentsBox">
<h3 class="headerTitle"></h3>
<h5 class="subscript" id="subscript"></h5>
<div class="FillincommentsIn">
<div class="FillincommentsInLD">
<div><span>领队：</span><span class="lindui"></span></div>
<div><span>导游：</span><span class="daoyou"></span></div>
</div>
<div class="FillincommentsInT">
<div><span>团期：</span><span class="tuanqi1"></span></div>
</div>
</div>
<div class="FillincommentsMarkB" id="app">
</div>
<div class="submitBForm">
<button onclick="saveGuestSurvey()" class="submitB" id="submitB">确认</button>
</div>
</div>
</div>
<head> <script src="../../js/md5.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="../../js/autosize.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" /> <script src="../../js/layer/layer.js"></script>
<meta name="screen-orientation"content="portrait"></meta> <script src="../../js/mian.js"></script>
<meta name="x5-orientation"content="portrait"></meta> <script>
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" /> var qMsg = query()
<link rel="stylesheet" href="../../css/cssReset.css"> var priceInfo = null
<link rel="stylesheet" href="../../css/bts/bootstrap.min.css"> var dataList = null
<title>填写意见</title> var GuestSurveyInfo = null
</head>
var texts = [
<body> '非常不满意',
<!-- <div class="BackBox"> '不满意',
<img class="BackImg" onclick="goBack()" src="../../images/login/login_arrowleft.png" /> '感觉一般',
</div> --> '满意',
<div class="FillincommentsF"> '非常满意'
<div class="FillincommentsBox" id="FillincommentsBox"> ]
<h3 class="headerTitle"></h3> var STAR_IMG = new Array("../../images/Star1.png", "../../images/Star2.png");
<h5 class="subscript" id="subscript"></h5>
<div class="FillincommentsIn"> getPriceInfo()
<div class="FillincommentsInLD"> GetSurveyShowList()
<div><span>领队：</span><span class="lindui"></span></div> getRadio()
<div><span>导游：</span><span class="daoyou"></span></div> getCheckbox()
</div> GetBusSurveyInfo()
<div class="FillincommentsInT">
<div><span>团期：</span><span class="tuanqi1"></span></div> function clickRadio(i) {
</div> const Radiobox = document.getElementById(`my_Radio${i}`);
</div> Radiobox.click()
<div class="FillincommentsMarkB" id="app"> }
<!-- <div class="FillincommentsMark">
<div class="FillincommentsMarkT"> function getRadio() {
<span class="xuhao">1、</span> dataList.forEach((x, i) => {
<span class="title">行程安排</span> x.SurveyOptionsList.forEach((y, index) => {
</div> const radios = document.getElementsByName(`my_Radio${i+1}`);
<div class="FillincommentsSingle"> radios.forEach(radio => {
<input type="radio" value=""><span>否</span></input> radio.addEventListener('click', function() {
<input type="radio" value=""><span>是</span></input> x.ScoreNum = radio.value
</div> // 当单选按钮被点击时，输出它的值
<div class="FillincommentsMultiple"> // console.log('Selected value:', radio.value);
<input type="checkbox" name="否"><span>否</span></input> });
<input type="checkbox" name="是"><span>是</span></input> });
</div> })
<div class="FillincommentsDescription"> })
<input type="text" placeholder="点击输入" maxlength="20"></input>
</div> }
</div> -->
</div> function clickCheckbox(i) {
const checkbox = document.getElementById(`my_checkbox${i}`);
<div class="submitBForm"> checkbox.click()
<button onclick="saveGuestSurvey()" class="submitB" id="submitB">确认</button> }
</div>
function getCheckbox() {
</div> dataList.forEach((x, i) => {
</div> x.SurveyOptionsList.forEach((y, index) => {
const checkbox = document.getElementsByName(`my_checkbox${i+1}`);
<script src="../../js/md5.js"></script> checkbox.forEach(checkbox => {
<script type="text/javascript" src="../../js/autosize.js"></script> checkbox.addEventListener('click', function() {
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script> if (checkbox.checked) y.IsCheckS.push(checkbox.value)
<script src="../../js/layer/layer.js"></script> if (!checkbox.checked) y.IsCheckS = y.IsCheckS.filter(z => {
<script src="../../js/mian.js"></script> return z != checkbox.value
<script> })
var qMsg = query() });
var priceInfo = null });
var dataList = null })
var GuestSurveyInfo = null })
var texts = [ }
'非常不满意',
'不满意', function getTextarea() {
'感觉一般', dataList.forEach((x, i) => {
'满意', var word = document.getElementById(`my_textarea${i+1}`)
'非常满意' if (word && word.value) {
] x.TextContent = word.value
var STAR_IMG = new Array("../../images/Star1.png", "../../images/Star2.png"); }
})
getPriceInfo() }
GetSurveyShowList()
getRadio() function saveGuestSurvey() {
getCheckbox() document.getElementById("submitB").classList.add("active")
GetBusSurveyInfo() getTextarea()
function clickRadio(i) { var postMsg = [];
const Radiobox = document.getElementById(`my_Radio${i}`); if (dataList && dataList.length > 0) {
Radiobox.click() dataList.forEach(item => {
} item.TCID = qMsg.TCID;
function getRadio() { if (item.SurveyType === 2 || item.SurveyType === 3) {
dataList.forEach((x,i)=>{ item.SurveyOptionsList.forEach(y => {
x.SurveyOptionsList.forEach((y,index)=>{ //单选
const radios = document.getElementsByName(`my_Radio${i+1}`); if (item.SurveyType == 2) {
radios.forEach(radio => { if (item.ScoreNum == y.ID) {
radio.addEventListener('click', function() { y.IsCheck = "1";
x.ScoreNum = radio.value }
// 当单选按钮被点击时，输出它的值 }
// console.log('Selected value:', radio.value); //多选
}); if (item.SurveyType == 3) {
}); y.IsCheck = "0";
}) if (y.IsCheckS) {
}) y.IsCheck = "1";
}
} }
function clickCheckbox(i) { })
const checkbox = document.getElementById(`my_checkbox${i}`); item.ScoreNum = 0;
checkbox.click() }
} postMsg.push(item);
function getCheckbox() { })
dataList.forEach((x,i)=>{ }
x.SurveyOptionsList.forEach((y,index)=>{ var newMsg = {
const checkbox = document.getElementsByName(`my_checkbox${i+1}`); busDetailsList: postMsg
checkbox.forEach(checkbox => { }
checkbox.addEventListener('click', function() { $('#submitB').attr('disabled', true)
if(checkbox.checked) y.IsCheckS.push(checkbox.value) $.ajax({
if(!checkbox.checked) y.IsCheckS = y.IsCheckS.filter(z=>{return z!=checkbox.value}) type: "POST",
// console.log(y.IsCheckS,'-----------') url: `${getApiUrl().urlPost}`,
}); contentType: "application/json",
}); data: getAjaxData("survey_post_SetBusSurvey", newMsg),
}) async: false,
}) success: function(res) {
if (res.resultCode === 1) {
} window.location.href = 'success.html'
function getTextarea() { } else {
dataList.forEach((x,i)=>{ layer.msg(res.message)
var word = document.getElementById(`my_textarea${i+1}`) }
if(word&&word.value){ $('#submitB').attr('disabled', false)
x.TextContent = word.value document.getElementById("submitB").classList.remove("active")
} },
}) error: function(message) {
} $('#submitB').attr('disabled', false)
function saveGuestSurvey() { alert(JSON.stringify(message));
document.getElementById("submitB").classList.add("active") document.getElementById("submitB").classList.remove("active")
getTextarea() }
var postMsg = []; });
if (dataList && dataList.length > 0) { }
dataList.forEach(item => {
item.TCID = qMsg.TCID; function GetBusSurveyInfo() {
if (item.SurveyType === 2 || item.SurveyType === 3) { $.ajax({
item.SurveyOptionsList.forEach(y => { type: "POST",
//单选 url: `${getApiUrl().urlPost}`,
if (item.SurveyType == 2) { contentType: "application/json",
if (item.ScoreNum == y.ID) { data: getAjaxData("survey_post_GetBusSurveyInfo", {
y.IsCheck = "1"; IsShow: 1,
} SurveyType: -1
} }),
//多选 async: false,
if (item.SurveyType == 3) { success: function(res) {
y.IsCheck = "0"; if (res.resultCode === 1) {
if (y.IsCheckS) { GuestSurveyInfo = res.data
y.IsCheck = "1"; if (GuestSurveyInfo.Title) $('.headerTitle').html(GuestSurveyInfo.Title)
} if (GuestSurveyInfo.SubTitle) $('.subscript').html(GuestSurveyInfo.SubTitle)
} else {
}) let parent = document.getElementById("FillincommentsBox");
item.ScoreNum = 0; let child = document.getElementById("subscript");
} parent.removeChild(child);
postMsg.push(item); }
}) } else {
} layer.msg(res.message)
var newMsg = { }
busDetailsList: postMsg },
} error: function(message) {
console.log(newMsg,'-------') alert(JSON.stringify(message));
$('#submitB').attr('disabled', true) }
$.ajax({ });
type: "POST", }
url: `${getApiUrl().urlPost}`,
contentType: "application/json", function GetSurveyShowList() {
data: getAjaxData("survey_post_SetBusSurvey", newMsg), $.ajax({
async: false, type: "POST",
success: function (res) { url: `${getApiUrl().urlPost}`,
if (res.resultCode === 1) { contentType: "application/json",
// layer.msg(res.message) data: getAjaxData("survey_post_GetBusSurveyShowList", {
window.location.href='success.html' IsShow: 1,
} else { SurveyType: -1
layer.msg(res.message) }),
} async: false,
$('#submitB').attr('disabled', false) success: function(res) {
document.getElementById("submitB").classList.remove("active") if (res.resultCode === 1) {
}, let data = res.data
error: function (message) { data.map(item => {
$('#submitB').attr('disabled', false) if (item.SurveyType === 2) {
alert(JSON.stringify(message)); item.SurveyOptionsList.map((cItem, cIndex) => {
document.getElementById("submitB").classList.remove("active") cItem.IsCheckS = false
} })
}); }
} if (item.SurveyType === 3) {
function GetBusSurveyInfo() { item.SurveyOptionsList.map((cItem, cIndex) => {
$.ajax({ cItem.IsCheckS = []
type: "POST", })
url: `${getApiUrl().urlPost}`, }
contentType: "application/json", if (item.SurveyType === 1) {
data: getAjaxData("survey_post_GetGuestSurveyInfo", { item.ScoreNum = 5;
IsShow: 1, }
SurveyType: -1 })
}), dataList = data
async: false, renderStar()
success: function (res) { } else {
if (res.resultCode === 1) { layer.msg(res.message)
GuestSurveyInfo = res.data }
if(GuestSurveyInfo.Title)$('.headerTitle').html(GuestSurveyInfo.Title) },
if(GuestSurveyInfo.SubTitle) $('.subscript').html(GuestSurveyInfo.SubTitle) error: function(message) {
else{ alert(JSON.stringify(message));
let parent = document.getElementById("FillincommentsBox"); }
let child = document.getElementById("subscript"); });
parent.removeChild(child); }
}
}else{ function getPriceInfo() {
layer.msg(res.message) $.ajax({
} type: "POST",
}, url: `${getApiUrl().urlPost}`,
error: function (message) { contentType: "application/json",
alert(JSON.stringify(message)); data: getAjaxData("miniProgram_post_GetBasePrice", {
} tcid: this.qMsg.TCID
}); }),
} async: false,
function GetSurveyShowList() { success: function(res) {
$.ajax({ if (res.resultCode === 1) {
type: "POST", let data = res.data
url: `${getApiUrl().urlPost}`, priceInfo = data
contentType: "application/json", if (priceInfo && priceInfo.LeaderName && priceInfo.LeaderName != '') $('.lindui').html(priceInfo.LeaderName)
data: getAjaxData("survey_post_GetBusSurveyShowList", { if (priceInfo && priceInfo.GuideName && priceInfo.GuideName != '') $('.daoyou').html(priceInfo.GuideName)
IsShow: 1, if (priceInfo && priceInfo.StartDateStr && priceInfo.StartDateStr != '') $('.tuanqi1').html(priceInfo.StartDateStr)
SurveyType: -1 if (priceInfo && priceInfo.EndDateStr && priceInfo.EndDateStr != '') $('.tuanqi2').html(priceInfo.EndDateStr)
}), } else {
async: false, layer.msg(res.message)
success: function (res) { }
if (res.resultCode === 1) { },
let data = res.data error: function(message) {
data.map(item => { alert(JSON.stringify(message));
if (item.SurveyType === 2) { }
item.SurveyOptionsList.map((cItem, cIndex) => { });
cItem.IsCheckS = false }
})
} function chgStar(num, i) {
if (item.SurveyType === 3) { dataList[i].ScoreNum = num
item.SurveyOptionsList.map((cItem, cIndex) => { var item = dataList[i]
cItem.IsCheckS = [] $(`#star${i+1}`).html(
}) `<img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})"
}
if (item.SurveyType === 1) {
item.ScoreNum = 5;
}
})
dataList = data
renderStar()
} else {
layer.msg(res.message)
}
},
error: function (message) {
alert(JSON.stringify(message));
}
});
}
function getPriceInfo() {
$.ajax({
type: "POST",
url: `${getApiUrl().urlPost}`,
contentType: "application/json",
data: getAjaxData("miniProgram_post_GetBasePrice", {
tcid: this.qMsg.TCID
}),
async: false,
success: function (res) {
if (res.resultCode === 1) {
let data = res.data
priceInfo = data
if(priceInfo&&priceInfo.LeaderName&&priceInfo.LeaderName!='') $('.lindui').html(priceInfo.LeaderName)
if(priceInfo&&priceInfo.GuideName&&priceInfo.GuideName!='') $('.daoyou').html(priceInfo.GuideName)
if(priceInfo&&priceInfo.StartDateStr&&priceInfo.StartDateStr!='') $('.tuanqi1').html(priceInfo.StartDateStr)
if(priceInfo&&priceInfo.EndDateStr&&priceInfo.EndDateStr!='') $('.tuanqi2').html(priceInfo.EndDateStr)
} else {
layer.msg(res.message)
}
},
error: function (message) {
alert(JSON.stringify(message));
}
});
}
function chgStar(num,i){
dataList[i].ScoreNum = num
var item = dataList[i]
$(`#star${i+1}`).html(`<img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})"
src="${item.ScoreNum>=1?STAR_IMG[0]:STAR_IMG[1]}"></img> src="${item.ScoreNum>=1?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_2id_${i+1}point" onmouseover="chgStar(2,${i})" <img id="star_2id_${i+1}point" onmouseover="chgStar(2,${i})"
src="${item.ScoreNum>=2?STAR_IMG[0]:STAR_IMG[1]}"></img> src="${item.ScoreNum>=2?STAR_IMG[0]:STAR_IMG[1]}"></img>
...@@ -291,24 +278,28 @@ ...@@ -291,24 +278,28 @@
<img id="star_4id_${i+1}point" onmouseover="chgStar(4,${i})" <img id="star_4id_${i+1}point" onmouseover="chgStar(4,${i})"
src="${item.ScoreNum>=4?STAR_IMG[0]:STAR_IMG[1]}"></img> src="${item.ScoreNum>=4?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_5id_${i+1}point" onmouseover="chgStar(5,${i})" <img id="star_5id_${i+1}point" onmouseover="chgStar(5,${i})"
src="${item.ScoreNum>=5?STAR_IMG[0]:STAR_IMG[1]}"></img>`) src="${item.ScoreNum>=5?STAR_IMG[0]:STAR_IMG[1]}"></img>`
} )
function renderStar(){ }
var list = []
dataList.forEach((item,i) => { function renderStar() {
var str = '' var list = []
var mark = '' dataList.forEach((item, i) => {
var singleChoice = '' var str = ''
var MultipleChoice = '' var mark = ''
var inputText = '' var singleChoice = ''
var end = `</div>` var MultipleChoice = ''
var element = document.createElement('div'); var inputText = ''
str = `<div class="FillincommentsMark"> var end = `</div>`
var element = document.createElement('div');
str =
`<div class="FillincommentsMark">
<div class="FillincommentsMarkT"> <div class="FillincommentsMarkT">
<span class="xuhao">${i+1}、</span> <span class="xuhao">${i+1}、</span>
<span class="title">${item.Title}</span> <span class="title">${item.Title}</span>
</div>` </div>`
if(item.SurveyType==1) mark = `<div class="FillincommentsMarks"> if (item.SurveyType == 1) mark =
`<div class="FillincommentsMarks">
<span class="text">评 分</span> <span class="text">评 分</span>
<div class="pinfen" id="star${i+1}"> <div class="pinfen" id="star${i+1}">
<img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})" <img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})"
...@@ -324,223 +315,259 @@ ...@@ -324,223 +315,259 @@
</div> </div>
<span class="manyidu">${item.ScoreNum==1?texts[0]:item.ScoreNum==2?texts[1]:item.ScoreNum==3?texts[2]:item.ScoreNum==4?texts[3]:item.ScoreNum==5?texts[4]:''}</span> <span class="manyidu">${item.ScoreNum==1?texts[0]:item.ScoreNum==2?texts[1]:item.ScoreNum==3?texts[2]:item.ScoreNum==4?texts[3]:item.ScoreNum==5?texts[4]:''}</span>
</div>` </div>`
if(item.SurveyType==2) { if (item.SurveyType == 2) {
let radioList = [] let radioList = []
if(item.SurveyOptionsList.length>0)item.SurveyOptionsList.forEach((radio,index)=>{ if (item.SurveyOptionsList.length > 0) item.SurveyOptionsList.forEach((radio, index) => {
radioList.push(`<div><input type="radio" value="${radio.ID}" name="my_Radio${i+1}" id="my_Radio${i+1}${index+1}"/><span onclick="clickRadio(${i+1}${index+1})">${radio.OptionsName}</span></div>`) radioList.push(
}) `<div><input type="radio" value="${radio.ID}" name="my_Radio${i+1}" id="my_Radio${i+1}${index+1}"/><span onclick="clickRadio(${i+1}${index+1})">${radio.OptionsName}</span></div>`
)
if(radioList.length>0) })
{
singleChoice = `<div class="FillincommentsSingle">` if (radioList.length > 0) {
radioList.forEach(rItem=>{ singleChoice = `<div class="FillincommentsSingle">`
singleChoice+=rItem; radioList.forEach(rItem => {
}) singleChoice += rItem;
singleChoice+=`</div>` })
singleChoice += `</div>`
}
}
if (item.SurveyType == 3) {
let MultipleList = []
if (item.SurveyOptionsList.length > 0) item.SurveyOptionsList.forEach((radio, index) => {
MultipleList.push(
`<div><input type="checkbox" value="${radio.ID}" name="my_checkbox${i+1}" id="my_checkbox${i+1}${index+1}"/><span onclick="clickCheckbox(${i+1}${index+1})">${radio.OptionsName}</span></div>`
)
})
if (MultipleList.length > 0) {
MultipleChoice = `<div class="FillincommentsMultiple">`
MultipleList.forEach(rItem => {
MultipleChoice += rItem;
})
MultipleChoice += `</div>`
}
} }
} if (item.SurveyType == 4) {
if(item.SurveyType==3) { inputText =
let MultipleList = [] `<div class="FillincommentsDescription">
if(item.SurveyOptionsList.length>0)item.SurveyOptionsList.forEach((radio,index)=>{
MultipleList.push(`<div><input type="checkbox" value="${radio.ID}" name="my_checkbox${i+1}" id="my_checkbox${i+1}${index+1}"/><span onclick="clickCheckbox(${i+1}${index+1})">${radio.OptionsName}</span></div>`)
})
if(MultipleList.length>0)
{
MultipleChoice = `<div class="FillincommentsMultiple">`
MultipleList.forEach(rItem=>{
MultipleChoice+=rItem;
})
MultipleChoice+=`</div>`
}
}
if(item.SurveyType==4) {
inputText = `<div class="FillincommentsDescription">
<textarea rows="8" cols="30" placeholder="点击输入" maxlength="500" id="my_textarea${i+1}" onblur="getTextarea()"></textarea> <textarea rows="8" cols="30" placeholder="点击输入" maxlength="500" id="my_textarea${i+1}" onblur="getTextarea()"></textarea>
</div>` </div>`
} }
var textHtml = str+mark+singleChoice+MultipleChoice+inputText+end var textHtml = str + mark + singleChoice + MultipleChoice + inputText + end
element.innerHTML = textHtml element.innerHTML = textHtml
list.push(element) list.push(element)
}) })
$("#app").html(list) $("#app").html(list)
} }
</script>
</script> </body>
</body> <style>
<style> .BackBox {
.BackBox{ position: fixed;
position: fixed; left: 0px;
left: 0px; top: 0px;
top: 0px; right: 0;
right: 0; background: #fff;
background: #fff; padding: 20px 20px 10px 20px;
padding: 20px 20px 10px 20px; z-index: 2;
z-index: 2; }
}
.BackImg{ .BackImg {
width: 10px; width: 10px;
} }
.FillincommentsF{
display: flex; .FillincommentsF {
align-items: center; display: flex;
justify-content: center; align-items: center;
height:100%; justify-content: center;
overflow-y: auto; height: 100%;
} overflow-y: auto;
.FillincommentsBox{ }
width: 90%;
height: 100%; .FillincommentsBox {
display: flex; width: 90%;
flex-direction: column; height: 100%;
} display: flex;
.FillincommentsBox H3{ flex-direction: column;
margin-top: 20px; }
}
.FillincommentsIn{ .FillincommentsBox H3 {
background: #F6F6F6; margin-top: 20px;
border-radius: 5px; }
padding: 10px;
margin-top: 10px; .FillincommentsIn {
} background: #F6F6F6;
.FillincommentsInLD{ border-radius: 5px;
display: flex; padding: 10px;
flex-direction: row; margin-top: 10px;
justify-content: space-between; }
}
.FillincommentsInLD div{ .FillincommentsInLD {
flex: 1; display: flex;
flex-shrink: 0; flex-direction: row;
} justify-content: space-between;
.FillincommentsInT{ }
padding-top: 5px;
} .FillincommentsInLD div {
.FillincommentsMarkB{ flex: 1;
display: flex; flex-shrink: 0;
flex-direction: column; }
flex: 1;
/* overflow: hidden; .FillincommentsInT {
padding-top: 5px;
}
.FillincommentsMarkB {
display: flex;
flex-direction: column;
flex: 1;
/* overflow: hidden;
overflow-y: auto; */ overflow-y: auto; */
padding-bottom: 20px; padding-bottom: 20px;
} }
.FillincommentsMark{
display: flex; .FillincommentsMark {
flex-direction: column; display: flex;
margin-top: 15px; flex-direction: column;
} margin-top: 15px;
.FillincommentsMarkT{ }
display: flex;
flex-direction: row; .FillincommentsMarkT {
font-size: 15px; display: flex;
font-weight: 500; flex-direction: row;
} font-size: 15px;
.FillincommentsMarks{ font-weight: 500;
font-size: 14px; }
font-weight: 500;
margin-top: 5px; .FillincommentsMarks {
display: flex; font-size: 14px;
flex-direction: row; font-weight: 500;
} margin-top: 5px;
.FillincommentsMarks span{ display: flex;
position: relative; flex-direction: row;
top: 3px; }
}
.text{ .FillincommentsMarks span {
width: 50px; position: relative;
flex-shrink: 0; top: 3px;
} }
.manyidu{
width: auto; .text {
flex-shrink: 0; width: 50px;
margin-left: 10px; flex-shrink: 0;
} }
.submitBForm{
display: flex; .manyidu {
justify-content: center; width: auto;
align-items: center; flex-shrink: 0;
margin-bottom: 15px; margin-left: 10px;
} }
.submitB{
width: 90%; .submitBForm {
border: 0; display: flex;
height: 40px; justify-content: center;
margin-top: 20px; align-items: center;
margin-bottom: 20px; margin-bottom: 15px;
border-radius: 5px; }
background-color: #EE4554;
color: #fff; .submitB {
} width: 90%;
.submitB.active{ border: 0;
background-color: rgba(238,69,84,.5); height: 40px;
} margin-top: 20px;
.pinfen img { margin-bottom: 20px;
width: 20px; border-radius: 5px;
height: 20px; background-color: #EE4554;
display: inline-block; color: #fff;
} }
.FillincommentsSingle{
display: flex; .submitB.active {
flex-direction: column; background-color: rgba(238, 69, 84, .5);
align-items: center; }
flex-wrap: wrap;
margin-top: 5px; .pinfen img {
} width: 20px;
.FillincommentsSingle span{ height: 20px;
position: relative; display: inline-block;
top: 1px; }
left: 5px;
} .FillincommentsSingle {
.FillincommentsSingle div{ display: flex;
width: 100%; flex-direction: column;
display: flex; align-items: center;
flex-direction: row; flex-wrap: wrap;
align-items: self-start; margin-top: 5px;
justify-content: start; }
flex-wrap: nowrap;
margin-right: 20px; .FillincommentsSingle span {
margin-bottom: 5px; position: relative;
} top: 1px;
.FillincommentsMultiple { left: 5px;
display: flex; }
flex-direction: column;
align-items: center; .FillincommentsSingle div {
flex-wrap: wrap; width: 100%;
margin-top: 5px; display: flex;
} flex-direction: row;
.FillincommentsMultiple span{ align-items: self-start;
position: relative; justify-content: start;
top: 0px; flex-wrap: nowrap;
left: 5px; margin-right: 20px;
} margin-bottom: 5px;
.FillincommentsMultiple div{ }
width: 100%;
display: flex; .FillincommentsMultiple {
flex-direction: row; display: flex;
align-items: self-start; flex-direction: column;
justify-content: start; align-items: center;
flex-wrap: nowrap; flex-wrap: wrap;
margin-right: 20px; margin-top: 5px;
margin-bottom: 5px; }
}
.FillincommentsDescription{ .FillincommentsMultiple span {
margin-top: 10px; position: relative;
background: #F6F6F6; top: 0px;
} left: 5px;
.FillincommentsDescription textarea{ }
width: 100%;
/* height: 150px; */ .FillincommentsMultiple div {
padding: 5px 10px; width: 100%;
background: #F6F6F6; display: flex;
border: 1px solid #F6F6F6; flex-direction: row;
} align-items: self-start;
.FillincommentsDescription textarea:focus{ justify-content: start;
border: 1px solid #76c9fa; /* 当textarea获取焦点时的边框色 */ flex-wrap: nowrap;
outline: none; margin-right: 20px;
} margin-bottom: 5px;
.subscript,.ganxiecydc{ }
/* margin-top: 0;
margin-bottom: 0; */ .FillincommentsDescription {
} margin-top: 10px;
background: #F6F6F6;
</style> }
</html> .FillincommentsDescription textarea {
\ No newline at end of file width: 100%;
/* height: 150px; */
padding: 5px 10px;
background: #F6F6F6;
border: 1px solid #F6F6F6;
}
.FillincommentsDescription textarea:focus {
border: 1px solid #76c9fa;
/* 当textarea获取焦点时的边框色 */
outline: none;
}
.subscript,
.ganxiecydc {
text-indent: 2em;
line-height: 1.5;
}
.headerTitle {
text-align: center;
}
</style>
</html>
html/ImpressionOpinionSurvey/guestSign.html
View file @ 3cb323f3
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<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 http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<meta name="screen-orientation"content="portrait"></meta> <meta name="screen-orientation" content="portrait">
<meta name="x5-orientation"content="portrait"></meta> </meta>
<link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" /> <meta name="x5-orientation" content="portrait">
<link rel="stylesheet" href="../../css/cssReset.css"> </meta>
<link rel="stylesheet" href="../../css/bts/bootstrap.min.css"> <link rel="shortcut icon" href="../../images/favicon.ico" type="image/x-icon" />
<title>填写意见</title> <link rel="stylesheet" href="../../css/cssReset.css">
</head> <link rel="stylesheet" href="../../css/bts/bootstrap.min.css">
<title>旅客意见调查</title>
<body> </head>
<!-- <div class="BackBox">
<img class="BackImg" onclick="goBack()" src="../../images/login/login_arrowleft.png" /> <body>
</div> --> <div class="FillincommentsF">
<div class="FillincommentsF"> <div class="FillincommentsBox" id="FillincommentsBox">
<div class="FillincommentsBox" id="FillincommentsBox"> <h3 class="headerTitle"></h3>
<h3 class="headerTitle"></h3> <h5 class="subscript" id="subscript"></h5>
<h5 class="subscript" id="subscript"></h5> <h4 class="ganxiecydc"></h4>
<h4 class="ganxiecydc"></h4> <div class="FillincommentsIn">
<div class="FillincommentsIn"> <div class="FillincommentsInLD">
<div class="FillincommentsInLD"> <div><span>领队：</span><span class="lindui"></span></div>
<div><span>领队：</span><span class="lindui"></span></div> <div><span>导游：</span><span class="daoyou"></span></div>
<div><span>导游：</span><span class="daoyou"></span></div> </div>
</div> <div class="FillincommentsInT">
<div class="FillincommentsInT"> <div><span>团期：</span><span class="tuanqi1"></span></div>
<div><span>团期：</span><span class="tuanqi1"></span></div> </div>
</div> </div>
</div> <div class="FillincommentsMarkB" id="app">
<div class="FillincommentsMarkB" id="app"> </div>
<!-- <div class="FillincommentsMark"> <div class="submitBForm">
<div class="FillincommentsMarkT"> <button onclick="saveGuestSurvey()" class="submitB" id="submitB">确认</button>
<span class="xuhao">1、</span> </div>
<span class="title">行程安排</span> </div>
</div> </div>
<div class="FillincommentsSingle">
<input type="radio" value=""><span>否</span></input> <script src="../../js/md5.js"></script>
<input type="radio" value=""><span>是</span></input> <script type="text/javascript" src="../../js/autosize.js"></script>
</div> <script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<div class="FillincommentsMultiple"> <script src="../../js/layer/layer.js"></script>
<input type="checkbox" name="否"><span>否</span></input> <script src="../../js/mian.js"></script>
<input type="checkbox" name="是"><span>是</span></input> <script>
</div> var qMsg = query()
<div class="FillincommentsDescription"> var priceInfo = null
<input type="text" placeholder="点击输入" maxlength="20"></input> var dataList = null
</div> var GuestSurveyInfo = null
</div> -->
</div> var texts = [
'非常不满意',
<div class="submitBForm"> '不满意',
<button onclick="saveGuestSurvey()" class="submitB" id="submitB">确认</button> '感觉一般',
</div> '满意',
'非常满意'
</div> ]
</div> var STAR_IMG = new Array("../../images/Star1.png", "../../images/Star2.png");
$('.ganxiecydc').html('感谢' + decodeURIComponent(qMsg.SurName) + (qMsg.Sex == 1 ? "先生" : "女士") + '参与意见调查')
<script src="../../js/md5.js"></script>
<script type="text/javascript" src="../../js/autosize.js"></script> getPriceInfo()
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script> GetSurveyShowList()
<script src="../../js/layer/layer.js"></script> getRadio()
<script src="../../js/mian.js"></script> getCheckbox()
<script> GetBusSurveyInfo()
var qMsg = query()
var priceInfo = null function clickRadio(i) {
var dataList = null const Radiobox = document.getElementById(`my_Radio${i}`);
var GuestSurveyInfo = null Radiobox.click()
}
var texts = [
'非常不满意', function getRadio() {
'不满意', dataList.forEach((x, i) => {
'感觉一般', x.SurveyOptionsList.forEach((y, index) => {
'满意', const radios = document.getElementsByName(`my_Radio${i+1}`);
'非常满意' radios.forEach(radio => {
] radio.addEventListener('click', function() {
var STAR_IMG = new Array("../../images/Star1.png", "../../images/Star2.png"); x.ScoreNum = radio.value
$('.ganxiecydc').html('感谢'+decodeURIComponent(qMsg.SurName)+(qMsg.Sex==1?"先生":"女士")+'参与意见调查') });
});
getPriceInfo() })
GetSurveyShowList() })
getRadio()
getCheckbox() }
GetBusSurveyInfo()
function clickRadio(i) { function clickCheckbox(i) {
const Radiobox = document.getElementById(`my_Radio${i}`); const checkbox = document.getElementById(`my_checkbox${i}`);
Radiobox.click() checkbox.click()
} }
function getRadio() {
dataList.forEach((x,i)=>{ function getCheckbox() {
x.SurveyOptionsList.forEach((y,index)=>{ dataList.forEach((x, i) => {
const radios = document.getElementsByName(`my_Radio${i+1}`); x.SurveyOptionsList.forEach((y, index) => {
radios.forEach(radio => { const checkbox = document.getElementsByName(`my_checkbox${i+1}`);
radio.addEventListener('click', function() { checkbox.forEach(checkbox => {
x.ScoreNum = radio.value checkbox.addEventListener('click', function() {
// console.log('Selected value:', radio.value); if (checkbox.checked) y.IsCheckS.push(checkbox.value)
}); if (!checkbox.checked) y.IsCheckS = y.IsCheckS.filter(z => {
}); return z != checkbox.value
}) })
}) });
});
} })
function clickCheckbox(i) { })
const checkbox = document.getElementById(`my_checkbox${i}`);
checkbox.click() }
}
function getCheckbox() { function getTextarea() {
dataList.forEach((x,i)=>{ dataList.forEach((x, i) => {
x.SurveyOptionsList.forEach((y,index)=>{ var word = document.getElementById(`my_textarea${i+1}`)
const checkbox = document.getElementsByName(`my_checkbox${i+1}`); if (word && word.value) {
checkbox.forEach(checkbox => { x.TextContent = word.value
checkbox.addEventListener('click', function() { }
if(checkbox.checked) y.IsCheckS.push(checkbox.value) })
if(!checkbox.checked) y.IsCheckS = y.IsCheckS.filter(z=>{return z!=checkbox.value}) }
// console.log(y.IsCheckS,'-----------')
}); function saveGuestSurvey() {
}); document.getElementById("submitB").classList.add("active")
}) getTextarea()
}) var postMsg = [];
if (dataList && dataList.length > 0) {
} dataList.forEach(item => {
function getTextarea() { item.GuestId = qMsg.GuestId;
dataList.forEach((x,i)=>{ item.TCID = qMsg.TCID;
var word = document.getElementById(`my_textarea${i+1}`) item.OrderID = qMsg.OrderId;
if(word&&word.value){ if (item.SurveyType === 2 || item.SurveyType === 3) {
x.TextContent = word.value item.SurveyOptionsList.forEach(y => {
} //单选
}) if (item.SurveyType == 2) {
} if (item.ScoreNum == y.ID) {
function saveGuestSurvey() { y.IsCheck = "1";
document.getElementById("submitB").classList.add("active") }
getTextarea() }
var postMsg = []; //多选
if (dataList && dataList.length > 0) { if (item.SurveyType == 3) {
dataList.forEach(item => { y.IsCheck = "0";
item.GuestId = qMsg.GuestId; if (y.IsCheckS) {
item.TCID = qMsg.TCID; y.IsCheck = "1";
item.OrderID = qMsg.OrderId; }
if (item.SurveyType === 2 || item.SurveyType === 3) { }
item.SurveyOptionsList.forEach(y => { })
//单选 item.ScoreNum = 0;
if (item.SurveyType == 2) { }
if (item.ScoreNum == y.ID) { postMsg.push(item);
y.IsCheck = "1"; })
} }
} $('#submitB').attr('disabled', true)
//多选 $.ajax({
if (item.SurveyType == 3) { type: "POST",
y.IsCheck = "0"; url: `${getApiUrl().urlPost}`,
if (y.IsCheckS) { contentType: "application/json",
y.IsCheck = "1"; data: getAjaxData("survey_post_SetGuestSurvey", postMsg),
} async: false,
} success: function(res) {
}) if (res.resultCode === 1) {
item.ScoreNum = 0; window.location.href = 'success.html'
} } else {
postMsg.push(item); layer.msg(res.message)
}) }
} $('#submitB').attr('disabled', false)
console.log(postMsg,'-------') document.getElementById("submitB").classList.remove("active")
$('#submitB').attr('disabled', true) },
$.ajax({ error: function(message) {
type: "POST", $('#submitB').attr('disabled', false)
url: `${getApiUrl().urlPost}`, alert(JSON.stringify(message));
contentType: "application/json", document.getElementById("submitB").classList.remove("active")
data: getAjaxData("survey_post_SetGuestSurvey", postMsg), }
async: false, });
success: function (res) { }
if (res.resultCode === 1) {
// layer.msg(res.message) function GetBusSurveyInfo() {
window.location.href='success.html' $.ajax({
} else { type: "POST",
layer.msg(res.message) url: `${getApiUrl().urlPost}`,
} contentType: "application/json",
$('#submitB').attr('disabled', false) data: getAjaxData("survey_post_GetGuestSurveyInfo", {
document.getElementById("submitB").classList.remove("active") IsShow: 1,
}, SurveyType: -1
error: function (message) { }),
$('#submitB').attr('disabled', false) async: false,
alert(JSON.stringify(message)); success: function(res) {
document.getElementById("submitB").classList.remove("active") if (res.resultCode === 1) {
} GuestSurveyInfo = res.data
}); if (GuestSurveyInfo.Title) $('.headerTitle').html(GuestSurveyInfo.Title)
} if (GuestSurveyInfo.SubTitle) $('.subscript').html(GuestSurveyInfo.SubTitle)
function GetBusSurveyInfo() { else {
$.ajax({ let parent = document.getElementById("FillincommentsBox");
type: "POST", let child = document.getElementById("subscript");
url: `${getApiUrl().urlPost}`, parent.removeChild(child);
contentType: "application/json", }
data: getAjaxData("survey_post_GetGuestSurveyInfo", { } else {
IsShow: 1, layer.msg(res.message)
SurveyType: -1 }
}), },
async: false, error: function(message) {
success: function (res) { alert(JSON.stringify(message));
if (res.resultCode === 1) { }
GuestSurveyInfo = res.data });
if(GuestSurveyInfo.Title)$('.headerTitle').html(GuestSurveyInfo.Title) }
if(GuestSurveyInfo.SubTitle) $('.subscript').html(GuestSurveyInfo.SubTitle)
else{ function GetSurveyShowList() {
let parent = document.getElementById("FillincommentsBox"); $.ajax({
let child = document.getElementById("subscript"); type: "POST",
parent.removeChild(child); url: `${getApiUrl().urlPost}`,
} contentType: "application/json",
}else{ data: getAjaxData("survey_post_GetSurveyShowList", {
layer.msg(res.message) IsShow: 1,
} SurveyType: -1
}, }),
error: function (message) { async: false,
alert(JSON.stringify(message)); success: function(res) {
} if (res.resultCode === 1) {
}); let data = res.data
} data.map(item => {
function GetSurveyShowList() { if (item.SurveyType === 2) {
$.ajax({ item.SurveyOptionsList.map((cItem, cIndex) => {
type: "POST", cItem.IsCheckS = false
url: `${getApiUrl().urlPost}`, })
contentType: "application/json", }
data: getAjaxData("survey_post_GetSurveyShowList", { if (item.SurveyType === 3) {
IsShow: 1, item.SurveyOptionsList.map((cItem, cIndex) => {
SurveyType: -1 cItem.IsCheckS = []
}), })
async: false, }
success: function (res) { if (item.SurveyType === 1) {
if (res.resultCode === 1) { item.ScoreNum = 5;
let data = res.data }
data.map(item => { })
if (item.SurveyType === 2) { dataList = data
item.SurveyOptionsList.map((cItem, cIndex) => { renderStar()
cItem.IsCheckS = false } else {
}) layer.msg(res.message)
} }
if (item.SurveyType === 3) { },
item.SurveyOptionsList.map((cItem, cIndex) => { error: function(message) {
cItem.IsCheckS = [] alert(JSON.stringify(message));
}) }
} });
if (item.SurveyType === 1) { }
item.ScoreNum = 5;
} function getPriceInfo() {
}) $.ajax({
dataList = data type: "POST",
renderStar() url: `${getApiUrl().urlPost}`,
} else { contentType: "application/json",
layer.msg(res.message) data: getAjaxData("miniProgram_post_GetBasePrice", {
} tcid: this.qMsg.TCID
}, }),
error: function (message) { async: false,
alert(JSON.stringify(message)); success: function(res) {
} if (res.resultCode === 1) {
}); let data = res.data
} priceInfo = data
if (priceInfo && priceInfo.LeaderName && priceInfo.LeaderName != '') $('.lindui').html(priceInfo.LeaderName)
function getPriceInfo() { if (priceInfo && priceInfo.GuideName && priceInfo.GuideName != '') $('.daoyou').html(priceInfo.GuideName)
$.ajax({ if (priceInfo && priceInfo.StartDateStr && priceInfo.StartDateStr != '') $('.tuanqi1').html(priceInfo.StartDateStr)
type: "POST", if (priceInfo && priceInfo.EndDateStr && priceInfo.EndDateStr != '') $('.tuanqi2').html(priceInfo.EndDateStr)
url: `${getApiUrl().urlPost}`, } else {
contentType: "application/json", layer.msg(res.message)
data: getAjaxData("miniProgram_post_GetBasePrice", { }
tcid: this.qMsg.TCID },
}), error: function(message) {
async: false, alert(JSON.stringify(message));
success: function (res) { }
if (res.resultCode === 1) { });
let data = res.data }
priceInfo = data
if(priceInfo&&priceInfo.LeaderName&&priceInfo.LeaderName!='') $('.lindui').html(priceInfo.LeaderName) function chgStar(num, i) {
if(priceInfo&&priceInfo.GuideName&&priceInfo.GuideName!='') $('.daoyou').html(priceInfo.GuideName) dataList[i].ScoreNum = num
if(priceInfo&&priceInfo.StartDateStr&&priceInfo.StartDateStr!='') $('.tuanqi1').html(priceInfo.StartDateStr) var item = dataList[i]
if(priceInfo&&priceInfo.EndDateStr&&priceInfo.EndDateStr!='') $('.tuanqi2').html(priceInfo.EndDateStr) $(`#star${i+1}`).html(
} else { `<img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})"
layer.msg(res.message)
}
},
error: function (message) {
alert(JSON.stringify(message));
}
});
}
function chgStar(num,i){
dataList[i].ScoreNum = num
var item = dataList[i]
$(`#star${i+1}`).html(`<img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})"
src="${item.ScoreNum>=1?STAR_IMG[0]:STAR_IMG[1]}"></img> src="${item.ScoreNum>=1?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_2id_${i+1}point" onmouseover="chgStar(2,${i})" <img id="star_2id_${i+1}point" onmouseover="chgStar(2,${i})"
src="${item.ScoreNum>=2?STAR_IMG[0]:STAR_IMG[1]}"></img> src="${item.ScoreNum>=2?STAR_IMG[0]:STAR_IMG[1]}"></img>
...@@ -291,24 +279,28 @@ ...@@ -291,24 +279,28 @@
<img id="star_4id_${i+1}point" onmouseover="chgStar(4,${i})" <img id="star_4id_${i+1}point" onmouseover="chgStar(4,${i})"
src="${item.ScoreNum>=4?STAR_IMG[0]:STAR_IMG[1]}"></img> src="${item.ScoreNum>=4?STAR_IMG[0]:STAR_IMG[1]}"></img>
<img id="star_5id_${i+1}point" onmouseover="chgStar(5,${i})" <img id="star_5id_${i+1}point" onmouseover="chgStar(5,${i})"
src="${item.ScoreNum>=5?STAR_IMG[0]:STAR_IMG[1]}"></img>`) src="${item.ScoreNum>=5?STAR_IMG[0]:STAR_IMG[1]}"></img>`
} )
function renderStar(){ }
var list = []
dataList.forEach((item,i) => { function renderStar() {
var str = '' var list = []
var mark = '' dataList.forEach((item, i) => {
var singleChoice = '' var str = ''
var MultipleChoice = '' var mark = ''
var inputText = '' var singleChoice = ''
var end = `</div>` var MultipleChoice = ''
var element = document.createElement('div'); var inputText = ''
str = `<div class="FillincommentsMark"> var end = `</div>`
var element = document.createElement('div');
str =
`<div class="FillincommentsMark">
<div class="FillincommentsMarkT"> <div class="FillincommentsMarkT">
<span class="xuhao">${i+1}、</span> <span class="xuhao">${i+1}、</span>
<span class="title">${item.Title}</span> <span class="title">${item.Title}</span>
</div>` </div>`
if(item.SurveyType==1) mark = `<div class="FillincommentsMarks"> if (item.SurveyType == 1) mark =
`<div class="FillincommentsMarks">
<span class="text">评 分</span> <span class="text">评 分</span>
<div class="pinfen" id="star${i+1}"> <div class="pinfen" id="star${i+1}">
<img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})" <img id="star_1id_${i+1}point" onmouseover="chgStar(1,${i})"
...@@ -324,222 +316,258 @@ ...@@ -324,222 +316,258 @@
</div> </div>
<span class="manyidu">${item.ScoreNum==1?texts[0]:item.ScoreNum==2?texts[1]:item.ScoreNum==3?texts[2]:item.ScoreNum==4?texts[3]:item.ScoreNum==5?texts[4]:''}</span> <span class="manyidu">${item.ScoreNum==1?texts[0]:item.ScoreNum==2?texts[1]:item.ScoreNum==3?texts[2]:item.ScoreNum==4?texts[3]:item.ScoreNum==5?texts[4]:''}</span>
</div>` </div>`
if(item.SurveyType==2) { if (item.SurveyType == 2) {
let radioList = [] let radioList = []
if(item.SurveyOptionsList.length>0)item.SurveyOptionsList.forEach((radio,index)=>{ if (item.SurveyOptionsList.length > 0) item.SurveyOptionsList.forEach((radio, index) => {
radioList.push(`<div><input type="radio" value="${radio.ID}" name="my_Radio${i+1}" id="my_Radio${i+1}${index+1}"/><span onclick="clickRadio(${i+1}${index+1})">${radio.OptionsName}</span></div>`) radioList.push(
}) `<div><input type="radio" value="${radio.ID}" name="my_Radio${i+1}" id="my_Radio${i+1}${index+1}"/><span onclick="clickRadio(${i+1}${index+1})">${radio.OptionsName}</span></div>`
if(radioList.length>0) )
{ })
singleChoice = `<div class="FillincommentsSingle">` if (radioList.length > 0) {
radioList.forEach(rItem=>{ singleChoice = `<div class="FillincommentsSingle">`
singleChoice+=rItem; radioList.forEach(rItem => {
}) singleChoice += rItem;
singleChoice+=`</div>` })
} singleChoice += `</div>`
} }
if(item.SurveyType==3) { }
let MultipleList = [] if (item.SurveyType == 3) {
if(item.SurveyOptionsList.length>0)item.SurveyOptionsList.forEach((radio,index)=>{ let MultipleList = []
MultipleList.push(`<div><input type="checkbox" value="${radio.ID}" name="my_checkbox${i+1}" id="my_checkbox${i+1}${index+1}"/><span onclick="clickCheckbox(${i+1}${index+1})">${radio.OptionsName}</span></div>`) if (item.SurveyOptionsList.length > 0) item.SurveyOptionsList.forEach((radio, index) => {
}) MultipleList.push(
if(MultipleList.length>0) `<div><input type="checkbox" value="${radio.ID}" name="my_checkbox${i+1}" id="my_checkbox${i+1}${index+1}"/><span onclick="clickCheckbox(${i+1}${index+1})">${radio.OptionsName}</span></div>`
{ )
MultipleChoice = `<div class="FillincommentsMultiple">` })
MultipleList.forEach(rItem=>{ if (MultipleList.length > 0) {
MultipleChoice+=rItem; MultipleChoice = `<div class="FillincommentsMultiple">`
}) MultipleList.forEach(rItem => {
MultipleChoice+=`</div>` MultipleChoice += rItem;
} })
} MultipleChoice += `</div>`
if(item.SurveyType==4) { }
inputText = `<div class="FillincommentsDescription"> }
if (item.SurveyType == 4) {
inputText =
`<div class="FillincommentsDescription">
<textarea rows="8" cols="30" placeholder="点击输入" maxlength="500" id="my_textarea${i+1}" onblur="getTextarea()"></textarea> <textarea rows="8" cols="30" placeholder="点击输入" maxlength="500" id="my_textarea${i+1}" onblur="getTextarea()"></textarea>
</div>` </div>`
} }
var textHtml = str+mark+singleChoice+MultipleChoice+inputText+end var textHtml = str + mark + singleChoice + MultipleChoice + inputText + end
element.innerHTML = textHtml element.innerHTML = textHtml
list.push(element) list.push(element)
}) })
$("#app").html(list) $("#app").html(list)
} }
</script>
</script> </body>
</body> <style>
<style> .BackBox {
.BackBox{ position: fixed;
position: fixed; left: 0px;
left: 0px; top: 0px;
top: 0px; right: 0;
right: 0; background: #fff;
background: #fff; padding: 20px 20px 10px 20px;
padding: 20px 20px 10px 20px; z-index: 2;
z-index: 2; }
}
.BackImg{ .BackImg {
width: 10px; width: 10px;
} }
.FillincommentsF{
display: flex; .FillincommentsF {
align-items: center; display: flex;
justify-content: center; align-items: center;
height:100%; justify-content: center;
overflow-y: auto; height: 100%;
} overflow-y: auto;
.FillincommentsBox{ }
width: 90%;
height: 100%; .FillincommentsBox {
display: flex; width: 90%;
flex-direction: column; height: 100%;
} display: flex;
.FillincommentsBox H3{ flex-direction: column;
margin-top: 20px; }
}
.FillincommentsIn{ .FillincommentsBox H3 {
background: #F6F6F6; margin-top: 20px;
border-radius: 5px; }
padding: 10px;
margin-top: 10px; .FillincommentsIn {
} background: #F6F6F6;
.FillincommentsInLD{ border-radius: 5px;
display: flex; padding: 10px;
flex-direction: row; margin-top: 10px;
justify-content: space-between; }
}
.FillincommentsInLD div{ .FillincommentsInLD {
flex: 1; display: flex;
flex-shrink: 0; flex-direction: row;
} justify-content: space-between;
.FillincommentsInT{ }
padding-top: 5px;
} .FillincommentsInLD div {
.FillincommentsMarkB{ flex: 1;
display: flex; flex-shrink: 0;
flex-direction: column; }
flex: 1;
/* overflow: hidden; .FillincommentsInT {
padding-top: 5px;
}
.FillincommentsMarkB {
display: flex;
flex-direction: column;
flex: 1;
/* overflow: hidden;
overflow-y: auto; */ overflow-y: auto; */
padding-bottom: 20px; padding-bottom: 20px;
} }
.FillincommentsMark{
display: flex; .FillincommentsMark {
flex-direction: column; display: flex;
margin-top: 15px; flex-direction: column;
} margin-top: 15px;
.FillincommentsMarkT{ }
display: flex;
flex-direction: row; .FillincommentsMarkT {
font-size: 15px; display: flex;
font-weight: 500; flex-direction: row;
} font-size: 15px;
.FillincommentsMarks{ font-weight: 500;
font-size: 14px; }
font-weight: 500;
margin-top: 5px; .FillincommentsMarks {
display: flex; font-size: 14px;
flex-direction: row; font-weight: 500;
} margin-top: 5px;
.FillincommentsMarks span{ display: flex;
position: relative; flex-direction: row;
top: 3px; }
}
.text{ .FillincommentsMarks span {
width: 50px; position: relative;
flex-shrink: 0; top: 3px;
} }
.manyidu{
width: auto; .text {
flex-shrink: 0; width: 50px;
margin-left: 10px; flex-shrink: 0;
} }
.submitBForm{
display: flex; .manyidu {
justify-content: center; width: auto;
align-items: center; flex-shrink: 0;
margin-bottom: 15px; margin-left: 10px;
} }
.submitB{
width: 90%; .submitBForm {
border: 0; display: flex;
height: 40px; justify-content: center;
margin-top: 20px; align-items: center;
margin-bottom: 20px; margin-bottom: 15px;
border-radius: 5px; }
background-color: #EE4554;
color: #fff; .submitB {
} width: 90%;
.submitB.active{ border: 0;
background-color: rgba(238,69,84,.5); height: 40px;
} margin-top: 20px;
.pinfen img { margin-bottom: 20px;
width: 20px; border-radius: 5px;
height: 20px; background-color: #EE4554;
display: inline-block; color: #fff;
} }
.FillincommentsSingle{
display: flex; .submitB.active {
flex-direction: column; background-color: rgba(238, 69, 84, .5);
align-items: center; }
flex-wrap: wrap;
margin-top: 5px; .pinfen img {
} width: 20px;
.FillincommentsSingle span{ height: 20px;
position: relative; display: inline-block;
top: 1px; }
left: 5px;
} .FillincommentsSingle {
.FillincommentsSingle div{ display: flex;
width: 100%; flex-direction: column;
display: flex; align-items: center;
flex-direction: row; flex-wrap: wrap;
align-items: self-start; margin-top: 5px;
justify-content: start; }
flex-wrap: nowrap;
margin-right: 20px; .FillincommentsSingle span {
margin-bottom: 5px; position: relative;
} top: 1px;
.FillincommentsMultiple { left: 5px;
display: flex; }
flex-direction: column;
align-items: center; .FillincommentsSingle div {
flex-wrap: wrap; width: 100%;
margin-top: 5px; display: flex;
} flex-direction: row;
.FillincommentsMultiple span{ align-items: self-start;
position: relative; justify-content: start;
top: 0px; flex-wrap: nowrap;
left: 5px; margin-right: 20px;
} margin-bottom: 5px;
.FillincommentsMultiple div{ }
width: 100%;
display: flex; .FillincommentsMultiple {
flex-direction: row; display: flex;
align-items: self-start; flex-direction: column;
justify-content: start; align-items: center;
flex-wrap: nowrap; flex-wrap: wrap;
margin-right: 20px; margin-top: 5px;
margin-bottom: 5px; }
}
.FillincommentsDescription{ .FillincommentsMultiple span {
margin-top: 10px; position: relative;
background: #F6F6F6; top: 0px;
} left: 5px;
.FillincommentsDescription textarea{ }
width: 100%;
/* height: 150px; */ .FillincommentsMultiple div {
padding: 5px 10px; width: 100%;
background: #F6F6F6; display: flex;
border: 1px solid #F6F6F6; flex-direction: row;
} align-items: self-start;
.FillincommentsDescription textarea:focus{ justify-content: start;
border: 1px solid #76c9fa; /* 当textarea获取焦点时的边框色 */ flex-wrap: nowrap;
outline: none; margin-right: 20px;
} margin-bottom: 5px;
.subscript,.ganxiecydc{ }
/* margin-top: 0;
margin-bottom: 0; */ .FillincommentsDescription {
} margin-top: 10px;
background: #F6F6F6;
</style> }
</html> .FillincommentsDescription textarea {
\ No newline at end of file width: 100%;
/* height: 150px; */
padding: 5px 10px;
background: #F6F6F6;
border: 1px solid #F6F6F6;
}
.FillincommentsDescription textarea:focus {
border: 1px solid #76c9fa;
/* 当textarea获取焦点时的边框色 */
outline: none;
}
.subscript,
.ganxiecydc {
text-indent: 2em;
line-height: 1.5;
}
.headerTitle {
text-align: center;
}
</style>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment