360 lines
7.8 KiB
Vue
360 lines
7.8 KiB
Vue
<template>
|
|
<uv-navbar :fixed="false" @leftClick="$onClickLeft" bgColor="#09b4f1">
|
|
<template v-slot:left>
|
|
<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
|
|
</template>
|
|
<template v-slot:center>
|
|
<text style="color:#ffffff">{{title}}</text>
|
|
</template>
|
|
</uv-navbar>
|
|
<view class="container">
|
|
<view class="pb-2 flex px-5" style="background-color: #09b4f1;">
|
|
<uv-search placeholder="搜索合同名称" v-model="keyword" bgColor="#ffffff" :customStyle="customStyle"
|
|
:show-action="false" @change="onSearch"></uv-search>
|
|
<!-- <uv-icon name="/static/images/screen.png" :size="26" @click="openSearch"></uv-icon> -->
|
|
</view>
|
|
<view class="wrap">
|
|
<uv-tabs :list="list" @click="handleSelect" :scrollable="false"></uv-tabs>
|
|
<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" @scroll="scroll"
|
|
@scrolltolower="reachBottom">
|
|
<view class="page-box">
|
|
<block v-if="dataList.length > 0">
|
|
<view class="client" v-for="(items, index) in dataList" :key="index">
|
|
<view class="top">
|
|
<view class="left uv-line-1">
|
|
<view class="store uv-line-1">{{items.contractName}}</view>
|
|
</view>
|
|
<view class="flex align-center">
|
|
<text
|
|
:style="{color:items.result==1?'#4687fc':items.result==2?'#4cd964':items.result==3?'#dd524d':'#999999'}">{{fillterStatus(items.result)}}</text>
|
|
<uv-icon name="arrow-right" :size="16"
|
|
:color="items.result==1?'#4687fc':items.result==2?'#4cd964':items.result==3?'#dd524d':'#999999'"></uv-icon>
|
|
</view>
|
|
</view>
|
|
<view class="item align-center">
|
|
<view class="content">
|
|
<view class="title uv-line-2">￥{{items.contractMoney}} <text
|
|
class="pl-1">回款:￥{{items.returnMoney}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="right">{{items.signatoryName ? items.signatoryName : '暂无'}}</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="client_time">到期：{{timestampToDate(items.endDate)}}</view>
|
|
<view class="flex">
|
|
<view class="btn ml-1 primary" @click.stop="onCheck(items.id)">详情</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uv-load-more :status="listStatus"></uv-load-more>
|
|
</block>
|
|
<uv-empty text="暂无数据" v-else margin-top="50" mode="list"></uv-empty>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="floatBtn" @click="onAdd">
|
|
<uv-icon class="pb-5" name="plus" size="20" color="#09b4f1"></uv-icon>添加合同
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
computed
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onShow,
|
|
onReady,
|
|
onPageScroll
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
getContractPage,
|
|
getOAContractPage,
|
|
} from '@/api/contract'
|
|
import {
|
|
getDictData,
|
|
} from '@/api/customer.js'
|
|
import {
|
|
timestampToDate
|
|
} from '@/utils/util'
|
|
const title = ref('合同')
|
|
const keyword = ref('')
|
|
const oldScrollTop = ref(0)
|
|
const scrollTop = ref(-1)
|
|
const dataList = ref([])
|
|
const relation = ref(true)
|
|
const list = ref(
|
|
[{
|
|
name: '我的合同',
|
|
value: true
|
|
}, {
|
|
name: '下属合同',
|
|
value: false
|
|
}]
|
|
)
|
|
|
|
const current = ref(0)
|
|
const dx = ref(0)
|
|
const pH = ref(0)
|
|
const scrollHeight = ref(0)
|
|
const page = ref(1)
|
|
const pageSize = ref(10)
|
|
const lastPage = ref(false)
|
|
const listStatus = ref('loadmore')
|
|
const isRefresh = ref(false)
|
|
|
|
defineExpose({
|
|
isRefresh
|
|
})
|
|
|
|
onReady(() => {
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
pH.value = res.windowHeight
|
|
let scrollH = uni.createSelectorQuery().select(".sv")
|
|
scrollH.boundingClientRect(data => {
|
|
let pH0 = pH.value
|
|
scrollHeight.value = pH0 - data.top
|
|
}).exec()
|
|
}
|
|
})
|
|
})
|
|
|
|
onLoad((e) => {
|
|
isRefresh.value = false
|
|
page.value = 1
|
|
lastPage.value = false
|
|
scrollTop.value = 0
|
|
dataList.value = []
|
|
getList()
|
|
getStatusList()
|
|
})
|
|
|
|
const statusList = ref([])
|
|
const getStatusList = () => {
|
|
getDictData({
|
|
type: 'bpm_process_instance_result'
|
|
}).then(res => {
|
|
statusList.value = res
|
|
})
|
|
}
|
|
|
|
//格式化状态
|
|
const fillterStatus = (status) => {
|
|
if (statusList.value.length) {
|
|
let obj = statusList.value.find(item => {
|
|
return item.value == status
|
|
})
|
|
return obj == undefined ? '' : obj.name
|
|
} else {
|
|
return status
|
|
}
|
|
}
|
|
|
|
const timeFormats = (val) => {
|
|
if (val) {
|
|
return formatDateTime(val)
|
|
} else {
|
|
return '--'
|
|
}
|
|
}
|
|
|
|
const handleSelect = (key) => {
|
|
relation.value = key.value
|
|
getList()
|
|
}
|
|
|
|
|
|
const getList = async (isNextPage, pages) => {
|
|
await getOAContractPage({
|
|
pageNo: page.value,
|
|
pageSize: pageSize.value,
|
|
isMyContract: relation.value,
|
|
contractName: keyword.value,
|
|
}).then(res => {
|
|
if (res) {
|
|
if (res.list.length < 10) {
|
|
listStatus.value = 'nomore'
|
|
}
|
|
|
|
if (res.list.length == 0) {
|
|
lastPage.value = true
|
|
}
|
|
|
|
if (isNextPage) {
|
|
dataList.value = dataList.value.concat(res.list)
|
|
return
|
|
}
|
|
dataList.value = res.list
|
|
}
|
|
})
|
|
}
|
|
|
|
const scroll = (e) => {
|
|
oldScrollTop.value = e.detail.scrollTop
|
|
}
|
|
|
|
const reachBottom = () => {
|
|
if (lastPage.value || listStatus.value == 'loading') return;
|
|
listStatus.value = 'loading'
|
|
setTimeout(() => {
|
|
if (lastPage.value) return;
|
|
getList(true, ++page.value)
|
|
if (dataList.value.length >= 10) listStatus.value = 'loadmore';
|
|
else listStatus.value = 'loading';
|
|
}, 1200)
|
|
}
|
|
// 点击搜索
|
|
const onSearch = () => {
|
|
page.value = 1
|
|
lastPage.value = false
|
|
getList()
|
|
}
|
|
|
|
// 详情
|
|
const onCheck = (id, type) => {
|
|
uni.navigateTo({
|
|
url: '/pages/components/pages/contract/add?id=' + id + '&type=detail'
|
|
});
|
|
}
|
|
|
|
// 添加
|
|
const onAdd = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/components/pages/contract/add'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
background-color: #F7F7F7;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.page-box {
|
|
padding: 20rpx 20rpx 45rpx;
|
|
}
|
|
|
|
.client {
|
|
width: 710rpx;
|
|
background-color: #ffffff;
|
|
margin-bottom: 20rpx;
|
|
border-radius: 20rpx;
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
font-size: 28rpx;
|
|
|
|
.top {
|
|
display: flex;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
.store {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
padding-right: 50rpx
|
|
}
|
|
}
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
margin: 20rpx 0 0;
|
|
|
|
.content {
|
|
flex: 1;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.type {
|
|
margin: 10rpx 0;
|
|
font-size: 24rpx;
|
|
color: $uv-tips-color;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
margin-left: 10rpx;
|
|
text-align: right;
|
|
|
|
.decimal {
|
|
font-size: 24rpx;
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.number {
|
|
color: $uv-tips-color;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
margin-top: 20rpx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.client_time {
|
|
color: #777;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.btn {
|
|
line-height: 56rpx;
|
|
padding: 0rpx 25rpx;
|
|
border-radius: 5px;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
color: $uv-info-dark;
|
|
}
|
|
|
|
.entity {
|
|
color: #fff;
|
|
background-color: #FF6146;
|
|
}
|
|
|
|
.primary {
|
|
color: #FFF;
|
|
background-color: #09b4f1
|
|
}
|
|
}
|
|
}
|
|
|
|
.wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.floatBtn {
|
|
font-size: 23rpx;
|
|
bottom: 100px;
|
|
right: 20px;
|
|
border-radius: 5000px;
|
|
z-index: 9;
|
|
opacity: 1;
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
color: #606266;
|
|
align-items: center;
|
|
transition: opacity 0.4s;
|
|
border: 1px solid #dcdfe6;
|
|
}
|
|
</style> |