mdapp/pages/trade/recordedit.vue

<template>
	<view class="page">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="150" label="佣金到款" prop="info1" @click.native="openinfo1Popoup">
					<view class="scoped-input-floor" @click.native="openinfo1Popoup"></view>
					<u-input placeholder="请选择佣金到款日期" v-model="form.info1" disabled type="text"></u-input>
				</u-form-item>
				<u-form-item label-width="150" label="回款比例" prop="info2">
					<u-input placeholder="请输入回款比例" v-model="form.info2" type="text"></u-input>
					<template v-slot:right>
						%
					</template>
				</u-form-item>
				<u-form-item label-width="150" label="开票情况" prop="info3">
					<u-radio-group v-model="form.info3" active-color="#2979ff">
						<u-radio name="1">有开</u-radio>
						<u-radio name="2">没有</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label-position="top" label-width="150" label="开票或返佣凭证" prop="info4">
					<view class="id_card" @click="uploadInfo4Image">
						<u-icon v-if="form.info4 == null" name="plus" size="32" color="#606266"></u-icon>
						<text v-if="form.info4 == null">请先上传开票或返佣凭证照片</text>
						<image v-if="form.info4 != null" :src="form.info4" mode="aspectFill"></image>
					</view>
				</u-form-item>
				<u-form-item label-width="150" label="备注信息" prop="remark" required label-position="top">
					<u-input :placeholder="remarkTips" v-model="form.remark" type="textarea"></u-input>
				</u-form-item>
			</u-form>

			
			<u-gap height="60"></u-gap>
			<u-button type="primary" @click="submitHandle">提交</u-button>
		</view>
		
		<!-- utoast -->
		<u-toast ref="uToast" />
		
		
		
		<u-calendar v-model="info1Show" mode="date" @change="info1Change"></u-calendar>
	</view>
</template>
<script>
	import { arrToObj } from '@/utils'
	export default {
		data() {
			return {
				info1Show: false,
				form: {
					info1: '',
					info2: '',
					info3: '1',
					info4: null,
					remark: null,
				},
				trade_id: null,
				rules: {
					remark: [
						{
							required: true,
							message: '备注不能为空',
							trigger: ['change']
						},
					],
				},
				remarkTips: '请输入',
			
			};
		},
		onLoad(data) {
			this.trade_id = data.id
		
		},
		created() {
			
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			uploadImgHandle (bc) {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: function(res) {
						const filePath = res.tempFilePaths[0];
						let token = uni.getStorageSync('MD_token') || ''
						uni.uploadFile({
							url: uni.baseUrl + 'api/upload/cloud',
							filePath,
							name: 'upload',
							formData: {
								'token': token
							},
							success: (f) => {
								const cData = JSON.parse(f.data)
								if (cData.errno === 0) {
									if (bc && typeof(bc) === 'function') bc(cData.data)
								} else {
									uni.$msg(cData.errmsg || `未知错误-${cData.errno}`)
								}
							}
						})
					}
				})
			},
			// 选择上传照片
			uploadInfo4Image() {
				this.uploadImgHandle((d) => {
					this.form.info4 = d.url
					// this.info4 = d.pub_url
					this.info4 = d.url
				})
			},
			openinfo1Popoup () {
				this.info1Show = true
			},
			info1Change (e) {
				this.form.info1 = e.result || ''
			},

			submitHandle() {
				const that = this
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 验证成功
						let apiStr = 'apitraderecordadd'
						let params = {
							remark: that.form.remark,
							info1: that.form.info1 || '',
							info2: that.form.info2 || '',
							info3: that.form.info3 || '1',
							info4: that.form.info4 || '',
							trade_id: that.trade_id
						}
						if (that.isEdit) {
							apiStr = 'apitraderecordedit'
							params.id = that.form.id
						}
						uni.api.cust[apiStr](params).then(res => {
							if (that.isEdit) {
								uni.$msgConfirm('编辑成功', () => {
									uni.navigateBack()
								}, () => {
									uni.navigateBack()
								})
							} else {
								uni.$msgConfirm('添加跟进记录成功,是否前往列表？', () => {
									uni.navigateBack()
								}, () => {
									that.imgArr = []
									that.form = {
										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-input-floor {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	z-index: 9;
}
</style>