目錄
購物車效果展示：
購物車代碼：
購物車效果展示：
此項目添加、修改、刪除數據的地方都寫了瀏覽器都會把它存儲起來
下次運行項目時會把瀏覽器數據拿出來并在頁面展示
Video_20230816145047
購物車代碼：
復制完代碼，需改下script中引入的vue文件地址；可直接使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div><form action=""> 商品名稱:<input type="text" v-model="productName" name="productName">商品單價:<input type="text" v-model="productPrice" name="productPrice"><input type="button" value="添加商品" @click="addProduct"></form></div><ul><li v-for="(pro,index) in productList" :key="index">商品名稱：{{pro.productName}}=========商品單價：{{pro.productPrice}} <button type="button" @click="addProToCart(index)">添加到購物車</button><button type="button" @click="deleteProToCart(index)">刪除此商品</button></li></ul><cart :cartlist="cartList"></cart></div><template id="cartHtml"><div><table border="1"><tr><td>全選<input type="checkbox" @change="checkActive" id="isCheck"></td><td>商品名稱</td><td>商品單價</td><td>商品數量</td><td>商品價格</td></tr><tr v-for="(pro,index) in cartlist" :key="index"><td><input type="checkbox" v-model="pro.active" @change="ziCheck"></td><td>{{pro.productName}}</td><td>{{pro.productPrice}}</td><td><button type="button" @click="reduceProNum(index)">-</button>{{pro.productNum}}<button type="button" @click="addProNum(index)">+</button></td><td>{{pro.productPrice*pro.productNum}}</td></tr><tr><td colspan="3">選中的商品：{{activeNum}}/{{cartlist.length}}</td><td colspan="2">總價格：{{totalPrice}}</td></tr></table></div></template></body>
<script src="../js/vue2.7.js"></script><!--根據自己的vue文件地址填寫-->
<script>//創建一個購物車子組件var cart={template:"#cartHtml",props:["cartlist"],methods:{addProNum(index){let product =this.cartlist[index];product.productNum++localStorage.setItem('cartList', JSON.stringify(this.cartlist));},reduceProNum(index){let product =this.cartlist[index];//判斷商品數量是否為一if (product.productNum==1) {this.cartlist.splice(index,1)//為一，在數組中刪除掉//刪除完后把數據放在瀏覽器里面把key值設置為cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));}else{product.productNum--//減完之后把數據放在瀏覽器里面把key值設置為cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));}},checkActive(){if(document.getElementById("isCheck").checked){for(var i=0;i<this.cartlist.length;i++){this.cartlist[i].active=true;}//全選為true后把數據放在瀏覽器里面把key值設置為cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));}else{for(var i=0;i<this.cartlist.length;i++){this.cartlist[i].active=false;}//全選為false后把數據放在瀏覽器里面把key值設置為cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));}},ziCheck(){//當多選框變化時把數據放在瀏覽器里面把key值設置為cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartlist));},},computed:{//計算購物車商品總和activeNum(){let activeProductList=this.cartlist.filter(item=>{return item.active})return activeProductList.length;},//計算購物車商品的總價格totalPrice(){let result=0;for(pro of this.cartlist){if(pro.active){result=result+pro.productPrice*pro.productNum}}return result}},updated() {//當多選框都為true全選后的多選框為truevar isActive=this.cartlist.every(c => c.active)if (isActive) {document.getElementById("isCheck").checked=true} else {document.getElementById("isCheck").checked=false}},}let app=new Vue({el:"#app",data() {return {productName:'',productPrice:'',productList:[],cartList:[]}},methods: {addProduct(){let isnameOk=true;let ispriceOk=true;if (this.productName=="") {isnameOk=false}if(isNaN(this.productPrice) || this.productPrice<=0){ispriceOk=false;}if(isnameOk && ispriceOk){//查找新增的商品是否存在商品列表中，如果不存在返回-1let findindex=this.productList.findIndex(item=>{return item.productName==this.productName})//判斷商品列表中是否存在新增的商品if(findindex==-1){//把新商品添加到商品列表中this.productList.push({productName:this.productName,productPrice:this.productPrice})//把數據放在瀏覽器里面把key值設置為productListlocalStorage.setItem('productList', JSON.stringify(this.productList));//添加完表單中的輸入框調為空this.productName='';this.productPrice='';}else{alert("此商品已經存在商品列表！")//商品已存在，給出提示}}else{alert("請輸入合適的商品名稱及單價")}},addProToCart(index){let newproduct=this.productList[index];//根據下標從商品列表里面取出商品//從購物車列表中查找，是否存在新的商品，如果找到返回購物車的商品let product= this.cartList.find(item=>{return item.productName==newproduct.productName})if (product) {//如果有對應的商品則數量加一product.productNum++}else{//沒有對應的商品就添加商品到購物車this.cartList.push({productName:newproduct.productName,productPrice:newproduct.productPrice,productNum:1,active:true})//把數據放在瀏覽器里面把key值設置為cartListlocalStorage.setItem('cartList', JSON.stringify(this.cartList));}},deleteProToCart(index){let isOk=confirm("是否刪除此商品！")if(isOk){this.productList.splice(index,1)}//把數據放在瀏覽器里面把key值設置為productListlocalStorage.setItem('productList', JSON.stringify(this.productList));}},//生命周期鉤子，部署完后執行從瀏覽器中把數據拿出來mounted(){for(pro of JSON.parse(localStorage.getItem("productList"))){this.productList.push({productName:pro.productName,productPrice:pro.productPrice});}for(pro of JSON.parse(localStorage.getItem("cartList"))){this.cartList.push({productName:pro.productName,productPrice:pro.productPrice,productNum:pro.productNum,active:pro.active});}},components:{cart},})
</script>
</html>
算法求解帶需求不確定性的集成規劃和調度問題)
