退款项目 searchbar优化

app.wxss

@@ -279,4 +279,14 @@
 .size-128 {
     width: 128rpx;
     height: 128rpx;
+}
+
+.icon-arrow-solid::after {
+    content: '';
+    background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1ODA2NDUxMTAzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE0MDQ5IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik0xMDA0Ljk5MTg5NCAyNDIuOTkzNDRjLTEyLjY1ODA2MS0xMi42Njg1NjgtMjcuNjYyODAyLTE4Ljk5NzU5OS00NS4wMDAyMTItMTguOTk3NTk5SDY0LjAwNDgxNmMtMTcuMzQ0NDE1IDAtMzIuMzM4NjQ5IDYuMzI5MDMtNDUuMDA3MjE3IDE4Ljk5NzU5OUM2LjMyOTAzIDI1NS42NzYwMTggMCAyNzAuNjcwMjUxIDAgMjg4LjAwNDE1OWMwIDE3LjMzMDQwNSA2LjMyOTAzIDMyLjMyNDYzOSAxOC45OTc1OTkgNDQuOTk2NzFsNDQ3Ljk5NTE4NCA0NDcuOTk1MTg0YzEyLjY4MjU3OCAxMi42Njg1NjggMjcuNjc2ODEyIDE5LjAxMTYwOSA0NS4wMDcyMTcgMTkuMDExNjA5czMyLjMzODY0OS02LjM0MzA0IDQ0Ljk5NjcxLTE5LjAxMTYwOUwxMDA0Ljk5MTg5NCAzMzIuOTk3MzY2YzEyLjY1NDU1OC0xMi42Njg1NjggMTkuMDA4MTA2LTI3LjY2MjgwMiAxOS4wMDgxMDYtNDQuOTk2NzA5IDAtMTcuMzMwNDA1LTYuMzUzNTQ4LTMyLjMyNDYzOS0xOS4wMDgxMDYtNDUuMDA3MjE3eiIgcC1pZD0iMTQwNTAiIGZpbGw9IiNkYmRiZGIiPjwvcGF0aD48L3N2Zz4=');
+    display: block;
+    background-size: cover;
+    width: 20rpx;
+    height: 20rpx;
+    margin-left: 10rpx;
 }

pages/copyright/refund/refund.js

@@ -21,6 +21,7 @@ Page({
         keywords: '',
         stateList: jsonData.stateList,
         selectState: '',
+        tempSelState: '',
         msgHint: '',
         msgType: 'error',
         msgShow: false,
@@ -35,6 +36,7 @@ Page({
             text: '关闭'
         }],
         tempItem: null,
+        isShowOptions: false
     },
 
     /**
@@ -54,6 +56,37 @@ Page({
         })
         this.getRefundList(true)
     },
+    chooseOptions() {
+        this.setData({
+            isShowOptions: !this.data.isShowOptions,
+            tempSelState: this.data.selectState
+        })
+    },
+    //取消条件
+    cancelChooseOption() {
+        this.setData({
+            isShowOptions: false,
+            tempSelState: ''
+        })
+    },
+    //清除条件
+    clearChooseOption() {
+        this.setData({
+            isShowOptions: false,
+            selectState: '',
+            tempSelState: ''
+        })
+        this.doRefreshList()
+    },
+    //确定条件
+    confirmChooseOption() {
+        this.setData({
+            selectState: this.data.tempSelState,
+            isShowOptions: false,
+            tempSelState: ''
+        })
+        this.doRefreshList()
+    },
     //去退款
     applyRefund() {
         wx.navigateTo({
@@ -77,9 +110,8 @@ Page({
     chooseState(e) {
         const value = e.currentTarget.dataset.value
         this.setData({
-            selectState: value == this.data.selectState ? '' : value
+            tempSelState: value
         })
-        this.doRefreshList()
     },
     doRefreshList() {
         console.log('正在刷新...')

pages/copyright/refund/refund.wxml

@@ -1,17 +1,38 @@
 <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="applyRefund">申请退款</view>
         </view>
-        <!-- 条件 -->
+        <view class="condition-content {{isShowOptions ? 'show':'hide'}}" hidden="{{!isShowOptions}}">
-        <view class="options-list-box">
+            <view class="condition-content-container">
-            <block wx:for="{{stateList}}" wx:key="index">
+                <view class="condition-content-box">
-                <view class="{{selectState==item.value ? 'options-tab-select':'options-tab-normal'}}" data-value="{{item.value}}" bind:tap="chooseState">{{item.title}}</view>
+                    <view class="condition-content-box-left">
-            </block>
+                        <view class="left-item">
+                            <view class="left-sel-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: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>
+                        </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>
+            <view class="condition-mask" bind:tap="cancelChooseOption"></view>
         </view>
     </view>
     <view class="content-container">

pages/copyright/refund/refund.wxss

@@ -4,7 +4,187 @@
     background-repeat: no-repeat;
 }
 
+.condition-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    width: 100%;
+    z-index: 99;
+}
 
+.condition-input-box {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 20rpx 30rpx 0rpx 30rpx;
+}
+
+.condition-input-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: white;
+    padding: 10rpx;
+    border-radius: 10rpx;
+    flex: 1;
+}
+
+.condition-option-btn {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    border-radius: 15rpx;
+    padding: 4rpx 15rpx;
+    font-size: 20rpx;
+    background-color: var(--divider-color);
+}
+
+.condition-option-btn:active {
+    background-color: var(--gray-bg-color);
+}
+
+.condition-input-text {
+    font-size: 28rpx;
+    flex: 1;
+    text-align: center;
+    margin-right: 10rpx;
+}
+
+.condition-content {
+    margin-top: 5rpx;
+    background-color: var(--bg-gray-shade-color);
+}
+
+.condition-mask {
+    background-color: var(--bg-gray-shade-color);
+    height: 100vh;
+}
+
+.condition-content.show {
+    opacity: 1;
+}
+
+.condition-content-hidde {
+    opacity: 0;
+}
+
+.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;
+    flex: 1;
+    padding: 20rpx;
+}
+
+.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;
+}
+
+.left-sel-line {
+    width: 8rpx;
+    height: 30rpx;
+    border-radius: 5rpx;
+    background-color: var(--primary-color);
+}
+
+.left-sel-text {
+    font-size: 28rpx;
+    margin-left: 10rpx;
+}
+
+.left-sel {
+    border-left: 5rpx solid var(--primary-color);
+    padding-left: 10rpx;
+}
+
+
+
+.condition-content-right-item {
+    white-space: nowrap;
+    line-height: 28rpx;
+    height: 28rpx;
+    border-radius: 10rpx;
+    font-size: 24rpx;
+    text-align: center;
+    padding: 5rpx 10rpx;
+    margin: 10rpx;
+    color: var(--text-brown-color);
+}
+
+.right-item-sel {
+    background-color: var(--primary-color-light);
+}
+
+
+.right-item-normal {
+    background-color: transparent;
+}
+
+.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);
+}
+
+/* 
 .search-box {
     position: fixed;
     top: 0;
@@ -34,7 +214,10 @@
     align-items: center;
     flex: 1;
 }
-
+.search-content{
+    display: flex;
+    flex-direction: row;
+}
 .search-input {
     box-sizing: border-box;
     color: var(--text-color);
@@ -86,7 +269,7 @@
     text-align: center;
     white-space: nowrap;
     padding: 2px 8px;
-}
+} */
 
 
 .add-btn {
@@ -108,7 +291,7 @@
 
 .content-container {
     height: 82vh;
-    margin-top: 80px;
+    margin-top: 80rpx;
 }
 
 .bottom-btn {
@@ -637,4 +820,9 @@
     text-align: center;
     color: var(--primary-color);
     font-weight: bold;
+}
+
+.search-container-box {
+    display: flex;
+    flex-direction: row;
 }

pages/index/index.wxss

@@ -260,12 +260,12 @@
 }
 
 .status-gray {
-    background-color: var(--bg-gray-deep-color);
+    background-color: var(--bg-gray-status-light-color);
     color: var(--text-color);
 }
 
 .status-green {
-    background-color: var(--bg-green-status-deep-color);
+    background-color: var(--bg-green-status-light-color);
     color: var(--text-color);
 }
 

static/style/common.wxss

@@ -29,8 +29,11 @@ page {
     --bg-green-color: #78e2846b;
     --bg-green-deep-color: #39C7C1;
     --bg-gray-deep-color: #CCCCCC;
+    --bg-gray-status-light-color: #D5D5D5;
     --bg-green-status-deep-color: #4EAF79;
+    --bg-green-status-light-color: #AFE5C7;
     --bg-red-deep-color: #F7312A;
+    --bg-gray-shade-color: #00000025;
     /* 按钮颜色 */
     --btn-cyan-color: #39C7C1;
     --btn-cyan-active: #39c7c08f;