<template>
	<view class="collect">
		<!-- header -->
		<cu-custom isBack bgColor="bg-gradual-blue"><view slot="content">收藏</view></cu-custom>
		<cu-scrollView @refresherpulling="refresherpulling" @scroll="scroll" :height="height">
			<view class="padding">
				<view @click="handler(item.commodity)" v-for="(item, index) in ListValue" :key="index" class="margin-bottom  bg-white padding flex align-center">
					<image lazy-load="true" style="width: 160upx;height: 160upx;min-width: 160upx;" :src="item.image | lazyImage" mode="aspectFit"></image>
					<view style="flex: auto;" class="margin-left">
						<view class="text-black text-bold">{{ item.name }}</view>
						<view class="flex margin-top-xs justify-between">
							<view class="text-price text-red">
								<cu-price :value="item.price" />
							</view>
							<view class="">{{ item.point_price }}积分</view>
						</view>
						<view style="display: inline-block;" class="bg-orange light padding-lr-xs">
							<text class="cuIcon-vip lg">会员价</text>
							<text class="text-price margin-left-xs">{{ item.vip_price }}</text>
						</view>
					</view>
				</view>
			</view>
		</cu-scrollView>
	</view>
</template>

<script>
import { CustomBarHeight } from '@/common/device/index.js';
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
	computed: {
		...mapState('requestList', ['ListValue', 'currentPage', 'totalPage']),
		height() {
			return `calc(100vh - ${CustomBarHeight}px)`;
		}
	},
	methods: {
		...mapActions('requestList', ['reset', 'requestFunc']),
		handler(id) {
			uni.navigateTo({
				url: `/pages/detail/index?id=${id}`
			});
		},
		async refresherpulling() {
			await this.reset();
			await this.requestFunc({ method: 'get', url: '/customer/collection/list/', data: { limit: 10 } });
		},
		async scroll() {
			await this.reset();
			await this.requestFunc({ method: 'get', url: '/customer/collection/list/', data: { limit: 10 } });
		}
	},
	async onShow() {
		await this.reset();
		await this.requestFunc({ method: 'get', url: '/customer/collection/list/', data: { limit: 10 } });
	}
};
</script>

<style></style>
