Merge branch 'wl_dev' of http://1.94.207.143:3000/chongqing/store-project into lyz_dev

src/components/titleFood.vue

@@ -1,25 +1,21 @@
 <!-- 标题 -->
 <template>
-    <div :style="{ fontSize: fontSize,}" class="title">
-      <slot></slot>
-    </div>
-  </template>
-  <script>
-  export default {
-    name: 'Title',
-    props: {
-      fontSize: {
-        type: String,
-        default: '24px',  // 默认字体大小
-      }
-    }
-  }
-  </script>
-  <style scoped>
- .title{
+  <div :style="{ fontSize: fontSize }" class="title">
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+  const props = defineProps({
+    fontSize: {
+      type: String,
+      default: '24px', // 默认字体大小
+    },
+  })
+</script>
+<style scoped>
+  .title {
     height: 50px;
     line-height: 50px;
     font-weight: 600;
- }
-  </style>
-  
+  }
+</style>

src/views/goods/components/BaseButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <button  :class="['btn', btnClass]" @click="handleClick">
+    {{ text }}
+  </button>
+</template>
+<script setup>
+  const props = defineProps({
+    btnClass: {
+      type: String,
+      required: true,
+    },
+    onClick: {
+      type: Function,
+      required: true,
+    },
+    text: {
+      type: String,
+      required: true,
+    },
+  })
+  const handleClick = () => {
+    props.onClick();
+  };
+</script>
+<style scoped lang="scss">
+  .btn {
+    padding: 10px 24px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.2s;
+    white-space: nowrap;
+    cursor: pointer;
+    color: white;
+  }
+
+  .btn-orange {
+    background-color: #fb923c;
+  }
+
+  .btn-yellow {
+    background-color: #facc15;
+  }
+
+  .btn-orange:hover {
+    background-color: #f97316;
+  }
+
+  .btn-yellow:hover {
+    background-color: #fbbf24;
+  }
+</style>

src/views/goods/components/goods-drawer.vue

@@ -6,13 +6,7 @@
       </template>
 
       <template #default>
-        <el-form
-          :model="formData"
-          :rules="rules"
-          ref="formRef"
-          label-width="150px"
-          class="upload-wrapper"
-        >
+        <el-form  :model="formData" :rules="rules" ref="formRef" label-width="150px" class="upload-wrapper">
           <!-- 第一排 -->
           <div class="upload-section">
             <div class="upload_img">
@@ -45,7 +39,7 @@
               <el-form-item prop="productName">
                 <el-input
                   type="text"
-                  v-model="formData.productName"
+                  v-model="table.name"
                   autocomplete="off"
                   placeholder="Please enter the product name"
                 />
@@ -74,7 +68,7 @@
               <el-form-item prop="price">
                 <el-input
                   type="text"
-                  v-model="formData.price"
+                  v-model="table.price"
                   autocomplete="off"
                   placeholder="Please enter the commodity price"
                 />
@@ -85,7 +79,7 @@
               <el-form-item prop="keywords">
                 <el-input
                   type="text"
-                  v-model="formData.keywords"
+                  v-model="table.sales"
                   autocomplete="off"
                   placeholder="Please enter keywords"
                 />
@@ -118,17 +112,8 @@
 
       <template #footer>
         <div style="display: flex; justify-content: space-between">
-          <el-button style="width: 220px; height: 44px" type="primary" @click="cancelClick" plain>
-            Cancel
-          </el-button>
-          <el-button
-            style="width: 408px; height: 44px; background: #f67f20; color: #fff"
-            type="primary"
-            @click="handleSubmit"
-            plain
-          >
-            Save
-          </el-button>
+          <el-button style="width: 220px; height: 44px" type="primary" @click="cancelClick" plain> Cancel</el-button>
+          <el-button style="width: 408px; height: 44px; background: #f67f20; color: #fff" type="primary" @click="handleSubmit" plain >Save</el-button>
         </div>
       </template>
     </el-drawer>
@@ -139,11 +124,19 @@
 <script setup>
   import { ref,reactive } from 'vue'
   import showRadio from "./show-radio.vue"
+  const props =defineProps({
+    table:{
+      type:Object,
+      required:true
+    },
+    type:{
+      type:Boolean,
+      required:true
+    }
+  })
   const show = defineModel('show')
-  const isShow=ref(false)
-  const cancelClick = () => {
-    show.value = false
-  }
+  const isShow=ref(false) //复选框
+  
   const formData = ref({
     productName: '',
     category: '',
@@ -184,20 +177,15 @@
   const handleChange = (file, fileList) => {
     console.log('File changed:', file)
   }
-
+  // 关闭弹窗
+  const cancelClick = () => {
+    show.value = false
+  }
+  // 确定
   const handleSubmit = () => {
-    // const formRef = ref('')
-    // formRef.value.validate((valid) => {
-    //   if (valid) {
-    //     console.log('Form Submitted:', formData.value)
-    //   } else {
-    //     console.log('Form validation failed')
-    //   }
-    // })
     console.log('Form Submitted:', formData.value)
-
   }
-
+  //  单选框选择事件
   const radioShow=(end)=>{
     isShow.value=true
     if(end === '2'){
@@ -206,12 +194,16 @@
       isShow.value=false
     }
   }
+  console.log(props,'propsprops');
 </script>
 
 <style lang="scss" scoped>
   :deep(.el-drawer__header) {
     margin-bottom: 0px !important;
   }
+  :deep(.el-drawer__body::-webkit-scrollbar ){
+    display: none;
+  }
   .food_title {
     height: 56px;
     font-size: 24px;

src/views/goods/components/show-radio.vue

@@ -1,7 +1,223 @@
 <template>
-  <div>111111111111111111111</div>
+  <div class="multi-center">
+    <!-- 1 -->
+    <div class="container">
+      <Title fontSize="16px">Multi specification parameters</Title>
+      <el-divider />
+      <div class="button-container">
+        <BaseButton btnClass="btn-orange" :onClick="handleAddSpec" text="Add new specifications" />
+        <BaseButton btnClass="btn-yellow" :onClick="handleGenerate" text="Generate immediately" />
+      </div>
+      <el-form :model="formData" ref="formRef" class="spec-form">
+        <div v-for="(spec, index) in specifications" :key="index" class="specification-row">
+          <div class="specification-item">
+            <div class="specification-label">{{ `Specifications ${index + 1}` }}</div>
+            <el-form-item>
+              <el-input
+                v-model="spec.name"
+                placeholder="Enter specification name"
+                required
+              ></el-input>
+            </el-form-item>
+          </div>
+          <div class="specification-item">
+            <div class="specification-label">{{ `Specification value ${index + 1}` }}</div>
+            <el-form-item>
+              <el-input v-model="spec.value" placeholder="Enter value" required></el-input>
+            </el-form-item>
+          </div>
+          <div class="specification-item" style="margin-top: 30px">
+            <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn"> Save</el-button>
+            <el-button style="background: #fff; color: #fb923c" @click="cancelSpec(index)" class="cancel-btn">Cancel</el-button>
+          </div>
+        </div>
+      </el-form>
+    </div>
+
+    <!-- 2 -->
+    <div class="container">
+      <Title fontSize="16px">Multi specification parameters</Title>
+      <el-divider />
+      <div class="button-container">
+        <BaseButton btnClass="btn-orange" :onClick="handleMemory" text="Add new specifications" />
+        <BaseButton btnClass="btn-yellow" :onClick="MemoryImmediately" text="Generate immediately" />
+      </div>
+        <div class="h-[80px]" v-for="(spec,index) in memoryList" :key="index">
+          <div class="specification-label">{{ `Memory ${index + 1}` }}</div>
+          <div class="flex">
+            <div class="flex w-[400px] 	justify-between">
+              <el-input style="width: 60px;" v-model="spec.name" ></el-input>
+              <el-input style="width: 60px;" v-model="spec.value"></el-input>
+              <el-input style="width: 60px;" v-model="spec.weight"></el-input>
+              <el-input style="width: 180px" v-model="spec.center" placeholder="Please enter attributes" ></el-input>
+            </div>
+            <div style="margin: 2px 0px 0px 10px">
+              <el-button style="background: #fb923c; color: #fff" @click="memoryAdd(spec)" class="save-btn">Add</el-button>
+            </div>
+          </div>
+        </div>
+    </div>
+
+    <!-- 3 -->
+    <div class="container">
+      <Title fontSize="16px">Multi specification parameters</Title>
+      <el-divider />
+      <div class="button-container">
+        <BaseButton btnClass="btn-orange" :onClick="xxxxx" text="Add new specifications" />
+        <BaseButton btnClass="btn-yellow" :onClick="ccccc" text="Generate immediately" />
+      </div>
+        <div class="specificationAdd h-[80px]">
+          <div class="specification-label">Memory</div>
+          <div class="flex">
+            <div class="flex w-[340px] 	justify-between">
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 180px;" placeholder="Please enter attributes" ></el-input>
+            </div>
+            <div style="margin: 2px 0px 0px 10px">
+              <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn">Add</el-button>
+            </div>
+          </div>
+        </div>
+        <el-form  class="spec-form">
+        <div class="specification-row mt-[5px]">
+          <div class="specification-item">
+            <div class="specification-label">Specifications</div>
+            <el-form-item>
+              <el-input  placeholder="Enter specification name" required></el-input>
+            </el-form-item>
+          </div>
+          <div class="specification-item">
+            <div class="specification-label">Specifications</div>
+            <el-form-item>
+              <el-input  placeholder="Enter value" required></el-input>
+            </el-form-item>
+          </div>
+          <div class="specification-item" style="margin-top: 30px">
+            <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn"> Save</el-button>
+            <el-button  style="background: #fff; color: #fb923c" @click="cancelSpec(index)" class="cancel-btn"> Cancel</el-button>
+          </div>
+        </div>
+        </el-form>
+    </div>
+
+     <!-- 4 -->
+     <div class="container mb-[25px]">
+      <Title fontSize="16px">Multi specification parameters</Title>
+      <el-divider />
+      <div class="button-container">
+        <BaseButton btnClass="btn-orange" :onClick="xxx" text="Add new specifications" />
+        <BaseButton btnClass="btn-yellow" :onClick="ccc" text="Generate immediately" />
+      </div>
+        <div class="specificationAdd h-[80px]">
+          <div class="specification-label">Memory</div>
+          <div class="flex">
+            <div class="flex w-[400px] 	justify-between">
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 60px;" ></el-input>
+              <el-input style="width: 180px;" placeholder="Please enter attributes" ></el-input>
+            </div>
+            <div style="margin: 2px 0px 0px 10px">
+              <el-button style="background: #fb923c; color: #fff" @click="saveSpec(index)" class="save-btn">Add</el-button>
+            </div>
+          </div>
+        </div>
+    </div>
+
+    <el-table :data="tableData" :cell-style="{ textAlign: 'center' }"
+    :header-cell-style="{ textAlign: 'center' }">
+        <el-table-column prop="memory" label="memory" width="130" />
+        <el-table-column prop="color" label="color" width="130" />
+        <el-table-column prop="price" label="price" width="300" >
+            <template #default="scope">
+              <el-input
+              v-model="scope.price"
+              placeholder="Please enter the selling price"
+              :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
+              :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column label="Operation">
+          <template #default="scope">
+             <el-button  @click="deleteVariant(scope.row)" type="text" size="small">Delete</el-button>
+          </template>
+        </el-table-column>
+     </el-table>
+
+ </div>
 </template>
 
-<script setup></script>
+<script setup>
+  import Title from '@/components/titleFood.vue'
+  import BaseButton from './BaseButton.vue'
+  import { ref } from 'vue'
+  const formData = ref({})
+  const specifications = ref([ { name: '', value: '' }])
+  const memoryList = ref([ { name: '', value: '',weight:'', center:"",}])
+  const tableData =ref([
+    { memory: '8GB', color: 'Black', price: '' },
+    { memory: '16GB', color: 'White', price: '' },
+  ])
+  // specification 新增
+  const handleAddSpec = () => {
+    console.log('新增')
+    specifications.value.push({ name: '', value: '' })
+  }
+  const handleGenerate = () => {
+    console.log('specifications生成完成')
+  }
+  const saveSpec = (index) => {
+    console.log('保存', index)
+  }
+  const cancelSpec = (index) => {
+    console.log('取消', index)
+    specifications.value.splice(index, 1)
+  }
+  // Memory 添加规格
+ const handleMemory=()=>{
+  console.log("memoryList新增");
+  memoryList.value.push({ name: '', value: '',weight:'', center:"",})
+ }
+ const MemoryImmediately=()=>{
+  console.log('memoryList立即生产',memoryList.value);
+ }
+ const memoryAdd=(spec)=>{
+  console.log("memoryList添加完成",spec);
+ }
+
+//  表格删除
+const deleteVariant=(index)=>{
+  tableData.value.splice(index, 1);
+}
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  :deep(.el-divider--horizontal) {
+    margin: 0 0 12px 0;
+  }
+  .container {
+    width: 100%;
+  }
+  .scroll::-webkit-scrollbar {
+    display: none;
+  }
+  .button-container {
+    display: flex;
+    gap: 16px;
+  }
+  .specification-row {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+  .specification-label {
+    margin: 12px 0px;
+  }
+  .el-table {
+  --el-table-header-bg-color: #f8f9fa;
+  --el-table-border-color: #e5e7eb;
+  --el-table-header-text-color: #4b5563;
+}
+</style>

src/views/goods/index.vue

@@ -15,9 +15,11 @@
         <el-option label="Offline" value="offline" />
       </el-select>
       <el-button type="danger" class="btn-reset" @click="Reset_Btn">Reset</el-button>
-      <el-button type="danger" class="btn-new"   @click="show = true">New Product</el-button>
+      <el-button type="danger" class="btn-new"   @click="Add_Btn">New Product</el-button>
     </div>
-    <el-table :data="productList" style="width: 100%">
+    <!-- table表格 -->
+    <el-table :data="tableList" style="width: 100%" :cell-style="{ textAlign: 'center' }"
+    :header-cell-style="{ textAlign: 'center' }" >
       <el-table-column prop="id" label="Id" />
       <el-table-column label="Product Image">
         <template #default="scope">
@@ -39,25 +41,43 @@
       <el-table-column prop="time" label="Time" />
       <el-table-column label="Operation">
         <template #default="scope">
-          <el-button type="primary" text>Edit</el-button>
-          <el-button type="danger" text>Delete</el-button>
+           <el-button type="primary" text @click="editBtn(scope)">Edit</el-button>
+          <el-button type="danger" @click="deleteBtn" text>Delete</el-button>
         </template>
       </el-table-column>
     </el-table>
-    <GoodsDrawer v-model:show="show"></GoodsDrawer>
+    <!-- Pagination -->
+    <div class="fixed bottom-5 right-5 flex items-center justify-between">
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50]"
+        :total="total" layout="prev, pager, next, sizes" />
+    </div>
+    <GoodsDrawer v-model:show="show" :table="currentRow" :type="isSwitch" ></GoodsDrawer>
   </div>
 </template>
 <script setup>
   import { ref } from 'vue'
-import GoodsDrawer from './components/goods-drawer.vue'
+  import GoodsDrawer from './components/goods-drawer.vue'
+
   const show = ref(false)
   const searchText = ref('')
-  const selectedCategory = ref('')
-  const selectedStatus = ref('')
+  const selectedCategory = ref('')   // 下拉框数据
+  const selectedStatus = ref('')    // 下拉框数据
+  const currentRow=ref([])     
+  const isSwitch = ref('add');      // 默认是新增操作
+  const currentPage = ref(1);
+  const pageSize = ref(10);
+  const total = ref(600);
+
+  // 重置
   const Reset_Btn=()=>{
    console.log('重置');
   }
-  const productList = ref([
+  // 新增
+  const Add_Btn=()=>{
+    isSwitch.value = 'add'; 
+    show.value = true
+  }
+  const tableList = ref([
     {
       id: '00010',
       image: 'https://ai-public.mastergo.com/ai/img_res/a59d5d07e117eb6d961215c66250fdd2.jpg',
@@ -95,6 +115,18 @@ import GoodsDrawer from './components/goods-drawer.vue'
       time: '2024-12-15 15:22:11',
     },
   ])
+  const editBtn=(scope)=>{
+    // console.log('编辑',scope.row);
+    currentRow.value = scope.row
+    isSwitch.value = 'edit'; // 设置为编辑模式
+    show.value = true
+  }
+  const deleteBtn=()=>{
+    console.log('删除');
+  }
+  const getList = () => {
+  // 请求分页数据的逻辑
+};
 </script>
 <style scoped lang="scss">
   .container {
@@ -145,13 +177,9 @@ import GoodsDrawer from './components/goods-drawer.vue'
     object-fit: cover;
   }
 
-  :deep(.el-table) {
-    --el-table-border-color: #f0f0f0;
-    --el-table-header-bg-color: #fafafa;
-    --el-table-row-hover-bg-color: #f5f5f5;
-  }
-
-  :deep(.el-table .el-table__row:nth-child(even)) {
-    background-color: #fafafa;
-  }
+  .el-table {
+  --el-table-header-bg-color: #f8f9fa;
+  --el-table-border-color: #e5e7eb;
+  --el-table-header-text-color: #4b5563;
+}
 </style>

src/views/layout/index.vue

@@ -23,7 +23,7 @@ import Header from './components/Header.vue'
 import menuCooker1 from '/imgs/menu-cooker1.png'
 import menuCooker2 from '/imgs/menu-cooker2.png'
 import menuCooker3 from '/imgs/menu-cooker3.png'
-// import menuCooker3 from '/imgs/menu-cooker3.png'
+import menuCooker4 from '/imgs/menu-cooker4.png'
 
 import { useStoreI18n } from '@/hook/i18n'
 const { t, locale } = useI18n()
@@ -44,7 +44,7 @@ const menus = ref([
   },
   {
     name: $t('sidebar.goods'),
-    img: menuCooker3,
+    img: menuCooker4,
     key: 4,
     path: '/goods',
   },