massage-front/pages_order/mine/voucher.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>

    <template v-if="current == 0" >
      <view class="list voucher">
        <!-- todo: check only show status == 0? -->
        <voucherCard class="list-item"
          v-for="item in list"
          :key="item.id"
          :data="item"
        ></voucherCard>
      </view>
    </template>
    <template v-else-if="current == 1" >
      <view class="list store">
        <storeCard class="list-item"
          v-for="item in list"
          :key="item.id"
          :data="item"
        ></storeCard>
      </view>
    </template>
  </view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
  import voucherCard from '../components/voucher/voucherCard.vue'
  import storeCard from '../components/voucher/storeCard.vue'

  const TAB_AND_API_FIELDS_MAPPING = {
    0: 'queryVouchersList',
    1: 'queryVoucherShopList',
  }

  export default {
		mixins : [mixinsList],
    components: {
      voucherCard,
      storeCard,
    },
    data() {
      return {
        tabs: [{
          name: "代金券"
        }, {
          name: "可使用门店"
        }],
        current: 0,
        queryParams: {
          pageNo: 1,
          pageSize: 10,
          type: 1, // type：0-抵扣 1-代金券
        }
      };
    },
    computed: {
      mixinsListApi() {
        return TAB_AND_API_FIELDS_MAPPING[this.current]
      }
    },
    methods: {
      onTabChange(e) {
        this.current = e.index

        if (this.current === 0) { // 代金券
          this.queryParams = {
            pageNo: 1,
            pageSize: 10,
            type: 1, // type：0-抵扣 1-代金券
          }
        } else { // 可使用门店
          this.queryParams = {
            pageNo: 1,
            pageSize: 10,
          }
        }

        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;
		}
	}

  .list {
    &-item {
      display: block;
      
      & + & {
        margin-top: 20rpx;
      }
    }

    &.voucher {
      padding: 30rpx 28rpx;
    }

    &.store {
      padding: 29rpx 13rpx;
    }
  }
	
</style>