mdapp/pages/cust/myrecord.vue

<template>
	<view class="page scoped-box">
		<view class="buystep-info u-p-32 box-shadow u-skeleton-fillet">
			<view class="name" @click="dial()">跟进记录:{{custTips || ''}}</view>
			<u-empty v-if="stepsLogList.length == 0" mode="list" text="暂无流水记录"></u-empty>
			<u-time-line>
				<u-time-line-item v-for="(item, index) in stepsLogList" :key="index">
					<template v-slot:node>
						<view class="u-node"><u-icon name="checkmark-circle" size="28" color="#2080f0"></u-icon></view>
					</template>
					<template v-slot:content>
						<view>
							<view class="u-order-title" v-if="item.estate_name">{{item.action}}了<navigator :url="`/pages/estate/dtl?id=${item.estate_id}`" class="c">【{{item.estate_name}}】</navigator></view>
							<view class="u-order-title" v-else>日常维护:<view v-if="item.action" class="c2">{{item.action}}</view></view>
							<view class="u-order-desc">({{item.remind_state ? rsObj[item.remind_state] : ''}}){{item.record_remark}}</view>
							<view class="u-order-img" v-if="item.recordImgArr && item.recordImgArr.length > 0">
								<image v-for="(url, urlIndex) in item.recordImgArr" :key="urlIndex" class="img" :src="url" mode="aspectFill" @click="previewImgHandle(url, item.recordImgArr)"></image>
							</view>
							<view class="u-order-time">{{ item.create_at}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view>
		
		<u-button class="f-btn bwin-btn-80 u-m-b-10" type="primary" @click="addHandle">添加跟进记录</u-button>
	</view>
</template>
<script>
import { arrToObj } from '@/utils'
export default {
	data() {
		return {
			rsObj: {},
			curId: '',
			custTips: '',
			detail: {
			}, // 客户详情
			stepsLogList: [] // 进展
		};
	},
	onLoad(params) {
		this.curId = params.id
		this.custTips = params.str
		const dictObj = uni.getStorageSync('MD_dict')
		this.rsObj = arrToObj(dictObj.remind_state)
	},
	onShow() {
		this.getData()
	},
	methods: {
		dial() {
			uni.makePhoneCall({
				phoneNumber: this.custTips.split("-")[1]
			});
		},
		getData () {
			uni.api.cust.apiprivaterecordlist({customer_id:this.curId, page_size: 100}).then(res =>{
				let stepsLogList = res.list || []
				stepsLogList.map(item => {
					item.recordImgArr = item.record_img ? item.record_img.split(',') : []
				})
				this.stepsLogList = [...stepsLogList]
			})
		},
		previewImgHandle (current, urls){
			uni.previewImage({
				current,
				urls
			})
		},
		addHandle () {
			uni.navigateTo({
				url: `/pages/cust/myrecordedit?id=${this.curId}`
			})
		},
	}
};
</script>
<style lang="scss">

.buystep-info {
	width: 100%;
	padding: 32rpx 0rpx;
	background-color: #fff;
	margin-bottom: 20rpx;
	border-radius: 10rpx;
	.name {
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.u-order-title {
		color: $u-main-color;
		font-size: $u-p2;
		.c {
			display: inline-block;
			color: #2979ff;
			font-weight: bold;
		}
		.c2 {
			display: inline-block;
			color: #5a7fbd;
			font-weight: bold;
		}
	}
	.u-order-desc {
		// color: $u-content-color;
		color: #777;
		font-size: $u-p2;
		margin-bottom: 6rpx;
		padding-top: 10rpx;
	}
	.u-order-img {
		padding: 10rpx;
		.img {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 10rpx;
			margin-right: 20rpx;
		}
	}
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: $u-p2;
	}
}

.scoped-box {
	padding-bottom: 100rpx;
	.f-btn {
		position: fixed;
		bottom: 0;
		left: 20rpx;
		right: 20rpx;
	}
}



</style>