hs_hzl_uniapp_ml/pageA/club/more.vue

<template>
	<view>
		<view style="padding: 8rpx;">
			<span style="font-size:40rpx; font-weight: bold">
				活动详情
			</span>
			<hs-show label="活动类别" :data="data.eventType" labelSize="6" valueSize="18"></hs-show>
			<hs-show label="名称" :data="data.eventName" labelSize="4" valueSize="20"></hs-show>
			<hs-show label="地点" :data="data.eventPlaceSite" labelSize="4" valueSize="20"></hs-show>
			<hs-show label="社团群组" :data="data.clubName" labelSize="6" valueSize="18"></hs-show>
			<hs-show label="活动开始时间" :data="data.eventStartTime" labelSize="8" valueSize="16"></hs-show>
			<hs-show label="活动结束时间" :data="data.eventEndTime" labelSize="8" valueSize="16"></hs-show>
			<hs-show label="人数限制" :data="data.limitNum"></hs-show>
		</view>
		<view style="padding: 8rpx;">
			<span style="font-size:40rpx; font-weight: bold">
				场地详情
			</span>
			<view v-html="data.placeMore" style="padding: 10rpx;">
			</view>
		</view>
		<view style="padding: 8rpx;">
			<uni-row>
				<uni-col :span="6">
					<span style="font-size:40rpx; font-weight: bold">
						活动风采
					</span>
				</uni-col>
				<uni-col :span="18">
				</uni-col>
			</uni-row>
			<view style="padding: 30rpx;" v-if="!disabled">
				<view>
					<u-upload @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="999"
						uploadIcon="plus-circle">
						<image src="../static/img/upload.png" mode="widthFix" style="width: 150px;height: auto;">
						</image>
					</u-upload>
				</view>
				<view style="margin: 30rpx 0;overflow-y: auto;">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="999" width="120" height="120" uploadIcon="plus-circle" disabled>
					</u-upload>
				</view>
			</view>
			<view v-else v-html="imgData" style="padding: 5rpx;">

			</view>
		</view>
		<view style="height: 40rpx;">
		</view>
	</view>
</template>

<script>
	import hsShow from "../components/show.vue"
	export default {
		components: {
			hsShow
		},
		data() {
			return {
				id: uni.getStorageSync("eventId"),
				data: {},
				scrollTop: 0,
				imgData: '',
				imgHTML1: '<p><img src="',
				imgHTML2: '" style="max-width:100%;height:auto;"></p>',
				fileList: [],
				disabled: false
			}
		},
		onLoad() {
			if (uni.getStorageSync("isUpload") === 0) {
				this.disabled = true
			} else {
				this.disabled = false
			}
		},
		onShow() {
			this.submitMore()
			this.getMein()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			async submitMore() {
				const {
					data: res
				} = await this.$httpRequest({
					url: '/app/more?eventId=' + this.id,
					method: 'get',
					urlType: this.$getUrlType()
				});
				if (res.code === 200) {
					this.data = res.data
					this.data.placeMore = this.data.placeMore.replace(/<img/g,
						"<img style='max-width:100%;height:auto;'");
					// this.data.mien = this.data.mien.replace(/<img/g,
					// 	"<img style='max-width:100%;height:auto;'");
				}
			},
			getMein() {
				this.$httpRequest({
					url: '/app/eventsImg?eventId=' + this.id,
					method: 'get',
					urlType: this.$getUrlType()
				}).then(res => {
					if (res.data.code === 200) {
						this.fileList = res.data.data
						this.fileList.forEach(item => {
							this.imgData += this.imgHTML1 + item.url + this.imgHTML2
						})
					}
				})
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen
				if (this.fileList) {
					fileListLen = this.fileList.length
				} else {
					this.fileList = []
					fileListLen = 0
				}
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, result)
					fileListLen++
				}
				// uni.setStorageSync("listImg", this.fileList)
				console.log(this.fileList)
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {

					let header = {
						"Authorization": "Bearer " + uni.getStorageSync('token'),
						"eventId": this.id
					}
					let a = uni.uploadFile({
						url: this.$BASE_URL + '/app/eventImg/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: header,
						success: (res) => {
							// console.log(JSON.parse(res.data).url);
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			}
		}
	}
</script>

<style scoped>
	image {
		padding: 0;
		margin: 0;
		/* max-width: 100%;
		height: auto; */
	}
</style>