<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{ 500px;border:1px solid #ddd;margin:20% auto;font-size:18px;padding:40px}
.box .col{margin-bottom: 30px;display:flex}
.box .col label{100px;display:inline-block;text-align-last:justify;text-align:justify;margin-right:20px}
.methodspan{padding:1% 20px;text-align:center;font-size:16px;cursor:pointer}
.methodspan.active{background:#00B0F0;color:#fff;}
.tablex{font-size:18px;font-weight:400}
.tablex th{font-size:18px;font-weight:400}
.submit{margin-top:50px;200px;background:#00B0F0;height:40px;color:#fff;border-radius:20px;font-size:20px;
text-align:center;line-height:40px;cursor: pointer;margin: 0 auto;margin-top: 80px;margin-left: 110px;}
.input{border:none;border-bottom:1px solid #001E50;300px}
.input2{border:none;border-bottom:1px solid #001E50;padding:10px 0;200px}
</style>
</head>
<body>
<div id ="app">
<div class="box">
<div class="col">
<label for="">域名</label>
<input type="text" v-model="domain" class="input">
</div>
<div class="col">
<label for="">请求地址</label>
<input type="text" v-model="url" class="input">
</div>
<div class="col">
<label for="">请求方式</label>
<div class="method">
<span class="methodspan" :class="{active:methodD.cur==index}"
v-for="(item,index) in methodD.data"
@click="methodD.cur=index">{{item}}</span>
</div>
</div>
<div class="col">
<label for="">传参字段</label>
</div>
<table class="tablex">
<thead>
<tr>
<th>字段</th>
<th>参数</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="index">
<td><input type="text" class="input2" v-model="item.paramsName"></td>
<td><input type="text" class="input2" v-model="item.value"></td>
<td v-if="index>0"><input type="button" value="删除" @click="delClick(index)"></td>
<td v-if="index==0"><input type="button" value="添加" @click="addClick" ></td>
</tr>
</tbody>
</table>
<div class="submit" @click="summit">提交</div>
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script src="jquery.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
//请求方式
methodD:{
data:['POST','GET'],
cur:0,
},
//请求域名
domain:'https://mall.faw-vw.com',
//请求地址
url:'/Banner/Bottom/index',
//传的参数数据
list:[
{paramsName:'',value:''},
],
},
methods:{
//添加参数
addClick(){
var addTr = {paramsName:'',value:''};
this.list.push(addTr);
},
// 删除
delClick(index){
this.list.splice(index,1);
},
// 提交
summit(){
var _this = this;
var params = {}
// 把传的参数整理放params中
this.list.forEach((item,index) => {
paramsName = item.paramsName;
params[paramsName]=item.value;
})
console.table('请求方式',this.methodD.cur==0?'post':'get','params',params)
// 请求ajax
$.ajax({
"type":_this.methodD.cur==0?'post':'get',
"url": _this.domain+_this.url,
"async": true,
"data": params,
"success": function (res) {
//返回状态处理
console.log(res);
}
});
}
},
})
</script>
</html>