massage-front/pages_order/mine/verifyRecord.vue

<template>
  <view class="page">
		<navbar title="核销明细" leftClick @leftClick="$utils.navigateBack" color="#fff" />

		<view class="tabs">
			<uv-tabs 
				:list="tabs" 
				@click="onTabChange" 
				:customStyle="{
					backgroundColor: '#FFFFFF',
				}"
				:activeStyle="{
					color: '#84A73F',
					fontSize: '28rpx',
					whiteSpace: 'nowrap',
					paddingTop: '29rpx',
					paddingBottom: '21rpx',
				}"
				:inactiveStyle="{
					color: '#000000',
					fontSize: '28rpx',
					whiteSpace: 'nowrap',
					paddingTop: '29rpx',
					paddingBottom: '21rpx',
				}"
				lineHeight="5rpx" 
				lineWidth="92rpx" 
				lineColor="linear-gradient(to right, #84A73F, #D8FF8F)"
				:scrollable="false"
			></uv-tabs>
		</view>

    <view class="flex bar">
      <view class="left">
        <uv-datetime-picker 
          ref="datetimePicker" 
          v-model="queryParams.useTime" 
          mode="year-month" 
          confirmColor="#84A73F"
          @confirm="onTimeChange"
        ></uv-datetime-picker>
        <button plain class="flex btn" @click="openTimePicker">
          <text>{{ displaySelectedTime }}</text>
          <image class="btn-icon" src="../static/runningWater/icon-arrow.png" mode="widthFix"></image>
        </button>
      </view>
      <view class="right">
        <text>{{ `${displaySelectedMonth}总核销：` }}</text>
        <text class="highlight">{{ total }}</text>
      </view>
    </view>

    <template v-if="current == 0" >
      <view class="list order">
        <orderCard class="list-item"
          v-for="item in list"
          :key="item.id"
          :data="item"
          :readonly="true"
        ></orderCard>
      </view>
    </template>
    <template v-else-if="current == 1" >
      <view class="list voucher">
        <voucherCard class="list-item"
          v-for="item in list"
          :key="item.id"
          :data="item"
        ></voucherCard>
      </view>
    </template>
  </view>
</template>

<script>
  import dayjs from 'dayjs'

	import mixinsList from '@/mixins/list.js'
	import orderCard from '@/components/order/orderCard.vue'
  import voucherCard from '../components/verifyRecord/voucherCard.vue'

  const TAB_AND_API_FIELDS_MAPPING = {
    0: 'fetchOverOrder',
    1: 'fetchOverVoucher',
  }


  export default {
		mixins : [mixinsList],
    components: {
      orderCard,
      voucherCard,
    },
    data() {
      return {
        tabs: [{
          name: "核销商品"
        }, {
          name: "核销代金券"
        }],
        current: 0,
        queryParams: {
          pageNo: 1,
          pageSize: 10,
				  useTime: dayjs().format('YYYY-MM'),
        },
      };
    },
    computed: {
      mixinsListApi() {
        return TAB_AND_API_FIELDS_MAPPING[this.current]
      },
			displaySelectedTime() {
				return this.$dayjs(this.queryParams.useTime).format("YYYY年M月")
			},
      displaySelectedMonth() {
        return this.$dayjs(this.queryParams.useTime).format("M月")
      },
    },
    methods: {
      onTabChange(e) {
        this.current = e.index
        this.list = []
        this.total = 0
		    this.getData()
      },
      openTimePicker() {
        this.$refs.datetimePicker.open();
      },
      onTimeChange(e) {
        this.queryParams.useTime = this.$dayjs(e.value).format('YYYY-MM')
		    this.getData()
      },
    },
  }
</script>


<style scoped lang="scss">
	.page {
		background-color: $uni-bg-color;
		min-height: 100vh;
				
		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}
	}
	

	.tabs {

		/deep/ .uv-tabs__wrapper__nav__line {
			bottom: 0;
		}
	}

  .bar {
    padding: 0 58rpx 0 25rpx;
    margin-top: 32rpx;
    justify-content: space-between;

    .left {
      .btn {
        border: none;
        color: #000000;
        font-size: 28rpx;
        line-height: 40rpx;

        &-icon {
          width: 28rpx;
          height: auto;
          margin-left: 12rpx;
        }
      }
    }

    .right {
      color: #333333;
      font-size: 28rpx;

      .highlight {
        margin-left: 10rpx;
        color: $uni-color-light;
      }
    }
  }

  .list {
    margin-top: 26rpx;

    &-item {
      display: block;

      & + & {
        margin-top: 20rpx;
      }
    }

    &.order {
      padding: 0 17rpx;
    }

    &.voucher {
      padding: 0 13rpx;
    }
  }
	
</style>