浅念
513 lines
12 KiB
Vue
513 lines
12 KiB
Vue
<template>
|
||
<view class="content">
|
||
<z-paging ref="paging" v-model="datalist" @query="queryList" :empty-view-text="$t('Nodata')">
|
||
<template #top>
|
||
<view class="contop">
|
||
<view class="changeyy" @click="showlang = true">
|
||
<image src="/static/image/change.png" mode=""></image>{{$t('home.langbtn')}}
|
||
</view>
|
||
<view class="title">
|
||
{{$t('home.title')}} CRM
|
||
</view>
|
||
<view class="num">
|
||
{{statisticsdata.day}}<text>{{$t('home.day')}}</text>
|
||
</view>
|
||
<view class="data-briefing">
|
||
<view class="top">
|
||
<text>{{$t('home.databf')}}</text>
|
||
<view class="time" @click="show = true">
|
||
<image src="/static/image/time.png" mode=""></image>
|
||
<view class="" style="margin:0px 5px;">{{time}}</view>
|
||
<u-icon name="arrow-down" color="#666666" size="16"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="cont">
|
||
<u-grid :border="false">
|
||
<u-grid-item>
|
||
<text class="grid-num">{{statisticsdata.customer}}</text>
|
||
<text class="grid-text">{{$t('home.addkh')}}</text>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<text class="grid-num">{{statisticsdata.visit}}</text>
|
||
<text class="grid-text">{{$t('home.addbf')}}</text>
|
||
</u-grid-item>
|
||
<u-grid-item>
|
||
<text class="grid-num">{{statisticsdata.follow}}</text>
|
||
<text class="grid-text">{{$t('home.addgj')}}</text>
|
||
</u-grid-item>
|
||
<u-grid-item @click="custormerfn(1)">
|
||
<text class="grid-num">{{statisticsdata.customer_init}}</text>
|
||
<text class="grid-text">{{$t('followup')}}</text>
|
||
</u-grid-item>
|
||
<u-grid-item @click="custormerfn(2)">
|
||
<text class="grid-num">{{statisticsdata.customero_fllow}}</text>
|
||
<text class="grid-text">{{$t('deal')}}</text>
|
||
</u-grid-item>
|
||
<u-grid-item @click="custormerfn(3)">
|
||
<text class="grid-num">{{statisticsdata.customer_deal}}</text>
|
||
<text class="grid-text">{{$t('lost')}}</text>
|
||
</u-grid-item>
|
||
</u-grid>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view ></view>
|
||
<view class="gjtimetop">
|
||
<view class="title">{{$t('Remindergj')}}</view>
|
||
<view class="selecttime" @click="showgjtime = true">
|
||
<view class="">{{secelttime}}</view>
|
||
<u-icon name="arrow-down" color="#666666" size="16"></u-icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="gjtime">
|
||
<view class="contents" v-for="(item, index) in datalist" :key="index">
|
||
<view class="" >
|
||
<view class="cont">
|
||
<view class="title">
|
||
<view class=""><text class="name">{{item.contacts}}</text></view>
|
||
<countdown :total-seconds="item.follow_remaining" :show-days="true" @end="onCountdownEnd" />
|
||
</view>
|
||
<view class=""><text class="phone">{{item.phone}}</text></view>
|
||
<view class="">{{$t('nextgjtime')}}：<text>{{item.follow_next}}</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="desc1">
|
||
<view class="" @click="callPhone(item)"><image src="/static/image/customer/phone.png" mode=""></image> {{$t('call')}}</view>
|
||
<view class="" @click="editClick(item)"><image src="/static/image/customer/edit.png" mode=""></image> {{$t('follow')}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</z-paging>
|
||
<u-datetime-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="show" @close="close('show')" v-model="value1"
|
||
@confirm="confirm" @cancel="cancel" mode="year-month"></u-datetime-picker>
|
||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" @close="close('showlang')" :show="showlang" :columns="columns"
|
||
@cancel="cancellang" @confirm="confirmlang" :title="$t('home.langbtn')" keyName="label"></u-picker>
|
||
<u-picker closeOnClickOverlay :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" @close="close('showgjtime')" :show="showgjtime" :columns="columnstime"
|
||
@cancel="close('showgjtime')" @confirm="confirmgj" keyName="label"></u-picker>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Countdown from '@/components/Countdown/Countdown.vue';
|
||
import {
|
||
request,
|
||
showToast
|
||
} from '@/api/apiT.js'
|
||
export default {
|
||
components: { Countdown },
|
||
data() {
|
||
return {
|
||
statisticsdata:{},
|
||
headerBgColor: 'transparent', // 初始背景色为透明
|
||
home: this.$t('tabbar.home'),
|
||
value0: 0,
|
||
show: false,
|
||
showlang: false,
|
||
showgjtime: false,
|
||
secelttime:this.$t('all'),
|
||
value1: Number(new Date()),
|
||
timevalue: this.result(Number(new Date())),
|
||
time: this.result(Number(new Date())),
|
||
datalist: [],
|
||
follow:'',
|
||
filter:'',//跟进日期筛选
|
||
columns: [
|
||
[{
|
||
label: this.$t('zh'),
|
||
id: 'zh-Hans'
|
||
}, {
|
||
label: this.$t('en'),
|
||
id: 'en'
|
||
}]
|
||
],
|
||
columnstime:[
|
||
[{
|
||
label: this.$t('all'),
|
||
id: ''
|
||
},{
|
||
label: this.$t('onedayn'),
|
||
id: '0'
|
||
}, {
|
||
label: this.$t('threedayn'),
|
||
id: '1'
|
||
}, {
|
||
label: this.$t('sevendayn'),
|
||
id: '2'
|
||
}]
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
uni.removeStorageSync('location')
|
||
// this.getcustomerlist()
|
||
// this.queryList(1,10)
|
||
},
|
||
onShow() {
|
||
uni.setTabBarItem({
|
||
index: 0,
|
||
text: this.$t('tabbar.home')
|
||
})
|
||
uni.setTabBarItem({
|
||
index: 1,
|
||
text: this.$t('tabbar.customer')
|
||
})
|
||
uni.setTabBarItem({
|
||
index: 2,
|
||
text: this.$t('tabbar.mine')
|
||
})
|
||
this.getstatistics()
|
||
},
|
||
methods: {
|
||
close(value){
|
||
this[value] = false
|
||
},
|
||
//统计数据
|
||
getstatistics(){
|
||
request({
|
||
url:'customer/statistics',
|
||
method:'get',
|
||
data:{
|
||
created:this.timevalue
|
||
}
|
||
}).then(res => {
|
||
this.statisticsdata = res.data.data
|
||
})
|
||
},
|
||
cancellang() {
|
||
this.showlang = false
|
||
},
|
||
//数据简报点击事件
|
||
custormerfn(item){
|
||
uni.reLaunch({
|
||
url: '/pages/index/customer?tab='+item,// 替换为你要跳转的页面路径
|
||
});
|
||
},
|
||
//语言切换事件
|
||
confirmlang(e) {
|
||
var that = this
|
||
uni.setLocale(e.value[0].id)
|
||
this.$i18n.locale = e.value[0].id
|
||
// uni.setStorageSync('i18locale', e.value[0].id);
|
||
this.showlang = false
|
||
this.columns =[
|
||
[{
|
||
label: this.$t('zh'),
|
||
id: 'zh-Hans'
|
||
}, {
|
||
label: this.$t('en'),
|
||
id: 'en'
|
||
}]
|
||
];
|
||
this.columnstime =[
|
||
[{
|
||
label: this.$t('all'),
|
||
id: ''
|
||
},{
|
||
label: this.$t('onedayn'),
|
||
id: '0'
|
||
}, {
|
||
label: this.$t('threedayn'),
|
||
id: '1'
|
||
}, {
|
||
label: this.$t('sevendayn'),
|
||
id: '2'
|
||
}]
|
||
];
|
||
this.columnstime[0].forEach((item,index) => {
|
||
if(item.id == that.filter){
|
||
that.secelttime = item.label
|
||
}
|
||
})
|
||
uni.setTabBarItem({
|
||
index: 0,
|
||
text: this.$t('tabbar.home')
|
||
})
|
||
uni.setTabBarItem({
|
||
index: 1,
|
||
text: this.$t('tabbar.customer')
|
||
})
|
||
uni.setTabBarItem({
|
||
index: 2,
|
||
text: this.$t('tabbar.mine')
|
||
})
|
||
var language = e.value[0].id
|
||
if(e.value[0].id=='zh-Hans'){
|
||
language= 'zh_CN'
|
||
}
|
||
request({
|
||
url:'user/language',
|
||
method:'POST',
|
||
data:{
|
||
language: language,
|
||
}
|
||
}).then(res => {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
});
|
||
})
|
||
},
|
||
//日期选择组件
|
||
confirm(e) {
|
||
this.show = false
|
||
},
|
||
cancel() {
|
||
this.show = false
|
||
},
|
||
confirm(e) {
|
||
this.show = false
|
||
const timeFormat = uni.$u.timeFormat
|
||
this.timevalue = timeFormat(e.value, 'yyyy-mm')
|
||
this.result(e.value, e.mode)
|
||
this.getstatistics()
|
||
},
|
||
result(time, mode) {
|
||
const timeFormat = uni.$u.timeFormat
|
||
this.time = timeFormat(time, 'yyyy-mm')
|
||
return timeFormat(time, 'yyyy-mm')
|
||
},
|
||
//跟进日期选择
|
||
confirmgj(e){
|
||
this.showgjtime = false
|
||
this.secelttime=e.value[0].label
|
||
this.filter = e.value[0].id
|
||
this.datalist=[]
|
||
this.queryList(1, 10)
|
||
},
|
||
onCountdownEnd(){},
|
||
//客户列表数据
|
||
queryList(pageNo, pageSize) {
|
||
var that = this;
|
||
request({
|
||
url:'customer/waitFollow',
|
||
method:'get',
|
||
data: {
|
||
page:pageNo,
|
||
per_page:10,
|
||
filter:this.filter
|
||
}
|
||
}).then(res => {
|
||
if(res.data.code ==0){
|
||
var datas = res.data.data.list;
|
||
this.$refs.paging.complete(datas);
|
||
}else{
|
||
// this.$refs.paging.complete(null);
|
||
// that.listlength=0
|
||
}
|
||
uni.stopPullDownRefresh();
|
||
})
|
||
},
|
||
// 拨打电话
|
||
callPhone(item) {
|
||
var phoneNumber= item.phone
|
||
if (!phoneNumber) {
|
||
uni.showToast({
|
||
title: this.$t('callPhonemsg'),
|
||
icon: 'none',
|
||
});
|
||
return;
|
||
}
|
||
|
||
uni.makePhoneCall({
|
||
phoneNumber: phoneNumber,
|
||
success: () => {
|
||
console.log('拨打电话成功');
|
||
},
|
||
fail: (err) => {
|
||
console.log('拨打电话失败', err);
|
||
},
|
||
});
|
||
},
|
||
editClick(item){
|
||
uni.navigateTo({
|
||
url: '/pages/customer/followup?id='+item.id
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.u-pageicon {
|
||
width: 18px;
|
||
height: 18px;
|
||
}
|
||
.u-grid-item{
|
||
margin-bottom: 20px;
|
||
}
|
||
.tabsbg {
|
||
border-radius: 16px 16px 0px 0px;
|
||
background: #E6EDFF
|
||
}
|
||
|
||
.changeyy {
|
||
padding: 20rpx 30rpx;
|
||
border-radius: 50px;
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
margin-bottom: 50rpx;
|
||
display: inline-block;
|
||
|
||
image {
|
||
width: 14px;
|
||
height: 12px;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
font-size: 28rpx;
|
||
position: relative;
|
||
background: #F6F6F6;
|
||
height: 100vh;
|
||
.contop {
|
||
background-image: url("/static/image/topbg.png");
|
||
background-size: 100%;
|
||
background-repeat: no-repeat;
|
||
/* #ifdef APP-PLUS */
|
||
padding: 80rpx 30rpx 0px;
|
||
/* #endif */
|
||
padding: 20rpx 30rpx 0px;
|
||
color: #FFFFFF;
|
||
|
||
.title {
|
||
font-size: 32rpx;
|
||
margin-bottom: 20px;
|
||
width: 58%;
|
||
}
|
||
|
||
.num {
|
||
font-size: 60rpx;
|
||
font-weight: bold;
|
||
font-family: PingFang SC-Regular;
|
||
|
||
text {
|
||
font-size: 36rpx;
|
||
font-weight: 300;
|
||
margin-left: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.data-briefing {
|
||
background-color: #FFFFFF;
|
||
// margin: 15px;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
margin-top:80rpx;
|
||
|
||
.top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-size: 32rpx;
|
||
color: #222222;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #666666;
|
||
|
||
image {
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.cont {
|
||
margin-top: 20px;
|
||
|
||
.grid-num {
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.grid-text {
|
||
color: #222222;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
.gjtimetop{
|
||
margin:20px 15px 0px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.title{
|
||
color: #222222;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
}
|
||
.selecttime{
|
||
display: flex;
|
||
align-items: center;
|
||
view{
|
||
margin-right: 5px;
|
||
}
|
||
// color: #666666;
|
||
}
|
||
}
|
||
.gjtime{
|
||
padding:5px 15px 15px;
|
||
|
||
}
|
||
.contents{
|
||
background-color: #FFFFFF;
|
||
border-radius: 10px;
|
||
margin: 15px 0px;
|
||
.cont{
|
||
padding:15px;
|
||
font-size: 24rpx;
|
||
.title{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: #222222;
|
||
image{
|
||
width: 18px;
|
||
height: 18px;
|
||
// vertical-align: sub;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
.name{
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
margin-right: 10px;
|
||
}
|
||
.phone{
|
||
font-size: 28rpx;
|
||
}
|
||
.ststus{
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
.desc1{
|
||
padding: 0px 15px 10px;
|
||
color: #3471FF;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
view{
|
||
margin-left:15px;
|
||
}
|
||
image{
|
||
width: 14px;
|
||
height: 14px;
|
||
// vertical-align: sub;
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
</style> |