639 lines
16 KiB
Vue
639 lines
16 KiB
Vue
<template>
|
|
<view>
|
|
<view class="tab_list" style="margin-top:0;">
|
|
<view class="tabli" :class="typeIndex == 0 ? 'tabliactive' : ''" @click="changeFirTab(0)">全部</view>
|
|
<view class="tabli" :class="typeIndex == 1 ? 'tabliactive' : ''" @click="changeFirTab(1)">我创建的</view>
|
|
<view class="tabli" :class="typeIndex == 2 ? 'tabliactive' : ''" @click="changeFirTab(2)">下属创建的</view>
|
|
<view class="tabli" :class="typeIndex == 3 ? 'tabliactive' : ''" @click="changeFirTab(3)">抄送给我的</view>
|
|
</view>
|
|
|
|
<view class="select_warp">
|
|
<view class="searchbox">
|
|
<view class="searchtext" @click="toQuery">
|
|
<image style="width: 30rpx;height: 30rpx;margin-right: 5rpx;"
|
|
:src="BASE_IMG_URL+'shaixuan2.png'" mode="scaleToFill"></image>筛选
|
|
</view>
|
|
</view>
|
|
<uni-popup ref="screenpopup" type="top" background-color="#fff">
|
|
<view class="warpbox">
|
|
<scroll-view scroll-y class="scrollbox" style="height:680rpx;background:#fff;">
|
|
<!--筛选模块 -->
|
|
<view class="screen_content" @tap.stop.prevent>
|
|
<view class="fir_li" v-if="typeIndex == 2">
|
|
<view class="li_label">归属人</view>
|
|
<picker @change="changeAscrip" :value="ascripIndex" :range="ascripList" :range-key="'name'">
|
|
<view class="li_box" >
|
|
<view class="form_right" style="text-align: center;">
|
|
<view :class="ascripList[ascripIndex] ? 'valueactive' : ''">
|
|
{{ascripList[ascripIndex] ? ascripList[ascripIndex].name : '点击选择'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="fir_li">
|
|
<view class="li_label">关联客户</view>
|
|
<view class="li_box" @click="toSelectCustomer">
|
|
<view class="form_right" style="text-align: center;">
|
|
<view :class="customerObj ? 'valueactive' : ''">
|
|
{{customerObj ? customerObj.name : '点击选择'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="fir_li">
|
|
<view class="li_label">采购状态</view>
|
|
<picker @change="changeTab" :value="status" :range="statusList">
|
|
<view class="li_box" >
|
|
<view class="form_right" style="text-align: center;">
|
|
<view :class="statusList[status] ? 'valueactive' : ''">
|
|
{{statusList[status] ? statusList[status] : '点击选择'}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="fir_li">
|
|
<view class="li_label">签约时间</view>
|
|
<view class="li_box" style="display: flex;">
|
|
<picker @change="changeStartTime" mode="date" :end="end_time"
|
|
style="width:50%;border-right:1rpx solid #CCCCCC">
|
|
<view class="form_right">
|
|
<view style="flex:1;text-align: center;"
|
|
:class="start_time ? 'valueactive' : '' ">
|
|
{{start_time ? start_time : '生效时间'}}</view>
|
|
</view>
|
|
</picker>
|
|
<picker @change="changeEndTime" mode="date" :start="start_time" style="width:50%">
|
|
<view class="form_right">
|
|
<view style="flex:1;text-align: center;"
|
|
:class="end_time ? 'valueactive' : '' ">{{end_time ? end_time : '到期时间'}}
|
|
</view>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
</view>
|
|
<search-item v-for="(item,index) in searchForm" :key="index" :objInfo="item" @changeSearchData="changeSearchData"></search-item>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="button_bottom">
|
|
<view @tap.stop="reset">重置</view>
|
|
<view @tap.stop="sureQuery">确定</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
<view class="lxr_con_list" v-for="(item,index) in contract_list" :key="index"
|
|
@click="toContractDetail(item.id)">
|
|
<view class="name">{{item.owner_staff?item.owner_staff.name:'--'}}</view>
|
|
<view class="info">门店名称：{{item.customer?item.customer.name:'--'}}</view>
|
|
<view class="info">采购编号：{{item.num}}</view>
|
|
<view class="info">已回款：¥{{item.receivables.repayment_money}}</view>
|
|
<view class="info">待回款：¥{{item.receivables.be_money}}</view>
|
|
<view class="proce_li">
|
|
<view class="pro_li_left">
|
|
<view class="protext">回款进度：</view>
|
|
<view class="probox">
|
|
<view class="proin"
|
|
:style="{width:(item.receivables.ratio >= 100 ? 100 : item.receivables.ratio) +'%'}">
|
|
</view>
|
|
</view>
|
|
<view class="pronum">{{item.receivables.ratio >= 100 ? 100 : item.receivables.ratio }}%</view>
|
|
|
|
</view>
|
|
<view class="pro_li_right">¥{{item.money}}</view>
|
|
</view>
|
|
<!-- <view class="info">签约时间：{{item.order_date}}</view> -->
|
|
<view class="con_status" v-if="item.check_status == 0">
|
|
<span>待审核</span>
|
|
</view>
|
|
<view class="con_status" v-if="item.check_status == 1">
|
|
<span>审核中</span>
|
|
</view>
|
|
<view class="con_status pass" v-if="item.check_status == 2">
|
|
<span>审核通过</span>
|
|
</view>
|
|
<view class="con_status nopass" v-if="item.check_status == 3">
|
|
<span>审核未通过</span>
|
|
</view>
|
|
<view class="con_status nopass" v-if="item.check_status == 4">
|
|
<span>已撤回</span>
|
|
</view>
|
|
</view>
|
|
<u-empty v-if="contract_list.length == 0" text="暂无更多"></u-empty>
|
|
<view style="height: 200rpx;"></view>
|
|
<view class="bot_total" @click="lookTotal">总金额合计> </view>
|
|
<uni-popup ref="popup" type="bottom" background-color="#fff" @touchmove.stop.prevent>
|
|
<view class="botwarp">
|
|
<view class="wa_li">
|
|
<view class="wa_label">采购总金额</view>
|
|
<view class="wa_money"> <text>{{moneyInfo.allmoney?moneyInfo.allmoney:'0'}}</text>元 </view>
|
|
</view>
|
|
<view class="wa_li">
|
|
<view class="wa_label">已回款金额</view>
|
|
<view class="wa_money"> <text>{{moneyInfo.repayment_money?moneyInfo.repayment_money:'0'}}</text>元 </view>
|
|
</view>
|
|
<view class="wa_li">
|
|
<view class="wa_label">未回款金额</view>
|
|
<view class="wa_money"> <text>{{moneyInfo.be_money?moneyInfo.be_money:'0'}}</text>元 </view>
|
|
</view>
|
|
<view class="wa_btn" @click="removeTotal">取消</view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<!-- 创建用户图标 -->
|
|
<view class="icon_creat" @click="toCreateContract">
|
|
<image :src="BASE_IMG_URL+'1.png'" mode="scaleToFill"></image>
|
|
</view>
|
|
|
|
<select-customer ref="customerChild" @getCustomerinfo="getCustomerinfo"></select-customer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
netCrmContractList,
|
|
netSearchStaffList
|
|
} from '@/api/kehu.js'
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
import selectCustomer from '@/components/selectCustomer.vue'
|
|
import searchItem from '@/components/search/searchitem.vue'
|
|
|
|
export default {
|
|
components:{
|
|
selectCustomer,
|
|
searchItem
|
|
},
|
|
data() {
|
|
return {
|
|
moneyInfo:{}, //总计金额
|
|
contract_list: [], //列表数据
|
|
page: 1,
|
|
limit: 10,
|
|
totalPage: 1,
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
name: '',
|
|
type: '', //客户分类 '0 全部客户','1 我的客户','2 下属负责的客户'
|
|
typeList: ['全部客户', '我的客户', '下级的客户'],
|
|
typeIndex: 0,
|
|
statusList:['全部','待审核','待回款','已回款'],
|
|
status:null,
|
|
start_time: '',
|
|
end_time: '',
|
|
ascripList: [], //归属人
|
|
ascripId: null,
|
|
ascripIndex: null,
|
|
customerObj:null, //关联客户
|
|
|
|
goodsList: ['全部客户', '我的客户', '下级的客户'],
|
|
info: 0,
|
|
rSelect: [],
|
|
searchForm:[],
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.startTime) {
|
|
this.typeIndex = options.type == 0 ? 1 : options.type == 1 ? 0 : 2
|
|
this.type = this.typeList[this.typeIndex]
|
|
this.start_time = options.startTime
|
|
this.end_time = options.endTime
|
|
this.ascripId = options.staffid
|
|
}
|
|
if(options.stime){
|
|
this.typeIndex = options.status
|
|
this.start_time = options.stime
|
|
this.end_time = options.etime
|
|
}
|
|
this.handleSearchForm('contract',(data)=>{
|
|
this.searchForm = data
|
|
})
|
|
},
|
|
onShow() {
|
|
this.init()
|
|
//归属人
|
|
this.getGuishu()
|
|
},
|
|
onReachBottom() {
|
|
if (this.page >= this.totalPage) {
|
|
return
|
|
}
|
|
this.page++
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
//去选择客户
|
|
toSelectCustomer() {
|
|
this.$refs.customerChild.init()
|
|
},
|
|
getCustomerinfo(obj) {
|
|
this.customerObj = obj
|
|
},
|
|
init() {
|
|
this.page = 1
|
|
this.contract_list = []
|
|
setTimeout(()=>{
|
|
this.getList()
|
|
},200)
|
|
},
|
|
//筛选
|
|
toQuery() {
|
|
this.$refs.screenpopup.open()
|
|
|
|
},
|
|
//查看总金额合计
|
|
lookTotal() {
|
|
this.$refs.popup.open()
|
|
},
|
|
removeTotal() {
|
|
this.$refs.popup.close()
|
|
},
|
|
changeTab(e) {
|
|
this.status = e.detail.value
|
|
},
|
|
changeFirTab(type) {
|
|
this.typeIndex = type
|
|
this.init()
|
|
},
|
|
moveStop(){},
|
|
toCreateContract() {
|
|
uni.navigateTo({
|
|
url:'/pagesA/crm/contract/contract'
|
|
})
|
|
},
|
|
tab(index) {
|
|
this.info = index
|
|
},
|
|
//归属人
|
|
getGuishu() {
|
|
netSearchStaffList().then(res => {
|
|
this.ascripList = res.data
|
|
if (this.ascripId) {
|
|
this.ascripList.forEach((ele, index) => {
|
|
if (ele.id == this.ascripId) {
|
|
this.ascripIndex = index
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
changeAscrip(e) {
|
|
this.ascripIndex = e.detail.value
|
|
this.ascripId = this.ascripList[this.ascripIndex].id
|
|
},
|
|
getList() {
|
|
let params = {
|
|
page: this.page,
|
|
limit: this.limit,
|
|
createtime: (this.start_time && this.end_time) ? (this.start_time + ',' + this.end_time) : '',
|
|
type: this.typeIndex,
|
|
status: this.status,
|
|
staff_id: this.ascripId,
|
|
customer_id: this.customerObj?this.customerObj.id:'',
|
|
...this.handleSureSearch(this.searchForm)
|
|
}
|
|
netCrmContractList(params).then(res => {
|
|
this.contract_list = this.contract_list.concat(res.data.data)
|
|
this.totalPage = res.data.last_page
|
|
this.moneyInfo = res.data.moneyinfo
|
|
})
|
|
},
|
|
//客户分类
|
|
changeType(e) {
|
|
this.typeIndex = e
|
|
},
|
|
//线索创建 开始时间
|
|
changeStartTime(e) {
|
|
this.start_time = e.detail.value
|
|
if(!this.end_time){
|
|
this.end_time = e.detail.value
|
|
}
|
|
},
|
|
//线索 创建 结束时间
|
|
changeEndTime(e) {
|
|
this.end_time = e.detail.value
|
|
if(!this.start_time){
|
|
this.start_time = e.detail.value
|
|
}
|
|
},
|
|
changeSearchData(type,key,value){
|
|
let arr = this.searchForm
|
|
arr.forEach((ele,index)=>{
|
|
if(ele.field == type){
|
|
ele[key] = value
|
|
this.$set(this.searchForm, index, ele)
|
|
}
|
|
})
|
|
},
|
|
//重置
|
|
reset() {
|
|
this.type = ''
|
|
this.start_time = ''
|
|
this.end_time = ''
|
|
this.ascripId = null
|
|
this.ascripIndex = null
|
|
this.status = null
|
|
this.customerObj = null
|
|
this.searchForm = this.handleResetSearch(this.searchForm)
|
|
},
|
|
//确定
|
|
sureQuery() {
|
|
this.$refs.screenpopup.close()
|
|
this.init()
|
|
},
|
|
//采购详情
|
|
toContractDetail(id) {
|
|
uni.navigateTo({
|
|
url: '/pagesB/contract/contractDetail?id=' + id
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.tab_list{
|
|
width:750rpx;
|
|
height:80rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background:#fff;
|
|
.tabli{
|
|
font-size:24rpx;
|
|
color:#333;
|
|
line-height: 75rpx;
|
|
text-align: center;
|
|
border-bottom:4rpx solid #fff;
|
|
}
|
|
.tabliactive{
|
|
border-bottom:4rpx solid $uni-text-color;
|
|
}
|
|
}
|
|
.active {
|
|
border: 1px solid red;
|
|
text-align: center;
|
|
border: none;
|
|
background: $uni-text-color;
|
|
padding: 5rpx 10rpx ;
|
|
border-radius: 10rpx;
|
|
color: #FFFFFF;
|
|
border: 1px solid $uni-text-color !important;;
|
|
}
|
|
.list-box {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.list-box {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
.list-item {
|
|
border: 1px solid #999999;
|
|
padding: 5rpx 10rpx ;
|
|
border-radius: 10rpx;
|
|
}
|
|
.valueactive {
|
|
color: #666;
|
|
}
|
|
.select_warp {
|
|
z-index: 9;
|
|
position: relative;
|
|
}
|
|
.searchbox {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin: 20rpx 0;
|
|
.searchtext {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 30rpx;
|
|
color: #999;
|
|
margin-right: 55rpx;
|
|
background:#ffffff;
|
|
padding:8rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
.warpbox {
|
|
width: 750rpx;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
.screen_content {
|
|
z-index: 2;
|
|
border-top: 1rpx solid #CCCCCC;
|
|
background-color: #fff;
|
|
padding: 24rpx;
|
|
.fir_li {
|
|
margin-bottom: 20rpx;
|
|
.li_label {
|
|
font-size: 28rpx;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.classify {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.classify_flex {
|
|
padding: 5rpx 16rpx;
|
|
color: #999;
|
|
font-size: 30rpx;
|
|
border: 1px solid #999;
|
|
border-radius: 10rpx;
|
|
}
|
|
.c_f {
|
|
background: $uni-text-color !important;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.li_box {
|
|
border-radius: 15rpx;border: 1rpx solid #CCCCCC;
|
|
width:690rpx;
|
|
height: 60rpx;
|
|
padding: 0 35rpx;
|
|
line-height: 60rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
color: #999;
|
|
box-sizing: border-box;
|
|
}
|
|
.form_right {
|
|
color: #999;
|
|
text-align: center;
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin: 28rpx 5rpx 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button_bottom {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
background-color: #fff;
|
|
line-height: 90rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
justify-content: space-around;
|
|
padding-bottom: 100rpx;
|
|
|
|
:first-child {
|
|
color: #999;
|
|
border: 1rpx solid #999;
|
|
width: 260rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
:last-child {
|
|
background-color: $uni-text-color;
|
|
color: #fff;
|
|
width: 260rpx;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.lxr_con_list {
|
|
padding: 20rpx 0;
|
|
margin-bottom: 20rpx;
|
|
background: #fff;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.name {
|
|
font-size: 34rpx;
|
|
color: #333333;
|
|
font-weight: 500;
|
|
border-bottom: 1rpx solid #ededed;
|
|
padding: 0 0 30rpx 63rpx;
|
|
}
|
|
|
|
.info {
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
margin: 10rpx 0;
|
|
padding-left: 63rpx;
|
|
}
|
|
|
|
.proce_li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-left: 63rpx;
|
|
margin: 10rpx 0;
|
|
|
|
.pro_li_left {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.protext {
|
|
font-size: 32rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.probox {
|
|
width: 120rpx;
|
|
height: 30rpx;
|
|
border-radius: 15rpx;
|
|
background: #C0C0C0;
|
|
margin: 0 15rpx;
|
|
|
|
.proin {
|
|
width: 20%;
|
|
height: 30rpx;
|
|
border-radius: 15rpx;
|
|
background: $uni-text-color;
|
|
}
|
|
}
|
|
|
|
.pronum {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.pro_li_right {
|
|
color:$uni-text-color;
|
|
font-size: 33rpx;
|
|
font-weight: 500;
|
|
margin-right: 28rpx;
|
|
}
|
|
}
|
|
|
|
.con_status {
|
|
width: 130rpx;
|
|
height: 36rpx;
|
|
text-align: center;
|
|
line-height: 36rpx;
|
|
background: $uni-text-color-opcity;
|
|
margin-top: 30rpx;
|
|
margin-left: 63rpx;
|
|
span {
|
|
font-size: 26rpx;
|
|
color: $uni-text-color;
|
|
}
|
|
}
|
|
.nopass {
|
|
color: #ec7f51;
|
|
}
|
|
.pass {
|
|
color: #22A7F6;
|
|
}
|
|
}
|
|
|
|
.bot_total{
|
|
position: fixed;
|
|
left:0;
|
|
bottom:0;
|
|
width:750rpx;
|
|
height:calc(80rpx + env(safe-area-inset-bottom) / 2);
|
|
background:#fff;
|
|
font-size:24rpx;
|
|
color:#333;
|
|
text-align: center;
|
|
line-height: 80rpx;
|
|
color:$uni-text-color;
|
|
border-top:1rpx solid #f5f5f5;
|
|
padding-bottom:calc(env(safe-area-inset-bottom) / 2);
|
|
}
|
|
.botwarp{
|
|
background:#fff;
|
|
padding:0 24rpx;
|
|
.wa_li{
|
|
padding:24rpx 35rpx;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.wa_label{
|
|
font-size:24rpx;
|
|
color:#333;
|
|
}
|
|
.wa_money{
|
|
font-size:24rpx;
|
|
color:#666;
|
|
text{
|
|
color:$uni-text-color;
|
|
}
|
|
}
|
|
}
|
|
.wa_btn{
|
|
width:100%;
|
|
height:100rpx;
|
|
font-size:24rpx;
|
|
color:$uni-text-color;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
}
|
|
}
|
|
</style>
|