静态页面

src/components/PrizeListItem/index.css

@@ -0,0 +1,53 @@
+.PrizeListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+}
+.PrizeListItem > .Img {
+  width: 100%;
+  padding-bottom: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #ccc;
+}
+.PrizeListItem > .Img > image {
+  width: 100%;
+  height: 100%;
+}
+.PrizeListItem > .Info {
+  padding: 10px;
+  position: relative;
+  overflow: hidden;
+}
+.PrizeListItem > .Info > text {
+  font-size: 28px;
+  color: #333;
+  line-height: 40px;
+  display: block;
+  font-weight: bold;
+  height: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.PrizeListItem > .Info > .flex-h {
+  align-items: center;
+}
+.PrizeListItem > .Info > .flex-h > text {
+  font-size: 24px;
+  color: #333;
+  line-height: 40px;
+}
+.PrizeListItem > .Info > .flex-h > text.Count {
+  color: #971C21;
+}
+.PrizeListItem > .Info > .flex-h > text.Num {
+  color: #FF2C28;
+}
+.PrizeListItem > .Info > .flex-h > text:last-child {
+  color: #999;
+}

src/components/PrizeListItem/index.jsx

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
+import './index.less'
+
+export default class PrizeListItem extends Component {
+
+  state = {
+    TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg'
+  }
+
+  componentWillMount () { }
+
+  componentDidMount () { }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    const { TestImg } = this.state
+    return (
+      <view className='PrizeListItem'>
+        <view className='Img'>
+          <image mode='aspectFill' src={TestImg} className='centerLabel'></image>
+        </view>
+        <view className='Info'>
+          <text>沙发垫欧式轻奢</text>
+          <view className='flex-h'>
+            <text className='Count'>70</text>
+            <text className='flex-item'>人已兑换</text>
+            <text className='Num'>30000</text>
+            <text>积分</text>
+          </view>
+        </view>
+      </view >
+    )
+  }
+}

src/components/PrizeListItem/index.less

@@ -0,0 +1,62 @@
+.PrizeListItem {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 12px;
+
+  >.Img {
+    width: 100%;
+    padding-bottom: 100%;
+    position: relative;
+    overflow: hidden;
+    background: #ccc;
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.Info {
+    padding: 10px;
+    position: relative;
+    overflow: hidden;
+
+    >text {
+      font-size: 28px;
+      color: #333;
+      line-height: 40px;
+      display: block;
+      font-weight: bold;
+      height: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+
+    >.flex-h {
+      align-items: center;
+
+      >text {
+        font-size: 24px;
+        color: #333;
+        line-height: 40px;
+
+        &.Count {
+          color: #971C21;
+        }
+
+        &.Num {
+          color: #FF2C28;
+        }
+
+        &:last-child {
+          color: #999;
+        }
+      }
+    }
+  }
+}

src/pages/FuLi/index.config.js

@@ -1,3 +1,4 @@
 export default {
-  navigationBarTitleText: '首页'
+  navigationStyle: 'custom',
+  navigationBarTextStyle: 'white'
 }

src/pages/FuLi/index.css

@@ -0,0 +1,179 @@
+.FuLi {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+}
+.FuLi > .TopBg {
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  background-image: linear-gradient(#ff8d61, #F35844);
+}
+.FuLi > .TopBg > image {
+  width: 100%;
+  height: 100%;
+}
+.FuLi > .flex-item {
+  position: relative;
+  overflow: hidden;
+}
+.FuLi > .flex-item > view {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.FuLi > .flex-item > view .FuLiContent {
+  position: relative;
+  overflow: hidden;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 30px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view {
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 24px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info {
+  align-items: center;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .Icon {
+  width: 132px;
+  height: 132px;
+  background: #ccc;
+  border-radius: 100%;
+  position: relative;
+  overflow: hidden;
+  margin-right: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .Icon > image {
+  width: 100%;
+  height: 100%;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .flex-item {
+  position: relative;
+  overflow: hidden;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .flex-item > text {
+  display: block;
+  font-size: 28px;
+  color: #666;
+  line-height: 40px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > .flex-item > text:first-child {
+  font-size: 32px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > text {
+  line-height: 48px;
+  font-size: 28px;
+  border: 2px solid rgba(243, 88, 68, 0.5);
+  border-radius: 8px;
+  padding: 0 10px;
+  color: rgba(243, 88, 68, 0.5);
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Info > text.active {
+  color: #f35844;
+  border-color: #f35844;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule {
+  align-items: center;
+  border-top: 2px solid rgba(0, 0, 0, 0.08);
+  margin-top: 20px;
+  padding-top: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view {
+  overflow: hidden;
+  font-size: 0;
+  white-space: nowrap;
+  text-align: center;
+  position: relative;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view::after {
+  content: '';
+  display: block;
+  width: 2px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  height: 50px;
+  background: rgba(0, 0, 0, 0.08);
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view:first-child::after {
+  display: none;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view > text {
+  font-size: 28px;
+  color: #333;
+  line-height: 60px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.FuLi > .flex-item > view .FuLiContent > .UserTab > view > .Rule > view > text.iconfont {
+  font-size: 46px;
+  color: #F35844;
+  margin-right: 20px;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer {
+  padding: 0 30px;
+  position: relative;
+  overflow: hidden;
+  margin-top: 30px;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer > view {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  font-size: 0;
+  white-space: nowrap;
+  border-radius: 68px;
+  text-align: center;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer > view > text {
+  font-size: 24px;
+  color: #666;
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 68px;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer > view > text:first-child {
+  margin-right: 10px;
+}
+.FuLi > .flex-item > view .FuLiContent > .SearchContainer > view > text.iconfont {
+  font-size: 36px;
+}
+.FuLi > .flex-item > view .FuLiContent > .PirzeList {
+  padding-right: 30px;
+  position: relative;
+  overflow: hidden;
+  font-size: 0;
+  padding-bottom: 30px;
+}
+.FuLi > .flex-item > view .FuLiContent > .PirzeList > view {
+  width: 50%;
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: 30px;
+}
+.FuLi > .flex-item > view .FuLiContent > .PirzeList > view > view {
+  padding-left: 30px;
+  position: relative;
+  overflow: hidden;
+}

src/pages/FuLi/index.jsx

@@ -1,8 +1,17 @@
 import React, { Component } from 'react'
-import { View, Text } from '@tarojs/components'
+import NavHeader from '../../components/NavHeader/index'
+import PrizeListItem from '../../components/PrizeListItem/index'
+import '../../assets/css/reset.less'
+import '../../assets/css/iconfont.less'
 import './index.less'
 
-export default class Index extends Component {
+export default class FuLi extends Component {
+
+  state = {
+    PirzeList: ['', '', '', '', '', '', '', '', ''],
+    IsPull: false,
+    TestImg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606120989360&di=8610f1678b51e26de6d4c6af39d1cf63&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2F201503%2F19%2F211608ztcq7higicydxhsy.jpg'
+  }
 
   componentWillMount () { }
 
@@ -14,11 +23,88 @@ export default class Index extends Component {
 
   componentDidHide () { }
 
+  OnRefresh () {
+    this.setState({
+      IsPull: true
+    }, () => {
+      window.setTimeout(() => {
+        this.setState({
+          IsPull: false
+        })
+      }, 1000)
+    })
+  }
+
   render () {
+    const { IsPull, TestImg, PirzeList } = this.state
     return (
-      <View className='index'>
-        <Text>Hello world!</Text>
-      </View>
+      <view className='FuLi flex-v'>
+        <NavHeader BgColor='none' Title='福利' IsFixed={true}></NavHeader>
+
+        {/* 顶部背景图 */}
+        <view className='TopBg'>
+          {/* <image mode='aspectFill' src={TestImg} class='centerLabel'></image> */}
+        </view>
+
+        {/* 正文 */}
+        <view className='flex-item'>
+          <view>
+            <scroll-view scroll-y='true' style='height: 100%;' refresher-enabled={true} onrefresherrefresh={this.OnRefresh.bind(this)} refresher-triggered={IsPull} refresher-background='none'>
+              <view className='FuLiContent'>
+
+                {/* 用户面板 */}
+                <view className='UserTab'>
+                  <view>
+                    <view className='Info flex-h'>
+                      <view className='Icon'>
+                        <image mode='aspectFill' src={TestImg} class='centerLabel'></image>
+                      </view>
+                      <view className='flex-item'>
+                        <text>三十而已</text>
+                        <text>积分10</text>
+                      </view>
+                      <text className='active'>签到</text>
+                    </view>
+                    <view className='Rule flex-h'>
+                      <view className='flex-item'>
+                        <text className='iconfont iconjifen'></text>
+                        <text>积分规则</text>
+                      </view>
+                      <view className='flex-item'>
+                        <text className='iconfont iconjifenguize'></text>
+                        <text>积分明细</text>
+                      </view>
+                    </view>
+                  </view>
+                </view>
+
+                {/* 搜索框 */}
+                <view className='SearchContainer'>
+                  <view>
+                    <text className='iconfont iconsousuo'></text>
+                    <text>附近热搜：火锅</text>
+                  </view>
+                </view>
+
+                {/* 积分礼品列表 */}
+                <view className='PirzeList'>
+                  {
+                    PirzeList.map((item, index) => (
+                      <view key={`PirzeListItem-${index}`}>
+                        <view>
+                          <PrizeListItem></PrizeListItem>
+                        </view>
+                      </view>
+                    ))
+                  }
+                </view>
+
+              </view>
+            </scroll-view>
+          </view>
+        </view>
+
+      </view>
     )
   }
 }

src/pages/FuLi/index.less

@@ -0,0 +1,210 @@
+.FuLi {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+
+  >.TopBg {
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    padding-bottom: 56.25%;
+    background-image: linear-gradient(rgba(255, 141, 97, 1, 0.5), #F35844);
+
+    >image {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  >.flex-item {
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+
+      .FuLiContent {
+        position: relative;
+        overflow: hidden;
+
+        >.UserTab {
+          padding: 0 30px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 30px;
+
+          >view {
+            padding: 20px;
+            position: relative;
+            overflow: hidden;
+            background: #fff;
+            border-radius: 24px;
+
+            >.Info {
+              align-items: center;
+
+              >.Icon {
+                width: 132px;
+                height: 132px;
+                background: #ccc;
+                border-radius: 100%;
+                position: relative;
+                overflow: hidden;
+                margin-right: 20px;
+
+                >image {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              >.flex-item {
+                position: relative;
+                overflow: hidden;
+
+                >text {
+                  display: block;
+                  font-size: 28px;
+                  color: #666;
+                  line-height: 40px;
+
+                  &:first-child {
+                    font-size: 32px;
+                    color: #333;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    margin-bottom: 20px;
+                  }
+                }
+              }
+
+              >text {
+                line-height: 48px;
+                font-size: 28px;
+                border: 2px solid rgba(243, 88, 68, 0.5);
+                border-radius: 8px;
+                padding: 0 10px;
+                color: rgba(243, 88, 68, 0.5);
+                margin-left: 20px;
+                margin-right: 20px;
+
+                &.active {
+                  color: rgba(243, 88, 68, 1);
+                  border-color: rgba(243, 88, 68, 1);
+                }
+              }
+            }
+
+            >.Rule {
+              align-items: center;
+              border-top: 2px solid rgba(0, 0, 0, 0.08);
+              margin-top: 20px;
+              padding-top: 20px;
+
+              >view {
+                position: relative;
+                overflow: hidden;
+                font-size: 0;
+                white-space: nowrap;
+                text-align: center;
+                position: relative;
+
+                &::after {
+                  content: '';
+                  display: block;
+                  width: 2px;
+                  position: absolute;
+                  left: 0;
+                  top: 50%;
+                  transform: translateY(-50%);
+                  -webkit-transform: translateY(-50%);
+                  height: 50px;
+                  background: rgba(0, 0, 0, 0.08);
+                }
+
+                &:first-child {
+                  &::after {
+                    display: none;
+                  }
+                }
+
+                >text {
+                  font-size: 28px;
+                  color: #333;
+                  line-height: 60px;
+                  display: inline-block;
+                  vertical-align: middle;
+
+                  &.iconfont {
+                    font-size: 46px;
+                    color: #F35844;
+                    margin-right: 20px;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        >.SearchContainer {
+          padding: 0 30px;
+          position: relative;
+          overflow: hidden;
+          margin-top: 30px;
+
+          >view {
+            position: relative;
+            overflow: hidden;
+            background: #fff;
+            font-size: 0;
+            white-space: nowrap;
+            border-radius: 68px;
+            text-align: center;
+
+            >text {
+              font-size: 24px;
+              color: #666;
+              display: inline-block;
+              vertical-align: middle;
+              line-height: 68px;
+
+              &:first-child {
+                margin-right: 10px;
+              }
+
+              &.iconfont {
+                font-size: 36px;
+              }
+            }
+          }
+        }
+
+        >.PirzeList {
+          padding-right: 30px;
+          position: relative;
+          overflow: hidden;
+          font-size: 0;
+          padding-bottom: 30px;
+
+          >view {
+            width: 50%;
+            display: inline-block;
+            vertical-align: middle;
+            margin-top: 30px;
+            >view {
+              padding-left: 30px;
+              position: relative;
+              overflow: hidden;
+            }
+          }
+        }
+      }
+    }
+  }
+}