crm-uni/pages/index/index.vue

<template>
	<view class="content">
		<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')}} HESU CRM
			</view>
			<view class="num">
				66 <text>{{$t('home.day')}}</text>
			</view>
		</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>
					<u--input v-model="time" border="none" disabled disabledColor="#ffffff" style="width: 65px;margin-left: 5px;"></u--input>
					<u-icon name="arrow-down" color="#666666" size="16"></u-icon>
				</view>
			</view>
			<view class="cont">
				<u-grid :border="false" col="4">
				    <u-grid-item>
				        <text class="grid-num">20</text>
				        <text class="grid-text">{{$t('home.addxs')}}</text>
				    </u-grid-item>
					<u-grid-item>
					    <text class="grid-num">20</text>
					    <text class="grid-text">{{$t('home.addkh')}}</text>
					</u-grid-item>
					<u-grid-item>
					    <text class="grid-num">20</text>
					    <text class="grid-text">{{$t('home.addbf')}}</text>
					</u-grid-item>
					<u-grid-item>
					    <text class="grid-num">20</text>
					    <text class="grid-text">{{$t('home.addgj')}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="userlist">
			<u-sticky offset-top="-44">
				<u-tabs :list="list1"  :scrollable="false"></u-tabs>
			</u-sticky>
			 <view class="list">
				 <userlist :list="datalist" @click="godetile">
					<template v-slot:footer>
					    <view class="desc">客户想要性价比高，偏爱宝马</view>
					</template>
					<template v-slot:footertab>
					    <view></view>
					</template>
				 </userlist>
			 </view>
		</view>
		<u-datetime-picker :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="show" v-model="value1" @confirm="confirm" @cancel="cancel"  mode="year-month"></u-datetime-picker>
		<u-picker  :cancel-text="$t('cancel')" :confirm-text="$t('confirm')" :show="showlang" :columns="columns" @cancel="cancellang" @confirm="confirmlang" :title="$t('home.langbtn')" keyName="label"></u-picker>
	</view>
</template>

<script>
	import userlist from '@/components/userlist/index.vue';
	// import { request,showToast } from '@/api/apiT.js'
	export default {
		components: {
		    userlist
		},
		data() {
			return {
				home: this.$t('tabbar.home'),
				value0: 0,
				show: false,
				showlang: false,
				value1: Number(new Date()),
				timevalue:this.result(Number(new Date())),
				time:this.result(Number(new Date())),
				datalist:[
					{id:1},
					{id:2},
					{id:3},
					{id:4}
				],
				columns:[
					[{
						label: '中文',
						id: 'zh'
					}, {
						label: '英文',
						id: 'en'
					}, {
						label: '俄语',
						id: 'ru'
					}]
				],
				list1: [
					{
						name: this.$t('all'),
					}, {
						name: this.$t('followup'),
					}, {
						name: this.$t('deal')
					}, {
						name: this.$t('lost')
					}
				]
			}
		},
		onLoad() {
		},
		methods: {
			confirm(e) {
				// console.log('confirm', e);
				this.show = false
			},
			cancellang() {
				// console.log('cancel');
				this.showlang  = false
			},
			confirmlang(e) {
				this.$i18n.locale = e.value[0].id
				this.showlang = false
				this.list1 = [
					{
						name: this.$t('all'),
					}, {
						name: this.$t('followup'),
					}, {
						name: this.$t('deal')
					}, {
						name: this.$t('lost')
					}
				];
				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')
				})
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				this.show = false
				this.result(e.value, e.mode)
			},
			result(time, mode) {
				const timeFormat = uni.$u.timeFormat
				this.timevalue=timeFormat(time, 'yyyy-mm')
				this.time=timeFormat(time, 'yyyy-mm')
				return timeFormat(time, 'yyyy-mm')
			},
			godetile(item){
				console.log(item)
				uni.navigateTo({
					url: '/pages/customer/detile'
				});
			}
		}
	}
</script>

<style lang="scss">
	.u-pageicon{
		width: 18px;
		height: 18px;
	}
	.changeyy{
		padding: 10px 15px;
		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;
		
		.contop{
			background-image: url("/static/image/topbg.png");
			background-size: 100%;
			background-repeat: no-repeat;
			padding: 88rpx 30rpx 240rpx;
			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: -21%;
			.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: 20rpx;
				}
			}
			
			
		}
		.userlist{
			background-image: url(/static/image/cbg.png);
			background-size: 100%;
			background-repeat: no-repeat;
			.list{
				padding: 15px;
			}
		}
	}
</style>