quna/pages/help/index.vue

<template>
	<view class="help">
		<!-- 	<view class="posi" @click="changePosi">
			<text><text class="star">*</text>位置：
				{{form.province_name}}{{form.city_name}}{{form.area_name}}{{form.street_name}}</text>
		
		</view> -->
		<!-- <view class="form" @click="changePosi">
			<view class="title">
				位置<text class="star">*</text>
				<u-icon name="arrow-right" class="icon"></u-icon>
			</view>
			<view class="input">
				<text class="posi">
					{{form.province_name}}{{form.city_name}}{{form.area_name}}{{form.street_name}}</text>
			</view>
		</view> -->
		<view class="form">
			<view class="title">
				省市县区<text class="star">*</text>
			</view>
			<view class="input" @click="changePosi">
				<text>
					{{form.province_name}}{{form.city_name}}{{form.area_name}}{{form.street_name}}</text>
			</view>
		</view>
		<view class="form">
			<view class="title">
				详细地址<text class="star">*</text>
			</view>
			<view class="input">
				<u-input v-model="form.address" type="textarea" height="50" />
			</view>
			<view class="address-icon" @click="changePosi">
				<u-icon name="map-fill" color='#10C08C' size="32"></u-icon>
				<view>定位</view>
			</view>
		</view>
		<view class="form">
			<view class="title">
				名称 <text class="star">*</text>
			</view>
			<view class="input">
				<u-input v-model="form.name" type="textarea" height="50" />
			</view>
		</view>
		<view class="form">
			<view class="title">
				工作时间<text class="star">*</text>
			</view>
			<view class="input">
				<u-input v-model="form.time" type="textarea" height="50" />
			</view>
		</view>
		<view class="form" style="border: none;">
			<view class="title">
				上传图片
			</view>
			<view class="title" style="flex: 1;">
				<text style="font-size: 12px;color: #B5B5B5">请上传带有时间公告的图片</text>
			</view>

		</view>
		<view class="form" style="border: none;">

			<view class="input">
				<u-upload ref="uUpload" :action="action" :auto-upload="true" :form-data='imageDate' :fileList="fileList"
					:multiple="false" @on-success='uploadSuccess' @on-error="uploadError" @on-delete='deleteImage'>
				</u-upload>
			</view>
		</view>
		<!-- <view class="form">
			<view class="title">
				备注:
			</view>
			<view class="input">
				<u-input v-model="value" type="textarea" :border="true" height="200" />
			</view>
		</view> -->
		<view class="tip_1">
			谢谢您,您提交的信息能帮助很多人!
		</view>
		<view class="submit" v-if="type==0" @click="submit">
			提交信息
		</view>
		<view class="submit" v-if="type==1" @click="save">
			保存修改
		</view>

		<view class="tip_2">
			注意：如果恶意上传无用信息，将永久封禁账号
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					cover: '',
					address: '',
					time: '',
					lat: '',
					lng: '',
					province_name: '',
					city_name: '',
					area_name: '',
					street_name: '',
				},
				action: '', //封面图上传地址
				imageDate: {
					type: 'point_cover',
					file_type: 'img'
				}, //上传图片携带参数
				fileList: [],
				lng: '',
				lat: '',
				first: true,
				type: 0, //添加  1修改
				isAuth: false,
			}
		},
		onLoad(options) {
			this.action = this.$u.http.config.baseUrl + '/base/common/upload'
			if (options.slug) {
				this.getDetail(options.slug)
				this.type = 1
			} else {
				this.type = 0
			}
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					console.log(res, 'pppppp-----------')
					this.lat = res.latitude
					this.lng = res.longitude
					this.form.lat = res.latitude
					this.form.lng = res.longitude
					this.getLocation(res)
				}
			})
			// this.$u.post('/base/common/upload', {
			// 	type: 'point_cover',
			// 	file_type: 'img'
			// }).then(res => {
			// 	console.log(res, '详情')
			// 	this.form = res.data.point
			// })


		},
		onShow() {
			// let that = this
			// this.form.name = ''
			// this.form.cover = ''

			// this.form.time = ''


		},
		onTabItemTap() {
		   this.form.name = ''
		   this.form.cover = ''
		   
		   this.form.time = ''
		  },
		methods: {
			getDetail(slug) {
				this.$u.get('/qunali/info', {
					slug: slug
				}).then(res => {
					console.log(res, '详情')
					this.form = res.data.point
				})
			},
			//获取位置
			getLocation(res) {
				this.$u.get('/qunali/geocoder', {
					lat: res.latitude,
					lng: res.longitude
				}).then(res => {
					this.form.province_name = res.data.province
					this.form.city_name = res.data.city
					this.form.area_name = res.data.area
					this.form.street_name = res.data.street
					this.form.address = res.data.address ? res.data.address : ''
				})
			},
			//选择位置
			changePosi() {
				uni.chooseLocation({
					latitude: this.form.lat,
					longitude: this.form.lng,
					success: (res) => {
						console.log(res, 'ppppp--------')
						let data = {
							latitude: res.latitude,
							longitude: res.longitude
						}
						this.form.lat = res.latitude
						this.form.lng = res.longitude
						this.getLocation(data)
					}
				})
			},
			uploadSuccess(data) {
				this.form.cover = data.data.path
				this.uploadImage = data.data.url
				console.log(this.fileList, 'filelist')
			},
			uploadError(data) {
				console.log(data, 'p')
				this.fileList = []
				this.uploadImage = ''
				this.form.cover = ''
			},
			deleteImage() {
				console.log('pppp')
				this.uploadImage = ''
				this.form.cover = ''
			},
			getUserProfile(e) {
				// 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						let userInfo = res.userInfo
						this.tongBu(userInfo)
					}
				})
			},
			//同步
			tongBu(data) {
				this.$u.post('/base/auth/weapp/user-info-sync', data).then(res => {
					console.log(res, 'opopop')
					this.$u.vuex('vuex_user', res.data);
				})
			},
			//提交信息
			submit() {
				let user = this.vuex_user.is_sync_info
				if (user == 0) {
					this.getUserProfile()
					return
				}
				console.log((!this.form.name), 'form')
				if (!this.form.address) {
					uni.showToast({
						title: '请填写详细地址！',
						icon: 'none'
					})
					return
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请填写名称！',
						icon: 'none'
					})
					return
				}
				if (!this.form.time) {
					uni.showToast({
						title: '请填写工作时间！',
						icon: 'none'
					})
					return
				}
				this.$u.post('/qunali/point', this.form).then(res => {
					uni.reLaunch({
						url: '../index/index'
					})
				})
			},
			//保存
			save() {
				let user = this.vuex_user.is_sync_info
				if (user == 0) {
					this.getUserProfile()
					return
				}
				if (!this.form.address) {
					uni.showToast({
						title: '请填写详细地址！',
						icon: 'none'
					})
					return
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请填写名称！',
						icon: 'none'
					})
					return
				}
				if (!this.form.time) {
					uni.showToast({
						title: '请填写工作时间！',
						icon: 'none'
					})
					return
				}
				this.$u.post('/qunali/version', this.form).then(res => {
					uni.reLaunch({
						url: '../index/index'
					})
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	::v-deep .u-upload {
		height: 114px !important;
		width: 114px !important;
		overflow: hidden !important;
	}

	.icon {
		float: right;
	}

	.star {
		color: red;
	}

	.help {
		padding: 5px 20px 70px;
	}

	.posi {
		display: flex;
		justify-content: space-between;
		color: #10C08C;
	}

	.form {
		margin-top: 10px;
		padding-bottom: 10px;
		display: flex;
		border-bottom: 1px solid #EEEEEE;
		align-items: center;

		.title {
			display: flex;
			align-items: center;
			flex: 0 0 80px;
			font-size: 16px;
			color: #000000;
			// margin-top: 5px;
		}

		.address-icon {
			text-align: center;
			font-size: 12px;
			color: #10C08C;
			margin-top: 5px;
			padding-left: 5px;
		}

		.input {
			flex: 1;
		}
	}

	::v-deep {
		.u-input {
			padding-top: 5px !important;
			border: none !important;
		}
	}

	.submit {
		height: 52px;
		line-height: 52px;
		text-align: center;
		background: #10C08C;
		border-radius: 23px;
		font-size: 18px;
		margin-top: 15px;
		color: #FFFFFF;
		border: 1px solid #10C08C;
	}

	.tip_1 {
		font-size: 16px;
		color: #10C08C;
		margin-top: 34px;
		text-align: center;
	}

	.tip_2 {
		color: #757373;
		font-size: 12px;
		text-align: center;
		margin-top: 22px;
	}
</style>