zhywpt-sp/subpackage/after-sale/add-equity/add-equity.vue

<template>
	<view class="content" v-if="state.list">
		<!-- <view class="item" v-for="(item,index) in state.list" :key='index'>
			<view class="title">
				<view>
					<text><text>{{item.productName}}</text>&nbsp;&nbsp;<text>¥{{item.discountPrice * 0.01}}</text></text>
				</view>
				<text class="add" @click="add(item.equtyId)">加购</text>
			</view>
		</view> -->
		<view v-for="(item, index) in state.list" :key="index" @click="onClick(item)" :data-code="item" class="item"
			style="justify-content: flex-start; display: flex; font-size: 28rpx; min-height: 20px; background-color: #22dbc8; color: white; border-radius: 20rpx; padding: 20px; margin: 20px;">
			<view style="display: flex; flex-direction: column; flex: 1;">
				<text>{{ item.productName }}</text>
			</view>
			<view>></view>
		</view>
		<view class="bottom-line" v-if="state.flags">我是有底线的~~~</view>
	</view>
	<view v-else>
		<empty title='暂无权益列表' />
	</view>
</template>

<script setup lang="ts">
	import empty from "@/components/empty/empty.vue";
	import { onLoad, onReachBottom } from "@dcloudio/uni-app";
	import { reactive } from "vue";
	import { equityProductsApi, addEquityListApi } from "@/utils/network/api.js";
	import { stringToJson } from "@/utils/network/encryption";
	import { request } from "@/utils/network/request";
	import { msg, navTo } from "@/utils/utils";
	import { getEquityListApi } from "@/utils/network/api";
	import {
		getItem,
		StorageKeys,
		setItem
	} from "@/utils/storage";

	const state = reactive({
		list: [],  //权益数据
		pageNo: 1,
		pageSize: 15,
		flags: false
	})

	onLoad((option : any) => {
		// 获取全部权益列表
		getList();

		console.log("option", option)
	})
	const getList = () => {
		const options = {
			type: 2,
			data: {
				"pageNo": state.pageNo,
				"pageSize": state.pageSize,
				'status': "ENABLE"  //可使用
			},
			method: 'POST',
			showLoading: true,
		}
		request(getEquityListApi, options).then((res) => {
			state.list = [...state.list, ...stringToJson(res.bizContent).data]
		})
	}
	const add = (equtyId) => {
		navTo(`/subpackage/after-sale/add-equity/choice-order?equtyId=${equtyId}`, true)
	}
	const onClick = (item) => {
		const params = encodeURIComponent(JSON.stringify(item))
		navTo(`/subpackage/after-sale/add-equity/add-equity-details?params=${params}`, true)
	}
	// 触底加载
	onReachBottom(() => {
		if (state.list.length < state.pageNo * 15) return state.flags = true
		console.log("触底了")
		state.pageNo++
		getList()
	})
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
	}

	.item {
		width: 90%;
		margin: 20rpx auto;
		background-color: rgb(41, 199, 207);
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		color: white;
		font-size: 32rpx;

	}

	.item>.title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.add {
		background: white;
		border-radius: 10rpx;
		padding: 6rpx 14rpx;
		color: #000;
		white-space: nowrap;
		display: inline-block;
		margin-left: 20rpx;
	}

	.bottom-line {
		text-align: center;
		margin: 30rpx 0 50rpx 0;
		font-size: 32rpx;
		padding-bottom: 10rpx;
	}
</style>