fe / yoho-shop-manage · Commits

Go to a project

Authored by 陈峰
Commit 6bdcef5a0ee4b2748a24e3dc48c1f914d9eb3d14 2 parents d89ed9df 2aef0b69

merge

Inline Side-by-side
Showing 10 changed files with 487 additions and 141 deletions
import Vue from 'vue';
import VueCookie from 'vue-cookie';
import Router from 'vue-router';
import App from './pages/app';
import Routers from './pages';
... ... @@ -15,6 +16,7 @@ let router = new Router({routes: Routers});
Vue.use(yohoPluginCore, {router});
Vue.use(yohoPluginPurview);
Vue.use(yohoPluginUser);
Vue.use(VueCookie);
new Vue({
el: '#app',
... ...
... ... @@ -45,7 +45,8 @@ export default {
});
},
login(username, password) {
Vue.passport.local(username, password).then(() => {
Vue.passport.local(username, password).then((result) => {
this.$cookie.set('SHOP_ID', result.currentShop.id);
this.$router.push('/');
}, (error) => {
this.$Message.error(error.message);
... ...
let apiUrl = {
brand: '/platform/getSellerBrandInfo',
sort: '/platform/getSellerSortInfo',
color: '/platform/querySellerProductColors',
size: '/platform/querySortSize'
};
const request = require('axios');
function getBrand(shopId) {
return request.get(apiUrl.brand, {
params: {
shopsId:shopId
}
})
}).then((result) => result.data)
}
function getCategory(shopId, brandId, level , sortId) {
function getSort(shopId, brandId, level , sortId) {
let opts = {
shopsId: shopId,
brandId: brandId,
... ... @@ -22,12 +27,26 @@ function getCategory(shopId, brandId, level , sortId) {
Object.assign(opts, {sortId});
}
return request.get(apiUrl.category, {
return request.get(apiUrl.sort, {
params: opts
});
}).then((result) => result.data);
}
function getColor() {
return request.get(apiUrl.color).then((result) => result.data)
}
function getSize(smallSortId) {
return request.get(apiUrl.size, {
params: {
sortId: smallSortId
}
}).then(result => result.data)
}
export default {
getBrand,
getCategory
getSort,
getColor,
getSize
}
... ...
... ... @@ -4,7 +4,22 @@
export default () => {
return {
brand: {},
sort: {}
shopId: '',
brandId: '',
brandName: '',
maxSortId: '',
middleSortId: '',
smallSortId: '',
sortName: '',
productName: '',
phrase: '',
factoryCode: '',
goodsYears: '',
goodsSeason: '',
gender: '',
seasons: '',
ageLevel: [],
retailPrice: '',
salesPrice: ''
};
}
\ No newline at end of file
... ...
<template>
<div>
<Row>
<Form :model="formItem" :label-width="80">
<Col span="8">
<Form :model="product" :label-width="80">
<Form-item label="品 牌*">
<Select v-model="formItem.sort" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
<Select v-model="product.brandId" placeholder="请选择" :label-in-value="true" @on-change="selectBrand">
<Option v-for="brand in brands" :value="brand.brandId" :key="brand">{{ brand.brandName }}</Option>
</Select>
</Form-item>
</Form>
</Col>
</Row>
<Row>
<Col span="8" v-if="show[1]">
<Form :model="product" :label-width="80">
<Form-item label="类目*">
<Select v-model="formItem.sort" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
<Select v-model="pickedSortId[1]" placeholder="一级类目" @on-change="selectSort1" :label-in-value="true">
<Option v-for="sort in sorts[1]" :value="sort.sortId" :key="sort">{{ sort.sortName }}</Option>
</Select>
</Form-item>
</Form>
</Row>
</Col>
<Col span="8" v-if="show[2]">
<Form :model="product">
<Form-item>
<Select v-model="pickedSortId[2]" placeholder="二级类目" @on-change="selectSort2" :label-in-value="true">
<Option v-for="sort in sorts[2]" :value="sort.sortId" :key="sort">{{ sort.sortName }}</Option>
</Select>
</Form-item>
</Form>
</Col>
<Col span="8" v-if="show[3]">
<Form :model="product">
<Form-item>
<Select v-model="pickedSortId[3]" placeholder="三级类目" @on-change="selectSort3" :label-in-value="true">
<Option v-for="sort in sorts[3]" :value="sort.sortId" :key="sort">{{ sort.sortName }}</Option>
</Select>
</Form-item>
</Form>
</Col>
</Row>
<span>{{this.sortName}}</span>
<div>
<Button type="primary" @click="nextStep">下一步</Button>
</div>
... ... @@ -27,22 +51,40 @@
</template>
<script>
import api from '../api'
export default {
props: ['step', 'product'],
mounted : function() {
this.shopId = this.$cookie.get('SHOP_ID');
this.getBrand();
},
data() {
return {
formItem: {
brand: '',
sort: ''
},
brands: [],
sorts: []
sorts: {
1: [],
2: [],
3: []
},
pickedSortId: {
1: '',
2: '',
3: ''
},
pickedLabel: {
1: '',
2: '',
3: ''
},
show: {
1: true,
2: false,
3: false
},
shopId: '',
level: 1,
sortId: '',
}
},
methods: {
... ... @@ -50,16 +92,62 @@
this.step.value = 1;
this.$router.push({name:'product.create.step2'});
},
selectBrand: function() {
selectSort1: function(value) {
this.level = 2;
this.sortId= this.pickedSortId[1];
this.pickedLabel[1] = value.label;
this.product.maxSortId = this.sortId;
this.sorts[2] = [];
this.sorts[3] = [];
this.getSort();
},
selectSort: function() {
selectSort2: function(value) {
this.level = 3;
this.sortId= this.pickedSortId[2];
this.pickedLabel[2] = value.label;
this.product.middleSortId = this.sortId;
this.getSort();
},
selectSort3: function(value) {
this.sortId= this.pickedSortId[3];
this.pickedLabel[3] = value.label;
this.product.smallSortId = this.sortId;
},
selectBrand: function(value) {
console.log(value);
this.product.brandName = value.label;
},
getBrand: function() {
api.getBrand(this.$cookie.get('SHOP_ID')).then((result) => {
console.log(result);
return api.getBrand(this.shopId).then((result) => {
if (result.code === 200) {
this.brands = result.data;
}
});
},
getSort: function() {
return api.getSort(
this.shopId,
this.product.brandId,
this.level,
this.sortId
).then((result) => {
if (result.code === 200 && result.data && result.data.length > 0) {
this.sorts[this.level] = result.data;
this.show[this.level] = true;
}
});
}
},
computed: {
sortName: function() {
return this.product.sortName = `${this.pickedLabel[1]}/${this.pickedLabel[2]}/${this.pickedLabel[3]}`
}
},
watch: {
'product.brandId': function() {
this.level = 1;
this.sortId = '';
this.getSort();
}
}
}
... ...
<template>
<div>
<Form :model="product" :label-width="80">
<Row>
<Form :model="formItem" :label-width="80">
<Col span="8">
<Form-item>
<span>商品基本信息</span>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="品 牌*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<span>{{product.brandName}}</span>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="类目*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<span>{{product.sortName}}</span>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="商品名称*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<Input v-model="product.productName" placeholder="请输入..."/>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="商品卖点*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
</Form-item>
<Form-item label="商品编码*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<Input v-model="product.phrase" type="textarea" :rows="4" placeholder="请输入..."/>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="商品编码*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<Input v-model="product.factoryCode" placeholder="请输入..."/>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="货品年*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<Date-picker type="year" placeholder="选择年" style="width: 200px"></Date-picker>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="货品季*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
<Select v-model="product.goodsSeason" placeholder="请选择">
<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>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="上市日期*">
<Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
</Form-item>
</Col>
</Row>
<Form-item label="性别*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<Radio-group v-model="product.gender">
<Radio label="1">
<span>男</span>
</Radio>
<Radio label="2">
<span>女</span>
</Radio>
<Radio label="3">
<span>通用</span>
</Radio>
</Radio-group>
</Form-item>
<Form-item label="适销季*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<Radio-group v-model="product.seasons">
<Radio label="1">
<span>春秋</span>
</Radio>
<Radio label="2">
<span>夏</span>
</Radio>
<Radio label="3">
<span>冬</span>
</Radio>
<Radio label="4">
<span>四季</span>
</Radio>
</Radio-group>
</Form-item>
<Form-item label="年龄层*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
</Select>
<Checkbox-group v-model="product.ageLevel">
<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>
</Checkbox-group>
</Form-item>
</Form>
<Row>
<Col span="8">
<span>商品规格</span>
</Col>
</Row>
<Row>
<Form-item label="颜色*">
<span class='squre' v-for="color in colors" @click="clickColor(color)">
<span class="squre-color" :style="{ 'background-color': '#' + color.colorCode}"></span>
<span class="squre-name">{{color.colorName}}</span>
</span>
</Form-item>
</Row>
<Row>
<Form-item label="尺寸*">
<Checkbox-group v-model="table.selectedSizes" @on-change="clickSize">
<Checkbox v-for="size in sizes" :key="size" :label="size.id" >
<span>{{size.sizeName}}</span>
</Checkbox>
</Checkbox-group>
</Form-item>
</Row>
<Row>
<Form-item >
<Table :columns="table.columns" :data="table.data"></Table>
</Form-item>
</Row>
<Row>
<Col span="8">
<Form-item>
<span>商品价格</span>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="吊牌价*">
<Input v-model="product.retailPrice" placeholder="请输入..."/>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="销售价*">
<Input v-model="product.salesPrice" placeholder="请输入..."/>
</Form-item>
</Col>
</Row>
</Form>
<div>
<Button type="primary" @click="backStep">上一步</Button>
<Button type="primary" @click="nextStep">下一步</Button>
... ... @@ -102,15 +198,58 @@
</template>
<script>
import api from '../api';
export default {
props: ['step', 'product'],
data() {
return {
formItem: {
brand: '',
colors: [],
sizes: [],
table: {
columns: [
{
title: '色系名称',
key: 'colorName'
},
{
title: '颜色展示名称*',
key: 'color'
},
{
title: '色卡图片*',
key: 'address'
},
{
title: '类型编码',
key: 'name'
},
{
title: '尺码*',
key: 'age'
},
{
title: '商品条码*',
key: 'address'
},
{
title: '操作',
key: 'address'
}
],
data: [
],
selectedSizes: [],
selectedColors: []
}
}
},
mounted: function() {
console.log(this.product);
this.getColor();
this.getSize();
},
methods: {
nextStep: function() {
... ... @@ -120,11 +259,56 @@
backStep: function() {
this.step.value = 0;
this.$router.push({name:'product.create.step1'})
},
getColor: function() {
return api.getColor().then((result) => {
if (result.code === 200) {
this.colors = result.data;
}
});
},
getSize: function() {
return api.getSize(119).then((result) => {
if(result.code === 200) {
this.sizes = result.data;
}
});
},
clickColor: function(color) {
console.log(color)
},
clickSize: function(size) {
console.log(size);
},
},
watch: {
'table.selectedSizes': function() {
console.log(this.table.selectedSizes);
}
}
}
</script>
<style lang="scss" scoped>
.squre {
display: inline-block;
height: 30px;
margin-right: 10px;
cursor: pointer;
}
.squre-color {
display: inline-block;
height: 30px;
width: 30px;
border: 1px solid gainsboro;
}
.squre-name {
display: inline-block;
height: 30px;
line-height: 30px;
vertical-align: top;
}
</style>
\ No newline at end of file
... ...
... ... @@ -2,21 +2,90 @@
<div>
<Row>
<Form :model="formItem" :label-width="80">
<Form-item label="品 牌*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
<Row>
<Col span="8">
<Form-item>
<span>网销信息</span>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item>
<span>商品颜色主图</span>
</Form-item>
</Col>
</Row>
<Row>
</Row>
<Row>
<Col span="8">
<Form-item>
<span>商品描述</span>
</Form-item>
</Col>
</Row>
<Row>
</Row>
<Row>
<Col span="8">
<Form-item>
<span>商品属性</span>
</Form-item>
</Col>
</Row>
<Row>
<Col span="8">
<Form-item label="面料材质">
<Select v-model="product.goodsSeason" placeholder="请选择面料材质">
<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>
</Form-item>
</Col>
</Row>
<Row>
<Form-item label="洗涤题示">
</Form-item>
</Row>
<Form-item label="类目*">
<Select v-model="formItem.select" placeholder="请选择">
<Option value="beijing">北京市</Option>
<Option value="shanghai">上海市</Option>
<Option value="shenzhen">深圳市</Option>
<Row>
<Col span="8">
<Form-item label="透气性">
<Select v-model="product.goodsSeason" placeholder="请选择">
<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>
</Form-item>
</Col>
</Row>
<Row>
<Row>
<Form-item label="风格题示">
</Form-item>
</Row>
</Row>
</Form>
</Row>
... ...
... ... @@ -7,7 +7,10 @@ let domainApis = {
},
platform: {
queryShopsByAdminPid: '/SellerShopController/queryShopsByAdminPid',
getSellerBrandInfo: '/SellerProductController/getSellerBrandInfo'
getSellerBrandInfo: '/SellerProductController/getSellerBrandInfo',
getSellerSortInfo: '/SellerProductController/getSellerSortInfo',
querySellerProductColors: '/SellerProductController/querySellerProductColors',
querySortSize: '/SellerSortSizeController/querySortSize'
}
};
... ...
const _ = require('lodash');
// 域名列表
const domains = {
auth: 'http://serve.yohobuy.com',
shop: 'http://192.168.102.210:8088/platform'
};
// api调用列表
let domainApis = {
auth: {
login: {
path: '/service/account/v1/Profile/login'
}
},
shop: {
profile: {
path: '/SellerShopController/queryShopsByAdminPid'
},
brand: {
path: '/SellerProductController/getSellerBrandInfo'
},
sort: {
path: '/SellerProductController/getSellerSortInfo'
}
}
};
_.each(domainApis, (apis, domainName) => {
_.each(apis, (uri, api) => {
apis[api].url = domains[domainName] + uri.path;
});
});
module.exports = domainApis;
... ... @@ -24,6 +24,7 @@ module.exports = (req, res, next) => {
message: '无权限访问的接口'
});
}
let apiUrl = _.get(apiDomain, apiMap);
if (!apiUrl) {
... ...