dvcp_v2_wechat_app/src/project/sanjianxi/AppApplyPoint/add.vue

<template>
  <div class="wrapper">
    <div class="bg-fff mar-b24">
      <div class="select">
        <div class="label">
          <span class="tips">*</span>积分类型
        </div>
        <div class="value">{{integralRuleName}}
          <!-- <u-icon name="arrow-right" color="#ddd" size="24" style="margin-left: 4px" ></u-icon> -->
        </div>
      </div>
      <div class="text-area">
        <div class="title"><span class="tips">*</span>申请描述</div>
        <u-input v-model="description" type="textarea" :height="200" placeholder="请输入描述信息" placeholder-style="font-size:20px;color:#999;" maxlength="500" />
      </div>
    </div>
    <div class="upload">
      <div class="bg-fff" style="padding-bottom:24px;">
        <div class="title"><span class="tips"></span>图片上传<span class="mini-text">(最多9张)</span></div>
        <AiUploader v-model="fileList" multiple placeholder="上传图片" :limit="9"></AiUploader>
      </div>
    </div>
    <div class="footer" @click="confirmAdd">
      <div class="btn">提交</div>
    </div>
    <u-select v-model="showTypeSelect" :list="typeList"  @confirm="confirmType" value-name="id" label-name="eventName"></u-select>
  </div>
</template>
<script>
import {mapState} from 'vuex';

export default {
  name: "add",
  appName: "积分申请",
  computed: {
    ...mapState(['user']),
  },
  data() {
    return {
      description: '',
      fileList: [],
      integralRuleId: '',
      integralRuleName: '',

      typeList: [],
      showTypeSelect: false,
      flag: false
    };
  },
  onLoad(options) {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#E76056",
    })
    this.integralRuleId = options.integralRuleId
    this.integralRuleName = options.integralRuleName
  },
  methods: {
    confirmAdd() {
      if(!this.description) {
        return this.$u.toast('请输入申请描述')
      }
      var params = {
        integralRuleId: this.integralRuleId,
        integralRuleName: this.integralRuleName,
        description: this.description,
        files: this.fileList,
        partyId: this.user.partyId
      }
      if(this.flag) {
        return
      }
      this.flag = true
      this.$instance.post(`/app/apppartyintegraldeclare/addOrUpdate`, params).then((res) => {
        if(res.code == 0) {
          this.$u.toast('申请成功')
          setTimeout(() => {
            uni.navigateBack()
          }, 500)
        }
      })
    },
    confirmType(e) {
      this.integralRuleId = e[0].value
      this.integralRuleName = e[0].label
    },
    getTypeList() {
      this.$instance.post(`/app/apppartyintegralrule/list?classify=0&size=1000`).then(res => {
        if (res.code == 0) {
          this.typeList = res.data.records
        }
      })
    },
  }
};
</script>
<style lang="scss" scope>
@import "~dvcp-wui/common";
.bg-fff{
  padding-left: 32px;
  background-color: #fff;
  .select{
    display: flex;
    justify-content: space-between;
    padding: 40px 32px 40px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    .label{
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666;
      line-height: 48px;
    }
    .value{
      font-size: 34px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 48px;
      width: 500px;
    }
  }
  .title{
    padding: 32px 0;
    font-size: 34px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666;
    line-height: 48px;
    .mini-text{
      font-size: 28px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
      line-height: 40px;
    }
  }
  .tips{
    display: inline-block;
    width: 16px;
    font-size: 34px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #F46!important;
    margin-right: 8px;
  }
}
.footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 32px;
  background-color: #f3f6f9;
  .btn{
    width: 686px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    background: #E76056;
    border-radius: 16px;
    font-size: 34px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFF;
  }
}
.upload{
  padding-bottom: 150px;
}
.mar-b24{
  margin-bottom: 24px;
}
</style>