vue購物車插件編寫代碼
更新時(shí)間：2017年11月27日 10:49:11 作者：麻球科技-菅雙鵬
這篇文章主要為大家詳細(xì)介紹了vue購物車插件的編寫代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue購物車插件的具體代碼，供大家參考，具體內(nèi)容如下
先上效果圖
下面相關(guān)代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" href="../../css/app.css">
<style>
.mui-content>.mui-table-view:first-child{
margin-top: 0.133333rem;
}
.mui-bar-nav~.mui-content{
padding-top: 1.173333rem;
}
.mui-content{
padding-bottom: 1.173333rem;
}
input[type=checkbox] {
width: 0.426666rem;
height: 0.426666rem;
border: 0;
outline: 0!important;
background-color: transparent;
-webkit-appearance: none;
}
input[type=checkbox]:before {
content: '\e411';
}
input[type=checkbox]:checked:before {
content: '\e441';
}
input[type=checkbox]:before {
font-family: Muiicons;
font-size: 0.426666rem;
font-weight: 400;
line-height: 1;
text-decoration: none;
color: #81d8d0;
border-radius: 0;
background: 0 0;
-webkit-font-smoothing: antialiased;
}
input[type=checkbox]:checked:before {
color: #81d8d0;
}
.allinput[type=checkbox] {
width: 0.426666rem;
height: 0.426666rem;
border: 0;
outline: 0!important;
background-color: transparent;
-webkit-appearance: none;
}
.allinput[type=checkbox]:before {
content: '\e411';
}
.allinput[type=checkbox]:checked:before {
content: '\e441';
}
.allinput[type=checkbox]:before {
font-family: Muiicons;
font-size: 0.426666rem;
font-weight: 400;
line-height: 1;
text-decoration: none;
color: #fff;
border-radius: 0;
background: 0 0;
-webkit-font-smoothing: antialiased;
}
.allinput[type=checkbox]:checked:before {
color: #fff;
}
.popover_detail_numbtn .mui-numbox{
float: right;
border-radius: 0;
padding: 0 0.56rem;
height: 0.586666rem;
width:2rem;
}
.mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn] {
font-size: 0.4rem;
line-height: 0.56rem;
width: 0.56rem;
height: 0.56rem;
color: #707070;
background-color: #fff;
}
.shop_input_num[type=number]{
font-size: 0.266666rem;
line-height: 0.56rem;
top: 0;
}
</style>
</head>
<body id="app" v-cloak>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-pull-left mui_return_back"></a>
<h1 class="mui-title">購物車</h1>
</header>
<div class="mui-content">
<div class="mui_shopcar_list_box" v-for="data in items">
<div class="mui_order_item_title">
<div class="mui_adress_radio">
<input type="checkbox" v-model="data.shopselected" v-on:click="checkShop($index)">
</div>
<a href="javascript:;" class="look_shop" v-on:click="LookShop(data.id)">
{{data.shopname}} <img class="order_link" src="../../images/icon/order_link.png"/>
</a>
</div>
<ul class="mui-table-view mui-table-view-chevron mui_shopcar_list">
<li class="mui_shopcar_item" v-for="item in data.listgoods">
<div class="mui_adress_radio">
<input type="checkbox" v-model="item.selected" v-on:click="checkGoods($parent.$index,$index)">
</div>
<div class="mui_shopcar_img" v-on:click="LookGoods(item.id)">
<img src="../../images/423.jpg"/>
</div>
<div class="mui_shopcar_media">
<div class="mui_shopcar_title">
<p class="mui_shopcar_name">{{ item.name }}</p>
<span class="mui_shopcar_del" v-on:click="remove($parent.$index,$index)">
<a><img src="../../images/icon/19.png" alt="" /></a>
</span>
</div>
<p class="mui_shopcar_unit">單位：升</p>
<div class="mui_shopcar_pro">
<p class="mui_shopcar_price">{{item.price|currency '￥' 2}}</p>
<div class="popover_detail_numbtn">
<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
<button class="mui-btn mui-btn-numbox-minus" type="button" v-on:click.native="reduce($parent.$index,$index)">-</button>
<input class="mui-input-numbox shop_input_num" type="number" disabled value="{{item.count}}"/>
<button class="mui-btn mui-btn-numbox-plus" type="button" v-on:click.native="add($parent.$index,$index)">+</button>
</div>
</div>
</div>
</div>
</li>
<!--<li class="mui_shopcar_item">
<div class="mui_adress_radio">
<input name="address" type="checkbox">
</div>
<div class="mui_shopcar_img">
<img src="../../images/423.jpg"/>
</div>
<div class="mui_shopcar_media">
<div class="mui_shopcar_title">
<p class="mui_shopcar_name">內(nèi)蒙古原產(chǎn)牛奶</p>
<span class="mui_shopcar_del">
<img src="../../images/icon/19.png" alt="" />
</span>
</div>
<p class="mui_shopcar_unit">單位：升</p>
<div class="mui_shopcar_pro">
<p class="mui_shopcar_price">￥ 50.00</p>
<div class="popover_detail_numbtn">
<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input id="test" class="mui-input-numbox" type="number" value="5" />
<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
</div>
</div>
</div>
</li>-->
</ul>
</div>
</div>
<div class="mui_shopcar_bar">
<div class="mui_adress_radio">
<input type="checkbox" class="allinput" v-model="selectAll">
全選
</div>
<div class="mui_shopcar_sumbtn">
<p class="mui_shopcar_sum">合計(jì)：{{ total|currency '￥' 2}}</p>
<button id="order_true" type="button" v-on:click.native="Submit()">結(jié)算</button>
</div>
</div>
<script type="text/javascript" src="../../js/app.js" ></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/jquery-1.8.3.min.js" ></script>
<script>
mui.init();//初始化
mui.plusReady(function(){})
var vm = new Vue({
el: "#app",
data: {
OrderTotal:0,//用來保存商品總價(jià)
items: [//加入購物車商品
{
id:1,
shopname:'內(nèi)蒙古原產(chǎn)牛奶',
shopselected:false,
listgoods:[
{
id:101,
name: '奶片',
price:1.3,
count:2,
selected:false
},
{
id:102,
name: '小辣椒',
price:100,
count:1,
selected:false
},
{
id:103,
name: '小辣椒22222',
price:100,
count:1,
selected:false
}
]
},
{
id:2,
shopname:'云端電子',
shopselected:false,
listgoods:[
{
id:201,
name: '三星',
price:4000,
count:2,
selected:false
},
{
id:202,
name: '華為1',
price:100,
count:1,
selected:false
},
{
id:203,
name: '華為2',
price:100,
count:1,
selected:false
},
{
id:204,
name: '華為3',
price:100,
count:1,
selected:false
}
]
},
{
id:3,
shopname:'小米官方商店',
shopselected:false,
listgoods:[
{
id:301,
name: '小米4',
price:1.3,
count:2,
selected:false
}
]
}
]
},
//computed相當(dāng)于屬性的一個(gè)實(shí)時(shí)計(jì)算，如果實(shí)時(shí)計(jì)算里關(guān)聯(lián)了對(duì)象，那么當(dāng)對(duì)象的某個(gè)值改變的時(shí)候，同事會(huì)出發(fā)實(shí)時(shí)計(jì)算。
computed: {
selectAll:{
//動(dòng)態(tài)判斷全選按鈕是否選中（根據(jù) 選中的商店數(shù)量==items數(shù)組長度）
get:function(){
return this.items.filter(function(item){
return item.shopselected == true;
}).length == this.items.length;
},
//設(shè)置全選
set:function(val){
this.items.forEach(function(item){//遍歷所有商店
item.shopselected = val;//所有商店選中
item.listgoods.forEach(function(list){//遍歷所有商品
list.selected = val;//所有商品選中
})
});
}
},
num:function(){
var num = 0;
this.items.forEach(function(item){//遍歷商家數(shù)組
item.listgoods.filter(function(a){//遍歷商品數(shù)組
return a.selected//選擇選中的商品
}).map(function(a){
return a.count//計(jì)算商品數(shù)量*商品單價(jià)
}).forEach(function(a){
num += a;
});
})
return num;//返回總價(jià)
},
//計(jì)算總價(jià)
total:function(){
var total = 0;
this.items.forEach(function(item){//遍歷商家數(shù)組
item.listgoods.filter(function(a){//遍歷商品數(shù)組
return a.selected//選擇選中的商品
}).map(function(a){
return a.count*a.price//計(jì)算商品數(shù)量*商品單價(jià)
}).forEach(function(a){
total += a;
});
})
this.OrderTotal = total;//更新商品總價(jià)
return total;//返回總價(jià)
}
},
methods:{
//點(diǎn)擊商店選中所有商品
checkShop:function(pID){
var self = this.items[pID];
if(self.shopselected != true){
self.listgoods.forEach(function(list){
list.selected = true;
})
}else{
self.listgoods.forEach(function(list){
list.selected = false;
})
}
},
//選擇某商品 判斷商店是否全選
checkGoods:function(pID,id){
var self = this.items[pID];//點(diǎn)擊單選框的父節(jié)點(diǎn)
if(self.listgoods[id].selected){//判斷當(dāng)選框是否備選中
self.listgoods.filter(function(item){
return item.selected == true;
}).length-1 == self.listgoods.length ? self.shopselected = true : self.shopselected = false;
}else{
self.listgoods.filter(function(item){
return item.selected == true;
}).length+1 == self.listgoods.length ? self.shopselected = true : self.shopselected = false;
}
},
//增加商品數(shù)量 最多購買100件
add:function (parentID,ID) {//parentID是商家id,ID是商品id
var self = this.items[parentID].listgoods[ID];
if(self.count >100){
return false;
}
self.count++;
},
//減少商品數(shù)量 最少買一件
reduce:function(parentID,ID){//parentID是商家id,ID是商品id
var self = this.items[parentID].listgoods[ID];
if(self.count <= 1){
return false
}
self.count--;
},
//移除商品函數(shù)
remove:function(parentID,ID){//parentID是商家id,ID是商品id
var self = this.items[parentID];
self.listgoods.length == 1 ? this.items.splice(parentID, 1) : self.listgoods.splice(ID, 1);//如果刪除最后一個(gè)商品，則商家一并刪除
},
//結(jié)算函數(shù)
Submit:function(){
//獲取選中的商家及相應(yīng)的商品
var TotalPrice = this.OrderTotal;//存放要支付的總價(jià)
var OrderArry = [];//存放選中的商品數(shù)組
this.items.forEach(function(item){//遍歷商家數(shù)組
if(item.shopselected){//如果商家備選中則其下商品均被選中，直接添加數(shù)組
return OrderArry.push(item)
}else{//如果商家沒有選中，繼續(xù)遍歷旗下商品是否備選中
var arry = {//設(shè)置臨時(shí)數(shù)組，來保存沒有選中商店的數(shù)據(jù)
'id' : item.id,//商店id
'shopname' : item.shopname,//商店名字
'shopselected' : item.shopselected,//商店是否備選中
'listgoods' : []//商店旗下的商品數(shù)組
};
item.listgoods.filter(function(list){//遍歷商店旗下的商品數(shù)組
return list.selected//過濾所有選中的商品
}).map(function(a){
return arry.listgoods.push(a)//將選中的商品添加到數(shù)組中
});
if(arry.listgoods.length > 0){//如果有商品選中在添加到數(shù)組
OrderArry.push(arry)
}
}
});
console.log(OrderArry)//打印選中的商品數(shù)組
console.log(TotalPrice)//打印總價(jià)
//結(jié)算跳轉(zhuǎn)頁面
//打開確認(rèn)訂單
mui.openWindow({
url: 'order_true.html',
id:'order_true.html',
extras:{//自定義擴(kuò)展參數(shù)，可以用來處理頁面間傳值
'BuyMethod' : 'ShoppingCartSettlement',//結(jié)算方式
'ItemList' : OrderArry,//選擇的商品數(shù)組
'TotalPrice' : TotalPrice//要支付的總價(jià)
},
waiting:{
autoShow:true,//自動(dòng)顯示等待框，默認(rèn)為true
title:'正在加載...'//等待對(duì)話框上顯示的提示內(nèi)容
}
});
},
//查看商家
LookShop:function(id){
mui.openWindow({
url: '../SellerHome/seller_index.html',
id:'../SellerHome/seller_index.html',
extras:{
//自定義擴(kuò)展參數(shù)，可以用來處理頁面間傳值
},
waiting:{
autoShow:true,//自動(dòng)顯示等待框，默認(rèn)為true
//title:'正在加載...'//等待對(duì)話框上顯示的提示內(nèi)容
}
});
},
//查看商品
LookGoods:function(id){
mui.openWindow({
url: '../Selected/selected_list_details.html',
id:'../Selected/selected_list_details.html',
extras:{
//自定義擴(kuò)展參數(shù)，可以用來處理頁面間傳值
},
waiting:{
autoShow:false,//自動(dòng)顯示等待框，默認(rèn)為true
//title:'正在加載...'//等待對(duì)話框上顯示的提示內(nèi)容
}
});
},
}
});
</script>
</body>
</html>
關(guān)于vue.js的學(xué)習(xí)教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳
本文主要介紹了vue3中el-uplod結(jié)合ts實(shí)現(xiàn)圖片粘貼上傳,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
這篇文章主要介紹了Vue CLI 命令行打包配置自定義參數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue計(jì)算屬性computed的使用方法,結(jié)合實(shí)例形式分析了vue計(jì)算屬性computed的基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-03-03
Vue動(dòng)態(tài)組件與內(nèi)置組件淺析講解
閑話少說，我們進(jìn)入今天的小小五分鐘學(xué)習(xí)時(shí)間，前面我們了解了vue的組件，我們本文主要是講解vue的動(dòng)態(tài)組件和內(nèi)置組件，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3中Vite和Vue-cli的特點(diǎn)與區(qū)別詳解
vue-cli是Vue早期推出的一款腳手架,使用webpack創(chuàng)建Vue項(xiàng)目,可以選擇安裝需要的各種插件,比如Vuex、VueRouter,下面這篇文章主要給大家介紹了關(guān)于Vue3中Vite和Vue-cli的特點(diǎn)與區(qū)別的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了Vue2幾種常見開局方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了vue加載視頻流,實(shí)現(xiàn)直播功能的過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
elementui源碼學(xué)習(xí)仿寫一個(gè)el-tooltip示例
本篇文章記錄仿寫一個(gè)el-tooltip組件細(xì)節(jié)，從而有助于大家更好理解餓了么ui對(duì)應(yīng)組件具體工作細(xì)節(jié)，本文是elementui源碼學(xué)習(xí)仿寫系列的又一篇文章，后續(xù)空閑了會(huì)不斷更新并仿寫其他組件2023-07-07
vue使用原生js實(shí)現(xiàn)滾動(dòng)頁面跟蹤導(dǎo)航高亮的示例代碼
這篇文章主要介紹了vue使用原生js實(shí)現(xiàn)滾動(dòng)頁面跟蹤導(dǎo)航高亮的示例代碼，滾動(dòng)頁面指定區(qū)域?qū)Ш礁吡?。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了為大家函數(shù)式組件劫持替代json封裝element表格的過程思路及示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07