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" @get="getConfigData"></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 u-m-r-20">{{ 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">{{ item.nickName }}</view>
						<view class="color-333 u-m-t-24 u-line-1">{{ item.phone }}</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>

		<my-marketing-mask name="消费返现" v-if="isMarketShow(configInfo)"></my-marketing-mask>
	</view>
</template>
<script setup>
import { onLoad, onReady, onShow, onPageScroll, onReachBottom, onBackPress } from '@dcloudio/uni-app';
import { isMainShop, isMarketShow } from '@/store/account.js';
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 configInfo = ref({});
function getConfigData(e) {
	configInfo.value = e;
}

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>