小程序：商品详情接口对接

htmldev/wxMini/pages/goodsDetail/api/index.js

@@ -0,0 +1,14 @@
+const { request } = require('../../../api/request')
+
+/**
+ * 商品详情
+ * @returns {Promise<*>}
+ */
+export const getProductDetail = (productId) => request({
+  url: '/api/user/caigou/product/detail',
+  method: 'POST',
+  data: {
+    product_id: productId
+  },
+  showLoading: true
+})

htmldev/wxMini/pages/goodsDetail/goodsDetail.js

@@ -1,10 +1,15 @@
+const { getShopDetail } = require('../../api/common')
+const { getProductDetail } = require('./api/index')
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    searchForm: {
+      product_id: ''
+    },
     nav: [
       {
         name: '描述',
@@ -15,14 +20,24 @@ Page({
         value: '2'
       }
     ],
-    active: '1'
+    active: '1',
+    objProductDetail: {
+      product_rotation_img_list: [],
+      product_detail_img_list: []
+    },
+    objShopDetail: { shop_address: {} }
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    const { product_id } = options
+    this.setData({
+      'searchForm.product_id': product_id
+    }, () => {
+      this.fetchProductDetail()
+    })
   },
 
   /**
@@ -72,6 +87,48 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  async fetchProductDetail() {
+    try {
+      const { status, data, msg } = await getProductDetail(this.data.searchForm.product_id)
+      if (status) {
+        const { shop_id, product_img_url, product_rotation_img_list, product_detail_img_list } = data
+
+        this.setData({
+          objProductDetail: {
+            ...data,
+            product_rotation_img_list: JSON.parse(product_rotation_img_list),
+            product_detail_img_list: JSON.parse(product_detail_img_list)
+          },
+          'searchForm.shop_id': shop_id
+        }, () => {
+          this.fetchShopDetail()
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
+  },
+  async fetchShopDetail() {
+    try {
+      const { status, data, msg } = await getShopDetail(this.data.searchForm.shop_id)
+      if (status) {
+        this.setData({
+          objShopDetail: {
+            ...data,
+            shop_address: JSON.parse(data.shop_address)
+          }
+        })
+      } else {
+        wx.showToast({
+          title: msg,
+          icon: 'none'
+        })
+      }
+    } catch (err) {}
   },
   handleNav(e) {
     const { value } = e.detail

htmldev/wxMini/pages/goodsDetail/goodsDetail.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
-    "customer-tab": "../../components/customer-tab/index"
+    "customer-tab": "../../components/customer-tab/index",
+    "business-detail-large": "../../components/business-detail-large"
   }
 }

htmldev/wxMini/pages/goodsDetail/goodsDetail.scss

@@ -68,7 +68,7 @@
   }
 }
 
-.business-info {
+.goods-info {
   display: flex;
   flex-direction: column;
   padding: 44rpx 0 276rpx 46rpx;

htmldev/wxMini/pages/goodsDetail/goodsDetail.wxml

@@ -5,10 +5,12 @@
     indicator-color="rgba(130, 130, 130, 1)"
     indicator-active-color="#FFF"
     autoplay="{{false}}">
-    <block wx:for="{{background}}" wx:key="*this">
+    <block
+      wx:for="{{objProductDetail.product_rotation_img_list}}"
+      wx:key="*this">
       <swiper-item>
-        <view class="swiper-item {{item}}">
-          <image src=""></image>
+        <view class="swiper-item">
+          <image src="{{item}}"></image>
         </view>
       </swiper-item>
     </block>
@@ -16,14 +18,14 @@
 </view>
 <view class="main-information">
   <view class="tag-list">
-    <text>蔬菜</text>
+    <text>{{objProductDetail.product_category_name}}</text>
   </view>
   <text
     class="name"
-    user-select>名字</text>
+    user-select>{{objProductDetail.product_title}}</text>
   <view class="unit-price">
-    <text class="price">¥23.00</text>
-    <text class="unit">/ kg</text>
+    <text class="price">¥{{tools.fen2Yuan(objProductDetail.product_price)}}</text>
+    <text class="unit">/ {{objProductDetail.product_unit}}</text>
   </view>
 </view>
 <customer-tab
@@ -32,14 +34,18 @@
   bind:change="handleNav"/>
   <!--描述-->
 <view
-  class="business-info"
+  class="goods-info"
   hidden="{{active === '2'}}">
-  <text class="introduce" user-select>一段描述</text>
+  <text class="introduce" user-select>{{objProductDetail.product_desc}}</text>
   <block wx:if="{{false}}">
     <view class="subtitle">预计上架时间</view>
-    <view class="date">2022年09月10日</view>
+    <view
+      class="date">
+      {{objProductDetail.product_sale_at === 0 ? '预售' : tools.formatTs(objProductDetail.product_sale_at, 'YYYY-MM-DD hh:mm')}}
+    </view>
   </block>
-  <block wx:if="{{true}}">
+  <!-- TODO 暂时不做 -->
+  <block wx:if="{{false}}">
     <view class="subtitle">相关产品</view>
     <scroll-view
       class="goods-scroll"
@@ -67,9 +73,9 @@
 </view>
   <!-- todo 供应商-->
 <view
-  class="business-info"
   hidden="{{active === '1'}}">
-  供应商
+  <business-detail-large
+    shopDetail="{{objShopDetail}}"/>
 </view>
 
 <view
@@ -78,18 +84,8 @@
   <view>
     <button
       class="btn-collection"
-      type="primary"
-      wx:if="{{false}}">预约并收藏
+      type="primary">添加收藏夹
     </button>
-    <block wx:if="{{true}}">
-      <button
-        class="btn-collection"
-        type="primary">添加购物车
-      </button>
-      <button
-        class="btn-collection"
-        type="primary">添加收藏夹
-      </button>
-    </block>
   </view>
 </view>
+<wxs src="../../components/wxs/index.wxs" module="tools"></wxs>