feat: 产品详情

src/api/model/goods.ts

@@ -118,7 +118,7 @@ export interface Goods {
   /**
    * 商品类型
    */
-  goodsType?: String;
+  goodsType: String;
   /**
    * 是否删除
    */
@@ -142,7 +142,9 @@ export interface Goods {
 
   goodsCategoryList: Array<{ id: number }> | number[];
   name: string;
-  pic?: string;
+  pic?: string | string[];
+  isNews: string;
+  pageRemark?: string;
 }
 
 export type GoodsPageResult = PageResult<Goods>;

src/api/model/product.ts

@@ -98,6 +98,8 @@ export interface Product {
    * update_time
    */
   updateTime?: Date;
+
+  quantity: number;
 }
 
 export type ProductPageResult = PageResult<Product>;

src/api/product/goodsApi.ts

@@ -7,7 +7,7 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ApiResponse } from '../model/baseModel';
 import { Goods, GoodsParams, GoodsPageResult, GoodsPageResponse, GoodsResponse } from '../model/goods';
-import { GoodsList } from '/@/views/store/goodsList/type';
+import { GoodsResult } from '/@/views/store/goodsList/type';
 
 const baseApi = '/v1/product/goods';
 
@@ -73,4 +73,4 @@ export const count = (params?: GoodsParams) => defHttp.get<Number>({ url: `${bas
  * 查询商品分类下所有商品
  */
 export const goodsList = (params?: GoodsParams) =>
-  defHttp.get<GoodsList>({ url: `${baseApi}/line/goods/list`, params });
+  defHttp.get<GoodsPageResult>({ url: `${baseApi}/line/goods/list`, params });

src/views/store/components/pagination.vue

@@ -4,8 +4,7 @@
     v-model:pageSize="pageSize"
     :total="total"
     showQuickJumper
-    :pageSizeOptions="[10, 50, 100]"
-    size="small"
+    :pageSizeOptions="[10, 20, 50]"
     :showTotal="(total) => `共 ${total} 条数据`"
     @change="handleChange"
     @showSizeChange="handleSizeChange"
@@ -13,16 +12,17 @@
 </template>
 
 <script lang="ts" setup>
-  import { emit } from 'process';
-  import { ref, defineProps, defineEmits } from 'vue';
-  const props = defineProps(['pageNum', 'pageSize', 'total']);
+  import { defineProps, defineEmits } from 'vue';
+  defineProps(['pageNum', 'pageSize', 'total']);
   const emits = defineEmits(['update:pageNum', 'update:pageSize', 'handleChange']);
   const handleChange = (page, pageSize) => {
     emits('update:pageNum', page);
+    emits('handleChange');
   };
   const handleSizeChange = (current, size) => {
     emits('update:pageNum', 1);
     emits('update:pageSize', size);
+    emits('handleChange');
   };
 </script>
 

src/views/store/goodDetail/index.vue

@@ -11,40 +11,99 @@
       <div class="goodsInfo">
         <div class="imgWrap">
           <div class="show">
-            <img src="../home/1.jpg" alt="" />
+            <img :src="changeImg" alt="" />
           </div>
-          <ul>
-            <li>
-              <img src="../home/1.jpg" alt="" />
-            </li>
-            <li>
-              <img src="../home/2.png" alt="" />
+          <ul class="goodsImgList">
+            <li class="imgWrap" v-for="(item, index) in picList" @click="handleChangeImg(item)" :key="index">
+              <img :src="item" alt="" />
             </li>
           </ul>
         </div>
-        <div></div>
+        <div class="title">
+          <p class="name">{{ goodsInfo?.name }}</p>
+          <p class="remark">{{ goodsInfo?.remark }}</p>
+          <div class="goodsNum">套数： <a-input-number id="inputNumber" v-model:value="goodsNum" :min="1" /></div>
+          <p class="pageRemark">{{ goodsInfo?.pageRemark }}</p>
+        </div>
+      </div>
+      <div class="productList">
+        <p class="title">产品明细列表</p>
+        <a-table :dataSource="productList" :columns="columns">
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'quantity'">
+              <a-input v-model:value="record.quantity" :disabled="isKIT" />
+            </template>
+          </template>
+        </a-table>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref, onMounted, watch } from 'vue';
+  import { ref, onMounted, watch, computed } from 'vue';
   import { useRoute } from 'vue-router';
   import { useNavTree } from '/@/hooks/myhooks/index';
+  import * as GoodsApi from '/@/api/product/goodsApi';
   import { toNumber } from 'lodash';
   import Search from '../components/search.vue';
   import Nav from '../components/nav.vue';
   import { DataItem } from '/@/views/product/goods-category/type';
+  import { Goods } from '/@/api/model/goods';
+  import { Product } from '/@/api/model/product';
 
   const route = useRoute();
   const navTree = useNavTree();
 
   const query = route.query;
   const navId = toNumber(query.nav); // 一级选择id
+  const goodsId = toNumber(query.goods); // 商品id
   const navList = ref<DataItem[]>([]); // 菜单树
   const navActiveKey = ref(navId); // 一级标签选择
-  const title = ref('');
+  const title = ref(''); // 标题名称
+  const goodsInfo = ref<Goods>(); // 商品信息
+  const picList = ref<string[]>([]); // 图片列表
+  const changeImg = ref(''); // 选择查看的图片地址
+  const goodsNum = ref(1); // 选择套件数
+  const productList = ref<Array<Product>>([]);
+
+  const columns = [
+    {
+      title: '产品编号',
+      dataIndex: 'thirdProductId',
+      key: 'thirdProductId',
+    },
+    {
+      title: '名称',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: '描述信息',
+      dataIndex: 'address',
+      key: 'address',
+    },
+    {
+      title: '型号',
+      dataIndex: 'address1',
+      key: 'address1',
+    },
+    {
+      title: '包装',
+      dataIndex: 'address2',
+      key: 'address2',
+    },
+    {
+      title: '类型',
+      dataIndex: 'address2',
+      key: 'address2',
+    },
+    {
+      title: '数量',
+      key: 'quantity',
+      width: '100px',
+    },
+  ];
 
   const getGrandsonList = (arr: DataItem[]) => {
     arr.some((item) => {
@@ -55,12 +114,43 @@
     });
   };
 
+  const getGoodsInfo = () => {
+    GoodsApi.getById(goodsId).then((res) => {
+      goodsInfo.value = res;
+      if (res.productList) {
+        if (!isKIT.value) {
+          res.productList.forEach((item) => {
+            item.quantity = 0;
+          });
+        }
+
+        productList.value = res.productList;
+      }
+
+      if (res.pic) {
+        picList.value = res.pic.split(',');
+        changeImg.value = picList.value[0];
+      }
+    });
+  };
+
+  const handleChangeImg = (url) => {
+    changeImg.value = url;
+  };
+
+  const isKIT = computed(() => goodsInfo.value?.goodsType === 'KIT');
+
   onMounted(() => {
     navTree(navList, getGrandsonList, 'getGrandsonList');
+    getGoodsInfo();
   });
 </script>
 
 <style scoped lang="less">
+  p {
+    margin: 0;
+    padding: 0;
+  }
   .containe {
     padding: 30px;
     .contentWrap {
@@ -94,13 +184,79 @@
       }
 
       .goodsInfo {
+        padding: 20px 100px 20px 100px;
+        display: flex;
+        justify-content: flex-start;
         .imgWrap {
+          margin-right: 30px;
           .show {
             width: 400px;
             height: 400px;
             border: 1px solid #eee;
+            position: relative;
+
+            img {
+              width: 400px;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
             }
           }
+
+          .goodsImgList {
+            margin-top: 20px;
+            display: flex;
+            justify-content: flex-start;
+            .imgWrap {
+              width: 70px;
+              height: 70px;
+              border: 1px solid #eee;
+              position: relative;
+              margin-right: 10px;
+              cursor: pointer;
+
+              img {
+                width: 70px;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+              }
+            }
+          }
+        }
+
+        .title {
+          .name {
+            font-size: 26px;
+            font-weight: 600;
+          }
+
+          .remark {
+            font-size: 20px;
+            color: red;
+          }
+
+          .goodsNum {
+            margin-top: 180px;
+            margin-bottom: 50px;
+          }
+
+          .pageRemark {
+            font-size: 18px;
+            color: red;
+          }
+        }
+      }
+
+      .productList {
+        padding: 10px 100px 50px 100px;
+
+        .title {
+          font-size: 20px;
+          margin-bottom: 20px;
+        }
       }
     }
   }

src/views/store/goodsList/index.vue

@@ -44,12 +44,19 @@
           <li class="goods" v-for="item in goodsList" :key="item.id" @click="handleChangeGoods(item)">
             <div class="img">
               <img :src="newPng" alt="" class="new" v-if="item.isNews === 'YES'" />
-              <img :src="item.pic" alt="" />
+
+              <img :src="item.pic[0]" alt="" class="pic" v-if="item.pic && item.pic.length > 0" />
+              <img :src="nopl" alt="" class="pic" v-else />
             </div>
             <p class="title">{{ item.name }}</p>
           </li>
         </ul>
-        <Pagination v-model:pageNum="pageNum" v-model:pageSize="pageSize" v-model:total="total" @handleChange="" />
+        <Pagination
+          v-model:pageNum="pageNum"
+          v-model:pageSize="pageSize"
+          v-model:total="total"
+          @handleChange="getGoodsList"
+        />
       </div>
     </div>
   </div>
@@ -66,9 +73,10 @@
   import { useNavTree } from '/@/hooks/myhooks/index';
   import Pagination from '../components/pagination.vue';
   import { DataItem } from '/@/views/product/goods-category/type';
-  import { Goods } from '/@/views/store/goodsList/type';
+  import { Goods } from '/@/api/model/goods';
   import * as GoodsApi from '/@/api/product/goodsApi';
   import newPng from '/@/assets/images/new.png';
+  import nopl from '/@/assets/images/nopl.jpg';
 
   const go = useGo();
   const route = useRoute();
@@ -144,6 +152,11 @@
   // 获取商品分类下的商品
   const getGoodsList = () => {
     GoodsApi.goodsList(Object.assign({ pageSize: pageSize.value, pageNum: pageNum.value }, formQuery)).then((res) => {
+      res.records.forEach((item) => {
+        if (item.pic && typeof item.pic === 'string') {
+          item.pic = item.pic.split(',');
+        }
+      });
       total.value = res.total;
       goodsList.value = res.records;
     });
@@ -265,6 +278,7 @@
             }
 
             .img {
+              width: 100%;
               position: relative;
               height: 285px;
               .new {
@@ -274,6 +288,14 @@
                 width: 50px;
                 height: 50px;
               }
+
+              .pic {
+                width: 100%;
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+              }
             }
 
             .title {

src/views/store/goodsList/type.ts

-export interface GoodsList {
-  current: number;
-  pages: number;
-  records: Goods[];
-  size: number;
-  total: number;
-}
-
-export interface Goods {
-  id: number;
-  pic: string;
-  name: string;
-  isNews: string;
-}