JiangningUrbanManageApp/sub-enterprise/food-lipei/food-lipei.vue

<template>
  <view class="container-main">
    <view class="list">
      <view
        class="list-item"
        v-for="(item, index) in list"
        :key="index"
        @click="getInfo()"
      >
        <view class="item-state" :class="'state' + item.state">
          {{ item.state == 0 ? "已赔付" : "" }}
          {{ item.state == 1 ? "处理中" : "" }}
          {{ item.state == 2 ? "已拒绝" : "" }}
        </view>
        <view class="item-data">
          <view class="data-main">
            <view class="data-title">{{ item.title }}</view>
            <view class="data-lable-value">
              <view class="row-item">
                <view class="item-lable">
                  <view class="lable-icon">
                    <image
                      :src="baseImgUrl + 'liao-ning/icon_shijian.png'"
                      mode=""
                    ></image>
                  </view>
                  <view class="lable-text">申请时间:</view>
                </view>
                <view class="item-value">{{ item.time }}</view>
              </view>
              <view class="row-item">
                <view class="item-lable">
                  <view class="lable-icon">
                    <image
                      :src="baseImgUrl + 'liao-ning/icon_faburen.png'"
                      mode=""
                    ></image>
                  </view>
                  <view class="lable-text">申请人:</view>
                </view>
                <view class="item-value">{{ item.userName }}</view>
              </view>
              <view class="row-item" v-if="item.state == 0">
                <view class="item-lable">
                  <view class="lable-icon">
                    <image
                      :src="baseImgUrl + 'liao-ning/icon_danwei.png'"
                      mode=""
                    ></image>
                  </view>
                  <view class="lable-text">理赔金额:</view>
                </view>
                <view
                  class="item-value"
                  style="color: #3976f1; font-weight: 520"
                  >{{ item.Units }}
                </view>
              </view>
            </view>
          </view>
          <!-- <view class="data-btn" v-if="item.state == 0" @click="goForm()">
						我要填写
					</view> -->
        </view>
      </view>
    </view>
    <u-divider bg-color="#F5F7FA" color="#C4CCD8" half-width="0"
      >已经到底啦~</u-divider
    >
    <fixedButton title="申请理赔" @click="clickSub" />
  </view>
</template>
<script>
import fixedButton from "@/components/fixedButton/fixedButton.vue";
export default {
  components: {
    fixedButton,
  },
  data() {
    return {
      baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
      list: [
        {
          title: "食物中毒",
          time: "2022-12-29",
          userName: "徐立峰",
          Units: "150,000元",
          state: 0,
        },
        {
          title: "食源性肠道疾病",
          time: "2022-12-29",
          userName: "姜家湖",
          Units: "150,000元",
          state: 1,
        },
        {
          title: "食源性肠道疾病",
          time: "2022-12-29",
          userName: "谢丽华",
          Units: "150,000元",
          state: 2,
        },
      ],
    };
  },
  methods: {
    getInfo() {
      uni.navigateTo({
        url: "/sub-public/lipei-info/lipei-info",
      });
    },
    goForm() {
      uni.navigateTo({
        url: "/sub-public/survey-form/survey-form",
      });
    },
    clickSub() {
      uni.navigateTo({
        url: "/sub-public/shenqing-lipei/shenqing-lipei",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
uni-page-body,
page {
  background: rgba(245, 247, 250, 1);
}

.list {
  padding: 30rpx 20rpx;

  .list-item {
    margin-bottom: 100rpx;
    position: relative;
  }

  .item-state {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 66rpx;
    line-height: 66rpx;
    box-sizing: border-box;
    padding-left: 30rpx;
    border-radius: 16rpx 16rpx 0 0;
    font-size: 28rpx;
    font-family: "PingFang SC-中黑体";
    font-weight: 500;
  }

  .state0 {
    background: linear-gradient(
      180deg,
      #bcd2ff 0%,
      rgba(206, 222, 255, 0) 100%
    );

    color: #3976f1;
  }

  .state1 {
    background: linear-gradient(
      180deg,
      #ffe7ac 0%,
      rgba(255, 231, 173, 0) 100%
    );

    color: #f5b923;
  }
  .state2 {
    background: linear-gradient(
      180deg,
      rgba(255, 168, 162, 0.4) 0%,
      rgba(247, 99, 89, 0) 100%
    );

    color: #f76359;
  }

  .item-data {
    position: relative;
    left: 0;
    top: 60rpx;
    z-index: 10;
    width: 100%;
    min-height: 100rpx;
    background: #fff;
    border-radius: 16rpx;

    .data-main {
      box-sizing: border-box;
      padding: 30rpx 37rpx;

      .data-title {
        font-size: 34rpx;
        font-weight: 600;
        color: #34373b;
        margin-bottom: 30rpx;
      }
    }

    .row-item {
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;

      .item-lable {
        display: flex;
        align-items: center;
        min-width: 170rpx;

        .lable-icon {
          height: 26rpx;
          width: 26rpx;

          image {
            height: 100%;
            width: 100%;
            display: block;
          }
        }

        .lable-text {
          margin-left: 10rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #9da2ab;
        }
      }

      .item-value {
        flex: 1;
        font-size: 28rpx;
        font-weight: 400;
        color: #34373b;
      }
    }

    .data-lable-value {
      & > view:last-child {
        margin: 0;
      }
    }
  }

  .data-btn {
    border-top: 1px solid rgba(220, 227, 236, 1);
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #3976f1;
  }
}
</style>