diff --git a/src/pages/afterSales/list/index.config.js b/src/pages/afterSales/list/index.config.js index 4688c99..b8d1b59 100644 --- a/src/pages/afterSales/list/index.config.js +++ b/src/pages/afterSales/list/index.config.js @@ -4,5 +4,6 @@ */ export default { - navigationBarTitleText: '售后列表' + navigationBarTitleText: '售后列表', + disableScroll: true } diff --git a/src/pages/afterSales/list/index.js b/src/pages/afterSales/list/index.js index 686eb02..b5f15fb 100644 --- a/src/pages/afterSales/list/index.js +++ b/src/pages/afterSales/list/index.js @@ -285,6 +285,7 @@ export default class List extends PureComponent { div, > view { - transform: none; - -webkit-transform: none; - } + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + -ms-transform: none; } } diff --git a/src/pages/planSelection/index.js b/src/pages/planSelection/index.js index e267c25..8d8a321 100644 --- a/src/pages/planSelection/index.js +++ b/src/pages/planSelection/index.js @@ -4,7 +4,7 @@ */ import { PureComponent } from 'react' -import { View, ScrollView } from '@tarojs/components' +import { View, ScrollView, Input, Text } from '@tarojs/components' import api from '@/api' import Taro from '@tarojs/taro' import { SpRadio, SpLoading, SpNote, SpToast } from '@/components' @@ -29,6 +29,14 @@ function filterShopsValidTrueOrFalseOnly(list) { return list.filter((item) => isValidExplicitTrueOrFalse(item?.is_valid)) } +function filterShopsByKeyword(list, keyword) { + const validList = filterShopsValidTrueOrFalseOnly(list) + const trimmed = (keyword || '').trim() + if (!trimmed) return validList + const lowerKeyword = trimmed.toLowerCase() + return validList.filter((item) => (item?.name || '').toLowerCase().includes(lowerKeyword)) +} + @connect( ({ planSelection }) => ({ planSelection @@ -42,11 +50,24 @@ export default class PlanSelection extends PureComponent { super(props) this.state = { isActive: null, + allShopList: [], shopList: [], + searchKeyword: '', loading: false } } + onSearchChange = (value) => { + this.setState((prevState) => ({ + searchKeyword: value, + shopList: filterShopsByKeyword(prevState.allShopList, value) + })) + } + + onSearchClear = () => { + this.onSearchChange('') + } + activeHandle = async (activeShop) => { this.props.add(activeShop) this.setState({ @@ -68,10 +89,12 @@ export default class PlanSelection extends PureComponent { console.log('===', S.getAuthToken()) const result = await api.planSelection.getShopList(data) console.log(result) - this.setState({ - shopList: filterShopsValidTrueOrFalseOnly(result.list), + const allShopList = result.list || [] + this.setState((prevState) => ({ + allShopList, + shopList: filterShopsByKeyword(allShopList, prevState.searchKeyword), loading: false - }) + })) } componentDidMount() { @@ -79,23 +102,47 @@ export default class PlanSelection extends PureComponent { } render() { - const { isActive, shopList, loading } = this.state + const { isActive, allShopList, shopList, searchKeyword, loading } = this.state return ( 选择您的店铺工作台 没有找到?请联系您的超级管理员 + + + + this.onSearchChange(e.detail.value)} + /> + {!!searchKeyword && ( + + )} + + - + {loading && 正在加载...} - {shopList.length > 0 && ( + {!loading && shopList.length > 0 && ( )} - {shopList.length <= 0 && 快去添加店铺吧~} + {!loading && allShopList.length <= 0 && ( + 快去添加店铺吧~ + )} + {!loading && allShopList.length > 0 && shopList.length <= 0 && ( + 未找到相关店铺 + )} diff --git a/src/pages/planSelection/index.scss b/src/pages/planSelection/index.scss index a4d6b85..e154eb4 100644 --- a/src/pages/planSelection/index.scss +++ b/src/pages/planSelection/index.scss @@ -3,34 +3,111 @@ * See LICENSE file for license details. */ -.page-planSelection{ +.page-planSelection { position: absolute; height: 100%; width: 100%; left: 0; - top:0; + top: 0; background: #fff; - .welcome-scrollview { - padding:50px 50px ; - box-sizing: border-box; + display: flex; + flex-direction: column; + .welcome-scrollview { + flex: 1; + display: flex; + flex-direction: column; + padding: 50px 50px 120px; + box-sizing: border-box; + overflow: hidden; + min-height: 0; } - .title{ - color: #111A34; + + .title { + flex-shrink: 0; + color: #111a34; font-size: 52px; } - .tips{ + + .tips { + flex-shrink: 0; margin-top: 6px; font-size: 28px; - color: #858B9C; - } - .box{ - @include page-scroll(160px,0); - padding:50px 50px ; - // position: relative; - box-sizing: border-box; - height: calc(100% - 380px); - margin-top: 94px; + color: #858b9c; } + .search-bar { + flex-shrink: 0; + margin-top: 40px; + + .search-input { + @include flexbox(); + align-items: center; + height: 80px; + padding: 0 24px; + background: #eff0f0; + border-radius: 8px; + box-sizing: border-box; + + &__icon { + flex-shrink: 0; + font-size: 32px; + color: #a6a6a7; + margin-right: 16px; + line-height: 1; + } + + &__field { + flex: 1; + width: 100%; + min-width: 0; + height: 80px; + font-size: 28px; + line-height: 80px; + color: #111a34; + background: transparent; + border: none; + outline: none; + padding: 0; + margin: 0; + box-sizing: border-box; + + input, + .weui-input { + width: 100%; + height: 80px; + line-height: 80px; + font-size: 28px; + color: #111a34; + background: transparent; + border: none; + outline: none; + padding: 0; + margin: 0; + box-sizing: border-box; + + &::-webkit-input-placeholder { + font-size: 28px; + color: #bababa; + line-height: 80px; + } + } + } + + &__clear { + flex-shrink: 0; + font-size: 28px; + color: #bababa; + line-height: 1; + padding-left: 16px; + } + } + } + + .box { + flex: 1; + min-height: 0; + margin-top: 40px; + box-sizing: border-box; + } }