aiot-app/pages/saleManage/contact/components/drawer.vue

<template>
	<view class="mainBox">
		<uni-nav-bar background-color="#157A2C" color="#fff" fixed="true" statusBar="true" left-icon="back" title="客户详情"
			@clickLeft="back">
		</uni-nav-bar>
		<myCard :item="form" :columns="columns"></myCard>
		<view class="item">
			<view class="card">

				<view>
					<view class="lable">销售订单总额</view>
					<view>
						{{ contactCountData.totalAmountSaleOrder||0 }}
					</view>
				</view>
				<view>
					<view class="lable">退货单总额</view>
					<view>{{ contactCountData.totalAmountSaleOrderRecord||0 }}</view>
				</view>
				<view>
					<view class="lable">回款总额</view>
					<view> {{ contactCountData.totalAmountReturn||0 }}</view>
				</view>
				<view>
					<view class="lable">退款总额</view>
					<view>{{ contactCountData.totalAmountRecord||0 }}</view>
				</view>
				<view>
					<view class="lable">待回款总额</view>
					<view>{{ contactCountData.totalAmountTreatReturn||0 }}</view>
				</view>
			</view>
		</view>

		<!-- <u-sticky bgColor="#fff" :customNavHeight="88"> -->
			<u-tabs :list="list1" @change="change" :current="current"></u-tabs>
		<!-- </u-sticky> -->
		<comment ref="commentRef" :isDrawer="true" v-show="current==1"></comment>
		<info ref="infoRef" :isDrawer="true" v-show="current==0"></info>

		<followList ref="followListRef" :linkList="linkList" :isDrawer="true" v-show="current==2"></followList>
		<bankList ref="bankListRef" :isDrawer="true" v-show="current==3"></bankList>
		<linkList ref="linkListRef" :isDrawer="true" v-show="current==4"></linkList>


	</view>
</template>

<script>
	import bankList from "./bankList.vue"
	import linkList from "./linkList.vue"
	import followList from "./followList.vue"
	import comment from "./comment.vue"
	import info from "./info.vue"
	import myCard from '../../components/myCard.vue'
	import {
		contactDetail,
		contactSave,
		queryContactIdCount
	} from '@/api/saleManage/contact/index.js'

	export default {
		components: {
			bankList,
			linkList,
			followList,
			comment,
			info,
			myCard
		},
		data() {
			return {
				columns: [
					[{
						label: '名称：',
						prop: 'name',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '编码：',
						prop: 'code'
					}, {
						label: '代号：',
						prop: 'serialNo'
					}],

					[{
						label: '是否指派：',
						prop: 'assignStatus',
						formatter: (row) => {
							return (row.assignStatus == 1 ? '是' : '否') || ''
						}
					}, {
						label: '销售员：',
						prop: 'salesmanName'
					}],

				],
				current: 0,
				list1: [{
					name: '详细信息',
				}, {
					name: '动态',
				}, {
					name: '跟进记录'
				}, {
					name: '银行信息'
				}, {
					name: '联系人信息'
				}],
				form: {
					address: '',
					addressId: '',
					addressName: '',
					authorizationLimit: 0,
					businessLicenseFiles: [],
					businessLicenseFile: [],
					businessScope: '',
					categoryId: '',
					categoryName: '',
					companyCategoryId: '',
					companyCategoryName: '',
					enterpriseTypeId: '',
					enterpriseTypeName: '',
					legalPerson: '',
					registeredCapital: '',
					parentId: '',
					industry: [],
					industryCode: '',
					industryFullName: '',
					mainProduct: '',
					name: '',
					officialIndustry: '',
					phone: '',
					registerDate: '',
					remark: '',
					serialNo: '',
					simpleName: '',
					type: 1,
					unifiedSocialCreditCode: ''
				},
				otherForm: {
					settlementMode: '',
					settlementModeName: '',
					taxRate: 0,
					address: '',
					addressId: '',
					deptId: '',
					deptName: '',
					discount: 0,
					salesmanId: '',
					salesmanName: '',
					sender: '',
					senderPhone: ''
				},
				treeList: [],
				bankList: [],
				linkList: [],
				contactCountData: {
					totalAmountSaleOrderRecord: '', //退货单总额：
					totalAmountRecord: '', //退款总额
					totalAmountTreatReturn: '', //待回款总额
					totalAmountSaleOrder: '', //销售订单总额
					totalAmountReturn: '' //回款总额
				},

			}
		},

		onLoad(data) {

			uni.$off('setContact')
			uni.$on('setContact', ({
				key,
				data
			}) => {
				this[key] = data
				this.save()
			})
			contactDetail(data.id).then(async res => {
				this.contactCountData = await queryContactIdCount(data.id)
				console.log(this.contactCountData,'this.contactCountData ')
				this.form = res.base
				this.otherForm = res.other
				this.bankList = res.bankList
				this.linkList = res.linkList
				this.$nextTick(() => {
					this.$refs.bankListRef.init(this.bankList)
					this.$refs.linkListRef.init(this.linkList)
					this.$refs.followListRef.init(res.base)
					this.$refs.commentRef.init(res.base)
					this.$refs.infoRef.init({
						form: res.base,
						otherForm: res.other
					})

				})
			})


		},
		onUnload() {
			uni.$off('setContact')
		},
		methods: {
			change(data) {
				this.current = data.index
				// console.log(data,'current')

			},
			save() {
				try {

					const data = {
						base: this.form,
						other: this.otherForm,
						bankList: this.bankList,
						linkList: this.linkList,
					};

					contactSave(data)

				} catch (error) {
					console.log(error, 'error')
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	// .main {
	// 	padding: 16rpx;
	// }

	// .title {
	// 	font-size: 32rpx;
	// 	font-weight: 800;
	// }


	.item {
		padding: 16rpx 32rpx;

		.card {
			padding: 16rpx 32rpx;
			margin-top: 32rpx;
			display: flex;
			flex-wrap: wrap;
			height: 200rpx;
			border-radius: 12rpx;
			border: 1px solid #cbcbcb;

			>view {
				font-size: 26rpx;
				width: 33%;

				.lable {
					color: #999;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>