gaojian/ts_aimz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

补正项目 searchbar优化

Browse Source
This commit is contained in:
itgaojian163 2025-05-09 15:26:45 +08:00
parent 59f769be18
commit 535eccffb5
4 changed files with 251 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
pages/copyright/refund/refund.wxss
View File

@ -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);

57
pages/copyright/repair/repair.js
View File

@ -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()
},

75
pages/copyright/repair/repair.wxml
View File

@ -1,32 +1,63 @@
<view class="page-container">
<view class="search-box">
<view class="search-input-box">
<view class="search-container">
<input class="search-input" value="{{keywords}}" bindinput="inputKeywords" bindconfirm="doSearchKeyWord" type="text" confirm-type="search" placeholder="请输入项目名称" />
<view wx:if="{{keywords !=''}}" bind:tap="clearSearch" class="icon-clear" style="width: 20px;height: 20px;"></view>
<view class="condition-box">
<view class="condition-input-box">
<view class="condition-input-container">
<icon class="ml-20" type="search" size="20"></icon>
<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>
<!-- 条件 -->
<scroll-view scroll-x>
<view class="options-list-box">
<block wx:for="{{stateList}}" wx:key="index">
<view class="{{selectState==item.value ? 'options-tab-select':'options-tab-normal'}} ml-20" data-value="{{item.value}}" bind:tap="chooseState">{{item.title}}</view>
</block>
<view class="divider-h-white"></view>
<block wx:for="{{typeList}}" wx:key="index">
<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>
</block>
<view class="divider-h-white"></view>
<block wx:for="{{kindList}}" wx:key="index">
<view class="{{selectKind==item.value ? 'options-tab-select':'options-tab-normal'}} ml-20" data-value="{{item.value}}" bind:tap="chooseKind">{{item.title}}</view>
</block>
<view class="condition-content {{isShowOptions ? 'show':'hide'}}" hidden="{{!isShowOptions}}">
<view class="condition-content-container">
<view class="condition-content-box">
<view class="condition-content-box-left">
<view class="left-item" bind:tap="chooseLeft" data-value="state">
<view class="left-item-line {{curOptions=='state'? 'left-sel-line':'left-normal-line'}}"></view>
<view class="left-sel-text">状态</view>
</view>
<view class="left-item" bind:tap="chooseLeft" data-value="kind">
<view class="left-item-line {{curOptions=='kind'? 'left-sel-line':'left-normal-line'}}"></view>
<view class="left-sel-text">种类</view>
</view>
<view class="left-item" bind:tap="chooseLeft" data-value="type">
<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">
<scroll-view scroll-y="{{true}}" style="height: 82vh;padding-bottom: 40px;" bindrefresherrefresh="doRefreshList" refresher-enabled refresher-triggered="{{listRefreshTrig}}" bindscrolltolower="doLoadMore" lower-threshold='30'>
<container-loading loadingState="{{loadingState}}" style="height: 83vh;" bindrefresh="doRefreshList">
<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':''}}">

200
pages/copyright/repair/repair.wxss
View File

@ -1,11 +1,4 @@
.ic-user {
background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzOTg4MzkwNjkwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MDkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxMiAxMDI0QzIyOS4yMDUzMzMgMTAyNCAwIDc5NC43OTQ2NjcgMCA1MTJTMjI5LjIwNTMzMyAwIDUxMiAwczUxMiAyMjkuMjA1MzMzIDUxMiA1MTItMjI5LjIwNTMzMyA1MTItNTEyIDUxMnogbTAtNDk2LjQ2OTMzM2ExNzAuNjY2NjY3IDE3MC42NjY2NjcgMCAxIDAgMC0zNDEuMzMzMzM0IDE3MC42NjY2NjcgMTcwLjY2NjY2NyAwIDAgMCAwIDM0MS4zMzMzMzR6IG0yNjMuNzY1MzMzIDI2My43MjI2NjZhMjYzLjc2NTMzMyAyNjMuNzY1MzMzIDAgMSAwLTUyNy41MzA2NjYgMGg1MjcuNTMwNjY2eiIgcC1pZD0iMzQxMCIgZmlsbD0iIzEyOTZkYiI+PC9wYXRoPjwvc3ZnPg==');
background-size: cover;
background-repeat: no-repeat;
}
.search-box {
.condition-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 {
position: relative;
align-self: center;
border-radius: 5px;
background-color: var(--white-color);
padding: 5px;
.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;
flex: 1;
border-radius: 15rpx;
padding: 4rpx 15rpx;
font-size: 20rpx;
background-color: var(--divider-color);
}
.search-input {
box-sizing: border-box;
color: var(--text-color);
.condition-option-btn:active {
background-color: var(--gray-bg-color);
}
.condition-input-text {
font-size: 28rpx;
text-align: center;
flex: 1;
text-align: center;
margin-right: 10rpx;
}
.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+');
.condition-content {
margin-top: 5rpx;
background-color: var(--bg-gray-shade-color);
}
.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;
padding-top: 30rpx;
flex-wrap: nowrap;
flex: 1;
padding: 20rpx;
}
.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;
border-radius: 2px;
border: 1rpx solid var(--primary-color-light);
background-color: var(--primary-color-light);
line-height: 28rpx;
height: 28rpx;
border-radius: 10rpx;
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 {
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;
.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);
}
.add-btn {
border-radius: 8rpx;
@ -108,7 +200,7 @@
.content-container {
height: 82vh;
margin-top: 80px;
margin-top: 70rpx;
}
.bottom-btn {