min-shenze-applet-master/otherPages/mine/coupon/index.vue

<template>
	<!-- z-paging插件：具体使用文档请看https://z-paging.zxlee.cn/ -->
	<z-paging
		:auto="false"
		:loading-more-enabled="false"
		:refresher-enabled="false"
		auto-show-back-to-top
		back-to-top-bottom="300rpx"
		:paging-style="{ paddingBottom: 'constant(safe-area-inset-bottom)', paddingBottom: 'env(safe-area-inset-bottom)' }"
		ref="paging"
		v-model="dataList"
	>
		<view class="couponIdx o-ptb-20 o-plr-20">
			<view class="content l-flex-RC o-plr-20 l-boxShadow o-mb-20" v-for="(item, index) in dataList" :key="index">
				<view class="leftCon o-ptb-40 o-plr-40">
					<view class="couponColor">
						<text class="c-text-12">￥</text>
						<text class="c-text-20 c-text-b">{{ item.value }}</text>
					</view>
					<view class="couponColor">抵用券</view>
				</view>
				<view class="couponColor rightCon o-ptb-40 o-pl-40">{{ item.lastUseDate | date('yyyy-mm-dd hh:MM:ss') }} 到期</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
// 引入辅助函数
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			dataList: []
		};
	},
	computed: {
		// 使用辅助函数
		...mapGetters(['GETT_home_couponList'])
	},
	mounted() {
		// 首次进入需要调用方法加载
		this.$refs.paging.complete(this.GETT_home_couponList);
	}
};
</script>

<style lang="scss" scoped>
.couponIdx {
	.content {
		background-color: #fff5f4;
		.leftCon {
			border-right: 2px dashed #fff;
		}
		.couponColor {
			color: #ff9900;
		}
	}
}
</style>