<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<title>企业需求</title>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<!--<script src="https://img11.iqilu.com/0/api/cq-wbapi.min.js"></script>-->
<script>document.write("<script type='text/javascript' src='https://img11.iqilu.com/0/api/cq-wbapi.min.js?v=" + Date.now() + "'><\/script>");</script>
<!-- import stylesheet -->
<!--<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">-->
<!-- import iView -->
<!--<script src="//unpkg.com/view-design/dist/iview.min.js"></script>-->
</head>
<style>
.checkTeam{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 44px;
width: 100%;
border-bottom: 1px solid #E1E5E7;
background-color: #FFFFFF;
}
.checkTeamTxt{
padding-left: 10px;
width: 40px;
}
.checkTeamInput{
height: 34px;
width: 80%;
flex: 1;
border-radius: 4px;
border:0px solid #FFFFFF ;
font-size: 13px;
margin-left: 10px;
}
.listItem_right_bottom{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.qaContent{
font-family: 'PingFangSC','helvetica neue','hiragino sans gb','arial','microsoft yahei ui','microsoft yahei','simsun','sans-serif'!important;
color: #A2A2A2;
font-size:small
}
.okbuok{
background-color: #FFFFFF;
}
.image2{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
background:url(vue/header02.jpg) no-repeat ;
background-size: 100% 100%;
height:80px ;
}
.upload_contain{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
height: 100px;
margin-top: 3px;
background-color: #FFFFFF;
}
.upload{
width: 90px;
height: 90px;
}
.qing{
height: 40px;
background-color: #FFFFFF;
width: 100%;
text-align: center;
line-height: 40px;
}
.tijiao_contain{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 90px;
}
.tijiao{
width: 90%;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #00B0E5;
color: #FFFFFF;
}
</style>
<body style="overflow: scroll;background-color: #f9f9f9">
<div id="app">
<div class="checkTeam">
<div class="checkTeamTxt">姓名</div>
<input id="realName" class="checkTeamInput" name="realName" type="text" value="" placeholder="请填写姓名" maxlength="8"/>
</div>
<div class="checkTeam">
<div class="checkTeamTxt">电话</div>
<input id="mobilePhone" class="checkTeamInput" name="mobilePhone" type="text" value="" placeholder="11位手机号" maxlength="11"/>
</div>
<textarea rows="10" cols="30" style="width: 100%;color: #8c8c8c">详细描述您要提交的问题</textarea>
<div class="okbuok">
<div>
是否允许公开: 公开 <input type="radio" id="dewey" name="drone" value="dewey"> 不公开 <input type="radio" id="louie" name="drone" value="louie">
</div>
<div>
是否允许部门联系: 允许 <input type="radio" id="ok" name="123" value="dewey"> 不允许<input type="radio" id="nook" name="123" value="louie">
</div>
</div>
<div class="upload_contain">
<input type="file" id="file_one" @change="inputChange($event)" style="display: none">
<input type="file" id="file_two" @change="inputChange($event)" style="display: none">
<input type="file" id="file_three" @change="inputChange($event)" style="display: none">
<img id="img_one" @click="imgOne" class="upload" src="vue/upload.jpg" >
<img id="img_two" @click="imgTwo" class="upload" src="vue/upload.jpg" />
<img id="img_three" @click="imgThree" class="upload" src="vue/upload.jpg" />
</div>
<div class="qing" style="font-size: x-small">请提供现场图片和位置信息,更快更准处理诉求</div>
<div class="tijiao_contain">
<div class="tijiao">提交</div>
</div>
<!--<div class="qing" style="background-color: #f9f9f9">点击查看<span style="color: #00B0E5">《随手拍处理流程》</span></div>-->
</div>
<script>
var input_one ;
var input_two;
var input_three;
new Vue({
el: '#app',
data: {
img01_src:"",
img02_src:"",
img03_src:"",
},
mounted: function () {
},
methods: {
inputChange(e){ //点击弹出模态框,并取的点击了哪个div的who值
console.log(e.target.id)
//var file=input_one.files[0] ;
if (e.target.id=='file_one'){
let file01=input_one.files[0] ;
let image01 = document.getElementById("img_one");
let reader = new FileReader();
reader.readAsDataURL(file01);
reader.onload = function (e) {
image01.src = reader.result;
img01_src=reader.result;
//console.log(img01_src)
}
// 接下来,要上传图片,并获得返回的图片的url地址
}
if (e.target.id=='file_two'){
let file02=input_two.files[0] ;
let image02 = document.getElementById("img_two");
let reader = new FileReader();
reader.readAsDataURL(file02);
reader.onload = function (e) {
image02.src = reader.result; //
img02_src=reader.result;
}
// 接下来,要上传图片,并获得返回的图片的url地址
}
if (e.target.id=='file_three'){
let file03=input_three.files[0] ;
let image03 = document.getElementById("img_three");
let reader = new FileReader();
reader.readAsDataURL(file03);
reader.onload = function (e) {
image03.src = reader.result;
img03_src=reader.result;
}
// 接下来,要上传图片,并获得返回的图片的url地址
}
},
imgOne(){
input_one = document.getElementById("file_one");
input_one.click();
},
imgTwo(){
input_two = document.getElementById("file_two");
input_two.click();
},
imgThree(){
input_three = document.getElementById("file_three");
input_three.click();
},
submit(){ //上传图片和手机号姓名
}
}
})
</script>
</body>
</html>