mdapp/pages/trade/record.vue

<template>
	<view class="scoped-box">
		<wm-watermark :text="userInfo2.phone" :num="50"></wm-watermark>
		<view class="scoped-list">
			<view class="sl-item">
				<view :class="'sli-top t' + dtlObj.deal_type">{{ dtlObj.deal_item }}[{{ thtObj[dtlObj.house_type] }}] {{ dtlObj.house_no }} 
					<view class="r2" @click="pageTo('/pages/trade/create', { info: item })">编辑</view>
					<view class="r" @click="copyTextHandle(dtlObj)">喜报</view>
				</view>
				<view class="sli-body">
					<view class="sli-p2">总价：<view class="n">{{ dtlObj.price }}元</view> => {{(Number(dtlObj.price)/dtlObj.area).toFixed(2)}}元|<view class="n">{{ dtlObj.area }}㎡</view></view>
					<view class="sli-p4" v-if="dtlObj.discount">折扣：{{ dtlObj.discount || '未知' }}</view>
					<view class="sli-p1" @click="callHandle">客户：{{ dtlObj.customer_name }}({{ dtlObj.customer_phone }})
						<view class="i">[打电话]</view>
					</view>
					<view class="sli-p1">业务：{{ dtlObj.deal_clerk }}报备至{{ dtlObj.report_dept }}({{ tdtObj[dtlObj.deal_type] }})</view>
					<view class="sli-p1">佣金：<view class="n">{{ dtlObj.brokerage || '0' }}</view> 元
						<view v-if="dtlObj.brokerage_img" class="i" @click="previewImgHandle(dtlObj.brokerage_img, [dtlObj.brokerage_img])">[凭证]</view>
						| 返佣<view class="n">{{ dtlObj.rebate || '0' }}</view>元
						
					</view>
					<view class="sli-p3">成交日期：{{ dtlObj.deal_at }}</view>
				</view>
			</view>
		</view>
		<view>
			<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.info1">佣金到款日：{{item.info1}}</view>
								<view class="u-order-title" v-if="item.info2">回款比例：<view class="c2">{{item.info2}}%</view></view>
								<view class="u-order-title" v-if="item.info3">渠道或佣金开票情况：{{item.info3 == 1 ? '有开票' : '没有开票'}}</view>
								<view class="u-order-img" v-if="item.info4">
									<image class="img" :src="item.info4" mode="aspectFill" @click="previewImgHandle(item.info4, [item.info4])"></image>
								</view>
								<view class="u-order-desc" v-if="item.remark">{{item.remark}}</view>
								<view class="u-order-time">{{ item.create_at}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</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'
import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
export default {
	components: {
		wmWatermark
	},
	data() {
		return {
			userInfo2: {},
			rsObj: {},
			curId: '',
			custTips: '',
			dtlObj: {},
			thtObj: {},
			tdtObj: {},
			stepsLogList: [] // 进展
		};
	},
	onLoad(params) {
		this.curId = params.id
		const dictObj = uni.getStorageSync('MD_dict')
		this.thtObj = arrToObj(dictObj.trade_house_type)
		this.tdtObj = arrToObj(dictObj.trade_deal_type)
	},
	onShow() {
		this.getData()
		uni.api.cust.apitradedetail({id:this.curId}).then(res =>{
			this.dtlObj = res || {}
		})
	},
	created () {
		this.userInfo2 = uni.getStorageSync('MD_userInfo2')
	},
	methods: {
		// 带监听器跳转
		pageTo(url, data) {
			/// xxxxx
			uni.navigateTo({
				url: url,
				events: {
					// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					update: function(data) {
						// 当B页面运行 eventChannel.emit('update', { a:1 }); 时，会运行这里的代码逻辑。
					}
				},
				success: function(res) {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('data', data);
				}
			});
		},
		copyTextHandle (item) {
			// return
			uniCopy({
				
				content: `【洪楼News】${item.deal_at}喜报
恭喜${item.deal_clerk}小伙伴今日成交${this.thtObj[item.house_type]}一套
(1)客户姓名: ${item.customer_name}
(2)报备电话：${item.customer_phone}
(3)报备渠道：${item.report_dept}(${this.tdtObj[item.deal_type]})
(4)成交项目：${item.deal_item}
(5)具体房号：${item.house_no}
(6)面积：${item.area}㎡
(7)总价：${item.price}元
(8)单价：${(Number(item.price)/item.area).toFixed(2)}元
(9)折扣：${item.discount || '未知' }
齐心协力向前冲，洪楼业绩显峥嵘！`,
				success:(res)=>{
					uni.showToast({
						title: res,
						icon: 'none'
					})
				},
				error:(e)=>{
					uni.showToast({
						title: e,
						icon: 'none',
						duration:3000,
					})
				}
			})
		},
		callHandle() {
			uni.makePhoneCall({
				phoneNumber: this.dtlObj.customer_phone || ''
			});
		},
		getData () {
			uni.api.cust.apitraderecordlist({trade_id:this.curId, page_size: 100}).then(res =>{
				let stepsLogList = res.list || []
				this.stepsLogList = [...stepsLogList]
			})
		},
		previewImgHandle (current, urls){
			uni.previewImage({
				current,
				urls
			})
		},
		addHandle () {
			uni.navigateTo({
				url: `/pages/trade/recordedit?id=${this.curId}`
			})
		},
	}
};
</script>
<style lang="scss">
.scoped-list {
	padding-top: 20rpx;
	.sl-item {
		box-shadow: 0 0 5px #ccc;
		margin: 0 20rpx 20rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background: #fff;
		.sli-top {
			position: relative;
			height: 70rpx;
			line-height: 70rpx;
			color: #fff;
			background: #2d8cf0;
			padding-left: 20rpx;
			&.t2 {
				background: #19be6b;
			}
			&.t3 {
				background: #795548;
			}
			.r {
				position: absolute;
				top: 0;
				right: 20rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #eee;
			}
			.r2 {
				position: absolute;
				top: 0;
				right: 100rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #eee;
			}
		}
		.sli-body {
			padding: 10rpx 20rpx;
		}
		.sli-p1 {
			color: #666;
			margin-bottom: 10rpx;
			font-size: 28rpx;
			.n {
				color: #ff9900;
				display: inline-block;
				font-weight: bold;
			}
			.i {
				color: #2d8cf0;
				font-weight: bold;
				display: inline-block;
				padding-right: 10rpx;
			}
		}
		.sli-p2 {
			color: #333;
			margin-bottom: 10rpx;
			.n {
				font-size: 30rpx;
				display: inline-block;
				font-weight: bold;
				color: #ed4014;
			}
		}
		.sli-p3 {
			color: #999;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.sli-p4 {
			background: rgba(255,229,100,.3);
			color: #666;
			margin-bottom: 10rpx;
		}
	}
}




.buystep-info {
	width: 100%;
	padding: 0 0 32rpx;
	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-p1;
		margin-bottom: 10rpx;
		.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;
	}
	.u-order-img {
		.img {
			padding: 10rpx;
			border: 1PX solid #dcdcdc;
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}
	}
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: $u-p2;
	}
}

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



</style>