save

src/stores/modules/member.ts

@@ -1,4 +1,4 @@
-// import { http } from "@/utils/request";
+import { login } from "@/api";
 import { defineStore } from "pinia";
 // import type { Profile } from "@/types";
 // import { message } from "@/components/XtxUI";
@@ -52,10 +52,9 @@ const useMemberStore = defineStore({
     async login(data: { account: string; password: string }) {
       console.log(data);
       // 发送请求
-      // const res = await http<Profile>("POST", "/login", data);
-      // console.log("/login", res.data.result);
+      const res = await login(data);
       // 存储到 Pinia 中
-      // this.profile = res.data.result;
+      this.profile = res.data.result;
       // 调用登录成功后的逻辑
       this.loginSuccess();
     },

src/types/cart.d.ts

@@ -6,16 +6,16 @@ export interface CartItem {
   attrsText: string;
   // specs: any[];
   picture: string;
-  price: string;
+  price: number;
   // nowPrice: string;
   // nowOriginalPrice: string;
   selected: boolean;
   stock: number;
   count: number;
   isEffective: boolean;
   // discount?: any;
-  isCollect: boolean;
-  postFee: number;
+  isCollect?: boolean;
+  // postFee: number;
 }
 
 // 购物车列表

src/types/index.d.ts

@@ -5,7 +5,7 @@ export * from "./goods";
 export * from "./shop";
 // ShopGoods
 export * from "./user";
-// export * from "./api/qq";
+export * from "./shop";
 export * from "./cart";
 export * from "./order";
 export * from "./request";

src/types/shop.d.ts

@@ -1,3 +1,92 @@
+// export interface ShopGoods {
+//   /*商品 SPU 编号 */
+//   id: number;
+
+//   /*商品名称 */
+//   name: string;
+
+//   /*商品简介 */
+//   introduction: string;
+
+//   /*分类编号 */
+//   categoryId: number;
+
+//   /*商品封面图 */
+//   picUrl: string;
+
+//   /*商品轮播图 */
+//   sliderPicUrls: Record<string, unknown>[];
+
+//   /*单位名 */
+//   unitName: string;
+
+//   /*规格类型 */
+//   specType: boolean;
+
+//   /*商品价格，单位使用：分 */
+//   price: number;
+
+//   /*市场价，单位使用：分 */
+//   marketPrice: number;
+
+//   /*库存 */
+//   stock: number;
+
+//   /*商品销量 */
+//   salesCount: number;
+// }
+
+export interface SKU {
+  /*商品 SKU 编号 */
+  id: number;
+
+  /* */
+  properties: {
+    /*属性的编号 */
+    propertyId: number;
+
+    /*属性的名称 */
+    propertyName: string;
+
+    /*属性值的编号 */
+    valueId: number;
+
+    /*属性值的名称 */
+    valueName: string;
+  }[];
+
+  /*销售价格，单位：分 */
+  price: number;
+
+  /*市场价，单位使用：分 */
+  marketPrice: number;
+
+  /*图片地址 */
+  picUrl: string;
+
+  /*库存 */
+  stock: number;
+
+  /*商品重量 */
+  weight: number;
+
+  // /*商品体积 */
+  volume: number;
+  specs: { name: string; valueName: string }[];
+}
+interface PropertyValue {
+  name: string;
+  picture?: string | null;
+  selected?: boolean;
+  disabled?: boolean;
+}
+export interface PropertyVo {
+  /*属性名称 */
+  propertyName: string;
+
+  /*属性值集合 */
+  valueNames: PropertyValue[];
+}
 export interface ShopGoods {
   /*商品 SPU 编号 */
   id: number;
@@ -8,14 +97,20 @@ export interface ShopGoods {
   /*商品简介 */
   introduction: string;
 
-  /*分类编号 */
+  /*商品详情 */
+  description: string;
+
+  /*商品分类编号 */
   categoryId: number;
 
   /*商品封面图 */
   picUrl: string;
 
   /*商品轮播图 */
-  sliderPicUrls: Record<string, unknown>[];
+  // sliderPicUrls: Record<string, unknown>[];
+
+  /*商品视频 */
+  videoUrl: string;
 
   /*单位名 */
   unitName: string;
@@ -34,4 +129,10 @@ export interface ShopGoods {
 
   /*商品销量 */
   salesCount: number;
+
+  /*属性列表 */
+  propertyVos: PropertyVo[];
+
+  /* */
+  skus: SKU[];
 }

src/views/Login.vue

@@ -1,3 +1,30 @@
+<script setup lang="ts">
+import useStore from "@/stores";
+import Message from "@/components/message/index";
+import { reactive } from "vue";
+
+// 获取会员 Store
+const { member } = useStore();
+
+const form = reactive({
+  account: "cdshi0088",
+  password: "123456",
+});
+// 登录按钮
+const login = () => {
+  // 简单的非空校验
+  if (form.account === "") {
+    Message.text("用户名不能为空");
+    return;
+  }
+  if (form.password === "") {
+    Message.text({ type: "warn", text: "密码不能为空" });
+    return;
+  }
+  // 调用发送登录请求
+  member.login(form);
+};
+</script>
 <template>
   <div class="flex flex-col justify-center min-h-full px-6 py-12 lg:px-8">
     <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[750px] login-form rounded-[10px]">
@@ -38,6 +65,7 @@
         <div>
           <button
             type="submit"
+            @click="login"
             class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
           >
             LOG IN

src/views/product/Index.vue

@@ -176,6 +176,7 @@
 <script lang="ts" setup>
 import { SfScrollable } from "@storefront-ui/vue";
 import { ref, onMounted } from "vue";
+import { getSpuDetail } from "@/api";
 import {
   SfButton,
   //  useId
@@ -186,22 +187,9 @@ import { goods as _product } from "../../assets/json/goods1";
 import ProductSpecs from "./ProductSpecs/index.vue";
 import { useRouter } from "vue-router";
 import useStore from "@/stores";
-import type { GoodsDetail, CartItem } from "@/types";
+import type { CartItem } from "@/types";
+import type { ShopGoods } from "@/types/shop";
 import Message from "@/components/message/index";
-// const min = ref(1);
-// const max = ref(10);
-// const {
-//   // count,
-//   // inc, dec, set
-// } = useCounter(1, {
-//   min: min.value,
-//   max: max.value,
-// });
-// function handleOnChange(event: Event) {
-//   const currentValue = (event.target as HTMLInputElement)?.value;
-//   const nextValue = parseFloat(currentValue);
-//   set(clamp(nextValue, min.value, max.value));
-// }
 
 const router = useRouter();
 const handleClick = () => {
@@ -294,12 +282,23 @@ const assignRef = (el: Element | ComponentPublicInstance | null, index: number)
   }
 };
 
-const goods = ref<GoodsDetail>();
+const goods = ref<ShopGoods>();
+
+import { useRoute } from "vue-router";
+// 从路由中获取商品 id
+const { params } = useRoute();
+const id = params.id;
+
 onMounted(async () => {
-  // console.log(JSON.stringify(_product));
+  const res = await getSpuDetail({ id });
+  const { propertyVos, ...data } = res.data;
 
-  // const res = await http<GoodsDetail>("GET", "/goods", { id: id });
-  goods.value = _product;
+  const _goods = {
+    ...data,
+    propertyVos: propertyVos.map((item: any) => ({ ...item, valueNames: item.valueNames.map((item: string) => ({ name: item })) })),
+  };
+  console.log("goods", _goods);
+  goods.value = _goods;
 });
 
 // 获取 XtxSku 组件选中的商品信息
@@ -314,9 +313,9 @@ const changeSku = (value: any) => {
   // console.log("当前选择的SKU为信息为", value);
   if (goods.value && value.skuId) {
     // 根据选中规格，更新商品库存，销售价格，原始价格
-    goods.value.inventory = value.inventory;
+    goods.value.stock = value.inventory;
     goods.value.price = value.price;
-    goods.value.count = value.count;
+    // goods.value.count = value.count;
     // goods.value.oldPrice = value.oldPrice;
   }
 };
@@ -332,19 +331,19 @@ const addCart = (count: number) => {
   const cartItem: CartItem = {
     // 🚨🚨 注意数据收集字段名很多坑，小心操作
     // 第一部分：商品详情中有的
-    id: goods.value.id, // 商品id
+    id: String(goods.value.id), // 商品id
     name: goods.value.name, // 商品名称
-    picture: goods.value.mainPictures[0], // 图片
+    picture: goods.value.picUrl, // 图片
     price: goods.value.price, // 旧价格
     // nowPrice: goods.value.price, // 新价格
-    stock: goods.value.inventory, // 库存
-    // 第二部分：商品详情中没有的，自己通过响应式数据收集
+    stock: goods.value.stock, // 库存
+    // // 第二部分：商品详情中没有的，自己通过响应式数据收集
     count: count, // 商品数量
     skuId: skuId.value, // skuId
-    attrsText: attrsText.value, // 商品规格文本
-    // 第三部分：设置默认值即可
+    // attrsText: attrsText.value, // 商品规格文本
+    // // 第三部分：设置默认值即可
     selected: true, // 默认商品选中
-    isEffective: true, // 默认商品有效
+    // isEffective: true, // 默认商品有效
   } as CartItem;
   console.log("😭 cartItem 数据终于准备完毕了", cartItem);
   // 调用加入购物车接口