419 lines
8.4 KiB
Vue
419 lines
8.4 KiB
Vue
<template>
|
|
<view class="info_detail">
|
|
<view class="info_item">
|
|
<view class="basic_main">
|
|
<view>门店名称</view>
|
|
<view>{{info.customer ? info.customer.name : ''}}</view>
|
|
</view>
|
|
<!-- <view class="basic_main">
|
|
<view>关联商机</view>
|
|
<view>{{info.business ? info.business.name :''}}</view>
|
|
</view> -->
|
|
<view class="basic_main">
|
|
<view>门店签约人</view>
|
|
<view>{{info.contacts ? info.contacts.name : ''}}</view>
|
|
</view>
|
|
<view class="basic_main">
|
|
<view>公司签约人</view>
|
|
<view>{{info.order_staff ? info.order_staff.name : ''}}</view>
|
|
</view>
|
|
<form-item v-for="(item,index) in listForm" :key="index" :objInfo="item" :isEdit="false"></form-item>
|
|
<view class="basic_main">
|
|
<view>购买产品</view>
|
|
<view></view>
|
|
</view>
|
|
<view class="pro_warp" v-if="info.product && info.product.length != 0">
|
|
<view class="li_warp" v-for="(item,index) in info.product" :key="index">
|
|
<image class="pro_img" :src="item.img" mode=""></image>
|
|
<view class="cell_con">
|
|
<view class="cell_con_top">
|
|
<view class="contitle">{{item.name}}</view>
|
|
</view>
|
|
<view class="context">编号：{{item.num}}</view>
|
|
<view class="info_l">
|
|
<view class="context">单价：{{item.unit}}</view>
|
|
<view class="context">数量：{{item.number}}</view>
|
|
</view>
|
|
<view class="context">零售价：￥{{item.price}}</view>
|
|
<view class="context">批发价：￥{{item.wholesale}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="basic_main" v-if="info.ratios && info.ratios.length != 0">
|
|
<view>业绩分配比例</view>
|
|
<view></view>
|
|
</view>
|
|
<view class="ach_list" v-if="info.ratios && info.ratios.length != 0">
|
|
<view class="ach_li" v-for="(item,index) in info.ratios" :key="index">
|
|
<view class="ach_rate">
|
|
业绩占比<span>({{item.ratio}}%)</span>
|
|
</view>
|
|
<view class="ach_staff">
|
|
<image :src="item.staff.img?item.staff.img:BASE_IMG_URL+'/headImg.png'" style="border-radius: 50%;" class="uploadimg"></image>
|
|
<view class="ach_t">{{item.staff.name}}</view>
|
|
</view>
|
|
<view class="ach_money">可分业绩<span>({{item.money}}元)</span></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 审批流程 -->
|
|
<approval-status :process="payment_approval"></approval-status>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { netPaymentApproval } from '@/api/kehu.js'
|
|
import { netSetForm, } from '@/api/index.js'
|
|
import formItem from '@/components/form/formitem.vue'
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
import approvalStatus from '@/components/approvalStatus.vue'
|
|
export default {
|
|
props:{
|
|
info:{
|
|
type:Object,
|
|
default:{}
|
|
},
|
|
payment_approval:{ //审批流程
|
|
type:Object,
|
|
default:{}
|
|
}
|
|
},
|
|
components:{
|
|
formItem,
|
|
approvalStatus
|
|
},
|
|
data() {
|
|
return {
|
|
listForm:[],
|
|
showSearch: false,
|
|
BASE_IMG_URL :BASE_IMG_URL
|
|
}
|
|
},
|
|
created() {
|
|
//获取 form
|
|
this.getForm()
|
|
},
|
|
methods: {
|
|
getForm() {
|
|
netSetForm({type:'contract'}).then(res=>{
|
|
res = res.data.data
|
|
res.forEach(ele=>{
|
|
ele.value = this.info[ele.id]?this.info[ele.id]:''
|
|
})
|
|
this.listForm = res
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 业绩分配
|
|
.ach_list{
|
|
background:#fff;
|
|
padding:30rpx;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
margin-bottom:24rpx;
|
|
.ach_li{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
padding-bottom:24rpx;
|
|
margin-bottom:24rpx;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
&:last-child{
|
|
border-bottom:0;
|
|
margin-bottom:0;
|
|
}
|
|
.ach_rate{
|
|
font-size:24rpx;
|
|
color:#666;
|
|
margin-right:30rpx;
|
|
span{
|
|
color:$uni-text-color;
|
|
}
|
|
}
|
|
.ach_staff{
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
.uploadimg{
|
|
width:80rpx;
|
|
height:80rpx;
|
|
}
|
|
.staffinfo{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
font-size:24rpx;
|
|
color:#666;
|
|
.staffimg{
|
|
width:80rpx;
|
|
height:80rpx;
|
|
border-radius: 50%;
|
|
margin-right:24rpx;
|
|
}
|
|
}
|
|
.ach_t{
|
|
font-size:24rpx;
|
|
color:#666;
|
|
margin-top:10rpx;
|
|
}
|
|
}
|
|
.ach_money{
|
|
margin-left:30rpx;
|
|
font-size:26rpx;
|
|
span{
|
|
color:$uni-text-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pro_warp{
|
|
padding:30rpx 24rpx;
|
|
background:#fff;
|
|
margin-bottom:24rpx;
|
|
.li_warp{
|
|
padding-bottom:24rpx;
|
|
margin-bottom:24rpx;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
position: relative;
|
|
.pro_status{
|
|
font-size:26rpx;
|
|
color:#007AFF;
|
|
position: absolute;
|
|
right:35rpx;
|
|
top:10rpx;
|
|
}
|
|
.pro_img{
|
|
width:160rpx;
|
|
height:160rpx;
|
|
flex-shrink: 0;
|
|
margin-right:24rpx;
|
|
}
|
|
.cell_con{
|
|
padding:0 40rpx 0 0;
|
|
.cell_con_top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.contitle{
|
|
font-size:28rpx;
|
|
color:#333;
|
|
}
|
|
}
|
|
.context{
|
|
font-size:26rpx;
|
|
color:#999;
|
|
margin-top:10rpx;
|
|
}
|
|
.info_l{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.context{
|
|
font-size:26rpx;
|
|
color:#999;
|
|
margin-right:24rpx;
|
|
&:last-child{
|
|
margin-right:0;
|
|
}
|
|
}
|
|
}
|
|
.con_info{
|
|
margin-top:15rpx;
|
|
.contitle{
|
|
font-size:26rpx;
|
|
color:#333;
|
|
}
|
|
.config_li{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-top:24rpx;
|
|
border-bottom:1rpx solid #f5f5f5;
|
|
&:last-child{
|
|
border-bottom:0;
|
|
}
|
|
.conimg{
|
|
width:80rpx;
|
|
height:80rpx;
|
|
border-radius: 10rpx;
|
|
margin-right:20rpx;
|
|
}
|
|
.config_name{
|
|
width:100rpx;
|
|
font-size:24rpx;
|
|
color:#333;
|
|
overflow: hidden;
|
|
text-overflow:ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.config_step{
|
|
margin-left:24rpx;
|
|
}
|
|
}
|
|
}
|
|
.conbot{
|
|
margin-top:10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.conmoney{
|
|
font-size:26rpx;
|
|
color:#333;
|
|
}
|
|
}
|
|
}
|
|
.right_del_btn{
|
|
width:90rpx;
|
|
height:240rpx;
|
|
background:#F00;
|
|
color:#fff;
|
|
text-align: center;
|
|
line-height: 224rpx;
|
|
}
|
|
}
|
|
.total_money{
|
|
text-align: right;
|
|
font-size:26rpx;
|
|
span{
|
|
font-size:26rpx;
|
|
color:#F00;
|
|
}
|
|
}
|
|
}
|
|
.warpbox {
|
|
width: 750rpx;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
.scrollbox{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 9;
|
|
background: #fff;
|
|
height:377rpx;
|
|
border-radius:30rpx 30rpx 0 0 ;
|
|
.img{
|
|
position: absolute;
|
|
top: 60rpx;
|
|
right: 64rpx;
|
|
}
|
|
image{
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
.head{
|
|
text-align: center;
|
|
font-size: 35rpx;
|
|
color: #999;
|
|
margin-top: 65rpx;
|
|
}
|
|
.f_foot{
|
|
margin-top: 100rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.f-box{
|
|
border: 1px solid #999;
|
|
color: #333;
|
|
padding: 5rpx 15rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.screen_content {
|
|
width: 702rpx;
|
|
z-index: 2;
|
|
border-top: 1rpx solid #CCCCCC;
|
|
background-color: #fff;
|
|
padding: 24rpx;
|
|
}
|
|
}
|
|
.info_detail {
|
|
margin-bottom: 100rpx;
|
|
.basic_head {
|
|
display: flex;
|
|
padding: 30rpx 24rpx 30rpx;
|
|
:last-child {
|
|
font-weight: 700;
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
.basic_main {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 32rpx;
|
|
background-color: #fff;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
border-bottom: 1rpx solid #EAEAEA;
|
|
:first-child {
|
|
color: #999;
|
|
}
|
|
>view{
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.foot{
|
|
background: #fff;
|
|
height: 200rpx;
|
|
.f_left{
|
|
margin: 26rpx 30rpx;
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
float: left;
|
|
border-radius: 50%;
|
|
background: red;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.f_right{
|
|
font-size: 30rpx;
|
|
color: #999;
|
|
float: left;
|
|
width:570rpx ;
|
|
margin-top: 40rpx;
|
|
.f_r_top{
|
|
p{margin-bottom: 10rpx;
|
|
span{
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
.f_r_center{
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.f_r_foot{
|
|
|
|
}
|
|
}
|
|
}
|
|
.footer{
|
|
height: 100rpx;
|
|
margin-top: 20rpx;
|
|
background: #fff;
|
|
// text-align: center;
|
|
line-height: 100rpx;
|
|
image{
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-top: 25rpx;
|
|
margin-right:25rpx;
|
|
margin-left: 290rpx;
|
|
float: left;
|
|
}
|
|
}
|
|
</style>
|