diff --git a/src/router/index.js b/src/router/index.js
index bce8c29..2a2f95c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -43,7 +43,7 @@ export const constantRouterMap = [
       name: 'product',
       component: () => import('@/views/pms/product/index'),
       meta: {title: '商品列表', icon: 'product-list'}
-      },
+    },
       {
         path: 'addProduct',
         name: 'addProduct',
@@ -55,14 +55,14 @@ export const constantRouterMap = [
         name: 'productRecycle',
         component: () => import('@/views/pms/product/index'),
         meta: {title: '商品回收站', icon: 'product-recycle'},
-        hidden:true
+        hidden: true
       },
       {
         path: 'productComment',
         name: 'productComment',
         component: () => import('@/views/pms/product/index'),
         meta: {title: '商品评价', icon: 'product-comment'},
-        hidden:true
+        hidden: true
       },
       {
         path: 'productCate',
@@ -75,14 +75,14 @@ export const constantRouterMap = [
         name: 'addProductCate',
         component: () => import('@/views/pms/productCate/add'),
         meta: {title: '添加商品分类'},
-        hidden:true
+        hidden: true
       },
       {
         path: 'updateProductCate',
         name: 'updateProductCate',
         component: () => import('@/views/pms/productCate/update'),
         meta: {title: '修改商品分类'},
-        hidden:true
+        hidden: true
       },
       {
         path: 'productAttr',
@@ -95,21 +95,21 @@ export const constantRouterMap = [
         name: 'productAttrList',
         component: () => import('@/views/pms/productAttr/productAttrList'),
         meta: {title: '商品属性列表'},
-        hidden:true
+        hidden: true
       },
       {
         path: 'addProductAttr',
         name: 'addProductAttr',
         component: () => import('@/views/pms/productAttr/addProductAttr'),
         meta: {title: '添加商品属性'},
-        hidden:true
+        hidden: true
       },
       {
         path: 'updateProductAttr',
         name: 'updateProductAttr',
         component: () => import('@/views/pms/productAttr/updateProductAttr'),
         meta: {title: '修改商品属性'},
-        hidden:true
+        hidden: true
       },
       {
         path: 'brand',
@@ -122,14 +122,14 @@ export const constantRouterMap = [
         name: 'addBrand',
         component: () => import('@/views/pms/brand/add'),
         meta: {title: '添加品牌'},
-        hidden:true
+        hidden: true
       },
       {
         path: 'updateBrand',
         name: 'updateBrand',
         component: () => import('@/views/pms/brand/update'),
         meta: {title: '编辑品牌'},
-        hidden:true
+        hidden: true
       }
     ]
   },
diff --git a/src/views/pms/product/add.vue b/src/views/pms/product/add.vue
index 51515f7..0b7f308 100644
--- a/src/views/pms/product/add.vue
+++ b/src/views/pms/product/add.vue
@@ -1,21 +1,159 @@
 <template> 
   <el-card class="form-container" shadow="never">
-    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-      <el-tab-pane label="first" name="first">first</el-tab-pane>
-      <el-tab-pane label="second" name="second">second</el-tab-pane>
-      <el-tab-pane label="third" name="third">third</el-tab-pane>
-      <el-tab-pane label="fourth" name="fourth">fourth</el-tab-pane>
-    </el-tabs>
+    <el-steps :active="active" finish-status="success" align-center>
+      <el-step title="填写商品信息"></el-step>
+      <el-step title="填写商品促销"></el-step>
+      <el-step title="填写商品属性"></el-step>
+      <el-step title="选择商品关联"></el-step>
+    </el-steps>
+    <add-product-info v-show="showStatus[0]" v-model="productParam"></add-product-info>
+    <add-product-sale v-show="showStatus[1]" v-model="productParam"></add-product-sale>
+    <add-product-attr v-show="showStatus[2]"></add-product-attr>
+    <add-product-relation v-show="showStatus[3]"></add-product-relation>
+    <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
+    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
   </el-card>
 </template>
 <script>
+  import AddProductInfo from './components/addProductInfo';
+  import AddProductSale from './components/addProductSale';
+  import AddProductAttr from './components/addProductAttr';
+  import AddProductRelation from './components/addProductRelation';
+
+  const defaultProductParam = {
+    albumPics: '',
+    brandId: null,
+    brandName: '',
+    deleteStatus: 0,
+    description: '',
+    detailDesc: '',
+    detailHtml: '',
+    detailMobileHtml: '',
+    detailTitle: '',
+    feightTemplateId: 0,
+    flashPromotionCount: 0,
+    flashPromotionId: 0,
+    flashPromotionPrice: 0,
+    flashPromotionSort: 0,
+    giftPoint: 0,
+    keywords: '',
+    lowStock: 0,
+    name: '',
+    newStatus: 0,
+    note: '',
+    originalPrice: 0,
+    pic: '',
+    //促销价格相关
+    memberPriceList: [
+      {
+        memberLevelId: 0,
+        memberPrice: 0,
+      }
+    ],
+    productFullReductionList: [
+      {
+        fullPrice: 0,
+        reducePrice: 0
+      }
+    ],
+    productLadderList: [
+      {
+        count: 0,
+        discount: 0,
+        price: 0
+      }
+    ],
+    previewStatus: 0,
+    price: 0,
+    productAttributeCategoryId: 0,
+    //商品属性相关
+    productAttributeValueList: [
+      {
+        productAttributeId: 0,
+        value: ''
+      }
+    ],
+    skuStockList: [
+      {
+        lowStock: 0,
+        pic: '',
+        price: 0,
+        sale: 0,
+        skuCode: '',
+        sp1: '',
+        sp2: '',
+        sp3: '',
+        stock: 0
+      }
+    ],
+    //商品关联信息
+    subjectProductRelationList: [
+      {
+        subjectId: 0
+      }
+    ],
+    prefrenceAreaProductRelationList: [
+      {
+        prefrenceAreaId: 0,
+      }
+    ],
+    productCategoryId: null,
+    productCategoryName: '',
+    productSn: '',
+    promotionEndTime: '',
+    promotionPerLimit: 0,
+    promotionPrice: 0,
+    promotionStartTime: '',
+    promotionType: 0,
+    publishStatus: 0,
+    recommandStatus: 0,
+    sale: 0,
+    serviceIds: '',
+    sort: 0,
+    stock: 0,
+    subTitle: '',
+    unit: '',
+    usePointLimit: 0,
+    verifyStatus: 0,
+    weight: 0
+  };
   export default {
     name: 'addProduct',
+    components: {AddProductInfo, AddProductSale, AddProductAttr, AddProductRelation},
     data() {
-      return {activeName: 'first'}
+      return {
+        active: 0,
+        productParam: Object.assign({}, defaultProductParam),
+        showStatus: [true, false, false, false]
+      }
+    },
+    methods: {
+      hideAll() {
+        for (let i = 0; i < this.showStatus.length; i++) {
+          this.showStatus[i] = false;
+        }
+      },
+      prev() {
+        if (this.active > 0 && this.active < this.showStatus.length) {
+          this.active--;
+          this.hideAll();
+          this.showStatus[this.active] = true;
+        }
+      },
+      next() {
+        if (this.active < this.showStatus.length - 1) {
+          this.active++;
+          this.hideAll();
+          this.showStatus[this.active] = true;
+        }
+      }
     }
   }
 </script>
-<style></style>
+<style>
+  .form-container {
+    width: 800px;
+  }
+</style>
 
 
diff --git a/src/views/pms/product/components/addProductAttr.vue b/src/views/pms/product/components/addProductAttr.vue
new file mode 100644
index 0000000..f7e5e2d
--- /dev/null
+++ b/src/views/pms/product/components/addProductAttr.vue
@@ -0,0 +1,15 @@
+<template>
+  <div style="margin-top: 50px">
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "addProductAttr"
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/pms/product/components/addProductInfo.vue b/src/views/pms/product/components/addProductInfo.vue
new file mode 100644
index 0000000..2a66c25
--- /dev/null
+++ b/src/views/pms/product/components/addProductInfo.vue
@@ -0,0 +1,130 @@
+<template>
+  <div style="margin-top: 50px">
+    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="150px" style="width: 520px" size="small">
+      <el-form-item label="商品分类：" prop="productCategoryId">
+        <el-cascader
+          v-model="selectProductCateValue"
+          :options="productCateOptions">
+        </el-cascader>
+      </el-form-item>
+      <el-form-item label="商品名称：" prop="name">
+        <el-input v-model="value.name"></el-input>
+      </el-form-item>
+      <el-form-item label="副标题：" prop="subTitle">
+        <el-input v-model="value.subTitle"></el-input>
+      </el-form-item>
+      <el-form-item label="商品品牌：" prop="brandId">
+        <el-select v-model="value.brandId" placeholder="请选择品牌">
+          <el-option
+            v-for="item in brandOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="商品介绍：" prop="description">
+        <el-input
+          :autoSize="true"
+          v-model="value.description"
+          type="textarea"
+          placeholder="请输入内容"></el-input>
+      </el-form-item>
+      <el-form-item label="商品货号：" prop="requiredProp">
+        <el-input v-model="value.productSn"></el-input>
+      </el-form-item>
+      <el-form-item label="商品售价：" prop="requiredProp">
+        <el-input v-model="value.price"></el-input>
+      </el-form-item>
+      <el-form-item label="市场价：">
+        <el-input v-model="value.originalPrice"></el-input>
+      </el-form-item>
+      <el-form-item label="商品库存：" prop="requiredProp">
+        <el-input v-model="value.stock"></el-input>
+      </el-form-item>
+      <el-form-item label="计量单位：">
+        <el-input v-model="value.unit"></el-input>
+      </el-form-item>
+      <el-form-item label="商品重量：">
+        <el-input v-model="value.weight" style="width: 300px"></el-input>
+        <span style="margin-left: 20px">克</span>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import {fetchListWithChildren} from '@/api/productCate'
+  import {fetchList as fetchBrandList} from '@/api/brand'
+
+  export default {
+    name: "addProductInfo",
+    props: {
+      value: Object
+    },
+    data() {
+      return {
+        selectProductCateValue: null,
+        productCateOptions: [],
+        brandOptions: [],
+        rules: {
+          name: [
+            {required: true, message: '请输入商品名称', trigger: 'blur'},
+            {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
+          ],
+          subTitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
+          productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
+          brandId: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
+          description: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
+          requiredProp: [{required: true, message: '该项为必填项', trigger: 'blur'}]
+        }
+      };
+    },
+    created() {
+      this.getProductCateList();
+      this.getBrandList();
+    },
+    watch: {
+      selectProductCateValue: function (newValue) {
+        if (newValue != null && newValue.length == 2) {
+          this.value.productCategoryId = newValue[1];
+        } else {
+          this.value.productCategoryId = null;
+        }
+
+      }
+    },
+    methods: {
+      getProductCateList() {
+        fetchListWithChildren().then(response => {
+          let list = response.data;
+          this.productCateOptions = [];
+          for (let i = 0; i < list.length; i++) {
+            let children = [];
+            if (list[i].children != null && list[i].children.length > 0) {
+              for (let j = 0; j < list[i].children.length; j++) {
+                children.push({label: list[i].children[j].name, value: list[i].children[j].id});
+              }
+            }
+            this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
+          }
+        });
+      },
+      getBrandList() {
+        fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
+          this.brandOptions = [];
+          let brandList = response.data.list;
+          for (let i = 0; i < brandList.length; i++) {
+            this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
+          }
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  .smallInput {
+    width: 150px;
+  }
+</style>
diff --git a/src/views/pms/product/components/addProductRelation.vue b/src/views/pms/product/components/addProductRelation.vue
new file mode 100644
index 0000000..255fe57
--- /dev/null
+++ b/src/views/pms/product/components/addProductRelation.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>选择商品关联</div>
+</template>
+
+<script>
+  export default {
+    name: "addProductRelation"
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/pms/product/components/addProductSale.vue b/src/views/pms/product/components/addProductSale.vue
new file mode 100644
index 0000000..df39f58
--- /dev/null
+++ b/src/views/pms/product/components/addProductSale.vue
@@ -0,0 +1,97 @@
+<template>
+  <div style="margin-top: 50px">
+    <el-form :model="value" ref="productSaleForm" label-width="150px" style="width: 520px" size="small">
+      <el-form-item label="赠送积分：">
+        <el-input v-model="value.giftPoint"></el-input>
+      </el-form-item>
+      <el-form-item label="赠送成长值：">
+        <el-input></el-input>
+      </el-form-item>
+      <el-form-item label="积分购买限制：">
+        <el-input v-model="value.usePointLimit"></el-input>
+      </el-form-item>
+      <el-form-item label="预告商品：">
+        <el-switch
+          v-model="value.previewStatus"
+          :active-value="1"
+          :inactive-value="0">
+        </el-switch>
+      </el-form-item>
+      <el-form-item label="商品上架：">
+        <el-switch
+          v-model="value.publishStatus"
+          :active-value="1"
+          :inactive-value="0">
+        </el-switch>
+      </el-form-item>
+      <el-form-item label="商品推荐：">
+        <span style="margin-right: 10px">新品</span>
+        <el-switch
+          v-model="value.newStatus"
+          :active-value="1"
+          :inactive-value="0">
+        </el-switch>
+        <span style="margin-left: 10px;margin-right: 10px">推荐</span>
+        <el-switch
+          v-model="value.recommendStatus"
+          :active-value="1"
+          :inactive-value="0">
+        </el-switch>
+      </el-form-item>
+      <el-form-item label="服务保证：">
+        <el-checkbox-group v-model="selectServiceList">
+          <el-checkbox :label="1">无忧退货</el-checkbox>
+          <el-checkbox :label="2">快速退款</el-checkbox>
+          <el-checkbox :label="3">免费包邮</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="详细页标题：">
+        <el-input v-model="value.detailTitle"></el-input>
+      </el-form-item>
+      <el-form-item label="详细页描述：">
+        <el-input v-model="value.detailDesc"></el-input>
+      </el-form-item>
+      <el-form-item label="商品关键字：">
+        <el-input v-model="value.keywords"></el-input>
+      </el-form-item>
+      <el-form-item label="商品备注：">
+        <el-input v-model="value.note" type="textarea" :autoSize="true"></el-input>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "addProductSale",
+    props: {
+      value: Object
+    },
+    watch: {
+      selectServiceList: function (newValue) {
+        let serviceIds='';
+        if (newValue != null && newValue.length > 0) {
+          for (let i = 0; i < newValue.length; i++) {
+            serviceIds += newValue[i] + ',';
+          }
+          if (serviceIds.endsWith(',')) {
+            serviceIds = serviceIds.substr(0,serviceIds.length - 1)
+          }
+          this.value.serviceIds=serviceIds;
+        } else {
+          this.value.serviceIds = null;
+        }
+
+      }
+    },
+    data() {
+      return {
+        selectServiceList: []
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>