Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to implement a shopping cart plug-in in vue". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to implement a shopping cart plug-in in vue" can help you solve the problem.

Related codes:

Hello MUI.mui-content > .mui-table-view:first-child {margin-top: 0.133333remt;} .mui-bar-nav~.mui-content {padding-top: 1.1733remt;}. Mui-content {padding-bottom: 1.1733remt;} input [type=checkbox] {width: 0.426666remt; height: 0.426666remt; border: 0; outline: 0importance; background-color: transparent;-webkit-appearance: none;} input [type = checkbox]: before {content:'\ e411' } input [type=checkbox]: checked:before {content:'\ e441 input;} input [type = checkbox]: before {font-family: Muiicons; font-size: 0.426666remt; font-weight: 400; line-height: 1; text-decoration: none; color: # 81d8d0; border-radius: 0; background: 00;-webkit-font-smoothing: antialiased;} input [type = checkbox]: checked:before {color: # 81d8d0;} .allinput [type=checkbox] {width: 0.426666remheight; border: 0; outline: 0 input Background-color: transparent;-webkit-appearance: none;} .allinput [type=checkbox]: before {content:'\ e411employees;} .allinput [type=checkbox]: checked:before {content:'\ e441remt;} .allinput [type=checkbox]: before {font-family: Muiicons; font-size: 0.426666remr; font-weight: 400; line-height: 1; text-decoration: none; color: # fff; border-radius: 0; background: 00;-webkit-font-smoothing: antialiased .allinput [type=checkbox]: checked:before {color: # fff;}. Popover_detail_numbtn. Mui-numbox {float: right;border-radius: 0. 56 rempadding: 0. 56 rempadding: 0. 56 remma height: 0.5866 remt. Height: 0.5866 remt;. Mui-numbox [class*=btn-numbox],. Mui-numbox [class*=numbox-btn] {font-size: 0.4; line-height: 0. 56; width: 0. 56; color: # 7070; background-color: # fff }. Shop_input_ Num [type = number] {font-size: 0.2666remand line house height: 0.56 remand top: 0;} shopping cart {{data.shopname}}

{{item.name}}

Unit: liter

{{item.price | currency'¥'2}}

-+ Total selection: {{total | currency'¥'2}}

Settlement mui.init () / / initialize mui.plusReady (function () {}) var vm = new Vue ({el: "# app", data: {OrderTotal:0,// is used to preserve the total price of goods items: [/ / add shopping cart goods {id:1, shopname:' Inner Mongolia native milk', shopselected:false, listgoods: [{id:101, name:' milk tablets', price:1.3 Count:2, selected:false}, {id:102, name: 'chili', price:100, count:1, selected:false}, {id:103, name: 'chili 222222, price:100, count:1, selected:false}]}, {id:2 Shopname:' Cloud Electronics', shopselected:false, listgoods: [{id:201, name:' Samsung', price:4000, count:2, selected:false}, {id:202, name:' Huawei 1Q, price:100, count:1, selected:false}, {id:203 Name:' Huawei 2 stores, price:100, count:1, selected:false}, {id:204, name:' Huawei 3 stores, price:100, count:1, selected:false}]}, {id:3, shopname:' Xiaomi official stores', shopselected:false Listgoods: [{id:301, name: 'Xiaomi 4fu, price:1.3, count:2, selected:false}]}}, / / computed is equivalent to a real-time calculation of attributes If an object is associated in real-time computing, colleagues will start real-time computing when a value of the object changes. Computed: {selectAll: {/ / dynamically determine whether the select all button is selected (based on the number of stores selected = = items array length) get:function () {return this.items.filter (function (item) {return item.shopselected = = true;}). Length = = this.items.length }, / / set set:function (val) {this.items.forEach (function (item) {/ / traverse all stores item.shopselected = val;// all stores select item.listgoods.forEach (function (list) {/ / traverse all items list.selected = val;// all items selected})};}, num:function () {var num = 0 This.items.forEach (function (item) {/ / traversing the merchant array item.listgoods.filter (function (a) {/ / traversing the items selected by the return a.selected// array}) .map (function (a) {return a.count// calculates the quantity of goods * unit price}) .forEach (function (a) {num + = a;});}) return num / / return total price}, / / calculate total price total:function () {var total = 0 This.items.forEach (function (item) {/ / traverse merchant array item.listgoods.filter (function (a) {/ / traverse goods array return a.selected// selected items}) .map (function (a) {return a.count*a.price// calculates commodity quantity * commodity unit price}) .forEach (function (a) {total + = a;}) }) this.OrderTotal = total;// update total price return total;// return total price}}, methods: {/ / Click the store to select all items 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;})}}, / / Select an item to determine whether the store selects all checkGoods:function (pID,id) {var self = this.items [pID] / / Click the parent node of the checkbox if (self.listgoods.selected) {/ / determine whether the selected box is 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;}}, / / increase the number of goods to buy up to 100pieces add:function (parentID,ID) {/ / parentID is the merchant id,ID is the commodity id var self = this.items [parentID] .listings [ID]; if (self.count > 100) {return false;} self.count++ }, / / reduce the number of goods and buy at least one reduce:function (parentID,ID) {/ / parentID is a merchant id,ID is a commodity id var self = this.items [parentID] .listings [ID]; if (self.count 0) {/ / if an item is selected before adding it to the array OrderArry.push (arry)}}) Console.log (OrderArry) / / print selected array of goods console.log (TotalPrice) / print total price / / settlement jump page / / Open confirm order mui.openWindow ({url: 'order_true.html', id:'order_true.html', extras: {/ / Custom extension parameters Can be used to handle the value 'BuyMethod':' ShoppingCartSettlement',// settlement method 'ItemList': the total price to be paid by OrderArry,// selected array' TotalPrice': TotalPrice//}, waiting: {autoShow:true,// automatically displays the wait box, default is that true title:' is loading. / / waiting for the prompt displayed on the dialog}}) }, / / View the merchant LookShop:function (id) {mui.openWindow ({url:'.. / SellerHome/seller_index.html', id:'../SellerHome/seller_index.html', extras: {/ / Custom extension parameter, which can be used to handle the transfer of values between pages}, waiting: {autoShow:true,// automatically displays the wait box The default is that true / / title:' is loading.'/ / wait for the prompt displayed on the dialog box}}) }, / / View the product LookGoods:function (id) {mui.openWindow ({url:'.. / Selected/selected_list_details.html', id:'../Selected/selected_list_details.html', extras: {/ / Custom extension parameter, which can be used to handle the transfer of values between pages}, waiting: {autoShow:false,// automatically displays the wait box The default is that true / / title:' is loading.'/ / wait for the prompt displayed on the dialog box}}) This is the end of the introduction of "how to implement a shopping cart plug-in in vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.