dvcp_v2_wxcp_app/src/project/fd/AppIntegralApply/integralAdd.vue

<template>
  <div class="integralAdd">
    <div class="item">
      <div class="left">事件类型</div>
      <AiSelect class="right" :list="dictList" v-model="form.applyItemId"></AiSelect>
    </div>
    <div class="items">
      <p>详情描述</p>
      <textarea v-model="form.content" :maxlength="300" placeholder="请输入详细描述..."></textarea>
      <div class="tips">{{ form.content.length }}/300</div>
    </div>
    <div class="items">
      <p>上传图片</p>
      <div class="upload">
        <AiUploader :def.sync="form.images" placeholder="上传图片" type="image" :limit="9" multiple></AiUploader>
      </div>
      <div class="tips left">可上传图片，最多上传9张。</div>
    </div>
    <div class="items">
      <p>上传视频</p>
      <div class="upload">
        <AiUploader :def.sync="form.videos" placeholder="上传视频" type="video" :limit="9" multiple :size="30 * 1024 * 1024"></AiUploader>
      </div>
      <div class="tips left">可上传视频，最大30M。</div>
    </div>

    <div class="item">
      <div class="left">所属网格</div>
      <AiPagePicker type="gird" v-model="form.girdId" :params="{ formType: 2 }" @select="handleSelectGrid" nodeKey="id">
        <AiMore v-model="form.girdName"/>
      </AiPagePicker>
    </div>

    <div class="footer">
      <div hover-class="text-hover" @click="submit">提交申请</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "integralAdd",
  appName: '积分申请',
  data() {
    return {
      form: {
        applyItemId: '',
        applyIntegral: '',
        applyItemName: '',
        content: '',
        files: [],
        images: [],
        videos: [],
        girdId: '',
        girdName: '',
      },
      list: [],
      dictList: [],
      flag: false,
      id: '',
    }
  },
  onLoad(o) {
    if(o.id) {
      this.id = o.id
      this.getDetail()
    }
    this.$dict.load(['clapEventStatus'])
    this.getType()
  },
  watch: {
    'form.applyItemId'(v) {
      if(v) {
        this.form.applyItemName = this.list.filter(e=> (e.id==v))[0].ruleName
        this.form.applyIntegral = this.list.filter(e => (e.id == v))[0].integral
      }
    }
  },
  methods: {
    submit() {
      if(this.flag) return

      if (!this.form.applyItemId) {
        return this.$u.toast('请选择事件类型')
      }

      if (!this.form.content) {
        return this.$u.toast('请输入详细描述')
      }

      if ((this.form.images.length + this.form.videos.length) > 9) {
        return this.$u.toast('图片和视频不得超过9个')
      } else {
        this.form.files = [...this.form.images,...this.form.videos]
      }

      if (!this.form.girdId) {
        return this.$u.toast('请选择所属网格')
      }

      this.flag = true
      this.$http.post(`/app/appintegraluserapply/addOrUpdate`,{
        ...this.form
      }).then(res=> {
        if(res?.data) {
          this.$u.toast('提交成功')
          uni.$emit('edit')
          setTimeout(()=> {
            uni.navigateBack()
          },500)
        }
      })
    },
    // 事件类型
    getType() {
      this.$http.post(`/app/appintegralrule/listByFdAndGirdInfo`).then(res=> {
        if(res?.data) {
          this.list = res.data
          this.dictList = res.data.map(v => {
            return {
              value: v.id,
              label: v.ruleName
            }
          })
        }
      })
    },
    handleSelectGrid(v) {
      this.form.girdName = v.girdName
      this.form.girdId = v.girdId
    },
    getDetail() {
      this.$http.post(`/app/appintegraluserapply/queryDetailById?id=${this.id}`).then(res => {
        if (res?.data) {
          this.form = res.data
          this.form.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png'].includes(e.name.split('.')[1])))
          this.form.videos = res.data.files.filter(e => (['mp4'].includes(e.name.split('.')[1])))
          this.form.files = []
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.integralAdd {
  padding: 24px 0 120px 0;
  box-sizing: border-box;
  .item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background: #FFF;
    padding: 24px 32px;
    box-sizing: border-box;
    margin-bottom: 24px;
    .left {
      width: 250px;;
    }
    .right {
      width: calc(100% - 200px);
      text-align: right;
    }
    ::v-deep .AiSelect {
      float: right;
    }
  }
  .items {
    width: 100%;
    background: #FFF;
    margin-bottom: 24px;
    p {
      padding: 24px 32px;
      box-sizing: border-box;
      border: 1px solid #EEEEEE;
    }
    textarea {
      padding: 24px 32px;
      box-sizing: border-box;
      width: 100%;
    }

    .tips {
      padding: 12px 32px;
      box-sizing: border-box;
      text-align: right;
      color: #999999;
      font-size: 24px;
      font-weight: 400;
    }
    .left {
      text-align: left;
    }
    .upload {
      padding: 24px 32px 0 32px;
      box-sizing: border-box;
    }
  }

  ::v-deep .display {
    display: inline-block;
  }
  .footer{
    width: 100%;
    height: 96px;
    background: #FFF;
    box-shadow: inset 0 0 0 0 #D4D4D4;
    box-sizing: border-box;
    display: flex;
    position: fixed;
    bottom: 0;
    div {
      flex: 1;
      height: 96px;
      line-height: 96px;
      background: #1365DD;
      font-family: PingFangSC-Regular;
      font-size: 32px;
      text-align: center;
      font-weight: 500;
      color: #fff;
      box-sizing: border-box;
    }
  }

}
</style>