feature:商品详情页ui完成

src/pages/Enterprise/Audit/index.vue

@@ -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

@@ -37,3 +37,10 @@
 .message_border {
   margin: 10px 0;
 }
+.width50p {
+  width: 50%;
+  padding: 20px;
+}
+.el-textarea .el-textarea__inner {
+  resize: none;
+}

src/pages/Goods/Detail/index.less

@@ -38,3 +38,11 @@
 .message_border {
 	margin: 10px 0;
 }
+.width50p {
+	width: 50%;
+	padding: 20px;
+}
+
+.el-textarea .el-textarea__inner {
+	resize: none;
+}

src/pages/Goods/Detail/index.vue

@@ -12,14 +12,14 @@
     </el-card>
     <!-- 基本信息 -->
     <el-card class="message_border">
-      <h3>基本信息</h3>
       <section class="message">
         <!-- 商品列表修改区 -->
         <el-form
-          class="message_form"
+          class="message_form width50p"
           label-position="left"
           label-width="100px"
         >
+          <h3>基本信息</h3>
           <el-form-item label="生活号名称：">
             <el-input
               disabled
@@ -34,7 +34,7 @@
             <el-input v-model="goodsObj.goods_spu_id"></el-input>
           </el-form-item>
           <el-form-item label="商品名称：">
-            <el-input v-model="goodsObj.name"></el-input>
+            <el-input v-model="goodsObj.goods_name"></el-input>
           </el-form-item>
           <el-form-item label="分类：">
             <el-cascader
@@ -57,44 +57,225 @@
           </el-form-item>
         </el-form>
         <!-- 商品详情图 -->
-        <article class="message_image">
+        <article class="message_image width50p">
+          <h4 style="margin-bottom:20px">商品详情图</h4>
           <el-upload
             action="#"
-            list-type="picture-card"
             :auto-upload="false"
+            :limit="9"
+            list-type="picture-card"
+            multiple
+            :on-remove="handleRemove"
+            @change="handleUploadChange"
           >
-            <template #default>
-              <i class="el-icon-plus"></i>
-            </template>
-            <template #file="{file}">
-              <div>
-                <img
-                  class="el-upload-list__item-thumbnail"
-                  :src="file.url"
-                  alt=""
-                />
-                <span class="el-upload-list__item-actions">
-                  <span
-                    class="el-upload-list__item-delete"
-                    @click="handleRemove(file)"
-                  >
-                    <i class="el-icon-delete"></i>
-                  </span>
-                </span>
-              </div>
-            </template>
+            <i class="el-icon-plus"></i>
           </el-upload>
         </article>
       </section>
     </el-card>
     <!-- 商品详情 -->
-    <el-card class="message_border"></el-card>
+    <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
+            action="#"
+            :auto-upload="false"
+            :limit="9"
+            list-type="picture-card"
+            multiple
+            :on-remove="handleRemove"
+            @change="handleUploadChange"
+          >
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <h4 style="margin-top:20px">商品介绍</h4>
+          <el-input
+            type="textarea"
+            :readonly="true"
+            v-model="goodsObj.introduce"
+          ></el-input>
+        </section>
+      </section>
+    </el-card>
     <!-- 可用门店 -->
-    <el-card class="message_border"></el-card>
+    <el-card class="message_border">
+      <section class="message">
+        <section class="width50p">
+          <h3>可用门店</h3>
+          <el-table>
+            <el-table-column
+              label="门店名称"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              label="联系电话"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              label="地址"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              label="地理定位"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              label="操作"
+              align="center"
+            >
+              <template>
+                <el-button type="text">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-button
+            type="primary"
+            style="border-radius:20px;margin:20px 0 0 50%;transform: translate(-50%,0);"
+          >添加门店</el-button>
+        </section>
+        <section class="width50p">
+          <h4 style="margin-bottom:20px">价格信息</h4>
+          <el-form
+            inline
+            label-width="100px"
+          >
+            <el-form-item label="秒杀价">
+              <el-input
+                :readonly="true"
+                disabled
+              ></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>
+            <h4 style="margin:20px 0">库存信息</h4>
+            <el-form-item label="剩余库存量:">
+              <el-input-number
+                v-model="inventoryNumber"
+                :min="0"
+              ></el-input-number>
+            </el-form-item>
+            <el-form-item label="已购买量:">
+              <span>{{ 12 }}</span>
+            </el-form-item>
+            <el-form-item label="总库存量:">
+              <span>{{ 13 }}</span>
+            </el-form-item>
+          </el-form>
+        </section>
+      </section>
+    </el-card>
     <!-- 使用规则 -->
-    <el-card class="message_border"></el-card>
+    <el-card class="message_border">
+      <h3>使用规则</h3>
+      <el-form
+        style="width:480px"
+        :model="rulesForm"
+        label-position="left"
+        label-width="120px"
+      >
+        <el-form-item label="单人可买上限：">
+          <el-input v-model="rulesForm.upperLimit"></el-input>
+        </el-form-item>
+        <el-form-item label="退款规则：">
+          <el-select
+            v-model="rulesForm.rulesValue"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in rulesForm.rulesOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="使用日期：">
+          <el-radio-group v-model="rulesForm.useDate">
+            <el-radio
+              label="周末、节假日通用"
+              :value="1"
+            ></el-radio>
+            <el-radio
+              label="线下场地免费"
+              value="2"
+            ></el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="使用时间：">
+          <el-time-picker
+            is-range
+            v-model="rulesForm.useTime"
+            range-separator="至"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            placeholder="选择时间范围"
+          >
+          </el-time-picker>
+        </el-form-item>
+        <el-form-item label="使用规则：">
+          <el-input
+            type="textarea"
+            maxlength="100"
+            show-word-limit
+            v-model="rulesForm.desc"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </el-card>
     <!-- 操作记录 -->
-    <el-card class="message_border"></el-card>
+    <el-card class="message_border">
+      <h3>操作记录</h3>
+      <el-table
+        border
+        stripe
+        :data="recordLits"
+      >
+      </el-table>
+      <el-table-column
+        label="状态"
+        prop="state"
+      ></el-table-column>
+      <el-table-column
+        label="操作者"
+        prop="author"
+      ></el-table-column>
+      <el-table-column
+        label="审核时间"
+        prop="time"
+      ></el-table-column>
+      <el-table-column
+        label="审核描述"
+        prop="desc"
+      ></el-table-column>
+    </el-card>
   </el-card>
 </template>
 
@@ -162,7 +343,34 @@ export default {
       spuId: "", // 商品id
       goodsObj: {}, // 商品回显信息
       recordList: [], // 提交记录
-      optionList: [] // 商品分类选项
+      optionList: [], // 商品分类选项
+      uploadFileList: [], // 上传图片列表
+      inventoryNumber: 0, // 库存数量
+
+
+      // 使用规则表单
+      rulesForm: {
+        upperLimit: "", // 单人可买上限
+        rulesValue: "", // 退款规则
+        // 退款选项
+        rulesOptions: [
+          { value: 1, label: "到期自动退款" },
+          { value: 2, label: "购买后不允许退款" },
+          { value: 3, label: "到期后不退款" }
+        ],
+        useDate: "", // 使用日期
+        useTime: "",// 使用时间
+        desc: "", // 使用描述
+      },
+
+      recordLits: [
+        {
+          state: "审核通过",
+          author: "我自己",
+          time: "2021-06-25",
+          desc: "那就通过了呗,还咋?"
+        }
+      ], // 操作记录
     };
   },
 
@@ -196,9 +404,12 @@ export default {
       console.log(value);
     },
     // 删除照片
-    handleRemove (file) {
-      console.log(file);
-      this.removePhoto(file)
+    handleRemove (file, fileList) {
+      console.log(fileList);
+    },
+    // 上传图片更改
+    handleUploadChange (file, fileList) {
+      console.log(fileList);
     }
   }
 };

src/pages/Goods/List/index.vue

@@ -12,7 +12,7 @@
         </el-form-item>
         <!-- 商品名称 -->
         <el-form-item label="商品名称">
-          <el-input v-model="searchProps.name"></el-input>
+          <el-input v-model="searchProps.goods_name"></el-input>
         </el-form-item>
         <!-- 所属分类 -->
         <el-form-item label="所属分类">
@@ -35,7 +35,7 @@
         <!-- 商品状态 -->
         <el-form-item label="商品状态">
           <el-select
-            v-model="status"
+            v-model="audit_status"
             multiple
             collapse-tags
             @change="handleStatusChange"
@@ -69,7 +69,7 @@
             @click="searchList"
             type="primary"
           >搜索</el-button>
-          <el-button>重置</el-button>
+          <el-button @click="resetList">重置</el-button>
         </el-form-item>
       </el-form>
 
@@ -87,7 +87,7 @@
         ></el-table-column>
         <el-table-column
           label="商品名称"
-          prop="name"
+          prop="goods_name"
           align="center"
         ></el-table-column>
         <el-table-column
@@ -121,15 +121,15 @@
         >
           <template #default="scope">
             <span
-              v-if="scope.row.status == 0"
+              v-if="scope.row.audit_status == 0"
               style="color:#FF982C;"
             >待审核</span>
             <span
-              v-if="scope.row.status == 1"
+              v-if="scope.row.audit_status == 1"
               style="color:#5CC247;"
             >审核通过</span>
             <span
-              v-if="scope.row.status == 2"
+              v-if="scope.row.audit_status == 2"
               style="color:#FD6B6F;"
             >审核驳回</span>
             &nbsp;&nbsp;&nbsp;
@@ -171,12 +171,12 @@
             >编辑</el-button>
 
             <el-button
-              v-if="scope.row.status == 0"
+              v-if="scope.row.audit_status == 0"
               type="text"
               @click="goDetail(`AUDIT`,scope.row.goods_spu_id)"
             >审核</el-button>
 
-            <!-- v-if="scope.row.status == 1 && scope.row.online_status == 2 || scope.row.status == 1 && scope.row.online_status == 0" -->
+            <!-- v-if="scope.row.audit_status == 1 && scope.row.online_status == 2 || scope.row.audit_status == 1 && scope.row.online_status == 0" -->
             <el-popconfirm
               title="您确定要上架该商品吗？"
               cancelButtonType="default"
@@ -251,12 +251,12 @@ export default {
         page: 1, // 页码
         page_size: 20, // 页数大小
         goods_spu_id: "", // 后台商品id
-        name: "", // 商品名称
+        goods_name: "", // 商品名称
         category_1_id: "", // 一级分类id
         category_2_id: "", // 二级分类id
         life_account_id: "",
         life_account_name: "",
-        status: "", // 商品状态
+        audit_status: "", // 商品状态
         online_status: "" // 上架状态
       },
 
@@ -276,8 +276,8 @@ export default {
         { value: 2, label: "已下架" }
       ],
 
-      status: [],
-      onlineStatus: [],
+      audit_status: [], // 审核状态
+      onlineStatus: [], // 上/下架状态
 
       // 商品列表
       goodsList: [],
@@ -329,7 +329,7 @@ export default {
     },
     // 商品状态赋值
     handleStatusChange (val) {
-      this.searchProps.status = this.getValue(val);
+      this.searchProps.audit_status = this.getValue(val);
     },
     // 上架状态赋值
     handleOnlineStatusChange (val) {
@@ -337,20 +337,37 @@ export default {
     },
     // 按条件搜索
     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();
+    },
     // 上架/下架操作
     async changeGoodsState (state, spuId) {
       // 上架操作
       if (state === "GROUNDING") {
         const res = await putOnline(spuId);
-        if (res.code !== 0) return this.$message.error(res.status);
+        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.status);
+        if (res.code !== 0) return this.$message.error(res.reason);
         this.$message.success("商品下架成功");
       }
     },