JiangNingUmale-h5/subEnterprise/activity/add.vue

<template>
	<view class="app-container">
		<u-navbar leftText="返回" title="新增店铺活动" :autoBack="true" :placeholder="true" />
		<view class="form-item">
			<view class="form-title">
				活动名称
				<text></text>
			</view>
			<view class="item-input view-global">
				<u--input placeholder="请输入名称" border="none" :customStyle="{ height: '45rpx' }"
					v-model="form.activeName"></u--input>
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				活动时间
				<text></text>
			</view>
			<view class="item-input view-global" style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        " @click="isCalendar = true">
				<text :style="'color:' + fColor(calendarRang)">{{
          calendarRang || "请选择日期"
        }}</text>
				<u-icon name="arrow-right" color="#D5D5D5"></u-icon>
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				活动描述
				<text></text>
			</view>
			<view class="item-input view-global">
				<u--textarea v-model="form.activeContent" placeholder="请输入内容" border="none"></u--textarea>
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				活动地点
				<text></text>
			</view>
			<view class="item-input view-global">
				<u--input placeholder="请输入活动地点" border="none" :customStyle="{ height: '45rpx' }"
					v-model="form.activePoint"></u--input>
			</view>
		</view>
	<!-- 	<view class="form-item">
			<view class="form-title">
				参与条件
				<text></text>
			</view>
			<view class="item-input view-global">
				<u--textarea v-model="form.joinRequire" placeholder="请输入内容" border="none"></u--textarea>
			</view>
		</view> -->
		<view class="form-item">
			<view class="form-title">
				上传附件
				<text></text>
			</view>
			<view class="item-input view-global">
				<view class="" @click="openFile" v-show="!fileName">
					点击上传
				</view>
				<view class="view-globalFell" v-show="fileName">
					<view class="fileName">
						{{fileName}}
					</view>
					<view class="fileNamedelet" @click="fileName = ''">
						删除
					</view>
				</view>
			</view>
		</view>
		<fixed-buttom title="提交" @click="handleAdd"></fixed-buttom>

		<!-- 日历 -->
		<u-calendar :show="isCalendar" :mode="mode" @confirm="onCalendar" @close="onCloseCalendar"></u-calendar>
	</view>
</template>

<script>
	import {
		addActivity
	} from "../../api/jn/apply";

	export default {
		data() {
			return {
				form: {},
				fileName: "",
				isCalendar: false,
				calendarRang: "",
				mode: "range",
				fileWhiteList: ['txt', 'doc', 'docx', 'xls', 'xlsx', 'pdf', ]
			};
		},
		onLoad() {
			this.reset();
		},
		methods: {
			// 表单重置
			reset() {
				this.form = {
					id: null,
					activeName: null,
					activeStart: null,
					activeEnd: null,
					activeContent: null,
					activePoint: null,
					joinRequire: null,
					activeState: 1,
					createId: null,
					createBy: null,
					createTime: null,
					updateId: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					gridId: null,
					gridName: null,
					partId: null,
					partName: null,
				};
			},
			onCloseCalendar() {
				this.isCalendar = false;
			},
			onCalendar(e) {
				console.log(e);
				this.calendarRang = `${e[0]}——${e[e.length - 1]}`;
				this.form.activeStart = e[0];
				this.form.activeEnd = e[e.length - 1];
				this.isCalendar = false;
			},
			handleAdd() {
				console.log(this.form);
				addActivity(this.form).then((response) => {
					uni.navigateBack({
						delta: 1,
					});
				});
			},
			fColor(calendarRang) {
				return calendarRang ? "#2e2f31" : "#c0c4cc";
			},
			//上传2
			// 打开文件选择器
			openFile() {
				uni.chooseFile({
					count: 1, //默认100
					extension: ['.zip', '.doc', '.xls', '.pdf', 'docx', '.rar', '.7z', '.jpg', '.png', '.jpeg'],
					success: (res) => {
						console.log(res);
						if (res.tempFiles[0].size / 1024 / 1024 > 20) {
							this.$refs.uToast.show({
								title: '附件大小不能超过20M',
								type: 'warning',
							})
							return;
						}
						this.resultPath(res.tempFilePaths[0], res.tempFiles[0].name);
					}
				});
			},
			// 选取的文件路径获取后回调
			resultPath(path, fileName) {
				console.log(path)
				console.log(fileName)
				uni.showLoading({
					title: '上传中...',
				});
				uni.uploadFile({
					url: "https://t-jn-bjh-admin-server.jsszkd.com/common/upload",
					filePath: path,
					header: {
						// "Authorization": "xxx",
						// 'content-type':'multipart/form-data; boundary=----WebKitFormBoundaryHEdN1AIjcdUkAaXM',
					},
					formData: {
						// 'user': 'test'
					},
					success: (uploadFileRes) => {
						let obj = JSON.parse(uploadFileRes.data);
						console.log(obj);
						this.fileName = obj.originalFilename
						this.form.joinRequire = obj.url
						uni.showToast({
							title: obj.msg,
							icon: 'none',
							duration: 1500
						})

					},
					fail: (err) => {
						this.$refs.uToast.show({
							title: '上传失败',
							type: 'error',
						});
						uni.hideLoading();
					}
				});
			},



		},
	};
</script>

<style lang="scss" scoped>
	.form-item {
		.form-title {
			position: relative;
			font-size: 30rpx;
			font-weight: bold;
			color: #2e2f31;
			margin-bottom: 20rpx;
		}

		.form-title text {
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			height: 12rpx;
			width: 140rpx;
			background: url("/static/images/juxing.png");
			background-size: cover;
			max-width: 300rpx;
			z-index: 0;
		}

		.item-input {
			margin-bottom: 30rpx;
			border-radius: 16rpx;
			background-color: #fff;
			box-sizing: border-box;
			padding: 25rpx;
		}

		.view-globalFell {
			display: flex;
			align-items: center;

			.fileName {
				max-width: 400rpx;
				white-space: nowrap;
				/* 不换行 */
				overflow: hidden;
				/* 溢出部分隐藏 */
				text-overflow: ellipsis;
				/* 显示省略号 */
				margin-right: 30rpx;
			}

			.fileNamedelet {
				width: 100rpx;
				color: red;
			}
		}
	}
</style>