JiangNingUmale-h5/subEnterprise/threeGuarantees/index.vue

<template>
  <view class="app-container">
    <u-navbar
      leftText="返回"
      title="门前三包服务"
      :autoBack="true"
      :placeholder="true"
    >
      <view slot="right">
        <text class="nav-right">评级规则</text>
      </view>
    </u-navbar>
    <u-search
      height="75rpx"
      placeholder="搜索关键词"
      v-model="queryParams.sbLevelName"
      shape="square"
      :showAction="false"
      :clearabled="true"
      class="view-global"
      bgColor="#fff"
      @search="onSearch"
      @clear="onClear"
    ></u-search>
    <view
      class="list-item active view-global"
      v-for="(item, index) in levelList"
      :key="index"
    >
      <view>
        <image
          width="100%"
          src="/static/images/umale/sanbao.png"
          mode="scaleToFill"
        />
      </view>
      <view class="item-cell">
        <view class="cell-lable">店铺名称：</view>
        <view class="cell-value">{{ item.sbLevelName }}</view>
      </view>
      <view class="item-cell">
        <view class="cell-lable">三包等级：</view>
        <view class="cell-value">{{ item.relationRateRule }}</view>
      </view>
      <view class="item-cell">
        <view class="cell-lable">有效期：</view>
        <view class="cell-value">{{ item.createTime }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { listLevel } from "../../api/jn/level";

export default {
  data() {
    return {
      // 表单参数
      form: {},
      levelList: [],
      // 查询参数
      queryParams: {
        sbLevelName: null,
      },
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    onSearch() {
      this.getList();
    },
    onClear() {
      this.queryParams.sbLevelName = "";
      this.getList();
    },
    getList() {
      listLevel(this.queryParams).then((res) => {
        // console.log(res);
        this.levelList = res.rows;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        activeName: null,
        activeStart: null,
        activeEnd: null,
        activeContent: null,
        activePoint: null,
        joinRequire: null,
        activeState: null,
        createId: null,
        createBy: null,
        createTime: null,
        updateId: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        gridId: null,
        gridName: null,
        partId: null,
        partName: null,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .list-item {
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 25rpx;
    margin-bottom: 30rpx;
    margin-top: 30rpx;
    .item-cell {
      display: flex;
      align-items: center;

      .cell-lable {
        width: 200rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #9da2ab;
      }

      .cell-value {
        flex: 1;
        font-size: 28rpx;
        font-weight: 400;
        color: #2e2f31;
      }
    }

    .cell-btn {
      display: flex;
      flex-direction: row-reverse;
    }

    & > view:not(.cell-btn) {
      margin-bottom: 20rpx;
    }
  }

  & > .list-item:last-child {
    margin-bottom: 0;
  }
}
</style>