退款项目 searchbar优化
This commit is contained in:
parent
8e74fadf1b
commit
59f769be18
10
app.wxss
10
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;
|
||||
}
|
@ -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('正在刷新...')
|
||||
|
@ -1,17 +1,38 @@
|
||||
<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="applyRefund">申请退款</view>
|
||||
</view>
|
||||
<!-- 条件 -->
|
||||
<view class="options-list-box">
|
||||
<block wx:for="{{stateList}}" wx:key="index">
|
||||
<view class="{{selectState==item.value ? 'options-tab-select':'options-tab-normal'}}" data-value="{{item.value}}" bind:tap="chooseState">{{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">
|
||||
<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">
|
||||
|
@ -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;
|
||||
}
|
@ -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);
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user