Authored by 陈峰

编辑商品优化

... ... @@ -8,7 +8,7 @@
<script>
export default {
name: 'Material',
name: 'CheckboxMaterial',
props: {
value: {
type: Array,
... ...
import CheckboxAge from './checkbox-age';
import CheckboxColor from './checkbox-color';
import CheckboxSize from './checkbox-size';
import CheckboxMaterial from './checkbox-material';
export {
CheckboxAge,
CheckboxColor,
CheckboxSize
CheckboxSize,
CheckboxMaterial
};
... ...
... ... @@ -33,6 +33,7 @@
<script>
export default {
name: 'ImageGoodsMain',
props: {
value: {
type: Array,
... ...
import ImageGoodsMain from './image-goods-main';
export {
ImageGoodsMain
};
... ...
import TableGoodSize from './table-good-size';
export {
TableGoodSize
};
... ...
... ... @@ -4,7 +4,7 @@
<script>
export default {
name: 'TableGood',
name: 'TableGoodSize',
props: {
value: {
type: Array,
... ...
import GoodImage from './good-image';
import Material from './material';
import MuliSelect from './muli-select';
import TableGood from './table-good';
export {
GoodImage,
Material,
MuliSelect,
TableGood
};
<template>
<div>
<template v-if="attr.inputType === 'select'">
<Select :value="handleSelectValue"
@input="updateSelectValue"
:placeholder="'请选择' + attr.attributeName"
style="width: 350px;">
<Option v-for="name in attr.idNameList" :value="name.id" :key="name">{{name.text}}</Option>
</Select>
</template>
<template v-else>
<Checkbox-group
:value="handleCheckValue"
@input="updateCheckValue" >
<Checkbox v-for="name in attr.idNameList" :label="name.id" :key="name">
<span>{{name.text}}</span>
</Checkbox>
</Checkbox-group>
</template>
</div>
</template>
<script>
export default {
name: 'MuliSelect',
props: ['value', 'attr'],
data() {
let _this = this;
return {
handleSelectValue: _this.value[0],
handleCheckValue: _this.value
};
},
methods: {
updateSelectValue(value) {
this.$emit('input', [`${value}`]);
},
updateCheckValue(value) {
this.$emit('input', value);
}
},
watch: {
value(newValue) {
if (this.attr.inputType === 'select') {
this.handleSelectValue = newValue[0];
} else {
this.handleCheckValue = newValue;
}
}
}
};
</script>
<style>
</style>
... ... @@ -50,9 +50,9 @@
<CheckboxSize :sort-id="this.product.smallSortId" :select-sizes="table.defaultSelectedSizes" @on-change="selectSize"></CheckboxSize>
</Form-item>
<Form-item>
<TableGood ref="tableGood" v-model="table.data"
<TableGoodSize ref="tableGood" v-model="table.data"
@on-upload="uploadGoodSzieSuccess"
@on-factory-name="onChangeFactoryCode"></TableGood>
@on-factory-name="onChangeFactoryCode"></TableGoodSize>
</Form-item>
<div class="create-item-title">商品价格</div>
<Form-item label="吊牌价">
... ... @@ -69,27 +69,34 @@
<div class="create-item-title">商品颜色主图
<span class="create-group-sub-title">(商品正面图默认为用户选择商品颜色和展示使用。用户从不同频道查看商品,优先展示频道封面图)</span>
</div>
<GoodImage v-model="product.goods"></GoodImage>
<ImageGoodsMain v-model="product.goods"></ImageGoodsMain>
<div class="create-item-title">商品描述(详情页内容)</div>
<editor :content="product.productIntro"
@change="updateProductDesc"></editor>
<div class="create-item-title">商品属性</div>
<Form-item :label="attr.attributeName"
v-for="attr in render.productStandardRelationStr"
<template v-for="(attrs, index) in [render.productStandardRelationStr, render.attributeProValuesOne, render.attributeProValuesTwo]">
<Form-item :label="attr.attributeName"
v-for="attr in attrs"
:key="attr">
<MuliSelect v-model="attr.model" :attr="attr"></MuliSelect>
</Form-item>
<Form-item :label="attr.attributeName"
v-for="attr in render.attributeProValuesOne"
:key="attr">
<MuliSelect v-model="attr.model" :attr="attr"></MuliSelect>
</Form-item>
<Form-item :label="attr.attributeName" v-for="attr in render.attributeProValuesTwo" :key="attr">
<MuliSelect v-model="attr.model" :attr="attr"></MuliSelect>
</Form-item>
<template v-if="attr.inputType === 'select'">
<Select v-model="attr.model[0]"
:placeholder="'请选择' + attr.attributeName">
<Option v-for="name in attr.idNameList" :value="name.id" :key="name">{{name.text}}</Option>
</Select>
</template>
<template v-else>
<Checkbox-group v-model="attr.model">
<Checkbox v-for="name in attr.idNameList" :label="name.id" :key="name">
<span>{{name.text}}</span>
</Checkbox>
</Checkbox-group>
</template>
</Form-item>
</template>
<Form-item v-if="render.productMaterial" :label="render.productMaterial.attributeName">
<Material v-model="product.materialList" :idNameList="render.productMaterial.idNameList">
</Material>
<CheckboxMaterial v-model="product.materialList" :idNameList="render.productMaterial.idNameList">
</CheckboxMaterial>
</Form-item>
<Form-item>
<Button type="primary" @click="submit" size="large">保存</Button>
... ... @@ -99,10 +106,11 @@
</template>
<script>
import _ from 'lodash';
import {Material, MuliSelect, TableGood, GoodImage} from './components';
import { CheckboxAge, CheckboxColor, CheckboxSize } from 'components/checkbox';
import { CheckboxAge, CheckboxColor, CheckboxSize, CheckboxMaterial } from 'components/checkbox';
import { SelectSeason } from 'components/select';
import { RadioSeason, RadioGender } from 'components/radio';
import { TableGoodSize } from 'components/table';
import { ImageGoodsMain } from 'components/image';
import service from 'product-create/service';
import api from 'product-create/api';
... ... @@ -448,7 +456,6 @@ export default {
JSON.stringify(serial.handleOne(this.product.productSkn, this.render.attributeProValuesOne));
newProduct.attributeProValuesTwo =
JSON.stringify(serial.handleTwo(this.product.productSkn, this.render.attributeProValuesTwo));
newProduct.productMaterial = this.product.materialList.map(s => s.id).join(',');
newProduct.productIntro = this.product.productIntro;
... ... @@ -520,16 +527,15 @@ export default {
}
},
components: {
Material,
MuliSelect,
TableGood,
CheckboxMaterial,
TableGoodSize,
CheckboxAge,
RadioSeason,
RadioGender,
SelectSeason,
CheckboxColor,
CheckboxSize,
GoodImage
ImageGoodsMain
}
};
</script>
... ...
<template>
<div>
<drag-file-upload :default-file="'http://img12.static.yhbimg.com/goodsimg/2017/05/05/17/027453d79e284b135a71864d9d9194adff.png'"
@on-success="uploadImageSuccess"
@on-remove="uploadImageRemove">
</drag-file-upload>
</div>
</template>
<script>
import ProductTest from './views/muli-select';
import ProductMaterial from './views/material';
import ProductAge from './views/age';
export default {
name: 'test1',
data() {
return {
a: "1|2|3",
attr: {
"attributeId": 115,
"attributeName": "制作工艺",
"attributeValues": [{id:1,name:"镶边"},{id:2,name:"贴布"}],
"categoryId": 1,
"createTime": 1459906085,
"displayPosition": 2,
"idNameList": [
{
"id": "1",
"text": "镶边"
},
{
"id": "2",
"text": "贴布"
},
],
inputType: "select",
isSearch: "",
orderBy: 111,
saleType: 2
},
x: [{
id: 2
}]
}
},
methods: {
uploadImageSuccess() {
},
uploadImageRemove() {
}
},
components: {
test: ProductTest,
material: ProductMaterial,
age: ProductAge
},
watch: {
a: function() {
console.log(this.a);
},
x: function() {
console.log(this.x);
}
}
}
</script>
... ... @@ -26,7 +26,7 @@ const handleValue = (skn, valueObj = []) => {
return valueObj.reduce((total, r) => {
let str = _.isArray(r.model) ? r.model.join(',') : r.model;
if (+str) {
if (str) {
total.push({
attributeId: r.attributeId,
productSkn: skn,
... ...