youhuiquan/portSearch/index.js

var list = [];//商品列表
var port,way,jsonPath,img,title,coupon,brokerage,ticketPrice,volume;
function searchEvent () {
	//搜索事件
	port = $("#port").val().trim()//接口地址
	way = $("#way").val().trim()//接口请求方式
	jsonPath = $("#jsonPath").val().trim()//数据json路径
	img = $("#img").val().trim()//图片参数
	title = $("#title").val().trim()//标题参数,
	coupon = $("#coupon").val().trim()//优惠券参数,
	brokerage = $("#brokerage").val().trim()//佣金比例参数
	ticketPrice = $("#ticketPrice").val().trim();//请输入券后价格
	volume = $("#volume").val().trim();//请输入销量
	if(!port || port == ""){
		showMsg('请输入接口名称');
		return;
	}
	if(!way || way == ""){
		showMsg('请输入接口请求方式');
		return;
	}
	if(!jsonPath || jsonPath == ""){
		showMsg('请输入数据json路径');
		return;
	}
	if(!img || img == ""){
		showMsg('请输入图片参数');
		return;
	}
	if(!title || title == ""){
		showMsg('请输入标题参数');
		return;
	}
	portEvent(way,port)
}

function portEvent(type,url) {
	$.ajax({
		type:type,
		url:url,
		dataType:'json',
		success: function (res) {
			var data = res;
			console.log(res)
			list = eval("data." + jsonPath);
			var listHtml = '',quan = '',brokerageHtml = '',ticketPriceHtml = '',volumeHtml = '';
			
			list.forEach(function (item,index) {
				if(volume){
					volumeHtml = `<span class="volume">销量: ${item[volume]}</span>`
				}
				if(coupon){
					quan = `<div class="goods_coupon" ><span>券</span><span>${item[coupon]}元</span></div>`
				}
				if(brokerage){
					brokerageHtml = `<span class="old_price">佣金比例：${item[brokerage]}</span>`
				}
				if(ticketPrice){
					ticketPriceHtml = `<span class="new_price">券后 ￥${item[ticketPrice]}</span>`
				}
				
				listHtml += `<div class="goodsItem">
					<div class="goods_item">
				        <img src="${item[img]}" alt="" class="goods_img">
				        <div class="goods_name">
				          ${item[title]}
				        </div>
				        <div class="quan">
				           ${quan}
				           ${volumeHtml}
				        </div> 
				        <div class="goods_price">
				          ${ticketPriceHtml}
				          ${brokerageHtml}
				        </div>
				     </div>
			    </div>`;
			    $(".commodityList").html(listHtml)
			})
		},
		fail: function (err) {
			showMsg('请求失败');
		}
	});
}
function showMsg(msg) {
	var msgBox = document.getElementsByClassName('alert-info')[0];
	msgBox.children[0].innerText = msg;
	msgBox.style.display="block";

	setTimeout(function() {
		msgBox.style.display="none";
	}, 1500);
}