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

htmldev/wxMini/components/business-item-normal/index.js

@@ -0,0 +1,33 @@
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    listData: Array
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {},
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    handleContact(e) {
+      const { item } = e.currentTarget.dataset
+
+      wx.makePhoneCall({
+        phoneNumber: item.shop_phone
+      })
+    },
+    jumpBusinessDetail(e) {
+      const { item } = e.currentTarget.dataset
+
+      wx.navigateTo({
+        url: '/pages/businessDetail/businessDetail?shop_id=' + item.id
+      })
+    }
+  }
+})

htmldev/wxMini/components/business-item-normal/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

htmldev/wxMini/components/business-item-normal/index.scss

@@ -0,0 +1,83 @@
+.item-info {
+  width: 690rpx;
+  min-height: 222rpx;
+  padding: 32rpx 16rpx 28rpx 38rpx;
+  margin: 0 auto 20rpx;
+  border-radius: 24rpx;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
+}
+
+.item-info .top {
+  display: flex;
+  justify-content: space-between;
+}
+
+.logo {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 5rpx;
+  overflow: hidden;
+}
+
+.logo image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.info {
+  width: 400rpx;
+  padding: 0 20rpx;
+}
+
+.info .name {
+  line-height: 44rpx;
+  font-size: 30rpx;
+  color: rgba(51, 51, 51, 1);
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.info .goods-count {
+  margin-top: 22rpx;
+  font-size: 24rpx;
+  line-height: 34rpx;
+  color: rgba(102, 102, 102, 1);
+}
+
+.top .btn-contact {
+  width: 136rpx;
+  height: 50rpx;
+  border-radius: 16rpx;
+  border: 2rpx solid rgba(145, 179, 121, 1);
+  line-height: 46rpx;
+  font-size: 24rpx;
+  color: rgba(145, 179, 121, 1);
+  background-color: transparent;
+}
+
+.item-info .bottom {
+  display: flex;
+  align-items: center;
+  margin-top: 24rpx;
+}
+
+.item-info .bottom .tel,
+.item-info .bottom .wechat {
+  font-size: 24rpx;
+  color: rgba(153, 153, 153, 1);
+  background-color: transparent;
+  white-space: nowrap;
+}
+
+.item-info .bottom .tel {
+  width: 228rpx;
+}
+
+.item-info .bottom .wechat {
+  width: calc(100% - 228rpx);
+  padding-left: 84rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

htmldev/wxMini/components/business-item-normal/index.wxml

@@ -0,0 +1,32 @@
+<view
+  class="item-info"
+  wx:for="{{listData}}"
+  wx:key="index"
+  data-item="{{item}}"
+  bindtap="jumpBusinessDetail">
+  <view class="top">
+    <view class="logo">
+      <image src="{{item.shop_img_url}}"></image>
+    </view>
+    <view class="info">
+      <view class="name">{{item.shop_name}}</view>
+      <view class="goods-count">{{item.shop_product_count}}商品 {{item.shop_follow_num}}人关注</view>
+    </view>
+    <button
+      class="btn-contact"
+      type="default"
+      data-item="{{item}}"
+      catch:tap="handleContact">点击联系
+    </button>
+  </view>
+  <view class="bottom">
+    <button
+      class="tel"
+      type="default">电话：{{item.shop_phone}}
+    </button>
+    <button
+      class="wechat"
+      type="default">微信：{{item.user_wechat_code}}
+    </button>
+  </view>
+</view>

htmldev/wxMini/components/goods-item-normal/index.js

@@ -3,7 +3,7 @@ Component({
    * 组件的属性列表
    */
   properties: {
-    item: Object
+    listData: Array
   },
 
   /**
@@ -15,9 +15,10 @@ Component({
    * 组件的方法列表
    */
   methods: {
-    jumpGoodsDetail() {
+    jumpGoodsDetail(e) {
+      const { item } = e.currentTarget.dataset
       wx.navigateTo({
-        url: '/pages/goodsDetail/goodsDetail?product_id=' + this.data.item.id
+        url: '/pages/goodsDetail/goodsDetail?product_id=' + item.id
       })
     }
   }

htmldev/wxMini/components/goods-item-normal/index.wxml

@@ -1,10 +1,14 @@
 <view
   class="list"
+  wx:for="{{listData}}"
+  wx:key="id"
+  data-item="{{item}}"
   bind:tap="jumpGoodsDetail">
   <view class="goods-cover-wrap">
     <image
       class="goods-cover"
-      mode="widthFix" src="{{item.product_img_url}}"></image>
+      mode="widthFix"
+      src="{{item.product_img_url}}"></image>
   </view>
   <view class="goods-describe">
     <view class="name-wrap {{item.product_sale_at === 0 ? 'has-tag' : ''}}">

htmldev/wxMini/pages/business/business.js

@@ -117,19 +117,5 @@ Page({
         this.refreshOrderList()
       })
     }
-  },
-  handleContact(e) {
-    const { item } = e.currentTarget.dataset
-
-    wx.makePhoneCall({
-      phoneNumber: item.shop_phone
-    })
-  },
-  jumpBusinessDetail(e) {
-    const { item } = e.currentTarget.dataset
-
-    wx.navigateTo({
-      url: '/pages/businessDetail/businessDetail?shop_id=' + item.id
-    })
   }
 })

htmldev/wxMini/pages/business/business.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "van-loading": "@vant/weapp/loading/index"
+    "van-loading": "@vant/weapp/loading/index",
+    "business-item-normal": "../../components/business-item-normal"
   },
   "backgroundTextStyle": "dark",
   "enablePullDownRefresh": true,

htmldev/wxMini/pages/business/business.wxml

@@ -28,34 +28,8 @@
     <view class="name">{{item.category_name}}</view>
   </view>
 </scroll-view>
-<view
-  class="list"
-  wx:for="{{listData}}"
-  wx:key="index"
-  data-item="{{item}}"
-  bindtap="jumpBusinessDetail">
-  <view class="item-info">
-    <view class="top">
-      <view class="logo">
-        <image src="{{item.shop_img_url}}"></image>
-      </view>
-      <view class="info">
-        <view class="name">{{item.shop_name}}</view>
-        <view class="goods-count">{{item.shop_product_count}}商品 {{item.shop_follow_num}}人关注</view>
-      </view>
-      <button
-        class="contact"
-        type="default"
-        data-item="{{item}}"
-        catch:tap="handleContact">点击联系
-      </button>
-    </view>
-    <view class="bottom">
-      <button type="default">电话：{{item.shop_phone}}</button>
-      <button type="default">微信：{{item.user_wechat_code}}</button>
-    </view>
-  </view>
-</view>
+<business-item-normal
+  listData="{{listData}}"/>
 <view class="pullup-wrapper" wx:if="{{!isRefresh}}">
   <van-loading
     wx:if="{{!finished}}"

htmldev/wxMini/pages/business/business.wxss

@@ -6,91 +6,6 @@
   margin-bottom: 38rpx;
 }
 
-.item-info {
-  width: 690rpx;
-  min-height: 222rpx;
-  padding: 32rpx 16rpx 28rpx 38rpx;
-  margin: 0 auto 20rpx;
-  border-radius: 24rpx;
-  background: rgba(255, 255, 255, 1);
-  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
-}
-
-.item-info .top {
-  display: flex;
-  justify-content: space-between;
-}
-
-.logo {
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 5rpx;
-  overflow: hidden;
-}
-
-.logo image {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.info {
-  width: 400rpx;
-  padding: 0 20rpx;
-}
-
-.info .name {
-  line-height: 44rpx;
-  font-size: 30rpx;
-  color: rgba(51, 51, 51, 1);
-  word-break: break-all;
-  word-wrap: break-word;
-}
-
-.info .goods-count {
-  margin-top: 22rpx;
-  font-size: 24rpx;
-  line-height: 34rpx;
-  color: rgba(102, 102, 102, 1);
-}
-
-button.contact[type="default"] {
-  width: 136rpx;
-  height: 50rpx;
-  border-radius: 16rpx;
-  border: 2rpx solid rgba(145, 179, 121, 1);
-  line-height: 46rpx;
-  font-size: 24rpx;
-  color: rgba(145, 179, 121, 1);
-  background-color: transparent;
-}
-
-.item-info .bottom {
-  display: flex;
-  align-items: center;
-  margin-top: 24rpx;
-}
-
-.item-info .bottom button[type="default"] {
-  justify-content: flex-start;
-  line-height: 38rpx;
-  font-size: 24rpx;
-  color: rgba(153, 153, 153, 1);
-  background-color: transparent;
-  white-space: nowrap;
-}
-
-.item-info .bottom button[type="default"]:nth-of-type(1) {
-  width: 228rpx;
-}
-
-.item-info .bottom button[type="default"]:nth-of-type(2) {
-  width: calc(100% - 228rpx);
-  padding-left: 84rpx;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 .pullup-wrapper {
   display: flex;
   justify-content: center;

htmldev/wxMini/pages/businessDetail/businessDetail.js

@@ -102,7 +102,7 @@ Page({
         this.setData({
           objShopDetail: {
             ...data,
-            shop_address: JSON.parse(shop_address)
+            shop_address: shop_address ? JSON.parse(shop_address) : {}
           },
           'searchForm.type': collect_status === 0 ? 1 : 2 // 是否收藏(0否1是)
         })

htmldev/wxMini/pages/businessDetail/businessDetail.wxml

@@ -21,7 +21,7 @@
   class="business-name"
   bind:tap="shopCollect">
   <text
-    wx:for="{{objShopDetail.user_name}}"
+    wx:for="{{objShopDetail.shop_name}}"
     wx:key="index">{{item}}</text>
   <image
     src="../../image/common/bookmark_0.png"

htmldev/wxMini/pages/collection/collection.json

@@ -1,7 +1,9 @@
 {
   "usingComponents": {
     "customer-tab": "../../components/customer-tab/index",
-    "goods-item-normal": "../../components/goods-item-normal/index"
+    "goods-item-normal": "../../components/goods-item-normal/index",
+    "business-item-normal": "../../components/business-item-normal",
+    "van-loading": "@vant/weapp/loading/index"
   },
   "backgroundColor": "#F6F6F6",
   "backgroundTextStyle": "dark",

htmldev/wxMini/pages/collection/collection.wxml

@@ -16,7 +16,25 @@
     nav="{{nav}}"
     active="{{active}}"
     bind:change="handleNav"/>
-  <view class="main">
-    <goods-item-normal/>
+  <view
+    class="main"
+    hidden="{{active === '2'}}">
+    <goods-item-normal
+      listData="{{listData}}"/>
+  </view>
+  <view
+    class="main"
+    hidden="{{active === '1'}}">
+    <business-item-normal
+      listData="{{listData}}"/>
+  </view>
+  <view
+    class="pullup-wrapper"
+    wx:if="{{!isRefresh}}">
+    <van-loading
+      wx:if="{{!finished}}"
+      size="24px"
+      type="spinner">加载中...
+    </van-loading>
   </view>
 </view>

htmldev/wxMini/pages/newGoods/newGoods.wxml

@@ -17,9 +17,8 @@
     active="{{searchForm.type}}"
     bind:change="handleNav"/>
   <view class="main">
-    <block wx:for="{{listData}}" wx:key="id">
-      <goods-item-normal item="{{item}}"/>
-    </block>
+    <goods-item-normal
+      listData="{{listData}}"/>
     <view class="pullup-wrapper" wx:if="{{!isRefresh}}">
       <van-loading
         wx:if="{{!finished}}"

htmldev/wxMini/pages/partner/partner.scss

@@ -40,7 +40,7 @@
   width: 690rpx;
   //min-height: 328rpx;
   padding: 40rpx 20rpx 30rpx 34rpx;
-  margin: 0 auto;
+  margin: 0 auto 20rpx;
   border-radius: 24rpx;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);