spark-sale/pagesMain/customerInfo.vue

<template>
	<view class="content">
		<u-form :model="form" ref="form" label-width="140">
			<u-form-item label="学员姓名" prop="studentName">
				<u-input v-model="form.studentName" placeholder=" " disabled />
			</u-form-item>
			<u-form-item label="学生照片" prop="imageFileId" label-position="top">
				<u-upload max-count="1" :deletable="false" :file-list="form.fileList" index="1"></u-upload>
			</u-form-item>
			<u-form-item label="学员性别" prop="sex" placeholder=" " disabled>
				<!-- <text>{{form.sex}}</text> -->
				<u-input v-model="form.sex" placeholder=" " disabled />
			</u-form-item>
			<u-form-item label="学员年龄" prop="age">
				<u-input v-model="form.age" placeholder=" " disabled />
			</u-form-item>
			<u-form-item label="学生生日" prop="birthday">
				<u-input v-model="form.birthday" placeholder=" " disabled />
			</u-form-item>
			<u-form-item label="家长姓名" prop="parentsName">
				<u-input v-model="form.parentsName" placeholder=" " disabled />
			</u-form-item>
			<u-form-item label="手机号码" prop="phone">
				<u-input v-model="form.phone" placeholder=" " disabled />
			</u-form-item>
		</u-form>
		<view class="handle-fix-box" style="display:flex;">
			<view style="width:50%;">
				<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle"  @click="handleInvalidClick">添加追踪信息</u-button>
			</view>
			<view style="width:50%;">
				<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="handleRecordClick">追踪信息记录</u-button>
			</view>
		</view>
		<!-- 添加追踪 -->
		<u-popup v-model="invalidShow" mode="center" border-radius="30" width="600rpx">
			<view class="common-title">备注</view>
			<view class="menber-box">
				<u-form :model="invalidForm" ref="invalidFormRef" label-width="140">
					<u-form-item label="备注" prop="content" required>
						<u-input v-model="invalidForm.content" type="text" />
					</u-form-item>
				</u-form>
				<view style="height:20px;"></view>
				<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="handleConfirmClick">确定</u-button>
			</view>
		</u-popup>
		<!-- 追踪记录 -->
		<u-popup v-model="recordShow" mode="center" border-radius="30" width="600rpx">
			<view class="common-title">追踪记录</view>
			<view class="menber-box">
				<view style="margin-bottom: 5px;" v-for="(item,index) in recordList">{{ index+1 }} : {{ item.content }}</view>
				<view style="height:20px;"></view>
			</view>
			<view class="menber-box">
				<u-button type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="recordShow = false">确定</u-button>
			</view>
		</u-popup
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'customStyle'
			])
		},
		onLoad(options) {
			this.id = options.id
			uni.setNavigationBarTitle({
				title: options.title
			})
			this.getCustomerInfo()
		},
		data() {
			return {
				id: '',
				form: {
					// 学生姓名
					studentName: '',
					// 学生照片
					fileList: [],
					// 学生性别
					sex: '',
					// 学生年龄
					age: '',
					// 学生生日
					birthday: '',
					// 家长姓名
					parentsName: '',
					// 手机号码
					phone: '',
					// 沟通记录
					resourceRecords: []
				},
				invalidShow: false,
				// 备注
				invalidForm: {
					customerId: '',
					content: ''
				},
				// 备注校验规则
				invalidRules: {
					content: [
						{
						required: true,
						message: '请输入备注',
						trigger: 'change'
					}],
				},
				// 追踪记录
				recordShow: false,
				recordList: []
			}
		},
		methods: {
			//  客户信息
			getCustomerInfo() {
				NET.request(API.customerDetail, {
					id: parseInt(this.id) }, 'POST').then(res=> {
						if(res.status == 10000) {
							const result = res.data
							this.form.studentName = result.studentName
							this.form.fileList.push(result.imageFileUrl)
							this.form.sex = result.sex
							this.form.age = result.age
							this.form.birthday = result.birthday
							this.form.parentsName = result.name
							this.form.phone = result.phone
							this.form.resourceRecords = result.resourceRecords
						} else {
							this.$refs.uTips.show({
								title: error.message,
								type: 'warning',
							})
						}
					})
			},
			//  备注弹窗显示
			handleInvalidClick() {
				this.invalidForm.customerId = this.id
				this.$refs.invalidFormRef.setRules(this.invalidRules)
				this.invalidShow = true
			},
			//  添加追踪记录
			handleConfirmClick() {
				this.$refs.invalidFormRef.validate(valid => {
					if(valid) {
						NET.request(API.addResourceRecord, {
							...this.invalidForm  }, 'POST').then(res=> {
								if(res.status == 10000) {
									this.$refs.uTips.show({
										title: '添加成功',
										type: 'success',
									})
									this.invalidShow = false
								} else {
									this.$refs.uTips.show({
										title: error.message,
										type: 'warning',
									})
									this.invalidShow = false
								}
							}
						)
					}
				})
			},
			// 查看追踪记录
			handleRecordClick() {
				NET.request(API.findResourceRecordList, {
					id: this.id,
					page:1,
					size: 100}, 'POST').then(res=> {
						if(res.status == 10000) {
							this.recordShow = true
							this.recordList = res.data
						} else {
							this.$refs.uTips.show({
								title: error.message,
								type: 'warning',
							})
						}
					}) 
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		position: relative;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;
		padding: 0 15px 60px 15px;
		box-sizing: border-box;
	}
	
	.menber-box {
		width: 100%;
		// float: left;
		padding: 10px 15px;
		margin-bottom: 10px;
		
		.menber-col {
			width: 100%;
			padding: 15px;
			margin-bottom: 10px;
			display: inline-block;
			background-color: #FFFFFF;
			border-radius: 15px;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
			
			.menber-label {
				width: 100%;
				margin-bottom: 5px;
				float: left;
				font-size: 14px;
				// line-height: 20px;
			}
	
			.menber-num {
				width: 100%;
				float: left;
				font-size: 26px;
				line-height: 28px;
				color: $mainColor;
			}
	
			.menber-icon {
				font-size: 100px;
				color: $mainColor;
				position: absolute;
				right: -5px;
				bottom: -30px;
				opacity: 0.5;
			}
		}
	}
	.common-title {
		width:100%;
		text-align: center;
		font-size: 20px;
		margin: 10px 0;
	}
</style>