静态页面

src/components/ScrollPageRefresh/index.jsx

@@ -79,6 +79,8 @@ export default function ScrollPageRefresh (props) {
       })
     }
   }
+  
+  const [Reset] = useState(OnRefresh)
 
   const OnPullUp = () => {
     if (HasNextPage) {

src/components/WuYeBaoXiu/index.jsx

@@ -56,7 +56,7 @@ export default function WuYeBaoXiu () {
 
         {/* 我要报修 */}
         <view className='WoYaoBaoXiu'>
-          <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/BaoXiuQuYu/index` }) }}>
+          <view onClick={() => { Taro.navigateTo({ url: `/pages/WuYe/TianJiaBaoXiu/index` }) }}>
             <text className='iconfont iconjia'></text>
             <text>我要报修</text>
           </view>

src/pages.js

@@ -162,6 +162,15 @@ const Shop = [
       eventType: 'shop',
     }
   },
+  {
+    name: '福利搜索',
+    page: 'pages/FuLi/ShangPinFilter/index',
+    auth: ['avatar', 'phone'],
+    track: {
+      event: 'list',
+      eventType: 'shop',
+    }
+  },
   {
     name: '福利-商品详情',
     page: 'pages/FuLi/ShangPinXiangQing/index',

src/pages/FuLi/ShangPinFilter/index.config.js

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '商品搜索'
+}

src/pages/FuLi/ShangPinFilter/index.css

@@ -0,0 +1,105 @@
+.ShangPinXiangQing {
+  width: 100%;
+  min-height: 100%;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+}
+.ShangPinXiangQing > .Info {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+}
+.ShangPinXiangQing > .Info > .Img {
+  width: 100%;
+  padding-bottom: 50%;
+  background: #ccc;
+  position: relative;
+  overflow: hidden;
+}
+.ShangPinXiangQing > .Info > .Img > image {
+  width: 100%;
+  height: 100%;
+}
+.ShangPinXiangQing > .Info > .Title {
+  padding: 20px 30px;
+  position: relative;
+  overflow: hidden;
+}
+.ShangPinXiangQing > .Info > .Title > text {
+  display: block;
+  width: 100%;
+  font-size: 32px;
+  color: #333;
+  font-weight: bold;
+  line-height: 40px;
+}
+.ShangPinXiangQing > .Info > .flex-h {
+  padding: 0 30px 20px;
+  align-items: center;
+}
+.ShangPinXiangQing > .Info > .flex-h > text {
+  font-size: 28px;
+  color: #666;
+  line-height: 40px;
+}
+.ShangPinXiangQing > .Info > .flex-h > text:first-child {
+  color: #F35844;
+}
+.ShangPinXiangQing > .Info > .flex-h > text.flex-item {
+  color: #999;
+}
+.ShangPinXiangQing > .Info > .flex-h > text:last-child {
+  color: #971C21;
+}
+.ShangPinXiangQing > .Detail {
+  position: relative;
+  overflow: hidden;
+  background: #fff;
+  margin-top: 20px;
+}
+.ShangPinXiangQing > .Detail > .Title {
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  padding: 30px 0;
+}
+.ShangPinXiangQing > .Detail > .Title > .Line {
+  height: 2px;
+  background: rgba(0, 0, 0, 0.08);
+  z-index: 1;
+  position: absolute;
+  left: 30px;
+  right: 30px;
+  top: 50%;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+}
+.ShangPinXiangQing > .Detail > .Title > text {
+  display: inline-block;
+  background: #fff;
+  padding: 0 40px;
+  line-height: 40px;
+  z-index: 2;
+  font-size: 28px;
+  color: #666;
+  position: relative;
+}
+.ShangPinXiangQing > .Detail > .BottomBtn {
+  padding: 30px;
+  position: relative;
+  overflow: hidden;
+}
+.ShangPinXiangQing > .Detail > .BottomBtn > text {
+  width: 100%;
+  font-size: 34px;
+  color: #fff;
+  line-height: 98px;
+  background: #ccc;
+  border-radius: 98px;
+  text-align: center;
+  display: block;
+}
+.ShangPinXiangQing > .Detail > .BottomBtn > text.active {
+  background: #F35844;
+}

src/pages/FuLi/ShangPinFilter/index.jsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
+import { Input } from '@tarojs/components'
+import PrizeListItem from '@/components/PrizeListItem/index'
+import ScrollPageRefresh from '@/components/ScrollPageRefresh/index'
+import { useModel } from '@/store'
+import Page from '@/layouts'
+import '@/assets/css/reset.less'
+import '@/assets/css/iconfont.less'
+import './index.less'
+
+export default function ShangPinFilter () {
+
+  const { user } = useModel('user')
+  const [Key, setKey] = useState('')
+  const [PageList, setPageList] = useState([])
+  const [Child, setChild] = useState(null)
+
+  const Refresh = (e) => { // 下拉刷新
+    setPageList(e)
+  }
+
+  const Push = (e) => { // 上拉加载
+    setPageList(PageList.concat(e))
+  }
+
+  const KeyChange = (e) => {
+    setKey(e.detail.value)
+  }
+
+  const SearchConfirm = () => {
+    console.log(Key)
+  }
+
+  return (
+    <Page>
+      <view className='ShangPinFilter flex-v'>
+        <view className='Search'>
+          <view className='flex-h'>
+            <text className='iconfont iconsousuo'></text>
+            <view className='flex-item'>
+              <Input placeholder='输入关键词搜索' confirm-type='search' onInput={KeyChange} value={Key} onConfirm={SearchConfirm}></Input>
+            </view>
+          </view>
+        </view>
+        <view className='flex-item'>
+          <ScrollPageRefresh ApiName={`getGoodsList`} Refresh={Refresh} Push={Push}>
+            <view className='PirzeList'>
+              {
+                PageList.map((item, index) => (
+                  <view key={`PirzeListItem-${index}`}>
+                    <view>
+                      <PrizeListItem Data={item}></PrizeListItem>
+                    </view>
+                  </view>
+                ))
+              }
+            </view>
+          </ScrollPageRefresh>
+        </view>
+      </view>
+    </Page>
+  )
+}

src/pages/FuLi/ShangPinFilter/index.less

@@ -0,0 +1,68 @@
+.ShangPinFilter {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background: #f8f8f8;
+
+  >.Search {
+    padding: 30px;
+    position: relative;
+    overflow: hidden;
+
+    >view {
+      width: 100%;
+      position: relative;
+      background: #fff;
+      border-radius: 80px;
+
+      >text {
+        font-size: 40px;
+        line-height: 80px;
+        width: 80px;
+        text-align: center;
+        color: #666;
+      }
+
+      >view {
+        position: relative;
+        overflow: hidden;
+
+        >input {
+          width: 100%;
+          display: block;
+          font-size: 28px;
+          color: #666;
+          line-height: 80px;
+          height: 80px;
+        }
+      }
+    }
+  }
+
+  >.flex-item {
+    position: relative;
+    overflow: hidden;
+
+    .PirzeList {
+      padding-right: 30px;
+      position: relative;
+      overflow: hidden;
+      font-size: 0;
+      padding-bottom: 30px;
+
+      >view {
+        width: 50%;
+        display: inline-block;
+        vertical-align: middle;
+        margin-bottom: 30px;
+
+        >view {
+          padding-left: 30px;
+          position: relative;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}

src/pages/FuLi/index.jsx

@@ -96,12 +96,12 @@ export default function FuLi () {
                 </view>
 
                 {/* 搜索框 */}
-                {/* <view className='SearchContainer'>
-                <view>
-                  <text className='iconfont iconsousuo'></text>
-                  <text>附近热搜：火锅</text>
+                <view className='SearchContainer'>
+                  <view onClick={() => { Taro.navigateTo({ url: `/pages/FuLi/ShangPinFilter/index` }) }}>
+                    <text className='iconfont iconsousuo'></text>
+                    <text>附近热搜：火锅</text>
+                  </view>
                 </view>
-              </view> */}
 
                 {/* 积分礼品列表 */}
                 <view className='PirzeList'>

src/pages/WoDe/TuiJianErWeiMa/index.jsx

@@ -26,7 +26,7 @@ export default function TuiJianErWeiMa () {
       <view className='TuiJianErWeiMa'>
         <CustomHeader IsFixed={true} BgColor='none' Title='推荐二维码'></CustomHeader>
         <image mode='widthFix' src='https://zhiyun-image.oss-cn-shanghai.aliyuncs.com/xiangsong/img2.jpg'></image>
-        <image mode='widthFix' className='QrCodeImg' src={QrCodeImg}></image>
+        <image mode='widthFix' className='QrCodeImg centerLabel' src={QrCodeImg}></image>
       </view>
     </Page>
   )

src/pages/WuYe/TianJiaBaoXiu/index.jsx

@@ -86,8 +86,16 @@ export default function WuYeTianJiaBaoXiu () {
     <Page>
       <view className='WuYeTianJiaBaoXiu'>
         <view className='Form'>
-          <Input placeholder='简述你的想法' onInput={TitleChange} value={Title}></Input>
+          {/* <Input placeholder='简述你的想法' onInput={TitleChange} value={Title}></Input> */}
           <Textarea placeholder='描述问题详情，以便我们更好的相处' onInput={DescChange} value={Desc}></Textarea>
+          <view className='LabelList'>
+            <text>问题</text>
+            <text>问题</text>
+            <text>问题</text>
+            <text>问题</text>
+            <text>问题</text>
+            <text>问题</text>
+          </view>
         </view>
         <view className='Photo'>
           <view className='Add' onClick={AddImg}>

src/pages/WuYe/TianJiaBaoXiu/index.less

@@ -31,6 +31,28 @@
       margin-top: 20px;
       width: 100%;
     }
+
+    >.LabelList {
+      width: 100%;
+      position: relative;
+      overflow: hidden;
+      font-size: 0;
+      border-top: 2px solid rgba(0, 0, 0, 0.08);
+      padding-top: 10px;
+
+      >text {
+        font-size: 24px;
+        color: #666;
+        line-height: 48px;
+        border: 2px solid rgba(0, 0, 0, 0.08);
+        padding: 0 20px;
+        border-radius: 6px;
+        margin-right: 10px;
+        margin-top: 10px;
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
   }
 
   >.Photo {