keysass_app/pages/personal/personalresume/basicinform.vue

<template>
	<view style="">
		<view class="navTab">
			<view class="sintitle" style="margin-top:15px;margin-left: -20px;">
				<img src="/static/index/jnzs.png" alt="">
				<p style="color:#fa3534;margin-right:3px">* </p>
				<p>资格证书</p>
			</view>

			<u-form :model="basicobj" ref="basicobj" label-position='left' label-width='150' border-bottom='false'>
				<u-form-item label="证书名称：" prop="credentialsName" border-bottom='false' required='true'>
					<view class="sinput">
						<u-input style="width:100%;" v-model="basicobj.credentialsName" placeholder='输入证书名称' />
					</view>
				</u-form-item>
				<u-form-item prop="url" border-bottom='false'>
					<u-upload width='100px' height='100px' :action="action" :header="headers" :auto-upload="true"
						:show-progress="false" max-count="1" :deletable="true" :file-list="basicobj.url"
						@on-success="(data,index,lists) => {fielUploadSuc(data,index,lists) }"
						@on-remove="(index, lists, name)=>{deleteUpfile(index)}"
						@on-error="(data,index, lists)=>{errorUpfile(data,index, lists)}">
						<view slot="addBtn" class="slot-btn">
							<img v-if="basicobj.url" :src="basicobj.url" mode="aspectFill"
								style="width: 100px;height: 100px;">
							<div v-else class="upliacla">
								<p style="font-size: 18px;">+</p>
								<p>选择图片</p>
							</div>
						</view>
					</u-upload>
				</u-form-item>
			</u-form>

		</view>
		<view class="bottbtn" @click="resource">保存</view>

		<view style="height:10px"></view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityshow: false,
				basicobj: {
					url: ''
				},
				wxUserInfo: null,
				testerdata: null,
				cityList: [],
				action: this.http.baseUrl + '/upload',
				headers: {
					Authorization: 'Bearer ' + uni.getStorageSync('accessToken')
				},
				certRules: {
					credentialsName: [{
						required: true,
						message: '请输入证书名称',
						trigger: 'change',
					}],
					url: [{
						required: true,
						message: '请上传证书',
						trigger: 'change'
					}],
				},
				fileItem: {},
				fileInfo: []

			}
		},
		onShow() {},
		onReady() {
			this.$refs.basicobj.setRules(this.certRules);
		},
		onLoad(options) {
			if (options.fileItem) {
				uni.setNavigationBarTitle({
					title: '修改资格证书'
				});
				this.fileInfo = JSON.parse(options.fileList)
				this.fileInfo = this.fileInfo.map(it => {
					return {
						credentialsName: it.fileName,
						url: it.filePath
					}
				})
				this.fileItem = JSON.parse(options.fileItem)
				this.basicobj.credentialsName = this.fileItem.fileName
				this.basicobj.url = this.fileItem.fileUrl
				
			} else {
				uni.setNavigationBarTitle({
					title: '添加资格证书'
				});
			}
		},
		computed: {

		},
		methods: {

			//文件上传成功回调
			fielUploadSuc(data, index) {
				if (data.code === 200) {
					this.basicobj.url = data.filePath
				}
			},
			//移除
			deleteUpfile(index, lists) {
				this.basicobj.url = ''
			},
			errorUpfile(data, index) {},
			// 保存
			resource() {
				this.$refs.basicobj.validate(valid => {
					if (valid) {
						if (this.fileItem.fileId) {
							// 有文件回填
							var modifiedUrl = this.basicobj.url.replace(/.*\/profile/, '/profile');
							const data = {
								credentialsList: [ {url: modifiedUrl, credentialsName: this.basicobj.credentialsName}, ...this.fileInfo]
							}
							this.http.quickPost(`/tester/cert/credentials/edit`, data, true).then(res => {
								if (res.data.code == 200) {
									this.$refs.uToast.show({
										title: '修改成功',
										type: 'success',
										url: 'pages/personal/personalresume/personalresume'
									})
								} else {

								}
							})

						} else {
							// 新增
							const data = {
								credentialsList: [this.basicobj]
							}
							this.http.quickPost(`/tester/cert/credentials`, data, true).then(res => {
								if (res.data.code == 200) {
									this.$refs.uToast.show({
										title: '保存成功',
										type: 'success',
										url: 'pages/personal/personalresume/personalresume'
									})
								} else {

								}
							})
						}

					} else {}
				})
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF !important;
	}

	.navTab {
		padding: 13px 20px 13px 20px;

	}

	.sinput {
		display: flex;
		align-items: center;
		/* height: 50px; */
	}

	.u-form-left__content__label {
		color: #808080 !important;
	}

	.sintitle {
		display: flex;
		align-items: center;
		/* height: 50px; */
		background: #F2F4F7;
		/* background:#20529c; */
		border-radius: 4rpx;
		padding: 7px 15px;
	}

	.sintitle img {
		width: 20px;
		height: 18px;
		margin-right: 5px;
	}

	.sintitle p {
		font-size: 15px;
		color: #000000;
		font-weight: bold;
	}

	.sinput .u-input {

		height: 35px;
		border-bottom: 1px solid #EBEBEB !important;


	}

	.sinput p {
		color: #808080;
	}

	.bottbtn {
		width: 94vw;
		margin: 30px 3vw 15px 3vw;
		height: 75rpx;
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius: 43rpx;
		text-align: center;
		line-height: 75rpx;
		color: #FFFFFF;
		font-size: 33rpx;
		/* margin-left:13px; */
	}

	.sinputrt {
		display: flex;
		/* align-items: center; */
		/* height: 50px; */
		padding: 10px 0px;
	}

	.sinputrt .u-input {
		/* width:75vw; */
		height: 100px;
		border: 1px solid #E6E6E6;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		padding-left: 10px !important;
	}

	.u-list-item {
		margin: 0 !important;
		zIndex: 0 !important;
	}

	.slot-btn {
		width: 200rpx;
		height: 0rpx;
		zIndex: 99;
		/* display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx; */
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.u-form-item {
		margin-bottom: -5px;
		color: #808080 !important;
	}

	.u-form {
		margin-left: 20px;
	}

	.u-list-item {
		margin: 0 !important;
		background: transparent !important;
		color: transparent !important;
	}

	.upliacla {
		width: 100px;
		height: 100px;
		/* line-height:100px; */
		border-radius: 4px;
		background: #f4f5f6;
		color: #606266;
		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;

	}

	.wuploa {
		/* width: 100px;
			height: 100px;
			line-height: 100px;
			font-size: 12px;
			border: 1px solid #E6E6E6;
			text-align: center;
			border-radius: 4px; */
	}
</style>