dvcp_v2_wechat_app/src/mods/AppPlease/add.vue

<template>
  <div class="page">
    <div class="add-form">
      <div class="form-item mar-b8">
        <span class="item-tips">*</span>
        <span class="label">提问类型</span>
        <span :class="typeName ? 'value color-333' : 'value color-999'"
              @click="leaveMessageTypeShow = true">{{ typeName || '请选择' }}</span>
        <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon">
      </div>
      <div class="form-item mar-b8">
        <span class="item-tips">*</span>
        <span class="label">所在地区</span>
        <span class="value color-999">
          <AiAreaPicker v-model="areaId" class="picker" :name.sync="areaName">
            <div :class="areaName == '请选择' ? 'text color-999' : 'text color-333' ">{{ areaName || "请选择" }}</div>
          </AiAreaPicker>
        </span>
        <img src="https://cdn.cunwuyun.cn/img/right-icon-999.png" alt="" class="right-icon">
      </div>
      <div class="form-item title-line">
        <span class="item-tips">*</span>
        <span class="label">提问标题</span>
        <div class="item-input">
          <input type="text" placeholder="请输入标题（30字以内）" placeholder-style="color:#999;" maxlength="30" v-model="title">
        </div>
      </div>
      <div class="form-item mar-b8">
        <span class="item-tips">*</span>
        <span class="label">提问内容</span>
        <div class="item-input fs-32">
          <u-input type="textarea" height="140" placeholder="请输入提问内容（500字以内）" placeholder-style="color:#999;"
                   maxlength="500" v-model="content"/>
        </div>
      </div>
      <div class="form-item">
        <span class="item-tips"></span>
        <span class="label">图片上传<span class="mini-label">（最多9张）</span></span>
        <div class="upload">
          <AiUploader :limit="9" v-model="files"></AiUploader>
        </div>
      </div>
    </div>
    <u-select v-model="leaveMessageTypeShow" :list="leaveMessageTypeList" @confirm="confirmMessageType"
              confirm-color="#07c160"></u-select>
    <div class="fixed-bottom confirm-btn" @click="confirm">提交</div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: "my",
  computed: {
    ...mapState(['global'])
  },
  data() {
    return {
      type: '',
      typeName: '',
      areaId: '',
      areaName: "",
      areaRange: "",
      title: '',
      content: '',
      files: [],
      flag: false,
      leaveMessageTypeList: [],
      leaveMessageTypeShow: false
    }
  },
  onLoad() {
    this.$dict.load('leaveMessageType').then((res) => {
      this.$nextTick(() => {
        this.$dict.getDict('leaveMessageType').map(i => {
          var item = {
            label: i.dictName,
            value: i.dictValue
          }
          this.leaveMessageTypeList.push(item)
        })
      })
    })
  },
  methods: {
    confirm() {
      if (this.flag) return
      this.$loading()
      var params = {
        type: this.type,
        areaId: this.areaId,
        title: this.title,
        content: this.content,
        images: JSON.stringify(this.files),
        status: 0
      }
      if (!params.type) {
        return this.$toast('请选择留言类型')
      }
      if (!params.areaId) {
        return this.$toast('请选择所在地区')
      }
      if (!params.title) {
        return this.$toast('请输入提问标题')
      }
      if (!params.content) {
        return this.$toast('请输入提问内容')
      }
      this.flag = true
      this.$instance.post(`/app/appleavemessage/addOrUpdate-wx`, params).then(res => {
        if (res && res.code == 0) {
          this.$hideLoading()
          uni.showModal({
            title: '您已成功提交留言',
            confirmText: "查看记录",
            confirmColor: "#197DF0",
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                this.flag = false
                uni.redirectTo({
                  url: './questionList'
                })
              } else {
                this.flag = false
              }
            }
          })
        } else {
          this.flag = false
        }
      }).catch(err => {
        console.log(err)
        this.flag = false
      })
    },
    confirmMessageType(e) {
      this.typeName = e[0].label
      this.type = e[0].value
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../common/common.scss";

.page {
  width: 100%;
  background-color: #F3F6F9;

  .add-form {
    padding-bottom: 112px;
  }

  .form-item {
    padding: 34px 32px 34px 12px;
    line-height: 44px;
    background-color: #fff;

    .item-tips {
      display: inline-block;
      width: 12px;
      font-size: 32px;
      color: #FF4466;
    }

    .label {
      display: inline-block;
      min-width: 126px;
      color: #333;
      font-size: 32px;
      margin-left: 8px;

      .mini-label {
        color: #999;
        font-size: 28px;
      }
    }

    .value {
      display: inline-block;
      width: 518px;
      text-align: right;
    }

    .text {
      display: inline-block;
      width: 520px;
      text-align: right;
    }

    .color-333 {
      color: #333 !important;
    }

    .right-icon {
      width: 32px;
      height: 32px;
      margin-left: 8px;
      vertical-align: middle;
    }

    .item-input {
      padding-bottom: 4px;
      margin-left: 24px;
      margin-top: 32px input {
        line-height: 42px;
        font-size: 32px;
      }

    }

    .upload {
      margin: 32px 0 024px;
    }
  }

  .mar-b8 {
    margin-bottom: 16px;
  }
}
</style>