guangan-mp/pages/user-share/user-share.vue

<template>
	<view class="flex flex-column" style="width:100vw;height: 100vh; background-color: #F5F6F8;">
		<view class="flex flex-row align-center px-2 py-1" style="background-color: #FFF8D3; height: 56rpx;">
			<image src="@/static/images/icon-warn.png" style="height: 24rpx; width: 24rpx;"></image>
			<text style="color: #FFBE0E; font-size: 20rpx">随手拍简单、高效的反馈并上传问题</text>
		</view>
		<view class="bg-white mt-2 p-2 rounded-lg" style="padding-bottom: 200rpx;">
			<view class="flex-1" style="color: #666666;">问题类型：</view>
			<picker class="border-bottom border-light" :range="typeList" range-key="name" @change="handleTypeIdChange">
				<view class="py-3 flex align-center justify-between">
					<view class=" font28 flex align-center flex-1" v-if="type_name">{{type_name}}
					</view>
					<view class=" font28 text-light-black flex-1" v-else>请选择问题分类</view>
					<uni-icons type="right" color="#cccccc" size="20"></uni-icons>
				</view>
			</picker>
			<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 pt-3">问题地址：</view>
			<pick-regions defaultRegion="511602" @getRegion="handleGetRegion">
				<view class="py-3 flex align-center justify-between">
					<view class=" font28 flex align-center flex-1" v-if="province">{{province}}{{city}}{{area}}</view>
					<view class=" font28 text-light-black flex-1" v-else>省市区</view>
					<uni-icons type="right" color="#cccccc" size="20"></uni-icons>
				</view>
			</pick-regions>
			<view class="border rounded border-light py-3 flex align-center justify-between">
				<textarea v-model="form.ticket_address" autoHeight class="flex-1 font28" placeholder="详细地址（例如**街**号**）" />
			</view>
			<view class="flex-1 py-3">联系方式：</view>
			<view class="flex align-center justify-between py-3 ">
				<view class="flex-1 border-bottom border-light">
					<input class="font28" focus placeholder="姓名" v-model="form.contact_name" />
				</view>
				<view class="flex-1 border-bottom border-light">
					<input class="font28" type="number" placeholder="联系方式" v-model="form.contact_phone" />
				</view>
			</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 {
				province: "四川省",
				city: "广安市",
				area: "广安区",
				type_name: "",
				form: {
					type_id: 0,
					title: "用户随手拍",
					content: "",
					contact_name: "",
					contact_phone: "",
					ticket_region: "四川省/广安市/广安区",
					ticket_address: "",
					imgs: "",
					ticket_lat: null,
					ticket_lng: null,
				},
				img_array: [],
				typeList: [],
			}
		},
		created() {
			const that = this;
			const userInfo = TaCache.get('auth.user');
			if (!userInfo || !userInfo.id) {
				uni.redirectTo({
					url: "/pages/user/login"
				})
			}
			uni.getLocation({
				type: 'gcj02',
				success(res) {
					console.log(res)
					TaPost('/ticket/api.auth.UserShare/query_address', {
						lat: res.latitude,
						lng: res.longitude
					}).then((result) => {
						const data = result.data;
						that.form.ticket_address = data;
					})
					that.form.ticket_lat = res.latitude;
					that.form.ticket_lng = res.longitude;
				},
				fail(err) {
					console.warn(err)
				}
			})
		},
		onReady() {
			this.getTypeList()
		},
		methods: {
			getTypeList() {
				TaAjax.get('/ticket/api.type/list').then((result) => {
					const data = result.data;
					this.typeList = data;
				})
			},
			handleTypeIdChange(e) {
				const index = e.detail.value;
				const curType = this.typeList[index];
				this.type_name = curType.name;
				this.form.type_id = curType.id
			},
			handleGetRegion(region) {
				this.province = region[0].name
				this.city = region[1].name
				this.area = region[2].name
				this.form.ticket_region = `${this.province}/${this.city}/${this.area}`
			},
			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.imgs = this.img_array.join("|")
				TaPost('/ticket/api.auth.UserShare/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>