原创小玛丽打怪兽随笔 vue5 阅读 2 小时前
具体功能还没完善完, 还有一个数量弹窗还没写上去, 先上传部分代码, 希望大家可以多提一下意见和建议
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no", viewport-fit="cover">
- <title > 规格弹窗 </title>
- </head>
- <body>
- <div class="popBox" id="app">
- <div class="sku-list">
- <div class="sku-item" v-for="items in specs" :key="items.name">
- <label>{{ items.name }}</label>
- <div class="spces-item">
- <button
- v-for="(entry, index) in items.entries" :key="entry.id"
- v-if="entry.isSelected"
- @click="selectedSpec(items.name, entry.id)"
- :class="isSpecEntrySelected(items.name, entry.id) ?'active':''"
- :disabled="isSpecEntryAvailable(items.name, entry.id)">
- {{ entry.value }}
- </button>
- </div>
- </div>
- </div>
- </div>
- </body>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- .sku-item {
- margin: 30px 20px;
- }
- .sku-item label {
- margin-bottom: 5px;
- font-size: 14px;
- display: block;
- }
- button {
- background: #fff;
- border: 1px solid #ddd;
- outline: none;
- padding: 5px;
- cursor: pointer;
- display: inline-block;
- margin-right: 10px;
- }
- button.active {
- background: #fe564c;
- color: #fff;
- }
- </style>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- const SKU_LIST = '[{"id":1,"price":12,"specificationValues":[{"id":1,"value":" 原味 "},{"id":4,"value":"red"}],"stock":0},{"id":2,"price":33,"specificationValues":[{"id":2,"value":" 棕色小熊 "},{"id":5,"value":"green"}],"stock":0},{"id":3,"price":33,"specificationValues":[{"id":2,"value":" 绿色狐狸 (杯盖同红色款 "},{"id":4,"value":"red"}],"stock":4}]';
- const SPEC_LIST = '[{"name":" 口味 ","entries":[{"id":1,"value":" 原味 ","isSelected":true},{"id":2,"value":" 绿色狐狸 (杯盖同红色款)","isSelected":true},{"id":3,"value":" 棕色小熊 ","isSelected":false}]},{"name":" 颜色 ","entries":[{"id":4,"value":"red","isSelected":true},{"id":5,"value":"green","isSelected":true}]}]';
- new Vue({
- el: '#app',
- data() {
- return {
- sku: JSON.parse(SKU_LIST),
- specs: JSON.parse(SPEC_LIST),
- selectSpecs: [],
- };
- },
- methods: {
- addDefaultSelectedSpecs() {
- },
- selectedSpec(specName, entryId) {
- const index = this.selectSpecs.findIndex(spec => specName === spec.specName);
- if (index === -1) {
- this.selectSpecs.push({ specName, entryId });
- } else {
- const [spec] = this.selectSpecs.splice(index, 1);
- if (spec.id !== entryId) {
- this.selectSpecs.push({ specName, entryId });
- }
- }
- },
- isSpecEntrySelected(specName, entryId) {
- const match = spec => specName === spec.specName && entryId === spec.entryId;
- return this.selectSpecs.find(match);
- },
- isSpecEntryAvailable(specName, entryId) {
- const combination = this.selectSpecs.filter(spec => spec.specName !== specName);
- combination.push({ specName, entryId });
- return this.sku.filter(sku => this.isMatchSku(sku, combination) && sku.stock> 0).length> 0;
- },
- isSkuSelected() {
- return this.selectSpecs.length === this.sku.specificationValues.length;
- },
- isMatchSku(sku, specs) {
- let skuSpecEntryIds = [];
- let specEntryIds = [];
- if(!sku.specificationValues || !specs) {
- skuSpecEntryIds.push(sku.id);
- } else {
- skuSpecEntryIds = sku.specificationValues.map(sku => sku.id);
- specEntryIds = specs.map(spec => spec.entryId);
- }
- return skuSpecEntryIds.length === this.intersection(skuSpecEntryIds, specEntryIds).length;
- },
- intersection(skus, specs) {
- const intersect = sku => specs.indexOf(sku) !== -1;
- return skus.filter(intersect);
- },
- },
- computed: {
- totalStock() {
- return this.sku.reduce((acc, val) => {
- return acc + Number(val.stock);
- }, 0);
- }
- }
- });
- </script>
- </html>
JavaScript
Vue.js
评论
0
喜欢
0
赞
0
评论 ( 0 )
走你
来源: http://www.qdfuns.com/article/11994/d8d922c1ce02cbc40c9609dfa9d856f9.html