fe / yoho-shop-manage · Commits

Go to a project

Authored by 陈峰
Commit 8d809f0d6bca3ecad6994cfb6e8bb6cc6fbf93ac 1 parent b6b87854

编辑商品组件优化

Inline Side-by-side
Showing 11 changed files with 125 additions and 266 deletions
<template>
<Checkbox-group :value="handleValue" @input="updateValue" style="width: 350px;" >
<Checkbox label="1">
<span>成人</span>
</Checkbox>
<Checkbox label="2" >
<span>大童</span>
</Checkbox>
<Checkbox label="4">
<span>中童</span>
</Checkbox>
<Checkbox label="3">
<span>小童</span>
</Checkbox>
<Checkbox label="5">
<span>幼童 </span>
<Checkbox-group :value="handleValue" @on-change="updateValue" >
<Checkbox v-for="age in ageList" :key="age.id" :label="age.id" :disabled="disable">
<span>{{age.label}}</span>
</Checkbox>
</Checkbox-group>
</template>
... ... @@ -21,12 +9,33 @@
<script>
export default {
name: 'CheckboxAge',
props: ['value'],
props: {
value: {
type: String
},
disable: {
type: Boolean
}
},
data() {
let _this = this;
return {
handleValue: _this.value.split('|')
ageList: [{
id: '1',
label: '成人'
}, {
id: '2',
label: '大童'
}, {
id: '3',
label: '中童'
}, {
id: '4',
label: '小童'
}, {
id: '5',
label: '幼童'
}],
handleValue: this.value.split('|')
};
},
methods: {
... ...
<template>
<Radio-group :value="handleValue" @input="updateValue" style="width: 350px;">
<Radio label="1">
<span>男</span>
</Radio>
<Radio label="2">
<span>女</span>
</Radio>
<Radio label="3">
<span>通用</span>
<Radio-group :value="handleValue" @on-change="updateValue">
<Radio :label="gender.id" v-for="gender in genderList" :key="gender.id" :disabled="disable">
<span>{{gender.label}}</span>
</Radio>
</Radio-group>
</template>
... ... @@ -15,19 +9,32 @@
<script>
export default {
name: 'RadioGender',
props: ['value'],
props: {
value: {
type: String
},
disable: {
type: Boolean
}
},
data() {
let _this = this;
return {
handleValue: _this.value
handleValue: this.value,
genderList: [{
id: '1',
label: '男'
}, {
id: '2',
label: '女'
}, {
id: '3',
label: '通用'
}]
};
},
methods: {
updateValue(newValue) {
let nValue = newValue;
this.$emit('input', nValue);
this.$emit('input', newValue);
}
},
watch: {
... ...
<template>
<Radio-group :value="handleValue" @input="updateValue" style="width: 350px;">
<Radio label="spring">
<span>春秋</span>
</Radio>
<Radio label="summer">
<span>夏</span>
</Radio>
<Radio label="winter">
<span>冬</span>
</Radio>
<Radio label="seasons">
<span>四季</span>
<Radio-group :value="handleValue" @on-change="updateValue" style="width: 350px;">
<Radio :label="season.id" v-for="season in seasonList" :key="season.id" :disabled="disable">
<span>{{season.label}}</span>
</Radio>
</Radio-group>
</template>
... ... @@ -18,19 +9,35 @@
<script>
export default {
name: 'RadioSeason',
props: ['value'],
props: {
value: {
type: String
},
disable: {
type: Boolean
}
},
data() {
let _this = this;
return {
handleValue: _this.value
handleValue: this.value,
seasonList: [{
id: 'spring',
label: '春秋'
}, {
id: 'summer',
label: '夏'
}, {
id: 'winter',
label: '冬'
}, {
id: 'seasons',
label: '四季'
}]
};
},
methods: {
updateValue(newValue) {
let nValue = newValue;
this.$emit('input', nValue);
this.$emit('input', newValue);
}
},
watch: {
... ...
<template>
<Select :value="handleValue" @input="updateValue" placeholder="请选择" style="width: 350px;">
<Option value="1">春季</Option>
<Option value="2">夏季</Option>
<Option value="3">秋季</Option>
<Option value="4">冬季</Option>
<Option value="5">春夏季</Option>
<Option value="6">秋冬季</Option>
<Select :value="handleValue" @on-change="updateValue" :disabled="disable" placeholder="请选择" style="width: 350px;">
<Option :value="season.id" v-for="season in seasonList" :key="season.id">{{season.label}}</Option>
</Select>
</template>
<script>
export default {
name: 'SelectSeason',
props: ['value'],
props: {
value: {
type: String
},
disable: {
type: Boolean
}
},
data() {
let _this = this;
return {
handleValue: _this.value
handleValue: this.value,
seasonList: [{
id: '1',
label: '春季'
}, {
id: '2',
label: '夏季'
}, {
id: '3',
label: '秋季'
}, {
id: '4',
label: '冬季'
}, {
id: '5',
label: '春夏季'
}, {
id: '6',
label: '秋冬季'
}]
};
},
methods: {
updateValue(newValue) {
let nValue = newValue;
this.$emit('input', nValue);
this.$emit('input', newValue);
}
},
watch: {
... ...
... ... @@ -69,7 +69,7 @@
<Row>
<Col span="8">
<Form-item label="货品季">
<product-goods-season v-model="product.goodsSeason"></product-goods-season>
<SelectSeason v-model="product.goodsSeason" :disable="true"></SelectSeason>
</Form-item>
</Col>
</Row>
... ... @@ -83,16 +83,16 @@
</Row>
<Form-item label="性别">
<product-gender v-model="product.gender"></product-gender>
<RadioGender v-model="product.gender" :disable="true"></RadioGender>
</Form-item>
<Form-item label="适销季">
<product-season v-model="product.seasons"></product-season>
<RadioSeason v-model="product.seasons" :disable="true"></RadioSeason>
</Form-item>
<Form-item label="年龄层">
<product-age v-model="product.ageLevel"></product-age>
<CheckboxAge v-model="product.ageLevel" :disable="true"></CheckboxAge>
</Form-item>
<Row>
... ... @@ -336,10 +336,9 @@
import ShopMaterial from './views/material';
import MuliSelect from './views/muli-select';
import Age from './views/age';
import Season from './views/season';
import Gender from './views/gender';
import GoodsSeason from './views/goods-season';
import {CheckboxAge} from 'components/checkbox';
import {SelectSeason} from 'components/select';
import {RadioSeason, RadioGender} from 'components/radio';
import service from 'product-create/service';
import api from 'product-create/api';
... ... @@ -695,7 +694,6 @@ export default {
let goodsImageList = this.product.sellerGoodsImagesList;
this.table.data = _.range(goodsList.length).map((i) => {
console.log(goodsList[i], goodsImageList[i]);
return this.handleItem(goodsList[i], goodsImageList[i]);
});
... ... @@ -1085,10 +1083,10 @@ export default {
components: {
'shop-material': ShopMaterial,
'multi-select': MuliSelect,
'product-age': Age,
'product-season': Season,
'product-gender': Gender,
'product-goods-season': GoodsSeason
CheckboxAge,
RadioSeason,
RadioGender,
SelectSeason
},
watch: {
'table.selectedSizes': function(newVal, oldVal) {
... ...
<template>
<Checkbox-group :value="handleValue" @input="updateValue" style="width: 350px;" >
<Checkbox label="1" disabled>
<span>成人</span>
</Checkbox>
<Checkbox label="2" disabled>
<span>大童</span>
</Checkbox>
<Checkbox label="4" disabled>
<span>中童</span>
</Checkbox>
<Checkbox label="3" disabled>
<span>小童</span>
</Checkbox>
<Checkbox label="5" disabled>
<span>幼童 </span>
</Checkbox>
</Checkbox-group>
</template>
<script>
export default {
props: ['value'],
data() {
let _this = this;
return {
handleValue: _this.value.split('|')
};
},
methods: {
updateValue(newValue) {
let nValue = newValue.join('|');
this.$emit('input', nValue);
}
},
watch: {
value(newValue) {
this.handleValue = newValue.split('|');
}
}
};
</script>
<style>
</style>
<template>
<Radio-group :value="handleValue" @input="updateValue" style="width: 350px;">
<Radio label="1" disabled>
<span>男</span>
</Radio>
<Radio label="2" disabled>
<span>女</span>
</Radio>
<Radio label="3" disabled>
<span>通用</span>
</Radio>
</Radio-group>
</template>
<script>
export default {
props: ['value'],
data() {
let _this = this;
return {
handleValue: _this.value
};
},
methods: {
updateValue(newValue) {
let nValue = newValue;
this.$emit('input', nValue);
}
},
watch: {
value(newValue) {
this.handleValue = newValue;
}
},
};
</script>
<style>
</style>
<template>
<Select :value="handleValue" @input="updateValue" placeholder="请选择" disabled style="width: 350px;">
<Option value="1" disabled>春季</Option>
<Option value="2" disabled>夏季</Option>
<Option value="3" disabled>秋季</Option>
<Option value="4" disabled>冬季</Option>
<Option value="5" disabled>春夏季</Option>
<Option value="6" disabled>秋冬季</Option>
</Select>
</template>
<script>
export default {
name: 'product-goods-season',
props: ['value'],
data() {
let _this = this;
return {
handleValue: _this.value
};
},
methods: {
updateValue(newValue) {
let nValue = newValue;
this.$emit('input', nValue);
}
},
watch: {
value(newValue) {
this.handleValue = newValue;
}
}
};
</script>
<style>
</style>
<template>
<Radio-group :value="handleValue" @input="updateValue" style="width: 350px;">
<Radio label="spring" disabled>
<span>春秋</span>
</Radio>
<Radio label="summer" disabled>
<span>夏</span>
</Radio>
<Radio label="winter" disabled>
<span>冬</span>
</Radio>
<Radio label="seasons" disabled>
<span>四季</span>
</Radio>
</Radio-group>
</template>
<script>
export default {
props: ['value'],
data() {
let _this = this;
return {
handleValue: _this.value
};
},
methods: {
updateValue(newValue) {
let nValue = newValue;
this.$emit('input', nValue);
}
},
watch: {
value(newValue) {
this.handleValue = newValue;
}
}
};
</script>
<style>
</style>
... ... @@ -67,7 +67,7 @@
@on-change="pageChange" :page-size="20" show-total></Page>
</LayoutList>
<SizeEdit ref="showSizeEdit" :show="showSizeEdit"></SizeEdit>
<ModalSizeEdit ref="showSizeEdit" :show="showSizeEdit"></ModalSizeEdit>
</LayoutBody>
</template>
... ... @@ -75,7 +75,7 @@
import Vue from 'vue';
import _ from 'lodash';
import service from 'product-service';
import {SizeEdit} from 'components/modal';
import {ModalSizeEdit} from 'components/modal';
import {SelectBrand, SelectCategory} from 'components/select';
import {CellImage, CellInfo, CellPrice} from 'components/cell';
import offSaleStore from './store';
... ... @@ -285,7 +285,7 @@
components: {
SelectBrand,
SelectCategory,
SizeEdit,
ModalSizeEdit,
CellImage,
CellInfo,
CellPrice
... ...
... ... @@ -54,15 +54,14 @@
@on-change="pageChange" :page-size="20" show-total></Page>
</LayoutList>
<SizeEdit ref="showSizeEdit" :show="showSizeEdit"></SizeEdit>
<ModalSizeEdit ref="showSizeEdit" :show="showSizeEdit"></ModalSizeEdit>
</LayoutBody>
</template>
<script>
import Vue from 'vue';
import _ from 'lodash';
import service from 'product-service';
import {SizeEdit} from 'components/modal';
import {ModalSizeEdit} from 'components/modal';
import {SelectBrand, SelectCategory} from 'components/select';
import {CellImage, CellInfo, CellPrice} from 'components/cell';
import onSaleStore from './store';
... ... @@ -273,7 +272,7 @@
components: {
SelectBrand,
SelectCategory,
SizeEdit,
ModalSizeEdit,
CellImage,
CellInfo,
CellPrice
... ...