静态首页

README.md

@@ -48,6 +48,14 @@
 
 ​	My_pageReachBottom -- 上拉触底加载动画
 
+​	My_DisplayBox -- 首页展示盒子
+
+​	My_DisplayItem -- 首页展示项
+
+​	My_RoundedCornerButtonTabs -- 圆角按钮tabs栏 首页最新供需
+
+​	My_VerticalBox -- 垂直盒子
+
 # 缓存
 
 ​	userData -- 用户基本数据 -- 保存数据：index-用户列表下标，token，fisadministrator--是否主账号，tagentsid，tenterpriseid，userid
@@ -66,6 +74,8 @@
 
 ​	css/form2.wxss -- 表单样式 个人信息
 
+​	#4BBECF -- 主题色
+
 ​	#ED6876 -- 报错颜色
 
 # js文件

components/My_DisplayBox/index.js

@@ -0,0 +1,36 @@
+// components/My_DisplayBox/index.js
+Component({
+    options: {
+        multipleSlots: true //允许使用多个slot
+    },
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        title: {
+            type: String,
+            value: "标题"
+        },
+        /* 更多点击回调 */
+        getExhibitionTitle: {
+            type: Function
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        moreClick() {
+            this.triggerEvent("getExhibitionTitle", this.data.title)
+        }
+
+    }
+})

components/My_DisplayBox/index.json

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

components/My_DisplayBox/index.wxml

@@ -0,0 +1,14 @@
+<view class="display-box">
+    <!-- 标题和按钮 -->
+    <view class="title-and-more">
+        <view class="display-box-title">
+            <slot name="display-box-img"></slot>{{title}}
+        </view>
+        <view class="display-box-more" bindtap="moreClick">
+            更多
+        </view>
+    </view>
+    <slot></slot>
+    <!-- 展示列表 -->
+    <slot name="display-box-showList"></slot>
+</view>

components/My_DisplayBox/index.wxss

@@ -0,0 +1,33 @@
+/* 盒子 */
+.display-box {
+    width: 702rpx;
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    margin: 30rpx auto 0;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+}
+
+/* 标题和更多 */
+.title-and-more {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 84rpx;
+    width: 100%;
+}
+
+/* 标题 */
+.display-box-title {
+    display: flex;
+    align-items: center;
+    font-size: 32rpx;
+    color: #000000;
+}
+
+/* 更多 */
+.display-box-more {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.33);
+}

components/My_DisplayItem/index.js

@@ -0,0 +1,35 @@
+// components/My_DisplayItem/index.js
+Component({
+    options: {
+        addGlobalClass: true,
+        multipleSlots: true //允许使用多个slot
+    },
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        /* 上内边距 */
+        padTop: {
+            type: Number,
+            value: 20
+        },
+        borTop: {
+            type: Number,
+            value: 2
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

components/My_DisplayItem/index.json

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

components/My_DisplayItem/index.wxml

@@ -0,0 +1,22 @@
+<view class="display-item-box" style="padding-top: {{padTop}}rpx; border-top: {{borTop}}rpx solid rgba(151, 151, 151, .1);">
+    <!-- 展示图片 -->
+    <view class="display-item-image">
+        <image src="/static/userImage.png" mode="aspectFit"></image>
+    </view>
+    <!-- 展示文本信息 -->
+    <view class="display-item-textExplain">
+        <view class="textExplain-title">家纺城产业互联平台上线</view>
+        <view class="textExplain-explain u-line-1">家纺城产业互联平台上线家纺城产业546555554</view>
+        <view class="textExplain-userData-time">
+            <view class="textExplain-userData">
+                <image src="/static/userImage.png" mode="aspectFit"></image>家纺城-小布
+                <slot name="button">
+
+                </slot>
+            </view>
+            <view class="textExplain-time">
+                12-07 12:24
+            </view>
+        </view>
+    </view>
+</view>

components/My_DisplayItem/index.wxss

@@ -0,0 +1,71 @@
+/* 盒子 */
+.display-item-box {
+    display: flex;
+    height: 162rpx;
+    width: 100%;
+    padding-bottom: 20rpx;
+}
+
+/* 图片盒子 */
+.display-item-image {
+    width: 162rpx;
+    height: 162rpx;
+    border-radius: 15rpx;
+    overflow: hidden;
+    margin-right: 30rpx;
+}
+
+/* 图片 */
+.display-item-image>image {
+    width: 100%;
+    height: 100%;
+    border-radius: 10rpx;
+}
+
+/* 文本说明 */
+.display-item-textExplain {
+    flex: 1;
+    height: 100%;
+}
+
+/* 标题 */
+.textExplain-title {
+    font-size: 28rpx;
+    color: #000000;
+}
+
+/* 说明 */
+.textExplain-explain {
+    width: 456rpx;
+    font-size: 24rpx;
+    color: rgba(51, 51, 51, 0.7);
+    margin-top: 20rpx;
+}
+
+/* 用户信息和时间 */
+.textExplain-userData-time {
+    height: 28rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    font-size: 20rpx;
+    color: rgba(51, 51, 51, 0.7);
+    margin-top: 40rpx;
+}
+
+.textExplain-userData {
+    display: flex;
+    align-items: flex-end;
+}
+
+.textExplain-userData>image {
+    height: 28rpx;
+    width: 28rpx;
+    border-radius: 50%;
+    overflow: hidden;
+    margin-right: 8rpx;
+}
+
+.textExplain-time {
+    margin-right: 10rpx;
+}

components/My_RoundedCornerButtonTabs/index.js

@@ -0,0 +1,35 @@
+// components/My_RoundedCornerButtonTabs/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        /* tabs列表 */
+        list: {
+            type: Array
+        },
+        /* 回调 */
+        tabsSelectedIitem: {
+            type: Function
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        active: 0, //默认选中项
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        tabsChange(e) {
+            this.setData({
+                active: e.target.dataset.index
+            });
+            this.triggerEvent("tabsSelectedIitem", e.target.dataset.text)
+        }
+    }
+})

components/My_RoundedCornerButtonTabs/index.json

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

components/My_RoundedCornerButtonTabs/index.wxml

@@ -0,0 +1,3 @@
+<view class="RoundedCornerButtonTabs" bindtap="tabsChange">
+    <text wx:for="{{list}}" data-text="{{item}}" wx:key="index" data-index="{{index}}" class="RoundedCornerButtonTabs-item {{active==index?'active':''}}">{{item}}</text>
+</view>

components/My_RoundedCornerButtonTabs/index.wxss

@@ -0,0 +1,25 @@
+.RoundedCornerButtonTabs {
+    width: 100%;
+    margin-bottom: 20rpx;
+}
+
+.RoundedCornerButtonTabs-item {
+    display: inline-block;
+    width: 120rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    text-align: center;
+    border-radius: 40rpx;
+    border: 2rpx solid #979797;
+    opacity: 0.6;
+    font-size: 20rpx;
+    color: rgba(0, 0, 0, .36);
+    margin-left: 12rpx;
+}
+
+.RoundedCornerButtonTabs>.active {
+    background-color: #4DC2D4;
+    color: #ffffff;
+    border: 0;
+    border: 2rpx solid #4DC2D4;
+}

components/My_VerticalBox/index.js

@@ -0,0 +1,23 @@
+// components/My_VerticalBox/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

components/My_VerticalBox/index.json

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

components/My_VerticalBox/index.wxml

@@ -0,0 +1,7 @@
+<view class="VerticalBox">
+    <view class="VerticalBox-item" wx:for="{{3}}">
+        <image class="VerticalBox-image" src="/static/userImage.png" mode="aspectFit"></image>
+        <view class="VerticalBox-title">花旗</view>
+        <view class="VerticalBox-explain">休闲风格</view>
+    </view>
+</view>

components/My_VerticalBox/index.wxss

@@ -0,0 +1,33 @@
+.VerticalBox {
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    height: 100%;
+}
+
+.VerticalBox-item {
+    width: 206rpx;
+    height: 268rpx;
+    text-align: center;
+    background: #F6F7F8;
+    border-radius: 12rpx;
+}
+
+.VerticalBox-image {
+    width: 186rpx;
+    height: 134rpx;
+    border-radius: 12rpx;
+    margin: 10rpx auto 20rpx;
+}
+
+.VerticalBox-title {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: #000000;
+    margin-bottom: 10rpx;
+}
+
+.VerticalBox-explain {
+    font-size: 24rpx;
+    color: #333333;
+}

pages/login/index.js

@@ -318,6 +318,11 @@ Page({
             "phonenumber": this.data.fphonenumber
         }).then(res => {
             console.log(res)
+            wx.showToast({
+                title: res.msg.substring(res.msg.length - 6),
+                icon: "none",
+                duration: 8000
+            })
         })
     },
     /* 跳转首页 */

pages/tabbar-pages/home/index.js

@@ -4,9 +4,59 @@ Page({
      * 页面的初始数据
      */
     data: {
-
+        //轮播图列表
+        swiperBannerList: [{
+            id: "001",
+            url: "/static/changeImg.png",
+            src: ''
+        }, {
+            id: "002",
+            url: "/static/changeImg.png",
+            src: ''
+        }, {
+            id: "003",
+            url: "/static/changeImg.png",
+            src: ''
+        }],
+        /* 宫格列表 */
+        gridList: [{
+            id: '001',
+            text: '寻找面料',
+            icon: '/static/login/Phone.png'
+        }, {
+            id: '002',
+            text: '面料设计',
+            icon: '/static/login/identity.png'
+        }, {
+            id: '003',
+            text: '平面设计',
+            icon: '/static/login/username.png'
+        }, {
+            id: '004',
+            text: '产品策划',
+            icon: '/static/login/verificationcode.png'
+        }, {
+            id: '005',
+            text: '寻找主播',
+            icon: '/static/login/verificationcode.png'
+        }, {
+            id: '006',
+            text: '摄影摄像',
+            icon: '/static/login/identity.png'
+        }],
+        /* 圆角按钮tabs列表 */
+        roundedList: [
+            "兴趣爱好", "关注板块", "最新发布"
+        ]
+    },
+    /* tabs切换 */
+    tabsSelectedIitem(text) {
+        console.log(text.detail)
+    },
+    /* 获得展示区标题 */
+    getExhibitionTitle(title) {
+        console.log(title.detail)
     },
-
     /**
      * 生命周期函数--监听页面加载
      */

pages/tabbar-pages/home/index.json

@@ -1,4 +1,9 @@
 {
   "navigationStyle": "custom",
-  "usingComponents": {}
+  "usingComponents": {
+    "My_DisplayBox": "/components/My_DisplayBox/index",
+    "My_DisplayItem": "/components/My_DisplayItem/index",
+    "My_RoundedCornerButtonTabs": "/components/My_RoundedCornerButtonTabs/index",
+    "My_VerticalBox": "/components/My_VerticalBox/index"
+  }
 }

pages/tabbar-pages/home/index.wxml

@@ -1,2 +1,62 @@
 <!-- 自定义头部 -->
-<My_navBar></My_navBar>
+<My_navBar></My_navBar>
+<!-- banner -->
+<view class="homeBanner">
+    <swiper class="swiperBanner" autoplay indicator-dots circular="true" indicator-active-color="#fff">
+        <swiper-item wx:for="{{swiperBannerList}}" wx:key="index">
+            <image src="{{item.url}}" mode="aspectFill"></image>
+        </swiper-item>
+    </swiper>
+</view>
+<!-- 宫格区域 -->
+<view class="grid_box">
+    <van-grid border="{{false}}" column-num="3" bindtap="gridJumpPage">
+        <van-grid-item wx:for="{{gridList}}" data-name="{{item.text}}" icon="{{item.icon}}" text="{{item.text}}" text-class="grid_text-class" />
+    </van-grid>
+</view>
+<!-- 展示区域 -->
+<My_DisplayBox title="通告" bind:getExhibitionTitle="getExhibitionTitle">
+    <!-- 标题前图片 -->
+    <image slot="display-box-img" class="display-title_image" src="/static/icon-02.png" mode="aspectFit"></image>
+    <!-- 列表展示区 -->
+    <view slot="display-box-showList">
+        <My_DisplayItem wx:for="{{3}}" padTop="{{index==0?'0':'20'}}" borTop="{{index==0?'0':'2'}}"></My_DisplayItem>
+    </view>
+</My_DisplayBox>
+
+<My_DisplayBox title="最新供需" bind:getExhibitionTitle="getExhibitionTitle">
+    <!-- 标题前图片 -->
+    <image slot="display-box-img" class="display-title_image" src="/static/icon-03.png" mode="aspectFit"></image>
+    <!-- 圆角按钮tabs -->
+    <My_RoundedCornerButtonTabs list="{{roundedList}}" bind:tabsSelectedIitem="tabsSelectedIitem"></My_RoundedCornerButtonTabs>
+    <!-- 列表展示区 -->
+    <view slot="display-box-showList">
+        <My_DisplayItem wx:for="{{3}}" padTop="{{index==0?'0':'20'}}" borTop="{{index==0?'0':'2'}}">
+            <view class="display-box-showList-button-box" slot="button">
+                <van-button custom-class="display-box-showList-button" color="linear-gradient(180deg, #84E3EC 0%, #4DC2D4 100%)"></van-button>
+                <view class="display-box-showList-button-text">
+                    一键联系
+                </view>
+            </view>
+        </My_DisplayItem>
+    </view>
+</My_DisplayBox>
+
+
+<My_DisplayBox title="合作商家" bind:getExhibitionTitle="getExhibitionTitle">
+    <!-- 标题前图片 -->
+    <image slot="display-box-img" class="display-title_image" src="/static/icon-04.png" mode="aspectFit"></image>
+    <!-- 轮播 -->
+    <swiper class="businessPartnerBanner" indicator-dots autoplay interval="3000" circular>
+        <swiper-item>
+            <My_VerticalBox></My_VerticalBox>
+        </swiper-item>
+        <swiper-item>
+            <My_VerticalBox></My_VerticalBox>
+        </swiper-item>
+        <swiper-item>
+            <My_VerticalBox></My_VerticalBox>
+        </swiper-item>
+    </swiper>
+</My_DisplayBox>
+<view style="height: 50px;"></view>

pages/tabbar-pages/home/index.wxss

@@ -1 +1,78 @@
-/* pages/tabbar-pages/home/index.wxss */
+/* banner */
+.homeBanner {
+    width: 100vw;
+    height: 306rpx;
+    background-color: #FFFFFF;
+}
+
+.swiperBanner {
+    width: 702rpx;
+    height: 286rpx;
+    padding-top: 20rpx;
+    margin: 0 auto;
+    border-radius: 10rpx;
+    overflow: hidden;
+}
+
+.swiperBanner swiper-item,
+.swiperBanner image {
+    width: 100%;
+    height: 100%;
+}
+
+/* 宫格 */
+.grid_box {
+    width: 100vw;
+    padding: 0 50rpx;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+}
+
+/* 展示区域title image */
+.display-title_image {
+    width: 32rpx;
+    height: 32rpx;
+    margin: 0 6rpx;
+}
+
+.display-box-showList-button-box {
+    position: relative;
+    width: 96rpx;
+    height: 30rpx;
+    border-radius: 8rpx;
+    margin-left: 12rpx;
+}
+
+/* 展示区盒子内部按钮 */
+.display-box-showList-button {
+    width: 96rpx !important;
+    height: 30rpx !important;
+    border-radius: 8rpx !important;
+}
+
+.display-box-showList-button-text {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: 18rpx;
+    font-weight: 500;
+    color: #FFFFFF;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+/* 合作商家banner */
+.businessPartnerBanner {
+    width: 100%;
+    height: 320rpx;
+}
+
+.businessPartnerBanner>swiper-item {
+    width: 100%;
+    height: 300rpx;
+}
+

pages/tabbar-pages/supplyAndDemand/index.wxml

@@ -52,7 +52,7 @@
         <van-tab title="我的需求">
             <!-- 搜索 -->
             <view class="my-need-search">
-                <input class="my-need-search-input {{searchFocus?'my-need-search-inputfocus':''}}" placeholder="搜索关键字" type="text" bindfocus="needSearchFocus" bindblur="needSearchBlur" />
+                <input class="my-need-search-input {{searchFocus?'my-need-search-inputfocus':''}}" 	confirm-type="search" placeholder="搜索关键字" type="text" bindfocus="needSearchFocus" bindblur="needSearchBlur" />
                 <view class="my-need-search-but">
                     <van-icon name="search" />
                 </view>

pages/tabbar-pages/supplyAndDemand/index.wxss

@@ -32,6 +32,7 @@
     flex: 1;
     height: 100%;
     line-height: 100%;
+    font-size: 26rpx;
     text-align: center;
     background-color: #FFFFFF;
     color: rgba(0, 0, 0, 0.4);

project.private.config.json

@@ -77,6 +77,12 @@
                     "pathName": "pages/announceDemand/index",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "首页",
+                    "pathName": "pages/tabbar-pages/home/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }