Initial Commit

.gitignore

@@ -0,0 +1,14 @@
+# Windows
+[Dd]esktop.ini
+Thumbs.db
+$RECYCLE.BIN/
+
+# macOS
+.DS_Store
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+
+# Node.js
+node_modules/

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 汪磊 <w@zce.me> (https://zce.me/)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,26 @@
+# locally
+
+> 本地生活小程序
+
+https://github.com/zce/weapp-locally
+
+## Preview
+
+![home](https://user-images.githubusercontent.com/6166576/30124027-8caa06a8-9366-11e7-8cf6-ecc4b6361c65.jpg)
+![list](https://user-images.githubusercontent.com/6166576/30124035-9096295e-9366-11e7-859f-43c6c3a0b931.jpg)
+![detail](https://user-images.githubusercontent.com/6166576/30124043-954611e4-9366-11e7-837a-859a3096015b.jpg)
+![message](https://user-images.githubusercontent.com/6166576/30124049-98923526-9366-11e7-9da8-c1c4734339fc.jpg)
+![profile](https://user-images.githubusercontent.com/6166576/30124057-9a6285e0-9366-11e7-973c-7014f363b690.jpg)
+
+
+<!--
+other config backup
+
+,
+      {
+        "pagePath": "pages/contact/contact",
+        "text": "联系我们",
+        "iconPath": "assets/contact.png",
+        "selectedIconPath": "assets/contact-active.png"
+      }
+ -->

app.js

@@ -0,0 +1,5 @@
+App({
+  config: {
+    apiBase: 'https://dns.niimei.com'
+  }
+})

app.json

@@ -0,0 +1,46 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/list/list",
+    "pages/detail/detail",
+    "pages/messages/messages",
+    "pages/profile/profile",
+    "pages/settings/settings"
+  ],
+  "window": {
+    "navigationBarBackgroundColor": "#3a4861",
+    "navigationBarTextStyle": "white",
+    "navigationBarTitleText": "赛事服务",
+    "backgroundColor": "#bcc0c9",
+    "backgroundTextStyle": "light",
+    "enablePullDownRefresh": false,
+    "onReachBottomDistance": 50
+  },
+  "tabBar": {
+    "color": "#999",
+    "selectedColor": "#444",
+    "backgroundColor": "#fff",
+    "borderStyle": "black",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "text": "首页",
+        "iconPath": "assets/home.png",
+        "selectedIconPath": "assets/home-active.png"
+      },
+      {
+        "pagePath": "pages/messages/messages",
+        "text": "消息",
+        "iconPath": "assets/message.png",
+        "selectedIconPath": "assets/message-active.png"
+      },
+      {
+        "pagePath": "pages/profile/profile",
+        "text": "我的",
+        "iconPath": "assets/profile.png",
+        "selectedIconPath": "assets/profile-active.png"
+      }
+    ],
+    "position": "bottom"
+  }
+}

app.wxss

@@ -0,0 +1,14 @@
+@import 'venders/weui';
+
+.searchbar-result {
+  margin-top: 0;
+  font-size: 28rpx;
+}
+
+.searchbar-result::before {
+  display: none;
+}
+
+page {
+  background-color: #f0f0f0;
+}

includes/search-bar.wxml

@@ -0,0 +1,21 @@
+<view class="weui-search-bar">
+  <view class="weui-search-bar__form">
+    <view class="weui-search-bar__box">
+      <icon class="weui-icon-search_in-box" type="search" size="14"/>
+      <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{searchText}}" focus="{{searchShowed}}" bindinput="searchChangeHandle" bindconfirm="searchHandle"/>
+      <view class="weui-icon-clear" wx:if="{{searchText}}" bindtap="clearSearchHandle">
+        <icon type="clear" size="14"/>
+      </view>
+    </view>
+    <label class="weui-search-bar__label" hidden="{{searchShowed}}" bindtap="showSearchHandle">
+      <icon class="weui-icon-search" type="search" size="14"/>
+      <view class="weui-search-bar__text">搜索</view>
+    </label>
+  </view>
+  <view class="weui-search-bar__cancel-btn" hidden="{{!searchShowed}}" bindtap="hideSearchHandle">取消</view>
+</view>
+<!-- <view class="weui-cells searchbar-result" wx:if="{{searchText}}">
+  <navigator url="" class="weui-cell" hover-class="weui-cell_active">
+    <view class="weui-cell__bd">暂时未实现</view>
+  </navigator>
+</view> -->

pages/detail/detail.js

@@ -0,0 +1,29 @@
+const fetch = require('../../utils/fetch')
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    shop: {}
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad (options) {
+    fetch(`/shops/${options.item}`)
+      .then(res => {
+        res = JSON.parse('{"data":{"id":0,"score":"c","name":"2015春季演讲比赛","phone":"400-8123-321","address":"光华路36号","businessHours":"8:00 - 16:00","images":["/assets/contest/1.jpg"]}}');
+        this.setData({ shop: res.data })
+        wx.setNavigationBarTitle({ title: res.data.name })
+      })
+  },
+
+  previewHandle (e) {
+    wx.previewImage({
+      current: e.target.dataset.src,
+      urls: this.data.shop.images
+    })
+  }
+})

pages/detail/detail.json

@@ -0,0 +1 @@
+{}

pages/detail/detail.wxml

@@ -0,0 +1,37 @@
+<swiper class="slides" indicator-dots="{{shop.images.length > 1}}" indicator-color="#bcc0c9" indicator-active-color="#3a4861">
+  <swiper-item wx:for="{{shop.images}}" wx:key="id">
+    <image src="{{item}}" mode="aspectFill" bindtap="previewHandle" data-src="{{item}}"/>
+  </swiper-item>
+</swiper>
+
+<view class="heading" wx:if="{{shop.name}}">
+  <text class="name">{{shop.name}}</text>
+  <text class="phone">电话：{{shop.phone || 'none'}}</text>
+  <text class="address">地址：{{shop.address}}</text>
+  <text class="hours">营业时间：{{shop.businessHours}}</text>
+  <view class="score" wx:if="{{item.score}}">{{item.score}}</view>
+</view>
+
+<view class="introduction" wx:if="{{shop.introduction}}">
+  <text>{{shop.introduction}}</text>
+</view>
+
+<view class="comments" wx:if="{{shop.comments.length}}">
+  <view class="item" wx:for="{{shop.comments}}" wx:key="*this">
+    <text class="name">{{item.name}}</text>
+    <text class="date">{{item.date}}</text>
+    <text class="rating">{{item.rating}}</text>
+    <text class="content">{{item.content}}</text>
+    <view class="images">
+      <image wx:for="{{item.images}}" wx:key="*this" src="{{utils.size(item)}}"/>
+    </view>
+  </view>
+</view>
+
+<wxs module="utils">
+  module.exports = {
+    size: function (input) {
+      return input.replace('w.h', '100.100')
+    }
+  }
+</wxs>

pages/detail/detail.wxss

@@ -0,0 +1,83 @@
+.slides {
+  height: 580rpx;
+}
+
+.slides image {
+  min-width: 100%;
+  height: 100%;
+}
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  padding: 20rpx 30rpx;
+  background-color: #fff;
+  color: #567;
+  font-size: 24rpx;
+}
+
+.heading .name {
+  font-size: 40rpx;
+  color: #234;
+}
+
+.heading .score {
+  position: absolute;
+  top: 20rpx;
+  right: 20rpx;
+  padding: 0 10rpx;
+  background-color: #ee523d;
+  border-radius: 30rpx;
+  color: #fff;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+.introduction {
+  margin-top: 20rpx;
+  padding: 30rpx;
+  background-color: #fff;
+  color: #456;
+  font-size: 24rpx;
+  line-height: 2;
+}
+
+.comments {
+  margin-top: 20rpx;
+  padding: 20rpx;
+  background-color: #fff;
+  color: #345;
+  font-size: 24rpx;
+}
+
+.comments .item {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.comments .item .name {
+  margin-top: 20rpx;
+  font-size: 36rpx;
+}
+
+.comments .item .date {
+  align-self: flex-end;
+  margin: -40rpx 0 20rpx;
+  color: #567;
+}
+
+.comments .item .rating {
+  position: absolute;
+  top: 20rpx;
+  right: 10rpx;
+  color: #ee523d;
+}
+
+.comments .item image {
+  width: 110rpx;
+  height: 110rpx;
+  margin: 10rpx;
+}

pages/index/index.js

@@ -0,0 +1,47 @@
+const fetch = require('../../utils/fetch')
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    slides: [],
+    categories: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad (options) {
+    //fetch('/slides')
+    //  .then(res => {
+    //    this.setData({ slides: res.data })
+    //  })
+
+   // fetch('/categories')
+   //   .then(res => {
+    //    this.setData({ categories: res.data })
+    //  })
+
+    const slides = [
+      { image: '/assets/contest/2.jpg', link: '/pages/list/list?cat=10' },
+      { image: '/assets/contest/1.jpg', link: '' },
+      { image: '/assets/contest/4.jpg', link: '/pages/list/list?cat=30' },
+       { image: '/assets/contest/3.jpg', link: '/pages/list/list?cat=20' }
+     ]
+
+    const categories = [
+       { icon: '/assets/icons/scan.png', text: '签到扫码', category_id: 5 },
+       { icon: '/assets/icons/art.png', text: '艺术', category_id: 1 },
+       { icon: '/assets/icons/chemistry.png', text: '科技', category_id: 2 },
+       { icon: '/assets/icons/math.png', text: '数学', category_id: 3 },
+       { icon: '/assets/icons/cups.png', text: '奖杯赛', category_id: 4 },
+       { icon: '/assets/icons/badminton.png', text: '体育', category_id: 6 },
+       { icon: '/assets/icons/bicycle.png', text: '户外', category_id: 7 },
+       { icon: '/assets/icons/keyboard.png', text: '创新专题', category_id: 8 },
+       { icon: '/assets/icons/myself.png', text: '我的比赛', category_id: 9 }
+     ]
+
+     this.setData({ slides, categories })
+  }
+})

pages/index/index.json

@@ -0,0 +1 @@
+{}

pages/index/index.wxml

@@ -0,0 +1,24 @@
+<swiper class="slides" autoplay="{{slides.length > 1}}" indicator-dots="{{slides.length > 1}}" indicator-color="#bcc0c9" indicator-active-color="#3a4861">
+  <swiper-item wx:for="{{slides}}" wx:key="id">
+    <navigator wx:if="{{item.link}}" url="{{item.link}}">
+      <image src="{{item.image}}" mode="aspectFill"/>
+    </navigator>
+    <image wx:else src="{{item.image}}" mode="aspectFill"/>
+  </swiper-item>
+</swiper>
+
+<view class="grids">
+  <navigator class="item" wx:for="{{categories}}" wx:key="id" url="/pages/list/list?cat={{item.id}}">
+    <image src="{{item.icon}}"/>
+    <text>{{item.text}}</text>
+  </navigator>
+</view>
+
+<view class="links">
+  <navigator url="/pages/list/list?type=recommend">
+    <image src="/assets/link-01.png"/>
+  </navigator>
+  <navigator url="/pages/forum/forum">
+    <image src="/assets/link-02.png"/>
+  </navigator>
+</view>

pages/index/index.wxss

@@ -0,0 +1,53 @@
+.slides {
+  height: 380rpx;
+}
+
+.slides navigator,
+.slides image {
+  min-width: 100%;
+  height: 100%;
+}
+
+.grids {
+  display: flex;
+  flex-wrap: wrap;
+  border-top: 1rpx solid #eee;
+  border-left: 1rpx solid #eee;
+  background-color: #fff;
+}
+
+.grids .item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 33.3333333333%;
+  height: 250rpx;
+  border-right: 1rpx solid #eee;
+  border-bottom: 1rpx solid #eee;
+  box-sizing: border-box;
+}
+
+.grids .item image {
+  width: 70rpx;
+  height: 70rpx;
+}
+
+.grids .item text {
+  margin-top: 20rpx;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.links {
+  display: flex;
+  justify-content: space-between;
+  margin: 10rpx 0;
+  padding: 30rpx;
+  background-color: #fff;
+}
+
+.links image {
+  width: 330rpx;
+  height: 185rpx;
+}

pages/list/list.js

@@ -0,0 +1,80 @@
+const fetch = require('../../utils/fetch')
+
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    category: null,
+    shops: [],
+    pageIndex: 0,
+    pageSize: 20,
+    totalCount: 0,
+    hasMore: true
+  },
+
+  loadMore () {
+    let { pageIndex, pageSize, searchText } = this.data
+    const params = { _page: ++pageIndex, _limit: pageSize }
+    if (searchText) params.q = searchText
+
+    return fetch(`/?${this.data.category.id}`, params)
+      .then(res => {
+        res = '[{"id":1,"score":"c","name":"2018大梅时代歌舞节","phone":"400-8123-321","address":"光华路36号","businessHours":"8:00 - 16:00","images":["/assets/icons/basketball.png"]},{"id":2,"score":"c","name":"2018大梅时代体育节","phone":"400-8123-321","address":"光华路36号","businessHours":"8:00 - 16:00","images":["/assets/icons/basketball.png"]},{"id":3,"score":"c","name":"2018大梅时代演讲比赛","phone":"400-8123-321","address":"光华路36号","businessHours":"8:00 - 16:00","images":["/assets/icons/basketball.png"]},{"id":4,"score":"c","name":"2018大梅时代新歌声大赛","phone":"400-8123-321","address":"光华路36号","businessHours":"8:00 - 16:00","images":["/assets/icons/basketball.png"]}]';
+        res = JSON.parse(res);
+        const totalCount = 4; //parseInt(res.header['X-Total-Count'])
+        const hasMore = this.data.pageIndex * this.data.pageSize < totalCount
+        const shops = this.data.shops.concat(res);
+        this.setData({ shops:shops, totalCount, pageIndex, hasMore })
+      })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad (options) {
+    fetch(`/?catogories${options.cat}`)
+      .then(res => {
+        res = { data: {name:"球类运动"} };
+        this.setData({ category: res.data })
+        wx.setNavigationBarTitle({ title: res.data.name })
+
+        this.loadMore()
+      })
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh () {
+    this.setData({ shops: [], pageIndex: 0, hasMore: true })
+    this.loadMore().then(() => wx.stopPullDownRefresh())
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom () {
+    // TODO：节流
+    this.loadMore()
+  },
+
+  searchHandle () {
+    // console.log(this.data.searchText)
+    this.setData({ shops: [], pageIndex: 0, hasMore: true })
+    this.loadMore()
+  },
+
+  showSearchHandle () {
+    this.setData({ searchShowed: true })
+  },
+  hideSearchHandle () {
+    this.setData({ searchText: '', searchShowed: false })
+  },
+  clearSearchHandle () {
+    this.setData({ searchText: '' })
+  },
+  searchChangeHandle (e) {
+    this.setData({ searchText: e.detail.value })
+  }
+})

pages/list/list.json

@@ -0,0 +1,4 @@
+{
+  "enablePullDownRefresh": true,
+  "onReachBottomDistance": 5
+}

pages/list/list.wxml

@@ -0,0 +1,17 @@
+<include src="/includes/search-bar.wxml"/>
+
+<view class="cells">
+  <navigator class="item" wx:for="{{shops}}" wx:key="id" url="/pages/detail/detail?item={{item.id}}">
+    <image src="{{item.images[0]}}" mode="aspectFill"/>
+    <view class="meta">
+      <text class="name">{{item.name}}</text>
+      <text class="phone">电话：{{item.phone || 'none'}}</text>
+      <text class="address">地址：{{item.address}}</text>
+      <text class="hours">举办时间：{{item.businessHours}}</text>
+    </view>
+    <view class="score">{{item.score || 'none'}}</view>
+  </navigator>
+</view>
+
+<view wx:if="{{hasMore}}" class="loadmore loading">正在加载...</view>
+<view wx:else class="loadmore">没有更多内容了</view>

pages/list/list.wxss

@@ -0,0 +1,79 @@
+.cells {
+  background-color: #fff;
+}
+
+.cells .item {
+  display: flex;
+  align-items: flex-start;
+  border-bottom: 1rpx solid #eee;
+}
+
+.cells .item image {
+  width: 160rpx;
+  height: 160rpx;
+  margin: 20rpx;
+}
+
+.cells .item .meta {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 10rpx 0;
+  font-size: 30rpx;
+}
+
+.cells .item .meta .name {
+  color: #234;
+  font-size: 28rpx;
+}
+
+.cells .item .meta .phone,
+.cells .item .meta .address {
+  color: #678;
+  font-size: 24rpx;
+}
+
+.cells .item .meta .hours {
+  /*color: #ff69b4;*/
+  color: #456;
+  font-size: 22rpx;
+}
+
+.cells .item .score {
+  margin: 20rpx 20rpx 0 -40rpx;
+  padding: 0 10rpx;
+  background-color: #ee523d;
+  border-radius: 30rpx;
+  color: #fff;
+  font-size: 24rpx;
+  text-align: center;
+}
+
+.loadmore {
+  color: #888;
+  font-size: 30rpx;
+  line-height: 100rpx;
+  text-align: center;
+}
+
+.loadmore.loading::before {
+  content: '';
+  width: 40rpx;
+  height: 40rpx;
+  margin-top: -10rpx;
+  margin-right: 10rpx;
+  display: inline-block;
+  vertical-align: middle;
+  animation: loading 1s steps(12) infinite;
+  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
+  background-size: 100%
+}
+
+@keyframes loading {
+  from {
+    transform: rotate(0deg)
+  }
+  to {
+    transform: rotate(-360deg)
+  }
+}

pages/messages/messages.js

@@ -0,0 +1,76 @@
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    messages: []
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad (options) {
+    const messages = this.data.messages
+    for (var i = 0; i < 18; i++) {
+      messages.push({
+        title: '免费送票！超有内涵的门票。',
+        date: i + ' September',
+        image: 'https://unsplash.it/400/300',
+        summary: '最糟糕的，也许就是最幸运的。'
+      })
+    }
+
+    this.setData({ messages })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady () {
+    const query = wx.createSelectorQuery()
+    query.select('#bottom').boundingClientRect()
+    query.exec(res => wx.pageScrollTo({ scrollTop: res[0].top + 200 }))
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage () {
+
+  }
+})

pages/messages/messages.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "最新消息"
+}

pages/messages/messages.wxml

@@ -0,0 +1,14 @@
+<view class="messages">
+  <view class="item" wx:for="{{messages}}" wx:key="id">
+    <navigator>
+      <text class="title">{{item.title}}</text>
+    </navigator>
+    <text class="date">{{item.date}}</text>
+    <navigator>
+      <image src="{{item.image}}"/>
+    </navigator>
+    <text class="summary">{{item.summary}}</text>
+    <navigator class="expand">Read All</navigator>
+  </view>
+</view>
+<view id="bottom"></view>

pages/messages/messages.wxss

@@ -0,0 +1,62 @@
+.messages {
+  padding: 60rpx 20rpx;
+}
+
+.messages .item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 60rpx;
+  padding: 20rpx 35rpx;
+  border: 1rpx solid #ddd;
+  border-radius: 10rpx;
+  background-color: #fff;
+}
+
+.messages .item:last-child {
+  margin-bottom: 0;
+}
+
+.messages .item .title {
+  font-size: 40rpx;
+  color: #222;
+}
+
+.messages .item .date {
+  margin-bottom: 10rpx;
+  border-bottom: 1rpx solid #eee;
+  font-size: 26rpx;
+  color: #888;
+}
+
+.messages .item image {
+  width: 100%;
+  height: 300rpx;
+  margin: 10rpx 0;
+}
+
+.messages .item .summary {
+  margin-bottom: 10rpx;
+  padding-bottom: 10rpx;
+  border-bottom: 1rpx solid #eee;
+  font-size: 28rpx;
+  color: #444;
+}
+
+.messages .item .expand {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #333;
+  font-size: 30rpx;
+}
+
+.messages .item .expand::after {
+  content: '';
+  display: inline-block;
+  margin-right: 10rpx;
+  height: 10rpx;
+  width: 10rpx;
+  border: 0 solid #ccc;
+  border-width: 3rpx 3rpx 0 0;
+  transform: matrix(1, 1, -1, 1, 0, 0);
+}

pages/profile/profile.js

@@ -0,0 +1,64 @@
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage () {
+
+  }
+})

pages/profile/profile.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "个人中心",
+  "disableScroll": true
+}

pages/profile/profile.wxml

@@ -0,0 +1,15 @@
+<view class="avatar">
+  <image src="/assets/avatar.png" bindtap="loginHandle"></image>
+</view>
+
+<view class="cells">
+  <navigator class="item">个人资料</navigator>
+  <navigator class="item">我的优惠券</navigator>
+  <view class="divider"></view>
+  <navigator class="item">常见问题</navigator>
+  <navigator class="item">使用条款</navigator>
+  <navigator class="item">隐私权政策</navigator>
+  <navigator class="item">联系客服</navigator>
+  <view class="divider"></view>
+  <navigator url="/pages/settings/settings" class="item">设置</navigator>
+</view>

pages/profile/profile.wxss

@@ -0,0 +1,44 @@
+.avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 400rpx;
+  background-color: #3a4861;
+}
+
+.avatar image {
+  width: 220rpx;
+  height: 220rpx;
+  border-radius: 50%;
+  box-shadow: 0 0 0 10rpx #777f92;
+}
+
+.cells {
+  margin-top: 20rpx;
+}
+
+.cells .item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  background-color: #fff;
+  font-size: 30rpx;
+}
+
+.cells .item::after {
+  content: '';
+  display: inline-block;
+  height: 10rpx;
+  width: 10rpx;
+  border: 0 solid #ccc;
+  border-width: 3rpx 3rpx 0 0;
+  transform: matrix(1, 1, -1, 1, 0, 0);
+}
+
+.cells .divider {
+  height: 20rpx;
+  box-shadow: inset 0 1rpx 2rpx #eee;
+}

pages/settings/settings.js

@@ -0,0 +1,66 @@
+// pages/settings/settings.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+  
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+  
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+  
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+  
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+  
+  }
+})

pages/settings/settings.json

@@ -0,0 +1 @@
+{}

pages/settings/settings.wxml

@@ -0,0 +1,27 @@
+<view class="cells">
+  <view class="item">
+    <text>个人资料</text>
+    <switch/>
+  </view>
+  <view class="item">
+    <text>我的优惠券</text>
+    <switch/>
+  </view>
+  <view class="divider"></view>
+  <view class="item">
+    <text>常见问题</text>
+    <switch/>
+  </view>
+  <view class="item">
+    <text>使用条款</text>
+    <switch/>
+  </view>
+  <view class="item">
+    <text>隐私权政策</text>
+    <switch/>
+  </view>
+  <view class="item">
+    <text>联系客服</text>
+    <switch/>
+  </view>
+</view>

pages/settings/settings.wxss

@@ -0,0 +1,19 @@
+.cells {
+  margin-top: 20rpx;
+}
+
+.cells .item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  padding: 20rpx 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  background-color: #fff;
+  font-size: 30rpx;
+}
+
+.cells .divider {
+  height: 20rpx;
+  box-shadow: inset 0 1rpx 2rpx #eee;
+}

project.config.json

@@ -0,0 +1,28 @@
+{
+	"description": "项目配置文件。",
+	"setting": {
+		"urlCheck": true,
+		"es6": true,
+		"postcss": true,
+		"minified": true,
+		"newFeature": true
+	},
+	"compileType": "miniprogram",
+	"libVersion": "1.6.4",
+	"appid": "wxe312e870ce0d4640",
+	"projectname": "Locally",
+	"condition": {
+		"search": {
+			"current": -1,
+			"list": []
+		},
+		"conversation": {
+			"current": -1,
+			"list": []
+		},
+		"miniprogram": {
+			"current": -1,
+			"list": []
+		}
+	}
+}

utils/fetch.js

@@ -0,0 +1,17 @@
+const app = getApp()
+
+module.exports = (url, data, method = 'GET', header = {}) => {
+  wx.showLoading({ title: 'Loading...' })
+  return new Promise((resolve, reject) => {
+    wx.request({
+      url: app.config.apiBase + url,
+      data,
+      header,
+      method,
+      dataType: 'json',
+      success: resolve,
+      fail: reject,
+      complete: wx.hideLoading
+    })
+  })
+}