cashier_app/pageMarket/consumeCashback/index.vue

<template>
	<view class="min-page">
		<up-sticky>
			<view class="bg-fff top">
				<my-tabs v-model="active" :list="tabs" textKey="label"></my-tabs>
				<view class="u-flex u-m-t-40" v-if="active == 1">
					<view class="u-flex color-333" @click="showShopSelActionSheetFun">
						<text class="u-line-1" style="max-width: 300rpx;">{{selShop.shopName || "全部门店"}}</text>
						<up-icon name="arrow-down-fill" size="12" color="#333"></up-icon>
					</view>
					<view class="u-flex-1 u-p-l-16">
						<up-search bgColor="#F9F9F9" height="60rpx" :showAction="false" placeholder="搜索订单号"
							@search="search" @clear="search" v-model="searchText"></up-search>
					</view>
				</view>
			</view>
		</up-sticky>
		<configVue v-if="active == 0"></configVue>
		<view class="list u-font-28" v-if="active == 1">
			<view class="u-m-t-32 item" v-for="item in list" :key="item.id">
				<view class="u-flex u-row-between">
					<view class="color-999 u-font-24">
						<view> 关联订单:{{ item.orderNo }} </view>
						<view class="u-m-t-14">
							<text class="color-333 font-bold"> {{ item.shopName }}</text>
							<text class="color-666 u-font-24">{{ item.createTime }}</text>
						</view>
					</view>
					<text class="color-999 u-font-24"> ID:{{ item.id }} </text>
				</view>
				<view class="u-m-t-22">
					<u-line></u-line>
				</view>
				<view class="color-333 u-flex u-row-between u-font-28" style="margin-top: 52rpx">
					<view>
						<view class="color-666">用户昵称</view>
						<view class="color-333 u-m-t-24 u-line-1">{{ item.nickName }}</view>
					</view>
					<view class="u-flex u-text-center">
						<view>
							<view class="color-666">返现金额</view>
							<view class="color-333 u-m-t-24">{{ item.cashbackAmount ||0 }}</view>
						</view>
						<view style="margin-left: 54rpx;">
							<view class="color-666">支付金额</view>
							<view class="color-333 u-m-t-24">{{ item.amount || 0 }}</view>
						</view>
					</view>
				</view>
				<view style="height: 32rpx;"></view>

			</view>
			<view class="u-p-30">
				<up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
			</view>
		</view>

		<!-- 选择门店 -->
		<shopSelActionSheetVue @choose="chooseShop" v-model="showShopSelActionSheet" title="选择门店">
		</shopSelActionSheetVue>
	</view>
</template>
<script setup>
	import {
		onLoad,
		onReady,
		onShow,
		onPageScroll,
		onReachBottom,
		onBackPress,
	} from "@dcloudio/uni-app";
	import {
		ref,
		onMounted,
		watch
	} from "vue";
	import * as consumeCashbackApi from "@/http/api/market/consumeCashback.js";
	import configVue from './components/config.vue'
	import shopSelActionSheetVue from '@/pageMarket/components/shop-sel-action-sheet.vue'
	const tabs = [{
			label: "基本设置",
			value: "basic"
		},
		{
			label: "返现明细",
			value: "recoders"
		},
	];

	const list = ref([]);
	const pageNum = ref(1);
	const isEnd = ref(false);
	const selShop = ref({
		shopId: "",
		shopName: "",
	})
	const searchText = ref("");

	function search() {
		pageNum.value = 1;
		getList();
	}

	function chooseShop(e) {
		selShop.value = e;
	}
	
	watch(()=>selShop.value.shopId,(newval)=>{
		pageNum.value = 1;
		getList();
	})

	async function getList() {
		const res = await consumeCashbackApi.getList({
			pageNum: pageNum.value,
			pageSize: 10,
			shopId: selShop.value.shopId,
			key: searchText.value,
		});
		if (res) {
			if (pageNum.value == 1) {
				list.value = res.records || [];
			} else {
				list.value = [...list.value, ...(res.records || [])];
			}
			isEnd.value = pageNum.value >= res.totalPage * 1 ? true : false;
			console.log(isEnd.value);
		}
	}

	// 显示选择门店弹窗
	const showShopSelActionSheet = ref(false);

	function showShopSelActionSheetFun() {
		showShopSelActionSheet.value = true;
	}
	const active = ref(0);
	watch(
		() => active.value,
		(newval) => {
			console.log(newval);
			pageNum.value = 1;
			getList();

		}
	);
	onReachBottom(() => {
		if (!isEnd.value) {
			pageNum.value++;
			getList();
		}
	});
	onShow(() => {
		pageNum.value = 1;
		getList();
	});
</script>
<style lang="scss" scoped>
	.min-page {
		background: #f7f7f7;
	}

	.box {}

	.top {
		padding: 32rpx 24rpx;
	}

	.list {
		padding: 0 30rpx;

		.item {
			padding: 32rpx 24rpx;
			border-radius: 14rpx;
			background-color: #fff;
			overflow: hidden;
		}
	}

	.tag {
		border-radius: 12rpx;
		padding: 8rpx 22rpx;
		font-size: 28rpx;

		&.success {
			background-color: #edfff0;
			color: #5bbc6d;
		}

		&.end {
			background-color: #f7f7f7;
			color: #999;
		}
	}

	.my-btn {
		font-size: 28rpx;
		line-height: 36rpx;
		padding: 8rpx 32rpx;
		border-radius: 12rpx;
		margin: 0;
	}

	.edit-btn {
		background: #e6f0ff;
		color: $my-main-color;
	}

	.delete-btn {
		background: #ffe7e6;
		color: #ff1c1c;
	}
</style>