From bd203f2f22197dea56fb9ef6546b19f937f46a30 Mon Sep 17 00:00:00 2001
From: zc <425734130@qq.com>
Date: Thu, 28 Aug 2025 23:04:32 +0800
Subject: [PATCH] feat: cache

---
 .../components/info-table.vue                 |  8 +-
 .../components/instruction-info.vue           | 19 +++++
 .../components/​​shopping-cart​.vue              | 73 +++++++++++++++++++
 src/views/commodity-detail/index.vue          | 63 +++++++++++++++-
 4 files changed, 156 insertions(+), 7 deletions(-)
 create mode 100644 src/views/commodity-detail/components/instruction-info.vue
 create mode 100644 src/views/commodity-detail/components/​​shopping-cart​.vue

diff --git a/src/views/commodity-detail/components/info-table.vue b/src/views/commodity-detail/components/info-table.vue
index 36fb06c..675112b 100644
--- a/src/views/commodity-detail/components/info-table.vue
+++ b/src/views/commodity-detail/components/info-table.vue
@@ -1,8 +1,8 @@
 <template>
   <div id="info-table">
     <ul class="rounded-[.08rem]" style="border: 1px solid #ddd;">
-      <li class="h-8 leading-8 pl-2" style="border-bottom: 1px solid #ddd;"><span class="">规格</span><b>约6-00g</b></li>
-      <li><span>规格</span><b>约6-00g</b></li>
+      <li class="h-8 flex items-center" style="border-bottom: 1px solid #ddd;"><span class="block h-full w-16 pl-2 bg-[#f1f1f1] leading-8 color-[#666]">规格</span><b class="pl-2">约6-00g</b></li>
+      <li class="h-8 flex items-center" style="border-bottom: 1px solid #ddd;"><span class="block h-full w-16 pl-2 bg-[#f1f1f1] leading-8 color-[#666]">规格</span><b class="pl-2">约6-00g</b></li>
     </ul>
   </div>
 </template>
@@ -13,6 +13,8 @@
 
 <style lang="scss" scoped>
 #info-table{
-  
+  ul li:last-child{
+    border-bottom: none !important;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/commodity-detail/components/instruction-info.vue b/src/views/commodity-detail/components/instruction-info.vue
new file mode 100644
index 0000000..40877d1
--- /dev/null
+++ b/src/views/commodity-detail/components/instruction-info.vue
@@ -0,0 +1,19 @@
+<template>
+  <div id="instructions-info" class="bg-[#f2f2f2] rounded-[.08rem] p-3">
+    <h4 class="mb-3 text-sm color-[#333]">价格说明</h4>
+    <p class="mb-3 leading-4 text-[.11rem]">是否水电费水电费水电费是都发啥打法是打发四大四大盛世嫡妃水电费是的手动阀是的</p>
+    <p class="mb-3 leading-4 text-[.11rem]">是否水电费水电费水电费是都发啥打法是打发四大四大盛世嫡妃水电费是的手动阀是的水电费水电费水电费手动阀四大分三大发啥打法是都发啥打法</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+ #instructions-info{
+  p:last-child{
+    margin-bottom: 0;
+  }
+ }
+</style>
\ No newline at end of file
diff --git a/src/views/commodity-detail/components/​​shopping-cart​.vue b/src/views/commodity-detail/components/​​shopping-cart​.vue
new file mode 100644
index 0000000..c554f83
--- /dev/null
+++ b/src/views/commodity-detail/components/​​shopping-cart​.vue
@@ -0,0 +1,73 @@
+<template>
+  <div id="shopping-cart" class="p-2 relative">
+    <div class="mb-8">
+      <div class="cart-wrap">
+        <p class="flex justify-between"><span class="max-w-12 mr-1">张四</span> <b class="font- flex-1">我的详细地址是什么东西的地方的好的么</b></p>
+      </div>
+      <div class="cart-wrap mt-2">
+        <div class="flex">
+          <img class="w-16 h-16 mr-4" style="border-radius: .04rem" src="" alt="">
+          <p>¥<span>29.9</span></p>
+        </div>
+        <div class="cart-cagetory-wrap">
+          <h4>更多系列</h4>
+          <div class="cagetory">
+            <p>手表系列</p>
+            <p>手表系列水</p>
+            <p>手表</p>
+            <p>手表123</p>
+            <p>手表12</p>
+          </div>
+          <h4>颜色</h4>
+          <div class="cagetory">
+            <p>手表系列</p>
+            <p>手表系列水</p>
+            <p>手表</p>
+            <p>手表123</p>
+            <p>手表12</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="absolute w-full h-8 left-0 bottom-0 px-2 box-border">
+      <button class="block w-full h-full border-none bg-red color-white rounded-[.04rem]">确定</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="scss" scoped>
+#shopping-cart{
+  .cart-wrap{
+    padding: .12rem .08rem;
+    background: #fff;
+    border-radius: .04rem;
+    overflow: hidden;
+  }
+  .cart-cagetory-wrap{
+    h4{
+      font-weight: bold;
+      margin-top: .16rem;
+      margin-bottom: .12rem;
+    }
+    .cagetory {
+      display: flex;
+      flex-wrap: wrap;
+      & >p{
+       flex-shrink: 0;
+        height: .28rem;
+        line-height: .28rem;
+        background: #f2f2f2;
+        padding: 0 .2rem;
+        color: #666;
+        border-radius: .04rem;
+        margin-right: .08rem;
+        margin-bottom: .08rem;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/commodity-detail/index.vue b/src/views/commodity-detail/index.vue
index 084d506..1c0d7f5 100644
--- a/src/views/commodity-detail/index.vue
+++ b/src/views/commodity-detail/index.vue
@@ -20,15 +20,48 @@
       </div>
       <div class="wrap">
         <h3 class="wrap-title"><b>商品详情</b><span>查看全部信息</span></h3>
-        <info-table />
+        <info-table class="mt-3" />
+        <div class="imgs">
+          <img class="w-full h-40" src="" alt="" />
+          <img class="w-full h-40" src="" alt="" />
+        </div>
+      </div>
+      <div class="wrap">
+        <h3 class="wrap-title"><b>质量达标</b></h3>
+        <h4 class="mt-2 color-[#666]">客服的满意，是我们最大的信任</h4>
+        <instruction-info class="mt3" />
       </div>
     </main>
+    <shopping-cart class="mb-10"></shopping-cart>
+    <footer class="flex fixed bottom-0 left-0 w-full h-10 justify-between items-center pr-2 box-border bg-white">
+      <div class="flex items-center w-[1.6rem] justify-around">
+        <p class="icon-wrap">
+          <img src="" alt="">
+          <span>首页</span>
+        </p>
+        <p class="icon-wrap">
+          <img src="" alt="">
+          <span>客服</span>
+        </p>
+        <p class="icon-wrap">
+          <img src="" alt="">
+          <span>购物车</span>
+        </p>
+      </div>
+      <div class="flex-1 button-wrap">
+
+        <button class="bg-orange">加入购物车</button>
+        <button class="bg-red color-white">立即购买</button>
+      </div>
+    </footer>
   </div>
 </template>
 
 <script lang="ts" setup>
 import reviewSingle from './components/review-single.vue'
 import infoTable from './components/info-table.vue'
+import instructionInfo from './components/instruction-info.vue'
+import shoppingCart from './components/​​shopping-cart​.vue'
 </script>
 
 <style scope lang="scss">
@@ -72,10 +105,32 @@ import infoTable from './components/info-table.vue'
       }
     }
   }
-  .review-info{
-    h3{
+  footer{
+    .icon-wrap{
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      img{
+        width: .1rem;
+        height: .1rem;
+      }
       span{
-
+        font-size: .11rem;
+      }
+    }
+    .button-wrap{
+      display: flex;
+      align-items: center;
+      border-radius: .04rem;
+      overflow: hidden;
+      height: .32rem;
+      button{
+        display: block;
+        height: 100% !important;
+        width: 50%;
+        font-size: .14rem;
+        border: none;
+        height: .28rem;
       }
     }
   }