feature(uniapp商品): 商品详情

luowenfeng
1 parent 07d361f4
Showing 5 changed files with 57 additions and 11 deletions
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/app/spu/AppProductSpuController.java
yudao-module-mall/yudao-module-product-biz/src/main/java/cn/iocoder/yudao/module/product/controller/app/spu/vo/AppSpuRespVO.java
yudao-ui-app/api/product.js
yudao-ui-app/pages/index/index.vue
yudao-ui-app/pages/product/product.vue
 package cn.iocoder.yudao.module.product.controller.app.spu;
  
+import cn.hutool.core.bean.BeanUtil;
 import cn.iocoder.yudao.framework.common.pojo.CommonResult;
 import cn.iocoder.yudao.framework.common.pojo.PageResult;
-import cn.iocoder.yudao.module.product.controller.admin.spu.vo.SpuPageReqVO;
 import cn.iocoder.yudao.module.product.controller.admin.spu.vo.SpuRespVO;
 import cn.iocoder.yudao.module.product.controller.app.spu.vo.AppSpuPageReqVO;
 import cn.iocoder.yudao.module.product.controller.app.spu.vo.AppSpuPageRespVO;
+import cn.iocoder.yudao.module.product.controller.app.spu.vo.AppSpuRespVO;
 import cn.iocoder.yudao.module.product.service.spu.ProductSpuService;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
 import org.springframework.validation.annotation.Validated;
 import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
  
 import javax.annotation.Resource;
@@ -34,4 +35,11 @@ public class AppProductSpuController {
     public CommonResult<PageResult<AppSpuPageRespVO>> getSpuPage(@Valid AppSpuPageReqVO pageVO) {
         return success(spuService.getSpuPage(pageVO));
     }
+
+    @GetMapping("/")
+    @ApiOperation("获取商品 - 通过商品id")
+    public CommonResult<AppSpuRespVO> getSpu(@RequestParam("spuId") Long spuId) {
+        AppSpuRespVO appSpuRespVO = BeanUtil.toBean(spuService.getSpu(spuId), AppSpuRespVO.class);
+        return success(appSpuRespVO);
+    }
 }
+package cn.iocoder.yudao.module.product.controller.app.spu.vo;
+
+import cn.iocoder.yudao.module.product.controller.admin.spu.vo.SpuRespVO;
+import io.swagger.annotations.ApiModel;
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+import lombok.ToString;
+
+/**
+ * <p>
+ *
+ * </p>
+ *
+ * @author LuoWenFeng
+ */
+@ApiModel("App - 商品spu Response VO")
+@Data
+@EqualsAndHashCode(callSuper = true)
+public class AppSpuRespVO extends SpuRespVO {
+
+
+}
@@ -2,4 +2,7 @@
 const { http } = uni.$u
  
 // 查询商品spu列表
-export const productSpuPage = params => http.get('/product/spu/page', { params })
+export const productSpuPage = params => http.get('product/spu/page', { params })
+
+// 查询商品
+export const productSpu = params => http.get('product/spu/', { params })
@@ -169,8 +169,8 @@ export default {
     }
   },
   onLoad() {
-    //this.loadBannerData();
-    //this.loadNoticeData();
+    this.loadBannerData();
+    this.loadNoticeData();
   },
   methods: {
     loadBannerData() {
@@ -302,7 +302,7 @@ export default {
       margin: 10rpx;
       background: #ffffff;
       border-radius: 10rpx;
-      box-shadow: -1rpx 1rpx 2rpx #afd3f5, 1rpx 1rpx 0rpx #afd3f5;
+      box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
       .prod-image {
         width: 224rpx;
         height: 224rpx;
@@ -43,7 +43,7 @@
     <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].image" width="120rpx" height="120rpx"></u--image>
+          <u--image class="current-sku-img" :showLoading="true" :src="product.sku[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>
@@ -178,6 +178,8 @@
 </template>
  
 <script>
+    import { productSpu } from '../../api/product';
+
 export default {
   data() {
     return {
@@ -194,19 +196,19 @@ export default {
         sku: [
           {
             id: 0,
-            image: 'https://cdn.uviewui.com/uview/album/1.jpg',
+            picUrl: 'https://cdn.uviewui.com/uview/album/1.jpg',
             price: 13.0,
             desc: '山不在高，有仙则名。'
           },
           {
             id: 1,
-            image: 'https://cdn.uviewui.com/uview/album/2.jpg',
+            picUrl: 'https://cdn.uviewui.com/uview/album/2.jpg',
             price: 11.0,
             desc: '水不在深，有龙则灵。'
           },
           {
             id: 2,
-            image: 'https://cdn.uviewui.com/uview/album/3.jpg',
+            picUrl: 'https://cdn.uviewui.com/uview/album/3.jpg',
             price: 10.0,
             desc: '斯是陋室，惟吾德馨。'
           }
@@ -302,7 +304,18 @@ export default {
     }
   },
   methods: {
-    loadProductData() {},
+    loadProductData() {
+      let param = {}
+      param.spuId =  this.product.id
+      productSpu(param).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)
+      })
+    },
     handleSkuItemClick(index) {
       this.currentSkuIndex = index
     },