guosen-ldt-client/pages/mine/setting/question.vue

<template>
	<view class="question">
		<u-form :model="form" ref="uForm" label-position="top">
			<u-form-item label="问题反馈" prop="content">
				<u-input height="200" class="u-input" v-model="form.content" placeholder="请输入问题描述" type="textarea" />
				<view class="cu-form-group" style="padding: 0;">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
							:data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" style="width: 50rpx;height: 50rpx;" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="chooseImage" v-if="imgList.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="联系方式" prop="phone">
				<u-input height="100" class="u-input" v-model="form.phone" placeholder="请留下您的联系方式" type="number" />
			</u-form-item>
			<u-button :custom-style="customStyle" @click="submit">提 交</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					content: '',
					phone: ''
				},
				imgList:[],
				customStyle: {
					backgroundColor: '#FF9447',
					marginTop: '80rpx',
					color: '#fff'
				}
			}
		},
		methods: {
			ViewImage(e) {
				uni.previewImage({
				 urls: this.imgList,
				 current: e.currentTarget.dataset.url
				});
			   },
			   DelImg(e) {
				uni.showModal({
				 title: '提示',
				 content: '确定要删除吗？',
				 success: res => {
				  if (res.confirm) {
				   this.imgList.splice(e.currentTarget.dataset.index, 1)
				  }
				 }
				})
			   },
			async chooseImage(){
				let res=await this.$mpi.chooseImage()
				this.$api.uploadFile(res[0]).then(res=>{
					this.imgList.push(res.data.link)
				})
			},
			async submit() {
				if (!this.form.content) {
					this.$u.toast('请输入反馈内容')
					return
				}

				let p = {
					type: 1,
					userId: this.vuex_userId,
					content: this.form.content,
					pics: this.imgList.length > 0 ? this.imgList.join(",") : '',
					phone: this.form.phone,
					handleStatus: 0
				}
				let res = await this.$api.setting.feedback(p)
				this.$u.toast('提交成功')
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.question {
		padding: 32rpx;
		background-color: #fff;
		min-height: 100vh;
	}
</style>