补正项目 searchbar优化

pages/copyright/refund/refund.wxss

@@ -1,8 +1,3 @@
-.ic-user {
-    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzOTg4MzkwNjkwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MDkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxMiAxMDI0QzIyOS4yMDUzMzMgMTAyNCAwIDc5NC43OTQ2NjcgMCA1MTJTMjI5LjIwNTMzMyAwIDUxMiAwczUxMiAyMjkuMjA1MzMzIDUxMiA1MTItMjI5LjIwNTMzMyA1MTItNTEyIDUxMnogbTAtNDk2LjQ2OTMzM2ExNzAuNjY2NjY3IDE3MC42NjY2NjcgMCAxIDAgMC0zNDEuMzMzMzM0IDE3MC42NjY2NjcgMTcwLjY2NjY2NyAwIDAgMCAwIDM0MS4zMzMzMzR6IG0yNjMuNzY1MzMzIDI2My43MjI2NjZhMjYzLjc2NTMzMyAyNjMuNzY1MzMzIDAgMSAwLTUyNy41MzA2NjYgMGg1MjcuNTMwNjY2eiIgcC1pZD0iMzQxMCIgZmlsbD0iIzEyOTZkYiI+PC9wYXRoPjwvc3ZnPg==');
-    background-size: cover;
-    background-repeat: no-repeat;
-}
 
 .condition-box {
     position: fixed;
@@ -64,14 +59,6 @@
     height: 100vh;
 }
 
-.condition-content.show {
-    opacity: 1;
-}
-
-.condition-content-hidde {
-    opacity: 0;
-}
-
 .condition-content-container {
     background-color: var(--divider-color);
     padding: 0rpx 30rpx;
@@ -184,94 +171,6 @@
     color: var(--white-color);
 }
 
-/* 
-.search-box {
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    width: 100%;
-    padding: 20rpx 30rpx 0rpx 30rpx;
-}
-
-.search-input-box {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.search-container {
-    position: relative;
-    align-self: center;
-    border-radius: 5px;
-    background-color: var(--white-color);
-    padding: 5px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-}
-.search-content{
-    display: flex;
-    flex-direction: row;
-}
-.search-input {
-    box-sizing: border-box;
-    color: var(--text-color);
-    font-size: 28rpx;
-    text-align: center;
-    flex: 1;
-}
-
-.search-input::after {
-    content: '';
-    position: absolute;
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 20px;
-    height: 20px;
-    margin-top: -1px;
-    background-size: cover;
-    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSI2NCA2NCA4OTYgODk2IiB3aWR0aD0iMTQiIGhlaWdodD0iMTkiIHN0eWxlPSIiIGZpbHRlcj0ibm9uZSI+CiAgICAKICAgIDxnPgogICAgPHBhdGggZD0iTTkwOS42IDg1NC41TDY0OS45IDU5NC44QzY5MC4yIDU0Mi43IDcxMiA0NzkgNzEyIDQxMmMwLTgwLjItMzEuMy0xNTUuNC04Ny45LTIxMi4xLTU2LjYtNTYuNy0xMzItODcuOS0yMTIuMS04Ny45cy0xNTUuNSAzMS4zLTIxMi4xIDg3LjlDMTQzLjIgMjU2LjUgMTEyIDMzMS44IDExMiA0MTJjMCA4MC4xIDMxLjMgMTU1LjUgODcuOSAyMTIuMUMyNTYuNSA2ODAuOCAzMzEuOCA3MTIgNDEyIDcxMmM2NyAwIDEzMC42LTIxLjggMTgyLjctNjJsMjU5LjcgMjU5LjZhOC4yIDguMiAwIDAgMCAxMS42IDBsNDMuNi00My41YTguMiA4LjIgMCAwIDAgMC0xMS42ek01NzAuNCA1NzAuNEM1MjggNjEyLjcgNDcxLjggNjM2IDQxMiA2MzZzLTExNi0yMy4zLTE1OC40LTY1LjZDMjExLjMgNTI4IDE4OCA0NzEuOCAxODggNDEyczIzLjMtMTE2LjEgNjUuNi0xNTguNEMyOTYgMjExLjMgMzUyLjIgMTg4IDQxMiAxODhzMTE2LjEgMjMuMiAxNTguNCA2NS42UzYzNiAzNTIuMiA2MzYgNDEycy0yMy4zIDExNi4xLTY1LjYgMTU4LjR6IiBmaWxsPSJyZ2JhKDIwNCwyMDQsMjA0LDEpIj48L3BhdGg+CiAgICA8L2c+CiAgPC9zdmc+');
-}
-
-.options-list-box {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    padding-top: 30rpx;
-    flex-wrap: nowrap;
-}
-
-.options-tab-select {
-    white-space: nowrap;
-    line-height: 17px;
-    border-radius: 2px;
-    border: 1rpx solid var(--primary-color-light);
-    background-color: var(--primary-color-light);
-    color: var(--text-brown-color);
-    font-size: 12px;
-    text-align: center;
-    padding: 2px 8px;
-}
-
-
-.options-tab-normal {
-    line-height: 17px;
-    border-radius: 2px;
-    border: 1rpx solid transparent;
-    color: rgba(154, 154, 154, 1);
-    font-size: 12px;
-    text-align: center;
-    white-space: nowrap;
-    padding: 2px 8px;
-} */
-
-
 .add-btn {
     border-radius: 8rpx;
     background-color: var(--btn-green-color);

pages/copyright/repair/repair.js

@@ -33,10 +33,13 @@ Page({
         repairList: [], //开票记录
         typeList: jsonData.typeList,
         selectType: '',
+        tempSelType: '',
         kindList: jsonData.kindList,
         selectKind: '',
+        tempSelKind: '',
         stateList: jsonData.stateList,
         selectState: '',
+        tempSelState: '',
         buttons: [{
             text: '关闭'
         }],
@@ -52,6 +55,8 @@ Page({
         downloading: false, //下载文件中
         tempDownloadPro: null, //下载的item
         approveReason: '', //补正原因
+        isShowOptions: false,
+        curOptions: 'state'
     },
 
     /**
@@ -71,24 +76,66 @@ Page({
         })
         this.doRefreshList()
     },
+    chooseLeft(e) {
+        this.setData({
+            curOptions: e.currentTarget.dataset.value
+        })
+    },
+    chooseOptions() {
+        this.setData({
+            tempSelKind: this.data.selectKind,
+            tempSelState: this.data.selectState,
+            tempSelType: this.data.selectType,
+            isShowOptions: !this.data.isShowOptions
+        })
+    },
     chooseType(e) {
         const value = e.currentTarget.dataset.value
         this.setData({
-            selectType: value == this.data.selectType ? '' : value
+            tempSelType: value
         })
-        this.doRefreshList()
     },
     chooseKind(e) {
         const value = e.currentTarget.dataset.value
         this.setData({
-            selectKind: value == this.data.selectKind ? '' : value
+            tempSelKind: value
         })
-        this.doRefreshList()
     },
     chooseState(e) {
         const value = e.currentTarget.dataset.value
         this.setData({
-            selectState: value == this.data.selectState ? '' : value
+            tempSelState: value
+        })
+    },
+    confirmChooseOption() {
+        this.setData({
+            selectState: this.data.tempSelState,
+            selectKind: this.data.tempSelKind,
+            selectType: this.data.tempSelType,
+            tempSelType: '',
+            tempSelState: '',
+            tempSelKind: '',
+            isShowOptions: false
+        })
+        this.doRefreshList()
+    },
+    cancelChooseOption() {
+        this.setData({
+            isShowOptions: false,
+            tempSelType: '',
+            tempSelKind: '',
+            tempSelState: ''
+        })
+    },
+    clearChooseOption() {
+        this.setData({
+            selectType: '',
+            selectKind: '',
+            selectState: '',
+            tempSelKind: '',
+            tempSelType: '',
+            tempSelState: '',
+            isShowOptions: false
         })
         this.doRefreshList()
     },

pages/copyright/repair/repair.wxml

@@ -1,32 +1,63 @@
 <view class="page-container">
-    <view class="search-box">
+    <view class="condition-box">
-        <view class="search-input-box">
+        <view class="condition-input-box">
-            <view class="search-container">
+            <view class="condition-input-container">
-                <input class="search-input" value="{{keywords}}" bindinput="inputKeywords" bindconfirm="doSearchKeyWord" type="text" confirm-type="search" placeholder="请输入项目名称" />
+                <icon class="ml-20" type="search" size="20"></icon>
-                <view wx:if="{{keywords !=''}}" bind:tap="clearSearch" class="icon-clear" style="width: 20px;height: 20px;"></view>
+                <input class="condition-input-text" value="{{keywords}}" bindinput="inputKeywords" bindconfirm="doSearchKeyWord" placeholder-style="font-size:28rpx;" type="text" confirm-type="search" placeholder="项目名称" />
+                <view class="icon-clear size-32 mr-10" wx:if="{{keywords !=''}}" bind:tap="clearSearch"></view>
+                <view bind:tap="chooseOptions" class="condition-option-btn icon-arrow-solid">筛选</view>
             </view>
             <view class="add-btn" bind:tap="applyRepair">申请补正</view>
         </view>
-        <!-- 条件 -->
+        <view class="condition-content {{isShowOptions ? 'show':'hide'}}" hidden="{{!isShowOptions}}">
-        <scroll-view scroll-x>
+            <view class="condition-content-container">
-            <view class="options-list-box">
+                <view class="condition-content-box">
-                <block wx:for="{{stateList}}" wx:key="index">
+                    <view class="condition-content-box-left">
-                    <view class="{{selectState==item.value ? 'options-tab-select':'options-tab-normal'}} ml-20" data-value="{{item.value}}" bind:tap="chooseState">{{item.title}}</view>
+                        <view class="left-item" bind:tap="chooseLeft" data-value="state">
-                </block>
+                            <view class="left-item-line {{curOptions=='state'? 'left-sel-line':'left-normal-line'}}"></view>
-                <view class="divider-h-white"></view>
+                            <view class="left-sel-text">状态</view>
-                <block wx:for="{{typeList}}" wx:key="index">
+                        </view>
-                    <view class="{{selectType==item.value ? 'options-tab-select':'options-tab-normal'}} {{index>0 ? 'ml-20' :''}}" data-value="{{item.value}}" bind:tap="chooseType">{{item.title}}</view>
+                        <view class="left-item" bind:tap="chooseLeft" data-value="kind">
-                </block>
+                            <view class="left-item-line {{curOptions=='kind'? 'left-sel-line':'left-normal-line'}}"></view>
-                <view class="divider-h-white"></view>
+                            <view class="left-sel-text">种类</view>
-                <block wx:for="{{kindList}}" wx:key="index">
+                        </view>
-                    <view class="{{selectKind==item.value ? 'options-tab-select':'options-tab-normal'}} ml-20" data-value="{{item.value}}" bind:tap="chooseKind">{{item.title}}</view>
+                        <view class="left-item" bind:tap="chooseLeft" data-value="type">
-                </block>
+                            <view class="left-item-line {{curOptions=='type'? 'left-sel-line':'left-normal-line'}}"></view>
+                            <view class="left-sel-text">类型</view>
+                        </view>
+                    </view>
+                    <scroll-view class="condition-content-box-scroll-right" scroll-y>
+                        <view class="condition-content-box-right">
+                            <block wx:if="{{curOptions=='state'}}">
+                                <block wx:for="{{stateList}}" wx:key="index">
+                                    <view class="{{tempSelState==item.value ? 'right-item-sel':'right-item-normal'}} condition-content-right-item" data-value="{{item.value}}" bind:tap="chooseState">{{item.title}}</view>
+                                </block>
+                            </block>
+                            <block wx:elif="{{curOptions=='kind'}}">
+                                <block wx:for="{{kindList}}" wx:key="index">
+                                    <view class="{{tempSelKind==item.value ? 'right-item-sel':'right-item-normal'}} condition-content-right-item" data-value="{{item.value}}" bind:tap="chooseKind">{{item.title}}</view>
+                                </block>
+                            </block>
+                            <block wx:else>
+                                <block wx:for="{{typeList}}" wx:key="index">
+                                    <view class="{{tempSelType==item.value ? 'right-item-sel':'right-item-normal'}} condition-content-right-item" data-value="{{item.value}}" bind:tap="chooseType">{{item.title}}</view>
+                                </block>
+                            </block>
+                        </view>
+                    </scroll-view>
+                </view>
+                <view class="condition-content-btns">
+                    <view class="condition-content-btn clear" bind:tap="clearChooseOption">清除</view>
+                    <view class="condition-content-btn cancel" bind:tap="cancelChooseOption">取消</view>
+                    <view class="condition-content-btn confirm" bind:tap="confirmChooseOption">确定</view>
+                </view>
             </view>
-        </scroll-view>
+            <view class="condition-mask" bind:tap="cancelChooseOption"></view>
+        </view>
     </view>
     <view class="content-container">
-        <container-loading loadingState="{{loadingState}}" style="height: 82vh;" bindrefresh="doRefreshList">
+        <container-loading loadingState="{{loadingState}}" style="height: 83vh;" bindrefresh="doRefreshList">
-            <scroll-view scroll-y="{{true}}" style="height: 82vh;padding-bottom: 40px;" bindrefresherrefresh="doRefreshList" refresher-enabled refresher-triggered="{{listRefreshTrig}}" bindscrolltolower="doLoadMore" lower-threshold='30'>
+            <scroll-view scroll-y="{{true}}" style="height: 83vh;padding-bottom: 40px;" bindrefresherrefresh="doRefreshList" refresher-enabled refresher-triggered="{{listRefreshTrig}}" bindscrolltolower="doLoadMore" lower-threshold='30'>
                 <view class="repair-list-box">
                     <block wx:for="{{repairList}}" wx:key="index">
                         <mp-slideview id="mp-slide-{{index}}" buttons="{{slideBtns}}" icon="{{true}}" data-value="{{item}}" bindshow="show" bindbuttontap="slideButtonTap" class="{{index > 0 ? 'mt-20':''}}">

pages/copyright/repair/repair.wxss

@@ -1,11 +1,4 @@
-.ic-user {
+.condition-box {
-    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzOTg4MzkwNjkwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MDkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxMiAxMDI0QzIyOS4yMDUzMzMgMTAyNCAwIDc5NC43OTQ2NjcgMCA1MTJTMjI5LjIwNTMzMyAwIDUxMiAwczUxMiAyMjkuMjA1MzMzIDUxMiA1MTItMjI5LjIwNTMzMyA1MTItNTEyIDUxMnogbTAtNDk2LjQ2OTMzM2ExNzAuNjY2NjY3IDE3MC42NjY2NjcgMCAxIDAgMC0zNDEuMzMzMzM0IDE3MC42NjY2NjcgMTcwLjY2NjY2NyAwIDAgMCAwIDM0MS4zMzMzMzR6IG0yNjMuNzY1MzMzIDI2My43MjI2NjZhMjYzLjc2NTMzMyAyNjMuNzY1MzMzIDAgMSAwLTUyNy41MzA2NjYgMGg1MjcuNTMwNjY2eiIgcC1pZD0iMzQxMCIgZmlsbD0iIzEyOTZkYiI+PC9wYXRoPjwvc3ZnPg==');
-    background-size: cover;
-    background-repeat: no-repeat;
-}
-
-
-.search-box {
     position: fixed;
     top: 0;
     left: 0;
@@ -13,81 +6,180 @@
     flex-direction: column;
     box-sizing: border-box;
     width: 100%;
-    padding: 20rpx 30rpx 0rpx 30rpx;
+    z-index: 99;
 }
 
-.search-input-box {
+.condition-input-box {
     display: flex;
     flex-direction: row;
     align-items: center;
+    padding: 20rpx 30rpx 0rpx 30rpx;
 }
 
-.search-container {
+.condition-input-container {
-    position: relative;
+    display: flex;
-    align-self: center;
+    flex-direction: row;
-    border-radius: 5px;
+    align-items: center;
-    background-color: var(--white-color);
+    background-color: white;
-    padding: 5px;
+    padding: 10rpx;
+    border-radius: 10rpx;
+    flex: 1;
+}
+
+.condition-option-btn {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    flex: 1;
+    border-radius: 15rpx;
+    padding: 4rpx 15rpx;
+    font-size: 20rpx;
+    background-color: var(--divider-color);
 }
 
-.search-input {
+.condition-option-btn:active {
-    box-sizing: border-box;
+    background-color: var(--gray-bg-color);
-    color: var(--text-color);
+}
+
+.condition-input-text {
     font-size: 28rpx;
-    text-align: center;
     flex: 1;
+    text-align: center;
+    margin-right: 10rpx;
 }
 
-.search-input::after {
+.condition-content {
-    content: '';
+    margin-top: 5rpx;
-    position: absolute;
+    background-color: var(--bg-gray-shade-color);
-    left: 10px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 20px;
-    height: 20px;
-    margin-top: -1px;
-    background-size: cover;
-    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSI2NCA2NCA4OTYgODk2IiB3aWR0aD0iMTQiIGhlaWdodD0iMTkiIHN0eWxlPSIiIGZpbHRlcj0ibm9uZSI+CiAgICAKICAgIDxnPgogICAgPHBhdGggZD0iTTkwOS42IDg1NC41TDY0OS45IDU5NC44QzY5MC4yIDU0Mi43IDcxMiA0NzkgNzEyIDQxMmMwLTgwLjItMzEuMy0xNTUuNC04Ny45LTIxMi4xLTU2LjYtNTYuNy0xMzItODcuOS0yMTIuMS04Ny45cy0xNTUuNSAzMS4zLTIxMi4xIDg3LjlDMTQzLjIgMjU2LjUgMTEyIDMzMS44IDExMiA0MTJjMCA4MC4xIDMxLjMgMTU1LjUgODcuOSAyMTIuMUMyNTYuNSA2ODAuOCAzMzEuOCA3MTIgNDEyIDcxMmM2NyAwIDEzMC42LTIxLjggMTgyLjctNjJsMjU5LjcgMjU5LjZhOC4yIDguMiAwIDAgMCAxMS42IDBsNDMuNi00My41YTguMiA4LjIgMCAwIDAgMC0xMS42ek01NzAuNCA1NzAuNEM1MjggNjEyLjcgNDcxLjggNjM2IDQxMiA2MzZzLTExNi0yMy4zLTE1OC40LTY1LjZDMjExLjMgNTI4IDE4OCA0NzEuOCAxODggNDEyczIzLjMtMTE2LjEgNjUuNi0xNTguNEMyOTYgMjExLjMgMzUyLjIgMTg4IDQxMiAxODhzMTE2LjEgMjMuMiAxNTguNCA2NS42UzYzNiAzNTIuMiA2MzYgNDEycy0yMy4zIDExNi4xLTY1LjYgMTU4LjR6IiBmaWxsPSJyZ2JhKDIwNCwyMDQsMjA0LDEpIj48L3BhdGg+CiAgICA8L2c+CiAgPC9zdmc+');
 }
 
-.options-list-box {
+.condition-mask {
+    background-color: var(--bg-gray-shade-color);
+    height: 100vh;
+}
+
+.condition-content-container {
+    background-color: var(--divider-color);
+    padding: 0rpx 30rpx;
+    height: 350rpx;
+    display: flex;
+    flex-direction: column;
+}
+
+.condition-content-box {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    flex: 1;
-    padding-top: 30rpx;
+    padding: 20rpx;
-    flex-wrap: nowrap;
 }
 
-.options-tab-select {
+.condition-content-box-left {
+    display: flex;
+    flex-direction: column;
+    flex: .2;
+    border-right: 1rpx solid var(--white-color);
+    height: 100%;
+}
+
+.condition-content-box-scroll-right {
+    flex: .8;
+    height: 230rpx;
+    padding: 0rpx 20rpx;
+}
+
+.condition-content-box-right {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.left-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10rpx 0rpx;
+}
+
+.left-item-line {
+    width: 8rpx;
+    height: 30rpx;
+    border-radius: 5rpx;
+}
+
+.left-sel-line {
+    background-color: var(--primary-color);
+    color: var(--text-brown-color)
+}
+
+.left-normal-line {
+    background-color: var(--divider-color);
+    color: var(--text-gray-desc-color)
+}
+
+.left-sel-text {
+    font-size: 28rpx;
+    margin-left: 10rpx;
+    color: var(--text-color)
+}
+
+.left-sel {
+    border-left: 5rpx solid var(--primary-color);
+    padding-left: 10rpx;
+}
+
+
+
+.condition-content-right-item {
     white-space: nowrap;
-    line-height: 17px;
+    line-height: 28rpx;
-    border-radius: 2px;
+    height: 28rpx;
-    border: 1rpx solid var(--primary-color-light);
+    border-radius: 10rpx;
-    background-color: var(--primary-color-light);
+    font-size: 24rpx;
+    text-align: center;
+    padding: 5rpx 10rpx;
+    margin: 10rpx;
     color: var(--text-brown-color);
-    font-size: 12px;
+}
-    text-align: center;
+
-    padding: 2px 8px;
+.right-item-sel {
+    background-color: var(--primary-color-light);
 }
 
 
-.options-tab-normal {
+.right-item-normal {
-    line-height: 17px;
+    background-color: transparent;
-    border-radius: 2px;
-    border: 1rpx solid transparent;
-    color: rgba(154, 154, 154, 1);
-    font-size: 12px;
-    text-align: center;
-    white-space: nowrap;
-    padding: 2px 8px;
 }
 
+.condition-content-btns {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-bottom: 20rpx;
+    margin-top: 10rpx;
+}
+
+.condition-content-btn {
+    font-size: 28rpx;
+    padding: 5rpx 60rpx;
+    text-align: center;
+    border-radius: 8rpx;
+}
+
+.cancel {
+    background-color: var(--white-color);
+    color: var(--text-gray-color);
+}
+
+.clear {
+    background-color: var(--white-color);
+    color: var(--text-gray-color);
+}
+
+.confirm {
+    background-color: var(--btn-green-color);
+    color: var(--white-color);
+}
 
 .add-btn {
     border-radius: 8rpx;
@@ -108,7 +200,7 @@
 
 .content-container {
     height: 82vh;
-    margin-top: 80px;
+    margin-top: 70rpx;
 }
 
 .bottom-btn {