161 lines
3.5 KiB
Vue
161 lines
3.5 KiB
Vue
<template>
|
|
<view class="achieve-warp">
|
|
<view class="select-warp">
|
|
<view class="select-title">业绩统计</view>
|
|
<picker mode="date" fields="month" @change="changeDataTime">
|
|
<view class="form_right">
|
|
<view>{{dataTime ? dataTime : '点击选择'}}</view>
|
|
<image :src="BASE_IMG_URL+'newxia.png'" class="bottomimg" mode="scaleToFill"></image>
|
|
</view>
|
|
</picker>
|
|
</view>
|
|
<view class="ment-warp">
|
|
<view class="ment-list">
|
|
<view class="title">新增线索</view>
|
|
<view class="number">{{achievementObj.leads}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">新增客户</view>
|
|
<view class="number">{{achievementObj.customer}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">新增联系人</view>
|
|
<view class="number">{{achievementObj.contacts}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">新增跟进记录</view>
|
|
<view class="number">{{achievementObj.record}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">新增合同</view>
|
|
<view class="number">{{achievementObj.contract}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">新增回款次数</view>
|
|
<view class="number">{{achievementObj.receivables}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">业绩目标</view>
|
|
<view class="number">{{achievementObj.contractAchievement}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">完成金额</view>
|
|
<view class="number">{{achievementObj.contract_money}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">回款目标</view>
|
|
<view class="number">{{achievementObj.receivablesAchievement}}</view>
|
|
</view>
|
|
<view class="ment-list">
|
|
<view class="title">完成金额</view>
|
|
<view class="number">{{achievementObj.receivables_money}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
export default{
|
|
props:{
|
|
id:{
|
|
type:Number,
|
|
default:null
|
|
},
|
|
dataTime:{
|
|
type:String,
|
|
default:''
|
|
},
|
|
achievementObj:{
|
|
type:Object,
|
|
default:null
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
created() {
|
|
|
|
},
|
|
methods:{
|
|
// 选择时间 2021-05
|
|
changeDataTime(e) {
|
|
let dataTime = e.detail.value
|
|
this.$emit('changeDate',dataTime)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.achieve-warp{
|
|
width:702rpx;
|
|
background:#fff;
|
|
border-radius: 10rpx;
|
|
margin:20rpx 24rpx;
|
|
}
|
|
.select-warp{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding:24rpx;
|
|
.form_right{
|
|
width:147rpx;
|
|
height:80rpx;
|
|
background:#fff;
|
|
border-radius: 15rpx;
|
|
font-size:24rpx;
|
|
color:#333;
|
|
text-align: center;
|
|
line-height: 38rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.bottomimg{
|
|
width:20rpx;
|
|
height:33rpx;
|
|
margin-left:20rpx;
|
|
}
|
|
}
|
|
}
|
|
.ment-warp{
|
|
margin:0 auto;
|
|
width:662rpx;
|
|
background:#fff;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
.ment-list{
|
|
width:281rpx;
|
|
background:#f5f5f5;
|
|
border-radius: 5rpx;
|
|
padding:20rpx;
|
|
margin-right:20rpx;
|
|
margin-bottom:20rpx;
|
|
&:nth-child(2n){
|
|
margin-right:0;
|
|
}
|
|
.title{
|
|
font-size:26rpx;
|
|
color:#666;
|
|
}
|
|
.number{
|
|
font-size:26rpx;
|
|
color:#333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
</style>
|