feat:开发商品详情

pages/goods/detail/_id.vue

@@ -12,7 +12,9 @@
       </p>
     </nav>
     <main class="main flex">
-      <aside class="main__preview"></aside>
+      <aside class="main__preview">
+        <img class="main__preview" src="~/static/images/goods/more.png" alt="商品大图" />
+      </aside>
       <article class="main__details">
         <p class="main__details-title">
           <span class="main__details-title--label">新品</span>
@@ -32,24 +34,47 @@
             >
             <img
               class="msg-icon"
-              src="~/assets/images/goods/more.png"
+              src="~/static/images/goods/more.png"
               alt="服务"
             />
           </div>
         </div>
+        <div class="main__details-option">
+          <div class="main__details-option--line flex flex-middle">
+            <span class="line-txt">规格</span>
+            <div class="line-btns">
+              <UiButton
+                type="yellow_line"
+                v-for="(item, index) in 11"
+                :key="index"
+                >123</UiButton
+              >
+            </div>
+          </div>
+        </div>
+        <div class="main__details-pay">
+          <UiButton type="yellow_line">加入购物车</UiButton>
+          <UiButton type="yellow_panel">立即购买</UiButton>
+        </div>
       </article>
     </main>
   </div>
 </template>
 <script>
 import UiMoney from "@/components/UiMoney.vue";
+import UiButton from "@/components/UiButton.vue";
+import { ApiGetGoodsDetail, ApiGetGoodsSkus } from "@/plugins/api/goods";
 export default {
-  componetns: { UiMoney },
+  componetns: { UiMoney, UiButton },
   data() {
     return {};
   },
-  created() {
+  async created() {
-    console.log(this.$route.params.id);
+    let id = this.$route.params.id;
+    let res1 = await ApiGetGoodsDetail({ id });
+    let res2 = await ApiGetGoodsSkus({ productId: id });
+    console.log(`res1`, res1.result);
+    console.log(`res2`, res2.result);
   },
 };
 </script>
@@ -126,6 +151,48 @@ export default {
         padding-top: 16px;
       }
     }
+
+    &-option {
+      padding-top: 24px;
+
+      &--line {
+        margin-bottom: 6px;
+        .line-txt {
+          font-size: 14px;
+          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
+          font-weight: 400;
+          color: #9e9e9e;
+          margin-left: 20px;
+          margin-right: 33px;
+        }
+        .line-btns {
+          width: 600px;
+          /deep/.ui-button__yellow_line {
+            background: #fff;
+            margin-right: 14px;
+            color: #666;
+            margin-bottom: 6px;
+            border-color: #ccc;
+          }
+        }
+      }
+    }
+
+    &-pay {
+      margin-top: 40px;
+      button {
+        width: 144px;
+        height: 46px;
+        margin-right: 30px;
+        font-size: 18px;
+        &:nth-child(1) {
+          background: #fff;
+        }
+        &:nth-child(2) {
+          border: none;
+        }
+      }
+    }
   }
 }
 </style>

pages/goods/list/index.vue

@@ -115,9 +115,9 @@ export default {
         vm.$message.error(res.error.message);
         return false;
       }
-      vm.total = res.result.data.total;
-      vm.listData = res.result.data.records;
       console.log(`goodListRes`, res.result);
+      vm.total = res.result.total;
+      vm.listData = res.result.records;
     },
     handleCurrentChange(val) {
       let vm = this;

pages/goods/list/module/SortItem.vue

@@ -4,22 +4,22 @@
     <div class="sort-img-box">
       <img
         v-if="sortType === 0 || sortType === 1"
-        src="~/assets/images/goods/sort-t1.png"
+        src="~/static/images/goods/sort-t1.png"
         alt="sort"
       />
       <img
         v-if="sortType === 2"
-        src="~/assets/images/goods/sort-t2.png"
+        src="~/static/images/goods/sort-t2.png"
         alt="sort"
       />
       <img
         v-if="sortType === 0 || sortType === 2"
-        src="~/assets/images/goods/sort-b1.png"
+        src="~/static/images/goods/sort-b1.png"
         alt="sort"
       />
       <img
         v-if="sortType === 1"
-        src="~/assets/images/goods/sort-b2.png"
+        src="~/static/images/goods/sort-b2.png"
         alt="sort"
       />
     </div>

plugins/api/goods.js

@@ -34,7 +34,7 @@ export const ApiGetGoodsDetail = (params) =>
  * @param {*} productId 
  */
 export const ApiGetGoodsSkus = (params) => 
-ToAsyncAwait(axios.get(`${BASE_URL}/app/product/sku`,params));
+ToAsyncAwait(axios.get(`${BASE_URL}/app/product/sku`,{params}));
 
 /**
  * 获取首页分类导航