FenghuaDigitalDoorplatePhase1_ZheZhengDing/src/subPages/pages/commitment/enterpriseCommitment/index.vue

<script>
import NumberList from "@/subPages/pages/commitment/enterpriseCommitment/components/number-list/index.vue";
import {getEnterpriseDetail, getPromiseList} from "@/api/commitment";

export default {
  components: {NumberList},
  data() {
    return {
      loading: false,
      finished: false,
      page: 0,
      pageSize: 10,
      promiseList: [],
      enterpriseDetail: {}
    }
  },
  computed: {
    listData() {
      return this.promiseList.map((item) => {
        return {
          ...item,
          content: item.content ? JSON.parse(item.content) : {}
        }
      })
    }
  },
  mounted() {
    this.handleGetEnterpriseDetail()
    this.getPromiseList()
  },
  methods: {
    async getPromiseList() {
      this.loading = true;
      const res = await getPromiseList({
        companyId: 'e1',
        current: this.page + 1,
        size: this.pageSize
      })
      if (res.code === 0) {
        this.promiseList = this.promiseList.concat(res.data.records || [])
        this.page++;
        this.finished = res.data.records.length < this.pageSize
      }
      this.loading = false
    },
    /* 获取企业详情 */
    async handleGetEnterpriseDetail() {
      try {
        const res = await getEnterpriseDetail({
          companyId: 'e1'
        })
        if (res.code === 0) {
          this.enterpriseDetail = res.data
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}

</script>

<template>
  <view class="page">
    <view class="top">
      <view class="company">xxxxxxxx</view>
      <view class="code">组织机构代码: xxxxxxxx</view>
    </view>
    <view class="page-content">
      <NumberList :creditScore="100" :commitmentNum="100" :commitmentRemindNum="100"></NumberList>
      <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          style="min-height: 300px"
          @load="getPromiseList"
      >
        <van-cell class="promise-list-item" v-for="(item, index) in listData" :key="index">
          <template #default>
            <view class="item-top">
              <view class="left-title">{{ item.title }}</view>
              <view class="status">{{ item.status }}</view>
            </view>
            <view class="list-content">
              <view class="content-item" v-for="key in Object.keys(item.content)" :key="key">
                <view class="content-key">{{ key }}</view>
                <view class="content-value">{{ item.content[key] }}</view>
              </view>
              <view class="content-item">
                <view class="content-key">签署时间</view>
                <view class="content-value">{{ item.create_time | date }}</view>
              </view>
            </view>
          </template>
        </van-cell>
      </van-list>
    </view>

  </view>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #fff;
}

.top {
  background-image: url("@/static/images/commitment/company-bg.png");
  height: 143px;
  position: relative;
}

.company {
  font-size: 18px;
  color: #fff;
  position: absolute;
  top: 20px;
  left: 20px;
}

.code {
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 50px;
  left: 20px;
}

.page-content {
  position: relative;
  top: -45px;
  padding: 20px;

}

.number-list {

}

.promise-list {
}


.promise-list-item {
  margin-top: 20px;
  border-bottom: 1px solid #ebeef5;
  height: 120px
}

.item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 40px;
}

.left-title {
  font-size: 16px;
  font-weight: bold;
}

.status {
  font-size: 14px;
  color: #999;
}

.list-content {
  padding: 10px 20px;
}

.content-item {
  display: flex;
  margin-bottom: 10px;
}

.content-key {
  font-size: 14px;
  width: 60px;
  color: #999;
}

.content-value {
  font-size: 14px;
  margin-left: 10px;
}
</style>