guangan-mp/pages/thumb/thumb.vue

<template>
	<view class="flex flex-column" style="width:100vw;height: 100vh; background-color: #F5F6F8;">
		<view class="bg-white mt-2 p-2 rounded-lg" style="padding-bottom: 200rpx;">
			<view class="flex-1 pt-3" style="color: #666666;">点赞城市内容：</view>
			<view class="border border-light rounded py-3 flex align-center justify-between" style="height: 200rpx;">
				<textarea v-model="form.content" autoHeight class="flex-1 font28" placeholder="点赞城市内容" />
			</view>
			<view class="flex-1 py-3">相关图片：</view>
			<view class="flex py-3 mb-6">
				<div class="flex flex-wrap w-25 position-relative" v-for="(item,index) in img_array" :key='index'>
					<img class="img-add" :src="item" @click="previewImage(index)" alt=""/>
					<img class='img-delete position-absolute' src='/static/images/delete.png' @click='deleteImage(index)'>
				</div>
				<div class="flex flex-wrap w-25" @click="chooseImages()">
					<img class='img-add' src="/static/images/addImage.png" alt="">
				</div>
			</view>
		</view>
		<view class="fixed-bottom border-top bg-white py-2 px-3">
			<view class="bg-danger py-3 font30 text-center text-white shadow rounded-circle" @click="onSubmit">
				立即提交
			</view>
		</view>
	</view>
</template>

<script>
	import { TaCache } from '@/common/cache';
	import {
		TaAjax, TaPost, baseUrl
	} from '@/common/ajax';
	export default {
		data() {
			return {
				form: {
					title: "点赞城市",
					content: "",
					imgs: "",
				},
				img_array: [],
			}
		},
		created() {
			const that = this;
			const userInfo = TaCache.get('auth.user');
			if (!userInfo) {
				uni.navigateTo({
					url: "/pages/user/login"
				})
			}
		},
		methods: {
			chooseImages() {
				const that = this;
				uni.chooseMedia({
					mediaType: ['image', 'video'],
					sourceType: ['album', 'camera'],
					sizeType: ['original'],
					success(res) {
						for(let i=0;i<res.tempFiles.length;i++){
							const tempFilePath = res.tempFiles[i].tempFilePath
							const loadingId = uni.showLoading({
								title: '上传中...',
								mask: true,
							})
							uni.uploadFile({
								url: baseUrl + '/custom/api.Upload/file',
								filePath: tempFilePath,
								name: 'file',
								success(res) {
									const responseStr = res.data;
									const response = JSON.parse(res.data);
									const data = response.data;
									const url = data.url;
									that.img_array.push(url);
								},
								complete() {
									uni.hideLoading(loadingId)
								},
							})
						}
					},
				})
			},
			previewImage(idx = 0) {
				uni.previewImage({
					urls: this.img_array,
					current: idx,
					loop: true,
				})
			},
			deleteImage(idx) {
				this.img_array.splice(idx, 1)
			},
			onSubmit() {
				this.form.images = this.img_array.join("|")
				TaPost('/cms/api.auth.Thumb/add', this.form).then((result) => {
					if (result.code == 0) {
						return uni.showToast({
							icon: 'error',
							title: result.info,
						})
					}
					const id = result.data
					uni.switchTab({
						url: "/pages/index/index"
					})
					return uni.showToast({
						icon: 'success',
						title: result.info,
					})
				})
			},
		}
	}
</script>

<style scoped>
.img-add {
	width: 180rpx;
	height: 180rpx;
}
.img-delete {
	top: 0;
	right: 0;
	height: 48rpx;
	width: 48rpx;
}
</style>