cosmetics_shop_wxapp/loginPages/pricepoint/index.vue

<template>
	<view class="pricepoint">
		<!-- header -->
		<cu-custom isBack custom bgColor="bg-gradual-blue"><view slot="content">{{title}}</view></cu-custom>
		<cu-scrollView @refresherpulling="refresherpulling" @scroll="scroll" :height="height">
			<view v-for="(item, index) in ListValue" :key="index" class="item padding">
				<view class="flex justify-between align-end">
					<view class="text-black text-bold text-lg">{{ item.type_text }}</view>
					<view class="text-grey"><cu-price :value="item.amount" size="32" /></view>
				</view>
				<view class="flex justify-between margin-top-xs align-end">
					<view class="text-grey">{{ item.happen_time }}</view>
					<view v-if="id == 1" class="text-yellow"><cu-price :value="item.balance" size="32" /></view>
					<view v-else class="text-price text-red"><cu-price :value="item.balance" size="32" /></view>
				</view>
			</view>
			<!-- 状态管理 -->
			<view class="cu-load" :class="{ loading: currentPage <= totalPage, over: currentPage > totalPage }"></view>
		</cu-scrollView>
	</view>
</template>

<script>
import { CustomBarHeight } from '@/common/device/index.js';
import { mapState, mapActions } from 'vuex';
export default {
	computed: {
		...mapState('requestList', ['ListValue', 'currentPage', 'totalPage']),
		height() {
			return `calc(100vh - ${CustomBarHeight}px)`;
		}
	},
	data() {
		return {
			id: 1,
			title: '积分',
			option: {}
		};
	},
	methods: {
		...mapActions('requestList', ['reset', 'requestFunc']),
		async refresherpulling() {
			await this.reset();
			await this.requestFunc(this.option);
		},
		async scroll() {
			await this.requestFunc(this.option);
		}
	},
	async onShow() {
		await this.reset();
		await this.requestFunc(this.option);
	},
	onLoad(option) {
		let { id = 1 } = option;
		this.id = id;
		if (id == 1) {
			this.title = '积分';
			this.option = {
				url: '/customer/rebate/point_log/',
				method: 'get',
				data: { limit: 50 }
			};
			return false;
		}
		if (id == 2) {
			this.title = '余额';
			this.option = {
				url: '/customer/rebate/cash_log/',
				method: 'get',
				data: { limit: 50 }
			};
			return false;
		}
	}
};
</script>

<style lang="scss" scoped>
	.pricepoint{
		.item{
			position: relative;
			&::after{
				content:"";
				width: 100%;
				position:absolute;
				left: 0;bottom: 0;
				border-bottom: 1rpx solid #ddd;
				transform: scale(1,0.5);
			}
		}
	}
</style>