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 v-if="navbarTitle == '客户信息'" label="学生照片" prop="imageFileId" label-position="top">
				<u-upload v-if="headflag==1" max-count="1" :deletable="false" :file-list="form.fileList" index="1" :show-progress="false" :preview-full-image="false"></u-upload>
				<u-upload v-else :max-count="1" :action="uploadUrl" :header="uploadHeader" @on-success="uploadSuccess" @on-error="uploadError"
				 @on-remove="uploadRemove" :file-list="form.fileList" index="1"></u-upload>
				 <u-button v-if="headflag==0" type="warning" shape="circle" :ripple="true" :custom-style="customStyle" @click="saveHead" style="width: 30%;float: right;display: inline-block;margin-top: -120rpx;">保存头像</u-button>
			</u-form-item>
			<u-form-item label="学员性别" prop="sex" placeholder=" " disabled>
				<text>{{ form.sex == '0' ? '男' : '女' }}</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 v-if="navbarTitle == '客户信息'" 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" height="500px" >
			<view class="common-title">追踪记录</view>
			<view class="menber-box" style="overflow-y: auto;height:390px;">
				<view style="padding:5px; border-bottom:1px solid #aaa;" v-for="(item,index) in recordList">
					<view>{{ item.content }}</view>
					<view>{{ item.createTime }}</view>
				</view>
			</view>
			<view class="button-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.navbarTitle = options.title
			this.getCustomerInfo()
		},
		data() {
			return {
				imageFileId:'',
				uploadUrl: API.uploadFile,
				uploadHeader: {
					Authorization: uni.getStorageSync('token')
				},
				navbarTitle: '',
				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: [],
				headflag:1,
			}
		},
		methods: {
			uploadSuccess(res, index, lists, name) {
				this.imageFileId = res.data.id
				console.log(this.imageFileId)
				this.$refs.uTips.show({
					title: '文件上传成功',
					type: 'success',
				})
				return true
			},
			//  文件上传失败回调
			uploadError(res, index, lists, name) {
				this.$refs.uTips.show({
					title: error.message,
					type: 'warning',
				})
			},
			//  移除文件回调
			uploadRemove(index, lists, name) {
				this.imageFileId = ""
			},
			//  客户信息
			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.studentId = result.studentId
							this.headflag = result.saleHeadNo
							console.log(result.imageFileUrl)
							this.form.fileList = [{
								url: result.imageFileUrl
							}]
							//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',
									})
									
								} else {
									this.$refs.uTips.show({
										title: error.message,
										type: 'warning',
									})
								}
								this.invalidShow = false
								this.invalidForm.content = ''
							}
						)
					}
				})
			},
			// 查看追踪记录
			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',
							})
						}
					}) 
			},
			// 保存头像
			saveHead() {
				if(this.imageFileId==""){
					this.$refs.uTips.show({
						title: "请上传修改的学生照片",
						type: 'warning',
					})
					return false;
				}
				NET.request(API.customerHeadSet, {
					'studentId':this.form.studentId,
					'imageFileId':this.imageFileId
					 }, 'POST').then(res=> {
						if(res.status == 10000) {
							this.getCustomerInfo()
							this.$refs.uTips.show({
								title: '修改成功',
								type: 'success',
							})
						} 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%;
		padding: 10px 15px;
		
		.menber-col {
			width: 100%;
			padding: 15px;
			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%;
				font-size: 14px;
				// line-height: 20px;
			}
			.menber-num {
				width: 100%;
				font-size: 26px;
				line-height: 28px;
				color: $mainColor;
			}
		}
	}
	.common-title {
		width:100%;
		text-align: center;
		font-size: 20px;
		padding: 10px 0;
	}
	.button-box {
		// width: 100%;
		padding: 10px 15px;
		box-sizing: border-box;
	}
</style>