123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <template>
- <view class="content">
- <!-- 筛选弹框 -->
- <search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal>
- <view class="page-head">
- 筛选
- <image class="filter-icon" src="@/static/filter.png" @tap="openScreen=true"></image>
- </view>
- <view class="list">
- <view class="list-box">
- <view class="list-time">2020-01-13 15:25:25</view>
- <view class="list-cons">
- <view class="list-imgs">
- <u-image width="80rpx" height="80rpx" src="/static/GLASS.png"></u-image>
- <view class="cls-names">废旧纸张</view>
- </view>
- <view class="list-md">
- <view>
- <text class="red">254</text> 克
- </view>
- <view>13709146191</view>
- </view>
- <view class="list-end">
- <text class="red">32</text> 乐豆
- </view>
- </view>
- </view>
- </view>
- </view>
- </template>
- <script>
- import searchModal from './searchModal.vue'
- export default {
- components: { searchModal },
- data() {
- return {
- openScreen: false,
- searchForm: { // 查询条件
- beginDate: '', // 创建时间默认筛选近7天
- endDate: '', // 创建时间默认筛选近7天
- customerMobile: '' // 手机号
- },
- pageNo: 1, // 当前页码
- pageSize: 10, // 每页条数
- total: 0,
- listdata: []
- }
- },
- methods: {
- // 获取查询参数 刷新列表
- refresh(params){
- this.searchForm = params
- this.listdata = []
- this.total = 0
- this.searchHandle(1)
- },
- searchHandle(){
-
- }
- }
- }
- </script>
- <style lang="less">
- .content{
- width: 100%;
- padding: 20rpx;
- display: flex;
- flex-direction: column;
- height: 100vh;
- .page-head{
- padding: 20rpx;
- }
- .list{
- flex-grow: 1;
- }
- .list-box{
- background: #FFFFFF;
- border-radius: 10rpx;
- padding: 20rpx;
- box-shadow: 2rpx 2rpx 6rpx #eee;
- margin-bottom: 20rpx;
- .list-time{
- font-size: 28rpx;
- }
- .list-cons{
- display: flex;
- align-items: center;
- }
- .list-imgs{
- padding:20rpx 0 0;
- width: 220rpx;
- display: flex;
- align-items: center;
- flex-direction: column;
- justify-content: center;
- .cls-names{
- padding:10rpx 0;
- font-size: 28rpx;
- }
- }
- .list-md{
- flex-grow: 1;
- > view{
- padding:6rpx 0;
- display: flex;
- align-items: center;
- font-size: 30rpx;
- }
- }
- .list-end{
- padding:20rpx;
- font-size: 30rpx;
- display: flex;
- align-items: center;
- .red{
- font-size: 50rpx;
- color: #ff5500;
- }
- }
- .red{
- font-weight: bold;
- color: red;
- font-size: 40rpx;
- margin-right: 8rpx;
- }
- }
- }
- </style>
|