qyjj-admin/src/view/fund/area-assessment-detail.vue

<template>
  <div class="table-manage-box">
    <Header :title="title"></Header>
    <div class="container">
      <div class="content">
        <div class="sub_txt">
          <div class="main_txt">基础信息</div>
          <div class="info">
            <div class="item">
              <div class="txt">
                <p class="label">用户ID：</p>
                <p v-text="uidFormat(info.uid)"></p>
              </div>
              <div class="txt">
                <p class="label">时段级别：</p>
                <p v-text="periodLevelMap[info.periodLevel] || ''"></p>
              </div>
              <div class="txt">
                <p class="label">市级代领：</p>
                <p v-text="info.cityProxy === 1 ? '是' : '不是'"></p>
              </div>
            </div>
            <div class="item">
              <div class="txt">
                <p class="label">省市区：</p>
                <p v-text="getAddress()"></p>
              </div>
              <div class="txt">
                <p class="label">区域级别：</p>
                <p v-text="areaLevelMap[info.areaLevel] || ''"></p>
              </div>
              <div class="txt">
                <p class="label">年度截至时间：</p>
                <p v-text="info.yearEnd"></p>
              </div>
            </div>
            <div class="item">
              <div class="txt">
                <p class="label">城市档位：</p>
                <p v-text="cityLevelMap[info.cityLevel] || ''"></p>
              </div>
              <div class="txt">
                <p class="label">记录创建时间：</p>
                <p v-text="info.created"></p>
              </div>
            </div>
          </div>
        </div>
        <div class="sub_txt">
          <div class="main_txt">统计信息</div>
          <div class="info">
            <div class="item">
              <div class="txt">
                <p class="label">奖励金额：</p>
                <p v-text="info.amount"></p>
              </div>
              <div class="txt">
                <p class="label">超出金额：</p>
                <p v-text="info.overflowAmount"></p>
              </div>
              <div class="txt">
                <p class="label">超额奖励金额：</p>
                <p v-text="info.excessBonus"></p>
              </div>
            </div>
            <div class="item">
              <div class="txt">
                <p class="label">奖励依据金额：</p>
                <p v-text="info.rebateBasedAmount"></p>
              </div>
              <div class="txt">
                <p class="label">免考核金额：</p>
                <p v-text="info.noAssessmentAmount"></p>
              </div>
              <div class="txt">
                <p class="label">收益比例：</p>
                <p v-text="(+info.ratio || 0) * 100 + '%'"></p>
              </div>
            </div>
            <div class="item">
              <div class="txt">
                <p class="label">考核金额：</p>
                <p v-text="info.assessmentAmount"></p>
              </div>
              <div class="txt">
                <p class="label">统计金额：</p>
                <p v-text="info.sumAmount"></p>
              </div>
              <div class="txt">
                <p class="label">超额收益比例：</p>
                <p v-text="(+info.excessRatio || 0) * 100 + '%'"></p>
              </div>
            </div>
          </div>
        </div>
        <div class="sub_txt">
          <div class="main_txt">发放信息</div>
          <div class="info">
            <div class="item">
              <div class="txt">
                <p class="label">月份序号：</p>
                <p v-text="info.monthNum"></p>
              </div>
              <div class="txt">
                <p class="label">是否第一个月：</p>
                <p v-text="info.firstMonth === 1 ? '是' : '不是'"></p>
              </div>
              <div class="txt">
                <p class="label">起始时间：</p>
                <p v-text="info.begin"></p>
              </div>
              <div class="txt">
                <p class="label">是否满足发放条件：</p>
                <p v-text="info.released === 1 ? '是' : '否'"></p>
              </div>
            </div>
            <div class="item">
              <div class="txt">
                <p class="label">季度序号：</p>
                <p v-text="info.quarterNum"></p>
              </div>
              <div class="txt">
                <p class="label">是否为补发：</p>
                <p v-text="info.isMakeup === 1 ? '是' : '不是'"></p>
              </div>
              <div class="txt">
                <p class="label">截止时间：</p>
                <p v-text="info.end"></p>
              </div>
            </div>
            <div class="item">
              <div class="txt">
                <p class="label">年份序号：</p>
                <p v-text="info.yearNum"></p>
              </div>
              <div class="txt">
                <p class="label">免考核：</p>
                <p v-text="info.noAssessment === 1 ? '是' : '不是'"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../../components/common/header';
// let that;
export default {
  name: 'orderDetail',
  components: { Header },
  data() {
    return {
      title: {
        // 页面标题
        firstTitile: '资金管理',
        secondTitle: '区域达标收益详情'
      },
      info: {},
      periodLevelMap: {
      1: '月度',
      2: '季度',
      3: '年度'
      },
      areaLevelMap: {
        3: '市县级',
        4: '市级'
      },
      cityLevelMap: {
        10: '默认',
        1: '一档',
        2: '二挡'
      },
    };
  },
  filters: {},
  async created() {
    // that = this;
    this.getInfo();
    // this.getDictionary();
  },
  methods: {
    getInfo() {
      this.isLoading = true;
      this.httpGet(this.$root.getAreaAssessmentList, {
        id: +this.$route.query.id
      }).then(
        (res) => {
          this.info = (res.list && res.list[0]) ? res.list[0] : {};
          // this.skuList = res.skuList;
          this.isLoading = false;
        },
        () => {
          this.isLoading = false;
        }
      );
    },
    getDictionary(){
      this.getDictionaryByName('role');
    },
    getDictionaryByName(dataName){
      this.loading++;
      this.httpGet(this.$root.getDictionaryByName, {
        dataName
      }).then(
        (res) => {
          this.loading--;
          this[dataName] = res.list;
          let obj = {};
          res.list.forEach(item => {
            obj[item.value] = item.labelName;
          });
          this[dataName + 'Map'] = obj;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    getAddress() {
      return (
        this.info.provinceStr +
        this.info.cityStr +
        this.info.countyStr
      );
    },
    uidFormat(val) {
      if (!val) return '-';
      let str = val + '';
      let length = 6 - str.length;
      for (let i = 0; i < length; i++) {
        str = '0' + str;
      }
      return 'QY' + str;
    },
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.table-manage-box {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;
}

.container {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  flex-y(flex-start, flex-start);
  padding: 0 20px 20px;

  // content 表格
  .content {
    width: 100%;
    font-size: 14px;
    box-sizing: border-box;
    border-radius: 2px;
    flex-y(flex-start, flex-start);
    background: #f5f5f5;
  }
}

.screen {
  width: calc(100% - 30px);
  background: white;
  padding: 30px 15px;
  flex-x(flex-start);
  margin-top: 0 !important;
  margin-bottom: margin10;

  .el-input {
    width: 300px;
    margin: 0 margin10;
  }

  p {
    word(24px, btn-color);
  }
}

.el-table {
  width: calc(100% - 10px) !important;
  margin-top: 10px;
  border();
  font-size: 12px;

  img {
    width: 60px;
    height: 60px;
  }

  .el-icon-star-on {
    color: yellow;
  }
}

.footer {
  width: calc(100% - 30px);
  min-width: 600px;
  padding: 10px 0 0 15px;
  flex-x();

  .el-button {
    margin-left: 10px;
  }
}

.divider {
  background-color: bk;
  width: 100%;
  height: 2px;
  margin: 10px 0;
}

.vertical {
  flex-y();
}

.horizontal {
  flex-x(flex-start, flex-start);
}

.price-box{
  flex-y(flex-start, flex-end);
  padding-bottom: 30px;
  div{
    flex-x();
    margin-top: 20px;
    word(16px, #333);
  }
}

.order-detail {
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  min-height: 80px;
}

.sku {
  height: 45px;
  justify-content: space-around;
  min-width: 900px;
  border-bottom: solid 1px #dddddd;
}

.price {
  align-self: flex-end;
  // height: 30px;
  margin-right: 30px;
  margin-top: 10px;
}

.sub_txt {
  color: #666666;
  font-size: 14px;
  width: 100%;
  padding: 25px 15px 10px;
  background: white;
  margin-bottom: 10px;

  .info{
    flex-x(flex-start);
    .item:nth-of-type(1){
      margin-right: 100px;
    }
    .item:nth-of-type(2){
      margin-right: 100px;
    }
    .item{
      .label{
        width: 150px;
      }
    }
  }
}

.sub_txt1 {
  color: #666666;
  font-size: 14px;
  width: 1000px;
  padding-left: 60px;
}

.main_txt {
  color: #101010;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}

.color_red {
  color: btn-color;
}

.txt {
  flex-x();
  justify-content: flex-start;
  margin: 3px;
  line-height: 2;
  padding-left: 60px;
}

.btn-box {
    background: white;
    width: 100%;
    flex-x(center);
    height: 100px !important;
    flex-shrink: 0;
    // padding-bottom: 48px;

    .cancel-btn {
      width: 96px;
      height: 40px;
      cancel-btn();
      // border-radius: 23px;
    }

    .confirm-btn {
      width: 96px;
      height: 40px;
      margin-left: 20px;
      confirm-btn();
    }
  }
</style>