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

YunaiV
1 parent 92632c04
Showing 7 changed files with 49 additions and 82 deletions
yudao-ui-app/api/product.js
yudao-ui-app/components/yd-cart-product/yd-cart-product.vue
yudao-ui-app/components/yd-order-product/yd-order-product.vue
yudao-ui-app/components/yd-product-box/yd-product-box.vue
yudao-ui-app/components/yd-product-more/yd-product-more.vue
yudao-ui-app/pages.json
yudao-ui-app/pages/product/product.vue
@@ -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, { })
@@ -49,7 +49,7 @@ export default {
   methods: {
     handleProductItemClick(productId) {
       uni.$u.route('/pages/product/product', {
-        productId: productId
+        id: productId
       })
     },
     handleItemCartClick(productId) {
@@ -39,7 +39,7 @@ export default {
   methods: {
     handleProductItemClick(productId) {
       uni.$u.route('/pages/product/product', {
-        productId: productId
+        id: productId
       })
     }
   }
@@ -76,7 +76,7 @@ export default {
   methods: {
     handleProdItemClick(productId) {
       uni.$u.route('/pages/product/product', {
-        productId: productId
+        id: productId
       })
     }
   }
@@ -62,7 +62,7 @@ export default {
   methods: {
     handleProdItemClick(productId) {
       uni.$u.route('/pages/product/product', {
-        productId: productId
+        id: productId
       })
     }
   }
@@ -62,12 +62,12 @@
         "navigationBarTitleText": "账户设置"
       }
     },
-		{
-			"path": "pages/product/product",
-			"style": {
-				"navigationBarTitleText": "商品详情"
-			}
-		},
+    {
+        "path": "pages/product/product",
+        "style": {
+            "navigationBarTitleText": "商品详情"
+        }
+    },
     {
       "path": "pages/checkout/checkout",
       "style": {
 <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>
@@ -70,22 +76,6 @@
  
     <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>
       <view class="row-right" v-if="promotionList.length > 0" @click="promotionPopup = true">
         <view class="row-content">
@@ -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 {