p38192567
/
ruoyi-vue-pro1
mirror of https://gitee.com/zhijiantianya/ruoyi-vue-pro.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
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 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: {
handleProductItemClick(productId) {
uni.$u.route('/pages/product/product', {
productId: productId
id: productId
})
},
handleItemCartClick(productId) {

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

@ -39,7 +39,7 @@ export default {
methods: {
handleProductItemClick(productId) {
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: {
handleProdItemClick(productId) {
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: {
handleProdItemClick(productId) {
uni.$u.route('/pages/product/product', {
productId: productId
id: productId
})
}
}

12
yudao-ui-app/pages.json
View File

@ -62,12 +62,12 @@
"navigationBarTitleText": "账户设置"
}
},
{
"path": "pages/product/product",
"style": {
"navigationBarTitleText": "商品详情"
}
},
{
"path": "pages/product/product",
"style": {
"navigationBarTitleText": "商品详情"
}
},
{
"path": "pages/checkout/checkout",
"style": {

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

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