Showing
9 changed files
with
91 additions
and
10 deletions
app/images/example/1.png
0 → 100644
![](/fe/yoho-shop-manage/raw/3545aea00f76707426f312ca2b6f912df3ed98e1/app/images/example/1.png)
11.5 KB
app/images/example/2.png
0 → 100644
![](/fe/yoho-shop-manage/raw/3545aea00f76707426f312ca2b6f912df3ed98e1/app/images/example/2.png)
13.3 KB
app/images/example/3.png
0 → 100644
![](/fe/yoho-shop-manage/raw/3545aea00f76707426f312ca2b6f912df3ed98e1/app/images/example/3.png)
23.2 KB
app/images/example/4.png
0 → 100644
![](/fe/yoho-shop-manage/raw/3545aea00f76707426f312ca2b6f912df3ed98e1/app/images/example/4.png)
18.5 KB
app/images/example/5.png
0 → 100644
![](/fe/yoho-shop-manage/raw/3545aea00f76707426f312ca2b6f912df3ed98e1/app/images/example/5.png)
16 KB
1 | +<template> | ||
2 | + <Modal | ||
3 | + v-model="showExample" | ||
4 | + width="700" | ||
5 | + title="色卡图片示例"> | ||
6 | + <div> | ||
7 | + <div> | ||
8 | + <div class="example-1"></div> | ||
9 | + <div class="example-2"></div> | ||
10 | + <div class="example-3"></div> | ||
11 | + <div class="example-4"></div> | ||
12 | + <div class="example-5"></div> | ||
13 | + </div> | ||
14 | + <div> | ||
15 | + <span class="example-title">商品正面图</span> | ||
16 | + <span class="example-title">商品反面图</span> | ||
17 | + <span class="example-title">模特图</span> | ||
18 | + <span class="example-title">男生频道封面图</span> | ||
19 | + <span class="example-title">女生频道封面图</span> | ||
20 | + </div> | ||
21 | + </div> | ||
22 | + | ||
23 | + <div slot="footer" style="text-align: center"> | ||
24 | + <Button type="primary" size="large" @click="close">关闭</Button> | ||
25 | + </div> | ||
26 | + </Modal> | ||
27 | +</template> | ||
28 | + | ||
29 | +<script> | ||
30 | + export default { | ||
31 | + data() { | ||
32 | + return { | ||
33 | + showExample: false | ||
34 | + } | ||
35 | + }, | ||
36 | + methods: { | ||
37 | + show() { | ||
38 | + this.showExample = true; | ||
39 | + }, | ||
40 | + close() { | ||
41 | + this.showExample = false; | ||
42 | + } | ||
43 | + } | ||
44 | + } | ||
45 | +</script> | ||
46 | + | ||
47 | +<style lang="scss"> | ||
48 | + @mixin exampleImg ($num: 1) { | ||
49 | + display: inline-block; | ||
50 | + width: 100px; | ||
51 | + height: 150px; | ||
52 | + border-radius: 3px; | ||
53 | + background-image: url(../../../../images/example/#{$num}.png); | ||
54 | + background-repeat: no-repeat; | ||
55 | + margin: 15px 15px; | ||
56 | + } | ||
57 | + | ||
58 | + .example-1 { | ||
59 | + @include exampleImg(1); | ||
60 | + } | ||
61 | + | ||
62 | + .example-2 { | ||
63 | + @include exampleImg(2); | ||
64 | + } | ||
65 | + | ||
66 | + .example-3 { | ||
67 | + @include exampleImg(3); | ||
68 | + } | ||
69 | + | ||
70 | + .example-4 { | ||
71 | + @include exampleImg(4); | ||
72 | + } | ||
73 | + | ||
74 | + .example-5 { | ||
75 | + @include exampleImg(5); | ||
76 | + } | ||
77 | + | ||
78 | + .example-title { | ||
79 | + display: inline-block; | ||
80 | + width: 130px; | ||
81 | + text-align: center; | ||
82 | + } | ||
83 | +</style> |
@@ -209,12 +209,7 @@ | @@ -209,12 +209,7 @@ | ||
209 | </Col> | 209 | </Col> |
210 | </Row> | 210 | </Row> |
211 | 211 | ||
212 | - <Modal | ||
213 | - v-model="showExample" | ||
214 | - title="色卡图片示例"> | ||
215 | - <p>自定义宽度,单位 px,默认 520px。</p> | ||
216 | - <p>对话框的宽度是响应式的,当屏幕尺寸小于 768px 时,宽度会变为自动<code>auto</code>。</p> | ||
217 | - </Modal> | 212 | + <ExampleModal ref="exampleModal"></ExampleModal> |
218 | </div> | 213 | </div> |
219 | </template> | 214 | </template> |
220 | 215 | ||
@@ -223,6 +218,7 @@ | @@ -223,6 +218,7 @@ | ||
223 | import api from 'product-create/api'; | 218 | import api from 'product-create/api'; |
224 | import service from 'product-create/service'; | 219 | import service from 'product-create/service'; |
225 | import serial from 'product-create/serialize'; | 220 | import serial from 'product-create/serialize'; |
221 | +import ExampleModal from './example-modal.vue'; | ||
226 | 222 | ||
227 | export default { | 223 | export default { |
228 | props: ['step', 'product'], | 224 | props: ['step', 'product'], |
@@ -323,9 +319,11 @@ export default { | @@ -323,9 +319,11 @@ export default { | ||
323 | this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = ''; | 319 | this.product.goods[colorIndex].goodsImage[imageIndex].imageUrl = ''; |
324 | }, | 320 | }, |
325 | onClickShowExample: function() { | 321 | onClickShowExample: function() { |
326 | - console.log('fdsad'); | ||
327 | - this.showExample = true; | 322 | + this.$refs.exampleModal.show(); |
328 | } | 323 | } |
324 | + }, | ||
325 | + components: { | ||
326 | + ExampleModal | ||
329 | } | 327 | } |
330 | }; | 328 | }; |
331 | </script> | 329 | </script> |
@@ -48,7 +48,7 @@ | @@ -48,7 +48,7 @@ | ||
48 | import Operator from './Operator'; | 48 | import Operator from './Operator'; |
49 | 49 | ||
50 | export default { | 50 | export default { |
51 | - name: 'ProducList', | 51 | + name: 'ProductList', |
52 | props: { | 52 | props: { |
53 | cid: { | 53 | cid: { |
54 | type: [Number, String], | 54 | type: [Number, String], |
@@ -78,7 +78,7 @@ | @@ -78,7 +78,7 @@ | ||
78 | 78 | ||
79 | this.$Modal.confirm({ | 79 | this.$Modal.confirm({ |
80 | title: '删除店铺商品分类', | 80 | title: '删除店铺商品分类', |
81 | - content: `你确定 删除 商品分类 ${row.categoryName} 么?`, | 81 | + content: `你确定 删除 商品分类 ${row.categoryName} 吗?`, |
82 | onOk() { | 82 | onOk() { |
83 | _this.deleteCategory(row.categoryId).then(() => { | 83 | _this.deleteCategory(row.categoryId).then(() => { |
84 | _this.getData(); | 84 | _this.getData(); |
-
Please register or login to post a comment