fe / yoho-shop-manage · Commits

Go to a project

Authored by 陈峰
Commit 3dd3d5de75ed1a29bbe1784f47f706a5a8f04024 1 parent 3ccc6375

编辑商品优化

Inline Side-by-side
Showing 11 changed files with 47 additions and 169 deletions
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 8
9 <script> 9 <script>
10 export default { 10 export default {
11 - name: 'Material', 11 + name: 'CheckboxMaterial',
12 props: { 12 props: {
13 value: { 13 value: {
14 type: Array, 14 type: Array,
1 import CheckboxAge from './checkbox-age'; 1 import CheckboxAge from './checkbox-age';
2 import CheckboxColor from './checkbox-color'; 2 import CheckboxColor from './checkbox-color';
3 import CheckboxSize from './checkbox-size'; 3 import CheckboxSize from './checkbox-size';
  4 +import CheckboxMaterial from './checkbox-material';
4 5
5 6
6 export { 7 export {
7 CheckboxAge, 8 CheckboxAge,
8 CheckboxColor, 9 CheckboxColor,
9 - CheckboxSize 10 + CheckboxSize,
  11 + CheckboxMaterial
10 }; 12 };
@@ -33,6 +33,7 @@ @@ -33,6 +33,7 @@
33 33
34 <script> 34 <script>
35 export default { 35 export default {
  36 + name: 'ImageGoodsMain',
36 props: { 37 props: {
37 value: { 38 value: {
38 type: Array, 39 type: Array,
  1 +import ImageGoodsMain from './image-goods-main';
  2 +
  3 +export {
  4 + ImageGoodsMain
  5 +};
  1 +import TableGoodSize from './table-good-size';
  2 +
  3 +export {
  4 + TableGoodSize
  5 +};
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 4
5 <script> 5 <script>
6 export default { 6 export default {
7 - name: 'TableGood', 7 + name: 'TableGoodSize',
8 props: { 8 props: {
9 value: { 9 value: {
10 type: Array, 10 type: Array,
1 -import GoodImage from './good-image';  
2 -import Material from './material';  
3 -import MuliSelect from './muli-select';  
4 -import TableGood from './table-good';  
5 -  
6 -export {  
7 - GoodImage,  
8 - Material,  
9 - MuliSelect,  
10 - TableGood  
11 -};  
1 -<template>  
2 - <div>  
3 - <template v-if="attr.inputType === 'select'">  
4 - <Select :value="handleSelectValue"  
5 - @input="updateSelectValue"  
6 - :placeholder="'请选择' + attr.attributeName"  
7 - style="width: 350px;">  
8 - <Option v-for="name in attr.idNameList" :value="name.id" :key="name">{{name.text}}</Option>  
9 - </Select>  
10 - </template>  
11 -  
12 - <template v-else>  
13 - <Checkbox-group  
14 - :value="handleCheckValue"  
15 - @input="updateCheckValue" >  
16 - <Checkbox v-for="name in attr.idNameList" :label="name.id" :key="name">  
17 - <span>{{name.text}}</span>  
18 - </Checkbox>  
19 - </Checkbox-group>  
20 - </template>  
21 - </div>  
22 -</template>  
23 -  
24 -<script>  
25 -export default {  
26 - name: 'MuliSelect',  
27 - props: ['value', 'attr'],  
28 - data() {  
29 - let _this = this;  
30 -  
31 - return {  
32 - handleSelectValue: _this.value[0],  
33 - handleCheckValue: _this.value  
34 - };  
35 - },  
36 - methods: {  
37 - updateSelectValue(value) {  
38 - this.$emit('input', [`${value}`]);  
39 - },  
40 - updateCheckValue(value) {  
41 - this.$emit('input', value);  
42 - }  
43 - },  
44 - watch: {  
45 - value(newValue) {  
46 - if (this.attr.inputType === 'select') {  
47 - this.handleSelectValue = newValue[0];  
48 - } else {  
49 - this.handleCheckValue = newValue;  
50 - }  
51 - }  
52 - }  
53 -};  
54 -</script>  
55 -  
56 -<style>  
57 -  
58 -</style>  
@@ -50,9 +50,9 @@ @@ -50,9 +50,9 @@
50 <CheckboxSize :sort-id="this.product.smallSortId" :select-sizes="table.defaultSelectedSizes" @on-change="selectSize"></CheckboxSize> 50 <CheckboxSize :sort-id="this.product.smallSortId" :select-sizes="table.defaultSelectedSizes" @on-change="selectSize"></CheckboxSize>
51 </Form-item> 51 </Form-item>
52 <Form-item> 52 <Form-item>
53 - <TableGood ref="tableGood" v-model="table.data" 53 + <TableGoodSize ref="tableGood" v-model="table.data"
54 @on-upload="uploadGoodSzieSuccess" 54 @on-upload="uploadGoodSzieSuccess"
55 - @on-factory-name="onChangeFactoryCode"></TableGood> 55 + @on-factory-name="onChangeFactoryCode"></TableGoodSize>
56 </Form-item> 56 </Form-item>
57 <div class="create-item-title">商品价格</div> 57 <div class="create-item-title">商品价格</div>
58 <Form-item label="吊牌价"> 58 <Form-item label="吊牌价">
@@ -69,27 +69,34 @@ @@ -69,27 +69,34 @@
69 <div class="create-item-title">商品颜色主图 69 <div class="create-item-title">商品颜色主图
70 <span class="create-group-sub-title">（商品正面图默认为用户选择商品颜色和展示使用。用户从不同频道查看商品，优先展示频道封面图）</span> 70 <span class="create-group-sub-title">（商品正面图默认为用户选择商品颜色和展示使用。用户从不同频道查看商品，优先展示频道封面图）</span>
71 </div> 71 </div>
72 - <GoodImage v-model="product.goods"></GoodImage> 72 + <ImageGoodsMain v-model="product.goods"></ImageGoodsMain>
73 <div class="create-item-title">商品描述（详情页内容）</div> 73 <div class="create-item-title">商品描述（详情页内容）</div>
74 <editor :content="product.productIntro" 74 <editor :content="product.productIntro"
75 @change="updateProductDesc"></editor> 75 @change="updateProductDesc"></editor>
76 <div class="create-item-title">商品属性</div> 76 <div class="create-item-title">商品属性</div>
77 - <Form-item :label="attr.attributeName"  
78 - v-for="attr in render.productStandardRelationStr" 77 + <template v-for="(attrs, index) in [render.productStandardRelationStr, render.attributeProValuesOne, render.attributeProValuesTwo]">
  78 + <Form-item :label="attr.attributeName"
  79 + v-for="attr in attrs"
79 :key="attr"> 80 :key="attr">
80 - <MuliSelect v-model="attr.model" :attr="attr"></MuliSelect>  
81 - </Form-item>  
82 - <Form-item :label="attr.attributeName"  
83 - v-for="attr in render.attributeProValuesOne"  
84 - :key="attr">  
85 - <MuliSelect v-model="attr.model" :attr="attr"></MuliSelect>  
86 - </Form-item>  
87 - <Form-item :label="attr.attributeName" v-for="attr in render.attributeProValuesTwo" :key="attr">  
88 - <MuliSelect v-model="attr.model" :attr="attr"></MuliSelect>  
89 - </Form-item> 81 + <template v-if="attr.inputType === 'select'">
  82 + <Select v-model="attr.model[0]"
  83 + :placeholder="'请选择' + attr.attributeName">
  84 + <Option v-for="name in attr.idNameList" :value="name.id" :key="name">{{name.text}}</Option>
  85 + </Select>
  86 + </template>
  87 +
  88 + <template v-else>
  89 + <Checkbox-group v-model="attr.model">
  90 + <Checkbox v-for="name in attr.idNameList" :label="name.id" :key="name">
  91 + <span>{{name.text}}</span>
  92 + </Checkbox>
  93 + </Checkbox-group>
  94 + </template>
  95 + </Form-item>
  96 + </template>
90 <Form-item v-if="render.productMaterial" :label="render.productMaterial.attributeName"> 97 <Form-item v-if="render.productMaterial" :label="render.productMaterial.attributeName">
91 - <Material v-model="product.materialList" :idNameList="render.productMaterial.idNameList">  
92 - </Material> 98 + <CheckboxMaterial v-model="product.materialList" :idNameList="render.productMaterial.idNameList">
  99 + </CheckboxMaterial>
93 </Form-item> 100 </Form-item>
94 <Form-item> 101 <Form-item>
95 <Button type="primary" @click="submit" size="large">保存</Button> 102 <Button type="primary" @click="submit" size="large">保存</Button>
@@ -99,10 +106,11 @@ @@ -99,10 +106,11 @@
99 </template> 106 </template>
100 <script> 107 <script>
101 import _ from 'lodash'; 108 import _ from 'lodash';
102 -import {Material, MuliSelect, TableGood, GoodImage} from './components';  
103 -import { CheckboxAge, CheckboxColor, CheckboxSize } from 'components/checkbox'; 109 +import { CheckboxAge, CheckboxColor, CheckboxSize, CheckboxMaterial } from 'components/checkbox';
104 import { SelectSeason } from 'components/select'; 110 import { SelectSeason } from 'components/select';
105 import { RadioSeason, RadioGender } from 'components/radio'; 111 import { RadioSeason, RadioGender } from 'components/radio';
  112 +import { TableGoodSize } from 'components/table';
  113 +import { ImageGoodsMain } from 'components/image';
106 114
107 import service from 'product-create/service'; 115 import service from 'product-create/service';
108 import api from 'product-create/api'; 116 import api from 'product-create/api';
@@ -448,7 +456,6 @@ export default { @@ -448,7 +456,6 @@ export default {
448 JSON.stringify(serial.handleOne(this.product.productSkn, this.render.attributeProValuesOne)); 456 JSON.stringify(serial.handleOne(this.product.productSkn, this.render.attributeProValuesOne));
449 newProduct.attributeProValuesTwo = 457 newProduct.attributeProValuesTwo =
450 JSON.stringify(serial.handleTwo(this.product.productSkn, this.render.attributeProValuesTwo)); 458 JSON.stringify(serial.handleTwo(this.product.productSkn, this.render.attributeProValuesTwo));
451 -  
452 newProduct.productMaterial = this.product.materialList.map(s => s.id).join(','); 459 newProduct.productMaterial = this.product.materialList.map(s => s.id).join(',');
453 newProduct.productIntro = this.product.productIntro; 460 newProduct.productIntro = this.product.productIntro;
454 461
@@ -520,16 +527,15 @@ export default { @@ -520,16 +527,15 @@ export default {
520 } 527 }
521 }, 528 },
522 components: { 529 components: {
523 - Material,  
524 - MuliSelect,  
525 - TableGood, 530 + CheckboxMaterial,
  531 + TableGoodSize,
526 CheckboxAge, 532 CheckboxAge,
527 RadioSeason, 533 RadioSeason,
528 RadioGender, 534 RadioGender,
529 SelectSeason, 535 SelectSeason,
530 CheckboxColor, 536 CheckboxColor,
531 CheckboxSize, 537 CheckboxSize,
532 - GoodImage 538 + ImageGoodsMain
533 } 539 }
534 }; 540 };
535 </script> 541 </script>
1 -<template>  
2 - <div>  
3 - <drag-file-upload :default-file="'http://img12.static.yhbimg.com/goodsimg/2017/05/05/17/027453d79e284b135a71864d9d9194adff.png'"  
4 - @on-success="uploadImageSuccess"  
5 - @on-remove="uploadImageRemove">  
6 - </drag-file-upload>  
7 - </div>  
8 -</template>  
9 -  
10 -<script>  
11 -  
12 -import ProductTest from './views/muli-select';  
13 -import ProductMaterial from './views/material';  
14 -import ProductAge from './views/age';  
15 -  
16 -export default {  
17 - name: 'test1',  
18 - data() {  
19 - return {  
20 - a: "1|2|3",  
21 - attr: {  
22 - "attributeId": 115,  
23 - "attributeName": "制作工艺",  
24 - "attributeValues": [{id:1,name:"镶边"},{id:2,name:"贴布"}],  
25 - "categoryId": 1,  
26 - "createTime": 1459906085,  
27 - "displayPosition": 2,  
28 - "idNameList": [  
29 - {  
30 - "id": "1",  
31 - "text": "镶边"  
32 - },  
33 - {  
34 - "id": "2",  
35 - "text": "贴布"  
36 - },  
37 - ],  
38 - inputType: "select",  
39 - isSearch: "",  
40 - orderBy: 111,  
41 - saleType: 2  
42 - },  
43 - x: [{  
44 - id: 2  
45 - }]  
46 - }  
47 - },  
48 -  
49 - methods: {  
50 - uploadImageSuccess() {  
51 -  
52 - },  
53 - uploadImageRemove() {  
54 -  
55 - }  
56 - },  
57 - components: {  
58 - test: ProductTest,  
59 - material: ProductMaterial,  
60 - age: ProductAge  
61 - },  
62 - watch: {  
63 - a: function() {  
64 - console.log(this.a);  
65 - },  
66 - x: function() {  
67 - console.log(this.x);  
68 - }  
69 - }  
70 -}  
71 -</script>  
72 -  
@@ -26,7 +26,7 @@ const handleValue = (skn, valueObj = []) => { @@ -26,7 +26,7 @@ const handleValue = (skn, valueObj = []) => {
26 return valueObj.reduce((total, r) => { 26 return valueObj.reduce((total, r) => {
27 let str = _.isArray(r.model) ? r.model.join(',') : r.model; 27 let str = _.isArray(r.model) ? r.model.join(',') : r.model;
28 28
29 - if (+str) { 29 + if (str) {
30 total.push({ 30 total.push({
31 attributeId: r.attributeId, 31 attributeId: r.attributeId,
32 productSkn: skn, 32 productSkn: skn,