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

<template>
  <div class="integralAdd">
    <div class="item">
      <div class="left"><span class="tips">*</span>姓名</div>
      <div class="right name-flex" :class="form.name ? '' : 'color-999'" >
        <AiPagePicker single :isShowPhone="true" @select="handleSelectUser" type="sysUser" class="pick" action="/app/appwechatuserqujing/listByFdAppletUserByGirdMember" nodeKey="openId">
          <AiMore v-model="form.name"/>
        </AiPagePicker>
        <u-icon name="scan" color="#333" size="40" class="scan" @click="scan"></u-icon>
      </div>
    </div>
    <div class="item">
      <div class="left"><span class="tips">*</span>身份证</div>
      <div class="right" :class="form.idNumber ? '' : 'color-999'">{{form.idNumber || '自动获取'}}</div>
    </div>
    <div class="item mar-b32">
      <div class="left"><span class="tips">*</span>手机号</div>
      <div class="right" :class="form.phone ? '' : 'color-999'">{{form.phone || '自动获取'}}</div>
    </div>
    <div class="item mar-b32">
      <div class="left"><span class="tips">*</span>事件类型</div>
      <div class="right">
        <AiSelect :list="dictList" v-model="form.applyItemId" @data="selectType" v-if="dictList && dictList.length"></AiSelect>
        <span v-else class="color-999">请选择</span>
      </div>
    </div>
    <div class="item mar-b32">
      <div class="left"><span class="tips">*</span>积分值</div>
      <div class="right">
        <u-input type="number" placeholder="请输入" input-align="right" placeholder-style="color:#999;font-size:16px;" height="40" v-model="form.applyIntegral" maxlength="10" />
        <!-- <u-number-box v-model="form.applyIntegral" input-height="44" size="14" :min="1" :max="100"></u-number-box> -->
      </div>
    </div>
    <div class="items">
      <p><span class="tips">*</span>详情描述</p>
      <textarea v-model="form.content" :maxlength="300" placeholder="请输入详细描述..."></textarea>
      <div class="text-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="text-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="text-tips left">可上传视频，最大30M。</div>
    </div>

    <div class="item mar-b32">
      <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 class="right" :class="form.girdName ? '' : 'color-999'">{{form.girdName || '自动获取'}}</div>
    </div>

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

<script>
import {mapActions, mapState} from "vuex";
export default {
  name: "integralAdd",
  appName: '积分申请',
  data() {
    return {
      form: {
        name: '',
        userId: '',
        phone: '',
        idNumber: '',
        applyItemId: '',
        applyIntegral: '',
        applyItemName: '',
        content: '',
        files: [],
        images: [],
        videos: [],
        girdId: '',
        girdName: '',
      },
      list: [],
      dictList: [],
      flag: false,
      id: '',
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad(o) {
    if(o.id) {
      this.id = o.id
      this.getDetail()
    }
    this.$dict.load(['clapEventStatus'])
    this.injectJWeixin(['scanQRCode'])
  },
  onShow() {
    document.title = '积分代申请'
  },
  methods: {
    ...mapActions(['injectJWeixin']),
    submit() {
      if(this.flag) return

      if (!this.form.name) {
        return this.$u.toast('请选择代申请人员')
      }

      if (!this.form.applyItemId) {
        return this.$u.toast('请选择事件类型')
      }
      if (!/^([1-9]\d*|0)(\.\d{1,2})?$/g.test(this.form.applyIntegral)) {
        this.form.applyIntegral = Number(this.form.applyIntegral).toFixed(2)
        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]
      }

      this.flag = true
      this.$http.post(`/app/appintegraluserapply/add`,{
        ...this.form
      }).then(res=> {
        if(res?.data) {
          this.$u.toast('提交成功')
          uni.$emit('updateList')
          setTimeout(()=> {
            uni.navigateBack()
          },500)
        }
      })
    },
    selectType(selecteds) {
      this.form.applyItemName = this.list.filter(e=> (e.id==selecteds[0].value))[0].ruleName
      this.form.applyIntegral = this.list.filter(e => (e.id == selecteds[0].value))[0].integral
    },
    // 事件类型
    getType() {
      this.$http.post(`/app/appintegralrule/listByFdGirdMember?openId=${this.form.userId}`).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 = []
        }
      })
    },
    handleSelectUser(v) {
      this.form.name = v?.[0]?.realName || ""
      this.form.userId = v?.[0]?.openId || ""
      this.form.phone = v?.[0]?.phone || ""
      this.form.idNumber = v?.[0]?.idNumber || ""
      this.form.girdId = v?.[0]?.girdId || ""
      this.form.girdName = v?.[0]?.girdName || ""
      this.form.applyIntegral = ''
      this.form.applyItemId = ''
      this.form.applyItemName = ''
      this.dictList = []
      this.getType()
    },
    scan() {
      wx.scanQRCode({
        desc: '扫描居民信息',
        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
        scanType: ["qrCode",], // 可以指定扫二维码还是条形码（一维码），默认二者都有
        success: (res) => {
          res.resultStr.realName = res.resultStr.name
          var userList = [{...res.resultStr}]
          this.handleSelectUser(userList)
        },
        error: (res) => {
          console.log(res)
          if (res.errMsg.indexOf('function_not_exist') > 0) {
            alert('版本过低请升级')
          }
        }
      });
    }
  }
}
</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;
    
    .left {
      width: 250px;
      .tips {
        color: #f46;
        font-size: 24px;
        vertical-align: middle;
        margin-right: 8px;
      }
    }
    .right {
      width: calc(100% - 200px);
      text-align: right;
    }
    .name-flex {
      display: flex;
      .pick {
        width: calc(100% - 60px);
        text-align:right;
      }
      .scan {
        width: 60px;
        padding-left: 20px;
      }
    }
    ::v-deep .AiSelect {
      float: right;
    }
  }
  .mar-b32 {
    margin-bottom: 24px;
  }
  .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 {
      color: #f46;
      font-size: 24px;
      vertical-align: middle;
      margin-right: 8px;
    }

    .text-tips {
      padding: 12px 32px 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;
    z-index: 3;
    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>