商品分类搜索框&我的-鱼市说明

project.private.config.json

@@ -10,6 +10,13 @@
     "miniprogram": {
       "list": [
         {
+          "name": "pages/memberSub/productClassify/index",
+          "pathName": "pages/memberSub/productClassify/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "pages/indexSub/productDetail/index",
           "pathName": "pages/indexSub/productDetail/index",
           "query": "id=19408&isSeckill=true&shareUserId=&tagTitle=%E6%9D%A5%E9%B1%BC%E5%B8%82%20%E5%93%81%E5%92%96%E5%95%A1&isShare=false&isShowBack=false",

src/app.config.js

@@ -38,7 +38,8 @@ export default defineAppConfig({
       root: "pages/mineSub",
       pages: [
         "infoEdit/index",
-        "userSpecification/index"
+        "userSpecification/index",
+        "explain/index"
       ]
     },
     {

src/pages/indexSub/activity/index.jsx

@@ -252,7 +252,7 @@ export default class Index extends Component {
         )}
         <Image
           className="bottom-title-img"
-          src="https://yushi.tos-cn-beijing.volces.com/activity/titleImgOne.png"
+          src="https://yushi.tos-cn-beijing.volces.com/activity/titleImgTwo.png"
           mode="widthFix"
         />
         {/* 商品列表盒子 */}

src/pages/memberSub/productClassify/index.jsx

@@ -1,6 +1,6 @@
 import { Component } from "react";
-import { View } from "@tarojs/components";
-import { AtTabs } from "taro-ui";
+import { View, Input } from "@tarojs/components";
+import { AtTabs, AtIcon } from "taro-ui";
 import "./index.less";
 import Taro from "@tarojs/taro";
 import ProductList from "../../../components/index/ProductList";
@@ -19,12 +19,14 @@ export default class Index extends Component {
     loading: false, //加载状态
     totalPages: 1, // 添加总页数
     tabList: [], // 所有闲鱼tags
+    value: "", // 搜索
   };
   handleClick(value) {
     this.setState(
       {
         current: value,
         page: 1,
+        value: "",
       },
       () => {
         Taro.pageScrollTo({
@@ -47,6 +49,7 @@ export default class Index extends Component {
       tag_name: this.state.tabList[this.state.current].title,
       page,
       page_size: 10,
+      search_name: this.state.value,
     });
 
     this.setState((prevState) => ({
@@ -72,6 +75,14 @@ export default class Index extends Component {
       }
     );
   };
+  // 输入
+  handleChange = (e) => {
+    this.setState({ value: e.target.value });
+  };
+  // 搜索
+  handleSearch = () => {
+    this.getBrowseShopProductList(true);
+  };
   // 添加商品
   onAddProduct = (productId, index) => {
     addShopProduct({
@@ -107,12 +118,37 @@ export default class Index extends Component {
   render() {
     return (
       <View className="index">
-        <AtTabs
-          scroll
-          current={this.state.current}
-          tabList={this.state.tabList}
-          onClick={this.handleClick.bind(this)}
-        ></AtTabs>
+        {/* 顶部固定 */}
+        <View className="top-fixed">
+          <AtTabs
+            scroll
+            current={this.state.current}
+            tabList={this.state.tabList}
+            onClick={this.handleClick.bind(this)}
+          ></AtTabs>
+          {/* 搜索 */}
+          <View className="search-container">
+            <View className="search-bar">
+              <AtIcon
+                className="search-icon"
+                value="search"
+                size="20"
+                color="#ACACAC"
+              ></AtIcon>
+              <Input
+                type="text"
+                className="search-input"
+                placeholder=""
+                value={this.state.value}
+                onInput={this.handleChange}
+              />
+              <View onClick={this.handleSearch} className="search-button">
+                搜索
+              </View>
+            </View>
+          </View>
+        </View>
+        {/* 商品列表 */}
         <ProductList
           loading={this.state.loading}
           productList={this.state.productList}

src/pages/memberSub/productClassify/index.less

@@ -1,21 +1,27 @@
 .index {
     background-color: #f9f9f9;
     padding-bottom: 160px;
-    padding-top: 80px;
+    padding-top: 204px;
     box-sizing: border-box;
-    .at-tabs__header{
+
+    .top-fixed {
         position: fixed;
         top: 0;
         width: 100%;
-        z-index: 1;
+        z-index: 999;
+        background-color: #fff;
+        // .at-tabs__header {
+        // }
     }
+
     scroll-view ::-webkit-scrollbar {
         appearance: none;
         color: transparent;
         display: none;
         width: 0;
         height: 0;
-      }
+    }
+
     .at-tabs__item {
         color: #787878;
     }
@@ -28,6 +34,43 @@
         background-color: #f3e801;
     }
 
+    // 搜索
+    .search-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        background-color: #fff;
+        padding: 20px 34px;
+
+        .search-bar {
+            width: 90%;
+            display: flex;
+            align-items: center;
+            border-radius: 14px;
+            padding: 18px;
+            background-color: #f6f6f6;
+
+            .search-icon {
+                margin-right: 18px;
+            }
+
+            .search-input {
+                flex: 1;
+                border: none;
+                outline: none;
+                background-color: transparent;
+            }
+
+            .search-button {
+                font-weight: 500;
+                font-size: 28px;
+                color: #FAA803;
+            }
+        }
+
+    }
+
     .bottom-button {
         width: 100%;
         height: 88px;

src/pages/mine/index.jsx

@@ -195,6 +195,17 @@ export default class Index extends Component {
               arrow="right"
               thumb={norm}
             />
+            <AtListItem
+              hasBorder={false}
+              onClick={() =>
+                Taro.navigateTo({
+                  url: `/pages/mineSub/explain/index`,
+                })
+              }
+              title="鱼市说明"
+              arrow="right"
+              thumb='https://yushi.tos-cn-beijing.volces.com/mine/explain.png'
+            />
             {/* <View className="line"></View> */}
             {/* <AtListItem
               hasBorder={false}

src/pages/mineSub/explain/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '鱼市说明'
+})

src/pages/mineSub/explain/index.jsx

@@ -0,0 +1,28 @@
+import { Component } from 'react'
+import { View, RichText } from '@tarojs/components'
+import './index.less'
+import { getUserAgreement } from '../../../service'
+export default class Index extends Component {
+  state = {
+    agreement: ''
+  }
+  componentDidMount () { 
+    this.getUserAgreement()
+  }
+  // 获取用户协议
+  getUserAgreement = async () => {
+    const res = await getUserAgreement({
+      type:2
+    })
+    this.setState({
+      agreement: res.content
+    })
+  }
+  render () {
+    return (
+      <View className='index'>
+        {this.state.agreement && <RichText nodes={this.state.agreement} />}
+      </View>
+    )
+  }
+}

src/pages/mineSub/explain/index.less

@@ -0,0 +1,6 @@
+.index {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+  box-sizing: border-box;
+}

src/pages/mineSub/userSpecification/index.less

@@ -1,4 +1,6 @@
 .index {
   padding: 20rpx;
   background-color: #f5f5f5;
+  min-height: 100vh;
+  box-sizing: border-box;
 }