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"
        :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>