mdapp/pages/cust/myrecordedit.vue

<template>
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="备注信息" prop="record_remark" required label-position="top">
					<u-input :placeholder="remarkTips" v-model="form.record_remark" type="textarea"></u-input>
				</u-form-item>
			</u-form>
			<view class="scoped-more-img" @click="addImg">
				<view class="t">上传图片</view>
				<image class="img" v-if="curImgUrl" :src="curImgUrl" mode="aspectFill"></image>
			</view>
			
			<u-gap height="60"></u-gap>
			<u-button type="primary" @click="submitHandle">提交</u-button>
		</view>
		
		<!-- 列表选择 -->
		<u-select mode="single-column" :list="propertySelectList" v-model="propertySelectShow"
			@confirm="propertySelectConfirm"></u-select>
		<!-- modal -->
		<!-- utoast -->
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				curImgUrl: '',
				form: {
					record_remark: null,
				},
				customer_id: null,
				rules: {
					record_remark: [{
						required: true,
						message: '备注不能为空',
						trigger: ['change']
					}, ]
				},
				remarkTips: '请输入：购房预算（总价/均价/面积段）～现居住区域～现居住产品/面积段～工作类型～购房需求/关注点～已经看过的房源情况',
				

				propertySelectShow: false,
				propertySelectList: [],
			};
		},
		onLoad(data) {
			this.customer_id = data.id
		},
		created() {},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// // 选择所属项目回调
			// propertySelectConfirm(e) {
			// 	e.map((val, index) => {
			// 		this.form.estate_id = val.value;
			// 		this.form.estate_name = val.label;
			// 	});
			// },
			addImg () {
				let token = uni.getStorageSync('MD_token')
				const that = this
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: function (res) {
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: uni.baseUrl + 'api/upload/cloud',
							filePath: tempFilePaths[0],
							name: 'upload',
							formData: {
								'token': token
							},
							success (res){
								const cData = JSON.parse(res.data)
								that.curImgUrl = cData.data.url
							}
						})
					}
				})
			},
			submitHandle() {
				const that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 验证成功
						let apiStr = 'apiprivaterecordadd'
						let params = {
							record_remark: that.form.record_remark,
							customer_id: that.customer_id
						}
						if (that.curImgUrl) params.record_img = that.curImgUrl
						if (that.isEdit) {
							apiStr = 'apiprivaterecordedit'
							params.id = that.form.id
						}
						uni.api.cust[apiStr](params).then(res => {
							if (that.isEdit) {
								uni.$msgConfirm('编辑成功', () => {
									uni.reLaunch({
										url: '/pages/cust/my'
									})
								}, () => {
									uni.reLaunch({
										url: '/pages/cust/my'
									})
								})
							} else {
								uni.$msgConfirm('添加跟进记录成功,是否前往列表？', () => {
									uni.navigateBack()
								}, () => {
									this.form = {
										record_remark: null,
									}
								})
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	};
</script>
<style lang="scss">
	.page {
		padding: 20rpx;
		background-color: #ffffff;
	}

	.form {
		border-radius: 10rpx;
		padding: 0 40rpx;
	}

	.popup-body {
		.tips-title {
			font-size: $u-p;
			margin-bottom: 20rpx;
		}

		.tips-content {
			font-size: $u-p2;
			color: $u-tips-color;
			margin-bottom: 60rpx;
		}
	}

	.id_card {
		color: #606266;
		width: 100%;
		height: 350rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f4f5f6;
		font-size: $u-p2;
	}

	.footer {
		position: absolute;
		text-align: center;
		bottom: 40rpx;
		font-size: $u-p2;

		.agreement {
			color: $u-type-error;
		}
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding: 20rpx;
	}
	
	
.scoped-more-img {
	padding-top: 30rpx;
	color: #2d8cf0;
	text-decoration: underline;
	.t {
		padding-bottom: 20rpx;
	}
	.img {
		width: 200rpx;
		height: 200rpx;
	}
}	
	
</style>