diff --git a/src/store/index.js b/src/store/index.js
index 97aaef8..58eb711 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,14 +1,15 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import app from './modules/app'
-import dict from './modules/dict'
-import user from './modules/user'
-import tagsView from './modules/tagsView'
-import permission from './modules/permission'
-import settings from './modules/settings'
-import getters from './getters'
+import Vue from "vue";
+import Vuex from "vuex";
+import app from "./modules/app";
+import dict from "./modules/dict";
+import user from "./modules/user";
+import tagsView from "./modules/tagsView";
+import permission from "./modules/permission";
+import settings from "./modules/settings";
+import platformShop from "./modules/platform/shop";
+import getters from "./getters";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 const store = new Vuex.Store({
   modules: {
@@ -17,9 +18,10 @@ const store = new Vuex.Store({
     user,
     tagsView,
     permission,
-    settings
+    settings,
+    platformShop,
   },
-  getters
-})
+  getters,
+});
 
-export default store
+export default store;
diff --git a/src/store/modules/platform/shop.js b/src/store/modules/platform/shop.js
new file mode 100644
index 0000000..25690bb
--- /dev/null
+++ b/src/store/modules/platform/shop.js
@@ -0,0 +1,31 @@
+export default {
+  state: {
+    // 商品分类
+    categoryOptions: [
+      {
+        label: "1",
+        children: [
+          {
+            label: "1-1",
+          },
+          {
+            label: "1-2",
+          },
+        ],
+      },
+      {
+        label: "2",
+        children: [
+          {
+            label: "2-1",
+          },
+        ],
+      },
+    ],
+  },
+  mutations: {
+    updateCategory(state, category) {
+      state.categoryOptions = category;
+    },
+  },
+};
diff --git a/src/views/platform/self-operated-mall/components/add_product.vue b/src/views/platform/self-operated-mall/components/add_product.vue
new file mode 100644
index 0000000..6ff68d8
--- /dev/null
+++ b/src/views/platform/self-operated-mall/components/add_product.vue
@@ -0,0 +1,179 @@
+<template>
+    <div class="app-container">
+        <el-tabs v-model="activeName" type="border-card">
+            <el-tab-pane label="基本信息" name="base">
+                <div class="title">基本信息</div>
+                <el-divider />
+                <el-form :inline="true">
+                    <el-form-item label="商品名称">
+                        <el-input placeholder="请输入商品名称" />
+                    </el-form-item>
+                    <el-form-item label="商品编码">
+                        <el-input placeholder="请输入商品编码" />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-cascader placeholder="请选择商品分类" :options="categoryOptions"></el-cascader>
+                    </el-form-item>
+                </el-form>
+                <el-form :inline="true">
+                    <el-form-item label="计量单位">
+                        <el-select placeholder="请选择计量单位" v-model="form.unit" />
+                    </el-form-item>
+                    <el-form-item label="库存预警">
+                        <el-input-number placeholder="请输入最低库存数量" v-model="form.num" controls-position="right"
+                            :step="100" :min="0"></el-input-number>
+                    </el-form-item>
+                    <br />
+                    <el-form-item label="是否上架">
+                        <el-switch v-model="form.isOnShelf" active-color="#adbcf9" inactive-color="#adbc00">
+                        </el-switch>
+                    </el-form-item>
+                </el-form>
+                <div class="title">商品主图</div>
+                <el-divider />
+                <el-row>
+                    <el-col :span="4" v-for="(item, index) in form.fileList" :key="index">
+                        <div class="img" :style="{
+                            backgroundImage: `url(${item.blobURL})`
+                        }">
+                            <i class="el-icon-check" v-if="item.primary"></i>
+                        </div>
+                        <div style="text-align: center;">
+                            <el-button type="text" @click="setPrimary(index)">设为主图</el-button>
+                            <el-button type="text" @click="handleRemove(index)">删除图片</el-button>
+                        </div>
+                    </el-col>
+                </el-row>
+                <el-upload action="#" accept="image/png, image/jpeg" :limit="maxFileCount" :show-file-list="false"
+                    :auto-upload="false" :file-list="form.fileList" :on-change="handleChange">
+                    <el-button type="primary" v-if="form.fileList.length < maxFileCount">上传图片</el-button><span
+                        class="upload-tip">145*145（单张图片大小不超过{{ maxFileSizeM }}，支持格式jpg、png，最多上传8张）</span>
+                </el-upload>
+                <div class="title">商品详情</div>
+                <h1>富文本编辑器</h1>
+                <el-divider />
+                <el-button type="primary" @click="save">保存</el-button>
+                <el-button @click="$emit('close')">关闭</el-button>
+            </el-tab-pane>
+            <el-tab-pane label="库存规格" name="spec"></el-tab-pane>
+        </el-tabs>
+
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+    name: "AddProduct",
+    data() {
+        return {
+            // 最大上传文件数
+            maxFileCount: 2,
+            //最大上传文件体积 单位字节
+            maxFileSize: 1024 * 1024 * 5,
+            form: {
+                // 库存预警
+                num: 100,
+                // 是否商家
+                isOnShelf: true,
+                //计量单位
+                unit: undefined,
+                fileList: []
+
+            },
+            activeName: "base"
+        }
+    },
+    methods: {
+        setPrimary(index) {
+
+            let _index = this.form.fileList.findIndex(item => item.primary)
+            let old = this.form.fileList[_index]
+            old.primary = false
+            this.form.fileList.splice(_index, 1, old)
+            let _new = this.form.fileList[index]
+            _new.primary = true
+            this.form.fileList.splice(index, 1, _new)
+
+        },
+        handleChange(file, fileList) {
+            if (file.size > this.maxFileSize) {
+                this.$modal.msgWarning(`单张图片大小不能超过${this.maxFileSizeM}`)
+                return
+            }
+            file.blobURL = URL.createObjectURL(file.raw)
+            file.primary = false
+            if (this.form.fileList.length === 0) {
+                file.primary = true
+            }
+            this.form.fileList.push(file)
+
+        },
+        handleRemove(index) {
+            let del = this.form.fileList[index]
+            this.form.fileList.splice(index, 1)
+            //删除主图时默认设置剩下图片中的第一张为主图
+            if (this.form.fileList.length > 0 && del.primary) {
+                let defaultPrimary = this.form.fileList[0]
+                defaultPrimary.primary = true
+                this.form.fileList.splice(0, 1, defaultPrimary)
+            }
+        },
+        handlePreview(file) {
+            console.log(file);
+        },
+        save() {
+            this.$modal.msgSuccess("保存成功")
+            this.$emit('close')
+        }
+    },
+    computed: {
+        ...mapState({
+            categoryOptions: state => state.platformShop.categoryOptions
+        }),
+        maxFileSizeM() {
+            return `${this.maxFileSize / 1024 / 1024}M`
+        }
+    },
+}
+</script>
+<style>
+.img {
+    width: 145px;
+    height: 145px;
+    background-position: center;
+    background-size: cover;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 50px;
+}
+
+.title {
+    color: rgba(16, 16, 16, 1);
+    font-size: 16px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+    margin-top: 20px;
+}
+
+.el-switch__core:after {
+    content: "";
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    border-radius: 100%;
+    -webkit-transition: all 0.3s;
+    transition: all 0.3s;
+    width: 16px;
+    height: 16px;
+    background-color: #5a7bf4 !important;
+}
+
+.upload-tip {
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+    margin-left: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/platform/self-operated-mall/form.vue b/src/views/platform/self-operated-mall/components/form.vue
similarity index 90%
rename from src/views/platform/self-operated-mall/form.vue
rename to src/views/platform/self-operated-mall/components/form.vue
index d10806c..6217bb8 100644
--- a/src/views/platform/self-operated-mall/form.vue
+++ b/src/views/platform/self-operated-mall/components/form.vue
@@ -31,7 +31,7 @@
         </el-row>
         <el-row type="flex" justify="space-between">
             <el-col :span="12">
-                <el-button type="primary">新增商品</el-button>
+                <el-button type="primary" @click="$emit('show-add')">新增商品</el-button>
                 <el-button>批量上架</el-button>
                 <el-button>批量下架</el-button>
                 <el-button>批量删除</el-button>
@@ -89,25 +89,12 @@
     </div>
 </template>
 <script>
+import { mapState } from 'vuex'
 export default {
     name: "BaseForm",
     dicts: ['product_status'],
     data() {
         return {
-            categoryOptions: [{
-                label: '1',
-                children: [{
-                    label: '1-1'
-                }, {
-                    label: '1-2'
-                }]
-            },
-            {
-                label: '2',
-                children: [{
-                    label: '2-1'
-                }]
-            }],
             // 查询参数
             queryParams: {
                 pageNum: 1,
@@ -119,6 +106,11 @@ export default {
                 dateRange: undefined
             },
         }
+    },
+    computed: {
+        ...mapState({
+            categoryOptions: state => state.platformShop.categoryOptions
+        })
     }
 }
 </script>
diff --git a/src/views/platform/self-operated-mall/index.vue b/src/views/platform/self-operated-mall/index.vue
index 767f0d6..c323260 100644
--- a/src/views/platform/self-operated-mall/index.vue
+++ b/src/views/platform/self-operated-mall/index.vue
@@ -1,32 +1,38 @@
 <template>
-    <el-tabs v-model="activeName" type="border-card" class="custom-tab">
+    <el-tabs v-model="activeName" type="border-card" class="custom-tab" v-if="showList">
         <el-tab-pane label="全部商品（120）" name="all">
             全部商品
-            <base-form />
+            <base-form @show-add="showList = false" />
         </el-tab-pane>
         <el-tab-pane label="上架商品（120）" name="on-shelf">
             上架商品
-            <base-form />
+            <base-form @show-add="showList = false" />
         </el-tab-pane>
         <el-tab-pane label="下架商品（120）" name="off-shelf">
             下架商品
-            <base-form />
+            <base-form @show-add="showList = false" />
         </el-tab-pane>
         <el-tab-pane label="库存预警（120）" name="warn">
             库存预警
-            <base-form />
+            <base-form @show-add="showList = false" />
         </el-tab-pane>
     </el-tabs>
+    <add-product v-else @close="showList = true" />
 </template>
 <script>
-import BaseForm from "./form"
+import BaseForm from "./components/form"
+import AddProduct from "./components/add_product"
 export default {
     name: "Index",
-    components: { BaseForm },
+    components: { BaseForm, AddProduct },
     data() {
         return {
-            activeName: "all"
+            activeName: "all",
+            showList: true
         }
+    },
+    methods: {
+
     }
 }
 </script>