Ci2Order.vue/App/pages/remind/index/consultation.vue

<template>
	<view class="consultation">
		<z-date-slide :dataList="headerList" @getDateInfo="getDateInfo" @getDateRange="getDateRange"></z-date-slide>
		<scroll-view class="consultation_scroll" scroll-y  @scrolltolower="scrolltolower"
:show-scrollbar="false" @scroll="scroll">
			<view class="mt-50 mb-20">
				<z-card class="mt-10 card_item flex-n fac" v-for="(item,index) in dataList" :key="index" @click.native="gotoDetail(item.id)">
					<view class="card_item_level">
						<view class="flex-1" :class="item.wantLevel=='01'?'card_item_level_item':''"></view>
						<view class="flex-1" :class="(item.wantLevel=='01'||item.wantLevel=='02')?'card_item_level_item':''"></view>
						<view class="flex-1" :class="(item.wantLevel=='01'||item.wantLevel=='02'||item.wantLevel=='03')?'card_item_level_item':''"></view>
					</view>
					<view class="ml-50 flex-1 line-1">
						<view class="card_item_text1">{{item.customName}} {{item.wantDate}}</view>
						<view class="card_item_text2 line-1">
							{{item.wantHouseContent}}
						<!-- 	<text v-for="(itm,idx) in item.wantHouse" :key="idx">
								{{itm.houseName}}<template v-if="idx!=item.wantHouse.length-1">、</template>
							</text> -->
						</view>
					</view>
					<view class="card_item_state flex-n fac ml-20">
						<template v-if="item.follow_state=='01'">
							<view class="card_item_state_img iconfont iconjuxing18kaobei"></view>
							<view class="card_item_state_text">待跟进</view>
						</template>
						<template v-if="item.follow_state=='02'">
							<view class="card_item_state_img  iconfont iconjuxing18"></view>
							<view class="card_item_state_text">跟进中</view>
						</template>
						<template v-if="item.follow_state=='04'">
							<view class="card_item_state_img  iconfont iconjuxing21kaobei2"></view>
							<view class="card_item_state_text">已取消</view>
						</template>
					</view>
					<view class="card_item_tel ml-30 mr-20 iconfont icondianhua-copy" v-if="item.phone" @click.stop="showMakePhone=true;callPhone=item.phone"></view>
					<view class="card_item_tel ml-30 mr-20 iconfont icondianhua-copy" style="color: #eee;" v-else></view>
				</z-card>
				<z-nodata state="nodata" v-if="dataList.length==0"></z-nodata>
				<z-loading :showLoading="showLoading" v-else></z-loading>
			</view>
		</scroll-view>
		<z-select-popup :visible.sync="showMakePhone">
			<view @click="gotoMakePhone">{{callPhone||'无联系电话'}}</view>
		</z-select-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		props: {
			refresh: Boolean
		},
		data() {
			return {

				dataList: [],
				headerList: [],

				showMakePhone: false,
				callPhone: '',

				daterange: [],
				date: '',

				total: 0,
				pageNum: 1,
				scrollTop: 0,
				showLoading: false,
			}
		},
		watch: {
			'$store.state.tabbarIndex'(newval,oldval){
				// console.log('tabbar',newval,this.dataList)
				// this.dataList=[];
				// console.log('tabbar',newval,this.dataList)
				// 	this.askList(this.date);
				// 	this.askHeader(this.daterange[0].date, this.daterange[6].date)
			
			},
			refresh(newval, oldval) {
				// console.log('刷新',newval)
				if (newval) {
					// setTimeout(()=>{
						this.dataList=[];
						
						this.askList(this.date);
						this.askHeader(this.daterange[0].date, this.daterange[6].date)
					// },100)
					
				}
			}
		},
		mounted() {
			
		},

		methods: {
			//获取咨询表头
			askHeader(startTime, endTime) {
				var houseTypeIds = uni.getStorageSync('searchField') || [];
				this.$axios.post('app/preUserAsk/askAlertList', {
					"storeId": uni.getStorageSync('storeId'),
					"startTime": startTime,
					"endTime": endTime,
					"houseTypeIds": houseTypeIds,
				}).then(res => {
					console.log('咨询表头', res)
					var data = res.data.list;
					var headerList = [];
					for (var i in data) {
						headerList.push({
							record: data[i].record,
							isImportant: data[i].importantDates.length > 0 ? true : false
						});
					}
					this.headerList = headerList;
				}).catch(err => {
					this.$refs.uToast.error(err.msg)
				})
			},
			//获取咨询列表
			askList(date) {
				var houseTypeIds = uni.getStorageSync('searchField') || [];
				this.$axios.post('app/preUserAsk/askAlertByDate', {
					"storeId": uni.getStorageSync('storeId'),
					"askDate": date,
					"pageNum": this.pageNum,
					"houseTypeIds": houseTypeIds,
					"pageSize": 10
				}).then(res => {
					console.log('咨询列表', res)
					this.dataList = this.dataList.concat(res.data.list);
					 
					                    for(var i in this.dataList){
					                        var content='';
					                        for(var j in this.dataList[i].wantHouse){
					                            if(this.dataList[i].wantHouse[j]){
					                                content +=this.dataList[i].wantHouse[j].houseName+'、'
					                            }
					                        }
					                        if(content.length>0){
					                            this.$set(this.dataList[i],'wantHouseContent',content.substring(0,content.length-1))
					                        }
					                    }
					this.total = res.data.total;
					this.showLoading = false;
				}).catch(err => {
					this.$refs.uToast.error(err.msg)
					this.showLoading = false;
				})
			},
			//拨打电话
			gotoMakePhone() {
				var that = this;
				uni.makePhoneCall({
					phoneNumber: this.callPhone,
					complete: function() {
						that.showMakePhone = false;
					}
				});
			},
			getDateInfo(date) {
				this.dataList=[];
				console.log(date.date)
				this.$emit('getDateInfo', date)
				this.askList(date.date)
				this.date = date.date;
			},
			getDateRange(daterange) {
				// console.log('日期区间',datarange)
				this.askHeader(daterange[0].date, daterange[6].date);
				this.daterange = daterange;
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '../detail/index?id=' + id
				})
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			scrolltolower() {
				var totalPage = Math.ceil(Number(this.total) / 10)
				if (this.pageNum < totalPage) {
					this.pageNum++;
					this.showLoading = true;
					this.askList(this.date);
				}
			},
			scrolltoupper() {
				// this.pageNum = 1;
				// this.dataList = [];
				// this.showLoading = true;
				// this.askList(this.date);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nodata {
		width: 457rpx;
		margin-left: 147rpx;
		margin-top: 40rpx;
	}

	.consultation {
		.consultation_scroll {
			// height: calc(100vh - 230rpx - 98rpx - var(--status-bar-height) - 84rpx - 98rpx);
		}

		.card_item {
			height: 86rpx;
			position: relative;

			.card_item_level {
				position: absolute;
				left: 0;
				display: flex;
				flex-direction: column;
				width: 9rpx;
				height: 86rpx;
				background: rgba(36, 129, 238, 0.15);
				border: 1px solid #2481EE;

				.card_item_level_item {
					background: #2481EE;
					width: 9rpx;
				}
			}

			.card_item_text1 {
				color: #999999;
				font-size: 24rpx;
			}

			.card_item_text2 {
				color: #333333;
				font-size: 24rpx;
			}

			.card_item_state {
				.card_item_state_img {
					width: 25rpx;
					height: 25rpx;
					font-size: 25rpx;
					color: #007AFF;
				}

				.card_item_state_text {
					font-size: 25rpx;
					color: #999999;
					margin-left: 10rpx;
					transform: scale(0.8);
				}
			}

			.card_item_tel {
				width: 38rpx;
				height: 38rpx;
				font-size: 38rpx;
				color: #007AFF;
			}
		}
	}
</style>