Merge branch 'dev' of https://git.yidian-inc.com:8021/bp/op-web-service into pyq

server/config.js

 const env = process.env.NODE_ENV || "development";
 const port = process.env.PORT || 8055;
 
-const LOGIN_URI = {
-  development: "http://bp-test.ini.yidian-inc.com ",
-  test: "http://web-rest.int.yidian-inc.com",
-  production: "http://web-rest.int.yidian-inc.com"
-};
-
 const PANDORA_URI = {
   development: "http://pandora.yidian-inc.com",
   test: "http://pandora.yidian-inc.com",
@@ -14,29 +8,15 @@ const PANDORA_URI = {
 };
 
 const API_INTERNAL_URI = {
-  development: "http://bp-test.ini.yidian-inc.com",
-  test: "http://bp-test.ini.yidian-inc.com",
-  production: "http://bp-test.ini.yidian-inc.com"
-};
-
-const GOODS_URI = {
-  development: "http://bp-dev.ini.yidian-inc.com",
-  test: "http://bp-test.ini.yidian-inc.com",
-  production: "http://bp-test.ini.yidian-inc.com"
-};
-
-const IDGEN_URI = {
-  development: "https://bp-test.go2yd.com",
-  test: "http://idgen-test.ini.yidian-inc.com",
-  production: "http://idgen-test.ini.yidian-inc.com"
-};
+  'development': "http://bp-dev.ini.yidian-inc.com",
+  'test': "http://bp-test.ini.yidian-inc.com",
+  'production': "http://bp.int.yidian-inc.com"
+}
 
 module.exports = {
   env: env,
   port: port,
-  LOGIN_URI: LOGIN_URI[env],
   API_INTERNAL_URI: API_INTERNAL_URI[env],
   PANDORA_URI: PANDORA_URI[env],
-  IDGEN_URI: IDGEN_URI[env],
-  GOODS_URI: GOODS_URI[env]
+  GOODS_URI: API_INTERNAL_URI[env]
 };

server/controllers/goods.js

 const GOODS_URI = require("../config.js").GOODS_URI;
 const req = require("../utils/request").httpReq;
 
-/** 
+/**
  * 示例
  *  exports.方法名 = async ctx => {
  *    const url = `${设置好的域名}/向服务端发送的请求地址`;
@@ -15,12 +15,64 @@ const req = require("../utils/request").httpReq;
  *    ctx.body = await req(ctx,opts); 将发送请求后的数据传递给前端页面
  *  };
  */
-
+// 获取分类
 exports.getCategoryList = async ctx => {
   const url = `${GOODS_URI}/goods/background/get_goods_category_list`;
+  const opts = {
+    url,
+    method: "GET"
+  };
+  ctx.body = await req(ctx, opts);
+};
+// 获取商品列表
+exports.getList = async ctx => {
+  const url = `${GOODS_URI}/goods/background/get_goods_list`;
   const opts = {
     url,
     method: "GET",
+    qs: ctx.request.query
+  };
+  ctx.body = await req(ctx, opts);
+};
+// 商品上架
+exports.putOnline = async ctx => {
+  const url = `${GOODS_URI}/goods/background/online`;
+  const opts = {
+    url,
+    method: "POST",
+    json: true,
+    body: ctx.request.body
+  };
+  ctx.body = await req(ctx, opts);
+};
+// 商品下架
+exports.putOffline = async ctx => {
+  const url = `${GOODS_URI}/goods/background/offline`;
+  const opts = {
+    url,
+    method: "POST",
+    json: true,
+    body: ctx.request.body
+  };
+  ctx.body = await req(ctx, opts);
+};
+// 获取商品详情列表
+exports.getGoodsInfo = async ctx => {
+  const url = `${GOODS_URI}/goods/background/get_goods_info`;
+  const opts = {
+    url,
+    method: "GET",
+    qs: ctx.request.query
+  };
+  ctx.body = await req(ctx, opts);
+};
+// 商品审核通过
+exports.postSuccess = async ctx => {
+  const opts = {
+    url: `${GOODS_URI}/goods/background/audit_pass`,
+    method: "POST",
+    json: true,
+    body: ctx.request.body
   };
   ctx.body = await req(ctx, opts);
 };
@@ -33,12 +85,20 @@ exports.getMarketingList = async ctx => {
     json: true,
     body: ctx.request.body
   };
-  const res = await req(ctx, opts);
-  console.log(res);
-  ctx.body = res;
+  ctx.body = await req(ctx, opts);
+};
+// 检查商品名称是否被占用
+exports.checkGoodsName = async ctx => {
+  const opts = {
+    url: `${GOODS_URI}/goods/background/check_goods_name`,
+    method: "POST",
+    json: true,
+    body: ctx.request.body
+  };
+  ctx.body = await req(ctx, opts);
 };
 // 获取查询活动列表
-exports.getFindGoodsList = async ctx =>{
+exports.getFindGoodsList = async ctx => {
   const url = `${GOODS_URI}/marketing/background/goods_list`;
   const opts = {
     url,
@@ -46,9 +106,19 @@ exports.getFindGoodsList = async ctx =>{
     json: true,
     body: ctx.request.body
   };
-  const res = await req(ctx, opts);
-  ctx.body = res;
+  ctx.body = await req(ctx, opts);
 };
+// 审核拒绝
+exports.auditReject = async ctx => {
+  const opts = {
+    url: `${GOODS_URI}/goods/background/audit_reject`,
+    method: "POST",
+    json: true,
+    body: ctx.request.body
+  };
+  ctx.body = await req(ctx, opts);
+}
+
 // 添加活动列表
 exports.getAddMarketingList = async ctx => {
   const url = `${GOODS_URI}/marketing/background/add_marketing`;
@@ -58,9 +128,27 @@ exports.getAddMarketingList = async ctx => {
     json: true,
     body: ctx.request.body
   };
-  const res = await req(ctx, opts);
-  ctx.body = res;
+  ctx.body = await req(ctx, opts);
 };
+// 获取门店列表
+exports.getShopsList = async ctx => {
+  const opts = {
+    url: `${GOODS_URI}/shop/background/shop_list`,
+    method: "GET",
+    qs: ctx.request.query
+  };
+  ctx.body = await req(ctx, opts);
+};
+// 添加门店
+exports.addShop = async ctx => {
+  const opts = {
+    url: `${GOODS_URI}/shop/background/add_shop`,
+    method: "POST",
+    json: true,
+    body: ctx.request.body
+  };
+  ctx.body = await req(ctx, opts);
+}
 // 查看列表详情
 exports.getMarketingInfo = async ctx => {
   const url = `${GOODS_URI}/marketing/background/marketing_info`;
@@ -70,8 +158,17 @@ exports.getMarketingInfo = async ctx => {
     json: true,
     body: ctx.request.body
   };
-  const res = await req(ctx, opts);
-  ctx.body = res;
+  ctx.body = await req(ctx, opts);
+};
+// 修改商品
+exports.editGoods = async ctx => {
+  const opts = {
+    url: `${GOODS_URI}/goods/background/edit_goods`,
+    method: "POST",
+    json: true,
+    body: ctx.request.body
+  }
+  ctx.body = await req(ctx, opts);
 };
 // 开启关闭状态
 exports.updateMarketingList = async ctx => {

server/router.js

@@ -10,7 +10,7 @@ const goods = require('./controllers/goods');
 const router = Router();
 const API_VERSION = "/api/v1";
 
-router.get('/', static.index)
+router.get(/^\/op.*/, static.index)
 
 router.get(`${API_VERSION}/fetch_user`, system.fetch_user);
 router.get(`${API_VERSION}/user/:type`, user.query)
@@ -38,13 +38,24 @@ router.post(`${API_VERSION}/op_commit`, enterprise.opCommit);
 router.post(`${API_VERSION}/op_business_update`, enterprise.opBusinessUpdate);
 
 /* 商品管理 */
+router.get(`${API_VERSION}/get_goods_category_list`, goods.getCategoryList);
+router.get(`${API_VERSION}/goods/background/get_goods_list`, goods.getList);
+router.post(`${API_VERSION}/goods/background/online`, goods.putOnline);
+router.post(`${API_VERSION}/goods/background/offline`, goods.putOffline);
+router.get(`${API_VERSION}/goods/background/get_goods_info`, goods.getGoodsInfo);
+router.post(`${API_VERSION}/goods/background/audit_pass`, goods.postSuccess);
+router.post(`${API_VERSION}/goods/background/check_goods_name`, goods.checkGoodsName);
+router.post(`${API_VERSION}/goods/background/audit_reject`, goods.auditReject);
+router.get(`${API_VERSION}/shop/background/shop_list`, goods.getShopsList);
+router.post(`${API_VERSION}/shop/background/add_shop`, goods.addShop);
+router.post(`${API_VERSION}/goods/background/edit_goods`, goods.editGoods)
 router.get(`${API_VERSION}/get_goods_category_list`, goods.getCategoryList)
 // 营销活动
-router.post(`${API_VERSION}/get_marketing_list`,goods.getMarketingList)
-router.post(`${API_VERSION}/get_addmarketing_list`,goods.getAddMarketingList)
-router.post(`${API_VERSION}/get_find_goods_list`,goods.getFindGoodsList)
-router.post(`${API_VERSION}/get_marketing_info`,goods.getMarketingInfo)
-router.post(`${API_VERSION}/update_marketing_list`,goods.updateMarketingList)
+router.post(`${API_VERSION}/get_marketing_list`, goods.getMarketingList)
+router.post(`${API_VERSION}/get_addmarketing_list`, goods.getAddMarketingList)
+router.post(`${API_VERSION}/get_find_goods_list`, goods.getFindGoodsList)
+router.post(`${API_VERSION}/get_marketing_info`, goods.getMarketingInfo)
+router.post(`${API_VERSION}/update_marketing_list`, goods.updateMarketingList)
 //生活号
 router.post(`${API_VERSION}/merchant/lifeinner/life_info`, life.get_life_info)
 router.get(`${API_VERSION}/merchant/lifeinner/life_list`, life.get_life_list)

src/config/pageconfig.js

@@ -4,22 +4,22 @@ export const HEADER_CONFIG = {
   logo: 'http://si1.go2yd.com/get-image/0ZAJxXeZ6iu',
   menuItems: [
     {
-      path: '/enterprise/certification',
+      path: '/op/enterprise/certification',
       name: '企业认证管理',
       key: 'enterprise',
     },
     {
-      path: '/lifeNo',
+      path: '/op/lifeNo',
       name: '生活号管理',
       key: 'lifeNo',
     },
     {
-      path: '/roleManageRole',
+      path: '/op/roleManageRole',
       name: '角色管理',
       key: 'role',
     },
     {
-      path: '/user',
+      path: '/op/user',
       name: '用户管理',
       key: 'user',
     }

src/main.js

@@ -32,7 +32,7 @@ router.beforeResolve(async (to, from, next) => {
   }
 
   if (!checkPathAuth(to.path)) {
-    router.push('/403')
+    router.push({name: 'Forbidden'})
   } else {
     next()
   }

src/pages/Enterprise/Audit/index.vue

@@ -196,7 +196,7 @@
           <el-table-column
             align="center"
             label="提交时间"
-            prop="update_time"
+            prop="submit_time"
           ></el-table-column>
           <el-table-column
             align="center"
@@ -413,6 +413,7 @@ export default {
     async getHistory () {
       const res = await getLog({ enterprise_auth_record_id: this.auditId });
       if (res.code !== 0) return this.$message.error(res.reason);
+      console.log("提交历史", res);
       this.historyList = [...res.result];
     },
 

src/pages/Goods/Detail/index.css

-.detail {
-  margin-top: 30px;
-}
-.detail .state {
-  display: flex;
-  align-items: center;
-}
-.detail .state .update_time {
-  margin: 0 20px;
-}
-.detail .message {
-  display: flex;
-}
-.detail .message .message_form {
-  width: 50%;
-}
-.detail .message .message_image {
-  width: 50%;
-}
-.message_border {
-  border: 1px solid #000000;
-  border-radius: 10px;
-  padding: 30px;
-  margin: 10px 0;
-}

src/pages/Goods/Detail/index.less

 .detail {
-	margin-top: 30px;
+	height: 100%;
 	.state {
 		display: flex;
 		align-items: center;
+		justify-content: flex-start;
+		.some_state {
+			display: inline;
+		}
 		.update_time {
 			margin: 0 20px;
 		}
 	}
 	.message {
 		display: flex;
-		.message_form {
-			width: 50%;
-		}
-		.message_image {
-			width: 50%;
-		}
+		justify-content: flex-start;
 	}
 }
 
 .message_border {
-	border: 1px solid #000000;
-	border-radius: 10px;
-	padding: 30px;
 	margin: 10px 0;
 }
+.width50p {
+	width: 50%;
+	padding: 20px;
+}
+
+.el-textarea .el-textarea__inner {
+	resize: none;
+}
+.operationButton {
+	margin-top: 30px;
+	display: flex;
+	justify-content: center;
+}
+
+.deep_place {
+	.el-form-item__content {
+		display: flex;
+		align-items: center;
+	}
+	a {
+		margin-left: 10px;
+		text-align: center;
+		width: 200px;
+		border-radius: 20px;
+		color: #fff;
+		background-color: #199ffb;
+	}
+}

src/pages/Goods/Detail/index.vue

 <template>
   <el-card class="detail">
     <!-- 状态区域 -->
-    <section class="state">
-      <h2>待审核</h2>
-      <span class="update_time">上次更新时间：2021-06-18</span>
-      <span>创建时间：2021-06-18</span>
-    </section>
+    <el-card class="state">
+      <h2 class="some_state">{{ status }}</h2>
+      <h2
+        class="some_state"
+        style="margin-left:20px"
+      >{{ onlineStatus }}</h2>
+      <span class="update_time">上次更新时间：{{ goodsObj.update_time }}</span>
+      <span>创建时间：{{ goodsObj.create_time }}</span>
+    </el-card>
     <!-- 基本信息 -->
-    <section class="message_border">
-      <h3>基本信息</h3>
+    <el-card class="message_border">
       <section class="message">
         <!-- 商品列表修改区 -->
-        <el-form
-          class="message_form"
-          inline
-        >
-          <el-form-item label="生活号名称：">
-            <el-input></el-input>
-          </el-form-item>
-          <el-form-item label="生活号认证：">
-            <el-input></el-input>
-          </el-form-item>
-          <el-form-item label="商品id：">
-            <el-input></el-input>
-          </el-form-item>
-          <el-form-item label="商品名称：">
-            <el-input></el-input>
-          </el-form-item>
-          <el-form-item label="一级分类：">
-            <el-input></el-input>
-          </el-form-item>
-          <el-form-item label="二级分类：">
-            <el-input></el-input>
-          </el-form-item>
-          <el-form-item label="描述：">
-            <textarea
-              name=""
-              id=""
-              cols="100"
-              rows="4"
-            ></textarea>
-          </el-form-item>
-        </el-form>
+        <section class="width50p">
+          <el-form
+            label-position="left"
+            label-width="140px"
+          >
+            <h3>基本信息</h3>
+            <el-form-item label="生活号名称：">
+              <!-- <el-input
+                v-if="$route.params.operation === 'EDIT'"
+                disabled
+                :readonly="true"
+                v-model="goodsObj.life_account_name"
+              ></el-input> -->
+              <span>{{ goodsObj.life_account_name }}</span>
+            </el-form-item>
+            <el-form-item label="生活号类型：">
+              <!-- <el-select
+                aria-readonly="true"
+                disabled
+                v-if="$route.params.operation === 'EDIT'"
+                v-model="goodsObj.life_account_type"
+              >
+                <el-option
+                  v-for="item in lifeList"
+                  :key="item.value"
+                  :label="item.options"
+                  :value="item.value"
+                ></el-option>
+              </el-select> -->
+              <span v-if="goodsObj.life_account_type === 1">个人生活号</span>
+              <span v-if="goodsObj.life_account_type === 2">企业生活号</span>
+            </el-form-item>
+            <el-form-item label="生活号认证状态：">
+              <span v-if="goodsObj.life_account_auth_status === 1">未认证</span>
+              <span v-if="goodsObj.life_account_auth_status === 2">已认证</span>
+            </el-form-item>
+            <el-form-item label="商品id：">
+              <!-- <el-input
+                v-if="$route.params.operation === 'EDIT'"
+                v-model="goodsObj.goods_spu_id"
+              ></el-input> -->
+              <span>{{ goodsObj.goods_spu_id }}</span>
+            </el-form-item>
+            <el-form-item label="商品名称：">
+              <el-input
+                maxlength="50"
+                show-word-limit
+                v-if="$route.params.operation === 'EDIT'"
+                v-model="goodsObj.goods_name"
+                @blur="checkSameName"
+              ></el-input>
+              <span v-else>{{ goodsObj.goods_name }}</span>
+            </el-form-item>
+            <el-form-item label="分类：">
+              <el-cascader
+                :disabled="$route.params.operation !== 'EDIT'"
+                v-model="optionsValue"
+                class="options"
+                :options="optionList"
+                :props="optionsProps"
+                @change="optionsChange"
+                clearable
+              ></el-cascader>
+            </el-form-item>
+            <el-form-item label="描述：">
+              <el-input
+                v-if="$route.params.operation === 'EDIT'"
+                type="textarea"
+                maxlength="50"
+                show-word-limit
+                :autosize="{ minRows: 4 }"
+                v-model="goodsObj.desc"
+              ></el-input>
+              <span v-else>{{ goodsObj.desc }}</span>
+            </el-form-item>
+          </el-form>
+        </section>
         <!-- 商品详情图 -->
-        <article class="message_image">
-          <h3>商品</h3>
-        </article>
+        <section class="width50p">
+          <h4 style="margin-bottom:20px">商品详情图</h4>
+          <el-upload
+            :data="{ scenario: `goods` }"
+            :action="uploadUrl"
+            :on-preview="previewImage"
+            :on-success="handleDetailSuccess"
+            :before-remove="removeDetailFiles"
+            :file-list="descPicUrlList"
+            auto-upload
+            :disabled="$route.params.operation !== 'EDIT'"
+            ref="detailUpload"
+            :limit="9"
+            list-type="picture-card"
+            multiple
+          >
+            <template #default>
+              <i class="el-icon-plus"></i>
+            </template>
+          </el-upload>
+        </section>
       </section>
-    </section>
+    </el-card>
     <!-- 商品详情 -->
-    <section class="message_border"></section>
+    <el-card class="message_border">
+      <h3>商品详情</h3>
+      <section class="message">
+        <!-- <section class="width50p">
+          <h4>套餐商品</h4>
+          <el-table>
+            <el-table-column
+              align="center"
+              label="商品名称"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="数量"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单位"
+            ></el-table-column>
+            <el-table-column
+              align="center"
+              label="单价"
+            ></el-table-column>
+          </el-table>
+        </section> -->
+        <section class="width50p">
+          <h4 style="margin-bottom:20px">商品介绍图</h4>
+          <el-upload
+            :data="{ scenario: `goods` }"
+            :disabled="$route.params.operation !== 'EDIT'"
+            :action="uploadUrl"
+            auto-upload
+            :limit="9"
+            :on-preview="previewImage"
+            list-type="picture-card"
+            multiple
+            ref="intrUpload"
+            :on-success="introduceSuccess"
+            :before-remove="intrRemove"
+            :file-list="introducePicUrlList"
+          >
+            <template #default>
+              <i class="el-icon-plus"></i>
+            </template>
+          </el-upload>
+          <h4 style="margin-top:20px">商品介绍：</h4>
+          <el-input
+            v-if="$route.params.operation === 'EDIT'"
+            type="textarea"
+            :readonly="true"
+            v-model="goodsObj.introduce"
+          ></el-input>
+          <span v-else>{{ goodsObj.introduce }}</span>
+        </section>
+      </section>
+    </el-card>
     <!-- 可用门店 -->
-    <section class="message_border"></section>
+    <el-card class="message_border">
+      <section class="message">
+        <section class="width50p">
+          <h3>可用门店</h3>
+          <el-table :data="goodsObj.sub_shop">
+            <el-table-column
+              label="门店名称"
+              align="center"
+              prop="shop_name"
+            ></el-table-column>
+            <el-table-column
+              label="联系电话"
+              align="center"
+              prop="phone"
+            ></el-table-column>
+            <el-table-column
+              label="地址"
+              align="center"
+              prop="address"
+            ></el-table-column>
+            <el-table-column
+              label="地理定位"
+              align="center"
+            >
+              <template #default="scope">
+                <span>经度：{{ scope.row.longitude }}</span>
+                <br />
+                <span>纬度：{{ scope.row.latitude }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              v-if="$route.params.operation === 'EDIT'"
+              label="操作"
+              align="center"
+              fixed="right"
+            >
+              <template #default="scope">
+                <el-button
+                  type="text"
+                  @click="deleteShops(scope.row.sub_shop_id)"
+                >删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-popover
+            v-if="$route.params.operation === 'EDIT'"
+            placement="bottom"
+            :width="600"
+            trigger="click"
+          >
+            <template #reference>
+              <el-button
+                @click="getShops"
+                type="primary"
+                style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);"
+              >门店列表
+              </el-button>
+            </template>
+            <!-- 门店列表 -->
+            <el-table
+              :data="shopsList"
+              @selection-change="handleShopsChange"
+            >
+              <el-table-column
+                type="selection"
+                width="55"
+              > </el-table-column>
+              <el-table-column
+                align="center"
+                prop="shop_name"
+                label="门店名称"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="phone"
+                label="联系电话"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                prop="address"
+                label="地址"
+              ></el-table-column>
+              <el-table-column
+                align="center"
+                label="地理定位"
+              >
+                <template #default="scope">
+                  <span>经度：{{ scope.row.longitude }}</span>
+                  <br />
+                  <span>纬度：{{ scope.row.latitude }}</span>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <!-- 分页 -->
+            <el-pagination
+              style="margin-top:20px"
+              background
+              @current-change="changeShopListPage"
+              v-model:currentPage="shopCurrentPage"
+              :page-size="5"
+              layout="total, prev, pager, next"
+              :total="shopsCount"
+            >
+            </el-pagination>
+            <!-- 添加门店弹窗 -->
+            <el-popover
+              placement="bottom"
+              :width="600"
+              trigger="click"
+              :visible="addShopShow"
+            >
+              <template #reference>
+                <el-button
+                  @click="addShopShow = true"
+                  type="primary"
+                  style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);"
+                >添加门店
+                </el-button>
+              </template>
+              <!-- 添加门店表单 -->
+              <el-form
+                label-position="right"
+                label-width="100px"
+                :model="shopForm"
+              >
+                <el-form-item label="门店名称：">
+                  <el-input v-model="shopForm.shop_name"></el-input>
+                </el-form-item>
+                <el-form-item label="联系电话：">
+                  <el-input v-model="shopForm.connect_phone"></el-input>
+                </el-form-item>
+                <el-form-item label="地址：">
+                  <el-input v-model="shopForm.address"></el-input>
+                </el-form-item>
+                <el-form-item
+                  label="地理定位："
+                  class="deep_place"
+                >
+                  <el-input v-model="shopForm.deep_place"></el-input>
+                  <a
+                    style=""
+                    target="_blank"
+                    href="https://lbs.amap.com/tools/picker"
+                  >高德获取定位</a>
+                </el-form-item>
+              </el-form>
+              <section style="display:flex;justify-content:center;">
+                <el-button
+                  type="primary"
+                  @click="addShop"
+                >保存</el-button>
+              </section>
+            </el-popover>
+          </el-popover>
+        </section>
+        <section class="width50p">
+          <h4 style="margin-bottom:20px">价格信息</h4>
+          <el-form label-width="100px">
+            <!-- <el-form-item label="秒杀价">
+              <el-input
+                :readonly="true"
+                disabled
+              ></el-input>
+            </el-form-item> -->
+
+            <el-form-item label="售价">
+              <el-input
+                v-if="$route.params.operation === 'EDIT'"
+                type="number"
+                v-model="goodsObj.price"
+                @blur="salePrice"
+              ></el-input>
+              <span v-else>{{ goodsObj.price }}</span>
+            </el-form-item>
+            <el-form-item label="原价">
+              <el-input
+                v-if="$route.params.operation === 'EDIT'"
+                type="number"
+                v-model="goodsObj.original_price"
+                @blur="perPrice"
+              ></el-input>
+              <span v-else>{{ goodsObj.original_price }}</span>
+            </el-form-item>
+            <h4 style="margin:20px 0">库存信息</h4>
+            <el-form-item label="剩余库存量:">
+              <el-input-number
+                v-if="$route.params.operation === 'EDIT'"
+                v-model="goodsObj.inventory_rest"
+                :min="0"
+              ></el-input-number>
+              <span v-else>{{ goodsObj.inventory_rest }}</span>
+            </el-form-item>
+            <el-form-item label="已下单量:">
+              <span>{{ goodsObj.total_amount_sold }}</span>
+            </el-form-item>
+            <el-form-item label="已卖出总数:">
+              <span>{{ goodsObj.total_amount_sold }}</span>
+            </el-form-item>
+            <el-form-item label="总库存量:">
+              <span>{{ goodsObj.inventory_total }}</span>
+            </el-form-item>
+          </el-form>
+        </section>
+      </section>
+    </el-card>
     <!-- 使用规则 -->
-    <section class="message_border"></section>
+    <el-card class="message_border">
+      <h3 style="margin-bottom:30px;">使用规则</h3>
+      <el-form
+        style="width:480px"
+        :model="rulesForm"
+        label-position="left"
+        label-width="120px"
+      >
+        <el-form-item label="单人可买上限：">
+          <el-input-number
+            v-if="$route.params.operation === 'EDIT'"
+            :min="0"
+            v-model="goodsObj.rule_limit"
+          ></el-input-number>
+          <span v-else>{{ goodsObj.rule_limit }}</span>
+        </el-form-item>
+        <el-form-item label="退款规则：">
+          <el-select
+            v-if="$route.params.operation === 'EDIT'"
+            v-model="goodsObj.rule_refund"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in rulesForm.rulesOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+          <span v-else-if="
+              $route.params.operation !== 'EDIT' && goodsObj.rule_refund === 1
+            ">到期后自动退款</span>
+          <span v-else-if="
+              $route.params.operation !== 'EDIT' && goodsObj.rule_refund === 2
+            ">购买后不允许退款</span>
+          <span v-else-if="
+              $route.params.operation !== 'EDIT' && goodsObj.rule_refund === 3
+            ">到期后不退款</span>
+        </el-form-item>
+        <el-form-item label="使用日期：">
+          <el-radio-group
+            v-model="goodsObj.rule_date_type"
+            v-if="$route.params.operation === 'EDIT'"
+          >
+            <el-radio :label="1">周末、节假日通用</el-radio>
+            <el-radio :label="2">仅工作日可用</el-radio>
+          </el-radio-group>
+          <span v-else-if="
+              $route.params.operation !== 'EDIT' &&
+                goodsObj.rule_date_type === 1
+            ">周末、节假日通用</span>
+          <span v-else-if="
+              $route.params.operation !== 'EDIT' &&
+                goodsObj.rule_date_type === 2
+            ">仅工作日可用</span>
+        </el-form-item>
+        <el-form-item label="使用时间：">
+          <el-time-picker
+            v-if="$route.params.operation === 'EDIT'"
+            is-range
+            v-model="rulesForm.useTime"
+            range-separator="-"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择时间范围"
+            @change="pickerTime"
+          >
+          </el-time-picker>
+          <span v-else>{{
+            goodsObj.rule_start_time + "-" + goodsObj.rule_end_time
+          }}</span>
+        </el-form-item>
+        <el-form-item label="过期时间">
+          <el-date-picker
+            v-if="$route.params.operation === 'EDIT'"
+            :disabledDate="disableExpirDate"
+            v-model="expirationTime"
+            type="datetime"
+            @change="expirDateChange"
+            placeholder="选择日期时间"
+          >
+          </el-date-picker>
+          <span v-else>{{ expirationTime }}</span>
+        </el-form-item>
+        <el-form-item label="使用规则：">
+          <el-input
+            v-if="$route.params.operation === 'EDIT'"
+            type="textarea"
+            maxlength="100"
+            show-word-limit
+            v-model="goodsObj.rule_desc"
+          ></el-input>
+          <span v-else>{{ goodsObj.rule_desc }}</span>
+        </el-form-item>
+      </el-form>
+    </el-card>
     <!-- 操作记录 -->
-    <section class="message_border"></section>
+    <el-card class="message_border">
+      <h3 style="margin-bottom:30px;">操作记录</h3>
+      <el-table
+        border
+        stripe
+        :data="recordLits"
+      >
+        <el-table-column
+          label="状态"
+          prop="state"
+          align="center"
+        >
+          <template #default="scope">
+            <span v-if="scope.row.status === 0">待审核</span>
+            <span v-else-if="scope.row.status === 1">审核通过</span>
+            <span v-else>审核失败</span>
+            &nbsp;&nbsp;&nbsp;
+            <span v-if="scope.row.online_status === 0">未上架</span>
+            <span v-else-if="scope.row.online_status === 1">已上架</span>
+            <span v-else>已下架</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作者"
+          prop="operator_name"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="审核时间"
+          prop="create_time"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          label="审核描述"
+          prop="note"
+          align="center"
+        ></el-table-column>
+      </el-table>
+    </el-card>
+    <!-- 审核保存返回 -->
+    <section class="operationButton">
+      <el-button
+        type="primary"
+        v-if="$route.params.operation === 'AUDIT'"
+        @click="onSuccess"
+      >通过
+      </el-button>
+      <el-popover
+        v-if="$route.params.operation === 'AUDIT'"
+        placement="top"
+        :width="600"
+        trigger="click"
+        v-model:visible="rejectVisible"
+      >
+        <template #reference>
+          <el-button type="danger">驳回</el-button>
+        </template>
+        <el-form :model="rejectReason">
+          <el-form-item label="驳回原因：">
+            <el-input
+              show-word-limit
+              :maxlength="200"
+              type="textarea"
+              style="width:100%"
+              v-model="rejectReason.reason"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <section style="display:flex;justify-content:center;">
+          <el-button
+            type="danger"
+            @click="onDefault"
+          >驳回</el-button>
+          <el-button
+            type="primary"
+            @click="rejectVisible = false"
+          >取消
+          </el-button>
+        </section>
+      </el-popover>
+      <el-button
+        v-if="$route.params.operation === 'EDIT'"
+        type="primary"
+        @click="saveDetailMessage"
+      >保存
+      </el-button>
+      <el-button
+        type="primary"
+        @click="backToDetail"
+      >返回 </el-button>
+    </section>
   </el-card>
+  <!-- 展示缩略图 -->
+  <el-dialog
+    width="40%"
+    v-model="isShowPopver"
+  >
+    <el-image
+      :src="popoverImage"
+      fit="fill"
+      style="width:100%"
+    ></el-image>
+  </el-dialog>
 </template>
 
-<style lang="less" src="./index.less" scope></style>
+<style lang="less" src="./index.less" scope></style>
\ No newline at end of file
+
+<script>
+import {
+  getGoodsInfo,
+  getGoodsList,
+  postSuccess,
+  auditReject,
+  checkGoodsName,
+  getShopsList,
+  postAddShop,
+  editGoods
+} from "@/service/Goods/goods";
+
+import { GOODS_URI } from "../../../../server/config.js";
+
+export default {
+  name: "GoodsDetail",
+
+  beforeRouteEnter (to, from, next) {
+    if (!to.params.operation) {
+      next({ name: "GoodsList" });
+    } else if (!to.params.spuId) {
+      next({ name: "GoodsList" });
+    } else {
+      next();
+    }
+  },
+
+  created () {
+    this.getOptions();
+    this.getGoodsDetailList(this.$route.params.spuId);
+  },
+
+  computed: {
+    // 审核状态
+    status () {
+      if (this.goodsObj.status === 0) {
+        return "待审核";
+      } else if (this.goodsObj.status === 1) {
+        return "审核通过";
+      } else {
+        return "审核驳回";
+      }
+    },
+
+    // 上下架状态
+    onlineStatus () {
+      if (this.goodsObj.online_status === 0) {
+        return "未上架";
+      } else if (this.goodsObj.online_status === 1) {
+        return "已上架";
+      } else {
+        return "已下架";
+      }
+    }
+  },
+
+  watch: {
+    goodsObj (val) {
+      this.optionsValue = [val.category_1_id, val.category_2_id];
+      this.rulesForm.useTime = this.formatDate(
+        val.rule_start_time,
+        val.rule_end_time
+      );
+    }
+  },
+
+  data () {
+    return {
+      // 商品分类选项
+      optionsProps: {
+        value: "category_id",
+        label: "name",
+        children: "sub_list"
+      },
+
+      lifeList: [
+        { value: 1, options: "个人生活号" },
+        { value: 2, options: "企业生活号" }
+      ],
+
+      optionList: [], // 商品分类选项
+      optionsValue: [], // 商品分类的值
+      // 商品回显信息
+      goodsObj: {
+        introduce: ""
+      },
+
+      isGoodsNameRepeat: false, // 商品名称是否重复
+
+      descPicUrlList: [], // 商品详情图回显列表
+      introducePicUrlList: [], // 商品介绍图回显列表
+
+      recordList: [], // 提交记录
+
+      detailUploadList: [], // 上传详情图片列表
+      introduceUploadList: [], // 上传详情图片列表
+
+      inventoryNumber: 0, // 库存数量
+
+      // 使用规则表单
+      rulesForm: {
+        // 退款选项
+        rulesOptions: [
+          { value: 1, label: "到期自动退款" },
+          { value: 2, label: "购买后不允许退款" },
+          { value: 3, label: "到期后不退款" }
+        ],
+        useTime: [], // 使用时间
+        rule_desc: "" // 使用描述
+      },
+
+      // 操作记录列表
+      recordLits: [],
+
+      // 驳回原因表单
+      rejectReason: {
+        reason: ""
+      },
+
+      shopsList: [], // 门店列表
+      shopsCount: 0,
+      shopCurrentPage: 1, // 门店列表当前页
+
+      // 新增门店表单
+      shopForm: {
+        shop_name: "",
+        connect_phone: "",
+        address: "",
+        deep_place: ""
+      },
+
+      shopList: [], // 门店列表
+      addShopDialog: false, // 添加门店弹框
+      showShopDialog: false, // 是否展示门店列表
+
+      popoverImage: "", // 放大显示图
+
+      rejectVisible: false, // 驳回原因弹框展示状态
+      isShowPopver: false, // 是否展示图片框
+
+      activeStartTime: "", // 活动开始时间
+      activeEndTime: "", // 活动结束时间
+
+      uploadUrl: `${GOODS_URI}/merchant/lifeinner/upload`, // 金山云上传地址
+
+      addShopShow: false, // 添加门店弹框显示
+
+      expirationTime: "", // 过期时间
+      shopIds: "" // 已选商店id
+    };
+  },
+
+  methods: {
+    // 获取级联选择商品列表
+    async getOptions () {
+      try {
+        const res = await getGoodsList();
+        if (res.code !== 0) return this.$message.error(res.reason);
+        this.optionList = res.result;
+        console.log(res);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    // 获取详情列表
+    async getGoodsDetailList (params) {
+      try {
+        const res = await getGoodsInfo({ goods_spu_id: params });
+        if (res.code !== 0) {
+          return this.$message.error(res.reason);
+        }
+        console.log("商品详情列表", res);
+        const { goods_info, record_list } = res.result;
+        this.goodsObj = goods_info;
+        this.recordLits = record_list;
+        // 渲染过期时间
+        this.expirationTime = goods_info.expiration_time;
+        // 初始化门店id
+        const shopId = goods_info.sub_shop.map(item => {
+          return item.sub_shop_id;
+        });
+        this.shopIds = shopId.join(",");
+        // 初始化规则开始时间
+        this.activeStartTime = goods_info.rule_start_time;
+        // 初始化规则结束时间
+        this.activeEndTime = goods_info.rule_end_time;
+
+        // 回显图片
+        this.formatInitPicture(
+          goods_info.desc_pic_url_list,
+          this.descPicUrlList
+        );
+        this.formatInitPicture(
+          goods_info.introduce_pic_url_list,
+          this.introducePicUrlList
+        );
+        this.detailUploadList = goods_info.desc_pic_url.split(",");
+        this.introduceUploadList = goods_info.introduce_pic_url.split(",");
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    // 初始化照片
+    formatInitPicture (pictureList, storeList) {
+      pictureList.forEach(element => {
+        let obj = new Object();
+        obj.url = element;
+        storeList.push(obj);
+      });
+    },
+
+    // 上传图片的公共方法
+    uploadPicture (response, storageList) {
+      const responseURL = `${response.result.bucket}/${response.result.object_id}`;
+      storageList.push(responseURL);
+      console.log("已上传的列表", storageList);
+    },
+    // 删除图片的公共方法
+    deletePicture (file, fileList, storageList) {
+      for (let i = 0; i < fileList.length; i++) {
+        if (fileList[i].uid == file.uid) {
+          storageList.splice(i, 1);
+        };
+      };
+      console.log(storageList);
+    },
+
+
+
+    // 格式化日期
+    formatDate (startTime, endTime) {
+      const nowTime = new Date();
+      const nowYear = nowTime.getFullYear();
+      const nowMonth = nowTime.getMonth() + 1;
+      const nowDate = nowTime.getDate();
+      const startTimeArray = startTime.split(":");
+      const endTimeArray = endTime.split(":");
+      const startHour = parseInt(startTimeArray[0]);
+      const startMinute = parseInt(startTimeArray[1]);
+      const startSecond = parseInt(startTimeArray[2]);
+      const endHour = parseInt(endTimeArray[0]);
+      const endMinute = parseInt(endTimeArray[1]);
+      const endSecond = parseInt(endTimeArray[2]);
+      return [
+        new Date(
+          nowYear,
+          nowMonth,
+          nowDate,
+          startHour,
+          startMinute,
+          startSecond
+        ),
+        new Date(nowYear, nowMonth, nowDate, endHour, endMinute, endSecond)
+      ];
+    },
+
+    // 获取门店列表
+    async getShops () {
+      const query = {
+        life_account_id: this.goodsObj.life_account_id,
+        page: this.shopCurrentPage,
+        page_size: 5
+      };
+      const res = await getShopsList(query);
+      console.log(res);
+      if (res.code !== 0) return this.$message.error(res.reason);
+      this.shopsList = res.result;
+      this.shopsCount = res.count;
+    },
+
+    // 门店列表更改时操作
+    handleShopsChange (value) {
+      this.goodsObj.sub_shop = value;
+      const shopList = value.map(item => {
+        return item.sub_shop_id;
+      });
+      this.shopIds = "";
+      this.shopIds = shopList.join(",");
+      console.log(this.shopIds);
+    },
+
+    // 添加新门店
+    async addShop () {
+      const deepPlace = this.shopForm.deep_place.split(",");
+      const longitude = deepPlace[0];
+      const latitude = deepPlace[1];
+      const query = {
+        life_account_id: this.goodsObj.life_account_id,
+        phone: this.shopForm.connect_phone,
+        shop_name: this.shopForm.shop_name,
+        longitude, // 经度
+        latitude, // 纬度
+        address: this.shopForm.address
+      };
+      const res = await postAddShop(query);
+      if (res.code !== 0) return this.$message.error(res.reason);
+      this.$message.success("添加门店成功!");
+      this.addShopShow = false;
+      console.log(res);
+    },
+
+    // 删除已选择门店
+    deleteShops (subShopId) {
+      this.goodsObj.sub_shop = this.goodsObj.sub_shop.filter(item => {
+        return item.sub_shop_id !== subShopId;
+      });
+      const shopIdsList = this.goodsObj.sub_shop.map(item => {
+        return item.sub_shop_id;
+      });
+      this.shopIds = shopIdsList.join(",");
+      console.log(this.shopIds);
+    },
+
+    // 商品列表换页
+    changeShopListPage (page) {
+      this.shopCurrentPage = page;
+      this.getShops();
+    },
+
+    // 商品分类列表变化
+    optionsChange (value) {
+      this.optionsValue = value;
+      console.log("商品分类id", this.optionsValue);
+    },
+
+    // 检查商品名称是否重复
+    async checkSameName () {
+      const res = await checkGoodsName({
+        life_account_id: this.goodsObj.life_account_id,
+        goods_name: this.goodsObj.goods_name,
+        goods_spu_id: this.goodsObj.goods_spu_id
+      });
+      console.log(res);
+      if (res.code !== 0) return this.$message.error(res.reason);
+      if (res.result.can_use) {
+        this.isGoodsNameRepeat = true;
+        this.$message.success("名称未被占用,请继续填写表单");
+      } else {
+        this.isGoodsNameRepeat = false;
+        return this.$message.error("名称被占用,换个名称试试吧~~~");
+      }
+    },
+
+    // 商品详情图上传成功时
+    handleDetailSuccess (res) {
+      this.uploadPicture(res, this.detailUploadList);
+    },
+    // 商品详情图删除完成后的钩子
+    removeDetailFiles (file, fileList) {
+      this.deletePicture(file, fileList, this.detailUploadList);
+    },
+    // 商品介绍图上传成功钩子
+    introduceSuccess (res) {
+      this.uploadPicture(res, this.introduceUploadList);
+    },
+
+    // 商品介绍图删除后的钩子
+    intrRemove (file, fileList) {
+      this.deletePicture(file, fileList, this.introduceUploadList);
+    },
+
+    // 展示商品大图
+    previewImage (file) {
+      this.popoverImage = file.url;
+      this.isShowPopver = true;
+    },
+
+    // 选择时间
+    pickerTime (time) {
+      let startHours = time[0].getHours() + "";
+      let startMinutes = time[0].getMinutes() + "";
+      let startSeconds = time[0].getSeconds() + "";
+      let endHours = time[1].getHours() + "";
+      let endMinutes = time[1].getMinutes() + "";
+      let endSeconds = time[1].getSeconds() + "";
+      if (startHours < 10) {
+        startHours = "0" + startHours;
+      }
+      if (startMinutes < 10) {
+        startMinutes = "0" + startMinutes;
+      }
+      if (startSeconds < 10) {
+        startSeconds = "0" + startSeconds;
+      }
+      if (endHours < 10) {
+        endHours = "0" + endHours;
+      }
+      if (endMinutes < 10) {
+        endMinutes = "0" + endMinutes;
+      }
+      if (endSeconds < 10) {
+        endSeconds = "0" + endSeconds;
+      }
+      this.activeStartTime = `${startHours}:${startMinutes}:${startSeconds}`;
+      this.activeEndTime = `${endHours}:${endMinutes}:${endSeconds}`;
+
+      console.log("时间节点", this.activeStartTime, this.activeEndTime);
+    },
+
+    // 过期时间更改
+    expirDateChange (time) {
+      console.log(time);
+      let YYYY = time.getFullYear();
+      let MM = time.getMonth() + 1;
+      let DD = time.getDate();
+      let HH = time.getHours();
+      let mm = time.getMinutes();
+      let ss = time.getSeconds();
+      if (MM < 10) {
+        MM = "0" + MM;
+      }
+      if (DD < 10) {
+        DD = "0" + DD;
+      }
+      if (HH < 10) {
+        HH = "0" + HH;
+      }
+      if (mm < 10) {
+        mm = "0" + mm;
+      }
+      if (ss < 10) {
+        ss = "0" + ss;
+      }
+      this.expirationTime = `${YYYY}-${MM}-${DD} ${HH}:${mm}:${ss}`;
+      console.log(this.expirationTime);
+    },
+
+    // 禁用时间
+    disableExpirDate (time) {
+      const nowDate = new Date();
+      if (time > nowDate) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+
+    // 更改售价
+    salePrice () {
+      if (this.goodsObj.price.length === 0) return (this.goodsObj.price = 0);
+      this.goodsObj.price = parseFloat(this.goodsObj.price).toFixed(2);
+    },
+
+    // 更改原价
+    perPrice () {
+      if (this.goodsObj.original_price === 0)
+        return (this.goodsObj.original_price = 0);
+      this.goodsObj.original_price = parseFloat(
+        this.goodsObj.original_price
+      ).toFixed(2);
+    },
+
+    // 审核通过
+    async onSuccess () {
+      const res = await postSuccess(this.$route.params.spuId);
+      if (res.code !== 0) return this.$message.error(res.reason);
+      this.$message.success("审核通过");
+      this.$router.replace({ name: "GoodsList" });
+    },
+
+    // 审核拒绝
+    async onDefault () {
+      if (!this.rejectReason.reason)
+        return this.$message.error("审核驳回时，驳回原因不能为空");
+      const query = {
+        goods_spu_id: this.goodsObj.goods_spu_id,
+        rejected_reason: this.rejectReason.reason
+      };
+      const res = await auditReject(query);
+      if (res.code !== 0) return this.$message.error(res.reason);
+      this.$message.warning("审核驳回成功!");
+      this.$router.replace({ name: "GoodsList" });
+    },
+
+    // 返回主页面
+    backToDetail () {
+      this.$router.replace({ name: "GoodsList" });
+    },
+
+    // 保存修改信息
+    async saveDetailMessage () {
+      const query = {
+        goods_spu_id: this.goodsObj.goods_spu_id, // 商品id
+        category_1_id: this.optionsValue[0], // 商品一级分类id
+        category_2_id: this.optionsValue[1], // 商品二级分类id
+        goods_name: this.goodsObj.goods_name, // 商品名称
+        desc_pic_url: this.detailUploadList.join(","), // 商品详情图片
+        desc: this.goodsObj.desc, // 商品详情描述
+        introduce: this.goodsObj.introduce, // 商品介绍
+        introduce_pic_url: this.introduceUploadList.join(","), // 商品介绍图片
+        expiration_time: this.expirationTime, // 过期时间
+        rule_limit: this.goodsObj.rule_limit, // 单人可购买上限
+        rule_desc: this.goodsObj.rule_desc, // 规则描述
+        rule_refund: this.goodsObj.rule_refund, // 退款规则
+        rule_start_time: this.activeStartTime, // 规则开始时间
+        rule_end_time: this.activeEndTime, // 规则结束时间
+        inventory_add: this.goodsObj.inventory_rest, // 库存
+        original_price: this.goodsObj.original_price, // 原价
+        price: this.goodsObj.price, // 现价
+        sub_shop_ids: this.shopIds // 门店id
+      };
+
+      console.log(query);
+      // 必填校验
+      if (!this.goodsObj.goods_spu_id) {
+        return this.$message.error("未传入商品id");
+      }
+      if (!query.category_1_id || !query.category_2_id) {
+        return this.$message.error("请选择商品分类");
+      }
+      if (!query.goods_name) {
+        return this.$message.error("请填写商品名称");
+      }
+      if (!this.isGoodsNameRepeat) {
+        return this.$message.error("商品名称被占用,请重新更换商品名称");
+      }
+      if (!query.expiration_time) {
+        return this.$message.error("过期时间未填写,请填写后再提交");
+      }
+      if (!query.rule_limit) {
+        return this.$message.error("请填写单人可购买上限");
+      }
+      if (!query.rule_desc) {
+        return this.$message.error("请填写使用规则描述");
+      }
+      if (!query.rule_refund) {
+        return this.$message.error("请填写退款规则");
+      }
+      if (!query.inventory_add) {
+        return this.$message.error("请填写库存剩余量");
+      }
+      if (!query.original_price) {
+        return this.$message.error("请填写原价(保留两位小数)");
+      }
+      if (!query.price) {
+        return this.$message.error("请填写现价(保留两位小数)");
+      }
+      if (!query.sub_shop_ids) {
+        return this.$message.error("请填写门店id");
+      }
+
+      const res = await editGoods(query);
+      if (res.code !== 0) {
+        return this.$message.error(res.reason);
+      }
+      this.$message.success("商品编辑成功!");
+      this.$router.replace({ name: "GoodsList" });
+    }
+  }
+};
+</script>

src/pages/Goods/List/index.css

+.goods {
+  width: 100%;
+  height: 100%;
+  padding: 0 30px;
+}
+.goods .search_condition {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.goods .search_condition .search_button {
+  display: flex;
+  align-items: center;
+  justify-self: flex-end;
+}
+.goods .search_condition .search_button .el-form-item__content {
+  display: flex;
+  justify-content: space-around;
+}
+.goods .commodity_list {
+  margin-top: 30px;
+}
+.goods .pagination {
+  margin-top: 30px;
+}

src/pages/Goods/List/index.less

-.list {
-	margin-top: 30px;
-	.commodity {
-		margin-top: 30px;
-		padding: 0 30px;
-		.search_condition {
+.goods {
+	width: 100%;
+	height: 100%;
+	padding: 0 30px;
+	.search_condition {
+		display: flex;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		align-items: center;
+		.search_button {
 			display: flex;
-			justify-content: flex-start;
-			flex-wrap: wrap;
 			align-items: center;
-			.search_button {
+			justify-self: flex-end;
+			.el-form-item__content {
 				display: flex;
-				align-items: center;
-				.el-form-item__content {
-					display: flex;
-					justify-content: space-around;
-				}
+				justify-content: space-around;
 			}
 		}
-		.commodity_list {
-			margin-top: 30px;
-		}
-		.pagination {
-			margin-top: 30px;
-		}
+	}
+	.commodity_list {
+		margin-top: 30px;
+	}
+	.pagination {
+		margin-top: 30px;
 	}
 }

src/pages/Goods/List/index.vue

 <template>
-  <div class="list">
+  <layout>
     <el-card class="goods">
       <!-- 筛选区 -->
       <el-form
@@ -8,16 +8,16 @@
       >
         <!-- 商品id -->
         <el-form-item label="商品id">
-          <el-input></el-input>
+          <el-input v-model="searchProps.goods_spu_id"></el-input>
         </el-form-item>
         <!-- 商品名称 -->
         <el-form-item label="商品名称">
-          <el-input></el-input>
+          <el-input v-model="searchProps.goods_name"></el-input>
         </el-form-item>
         <!-- 所属分类 -->
         <el-form-item label="所属分类">
           <el-cascader
-            @change="handleChange"
+            @change="handleTypeChange"
             :options="labelOptions"
             :props="cascaderProps"
             collapse-tags
@@ -26,21 +26,37 @@
         </el-form-item>
         <!-- 生活号ID -->
         <el-form-item label="生活号id">
-          <el-input></el-input>
+          <el-input v-model="searchProps.life_account_id"></el-input>
         </el-form-item>
         <!-- 生活号名称 -->
         <el-form-item label="生活号名称">
-          <el-input></el-input>
+          <el-input v-model="searchProps.life_account_name"></el-input>
         </el-form-item>
         <!-- 商品状态 -->
         <el-form-item label="商品状态">
           <el-select
-            v-model="stateValue"
+            v-model="audit_status"
             multiple
             collapse-tags
+            @change="handleStatusChange"
           >
             <el-option
-              v-for="item in option"
+              v-for="item in stateOption"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="上架状态">
+          <el-select
+            v-model="onlineStatus"
+            multiple
+            collapse-tags
+            @change="handleOnlineStatusChange"
+          >
+            <el-option
+              v-for="item in onlineStateOptions"
               :key="item.value"
               :label="item.label"
               :value="item.value"
@@ -48,9 +64,12 @@
           </el-select>
         </el-form-item>
         <!-- 按钮操作 -->
-        <el-form-item class="search_button">
-          <el-button type="primary">搜索</el-button>
-          <el-button>重置</el-button>
+        <el-form-item style="justify-self: flex-end;">
+          <el-button
+            @click="searchList"
+            type="primary"
+          >搜索</el-button>
+          <el-button @click="resetList">重置</el-button>
         </el-form-item>
       </el-form>
 
@@ -63,7 +82,7 @@
       >
         <el-table-column
           label="商品id"
-          prop="goods_id"
+          prop="goods_spu_id"
           align="center"
         ></el-table-column>
         <el-table-column
@@ -73,67 +92,69 @@
         ></el-table-column>
         <el-table-column
           label="一级分类"
-          prop="first_classify"
+          prop="category_1_name"
           align="center"
         ></el-table-column>
         <el-table-column
           label="二级分类"
-          prop="second_classify"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          label="关联门店"
-          prop="shop"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          label="活动营销价"
-          prop="sale_prise"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          label="售价"
-          prop="prise"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          label="原价"
-          prop="perprise"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          label="库存"
-          prop="inventory"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          label="状态"
-          prop="state"
+          prop="category_2_name"
           align="center"
         ></el-table-column>
         <el-table-column
           label="生活号id"
-          prop="life_no_id"
+          prop="life_account_id"
           align="center"
         ></el-table-column>
         <el-table-column
           label="生活号名称"
-          prop="life_no_name"
+          prop="life_account_name"
           align="center"
         ></el-table-column>
         <el-table-column
           label="发布者"
-          prop="publisher"
+          prop="publish_user_id"
           align="center"
         ></el-table-column>
+        <el-table-column
+          label="状态"
+          align="center"
+        >
+          <template #default="scope">
+            <span
+              v-if="scope.row.audit_status == 0"
+              style="color:#FF982C;"
+            >待审核</span>
+            <span
+              v-if="scope.row.audit_status == 1"
+              style="color:#5CC247;"
+            >审核通过</span>
+            <span
+              v-if="scope.row.audit_status == 2"
+              style="color:#FD6B6F;"
+            >审核驳回</span>
+            &nbsp;&nbsp;&nbsp;
+            <span
+              v-if="scope.row.online_status == 0"
+              style="color:#FF982C;"
+            >未上架</span>
+            <span
+              v-if="scope.row.online_status == 1"
+              style="color:#5CC247;"
+            >已上架</span>
+            <span
+              v-if="scope.row.online_status == 2"
+              style="color:#FD6B6F;"
+            >已下架</span>
+          </template>
+        </el-table-column>
         <el-table-column
           label="状态更新时间"
-          prop="state_update_time"
+          prop="update_time"
           align="center"
         ></el-table-column>
         <el-table-column
           label="商品创建时间"
-          prop="goods_create_time"
+          prop="create_time"
           align="center"
         ></el-table-column>
         <!-- 操作快捷键 -->
@@ -145,25 +166,40 @@
         >
           <template #default="scope">
             <el-button
+              v-if="scope.row.audit_status == 2 || scope.row.online_status == 1 || scope.row.online_status == 2"
               type="text"
-              v-if="scope.row.state === 1"
-              @click="goDetail(`EDIT`)"
+              @click="goDetail(`EDIT`, scope.row.goods_spu_id)"
             >编辑</el-button>
+
             <el-button
+              v-if="scope.row.audit_status == 0"
               type="text"
-              v-if="scope.row.state === 1"
-              @click="goDetail(`AUDIT`)"
+              @click="goDetail(`AUDIT`, scope.row.goods_spu_id)"
             >审核</el-button>
-            <el-button
-              type="text"
-              v-if="scope.row.state === 1"
-              @click="changeGoodsState('GROUNDING')"
-            >上架</el-button>
-            <el-button
-              type="text"
-              v-if="scope.row.state === 1"
-              @click="changeGoodsState('UNDERCARRIAGE')"
-            >下架</el-button>
+
+            <el-popconfirm
+              v-if="scope.row.online_status == 2 || scope.row.audit_status != 0 && scope.row.online_status == 0"
+              title="您确定要上架该商品吗？"
+              cancelButtonType="default"
+              @confirm="changeGoodsState('GROUNDING', scope.row.goods_spu_id)"
+            >
+              <template #reference>
+                <el-button type="text">上架</el-button>
+              </template>
+            </el-popconfirm>
+
+            <el-popconfirm
+              v-if="scope.row.online_status == 1"
+              title="您确定要下架该商品吗？"
+              cancelButtonType="default"
+              @confirm="
+                changeGoodsState('UNDERCARRIAGE', scope.row.goods_spu_id)
+              "
+            >
+              <template #reference>
+                <el-button type="text">下架</el-button>
+              </template>
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
@@ -172,177 +208,188 @@
       <el-pagination
         class="pagination"
         @current-change="handleCurrentChange"
-        v-model:currentPage="currentPage"
-        :page-size="100"
-        layout="prev, pager, next, jumper"
-        :total="1000"
+        v-model:currentPage="searchProps.page"
+        :page-size="searchProps.page_size"
+        layout="total,prev, pager, next, jumper"
+        :total="totalCount"
       >
       </el-pagination>
     </el-card>
-  </div>
+  </layout>
 </template>
 
 <style lang="less" src="./index.less" scope></style>
 
 <script>
-import { getGoodsList } from "@/service/Goods/goods";
+import {
+  getGoodsList,
+  getList,
+  putOnline,
+  putOffline
+} from "@/service/Goods/goods";
+import Layout from "../layout/index.vue";
 export default {
   name: "GoodsList",
 
+  components: {
+    Layout
+  },
+
   created () {
     // 获取级联选择
     this.getOptionList();
+    // 获取商品列表
+    this.getCommodityList();
   },
 
   data () {
     return {
+      // 级联选择器参数
       cascaderProps: {
-        multiple: true,
-        value: "category_id",
-        label: "name",
-        children: "sub_list"
+        multiple: true, // 是否支持多选
+        value: "category_id", // 每一项选择的值
+        label: "name", // 每一项的名称
+        children: "sub_list" // 每一项子集的对应节点
       },
+
       // 查询参数
       searchProps: {
+        page: 1, // 页码
+        page_size: 20, // 页数大小
+        goods_spu_id: "", // 后台商品id
+        goods_name: "", // 商品名称
         category_1_id: "", // 一级分类id
-        category_2_id: "" // 二级分类id
+        category_2_id: "", // 二级分类id
+        life_account_id: "",
+        life_account_name: "",
+        audit_status: "", // 商品状态
+        online_status: "" // 上架状态
       },
+
       // 级联选择器
-      labelOptions: [
-        {
-          value: 1,
-          label: "东南",
-          children: [
-            {
-              value: 2,
-              label: "上海",
-              children: [
-                { value: 3, label: "普陀" },
-                { value: 4, label: "黄埔" },
-                { value: 5, label: "徐汇" }
-              ]
-            },
-            {
-              value: 7,
-              label: "江苏",
-              children: [
-                { value: 8, label: "南京" },
-                { value: 9, label: "苏州" },
-                { value: 10, label: "无锡" }
-              ]
-            },
-            {
-              value: 12,
-              label: "浙江",
-              children: [
-                { value: 13, label: "杭州" },
-                { value: 14, label: "宁波" },
-                { value: 15, label: "嘉兴" }
-              ]
-            }
-          ]
-        },
-        {
-          value: 17,
-          label: "西北",
-          children: [
-            {
-              value: 18,
-              label: "陕西",
-              children: [
-                { value: 19, label: "西安" },
-                { value: 20, label: "延安" }
-              ]
-            },
-            {
-              value: 21,
-              label: "新疆维吾尔族自治区",
-              children: [
-                { value: 22, label: "乌鲁木齐" },
-                { value: 23, label: "克拉玛依" }
-              ]
-            }
-          ]
-        }
+      labelOptions: [],
+
+      // 商品状态
+      stateOption: [
+        { value: 0, label: "待审核" },
+        { value: 1, label: "审核通过" },
+        { value: 2, label: "审核驳回" }
       ],
-      option: [
-        { value: 1, label: "待审核" },
-        { value: 2, label: "审核通过" },
-        { value: 3, label: "审核驳回" },
-        { value: 4, label: "已上架" },
-        { value: 5, label: "已下架" }
+      // 上下架状态
+      onlineStateOptions: [
+        { value: 0, label: "未上架" },
+        { value: 1, label: "已上架" },
+        { value: 2, label: "已下架" }
       ],
-      // 商品状态
-      stateValue: [],
+
+      audit_status: [], // 审核状态
+      onlineStatus: [], // 上/下架状态
+
       // 商品列表
-      goodsList: [
-        {
-          goods_id: 1,
-          goods_name: "威化",
-          first_classify: 1,
-          second_classify: 1,
-          life_no_id: 1,
-          shop: "楼下小卖部",
-          life_no_name: "1的生活号",
-          publisher: "蒙文昊",
-          sale_prise: 300,
-          prise: 200,
-          perprise: 500,
-          inventory: 999,
-          state: 1,
-          state_update_time: "2021-06-17",
-          goods_create_time: "2021-06-17"
-        }
-      ],
-      currentPage: 1 // 当前页码
+      goodsList: [],
+
+      totalCount: 0 // 总条数
     };
   },
 
   methods: {
-    handleChange (val) {
-      const every1Val = val.map(item => {
-        return item[0];
-      });
-      const every2Val = val.map(item => {
-        return item[1];
-      });
-      this.searchProps.category_1_id = every1Val.join();
-      this.searchProps.category_2_id = every2Val.join();
-    },
     // 获取级联选择
     async getOptionList () {
       try {
         const res = await getGoodsList();
-        if (res.code !== 0) {
-          return this.$message.error(res.reason);
-        } else {
-          this.labelOptions = res.result;
-        }
-        console.log(res);
+        if (res.code !== 0) return this.$message.error(res.reason);
+        this.labelOptions = res.result;
       } catch (error) {
         console.error(error);
       }
     },
-    // 获取列表信息
-    getList () {
-      console.log("我是准备获取信息的!!!");
+    // 获取数组返回值并转换为字符串
+    getVal (value, index = 0) {
+      const valueArray = value.map(item => {
+        return item[index];
+      });
+      return valueArray.join();
+    },
+    getValue (value) {
+      const values = value.map(item => {
+        return item;
+      });
+      return values.join();
+    },
+    // 获取列表
+    async getCommodityList () {
+      try {
+        const res = await getList(this.searchProps);
+        if (res.code !== 0) return this.$message.error(res.reason);
+        console.log("商品列表", res);
+        this.goodsList = res.result.list;
+        this.totalCount = res.result.count;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    // 所属分类赋值
+    handleTypeChange (val) {
+      this.searchProps.category_1_id = this.getVal(val, 0);
+      this.searchProps.category_2_id = this.getVal(val, 1);
+    },
+    // 商品状态赋值
+    handleStatusChange (val) {
+      this.searchProps.audit_status = this.getValue(val);
+    },
+    // 上架状态赋值
+    handleOnlineStatusChange (val) {
+      this.searchProps.online_status = this.getValue(val);
+    },
+    // 按条件搜索
+    searchList () {
+      console.log(this.searchProps);
+      this.getCommodityList();
+    },
+    // 重置表单
+    resetList () {
+      (this.searchProps = {
+        page: 1, // 页码
+        page_size: 20, // 页数大小
+        goods_spu_id: "", // 后台商品id
+        goods_name: "", // 商品名称
+        category_1_id: "", // 一级分类id
+        category_2_id: "", // 二级分类id
+        life_account_id: "",
+        life_account_name: "",
+        audit_status: "", // 商品状态
+        online_status: "" // 上架状态
+      }),
+        this.getCommodityList();
     },
-
     // 上架/下架操作
-    changeGoodsState (state) {
-      console.log(state);
+    async changeGoodsState (state, spuId) {
+      // 上架操作
+      if (state === "GROUNDING") {
+        const res = await putOnline(spuId);
+        if (res.code !== 0) return this.$message.error(res.reason);
+        this.$message.success("商品上架成功");
+      }
+      // 下架操作
+      else if (state === "UNDERCARRIAGE") {
+        const res = await putOffline(spuId);
+        if (res.code !== 0) return this.$message.error(res.reason);
+        this.$message.success("商品下架成功");
+      }
+      this.getCommodityList();
     },
 
     // 页码变化
     handleCurrentChange (e) {
-      this.currentPage = e;
+      this.searchProps.page = e;
       // 获取信息
-      this.getList();
+      this.getCommodityList();
     },
 
     // 去往详情页
-    goDetail (where) {
-      this.$router.push({ name: "GoodsDetail", params: { operation: where } });
+    goDetail (operation, spuId) {
+      console.log(spuId);
+      this.$router.push({ name: "GoodsDetail", params: { operation, spuId } });
     }
   }
 };

src/pages/Goods/Retail/index.vue

 <template>
-  <el-card class="container" style="width: 100%; height: 100%">
-    <div class="retail">
-      <el-form inline :model="retailActivitie" ref="retailActivitie">
-        <!-- 查询 -->
-        <el-row>
-          <el-form-item label="分销活动id" prop="marketing_id">
-            <!-- :rules="[{ type: 'number', message: '活动id必须为数字值' }]" -->
-            <el-input
-              onkeyup="value=value.replace(/[^\d]/g,'')"
-              v-model.number="retailActivitie.marketing_id"
-            ></el-input>
-          </el-form-item>
-          <el-form-item label="分销活动名称">
-            <el-input v-model="retailActivitie.marketing_name"></el-input>
-          </el-form-item>
-          <el-form-item label="商品id">
-            <el-input v-model="retailActivitie.goods_sku_id"></el-input>
-          </el-form-item>
-          <el-form-item label="状态">
-            <el-select
-              v-model="retailActivitie.online_status"
-              multiple
-              collapse-tags
-            >
-              <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <!-- 按钮操作 -->
-          <el-form-item class="search_button">
-            <el-button type="primary" @click="toSearch">搜索</el-button>
-            <el-button @click="reset('retailActivitie')">重置</el-button>
-          </el-form-item>
-        </el-row>
-        <el-button type="primary" style="margin-bottom: 10px" @click="createDtb"
-          >创建分销活动</el-button
-        >
-        <!-- Tab -->
-        <el-table :data="tableData" type="index" align="center" border>
-          <el-table-column
-            align="center"
-            prop="marketing_id"
-            fixed
-            label="分销活动id"
-          >
-          </el-table-column>
-          <el-table-column
-            align="center"
-            prop="marketing_name"
-            label="分销活动名称"
-          >
-          </el-table-column>
-          <el-table-column
-            align="center"
-            prop="commission_mode"
-            label="关联商品数"
-          >
-          </el-table-column>
-          <el-table-column
-            align="center"
-            prop="first_commission_value"
-            label="一级分销金额"
-          >
-          </el-table-column>
-          <el-table-column
-            align="center"
-            prop="second_commission_value"
-            label="二级分销金额"
-          >
-          </el-table-column>
-          <el-table-column align="center" prop="online_status" label="状态">
-            <template #default="scope">
-              <span
-                :style="{ color: scope.row.online_status == 3 ? 'red' : '' }"
+  <layout>
+    <el-card class="container" style="width: 100%; height: 100%">
+      <div class="retail">
+        <el-form inline :model="retailActivitie" ref="retailActivitie">
+          <!-- 查询 -->
+          <el-row>
+            <el-form-item label="分销活动id" prop="marketing_id">
+              <!-- :rules="[{ type: 'number', message: '活动id必须为数字值' }]" -->
+              <el-input
+                onkeyup="value=value.replace(/[^\d]/g,'')"
+                v-model.number="retailActivitie.marketing_id"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="分销活动名称">
+              <el-input v-model="retailActivitie.marketing_name"></el-input>
+            </el-form-item>
+            <el-form-item label="商品id">
+              <el-input v-model="retailActivitie.goods_sku_id"></el-input>
+            </el-form-item>
+            <el-form-item label="状态">
+              <el-select
+                v-model="retailActivitie.online_status"
+                multiple
+                collapse-tags
               >
-                {{
-                  scope.row.online_status == 2
-                    ? "关闭"
-                    : scope.row.online_status == 1
-                    ? "启用"
-                    : "到期"
-                }}
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column
-            align="center"
-            prop="create_user_email"
-            label="创建人"
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <!-- 按钮操作 -->
+            <el-form-item class="search_button">
+              <el-button type="primary" @click="toSearch">搜索</el-button>
+              <el-button @click="reset('retailActivitie')">重置</el-button>
+            </el-form-item>
+          </el-row>
+          <el-button
+            type="primary"
+            style="margin-bottom: 10px"
+            @click="createDtb"
+            >创建分销活动</el-button
           >
-          </el-table-column>
-          <el-table-column align="center" prop="create_time" label="创建时间">
-          </el-table-column>
-          <el-table-column align="center" prop="update_time" label="更新时间">
-          </el-table-column>
-          <el-table-column align="center" prop="end_time" label="分销到期时间">
-          </el-table-column>
-          <el-table-column fixed="right" align="center" label="操作">
-            <template #default="scope">
-              <el-button @click="handleClick(scope.row)" type="text" size="mini"
-                >查看</el-button
-              >
-              <el-button
-                type="text"
-                size="mini"
-                @click.stop="handelEnable(scope.row, 2)"
-                v-if="
-                  scope.row.online_status === 1 && scope.row.online_status !== 3
-                "
-              >
-                关闭
-              </el-button>
-              <el-button
-                type="text"
-                size="mini"
-                v-if="
-                  scope.row.online_status === 2 && scope.row.online_status !== 3
-                "
-                @click.stop="handelEnable(scope.row, 1)"
-                >启用</el-button
-              >
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-form>
-    </div>
-    <!-- 页码区 -->
-    <el-pagination
-      class="pagination"
-      @current-change="handleCurrentChange"
-      v-model.current-page="retailActivitie.page"
-      :page-size="retailActivitie.page_size"
-      layout="prev, pager, next, jumper, ->,page , total"
-      :total="retailActivitie.count"
-    >
-    </el-pagination>
-  </el-card>
+          <!-- Tab -->
+          <el-table :data="tableData" type="index" align="center" border>
+            <el-table-column
+              align="center"
+              prop="marketing_id"
+              fixed
+              label="分销活动id"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="marketing_name"
+              label="分销活动名称"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="commission_mode"
+              label="关联商品数"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="first_commission_value"
+              label="一级分销金额"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="second_commission_value"
+              label="二级分销金额"
+            >
+            </el-table-column>
+            <el-table-column align="center" prop="online_status" label="状态">
+              <template #default="scope">
+                <span
+                  :style="{ color: scope.row.online_status == 3 ? 'red' : '' }"
+                >
+                  {{
+                    scope.row.online_status == 2
+                      ? "关闭"
+                      : scope.row.online_status == 1
+                      ? "启用"
+                      : "到期"
+                  }}
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="create_user_email"
+              label="创建人"
+            >
+            </el-table-column>
+            <el-table-column align="center" prop="create_time" label="创建时间">
+            </el-table-column>
+            <el-table-column align="center" prop="update_time" label="更新时间">
+            </el-table-column>
+            <el-table-column
+              align="center"
+              prop="end_time"
+              label="分销到期时间"
+            >
+            </el-table-column>
+            <el-table-column fixed="right" align="center" label="操作">
+              <template #default="scope">
+                <el-button
+                  @click="handleClick(scope.row)"
+                  type="text"
+                  size="mini"
+                  >查看</el-button
+                >
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click.stop="handelEnable(scope.row, 2)"
+                  v-if="
+                    scope.row.online_status === 1 &&
+                    scope.row.online_status !== 3
+                  "
+                >
+                  关闭
+                </el-button>
+                <el-button
+                  type="text"
+                  size="mini"
+                  v-if="
+                    scope.row.online_status === 2 &&
+                    scope.row.online_status !== 3
+                  "
+                  @click.stop="handelEnable(scope.row, 1)"
+                  >启用</el-button
+                >
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-form>
+      </div>
+      <!-- 页码区 -->
+      <el-pagination
+        class="pagination"
+        @current-change="handleCurrentChange"
+        v-model.current-page="retailActivitie.page"
+        :page-size="retailActivitie.page_size"
+        layout="prev, pager, next, jumper, ->,page , total"
+        :total="retailActivitie.count"
+      >
+      </el-pagination>
+    </el-card>
+  </layout>
   <!-- 创建分销活动 -->
   <el-dialog
-    v-show="shopStart == 0"
-    fullscreen
+    :fullscreen="true"
     title="创建分销活动"
     v-model="dialogFormVisible"
     width="100%"
     :show-close="false"
-    dialogClass="no-close"
   >
     <div class="bor">
       <el-row :gutter="50">
@@ -383,12 +395,12 @@ export default {
             message: "请填写一级佣金",
             trigger: "blur",
           },
-          {type: 'number', message: '必须为数值型'}
+          { type: "number", message: "必须为数值型" },
 
           // { validator: commission, trigger: "change" },
         ],
         second_commission_value: [
-          {type: 'number', message: '必须为数值型'}
+          { type: "number", message: "必须为数值型" },
           // {
           //   validator: commission,
           //   trigger: "change",
@@ -715,4 +727,4 @@ export default {
 .marketing {
   margin-top: 0;
 }
-</style>
+</style>
\ No newline at end of file

src/pages/Goods/components/PageHeader/User.vue

+<template>
+  <el-dropdown>
+    <div class="user-info">
+      <el-avatar
+        :src="userInfo.avatar || DEFAULT_AVATAR"
+        size="small"
+      ></el-avatar>
+      <span class="user-name">{{userInfo.name}}</span>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item>
+          <i class="el-icon-message"></i>
+          {{userInfo.email}}
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <span><a
+              class="link"
+              href="//pandora.yidian-inc.com/"
+            >返回pandora工具平台</a></span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { HEADER_CONFIG } from '@/config/pageconfig';
+
+export default {
+  computed: mapState({
+    userInfo: state => (state.userInfo || {}),
+  }),
+
+  data () {
+    return {
+      DEFAULT_AVATAR: HEADER_CONFIG.miscellaneous.defaultAvatar,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.user-info {
+  display: flex;
+  align-items: center;
+}
+
+.user-name {
+  margin-left: 12px;
+  color: #fff;
+}
+</style>

src/pages/Goods/components/PageHeader/config.js

+const headerConfig = [
+  {
+    name: "商品管理",
+    path: "/op/goods/list"
+  },
+  {
+    name: "分销",
+    path: "/op/goods/retail"
+  },
+
+];
+
+export default headerConfig;
\ No newline at end of file

src/pages/Goods/components/PageHeader/index.vue

+<template>
+  <div id="pageheader">
+    <div class="line"></div>
+    <el-menu
+      class="header-menu"
+      mode="horizontal"
+      :router="true"
+      background-color="#545c64"
+      text-color="#fff"
+      :default-active="activeMenu"
+      active-text-color="#ffd04b"
+      unique-opened
+    >
+      <el-menu-item
+        v-for="item in headerConfig"
+        :index="item.path"
+        :key="item.path"
+      >
+        {{ item.name }}
+      </el-menu-item>
+      <el-menu-item
+        key="usermenu"
+        class="user-menu"
+      >
+        <user></user>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import headerConfig from "./config";
+import User from "./User.vue";
+
+export default {
+  name: "PageHeader",
+  components: {
+    User
+  },
+  data () {
+    return {
+      headerConfig
+    };
+  },
+  computed: {
+    activeMenu () {
+      return this.$route.path;
+    }
+  },
+  beforeMount () { },
+  methods: {}
+};
+</script>
+
+<style lang="less">
+</style>

src/pages/Goods/layout/index.less

+.layout {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.main {
+	flex: 1;
+}

src/pages/Goods/layout/index.vue

+<template>
+  <div class="layout">
+    <!-- 页面公共 header -->
+    <page-header class="page-header"></page-header>
+
+    <!-- 页面主体部分 -->
+    <div class="main">
+      <slot></slot>
+    </div>
+
+  </div>
+</template>
+<script>
+import PageHeader from '../components/PageHeader';
+
+export default {
+  components: { PageHeader },
+};
+</script>
+
+<style lang="less" src="./index.less"></style>

src/router/Goods/index.js

@@ -3,17 +3,21 @@
  */
 const goodsRouters = [
   {
-    path: "/goods/list",
+    path: "/op/goods",
+    redirect: "/op/goods/list"
+  },
+  {
+    path: "/op/goods/list",
     name: "GoodsList",
     component: () => import(/* webpackChunkName: "goods" */ "@/pages/Goods/List")
   },
   {
-    path: "/goods/detail",
+    path: "/op/goods/detail",
     name: "GoodsDetail",
     component: () => import(/* webpackChunkName: "goods" */ "@/pages/Goods/Detail")
   },
   {
-    path: "/goods/retail",
+    path: "/op/goods/retail",
     name: "GoodsRetail",
     component: () => import(/* webpackChunkName: "goods" */ "@/pages/Goods/Retail")
   }

src/router/index.js

-import { createRouter, createWebHashHistory } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 
 import LifeNo from "../pages/Life-no/index.vue";
 import LifeNoDetail from "../pages/Life-no/life-no-detail.vue";
@@ -13,24 +13,24 @@ import goodsRouter from "./Goods/index";
 
 const routes = [
   {
-    path: "/",
+    path: "/op/enterprise",
     redirect: "/enterprise/certification"
   },
   {
-    path: "/404",
+    path: "/op/404",
     name: "NotFound",
     component: () =>
       import(/* webpackChunkName: "enterprise" */ "@/pages/Catch/notFound")
   },
   {
-    path: "/403",
+    path: "/op/403",
     name: "Forbidden",
     component: () =>
       import(/* webpackChunkName: "enterprise" */ "@/pages/Catch/forbidden")
   },
   // 企业认证管理
   {
-    path: "/enterprise/certification",
+    path: "/op/enterprise/certification",
     name: "Certification",
     component: () =>
       import(
@@ -41,7 +41,7 @@ const routes = [
     }
   },
   {
-    path: "/enterprise/audit",
+    path: "/op/enterprise/audit",
     name: "Audit",
     component: () =>
       import(/* webpackChunkName: "enterprise" */ "@/pages/Enterprise/Audit"),
@@ -50,7 +50,7 @@ const routes = [
     }
   },
   {
-    path: "/enterprise/establish",
+    path: "/op/enterprise/establish",
     name: "Establish",
     component: () =>
       import(
@@ -62,7 +62,7 @@ const routes = [
   },
   //生活号管理
   {
-    path: "/lifeNo",
+    path: "/op/lifeNo",
     name: "LifeNo",
     component: LifeNo,
     meta: {
@@ -70,24 +70,24 @@ const routes = [
     }
   },
   {
-    path: "/lifeNoDetail",
+    path: "/op/lifeNoDetail",
     name: "LifeNoDetail",
     component: LifeNoDetail
   },
   //用户管理
   {
-    path: "/user",
-    name: "User",
+    path: "/op/user",
+    name: "/op/User",
     component: User
   },
   {
-    path: "/userDetail",
+    path: "/op/userDetail",
     name: "UserDetail",
     component: UserDetail
   },
   //角色管理
   {
-    path: "/roleAddRole",
+    path: "/op/roleAddRole",
     name: "AddRole",
     component: AddRole,
     meta: {
@@ -96,7 +96,7 @@ const routes = [
     }
   },
   {
-    path: "/roleManageRole",
+    path: "/op/roleManageRole",
     name: "ManageRole",
     component: ManageRole,
     meta: {
@@ -105,7 +105,7 @@ const routes = [
     }
   },
   {
-    path: "/roleRoleDetail",
+    path: "/op/roleRoleDetail",
     name: "RoleDetail",
     component: RoleDetail,
     meta: {
@@ -118,7 +118,7 @@ const routes = [
 console.log(routes);
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes
 });
 

src/service/Goods/goods.js

 import axios from "@/utils/request";
 
-// 获取商品分类列表
-export async function getGoodsList() {
+// 获取商品分类项
+export async function getGoodsList () {
   const res = await axios.get("/api/v1/get_goods_category_list");
   return res;
 }
+// 获取商品列表
+export async function getList (params) {
+  const res = await axios.get("/api/v1/goods/background/get_goods_list", {
+    params
+  });
+  return res;
+}
+// 商品上架
+export async function putOnline (query) {
+  const res = await axios.post("/api/v1/goods/background/online", {
+    goods_spu_id: query
+  });
+  return res;
+}
+// 商品下架
+export async function putOffline (query) {
+  const res = await axios.post("/api/v1/goods/background/offline", {
+    goods_spu_id: query
+  });
+  return res;
+}
+// 获取商品详情列表
+export async function getGoodsInfo (params) {
+  const res = await axios.get("/api/v1/goods/background/get_goods_info", {
+    params
+  });
+  return res;
+}
+// 商品详情-审核通过
+export async function postSuccess (query) {
+  const res = await axios.post("/api/v1/goods/background/audit_pass", {
+    goods_spu_id: query
+  });
+  return res;
+}
+// 审核拒绝
+export async function auditReject (query) {
+  const res = await axios.post("/api/v1/goods/background/audit_reject", query);
+  return res;
+}
+// 商品详情-检查商品名称是否重复
+export async function checkGoodsName (params) {
+  const res = await axios.post(
+    "/api/v1/goods/background/check_goods_name",
+    params
+  );
+  return res;
+}
+// 获取门店表单
+export async function getShopsList (params) {
+  const res = await axios.get("/api/v1/shop/background/shop_list", { params });
+  return res;
+}
+// 添加门店信息
+export async function postAddShop (query) {
+  const res = await axios.post("/api/v1/shop/background/add_shop", query);
+  return res;
+}
+
+export async function editGoods (query) {
+  const res = await axios.post("/api/v1/goods/background/edit_goods", query);
+  return res;
+}
 
 // 获取营销活动列表
-export async function getMarketingList(params) {
+export async function getMarketingList (params) {
   const res = await axios.post("/api/v1/get_marketing_list", params);
   return res;
 }
 // 获取查询商品列表
-export async function getFindGoodsList(params) {
+export async function getFindGoodsList (params) {
   const res = await axios.post("/api/v1/get_find_goods_list", params);
   return res;
 }
 // 获取添加活动列表
-export async function getAddMarketingList(params) {
+export async function getAddMarketingList (params) {
   const res = await axios.post("/api/v1/get_addmarketing_list", params);
   return res;
 }
 // 获取查看列表
-export async function getMarketingInfo(marketing_id) {
+export async function getMarketingInfo (marketing_id) {
   const res = await axios.post("/api/v1/get_marketing_info", marketing_id);
   return res;
 }
 // 获取开启关闭
-export async function updateMarketingList(params) {
+export async function updateMarketingList (params) {
   const res = await axios.post("/api/v1/update_marketing_list", params);
   return res;
 }