diff --git a/src/@/styles/fonts.scss b/src/@/styles/fonts.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/App.vue b/src/App.vue index 6086575..5962640 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,13 +1,17 @@ - + diff --git a/src/pages.json b/src/pages.json index db227d4..37c6311 100644 --- a/src/pages.json +++ b/src/pages.json @@ -57,7 +57,7 @@ { "path": "pages/goods/goods", "style": { - "navigationBarTitleText": "goods" + "navigationBarTitleText": "商品详情" } } ], diff --git a/src/pages/goods/components/AddressPanel.vue b/src/pages/goods/components/AddressPanel.vue new file mode 100644 index 0000000..425d372 --- /dev/null +++ b/src/pages/goods/components/AddressPanel.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/src/pages/goods/components/ServicePanel.vue b/src/pages/goods/components/ServicePanel.vue new file mode 100644 index 0000000..d18372a --- /dev/null +++ b/src/pages/goods/components/ServicePanel.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/src/pages/goods/goods.vue b/src/pages/goods/goods.vue index 3099ec7..c5f2aee 100644 --- a/src/pages/goods/goods.vue +++ b/src/pages/goods/goods.vue @@ -1,7 +1,458 @@ - + + + diff --git a/src/services/goods.ts b/src/services/goods.ts new file mode 100644 index 0000000..6d159d3 --- /dev/null +++ b/src/services/goods.ts @@ -0,0 +1,11 @@ +import type { GoodsResult } from '@/types/goods' +import { http } from '@/utils/http' + +/** 获取商品详情 */ +export const getGoodsAPI = (id: string) => { + return http({ + url: '/goods', + method: 'GET', + data: { id }, + }) +} diff --git a/src/styles/base.scss b/src/styles/base.scss new file mode 100644 index 0000000..648d0ea --- /dev/null +++ b/src/styles/base.scss @@ -0,0 +1,32 @@ +view, +navigator, +input, +scroll-view { + box-sizing: border-box; +} + +button::after { + border: none; +} + +swiper, +scroll-view { + flex: 1; + height: 100%; + overflow: hidden; +} + +image { + width: 100%; + height: 100%; + vertical-align: middle; +} + +// 两行省略 +.ellipsis { + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss new file mode 100644 index 0000000..19f1ae2 --- /dev/null +++ b/src/styles/fonts.scss @@ -0,0 +1,147 @@ +@font-face { + font-family: 'erabbit'; + src: url('https://at.alicdn.com/t/c/font_4009193_lnbhmo3yos.woff?t=1681201348304') format('woff'), + url('https://at.alicdn.com/t/c/font_4009193_lnbhmo3yos.ttf?t=1681201348304') format('truetype'), + url('https://at.alicdn.com/t/c/font_4009193_lnbhmo3yos.svg?t=1681201348304#erabbit') + format('svg'); +} + +[class^='icon-'], +[class*=' icon-'] { + font-family: 'erabbit' !important; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-mail:before { + content: '\e644'; +} + +.icon-weixin:before { + content: '\e620'; +} + +.icon-phone:before { + content: '\e618'; +} + +.icon-camera-plus:before { + content: '\e636'; +} + +.icon-close:before { + content: '\e6e1'; +} + +.icon-help:before { + content: '\e617'; +} + +.icon-cart:before { + content: '\e6d1'; +} + +.icon-settings:before { + content: '\e6cf'; +} + +.icon-clock:before { + content: '\e609'; +} + +.icon-delete:before { + content: '\e6ce'; +} + +.icon-checked:before { + content: '\e6cc'; +} + +.icon-ring:before { + content: '\e6cd'; +} + +.icon-locate:before { + content: '\e6cb'; +} + +.icon-mark:before { + content: '\e6ca'; +} + +.icon-check:before { + content: '\e6c9'; +} + +.icon-handset:before { + content: '\e6c8'; +} + +.icon-gift:before { + content: '\e6c7'; +} + +.icon-currency:before { + content: '\e6c6'; +} + +.icon-comment:before { + content: '\e6c5'; +} + +.icon-caret:before { + content: '\e6c3'; +} + +.icon-right:before { + content: '\e6c2'; +} + +.icon-left:before { + content: '\e6c1'; +} + +.icon-down:before { + content: '\e6c0'; +} + +.icon-up:before { + content: '\e6bf'; +} + +.icon-sort:before { + content: '\e616'; +} + +.icon-clear:before { + content: '\e6be'; +} + +.icon-user:before { + content: '\e6bb'; +} + +.icon-scan:before { + content: '\e6bc'; +} + +.icon-search:before { + content: '\e632'; +} + +.icon-preview:before { + content: '\e61d'; +} + +.icon-heart:before { + content: '\e647'; +} + +.icon-filter:before { + content: '\e629'; +} + +.icon-home:before { + content: '\e8b9'; +} diff --git a/src/types/goods.d.ts b/src/types/goods.d.ts new file mode 100644 index 0000000..1fc428c --- /dev/null +++ b/src/types/goods.d.ts @@ -0,0 +1,90 @@ +import type { AddressItem } from './address' +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 = { + /** sku id */ + id: string + /** sku 库存 */ + inventory: number + /** sku 原价 */ + oldPrice: number + /** sku 图片 */ + picture: string + /** sku 当前价 */ + 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 +}