veterans_H5/h5_web/pages/questionConsulting/questionConsulting.vue

<template>
	<view class="questionconsulting">
		<u-navbar back-icon-name="" title-color="#FFFFFF" :border-bottom="false" back-text="取消"
			:back-text-style="backTextStyle" :background="{background: '#3D5D4C' }" title="问题咨询" />

		<view class="questionconsulting-problemdesc">
			<u-input v-model="problemDesc" type="textarea" :border="true" :height="278" :auto-height="true"
				placeholder="请描述您关于学历提升相关的问题，尽可能详细，便于进行准确分析解答" />
		</view>

		<view class="questionconsulting-attachment">
			<u-upload ref="questionUpload" :action="action" :auto-upload="true" :custom-btn="true"
				:show-upload-list="false" max-count="3" :header="{
					Authorization: `Bearer ${vuex_token}`
				}" :limitType="['png', 'jpg']" @on-success="questionUploadSuccess">
				<view class="attachment-upload-box" slot="addBtn">
					<view class="attachment-upload">
						<image src="../../static/svg/question-attachment-upload.svg" mode="aspectFill" />
						<view class="font">添加照片/视频</view>
					</view>
					<view class="tips">支持jpg.png格式</view>
				</view>
			</u-upload>
			<view class="attachment-url" v-if="questionClearFiles.length > 0">
				<view class="icon">
					<u-icon name="close" color="#fff" size="16" @click="questionClearFile"></u-icon>
				</view>
				<image :src="questionClearFiles[0].filesUrl" mode="" />
			</view>
		</view>

		<view class="questionbtn">
			<view class="questionbtn-container">
				<view class="questionbtn-content">
					<view>
						<u-button type="primary" @click="questionSubmitBtnClick" class="questionsubmitbtn">提交</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 上传地址
				action: this.config.uploadUrl,
				problemDesc: '',
				questionClearFiles: [],
				backTextStyle: {
					color: '#FFFFFF',
					fontSize: '24rpx',
					fontFamily: 'PingFangSC-Regular, PingFang SC',
					fontWeight: 400,
					lineHeight: '33rpx'
				}
			}
		},
		methods: {
			/**
			 * 上传附件成功
			 */
			questionUploadSuccess(e) {
				this.questionClearFiles = []
				this.questionClearFiles.push({
					filesType: 6,
					filesUrl: e.data.url
				})
			},
			/**
			 * 清空上传附件
			 */
			questionClearFile() {
				uni.showModal({
					title: '提示',
					content: '您确定要删除此项吗？',
					success: async (res) => {
						if (res.confirm) {
							this.questionClearFiles = [];
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './scss/questionConsulting.scss'
</style>