console
let res = {}
document.getElementById('getInfo').addEventListener('click', async function () {
const id = document.getElementById("goods_id").value
const result = await axios.get(`https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id=${id}`)
res = result.data
document.querySelector("textarea").value = JSON.stringify(res)
})
document.getElementById("getIntroduce").addEventListener('click', async () => {
let str = res.message.goods_introduce
str = str.replace(/\\"/g, "'")
await copy(str)
showTick()
})
document.getElementById("getName").addEventListener('click', async () => {
await copy(res.message.goods_name)
showTick()
})
document.getElementById("getLogo").addEventListener('click', async () => {
await copy(res.message.goods_big_logo)
showTick()
})
document.getElementById("getSmallLogo").addEventListener('click', async () => {
await copy(res.message.goods_small_logo)
showTick()
})
function showTick() {
document.getElementsByClassName("vivi")[0].style.display = "block"
setTimeout(() => {
document.getElementsByClassName("vivi")[0].style.display = "none"
}, 1000)
}
function copy(textToCopy) {
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(textToCopy);
} else {
let textArea = document.createElement("textarea");
textArea.value = textToCopy;
textArea.style.position = "absolute";
textArea.style.opacity = 0;
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
return new Promise((res, rej) => {
document.execCommand('copy') ? res() : rej();
textArea.remove();
});
}
}
<div class="main">
<div>
<div>
<label>id</label>
<input type="number" id="goods_id">
<button id="getInfo">获取</button>
</div>
<div>
<button id="getIntroduce">获取详细信息</button>
<button id="getName">获取名称</button>
<button id="getLogo">获取商品封面(大)</button>
<button id="getSmallLogo">获取商品封面(小)</button>
</div>
</div>
<div>
<textarea></textarea>
</div>
</div>
<div class="vivi">复制成功</div>
.main{
display: flex;
justify-content: space-around;
}
textarea{
width: 100%;
height: 200px;
}
.vivi{
position: absolute;
background-color: rgba(0, 0, 0, .3);
color: #fff;
padding: 5px 10px;
border-radius: 7px;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
display: none;
}