积分整合

src/apps/AppIntegralAudit/AppIntegralAudit.vue

@@ -0,0 +1,241 @@
+<template>
+  <div class="AppIntegralAudit" v-if="flag">
+    <!-- tab栏 -->
+    <div style="position: fixed; top: 0; left: 0;width: 100%;">
+      <div class="tab-select">
+        <div class="item" :class="tabIndex == index ? 'active' : ''" v-for="(item, index) in tabs" :key="index" @click="tabClick(index)">{{item}}<span></span></div>
+      </div>
+      <div class="search-box">
+        <div class="integral-types" @click="showType = true">
+          <span>{{ type? type : '积分类型' }}</span>
+          <u-icon name="arrow-down"></u-icon>
+        </div>
+        <u-search placeholder="请输入关键字" v-model="keyword" :show-action="false" @search="search" @clear="getList()"/>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <div class="card-list"  v-if="integralList.length">
+      <div class="card-item" @click="toDetail(item)" v-for="(item,index) in integralList" :key="index">
+        <div class="card-title">{{ item.description }}</div>
+        <div class="card-name">
+          <div class="name">{{ $dict.getLabel('atWillReportType',item.applyIntegralType) }}</div>
+          <div class="time">{{ item.createTime }}</div>
+        </div>
+        <div class="card-type">
+          <div class="type" :style="{color: item.auditStatus==0? '#4181FF':item.auditStatus==1? '#07c160' : '#dd5347'}">{{ $dict.getLabel('integralDeclareStatus',item.auditStatus) }}</div>
+          <div class="num" v-if="item.auditIntegral">{{ item.auditIntegral }}</div>
+        </div>
+      </div>
+    </div>
+    <AiEmpty description="暂无数据" class="emptyWrap" v-else style="padding-top: 100px;"></AiEmpty>
+    <u-select v-model="showType" :list="$dict.getDict('atWillReportType')" label-name="dictName" value-name="dictValue"
+            @confirm="confirmTypeSelect"/>
+    <div style="height: 20px"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppIntegralAudit',
+  appName: '积分审核',
+  data () {
+    return {
+      tabs: ['全部', '待审核', '已审核'],
+      tabIndex: 0,
+      showType: false,
+      keyword: '',
+      typeList: [],
+      current: 1,
+      integralList: [],
+      type: '',
+      applyIntegralType: '',  // 积分类型
+      flag: false,
+    }
+  },
+  created() {   
+    this.$dict.load('atWillReportType','integralDeclareStatus').then(()=>{
+      this.getList()
+      uni.$on('update',()=>{
+        this.current = 1
+        this.getList()
+      })
+    })
+  },
+  methods: {
+    tabClick(index) {
+      this.current=1
+      this.type = '',
+      this.applyIntegralType = ''
+      this.integralList=[]
+      this.tabIndex = index
+      this.getList()
+    },
+
+    getList() {
+      this.$http.post('/app/appvillagerintegraldeclare/list',null,{
+        params: {
+          current: this.current,
+          description : this.keyword,
+          applyIntegralType: this.applyIntegralType,
+          auditType: this.tabIndex== 0 ? "" : this.tabIndex == 1 ? 0 : 1
+        }
+      }).then(res => {
+        if(res?.data){
+          this.integralList = this.current > 1 ?  [...this.integralList, ...res.data.records]:res.data.records
+          this.$forceUpdate()
+          this.flag = true
+        } 
+      })
+    },
+    search() {
+      this.current = 1,
+      this.getList()
+    },
+
+    confirmTypeSelect(e) {
+      this.type = e[0].label
+      this.applyIntegralType = e[0].value
+      this.current = 1,
+      this.integralList = []
+      this.getList()
+    },
+
+    toDetail(item) {
+      uni.navigateTo({url: `./detail?id=${item.id}&nopass=${item.auditType}`})
+    }
+  },
+  onShow() {
+    document.title = '积分审核'
+  },
+  onReachBottom() {
+    this.current ++,
+    this.getList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AppIntegralAudit {
+
+  .tab-select {
+    width: 100%;
+    height: 96px;
+    line-height: 96px;
+    background: #3975C6;
+    display: flex;
+
+    .item{
+      flex: 1;
+      text-align: center;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #CDDCF0;
+    }
+
+    .active{
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      position: relative;
+      color: #fff;
+      span{
+        width: 48px;
+        height: 4px;
+        background: #FFF;
+        position: absolute;
+        bottom: 14px;
+        left: 50%;
+        margin-left: -24px;
+      }
+    }
+  }
+
+  .search-box {
+    display: flex;
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background-color: #FFFFFF;
+    padding: 0 32px;
+    box-sizing: border-box;
+
+    .integral-types {
+      display: flex;
+      width: 180px;
+      white-space:nowrap;
+      justify-content:flex-start;
+      margin-right: 20px;
+      span {
+        display:block;
+        width: 160px;
+        overflow:hidden;
+        text-overflow:ellipsis;
+        white-space:nowrap;
+      }
+      u-icon {
+        width: 40px;
+      }
+
+    }
+  }
+
+  .card-list {
+    width: 100%;
+    padding: 200px 32px 20px 32px;
+    box-sizing: border-box;
+    background: #f5f5f5;
+
+    .card-item {
+      margin-top: 24px;
+      background-color: #FFFFFF;
+      box-shadow: 0px 0px 8px 8px rgba(0, 0, 0, 0.02);
+      border-radius: 16px;
+      padding: 30px 32px 20px 32px;
+
+      .card-title {
+        height: 60px;
+        line-height: 60px;
+        font-size: 36px;
+        color: #333333;
+        overflow:hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -o-text-overflow:ellipsis;
+      }
+
+      .card-name {
+        margin-top: 30px;
+        display: flex;
+        height: 50px;
+        line-height: 50px;
+        font-size: 28px;
+        color: #999999;
+
+        .name {
+          padding: 0 20px;
+          background: #EEEEEE;
+          border-radius: 24px;
+          margin-right: 24px;
+        }
+      }
+
+      .card-type {
+        margin-top: 30px;
+        display: flex;
+        justify-content: space-between;
+
+        .type {
+          font-size: 28px;
+        }
+
+        .num {
+          font-size: 34px;
+          color: #E6736E;
+        }
+      }
+    }
+  }
+
+
+
+}
+</style>

src/apps/AppIntegralAudit/detail.vue

@@ -0,0 +1,435 @@
+<template>
+  <div class="detail">
+    <div class="detail-list">
+      <div class="detail-info">
+        <div class="detail-name">申请人:<span>{{form.residentName}}</span></div>
+        <div class="detail-type">{{ $dict.getLabel('atWillReportType',form.applyIntegralType) }}</div>
+      </div>
+      <div class="detail-area">
+        <div class="time">{{ form.createTime }}</div>
+        <div class="address" v-if="form.areaId">
+          <img src="img/address.png" alt="">
+          <span>{{ form.areaName }}</span>
+        </div>
+      </div>
+      <div class="detail-text">
+        {{ form.description }}
+      </div>
+      <div class="detail-img">
+        <img :src="item.url" alt="" v-for="(item, i) in form.applyFiles" :key="i" @click="previewImage(form.applyFiles, item.url)" />
+      </div>
+    </div>
+
+    <!-- 待审核 -->
+    <div class="integral" v-if="form.auditStatus == 0">
+      <div class="result">
+        <div><span  style="color: #FF4466;">*</span>积分审核结果</div>
+        <div class="options">
+          <div class="opts-item" :class="opts? 'current': ''" @click="opts = 1">通过</div>
+          <div class="opts-item" :class="!opts? 'current': ''" @click="opts = 0">不通过</div>
+        </div>
+      </div>
+
+      <!-- 通过 -->
+      <div class="integral-select" v-if="opts === 1">
+        <div class="integral-item" @click="isShowType = true">
+          <div class="label"><span>*</span>积分类别</div>
+          <div class="value" >
+            <span :style="{color:data.auditIntegralType ? '' : '#999'}">{{ $dict.getLabel('atWillReportType',data.auditIntegralType) || '请选择' }}</span>
+            <u-icon name="arrow-right" color="#E1E2E3"/>
+          </div>
+        </div>
+        <div class="integral-item" @click="getType()">
+          <div class="label"><span>*</span>积分事项</div>
+          <div class="value">
+            <span :style="{color:data.ruleName ? '' : '#999'}">{{ data.ruleName || '请选择' }}</span>
+            <u-icon name="arrow-right" color="#E1E2E3"/>
+          </div>
+        </div>
+        <div class="integral-item">
+          <div class="label"><span style="margin-right: 8px;"></span>积分调整</div>
+          <div style="color: #E6736E;margin-right: 8px; font-weight: 600;" class="value">{{ data.integral }}</div>
+        </div>
+      </div>
+      <!-- 不通过 -->
+      <div class="reject" v-else>
+        <div><span style="color:#FF4466;">*</span>不通过理由</div>
+        <textarea class="reasons" placeholder="请输入不通过理由" :maxlength="500"
+                    v-model="data.auditOpinion"></textarea>
+        <div class="tips">{{ data.auditOpinion.length }}/500</div>
+      </div>
+
+      <u-select :list="$dict.getDict('atWillReportType')" value-name="dictValue" label-name="dictName"
+              v-model="isShowType" @confirm="integralType"></u-select>
+
+      <u-select :list="typeList" value-name="id" label-name="ruleName"
+              v-model="isShowOption" @confirm="typeChange"></u-select>
+    </div>
+
+
+    <!-- 已审核 -->
+    <div class="readOnly" v-else>
+      <!-- 通过 -->
+      <div v-if="form.auditStatus==1">
+        <div class="item">
+          <div>积分审核</div>
+          <div>通过</div>
+        </div>
+        <div class="item">
+          <div>积分类别</div>
+          <div>{{ $dict.getLabel('atWillReportType', form.auditIntegralType) }}</div>
+        </div>
+        <div class="item">
+          <div>积分事项</div>
+          <div>{{ form.auditRuleName }}</div>
+        </div>
+        <div class="item">
+          <div>积分调整</div>
+          <div style="color: #E6736E;">{{ form.auditIntegral }}</div>
+        </div>
+      </div>
+      <!-- 不通过 -->
+      <div v-if="form.auditStatus==2">
+        <div class="item">
+          <div>积分审核</div>
+          <div>不通过</div>
+        </div>
+        <div class="item nopass">
+          <div>不通过的理由</div>
+          <div class="textarea">{{ form.auditOpinion }}</div>
+        </div>
+      </div>
+      <div class="item">
+        <div>审核人</div>
+        <div>{{ form.auditUserName }}</div>
+      </div>
+      <div class="item">
+        <div>审核时间</div>
+        <div>{{ form.auditTime }}</div>
+      </div>
+    </div>
+
+    <div style="height: 70px"></div>
+    <div class="saveBtn" v-if="form.auditStatus == 0" @click="submit">保存</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'detail',
+  data () {
+    return {
+      id: '',
+      auditType: 1,
+      opts: 1,
+      isShowType: false,
+      isShowOption: false,
+      getList: [],
+      reason: '',
+      form: {},
+      data: {
+        id: '',
+        auditIntegralType: '',  //积分类型
+        auditOpinion: '',   // 不通过理由
+        ruleName: '',
+        integral: '',
+        integralType: ''
+      },
+      typeList: [],
+    }
+  },
+  onLoad(o) {
+    this.$dict.load('atWillReportType','integralDeclareStatus').then(()=>{
+      this.id = o.id
+      this.nopass = o.nopass
+      this.getDetail()
+    })
+  },
+  methods: {
+    previewImage(images, img) {
+      uni.previewImage({
+        urls: images.map(v => v.url),
+        current: img
+      })
+    },
+    getDetail() {
+      this.$http.post(`/app/appvillagerintegraldeclare/queryDetailById?id=${this.id}`).then(res => {
+        if(res.code==0) {
+          this.form = res.data
+          this.$forceUpdate()
+        }
+      })
+    },
+    getType() {
+      if(!this.data.auditIntegralType) {
+        return this.$u.toast('请选择积分类别')
+      } else {
+        this.$http.post(`/app/appvillagerintegralrule/list?current=1&size=10&auditIntegralType=${this.data.auditIntegralType}`).then(res=>{
+          if(res.code == 0){
+            let typeAllList = []
+            typeAllList = res.data.records
+            this.typeList = typeAllList.filter(item=>item.ruleStatus != 0)
+            this.isShowOption=true
+          }
+        })
+      }
+    },
+    typeChange(e) {
+      this.data.ruleName = e[0].label
+      this.data.id = e[0].value
+      this.data.integral = e[0].value
+      this.typeList.map((item) => {
+        if(item.id == e[0].value) {
+          this.data.integral = item.integral
+          this.data.integralType = item.integralType
+        }
+      })
+    },
+    integralType(e) {
+      this.data.auditIntegralType = e[0].value
+      this.typeList.map((item) => {
+        if(item.ruleStatus==1) {
+        }
+      })
+    },
+    submit() {
+      if(this.opts==1){
+        if(!this.data.auditIntegralType) {
+        return this.$u.toast('请选择积分类别')
+        }
+        if(!this.data.ruleName) {
+          return this.$u.toast('请选择积分事项')
+        }
+      }
+      if(this.opts==0){
+        if(!this.data.auditOpinion) {
+          return this.$u.toast('请输入不通过理由')
+        }
+      }
+      this.$http.post('/app/appvillagerintegraldeclare/examine',null,{
+        params: {
+          id: this.id,
+          pass: this.opts,
+          auditRuleId: this.data.id,
+          auditIntegralType: this.data.auditIntegralType,
+          auditIntegral: this.data.integral,
+          opinion: this.data.auditOpinion,
+          auditRuleName: this.data.ruleName,
+        }
+      }).then(()=>{
+        this.$u.toast('保存成功')
+        uni.$emit('update')
+        setTimeout(()=>{
+          uni.navigateBack()
+        },600)
+      })
+    }
+  },
+  onShow() {
+    document.title = '积分审核详情'
+  },
+
+
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+
+  .detail-list {
+    padding: 20px 30px;
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    margin-bottom: 16px;
+
+    .detail-info {
+      display: flex;
+      justify-content: space-between;
+      height: 50px;
+      line-height: 50px;
+      .detail-name {
+        font-size: 30px;
+        font-weight: 600;
+        color: #333333;
+      }
+
+      .detail-type {
+        height: 50px;
+        line-height: 50px;
+        color: #135AB8;
+        font-size: 24px;
+        background-color: #e6edf7;
+        padding: 0 25px;
+        border-radius: 16px;
+      }
+
+    }
+
+    .detail-area {
+      display: flex;
+      color: #333333;
+      font-size: 22px;
+      margin: 15px 0;
+
+      .address {
+        display: flex;
+        margin-left: 30px;
+
+        img {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+
+    .detail-text {
+      color: #333333;
+      font-size: 30px;
+      margin-bottom: 30px;
+    }
+
+    .detail-img {
+
+      img {
+      width: 220px;
+      height: 220px;
+      margin-right: 8px;
+      }
+      img:nth-child(3n) {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .integral {
+    font-size: 32px;
+
+    .result {
+      padding: 20px 30px;
+      box-sizing: border-box;
+      background-color: #FFFFFF;
+      // border-bottom: 1px solid #D8DDE6;
+      margin-bottom: 16px;
+      .options {
+        display: flex;
+        justify-content: space-between;
+
+        .opts-item {
+          width: 45%;
+          height: 112px;
+          line-height: 112px;
+          background: #F5F5F5;
+          text-align: center;
+          margin-top: 30px;
+          border-radius: 6px;
+        }
+      }
+    }
+
+    .current {
+      color: #1174fe;
+      background: #e7f1fe !important;
+      position: relative;
+    }
+
+    .integral-select {
+      padding: 0px 30px;
+      box-sizing: border-box;
+      background: #FFFFFF;
+
+      .integral-item {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 34px 0;
+        border-bottom: 1px solid #D8DDE6;
+
+
+        .label {
+          width: 200px;
+          span {
+            color: #FF4466;
+          }
+        }
+        .value {
+          width: calc(100% - 200px);
+          text-align: right;
+          word-break: break-all;
+        }
+      }
+    }
+
+    .reject {
+      padding: 30px 30px;
+      background: #FFFFFF;
+
+      .reasons {
+        margin-top: 30px;
+        width: 100%;
+        height: 200px;
+        color: #333333;
+      }
+
+      .tips {
+        margin-top: 30px;
+        text-align: right;
+        font-size: 30px;
+        color: #999;
+      }
+
+    }
+
+  }
+
+  .readOnly {
+    padding: 20px 30px;
+    box-sizing: border-box;
+    background: #FFFFFF;
+
+    .item {
+      display: flex;
+      justify-content: space-between;
+      padding: 30px 0;
+      font-size: 32px;
+      color: #333333;
+      border-bottom: 1px solid #D8DDE6;
+
+      div:first-child {
+        width: 200px;
+      }
+      div:last-child {
+        width: calc(100% - 200px);
+        text-align: right;
+      }
+
+      .textarea {
+        margin-top: 30px;
+        color: #333333;
+      }
+    }
+
+    .nopass {
+      flex-direction: column;
+      border-bottom: 1px solid #D8DDE6;
+    }
+
+    .last {
+      border-bottom: none;
+    }
+  }
+
+  .saveBtn {
+    position: fixed;
+    bottom: 0;
+    height: 112px;
+    width: 100%;
+    line-height: 112px;
+    background-color: #3975C6;
+    font-size: 32px;
+    color: #FFFFFF;
+    text-align: center;
+  }
+
+}
+</style>