crm-uni/pages/index/index.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>