家政预约小程序开发

微信小程序-家政预约

主要功能：

1. 后台添加相关家政服务项目

2. 支持保姆预览

3. 支持预约家政人员

4. 支持家政人员评价

5. 订单管理

源码地址

https://github.com/geeeeeeeek/Housekeeping

界面预览

首页展示

Screen Shot 2022-06-23 at 9.30.13 PM.png

个人页

Screen Shot 2022-06-23 at 9.30.22 PM.png

开发过程

首页开发

<!--index.wxml-->
<view class="page">
  <!--顶部滚动-->
  <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000"> 
    <swiper-item>
          <image src="/images/demo01.png" mode="aspectFill" class="swiper-image"  />
        </swiper-item>  
      <swiper-item>
          <image src="/images/demo02.png" mode="aspectFill" class="swiper-image"  />
        </swiper-item>  
  </swiper>

  <!--筛选-->
  <view class="choose-wrap vc">
    <view class="choose-item cc" data-tab="1" bindtap="chooseItemClick">
      <block wx:if="{{currentTab==1}}">
        <text class="choose-item-label choose-item-selected" >全部</text>
      </block>
      <block wx:else>
        <text class="choose-item-label" >全部</text>
      </block>
    </view>
    <view class="choose-item-divider">|</view>
    <view class="choose-item cc" data-tab="2" bindtap="chooseItemClick">
      <block wx:if="{{currentTab==2}}">
        <text class="choose-item-label choose-item-selected" >热门</text>
      </block>
      <block wx:else>
        <text class="choose-item-label" >热门</text>
      </block>
    </view>
    <view class="choose-item-divider">|</view>
    <view class="choose-item cc" data-tab="3" bindtap="chooseItemClick">
      <block wx:if="{{currentTab==3}}">
        <text class="choose-item-label choose-item-selected">最新</text>
      </block>
      <block wx:else>
        <text class="choose-item-label" >最新</text>
      </block>
    </view>
  </view>

  <!--listview数据--> 
 
      <!--一条-->
      <view class="list-item" data-id="{{product.p_id}}" bindtap="itemClick">
      <view class="list-item-left"> 
        <image class="list-item-left-icon" src="/images/demo01.png"></image>
      </view>
      <view class="list-item-right"> 
        <view class="item-name cc">刘老师</view>
        <view class="item-desc cc">温柔可爱型</view>
        <view class="item-price cc ">￥100</view>
        <view class="item-duration cc">200分钟</view>
      </view>
    </view> 
 
    <!--一条-->
    <view class="list-item" data-id="{{product.p_id}}" bindtap="itemClick">
    <view class="list-item-left"> 
      <image class="list-item-left-icon" src="/images/demo02.png"></image>
    </view>
    <view class="list-item-right"> 
      <view class="item-name cc">刘老师</view>
      <view class="item-desc cc">温柔可爱型</view>
      <view class="item-price cc ">￥100</view>
      <view class="item-duration cc">200分钟</view>
    </view>
    </view> 

</view>

个人中心

<view class="page">
    <!--顶部图片区-->
    <view class="page-header">   
        <swiper> 
            <swiper-item>
                <image src="/images/my_header_bg.jpg" mode="aspectFill" class="swiper-image"  />
            </swiper-item>   
        </swiper>
        <view class="header-info cc">
             <image src="{{userInfo.avatarUrl}}" mode="scaleToFill" class="header-icon" />
             <text class="info-name vc">{{userInfo.nickName}}</text> 
        </view>
    </view> 

    <!--我的预约-->
    <view class="page-item vc" bindtap="yuyueClick">
        <view class="vc">
            <image src="/images/icon_yuyue.png" mode="scaleToFill" class="p-icon" />
        </view>
        <view class="item-name">我的预约</view>
        <view class="vc">
            <image src="/images/icon_rightgo.png" mode="scaleToFill" class="p-icon" />
        </view>
    </view>
    <!--我的地址-->
    <view class="page-item vc" bindtap="addressClick">
        <view class="vc">
            <image src="/images/icon_address.png" mode="scaleToFill" class="p-icon" />
        </view>
        <view class="item-name">我的地址</view>
        <view class="vc">
            <image src="/images/icon_rightgo.png" mode="scaleToFill" class="p-icon" />
        </view>
    </view> 
    <!--优惠券-->
    <view class="page-item vc" bindtap="discountClick">
        <view class="vc">
            <image src="/images/icon_discount.png" mode="scaleToFill" class="p-icon" />
        </view>
        <view class="item-name">优惠券</view>
        <view class="vc">
            <image src="/images/icon_rightgo.png" mode="scaleToFill" class="p-icon" />
        </view>
    </view> 
</view>