Authored by htoooth

fix

  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();