crm-uni/pages/customer/tagcustomer.vue

<template>
	<view>
		<z-paging  ref="paging" v-model="datalist" @query="queryList"  :empty-view-text="$t('Nodata')">	
			<template #top>
				<uni-nav-bar leftText=" " :fixed="true" :border="false" leftIcon="back" @clickLeft="leftClick" color="#000000" backgroundColor="#fff" :statusBar="true" :title="$t('navbar.tagselect')"></uni-nav-bar>
			</template>
			<view class="list">
				<view class="contents" v-for="(item, index) in datalist" :key="index" >
					<view class=""  @click="godetile(item)">
						<view class="top">
							<view class="">{{item.created_at}}</view>
							<view class="right">
								<text class="medal" :style="{color:(item.magnitude == 0 ?'#F5AB00' : item.magnitude == 1 ?'#8495B8': '#9B7200')}">{{item.magnitude_txt}}</text>
								<text class="tag" :style="{background:(item.follow == 0 ?'#3471FF' : item.follow == 1 ?'#27C89C': '#FF4040')}">{{item.follow==0?$t('followup'):item.follow==1?$t('deal'):$t('lost')}}</text>
							</view>
						</view>
						<u-line margin="20rpx 0px"></u-line>
						<view class="cont">
							<view class="title">
								<view class=""><text class="name">{{item.contacts}}</text><text class="phone">{{item.phone}}</text></view>
								<view class="ststus">{{item.grade_txt}}</view>
							</view>
							<view class="info"><text class="sex">{{item.sex_txt}}</text> | <text class="addr">{{item.country_name}}</text><text class="type">{{item.car_type_name}}</text>
							</view>
							<view class="tags">
							   <text>#</text> {{tag_name}}
							</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('customer.addfollow')}}</view>
						<!-- <view class=""  @click="delClick(item)"><image src="/static/image/customer/trash.png" mode=""></image> {{$t('delete')}}</view> -->
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import { request,showToast } from '@/api/apiT.js'
	export default {
		data() {
			return {
				datalist:[],
				tag_id:'',
				tag_name:''
			}
		},
		onLoad(e) {
			console.log(e)
			this.tag_id = e.tag_id
			this.tag_name = e.name
		},
		methods: {
			leftClick(){
				uni.navigateBack({})
			},
			//客户列表数据
			queryList(pageNo, pageSize) {
				var that = this;
				request({
					url:'customer/list',
					method:'get',
					data: {
						tag_id:this.tag_id,
						page:pageNo,
						per_page:10,
					}
				}).then(res => {
					console.log(res.data)
					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();
				})
			},
			godetile(item){
				console.log(item)
				uni.navigateTo({
					url: '/pages/customer/detile?id='+item.id
				});
			},
			// 拨打电话
			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">
	.tags{
		color: #726CFF;
		font-size: 24rpx;
	}
	.list{
		padding: 15px;
		overflow: auto;
		.contents{
			background-color: #F6F6F6;
			border-radius: 10px;
			margin-bottom: 10px;
			.top{
				padding: 10px 15px 0px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.tag{
					color: white;
					border-radius: 20px 0px 0px 20px;
					padding: 3px 10px;
					margin-right: -15px;
				}
				.right{
					display: flex;
					align-items: center;
					.medal{
						margin-right: 10px;
					}
				}
			}
			.cont{
				padding: 0px 15px 10px;
				font-size: 24rpx;
				.title{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #222222;
					.name{
						font-size: 32rpx;
						font-weight: bold;
						margin-right: 10px;
					}
					.phone{
						font-size: 28rpx;
					}
				}
				.ststus{
					color: #666666;
				}
				.info,.desc{
					color: #78758E;
					line-height: 26px;
				}
				.sex{
					margin-right: 5px;
				}
				.addr{
					margin-left: 5px;
				}
				.type{
					margin-left: 5px;
					color: #3471FF;
				}
			}
		}
		.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>