Files
juipvue/src/components/user/statistics.vue
“wanyongkang” 36a225e67e 添加极光跟进
2024-12-02 17:35:50 +08:00

737 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<div v-loading="loading">
<el-card class="box-card">
<el-select v-model="manager" @change="select_manager" size="small" style="margin-right:5px;width:110px;float:left;" v-if="$local.isRoot()" placeholder="管理员">
<el-option
v-for="item in manegers"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-date-picker
v-model="sell_detail_month"
size="small"
type="month"
style="margin-right:5px;width:110px;float:left;"
@change="sell_detail_info"
placeholder="选择月">
</el-date-picker>
<router-link :to="{name:'userstatisticsrecord'}">
<el-button type="primary" size="small" plain>跟进记录</el-button>
</router-link>
<el-button type="primary" size="small" @click="click_phone()" plain>号码拨号</el-button>
<div v-if="$local.isRoot()">
{{sell_detail.cost_mogu}}<span style="color:red">|| </span>{{sell_detail.cost_not_mogu}}
</div>
<div>
<p>主动销售</p>
<p>{{sell_detail.other_order_active}}<span style="color:red">|| </span>{{sell_detail.jihu_order_active}}<span style="color:red">|| </span>{{sell_detail.jiguang_order_active}}<span style="color:red">|| </span>{{sell_detail.mogu_order_active}}<span style="color:red">|| </span>{{sell_detail.recharge_active}}<span style="color:red">|| </span>{{sell_detail.http_active}}<span style="color:red">|| </span>{{sell_detail.ros_active}}<span style="color:red">|| </span>{{sell_detail.jinqiao_active}}</p>
<p>被动销售</p>
<p>{{sell_detail.other_order_not_active}}<span style="color:red">|| </span>{{sell_detail.jihu_order_not_active}}<span style="color:red">|| </span>{{sell_detail.jiguang_order_not_active}}<span style="color:red">|| </span>{{sell_detail.mogu_order_not_active}}<span style="color:red">|| </span>{{sell_detail.recharge_not_active}}<span style="color:red">|| </span>{{sell_detail.http_not_active}}<span style="color:red">|| </span>{{sell_detail.ros_not_active}}<span style="color:red">|| </span>{{sell_detail.jinqiao_not_active}}</p>
</div>
<p>
{{sell_detail.sell_percent}}<span style="color:red">|| </span>
{{sell_detail.cost_percent}}<span style="color:red">|| </span>
{{sell_detail.cost_register}}<span style="color:red">|| </span>
{{sell_detail.cost_old_user}}<br>
{{sell_detail.com_cost}}<span style="color:red">|| </span>
{{sell_detail.com_percent}}<span style="color:red">|| </span>
{{sell_detail.today_new_user}}<span style="color:red">|| </span>
{{sell_detail.refund}}
</p>
</el-card>
<el-card class="box-card">
<div class="heior_box">
<!-- <el-button size="small" type="primary" icon="el-icon-sold-out" @click="dataExport" v-if="$local.isRoot()">导出</el-button> -->
<div class="search-box">
<el-date-picker
v-model="last_month"
type="datetimerange"
align="right"
size="small"
style="margin-right:5px;"
start-placeholder="A阶段开始时间"
end-placeholder="A阶段结束时间">
</el-date-picker>
<el-date-picker
v-model="new_month"
type="datetimerange"
align="right"
size="small"
style="margin-right:5px;"
start-placeholder="B阶段开始时间"
end-placeholder="B阶段开始时间">
</el-date-picker>
<!-- <el-date-picker
v-model="searchModel.month"
size="small"
type="month"
style="margin-right:5px;width:110px"
placeholder="选择月">
</el-date-picker> -->
<el-select size="small" style="margin-right:5px;" v-model="searchModel.cost_type" placeholder="请选择">
<el-option
v-for="item in cost_types"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input
size="small"
placeholder="起始金额"
type="number"
style="margin-right:5px;width:100px"
v-model="searchModel.money1">
</el-input>
<el-input
size="small"
placeholder="截至金额"
type="number"
style="margin-right:5px;width:100px"
v-model="searchModel.money2">
</el-input>
<el-select
v-model="searchModel.profile"
clearable
style="margin-right:5px;width:160px"
size="small"
placeholder="状态"
>
<el-option v-for="item in types" :key="item.label" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-input style="width:190px" v-model="searchModel.keyWord" placeholder="请输入会员号" clearable size="small">
<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
</el-input>
</div>
</div>
<el-table :data="retData.Data" :height="$getHeight(200)"
@sort-change="sort"
row-key="Id" border>
<el-table-column v-if="$local.isRoot()" prop="ManagerName" label="客户经理"></el-table-column>
<el-table-column prop="follow_status" label="跟进状态">
<template slot-scope="scope">
<el-link @click="click_follow_status(scope.row)">{{scope.row.follow_status}}</el-link>
</template>
</el-table-column>
<el-table-column label="会员号">
<template slot-scope="scope">
<el-link @click="click_username(scope.row)">{{scope.row.UserName}}</el-link>
<!-- <br> <span style="color:#409EFF;cursor:pointer;" @click.once="hujiao(scope.row)">拨号</span> -->
</template>
</el-table-column>
<el-table-column prop="is_verify" label="是否实名"></el-table-column>
<el-table-column prop="CreateTime" label="注册时间"></el-table-column>
<el-table-column label="总消费" sortable="all_amount">
<template slot-scope="scope">
<el-link @click="click_all_amount(scope.row,1)">{{scope.row.all_amount}}</el-link>
</template>value
</el-table-column>
<el-table-column label="A阶段消费" sortable="PrevMonthAmount">
<template slot-scope="scope">
<el-link @click="click_all_amount(scope.row,2)">{{scope.row.PrevMonthAmount}}</el-link>
</template>
</el-table-column>
<el-table-column label="B阶段消费" sortable="MonthAmount">
<template slot-scope="scope">
<el-link @click="click_all_amount(scope.row,3)">{{scope.row.MonthAmount}}</el-link>
</template>
</el-table-column>
<el-table-column prop="AddAmount" label="对比增长金额"></el-table-column>
<el-table-column prop="persent" label="对比增长百分比"></el-table-column>
<el-table-column label="账户总数" sortable="account_count">
<template slot-scope="scope">
<el-link @click="click_account(scope.row,1)">{{scope.row.account_count}}</el-link>
</template>
</el-table-column>
<el-table-column label="使用中个数" sortable="account_used">
<template slot-scope="scope">
<el-link @click="click_account(scope.row,3)">{{scope.row.account_used}}</el-link>
</template>
</el-table-column>value
<el-table-column label="过期个数" sortable="account_expire">
<template slot-scope="scope">
<el-link @click="click_account(scope.row,2)">{{scope.row.account_expire}}</el-link>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
v-if="retData.Data.length>0"
@current-change="get"
:page-size="50"
:current-page.sync="searchModel.PageIndex"
layout="total,prev, pager, next, jumper"
:total="retData.TotalCount"
></el-pagination>
</div>
<el-dialog
title="修改跟进状态"
:visible.sync="follow_status_change_fall"
width="50%">
<el-select size="small" v-model="set_follow_status.status" placeholder="请选择">
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select size="small" v-model="set_follow_status.product_type" placeholder="请选择">
<el-option
v-for="item in product_type_list"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input size="small" v-model="set_follow_status.sell_money" style="width:10%" placeholder="输入金额"></el-input>
<el-radio v-model="set_follow_status.sell_type" label="1">主动销售</el-radio>
<el-radio v-model="set_follow_status.sell_type" label="0">被动销售</el-radio>
<el-input style="margin:5px 0" v-model="set_follow_status.remark" size="small" placeholder="请输入跟进记录"></el-input>
<el-input
class="mb10 input-layout"
type="textarea"
:rows="2"
placeholder="粘贴图片即可上传 目前只能上传一张"
@paste.native="handlePaste"
>
</el-input>
<el-upload
class="upload-demo"
ref="upload"
action=""
:http-request="httpRequest"
:on-preview="handlePreview"
:on-remove="handleRemove"
:limit="1"
:file-list="fileList">
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件且不超过5M</div>
</el-upload>
<br>
<el-table :data="follow_status_list" border>
<el-table-column prop="create_time" width="200" label="时间"></el-table-column>
<el-table-column v-if="$local.isRoot()" width="100" prop="op_user" label="维护经理"></el-table-column>
<!-- <el-table-column prop="druation" width="90" label="呼叫时长"></el-table-column> -->
<el-table-column prop="product_type" label="产品类型"></el-table-column>
<el-table-column prop="sell_money" label="销售金额"></el-table-column>
<el-table-column prop="sell_type" label="销售类型"></el-table-column>
<el-table-column label="跟进截图">
<template slot-scope="scope">
<el-link type="primary" v-if="scope.row.file" :href="scope.row.file" target="_blank"> {{scope.row.file}} 查看大图</el-link>
</template>
</el-table-column>
<el-table-column label="跟进记录">
<template slot-scope="scope">
<span v-if="scope.row.remark != null">{{scope.row.remark}}</span>
<span v-if="scope.row.remark == null"><el-link style="color:#409EFF;cursor:pointer;" @click="click_follow_remark(scope.row)">修改</el-link></span>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="follow_status_change_fall = false"> </el-button>
<el-button :disabled="clickOk" type="primary" @click="changeFolowStatus()"> </el-button>
</span>
</el-dialog>
<el-dialog
title="拨打电话后修改跟进状态"
:visible.sync="follow_status_change_two"
width="50%">
<el-select size="small" v-model="set_follow_status.status" placeholder="请选择">
<el-option
v-for="item in types"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-input style="margin:5px 0" v-model="set_follow_status.remark" size="small" placeholder="请输入跟进记录"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="follow_status_change_two = false"> </el-button>
<el-button :disabled="clickOk" type="primary" @click="changeFolowStatus()"> </el-button>
</span>
</el-dialog>
<el-dialog
title="用户信息"
:visible.sync="userinfo_fall"
width="30%">
<el-card class="box-card">
<p oncopy="return false;">电话{{user_info.UserName}} &nbsp;&nbsp; <span style="color:#409EFF;cursor:pointer;" @click="copy_op(user_info.UserName)">复制</span>
</p>
<p>微信{{user_info.Wx}}</p>
<p>QQ{{user_info.QQ}}</p>
</el-card>
</el-dialog>
<el-dialog
title="通过号码拨打电话"
:visible.sync="phone_fall"
width="30%">
<el-card class="box-card">
<el-input v-model="phone_call" size="small" style="width:70%" placeholder="请输入内容"></el-input>
<sapn style="color:#409EFF;cursor:pointer;" @click.once="hujiao2()">拨打</sapn>
</el-card>
</el-dialog>
<el-dialog
title="消费记录"
:visible.sync="cost_fall"
v-loading="cost_loading"
width="70%">
<el-table height="500px" :data="cost_list" border>
<el-table-column prop="UpdateTime" label="时间"></el-table-column>
<el-table-column prop="ProductName" label="产品"></el-table-column>
<el-table-column prop="PackageName" label="套餐"></el-table-column>
<el-table-column prop="OrderType" label="类型"></el-table-column>
<el-table-column prop="ConnectCount" label="连接数"></el-table-column>
<el-table-column prop="Accounts" show-overflow-tooltip="true" label="帐号"></el-table-column>
<el-table-column prop="OrderAmount" label="单价"></el-table-column>
<el-table-column prop="PaymentAmount" label="实付金额"></el-table-column>
</el-table>
</el-dialog>
<el-dialog
title="帐号记录"
:visible.sync="account_fall"
v-loading="account_loading"
width="50%">
<el-table height="500px" :data="account_list" border>
<el-table-column prop="ProductName" label="产品"></el-table-column>
<el-table-column prop="PackageName" label="套餐"></el-table-column>
<el-table-column prop="Account" label="帐号"></el-table-column>
<el-table-column prop="StartTime" label="开始时间"></el-table-column>
<el-table-column prop="EndTime" label="结束时间"></el-table-column>
</el-table>
</el-dialog>
</el-card>
</div>
</template>
<script>
export default {
name: 'userIndex',
components: {
},
data () {
return {
fileList: [],
loading: false,
cost_loading: false,
account_loading: false,
retData: { TotalCount: 0, Data: [] },
dateRange1: [],
dateRange2: [],
searchModel: {
PageIndex: 1,
keyWord: '',
sortLable: '',
sortOrder: 0,
profile: '',
last_month: {
s_time: '',
e_time: ''
},
new_month: {
s_time: '',
e_time: ''
},
cost_type: '0',
money1: null,
money2: null,
manager_id:0
},
types: [],
user_info: {},
follow_status_change_fall: false,
follow_status_change_two: false,
follow_status_list: [],
phone_call: '',
set_follow_status: {
id: null,
user_id: null,
old_status: null,
status: null,
remark: null,
file:null,
product_type:'other_order',
sell_money:0,
sell_type:'0'
},
userinfo_fall: false,
phone_fall: false,
clickOk: false,
cost_fall: false,
cost_list: [],
account_list: [],
account_fall: false,
last_month: [new Date(new Date().getFullYear(),new Date().getMonth()-1),new Date(new Date().getFullYear(),new Date().getMonth()-1,new Date().getDate(),new Date().getHours(),new Date().getMinutes(),new Date().getSeconds())],
new_month: [new Date(new Date().getFullYear(),new Date().getMonth()),new Date()],
cost_types: [{
value: '0',
label: '总消费金额筛选'
}, {
value: '1',
label: 'A阶段消费筛选'
}, {
value: '2',
label: 'B阶段消费筛选'
}],
sell_detail: {},
sell_detail_month: null,
temps: null,
manegers: [{
value: '选项1',
label: '黄金糕'
}],
manager: 0,
isroot:false,
product_type_list:[
{
value: 'other_order',
label: '其他IP产品订单'
},
{
value: 'mogu_order',
label: '蘑菇IP订单'
},
{
value: 'jihu_order',
label: '极狐IP订单'
},
{
value: 'jiguang_order',
label: '极光IP订单'
},
{
value: 'recharge',
label: 'IP充值'
},
{
value: 'http',
label: 'HTTP充值'
},
{
value: 'ros',
label: '软路由订单'
},
{
value: 'jinqiao',
label: '金桥投屏订单'
},
]
}
},
created () {
this.$store.commit('setCurrentNav', '用户管理>>消费统计')
var currentUser = this.$local.getUserByCache()
this.isroot = currentUser.Manager.IsRootUser
this.get()
this.sell_detail_info()
if (this.isroot) {
this.manager_list()
}
},
methods: {
sell_detail_info () {
if (this.isroot) {
this.$api.get(this.$api.phpURL + 'manager/SellInfo/getOneManager', {sell_month: this.sell_detail_month,manager_id: this.manager}).then(res => {
// this.$api.get(this.$api.phpURL + 'manager/SellInfo/getOne', {sell_month: this.sell_detail_month,manager_id: this.manager}).then(res => {
this.sell_detail = res.data
})
} else {
this.$api.get(this.$api.phpURL + 'manager/SellInfo/getOne', {sell_month: this.sell_detail_month}).then(res => {
this.sell_detail = res.data
})
}
},
manager_list () {
this.$api.get(this.$api.phpURL + 'manager/SellInfo/getManagerList',).then(res => {
this.manegers = res.data
})
},
// eslint-disable-next-line standard/object-curly-even-spacing
sort ({column, prop, order }) {
this.searchModel.PageIndex = 1
this.searchModel.sortLable = column.sortable
// eslint-disable-next-line eqeqeq
this.searchModel.sortOrder = order == 'ascending' ? 1 : 0
this.get()
},
search () {
if (this.last_month && this.last_month.length === 2) {
this.searchModel.last_month.s_time = this.last_month[0]
this.searchModel.last_month.e_time = this.last_month[1]
}
if (this.new_month && this.new_month.length === 2) {
this.searchModel.new_month.s_time = this.new_month[0]
this.searchModel.new_month.e_time = this.new_month[1]
}
this.searchModel.PageIndex = 1
this.searchModel.sortLable = null
if (this.searchModel.money1) {
if (!(this.searchModel.money1)) {
this.$message({
message: '请正确填写消费范围',
type: 'warning'
})
return
}
if (!(this.searchModel.money2)) {
this.searchModel.money2 = 999999999;
}
}
this.get()
},
get () {
if (this.isroot) {
this.searchModel.manager_id = this.manager;
}
this.loading = true
this.$api.get(this.$api.phpURL + 'manager/UserFollow/getList', {PageIndex: this.searchModel.PageIndex, search: this.searchModel}).then(res => {
this.retData.Data = res.data.list
// eslint-disable-next-line eqeqeq
if (res.data.count != 0) {
this.retData.TotalCount = parseInt(res.data.count)
}
this.types = res.data.types
this.loading = false
})
},
click_follow_status (row) {
this.temps = row
this.clickOk = false
this.follow_status_change_fall = true
this.set_follow_status.status = row.follow_status
this.set_follow_status.user_id = row.Id
this.set_follow_status.old_status = row.follow_status
this.$api.get(this.$api.phpURL + 'manager/UserFollow/getFollowRecord', {id: row.Id}).then(res => {
this.follow_status_list = res.data
})
},
click_follow_remark (row) {
this.clickOk = false
this.follow_status_change_two = true
this.set_follow_status.id = row.id
this.set_follow_status.status = this.setStatus(row.follow_status)
this.set_follow_status.user_id = row.user_id
this.set_follow_status.old_status = row.follow_status
},
changeFolowStatus () {
// eslint-disable-next-line valid-typeof
if (typeof this.set_follow_status.status !== 'number') {
this.$alert('请选择跟进状态', '警告', {
confirmButtonText: '确定'
})
return
}
this.temps.follow_status = this.setStatus(this.set_follow_status.status)
this.clickOk = true
var up_data = {};
this.set_follow_status.file = this.fileList[0]
up_data.params = this.set_follow_status;
this.$api.upload(this.$api.phpURL + 'manager/UserFollow/changeFolowStatus',up_data).then(res => {
this.follow_status_change_fall = false
this.follow_status_change_two = false
this.set_follow_status.id = null
if (res.Code == 30000) {
this.$alert(res.msg, '警告', {
confirmButtonText: '确定'
})
}
})
},
click_username (row) {
this.userinfo_fall = true
this.$api.get(this.$api.phpURL + 'manager/UserFollow/getUserInfo', {id: row.Id}).then(res => {
this.user_info = res.data
})
},
click_phone () {
this.phone_fall = true
},
click_all_amount (row, index) {
this.cost_fall = true
this.cost_loading = true
this.$api.get(this.$api.phpURL + 'manager/UserFollow/getCostList', {id: row.Id, index: index, search: this.searchModel}).then(res => {
this.cost_list = res.data
this.cost_loading = false
})
},
click_account (row, index) {
this.account_fall = true
this.account_loading = true
this.$api.get(this.$api.phpURL + 'manager/UserFollow/getAccountList', {id: row.Id, index: index}).then(res => {
this.account_list = res.data
this.account_loading = false
})
},
select_manager() {
this.get();
this.sell_detail_info();
},
setStatus (status) {
switch (status) {
case 1:
return '待跟进'
case 2:
return '跟进中'
case 3:
return '跟进完成'
case 4:
return '跟进超时-消费减少'
case 5:
return '流失-需求减少'
case 6:
return '流失-暂时不用'
case 7:
return '流失-价格问题'
case 8:
return '流失-产品问题'
case 9:
return '流失-也可自定义'
case 10:
return '高意向客户'
case 11:
return '已完成'
}
},
dataExport () {
this.$api.getDownloadFile('/course/v1/order/ExportUserConsumeStatistics', this.searchModel)
},
copy_op(str) {
let copy = localStorage.getItem('copy');
let now = parseInt(new Date().getTime()/1000);
let time = (now - copy);
if (time<60) {
this.$message({
message: time+'秒后再复制',
type: 'warning'
})
return false
} else {
const save = (e) => {
e.clipboardData.setData('text/plain', str)
e.preventDefault()
}
document.addEventListener('copy', save)
document.execCommand('copy')
document.removeEventListener('copy', save)
localStorage.setItem('copy', now);
this.$message({
message: '复制成功',
type: 'success'
})
}
},
hujiao(r) {
var phone = r.LoginCode;
this.$api.post(this.$api.phpURL + 'manager/UserFollow/hujiao', {phone: phone}).then(res => {
if (res.Code == 30000) {
this.$message({
message: res.msg,
type: 'error'
})
} else {
this.$message({
message: '呼叫成功',
type: 'success'
})
}
})
},
hujiao2() {
var phone = this.phone_call;
this.$api.post(this.$api.phpURL + 'manager/UserFollow/hujiao', {phone: phone}).then(res => {
if (res.Code == 30000) {
this.$message({
message: res.msg,
type: 'error'
})
} else {
this.$message({
message: '呼叫成功',
type: 'success'
})
}
})
},
submitUpload() {
console.log(this.$refs);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
// 自定义的提交函数,取出文件设置进请求参数
httpRequest(param) {
this.set_follow_status.file = param.file
},
handlePaste (e) {
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
var items='';
items = (e.clipboardData || window.clipboardData).items;
let file = null;
if (!items || items.length === 0) {
this.$message.error('当前浏览器不支持粘贴本地图片,请打开图片复制后再粘贴!');
return;
}
// 搜索剪切板items
for (let i = 0; i < items.length; i++) {
// 限制上传文件类型
if (items[i].type.indexOf('image') !== -1) {
file = items[i].getAsFile();
break;
}
}
// 对复制黏贴的类型进行判断,若是非文件类型,比如复制黏贴的文字,则不会调用上传文件的函数
if(file){
// 上传到图片服务器
this.fileList.push(file)
}
}
}
}
</script>
<style scoped>
</style>