feat: 商品详情页

src/hooks/myhooks/index.ts

@@ -33,7 +33,7 @@ export const usePagination = (fun: () => void) => {
   return reactive(p);
 };
 
-const getNavTree = (navList, init?: Function, str) => {
+const getNavTree = (navList, init?: Function, str?: string) => {
   goodsCategoryApi.dealerTree({ parentId: 0 }).then((res) => {
     navList.value = res;
     userStore.setUserNavList(navList.value);
@@ -47,7 +47,7 @@ const getNavTree = (navList, init?: Function, str) => {
   });
 };
 
-const navTree = (navList, init?: Function, str) => {
+const navTree = (navList, init?: Function, str?: string) => {
   const navListStore = userStore.getNavList;
   if (navListStore.length <= 0) {
     getNavTree(navList, init, str);

src/views/product/goods-price/index.vue

@@ -32,7 +32,7 @@
     </div>
     <div class="tableWrap">
       <div class="titleWrap">
-        <span class="title">商品分类</span>
+        <span class="title">商品价格</span>
         <a-button type="primary" @click="handleAdd">新增</a-button>
       </div>
       <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" :loading="tableLoading">

src/views/product/goods-price/modal.vue

@@ -104,7 +104,7 @@
     const fetchId = lastFetchId;
     goodsOptions.value = [];
     fetching.value = true;
-    GoodsApi.search({ pageNum: 1, pageSize: 20, goodsName: value }).then((body) => {
+    GoodsApi.search({ pageNum: 1, pageSize: 20, name: `%${value}%` }).then((body) => {
       if (fetchId !== lastFetchId) {
         return;
       }

src/views/product/goods/components/basicInfo.vue

@@ -26,6 +26,13 @@
       <a-form-item label="商品描述" name="remark">
         <a-input v-model:value="formData.remark" />
       </a-form-item>
+      <a-form-item label="商品类型" name="status">
+        <a-radio-group v-model:value="formData.goodsType">
+          <a-radio value="KIT">套件</a-radio>
+          <a-radio value="PRODUCT">商品</a-radio>
+          <a-radio value="SURGICAL_BAG">手术包</a-radio>
+        </a-radio-group>
+      </a-form-item>
       <a-form-item label="上架" name="status">
         <a-radio-group v-model:value="formData.status">
           <a-radio value="YES">是</a-radio>
@@ -82,6 +89,7 @@
   const formData = reactive<BasicData>({
     goodsCategoryList: [],
     name: '',
+    goodsType: 'PRODUCT',
     status: 'NO',
     isImport: 'NO',
     isNews: 'NO',

src/views/product/goods/index.vue

@@ -34,7 +34,7 @@
     </div>
     <div class="tableWrap">
       <div class="titleWrap">
-        <span class="title">商品分类</span>
+        <span class="title">商品列表</span>
         <a-button type="primary" @click="handleAdd(false)">新增</a-button>
       </div>
       <a-table :dataSource="dataSource" :columns="columns" :pagination="pagination" :loading="tableLoading">

src/views/product/goods/type.ts

@@ -10,6 +10,7 @@ export interface BasicData {
   goodsCategoryList: number[] | goodsCategory[];
   name: string;
   status: string;
+  goodsType: string;
   isImport: string;
   isNews: string;
   isUnconventional: string;

src/views/store/components/pagination.vue

@@ -16,7 +16,7 @@
   import { emit } from 'process';
   import { ref, defineProps, defineEmits } from 'vue';
   const props = defineProps(['pageNum', 'pageSize', 'total']);
-  const emits = defineEmits(['update:pageNum', 'update:pageSize']);
+  const emits = defineEmits(['update:pageNum', 'update:pageSize', 'handleChange']);
   const handleChange = (page, pageSize) => {
     emits('update:pageNum', page);
   };

src/views/store/goodDetail/index.vue

-<template> </template>
+<template>
+  <div class="containe">
+    <Search></Search>
+    <div class="contentWrap">
+      <div class="top">
+        <div class="title">{{ title }}</div>
+        <div class="wrap">
+          <Nav v-model:navList="navList" v-model:navActiveKey="navActiveKey" />
+        </div>
+      </div>
+      <div class="goodsInfo">
+        <div class="imgWrap">
+          <div class="show">
+            <img src="../home/1.jpg" alt="" />
+          </div>
+          <ul>
+            <li>
+              <img src="../home/1.jpg" alt="" />
+            </li>
+            <li>
+              <img src="../home/2.png" alt="" />
+            </li>
+          </ul>
+        </div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+</template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { ref, onMounted, watch } from 'vue';
+  import { useRoute } from 'vue-router';
+  import { useNavTree } from '/@/hooks/myhooks/index';
+  import { toNumber } from 'lodash';
+  import Search from '../components/search.vue';
+  import Nav from '../components/nav.vue';
+  import { DataItem } from '/@/views/product/goods-category/type';
 
-<style scoped lang="less"></style>
+  const route = useRoute();
+  const navTree = useNavTree();
+
+  const query = route.query;
+  const navId = toNumber(query.nav); // 一级选择id
+  const navList = ref<DataItem[]>([]); // 菜单树
+  const navActiveKey = ref(navId); // 一级标签选择
+  const title = ref('');
+
+  const getGrandsonList = (arr: DataItem[]) => {
+    arr.some((item) => {
+      if (item.id === navId) {
+        title.value = item.name;
+        return true;
+      }
+    });
+  };
+
+  onMounted(() => {
+    navTree(navList, getGrandsonList, 'getGrandsonList');
+  });
+</script>
+
+<style scoped lang="less">
+  .containe {
+    padding: 30px;
+    .contentWrap {
+      padding: 30px;
+      background: #fff;
+      border-radius: 10px;
+      max-width: 1400px;
+      min-width: 1200px;
+      margin: 0 auto;
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+
+        .title {
+          width: 25%;
+          background: #f7f9fa;
+          color: #1890ff;
+          border-radius: 10px;
+          text-align: center;
+          height: 50px;
+          padding: 5px;
+          line-height: 40px;
+          font-size: 20px;
+        }
+
+        .wrap {
+          width: 73%;
+          margin: 0;
+        }
+      }
+
+      .goodsInfo {
+        .imgWrap {
+          .show {
+            width: 400px;
+            height: 400px;
+            border: 1px solid #eee;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/store/goodsList/index.vue

@@ -41,8 +41,9 @@
       </div>
       <div class="goodsWrap">
         <ul class="goodsList">
-          <li class="goods" v-for="item in goodsList" :key="item.id">
+          <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="" />
             </div>
             <p class="title">{{ item.name }}</p>
@@ -67,6 +68,7 @@
   import { DataItem } from '/@/views/product/goods-category/type';
   import { Goods } from '/@/views/store/goodsList/type';
   import * as GoodsApi from '/@/api/product/goodsApi';
+  import newPng from '/@/assets/images/new.png';
 
   const go = useGo();
   const route = useRoute();
@@ -147,6 +149,11 @@
     });
   };
 
+  // 点击商品
+  const handleChangeGoods = (goods: Goods) => {
+    go('/main/store/goodDetail' + `?goods=${goods.id}&nav=${navId}`);
+  };
+
   watch(
     () => navActiveKey.value,
     (n) => {
@@ -176,6 +183,7 @@
       background: #fff;
       border-radius: 10px;
       max-width: 1400px;
+      min-width: 1200px;
       margin: 0 auto;
 
       .top {
@@ -249,6 +257,7 @@
             width: 25%;
             padding: 20px 20px 5px 20px;
             border: 1px solid rgb(214, 214, 214);
+            position: relative;
 
             &:hover {
               background: #eee;
@@ -256,7 +265,15 @@
             }
 
             .img {
+              position: relative;
               height: 285px;
+              .new {
+                position: absolute;
+                right: 10px;
+                top: 10px;
+                width: 50px;
+                height: 50px;
+              }
             }
 
             .title {

src/views/store/goodsList/type.ts

@@ -10,4 +10,5 @@ export interface Goods {
   id: number;
   pic: string;
   name: string;
+  isNews: string;
 }

src/views/store/home/index.vue

@@ -174,6 +174,9 @@
       padding: 30px;
       background: #fff;
       border-radius: 10px;
+      max-width: 1400px;
+      min-width: 1200px;
+      margin: 0 auto;
 
       .top {
         display: flex;
@@ -319,7 +322,7 @@
               justify-content: space-between;
               flex-wrap: wrap;
               .goods {
-                width: 30%;
+                width: 32%;
                 margin-top: 15px;
                 cursor: pointer;
                 padding: 10px;