web-base-h5/components/distribution/monthPvDetail.vue

<template>
  <view class="main">
    <view class="search-content">
      <view class="search-list">
        <view v-for="item in dataList" class="search-view">
          <view class="flex_s">
            <view class="data-left">
              {{ '会员编号' }}
            </view>
            <view class="data-right">
              {{ item.memberCode }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '会员姓名' }}
            </view>
            <view class="data-right">
              {{ item.memberName }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '消费金额' }}
            </view>
            <view class="data-right">
              {{ item.orderAmount | numberToCurrency }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '消费业绩' }}
            </view>
            <view class="data-right">
              {{ item.orderAchieve | numberToCurrency }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '注册等级' }}
            </view>
            <view class="data-right">
              {{ item.pkRegisterGradeVal }}
            </view>
          </view>
          <view class="flex_s">
            <view class="data-left">
              {{ '创建时间' }}
            </view>
            <view class="data-right">
              {{ item.creationTime }}
            </view>
          </view>

          <view style="clear: both"></view>
          <view style="height: 20rpx; background-color: #fff"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as api from '@/config/distribute.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  data() {
    return {
      dataList: [],
      page: {
        pageNum: 1,
        pageSize: 50,
      },
    }
  },
  props: {
    placeDept: {
      type: String,
      default: '0',
    },
  },
  onLoad() {},
  created() {
    this.getDataList()
  },
  methods: {
    getDataList(num) {
      this.page.placeDept = this.placeDept
      this.page.pageNum = num || 1
      api
        .getAchieveDetails(this.page)
        .then(res => {
          this.dataList = res.rows
        })
        .catch(error => {
          reject(error)
        })
    },
  },
}
</script>
<style>
.border_s {
  border-bottom: 1rpx solid #eee;
  height: 10rpx;
}

.button {
  padding: 0 30rpx;
  /* width: 150rpx; */
  height: 52rpx;
  line-height: 52rpx;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  background: #005bac;
  margin: 30rpx 0 0 0;
  float: right;
  border-radius: 24rpx;
}

.type {
  color: #005bac !important;
}

.flex_s {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 15rpx;
}

.data-left {
  color: #999;
  font-size: 26rpx;
}

.data-right {
  color: #333;
  font-size: 26rpx;
}

.search-view {
  /* display: flex; */
  /* justify-content: space-between; */
  padding: 30rpx 20rpx 0 20rpx;
  border-bottom: 20rpx solid #eee;
  /* border-bottom: 1px solid #eee; */
  margin: 0;
}

.search-list {
  margin-bottom: 25rpx;
  background-color: #fff;
}

.search-content {
  margin-top: 25rpx;
}

.text_s {
  color: #333;
  font-size: 26rpx;
}

.search-icon-s {
  width: 22rpx;
  height: 22rpx;
}

.search-icons {
  width: 47rpx;
  height: 47rpx;
  background: #005bac;
  border-radius: 50%;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30rpx 20rpx 0 0;
}

.time1 {
  width: 158rpx;
  height: 75rpx;
  border-bottom: 1rpx solid #eee;
  margin: 0 50rpx 30rpx 50rpx;
  color: #999;
  text-align: center;
  font-size: 24rpx;
  /* margin-bottom: 30rpx; */
}

.time-text {
  color: #999;
  font-size: 26rpx;
}

.search-bottom {
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  margin-left: 20rpx;
}

.texts {
  color: #333;
  font-size: 26rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* width:200rpx; */
  text-align: right;
}

.select-text {
  display: flex;
  margin-right: 20rpx;
  font-size: 26rpx;
  color: #333;
  position: relative;
}

.selIcon {
  width: 20rpx;
  height: 20rpx;
  margin-top: 10rpx;
  margin-left: 5rpx;
}

.text-s {
  font-size: 26rpx;
  color: #999;
  margin-right: 10rpx;
}

.place {
  font-size: 26rpx;
  color: #999;
}

.border-colors {
  border: none;
  font-size: 26rpx;
  color: #333;
  margin-left: 30rpx;
}

page {
  background-color: #f2f2f2;
}

.search-icon {
  width: 25rpx;
  height: 25rpx;
  position: absolute;
  left: 30rpx;
  top: 12rpx;

  image {
  }
}

.search-bg {
}

.top {
  /* height: 200rpx; */
  background-color: #fff;
  padding: 20rpx 0 20rpx 0;
}

.search-tops {
  display: flex;
  justify-content: space-between;
  height: 65rpx;
  line-height: 65rpx;
  padding-bottom: 40rpx;
  border-bottom: 1px solid #eee;
}

.search-bg {
  width: 432rpx;
  height: 35rpx;
  background: #f5f6f8;
  border-radius: 33rpx;
  display: flex;
  position: relative;
  padding: 20rpx 50rpx;
  margin-left: 20rpx;
}
</style>