uni-zhihuikuangshan/pages/my/personal_information/honor/honor.vue

<template>
	<view>
		<view class="content">
			<view class="input_box">
				<view class="label"><text> * </text>荣誉名称：</view>
				<view class="box">
					<input type="text" value="" placeholder="请输入荣誉名称" v-model="imageName" />
				</view>
			</view>
			<view class="input_box">
				<view class="label"><text> * </text>上传图片：</view>
				<view class="img_box">
					<view class="item" v-if="data.path">
						<view class="img">
							<image :src="data.path" mode=""></image>
						</view>
						<view class="text">data.imageName</view>
					</view>
					<view class="item" v-if="!data.path">
						<view class="img">
							<view class="add" @click="up_image()">+</view>
						</view>
						<view class="text" style="color: #FFFFFF;">xxx</view>
					</view>
				</view>
			</view>

			<view class="btn" @click="add()">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base_url: "",
				
				honor_list: [],

				imageName: "",
				data: {}
			};
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', (data) => {
				console.log(data.data)

				this.base_url = data.data.base_url

				this.honor_list = data.data.honor_list
			})
		},

		methods: {
			up_image() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(chooseImageRes.tempFiles[0]);

						uni.showLoading({
							mask: true,
							title: "上传中..."
						})

						uni.uploadFile({
							url: this.base_url + "/worksheet/design/up_images",
							header: {
								'Authorization': uni.getStorageSync('token_type') +' '+uni.getStorageSync('Authorization')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							// formData只有H5存在
							formData: {
								image: chooseImageRes.tempFiles[0]
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data);
								console.log(JSON.parse(uploadFileRes.data));

								this.data = JSON.parse(uploadFileRes.data).data

								uni.hideLoading()

								uni.showToast({
									icon: "none",
									title: "上传成功"
								})
							}
						})
					}
				})
			},
			add() {
				if (this.imageName != '' && this.data.path) {
					console.log(this.imageName, this.data.path)

					this.data.imageName = this.imageName

					if (!this.honor_list) {
						this.honor_list = []
						this.honor_list.push(this.data)
					} else {
						this.honor_list.push(this.data)
					}

					console.log(this.honor_list)
					
					this.$api.user_updateUserMessage({
						honor: JSON.stringify(this.honor_list)
					}).then((res) => {
						console.log(res)
						
						uni.showToast({
							icon: "none",
							title: "提交成功"
						})
						
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "请填写荣誉名称或上传图片"
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin-bottom: 50rpx;
		box-sizing: border-box;
		padding: 25rpx;

		.input_box {
			margin-bottom: 20rpx;
			font-size: 32rpx;

			.label {
				min-height: 80rpx;
				line-height: 80rpx;
				color: #6C6F74;

				text {
					color: red;
				}
			}

			.box {
				width: 700rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #E9EBF2;

				box-sizing: border-box;
				padding: 0 25rpx;

				.uni-input {
					font-size: 30rpx;
					height: 90rpx;
					line-height: 90rpx;
					color: #666;
				}

				input {
					font-size: 30rpx;
					height: 90rpx;
					line-height: 90rpx;
				}

				/deep/.uni-date-editor--x {
					.uniui-clear {
						display: none;
					}
				}

				/deep/.uni-date-x--border {
					box-sizing: border-box;
					border-radius: 4px;
					border: none;
				}

				/deep/.uni-date-x {
					padding: 0;
				}
			}

			.img_box {
				margin-top: 20rpx;
				overflow: hidden;

				.item {
					float: left;
					margin-right: 50rpx;

					width: 300rpx;
					text-align: center;

					.img {
						margin-bottom: 10rpx;

						image {
							width: 300rpx;
							height: 180rpx;
						}

						.add {
							font-size: 140rpx;
							color: #DCDCDC;
							text-align: center;
							height: 180rpx;
							line-height: 160rpx;
							background-color: #EEEEEE;
						}
					}

					.text {
						width: 260rpx;
						font-size: 30rpx;
						color: #8e8e8e;

						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.btn {
			margin-top: 40rpx;
			background-color: #009FE8;
			padding: 25rpx 50rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>