小程序：新增供应商详情页

htmldev/wxMini/pages/businessDetail/businessDetail.js

@@ -4,7 +4,21 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    nav: [
+      {
+        name: '详情',
+        value: '1'
+      },
+      {
+        name: '产品',
+        value: '2'
+      }
+    ],
+    currentNav: '1',
+    list: [],
+    leftList: [],
+    rightList: []
   },
 
   /**
@@ -61,5 +75,14 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  handleNav(e) {
+    const { item } = e.target.dataset
+
+    if (item.value) {
+      this.setData({
+        currentNav: item.value
+      })
+    }
   }
 })

htmldev/wxMini/pages/businessDetail/businessDetail.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
-}
+  "usingComponents": {
+    "goods-item": "../../components/goods-item"
+  }
+}

htmldev/wxMini/pages/businessDetail/businessDetail.wxml

@@ -0,0 +1,45 @@
+<!-- 轮播 -->
+<view class="page-section">
+  <swiper
+    indicator-dots="{{true}}"
+    indicator-color="rgba(130, 130, 130, 1)"
+    indicator-active-color="#FFF"
+    autoplay="{{false}}">
+    <block wx:for="{{background}}" wx:key="*this">
+      <swiper-item>
+        <view class="swiper-item {{item}}">
+          <image src=""></image>
+        </view>
+      </swiper-item>
+    </block>
+  </swiper>
+</view>
+<view class="business-name">张三供应商</view>
+<view class="nav-wrap">
+  <view
+    class="{{currentNav === item.value ? 'active' : ''}}"
+    wx:for="{{nav}}"
+    wx:key="value"
+    data-item="{{item}}"
+    bind:tap="handleNav">{{item.name}}
+  </view>
+</view>
+  <!--详情-->
+<view
+  class="business-info"
+  hidden="{{currentNav === '2'}}">
+  <text class="phone" user-select>电话：12345678900</text>
+  <text class="wechat" user-select>微信：1234567890</text>
+  <text class="introduce" user-select>巴啦啦啦，吧啦啦啦啦啦，爸爸啊爸爸爸爸爸爸，爸爸爸爸爸爸。</text>
+</view>
+  <!--产品-->
+<view
+  class="waterfall"
+  hidden="{{currentNav === '1'}}">
+  <view class="waterfall-left">
+    <goods-item/>
+  </view>
+  <view class="waterfall-right">
+    <goods-item/>
+  </view>
+</view>

htmldev/wxMini/pages/businessDetail/businessDetail.wxss

@@ -0,0 +1,90 @@
+.page-section {
+  width: 100%;
+}
+
+.page-section swiper {
+  width: 100%;
+  height: 562rpx;
+  overflow: hidden;
+}
+
+.page-section .swiper-item {
+  height: 100%;
+}
+
+.page-section .swiper-item image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: pink;
+}
+
+.business-name {
+  padding: 68rpx 56rpx 0;
+  font-size: 48rpx;
+  color: rgba(51, 51, 51, 1);
+}
+
+.nav-wrap {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1rpx solid rgba(189, 189, 189, 1);
+}
+
+.nav-wrap view {
+  flex: 1;
+  padding: 24rpx 0;
+  line-height: 40rpx;
+  font-size: 28rpx;
+  color: rgba(51, 51, 51, 1);
+  text-align: center;
+}
+
+.nav-wrap view.active {
+  position: relative;
+  left: 0;
+  top: 0;
+  color: rgba(145, 179, 121, 1);
+}
+
+.nav-wrap view.active:after {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  content: '';
+  width: 162rpx;
+  height: 8rpx;
+  border-radius: 40rpx 40rpx 0 0;
+  background: rgba(145, 179, 121, 1);
+  transform: translateX(-50%);
+}
+
+.business-info {
+  display: flex;
+  flex-direction: column;
+  padding: 36rpx 42rpx 36rpx 72rpx;
+}
+
+.business-info text {
+  font-size: 26rpx;
+  color: rgba(153, 153, 153, 1);
+}
+
+.business-info .phone,
+.business-info .wechat {
+  white-space: nowrap;
+}
+
+.business-info .introduce {
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.waterfall {
+  display: flex;
+  justify-content: space-between;
+  width: 690rpx;
+  padding: 30rpx 0;
+  margin: 0 auto;
+}

htmldev/wxMini/pages/home/home.json

@@ -2,7 +2,7 @@
   "usingComponents": {
     "van-tab": "@vant/weapp/tab/index",
     "van-tabs": "@vant/weapp/tabs/index",
-    "goods-item": "./child/goodsItem"
+    "goods-item": "../../components/goods-item"
   },
   "navigationBarTitleText": "学习111",
   "backgroundColor": "#F6F6F6",

htmldev/wxMini/pages/home/home.wxml

@@ -4,14 +4,9 @@
       <label for="header-search">
         <image src=""></image>
       </label>
-      <input
-        placeholder-class="header-search-placeholder"
-        value=""
-        placeholder="搜索"></input>
+      <input placeholder-class="header-search-placeholder" value="" placeholder="搜索"></input>
     </view>
-    <view
-      class="leaving-a-message"
-      bind:tap="jumpLeavingAMessage">
+    <view class="leaving-a-message" bind:tap="jumpLeavingAMessage">
       <image src=""></image>
       <view>8</view>
     </view>
@@ -19,16 +14,12 @@
 
   <!-- 轮播 -->
   <view class="page-section">
-    <swiper
-      indicator-dots="{{true}}"
-      indicator-color="rgba(151, 209, 79, 1)"
-      indicator-active-color="#FFF"
-      autoplay="{{false}}">
-      <block
-        wx:for="{{background}}"
-        wx:key="*this">
+    <swiper indicator-dots="{{true}}" indicator-color="rgba(151, 209, 79, 1)" indicator-active-color="#FFF" autoplay="{{false}}">
+      <block wx:for="{{background}}" wx:key="*this">
         <swiper-item>
-          <view class="swiper-item {{item}}">{{item}}</view>
+          <view class="swiper-item {{item}}">
+            <image src=""></image>
+          </view>
         </swiper-item>
       </block>
     </swiper>
@@ -36,11 +27,7 @@
   <!-- 消息通知 -->
   <view class="news-section">
     <image src=""></image>
-    <swiper
-      vertical="{{true}}"
-      interval="{{2000}}"
-      circular="{{true}}"
-      autoplay="{{true}}">
+    <swiper vertical="{{true}}" interval="{{2000}}" circular="{{true}}" autoplay="{{true}}">
       <block wx:for="{{txtlist}}" wx:key="*this">
         <swiper-item>
           <view class="swiper-item {{item}}">{{item}}</view>
@@ -50,12 +37,7 @@
   </view>
   <!--顶部导航-->
   <view class="header-nav">
-    <view
-      class="nav"
-      wx:for="{{headerNav}}"
-      wx:key="index"
-      data-item="{{item}}"
-      bind:tap="handleNav">
+    <view class="nav" wx:for="{{headerNav}}" wx:key="index" data-item="{{item}}" bind:tap="handleNav">
       <image src=""></image>
       <text>{{item.name}}</text>
     </view>
@@ -69,27 +51,17 @@
     <image class="media" src=""></image>
   </view>
   <view class="excellent-goods-title">优秀产品</view>
-  <van-tabs
-    active="{{ currentCategory }}"
-    color="transparent"
-    title-active-color="#FFFFFF"
-    title-inactive-color="#858597"
-    tab-class="my-tab-class"
-    tab-active-class="my-tab-active-class">
-    <van-tab
-      title="{{item.name}}"
-      wx:for="{{category}}"
-      wx:key="id"
-      name="{{item.id}}">
+  <van-tabs active="{{ currentCategory }}" color="transparent" title-active-color="#FFFFFF" title-inactive-color="#858597" tab-class="my-tab-class" tab-active-class="my-tab-active-class">
+    <van-tab title="{{item.name}}" wx:for="{{category}}" wx:key="id" name="{{item.id}}">
     </van-tab>
   </van-tabs>
   <!--瀑布流-->
   <view class="waterfall">
     <view class="waterfall-left">
-      <goods-item/>
+      <goods-item />
     </view>
     <view class="waterfall-right">
-      <goods-item/>
+      <goods-item />
     </view>
   </view>
-</view>
+</view>

htmldev/wxMini/pages/home/home.wxss

@@ -45,7 +45,14 @@
   overflow: hidden;
 }
 
-.page-section swiper-item {
+.page-section .swiper-item {
+  height: 100%;
+}
+
+.page-section .swiper-item image {
+  display: block;
+  width: 100%;
+  height: 100%;
   background: pink;
 }