zenghuapei
/
cyywl_server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

uniapp：【商品详情】对接后端接口

pull/2/head
YunaiV 2022-12-26 21:29:19 +08:00
parent 92632c046c
commit d4ceceee8c
7 changed files with 49 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
yudao-ui-app/api/product.js
View File

@ -5,4 +5,4 @@ const { http } = uni.$u
export const productSpuPage = params => http.get('product/spu/page', { params }) export const productSpuPage = params => http.get('product/spu/page', { params })
// 查询商品 // 查询商品
export const productSpu = id => http.get('product/spu/get-detail?id=' + id, { }) export const getSpuDetail = id => http.get('product/spu/get-detail?id=' + id, { })

2
yudao-ui-app/components/yd-cart-product/yd-cart-product.vue
View File

@ -49,7 +49,7 @@ export default {
methods: { methods: {
handleProductItemClick(productId) { handleProductItemClick(productId) {
uni.$u.route('/pages/product/product', { uni.$u.route('/pages/product/product', {
productId: productId id: productId
}) })
}, },
handleItemCartClick(productId) { handleItemCartClick(productId) {

2
yudao-ui-app/components/yd-order-product/yd-order-product.vue
View File

@ -39,7 +39,7 @@ export default {
methods: { methods: {
handleProductItemClick(productId) { handleProductItemClick(productId) {
uni.$u.route('/pages/product/product', { uni.$u.route('/pages/product/product', {
productId: productId id: productId
}) })
} }
} }

2
yudao-ui-app/components/yd-product-box/yd-product-box.vue
View File

@ -76,7 +76,7 @@ export default {
methods: { methods: {
handleProdItemClick(productId) { handleProdItemClick(productId) {
uni.$u.route('/pages/product/product', { uni.$u.route('/pages/product/product', {
productId: productId id: productId
}) })
} }
} }

2
yudao-ui-app/components/yd-product-more/yd-product-more.vue
View File

@ -62,7 +62,7 @@ export default {
methods: { methods: {
handleProdItemClick(productId) { handleProdItemClick(productId) {
uni.$u.route('/pages/product/product', { uni.$u.route('/pages/product/product', {
productId: productId id: productId
}) })
} }
} }

109
yudao-ui-app/pages/product/product.vue
View File

@ -1,20 +1,22 @@
<template> <template>
<view class="container"> <view class="container">
<u-swiper :list="product.images" @change="e => (currentNum = e.current)" :autoplay="false" height="750rpx" radius="0" indicatorStyle="right: 20px"> <!-- 商品轮播图 -->
<u-swiper :list="spu.picUrls" @change="e => (currentNum = e.current)" :autoplay="false"
height="750rpx" radius="0" indicatorStyle="right: 20px">
<view slot="indicator" class="indicator-num"> <view slot="indicator" class="indicator-num">
<text class="indicator-num__text">{{ currentNum + 1 }}/{{ product.images.length }}</text> <text class="indicator-num__text">{{ currentNum + 1 }}/{{ spu.picUrls.length }}</text>
</view> </view>
</u-swiper> </u-swiper>
<view class="product-box"> <view class="product-box">
<!-- TODO @Sfmind：样式讨论，要不要改成类似 likeshop 的样子？第一栏：价格 + 分享；第二栏：商品名；第三栏：库存、销量、浏览量 -->
<view class="prod-info"> <view class="prod-info">
<view class="info-text"> <view class="info-text">
<u--text :lines="2" size="14px" color="#333333" :text="product.title"></u--text> <u--text :lines="2" size="14px" color="#333333" :text="spu.name"></u--text>
<u-gap height="5px"></u-gap>
<u--text :lines="3" size="12px" color="#939393" :text="product.desc"></u--text>
</view> </view>
<view class="price-and-cart"> <view class="price-and-cart">
<custom-text-price color="red" size="16" intSize="26" :price="product.price"></custom-text-price> <!-- TODO @Sfmind：custom-text-price 会报错 -->
<custom-text-price color="red" size="16" intSize="26" :price="spu.minPrice"></custom-text-price>
</view> </view>
</view> </view>
<view class="prod-favor"> <view class="prod-favor">
@ -28,8 +30,8 @@
<view class="row-right" @click="skuPopup = true"> <view class="row-right" @click="skuPopup = true">
<view class="row-content"> <view class="row-content">
<view class="sku-box"> <view class="sku-box">
<view v-if="product.sku.length > 0" class="sku-item"> <view v-if="spu.skus.length > 0" class="sku-item">
<view class="sku-desc">{{ product.sku[currentSkuIndex].desc }}</view> <view class="sku-desc">{{ spu.skus[currentSkuIndex].desc }}</view>
</view> </view>
</view> </view>
</view> </view>
@ -39,19 +41,23 @@
</view> </view>
</view> </view>
<!-- 商品SKU选择弹窗 --> <!-- 商品 SKU 选择弹窗 -->
<u-popup :show="skuPopup" :round="10" :closeable="true" :closeOnClickOverlay="false" @close="skuPopup = false"> <u-popup :show="skuPopup" :round="10" :closeable="true" :closeOnClickOverlay="false" @close="skuPopup = false">
<view class="sku-popup-slot"> <view class="sku-popup-slot">
<view class="current-sku-info"> <view class="current-sku-info">
<u--image class="current-sku-img" :showLoading="true" :src="product.sku[currentSkuIndex].picUrl" width="120rpx" height="120rpx"></u--image> <u--image class="current-sku-img" :showLoading="true" :src="spu.skus[currentSkuIndex].picUrl"
width="120rpx" height="120rpx"></u--image>
<view class="current-sku-desc"> <view class="current-sku-desc">
<view class="name">{{ product.sku[currentSkuIndex].desc }}</view> <!-- TODO @Sfmind:name 这里的选择规格值的拼接 -->
<custom-text-price color="red" size="12" intSize="18" :price="product.sku[currentSkuIndex].price"></custom-text-price> <view class="name">{{ spu.skus[currentSkuIndex].desc }}</view>
<custom-text-price color="red" size="12" intSize="18" :price="spu.skus[currentSkuIndex].price"></custom-text-price>
<view class="current-sku-stock">库存： {{ 1 }}</view> <view class="current-sku-stock">库存： {{ 1 }}</view>
</view> </view>
</view> </view>
<view class="sku-selection"> <view class="sku-selection">
<view class="sku-item" :class="{ active: currentSkuIndex === index }" v-for="(item, index) in product.sku" :key="item.id" @click="handleSkuItemClick(index)">{{ item.desc }}</view> <!-- TODO @Sfmind:name 这里是规格的具体选项 -->
<view class="sku-item" :class="{ active: currentSkuIndex === index }" v-for="(item, index) in spu.skus"
:key="item.id" @click="handleSkuItemClick(index)">{{ item.desc }}</view>
</view> </view>
<view class="sku-num-box"> <view class="sku-num-box">
<view class="text">选择数量</view> <view class="text">选择数量</view>
@ -68,22 +74,6 @@
</view> </view>
</u-popup> </u-popup>
<u-gap height="8" bgColor="#f3f3f3"></u-gap>
<view class="row-box">
<view class="row-left">配送</view>
<view class="row-right">
<view class="row-content">
<view class="delivery-box">
<view class="delivery-item" v-for="(item, index) in deliveryType" :key="item.id">
<u-icon name="checkmark-circle" color="#2979ff" size="16"></u-icon>
<text class="delivery-name">{{ item.name }}</text>
</view>
</view>
</view>
<view class="row-more"></view>
</view>
</view>
<u-gap height="8" bgColor="#f3f3f3"></u-gap> <u-gap height="8" bgColor="#f3f3f3"></u-gap>
<view class="row-box"> <view class="row-box">
<view class="row-left">促销</view> <view class="row-left">促销</view>
@ -151,6 +141,8 @@
</view> </view>
</view> </view>
<!-- TODO @Sfmind:缺个商品详情 -->
<view class="fixed-btn-box"> <view class="fixed-btn-box">
<view class="btn-group"> <view class="btn-group">
<navigator class="btn-item" url="/pages/index/index" open-type="switchTab" hover-class="none"> <navigator class="btn-item" url="/pages/index/index" open-type="switchTab" hover-class="none">
@ -161,9 +153,10 @@
<u-icon name="server-man" :size="24"></u-icon> <u-icon name="server-man" :size="24"></u-icon>
<view class="btn-text">客服</view> <view class="btn-text">客服</view>
</navigator> </navigator>
<!-- TODO @Sfmind:改成收藏 -->
<navigator class="btn-item" url="/pages/cart/cart" open-type="switchTab" hover-class="none"> <navigator class="btn-item" url="/pages/cart/cart" open-type="switchTab" hover-class="none">
<u-icon name="bag" :size="24"></u-icon> <u-icon name="star" :size="24"></u-icon>
<view class="btn-text">购物车</view> <view class="btn-text">收藏</view>
</navigator> </navigator>
<view class="btn-item-main"> <view class="btn-item-main">
<u-button type="warning" shape="circle" size="small" text="加入购物车"></u-button> <u-button type="warning" shape="circle" size="small" text="加入购物车"></u-button>
@ -178,7 +171,7 @@
</template> </template>
<script> <script>
import { productSpu } from '../../api/product'; import { getSpuDetail } from '../../api/product';
export default { export default {
data() { data() {
@ -187,12 +180,10 @@ export default {
currentNum: 0, currentNum: 0,
currentSkuIndex: 0, currentSkuIndex: 0,
skuPopup: false, skuPopup: false,
product: { spu: {
id: '', id: '',
images: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg', 'https://cdn.uviewui.com/uview/album/3.jpg'], picUrls: [],
title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。', minPrice: '13.00',
desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
price: '13.00',
sku: [ sku: [
{ {
id: 0, id: 0,
@ -214,16 +205,6 @@ export default {
} }
] ]
}, },
deliveryType: [
{
id: 0,
name: '快递配送'
},
{
id: 1,
name: '到店自提'
}
],
promotionPopup: false, promotionPopup: false,
promotionList: [ promotionList: [
{ {
@ -295,23 +276,21 @@ export default {
} }
}, },
onLoad(e) { onLoad(e) {
if (!e.productId) { if (!e.id) {
uni.$u.toast('请求参数错误') uni.$u.toast('请求参数错误')
} else { return;
this.product.id = e.productId
this.loadProductData()
// TODO 请求接口获取商品详情数据
} }
// 加载商品详情
this.spu.id = e.id
this.loadProductData()
}, },
methods: { methods: {
loadProductData() { loadProductData() {
productSpu(this.product.id).then(res => { getSpuDetail(this.spu.id).then(res => {
this.product.images = res.data.picUrls; // this.spu.desc = res.data.description.replace(/<[^>]*>/g,'');
this.product.sku = res.data.skus; // console.log(res)
this.product.desc = res.data.description.replace(/<[^>]*>/g,''); this.spu = res.data;
this.product.price = res.data.price;
this.product.title = res.data.name;
console.log(res)
}) })
}, },
handleSkuItemClick(index) { handleSkuItemClick(index) {
@ -382,18 +361,6 @@ export default {
.row-content { .row-content {
flex: 1; flex: 1;
.delivery-box {
@include flex-left;
.delivery-item {
margin-right: 20rpx;
@include flex-left;
font-size: 22rpx;
.delivery-name {
margin-left: 5rpx;
}
}
}
.prom-box { .prom-box {
@include flex-left; @include flex-left;
.prom-item { .prom-item {