xuzhihao
/
fd-mall-backstage-new


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品关联</title>
  <style>
    #list {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(auto-fill, 400px);;
      grid-row-gap: 20px;
      grid-column-gap: 20px;
    }

    #list > div {
      width: 400px;
      height: 200px;
      padding-left: 220px;
      box-sizing: border-box;
      position: relative;
      border: 1px solid #000;
    }

    #list > div > img {
      position: absolute;
      max-height: 100%;
      left: 0;
      max-width: 200px;
      top: 50%;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  
  <div>
    <input type="text" id="text" placeholder="搜索商品">
    <button id="search">搜索</button>
  </div>

  <div id="list">

  </div>

  <script src="./axios.js"></script>
  <script>
    let $text = document.querySelector('#text')
    let $search = document.querySelector('#search')
    let $data = document.querySelector('#list')
    
    $search.addEventListener('click', function(ev) {
      var params = new URLSearchParams();
      params.append('sort', 'id')
      params.append('keyword', $text.value)
      params.append('order', 'desc')

      axios({
        url: 'https://shop.4dkankan.com/platform-framework/api/goods/list',
        method: 'POST',
        data: params
      }).then(function(data) {
        let goodsList = data.data.data.goodsList
        $data.innerHTML = goodsList.map(function(item) { 
          return ' \
          <div> \
            <img src="'+item.list_pic_url+'">\
            <div>\
              <p><label>标题：</label>'+item.name+'</p>\
              <p><label>id：</label>'+item.id+'</p>\
              <p><label>价格：</label>'+item.market_price+'</p>\
            </div>\
          </div>'
        }).join('')
      })
    })
  </script>
</body>
</html>