jigesi/pages/my/feedBack/index.vue

<template>
	<view class="page">
		<navBar title="用户反馈" :back="true" color="black" background="white" />
		<view class="content">
			<view class="title">
				意见反馈
			</view>
			<u--textarea maxlength="100" :focus="false" v-model="content" :disabled="false" placeholder="请描述您遇到的问题"
				count border="none" height="256rpx"></u--textarea>


			<view class="picTop">
				<view class="title" style="margin-top: 52rpx;margin-bottom: 18px;">
					问题图片
				</view>

				<view class="count">
					<text style="color: #161717;">{{pic_url.length}}</text>/9
				</view>
			</view>

			<!-- 图片上传区域 -->
			<!-- 选择要上传的图片区域 -->
			<view class="chooscontainer">
				<view class="addpicall" v-for="(item,index) in pic_url" :key="index">
					<image style="width: 184rpx;height:186rpx;border-radius: 15rpx;" @click="previewImg(item)"
						:src="item" mode="aspectFill">
					</image>
					<view @click="delectImg(index)" class="del_btn">×</view>
				</view>
				<view class="addpic" @click="addquesPic" v-if="pic_url.length<9">
					<view class="addPicBox">
						<image :src="picUrl+'/static/my/add.png'"></image>
					</view>

				</view>
			</view>


			<view class="title" style="margin-top: 0rpx;">
				联系方式
			</view>
			<input type="number" class="phone" placeholder="电话" v-model="phone" style="">
		</view>
		<view class="btn_bottom" @click="post()" v-if="showCBtn">
			确定
		</view>
		<privacy-popup @confirmP="confirmP" @cancleP="cancleP" :showPrivateBox="showPop"></privacy-popup>
	</view>
</template>

<script>
	import uploadUrl from '@/common/config.js'
	import {
		submitFeedbackReq,
	} from '@/api/test/index.js'
	import PrivacyPopup from "@/components/privacyPopup/index.vue";
	export default {
		components: {
			PrivacyPopup
		},
		data() {
			return {
				showPop: false,
				showCBtn: false,

				picUrl: this.$picUrl,
				content: '',
				phone: '',
				pic_url: [],
			}
		},
		onLoad(options) {},
		onShow() {
			this.handlePrivate()
		},
		methods: {

			cancleP() {
				this.showPop = false
				this.showCBtn = true
			},
			handlePrivate() {
				let _this = this

				if (getApp().globalData.showPrivacy) {

					_this.showPop = true

				} else {
					_this.showPop = false
					this.showCBtn = true
				}
			},

			// 用户同意隐私内容
			confirmP() {
				this.showPop = false
				this.showCBtn = true
				this.handleUpImg()

			},
			async post() {
				let phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (this.content == '') {
					return this.$toast('请输入反馈内容')
				}
				if (this.phone == '') {
					return this.$toast('请输入联系方式')
				}
				if (!phoneReg.test(this.phone)) {
					return this.$toast('请输入合法的手机号')
				}
				let image = ''
				this.pic_url.forEach((item, index) => {
					if (index == this.pic_url.length - 1) {
						image += item
					} else {
						image += (item + ',')
					}
				})

				let res = await submitFeedbackReq({
					phone: this.phone,
					content: this.content,
					image
				})
				if (res.code == 0) {
					console.log('反馈返回值', res);
					this.$toast('提交成功')

					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},

			//删除图片
			delectImg(i) {
				this.pic_url.splice(i, 1)
			},
			//点击预览图片
			previewImg() {
				uni.previewImage({
					current: this.current,
					urls: this.formData.pic_url, //存放图片的数组
					loop: true,
					indicator: 'default'
				})
			},
			// 新增图片
			addquesPic() {
				if (getApp().globalData.showPrivacy) {

					this.showPop = true
					this.showCBtn = false
					return
				}
				this.handleUpImg()
			},
			handleUpImg() {
				let _this = this
				let imgList = []
				uni.chooseImage({
					count: 9 - _this.pic_url.length, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						if (_this.pic_url.length >= 9) {
							_this.$toast("只能选择9张照片")
							return
						}
						if (res.tempFilePaths.length > 0) {
							imgList = res.tempFilePaths
							imgList.forEach((item, index) => {
								uni.uploadFile({
									//后端接口地址
									url: uploadUrl.baseUrl + '/api/upload',
									//图片临时地址
									filePath: imgList[index],
									//上传文件类型
									name: 'file',
									formData: {
										// tag: 'avatar',
										'tag': 'lamp'
									},
									success: (uploadRes) => {
										let result = JSON.parse(uploadRes.data)
										if (result.code == 0) {
											_this.pic_url = _this.pic_url
												.concat(result.data.file)
											console.log('上传后的头像url地址', result.data.file)
										}
									},
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>