一、配置
<template>
<view>
<mescroll-uni @init="init" :down="downOption" @down="downCallback" :up="upOption" @scroll="scroll" @up="upCallback" :top="top">
<slot />
</mescroll-uni>
</view>
</template>
<script>
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
export default {
name: 'UpDownLoad',
components: {
MescrollUni
},
props: {
callback: {
type: Function
},
top: {
type: Number,
default: 260
}
},
data() {
return {
// 下拉刷新的常用配置
downOption: {
use: true, // 是否启用下拉刷新; 默认true
auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
},
// 上拉加载的常用配置
upOption: {
onScroll:true,
use: true, // 是否启用上拉加载; 默认true
auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
page: {
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
size: 10 // 每页数据的数量,默认10
},
noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: '暂无相关数据'
}
},
mescroll: null
}
},
methods: {
init(mescroll) {
this.mescroll = mescroll;
this.$emit('init',mescroll)
},
downCallback(e){
// console.log('33333', e)
// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
},
scroll(e) {
this.$emit('scrolls', e.scrollTop)
},
upCallback(mescroll) {
this.callback(mescroll)
}
}
}
</script>
<style lang="scss">
</style>
二、实际应用
<template>
<view class="page">
<mescroll-uni @init="mescrollInit" top="24" @down="downCallback" :up="upOption" @up="upCallback"
@emptyclick="emptyClick">
<view class="items" v-for="data in dataList">
<view class="items_top" @click="details(data.id)">
<view class="fun_row">
<view class="fun_row_left">
{{data.carTypeNum}}
</view>
<view class="fun_row_right">
<view class="i" :class="[getStateColor(data.applyStatus)]">
</view>
<view class="fun_row_right_title" style="background: none;"
:class="[getStateColor(data.applyStatus)]">
{{data.apply}}
</view>
</view>
</view>
<view class="row">
客户：{{data.name || ''}}
</view>
<view class="row">
电话：{{data.account || ''}}
</view>
<view class="row">
身份证号：{{data.idCardNumber || ''}}
</view>
<view class="row" v-if="data.applyStatus==7">
放款金额：{{data.lendersAmount || ''}}
</view>
<view class="row">
价格：{{data.minPrice || ''}}
</view>
<view class="row">
品牌：{{data.brandName || ''}}
</view>
<view class="row">
申请时间：{{data.createTime || ''}}
</view>
<view class="row" v-if="data.cause">
驳回原因：{{data.cause || ''}}
</view>
</view>
<view class="items_bum">
<view class="items_bum_li" @click="buChongZiLiao(data.id)" v-if="data.applyStatus==8">
确认
</view>
<view class="items_bum_li" @click="guidang(data.id)"
v-if="data.applyStatus==14 || data.applyStatus==7">
资料归档
</view>
<view class="items_bum_li" @click="details(data.id)">
查看详情
</view>
</view>
</view>
</mescroll-uni>
</view>
</template>
<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import orderMixin from "@/utils/mixin/orderMixin.js"
export default {
mixins: [MescrollMixin, orderMixin],
data() {
return {
Words: '', //搜索的关键字
upOption: {
noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
},
top: "24rpx",
pager: {
currentPage: 1,
maxResultCount: 10
},
dataList: [],
}
},
onLoad() {
this.getList()
},
methods: {
// 判断状态
matchState(state = '', reg) {
return !!String(state).match(reg) //返回true/false
},
async getList() {
//获取练习列表数据
const res = await this.$post(`/biz/sale/installments`, {
current: this.pager.currentPage,
size: this.pager.maxResultCount
})
if (res.data.data.total >= 0) {
if (this.pager.currentPage == 1) {
this.dataList = []
}
this.dataList = this.dataList.concat(res.data.data.records)
}
this.mescroll.endBySize(res.data.data.size, res.data.data.total)
},
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
upCallback(page) {
this.pager.currentPage = page.num; //在第几页
this.pager.maxResultCount = page.size; //展示多少条数据
this.getList()
},
downCallback(page) { // 下拉刷新
this.mescroll.resetUpScroll();
},
buChongZiLiao(id) {
uni.showModal({
title: '提示',
// 提示文字
content: '您确认要关闭此订单吗？',
// 取消按钮的文字自定义
cancelText: "取消",
// showCancel: false,
// 确认按钮的文字自定义
confirmText: "确认",
//删除字体的颜色，颜色最好是十六进制，不然程序发布上线会出问题
confirmColor: '#ef111b',
//取消字体的颜色
cancelColor: '#000000',
success: function(res) {
//变量接this
var that = this
if (res.confirm) {
// 执行确认后的操作
that.guanbiApi(id)
} else {
// 执行取消后的操作
}
}.bind(this)
})
},
// 调关闭接口
async guanbiApi(id) {
const res = await this.$post(`/biz/sale/confirmInstallment`, {
installmentId: id
})
if (res.status) {
this.$ToastOk(`${res.data.msg}`)
this.getList()
}
},
details(id) {
uni.navigateTo({
url: '/pages/xiao_shou_duan/ding_dan_xiang_qing?id=' + id
})
},
// 跳转到资料归档文件上传
guidang(id) {
uni.navigateTo({
url: '/pages/shang_chuan_zi_liao_gui_dang/zi_liao_gui_dang?id=' + id
})
}
}
}
</script>
<style>
.page {
overflow-y: hidden;
width: 100%;
height: 100vh;
background-color: #fff;
}
.items {
width: 690rpx;
/* height: 389rpx; */
background: #FFFFFF;
box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
border-radius: 12rpx 12rpx 12rpx 12rpx;
margin: 24rpx auto 0;
}
.items_top {
box-sizing: border-box;
padding: 0 50rpx;
width: 100%;
/* height: 310rpx; */
overflow: hidden;
}
.items_bum {
display: flex;
justify-content: center;
width: 100%;
height: 94rpx;
border-top: 2rpx solid #F4F4FA;
}
.items_bum_li {
width: 50%;
height: 100%;
font-size: 30rpx;
font-family: "PingFang SC-Bold, PingFang SC";
font-weight: bold;
color: #000000;
text-align: center;
line-height: 94rpx;
}
.bli {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 94rpx;
border-top: 2rpx solid #F4F4FA;
}
.items_bum .items_bum_li {
border-right: 2rpx solid #F4F4FA;
}
.items_bum .items_bum_li:last-child {
border-right: none;
}
.fun_row {
display: flex;
justify-content: space-between;
align-items: center;
height: 42rpx;
margin: 28rpx 0 19rpx;
}
.fun_row_left {
width: 300rpx;
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出用省略号显示
white-space: nowrap; // 规定段落中的文本不进行换行
font-size: 30rpx;
font-family: 'PingFang SC-Bold, PingFang SC';
font-weight: bold;
color: #000000;
}
.fun_row_right_title {
/* width: 120rpx; */
height: 33rpx;
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
}
.i {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
margin-right: 15rpx;
}
.fun_row_right {
display: flex;
align-items: center;
}
.row {
font-size: 24rpx;
font-family: 'PingFang SC-Regular, PingFang SC';
font-weight: 400;
color: #9E9E9E;
margin-bottom: 12rpx;
}
/* 系统审核的状态颜色,状态为0时 */
.daishengHeIcon {
background: #ffaa00;
}
.daishengHeTtle {
color: #ffaa00;
}
/* 终核中的状态颜色,状态为1时 */
.shengHezhongIcon {
background: #aa5500;
}
.shengHezhongTtle {
color: #aa5500;
}
/* 放宽中的状态颜色,状态为2时 */
.bohuiIcon {
background: #00aaff;
}
.bohuiTtle {
color: #00aaff;
}
/* 已放款的状态颜色,状态为3时 */
.yifangkuanIcon {
background: #00ffff;
}
.yifangkuanTtle {
color: #00ffff;
}
/* 已驳回的状态颜色,状态为4时 */
.yibohuiIcon {
background: #ff9b74;
}
.yibohuiTtle {
color: #ff9b74;
}
/* 已拒绝的状态颜色,状态为5时 */
.yijujueIcon {
background: red;
}
.yijujueTtle {
color: red;
}
.qixiaoStle {
width: 100%;
}
.items_bumdetail {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 94rpx;
line-height: 96rpx;
text-align: center;
border-top: 2rpx solid #F4F4FA;
}
</style>
1506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
