From 74a619f23d8318058749ebcda265addfbd015afc Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Mon, 18 Aug 2025 17:12:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E6=B8=B2?=
=?UTF-8?q?=E6=9F=93=E4=B8=8E=E8=BD=AE=E6=92=AD=E5=9B=BE=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages.json | 7 +
src/pages/goods/goods.vue | 429 ++++++++++++++++++++++++++++++++++++++++++++++
src/services/goods.ts | 13 ++
src/types/goods.t.ts | 111 ++++++++++++
4 files changed, 560 insertions(+)
create mode 100644 src/pages/goods/goods.vue
create mode 100644 src/services/goods.ts
create mode 100644 src/types/goods.t.ts
diff --git a/src/pages.json b/src/pages.json
index dadf4cb..d689d40 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -51,6 +51,13 @@
{
"navigationBarTitleText" : "热门推荐"
}
+ },
+ {
+ "path" : "pages/goods/goods",
+ "style" :
+ {
+ "navigationBarTitleText" : "商品详情"
+ }
}
],
"globalStyle": {
diff --git a/src/pages/goods/goods.vue b/src/pages/goods/goods.vue
new file mode 100644
index 0000000..0208227
--- /dev/null
+++ b/src/pages/goods/goods.vue
@@ -0,0 +1,429 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ currentIndex + 1 }}
+ /
+ {{ goods?.mainPictures.length }}
+
+
+
+
+
+
+ ¥
+ {{ goods?.price }}
+
+ {{ goods?.name }}
+ {{ goods?.desc }}
+
+
+
+
+
+ 选择
+ 请选择商品规格
+
+
+ 送至
+ 请选择收获地址
+
+
+ 服务
+ 无忧退 快速退款 免费包邮
+
+
+
+
+
+
+
+ 详情
+
+
+
+
+
+ {{ item.name }}
+ {{ item.value }}
+
+
+
+
+
+
+
+
+
+
+ 同类推荐
+
+
+
+
+ {{ item.name }}
+
+ ¥
+ {{ item.price }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 购物车
+
+
+
+ 加入购物车
+ 立即购买
+
+
+
+
+
+
+
diff --git a/src/services/goods.ts b/src/services/goods.ts
new file mode 100644
index 0000000..f33ec8c
--- /dev/null
+++ b/src/services/goods.ts
@@ -0,0 +1,13 @@
+import { http } from '@/utils/http'
+import type { GoodsResult } from '@/types/goods'
+/**
+ * 商品详情
+ * @param id 商品id
+ */
+export const getGoodsByIdAPI = (id: string) => {
+ return http({
+ method: 'GET',
+ url: '/goods',
+ data: { id },
+ })
+}
diff --git a/src/types/goods.t.ts b/src/types/goods.t.ts
new file mode 100644
index 0000000..ef900b6
--- /dev/null
+++ b/src/types/goods.t.ts
@@ -0,0 +1,111 @@
+import type { GoodsItem } from './global'
+
+/** 商品信息 */
+export type GoodsResult = {
+ /** id */
+ id: string
+ /** 商品名称 */
+ name: string
+ /** 商品描述 */
+ desc: string
+ /** 当前价格 */
+ price: number
+ /** 原价 */
+ oldPrice: number
+ /** 商品详情: 包含详情属性 + 详情图片 */
+ details: Details
+ /** 主图图片集合[ 主图图片链接 ] */
+ mainPictures: string[]
+ /** 同类商品[ 商品信息 ] */
+ similarProducts: GoodsItem[]
+ /** sku集合[ sku信息 ] */
+ skus: SkuItem[]
+ /** 可选规格集合备注[ 可选规格信息 ] */
+ specs: SpecItem[]
+ /** 用户地址列表[ 地址信息 ] */
+ userAddresses: AddressItem[]
+}
+
+/** 商品详情: 包含详情属性 + 详情图片 */
+export type Details = {
+ /** 商品属性集合[ 属性信息 ] */
+ properties: DetailsPropertyItem[]
+ /** 商品详情图片集合[ 图片链接 ] */
+ pictures: string[]
+}
+
+/** 属性信息 */
+export type DetailsPropertyItem = {
+ /** 属性名称 */
+ name: string
+ /** 属性值 */
+ value: string
+}
+
+/** sku信息 */
+export type SkuItem = {
+ /** id */
+ id: string
+ /** 库存 */
+ inventory: number
+ /** 原价 */
+ oldPrice: number
+ /** sku图片 */
+ picture: string
+ /** 当前价格 */
+ price: number
+ /** sku编码 */
+ skuCode: string
+ /** 规格集合[ 规格信息 ] */
+ specs: SkuSpecItem[]
+}
+
+/** 规格信息 */
+export type SkuSpecItem = {
+ /** 规格名称 */
+ name: string
+ /** 可选值名称 */
+ valueName: string
+}
+
+/** 可选规格信息 */
+export type SpecItem = {
+ /** 规格名称 */
+ name: string
+ /** 可选值集合[ 可选值信息 ] */
+ values: SpecValueItem[]
+}
+
+/** 可选值信息 */
+export type SpecValueItem = {
+ /** 是否可售 */
+ available: boolean
+ /** 可选值备注 */
+ desc: string
+ /** 可选值名称 */
+ name: string
+ /** 可选值图片链接 */
+ picture: string
+}
+
+/** 地址信息 */
+export type AddressItem = {
+ /** 收货人姓名 */
+ receiver: string
+ /** 联系方式 */
+ contact: string
+ /** 省份编码 */
+ provinceCode: string
+ /** 城市编码 */
+ cityCode: string
+ /** 区/县编码 */
+ countyCode: string
+ /** 详细地址 */
+ address: string
+ /** 默认地址，1为是，0为否 */
+ isDefault: number
+ /** 收货地址 id */
+ id: string
+ /** 省市区 */
+ fullLocation: string
+}