424 lines
9.1 KiB
Vue
424 lines
9.1 KiB
Vue
<template>
|
|
<view class="group_company">
|
|
<view class="contractinfo" v-if="info">
|
|
<view class="nameli">
|
|
<view class="name">{{info.name}}</view>
|
|
</view>
|
|
<view class="content" >
|
|
下次跟进时间：{{info.next_time ? info.next_time : ''}}
|
|
</view>
|
|
<view class="content">
|
|
商机金额：{{info.money ? info.money : ''}}
|
|
</view>
|
|
<view class="content" >
|
|
创建人：{{info.owner_staff ? info.owner_staff.name : ''}}
|
|
</view>
|
|
<view class="bus_box">
|
|
<view class="bustit">商机推进阶段:</view>
|
|
<!-- <view class="busright">推进商机</view> -->
|
|
</view>
|
|
<view class="stepbox">
|
|
<view class="stepli " :class="{'stepli_a':index <= options_active}" v-for="(item,index) in options" :key="index">
|
|
<view class="num">{{index+1}}</view>
|
|
<view class="step_text">{{item.title}} <text v-if="index != options.length-1"> > </text> </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 标签栏 -->
|
|
<view class="group_tab">
|
|
<u-tabs name="cate_name" :list="lists" :is-scroll="false" active-color="#008EFF" :current="current"
|
|
@change="change"></u-tabs>
|
|
<view class="processing_title" v-if="current == 0">
|
|
<customer-dynamic v-if="info.id" :kehuid="info.id" :type="5"></customer-dynamic>
|
|
</view>
|
|
<view class="processing_title" v-if="current == 1">
|
|
<base-info v-if="info.id" :info="info" ></base-info>
|
|
</view>
|
|
<view class="processing_title" v-if="current == 2">
|
|
<related-contract v-if="info.id" :info="info" ></related-contract>
|
|
</view>
|
|
<view class="processing_title" v-if="current == 3">
|
|
<advance-history v-if="info.id" :info="info"></advance-history>
|
|
</view>
|
|
</view>
|
|
<view style="height:100rpx;"></view>
|
|
<!-- 底部导航栏 -->
|
|
<view class="bottom_nav">
|
|
<view class="bottom_item" @click="followClick(info.id,5)">
|
|
<image :src="BASE_IMG_URL+'tj.png'" class="botimg"></image>
|
|
<view>跟进</view>
|
|
</view>
|
|
<view class="bottom_item" @click="moreClick">
|
|
<image :src="BASE_IMG_URL+'morebtn.png'" class="botimg"></image>
|
|
<view>更多操作</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-popup ref="popup" type="bottom" background-color="#fff">
|
|
<view class="pull_head">更多操作</view>
|
|
<view class="pull_con">
|
|
<view class="bottom_item" @click="toTrans(info.id)">
|
|
<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">转移商机</view>
|
|
</view>
|
|
<view class="bottom_item" @click="toEditcontract(info.id)">
|
|
<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">修改商机</view>
|
|
</view>
|
|
<view class="bottom_item" @click="toDelBusiness(info.id)">
|
|
<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">删除商机</view>
|
|
</view>
|
|
<view class="bottom_item" @click="toAddContract">
|
|
<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">添加合同</view>
|
|
</view>
|
|
<view class="bottom_item" @click="advanceBusiness">
|
|
<view style="padding: 5rpx 12rpx;border: 1px solid #ededed;">推进商机</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { BASE_IMG_URL } from '@/util/api.js'
|
|
import customerDynamic from 'components/content/customerDynamic/customerDynamic.vue';
|
|
import baseInfo from './baseInfo.vue'
|
|
import relatedContract from './relatedContract.vue'
|
|
import advanceHistory from './advanceHistory.vue'
|
|
import { netBusinessDetail, netDelBusiness } from '@/api/index.js'
|
|
export default {
|
|
created() {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
id: '', //商机id
|
|
info: {},
|
|
BASE_IMG_URL:BASE_IMG_URL,
|
|
current: 0,
|
|
lists: [
|
|
{
|
|
name: '跟进记录',
|
|
status: 0
|
|
},
|
|
{
|
|
name: '基本信息',
|
|
status: 1
|
|
},
|
|
{
|
|
name:'合同',
|
|
status:2
|
|
},
|
|
{
|
|
name:'推进历史',
|
|
status:3
|
|
}
|
|
],
|
|
options:[
|
|
{title: '初期沟通'},
|
|
{title: '立项跟踪'},
|
|
{title: '方案/报价'},
|
|
{title: '谈判审核'},
|
|
{title: '赢单'},
|
|
],
|
|
options_active:0
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.id = options.id
|
|
},
|
|
onHide() {
|
|
this.$refs.popup.close()
|
|
},
|
|
onShow() {
|
|
this.info = {}
|
|
this.getInfo()
|
|
},
|
|
components: {
|
|
customerDynamic,
|
|
baseInfo,
|
|
relatedContract,
|
|
advanceHistory
|
|
},
|
|
methods: {
|
|
change(index) {
|
|
this.current = index;
|
|
},
|
|
tabs_change(e) {
|
|
this.current = e;
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
moreClick() {
|
|
this.$refs.popup.open()
|
|
},
|
|
//获取商机 详情信息
|
|
getInfo() {
|
|
netBusinessDetail({
|
|
id: this.id
|
|
}).then(res => {
|
|
this.info = res.data
|
|
let type = res.data.type
|
|
if(type == 5){
|
|
this.options = [
|
|
{title: '初期沟通'},
|
|
{title: '立项跟踪'},
|
|
{title: '方案/报价'},
|
|
{title: '谈判审核'},
|
|
{title: '输单'},
|
|
]
|
|
this.options_active = 4
|
|
}else if(type == 6){
|
|
this.options = [
|
|
{title: '初期沟通'},
|
|
{title: '立项跟踪'},
|
|
{title: '方案/报价'},
|
|
{title: '谈判审核'},
|
|
{title: '无效'},
|
|
]
|
|
this.options_active = 4
|
|
}else{
|
|
this.options_active = type
|
|
}
|
|
})
|
|
},
|
|
|
|
// 写新跟进
|
|
followClick(id,type) {
|
|
uni.navigateTo({
|
|
url: '/pagesA/crm/customerManagement/newFllow/newFllow?id='+id+'&type='+type
|
|
})
|
|
},
|
|
//转移商机
|
|
toTrans(id) {
|
|
uni.navigateTo({
|
|
url:'/pagesA/business/trans?id='+id
|
|
})
|
|
},
|
|
//编辑商机
|
|
toEditcontract(id) {
|
|
uni.navigateTo({
|
|
url: '/pagesA/business/editBusiness?id='+this.id
|
|
})
|
|
},
|
|
//删除商机
|
|
toDelBusiness(id) {
|
|
uni.showModal({
|
|
title:'提示',
|
|
content:'请确认是否删除？',
|
|
success:(res)=>{
|
|
if(res.confirm){
|
|
netDelBusiness({id:id}).then(res=>{
|
|
uni.showToast({
|
|
title:res.msg,
|
|
icon:'none'
|
|
})
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},2000)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//添加合同
|
|
toAddContract() {
|
|
uni.navigateTo({
|
|
url:'/pagesA/crm/contract/contract?id='+this.info.customer.id+'&businessid='+this.id
|
|
})
|
|
},
|
|
//推进商机
|
|
advanceBusiness() {
|
|
uni.navigateTo({
|
|
url:'/pagesA/business/advance?id='+this.id+'&status='+this.info.type
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.bus_box{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size:30rpx;
|
|
color:#fff;
|
|
margin-bottom:24rpx;
|
|
.busright{
|
|
font-size:24rpx;
|
|
width:120rpx;
|
|
text-align: center;
|
|
border:1rpx solid #fff;
|
|
padding:5rpx 0;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.stepbox{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.xian{
|
|
width:35rpx;
|
|
height:2rpx;
|
|
background:#c7c5c5;
|
|
margin-bottom:35rpx;
|
|
}
|
|
.xian_a{
|
|
background:#fff;
|
|
}
|
|
.stepli{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
.num{
|
|
width:40rpx;
|
|
height:40rpx;
|
|
border-radius: 50%;
|
|
border:1rpx solid #c7c5c5;
|
|
font-size:24rpx;
|
|
text-align: center;
|
|
line-height: 38rpx;
|
|
color:#c7c5c5;
|
|
margin-bottom:15rpx;
|
|
margin-right:10rpx;
|
|
}
|
|
.step_text{
|
|
font-size:26rpx;
|
|
color:#c7c5c5;
|
|
text{
|
|
font-size:26rpx;
|
|
color:#c7c5c5;
|
|
margin-left:10rpx;
|
|
}
|
|
}
|
|
}
|
|
.stepli_a{
|
|
.num{
|
|
color:#fff;
|
|
border:2rpx solid #fff;
|
|
}
|
|
.step_text{
|
|
color:#fff;
|
|
text{
|
|
font-size:26rpx;
|
|
color:#fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.pull_head {
|
|
font-size: 34rpx;
|
|
color: #999;
|
|
padding: 30rpx 0;
|
|
text-align: center;
|
|
}
|
|
.contractinfo {
|
|
background: $uni-text-color;
|
|
padding: 20rpx 40rpx;
|
|
position: relative;
|
|
.nameli {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
|
|
.zhangimg {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.name {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.content {
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
margin: 15rpx 0;
|
|
}
|
|
}
|
|
|
|
.tabinfo {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
background: #fff;
|
|
border-top: 1rpx solid #C0C0C0;
|
|
|
|
.tableft {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.headerimg {
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.name {
|
|
font-size: 26rpx;
|
|
color: $uni-text-color;
|
|
margin-left: 24rpx;
|
|
}
|
|
}
|
|
|
|
.rightimg {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
.group_tab {
|
|
margin: 20rpx 0;
|
|
}
|
|
|
|
.bottom_nav {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20rpx 0;
|
|
background-color: #fff;
|
|
text-align: center;
|
|
color: #999;
|
|
z-index: 2;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
border-top:1rpx solid #f5f5f5;
|
|
.bottom_item{
|
|
font-size:24rpx;
|
|
.botimg{
|
|
width:40rpx;
|
|
height:40rpx;
|
|
}
|
|
}
|
|
}
|
|
.pull_head{
|
|
font-size: 34rpx;
|
|
color: #999;
|
|
padding: 30rpx 0;
|
|
}
|
|
.pull_con {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 20rpx 30rpx 100rpx;
|
|
.bottom_item{
|
|
margin-right:40rpx;
|
|
margin-bottom:35rpx;
|
|
&:nth-child(4n){
|
|
margin-right:0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|