zhywpt-sp/subpackage/personal-center/install-activation-order.vue

<!-- 安装激活-选择订单 -->
<template>
	<empty-view :mode="config.emptyHint.mode" :content="config.emptyHint.hint" v-if="params.ordersList.length === 0" />
	<view class="list" v-else>
		<view class="item" v-for="(item,index) in params.ordersList" :key="index" :item="item">
			<view class="head">
				<view class="name">
					<image :src="`${$imgUrl}order/icon-star-green.png`" class="icon"></image>
					<text class="title">{{item.productName ?item.productName: ''}}</text>
				</view>
				<view class="status text-orange">{{getOrderStatusName(item.orderStep)}}</view>
			</view>
			<view class="detail">
				<view class="orders">
					<view class="order-text">
						<text class="type">新办单号：</text>
						<text class="value">{{item.orderId}}</text>
					</view>
					<view class="order-text odd">
						<text class="type">业务类型：</text>
						<text class="value">{{getOrderTypeName(item.orderType)}}</text>
					</view>
					<view class="order-text odd">
						<text class="type">订单车牌号：</text>
						<text class="value">{{item.vehiclePlate}}</text>
					</view>
					<view class="order-text ">
						<text class="type">订单金额：</text>
						<text class="value">￥ {{item.amount / 100 ?item.amount / 100: '0.00'}}</text>
					</view>
				</view>
			</view>
			<view class="btns">
				<view class="btn btn-primary as-gravity-center" @click="gotoActiveOrder(item)">去激活</view>
			</view>
		</view>

		<uni-load-more :status="params.status" iconType="snow" :icon-size="16" :content-text="config.contentTxt"
			v-if="params.ordersList.length > 0" />
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, watch } from "vue";
	import { request } from "@/utils/network/request.js";
	import { stringToJson } from "@/utils/network/encryption";
	import { onLoad, onUnload, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
	import { getItem, StorageKeys } from "@/utils/storage";
	import { hasLogin, msg, getOrderStatusName, getOrderTypeName } from "@/utils/utils";
	import { noActivationOrder } from "@/utils/network/api";
	import { PageData } from "@/datas/enum";
	import useOrderSkip from "@/composables/order/useOrderSkip";

	//跳转
	const { gotoActiveOrder } = useOrderSkip();

	const config = {
		emptyHint: {
			hint: '~ 暂无待激活订单 ~',
			icon: '',
			mode: 'order'
		},
		contentTxt: {
			contentdown: '~上拉加载更多~',
			contentrefresh: '努力加载中...',
			contentnomore: '-- 我是有底线的 --'
		}
	}

	//请求参数
	const params = reactive({
		pageNum: PageData.NUM,
		pageSize: PageData.SIZE,
		total: 0,
		status: 'more',
		reload: false,
		ordersList: [],
	})

	/* 刷新列表 */
	const refreshList = () => {
		params.pageNum = 1;
		params.total = 0;
		params.ordersList = [];
		params.status = 'more';
		params.reload = false;
		getList();
	}

	/* 加载更多 */
	const loadMore = () => {
		if (params.total > params.ordersList.length) {
			params.status = 'loading';
			params.pageNum++;
			getList();
		} else {
			params.status = 'noMore';
		}
	}

	/* 获取列表数据 */
	const getList = async () => {
		if (!hasLogin()) {
			uni.stopPullDownRefresh();
			return;
		}
		let source = ""
		// #ifdef MP-ALIPAY
		source = "ALI"
		// #endif
		// #ifdef MP-WEIXIN
		source = "WECHAT"
		// #endif
		let res : any = null;
		const options = {
			type: 2,
			data: {
				"opId": getItem(StorageKeys.OpenId),
			},
			method: 'POST',
			showLoading: params.pageNum === 1 ? true : false,
		}

		try {
			res = await request(noActivationOrder, options);
			const data = stringToJson(res.bizContent);
			params.total = data.data;
			console.log("res====", params.total)
			if (params.total.length > 0) {
				const curList = data.data || [];
				params.ordersList = params.reload ? curList : params.ordersList.concat(curList);
				params.reload = false;
			}

			if (params.total === params.ordersList.length) {
				params.reload = false;
				params.status = 'noMore';
			}

			if (params.pageNum === 1) {
				uni.stopPullDownRefresh();
			}
			console.log("params.ordersList", params.ordersList)
		} catch (e) {
			console.log('输出内容', e)
			uni.stopPullDownRefresh();
		}
	}

	onLoad(() => {
		//监听订单刷新信息
		uni.$on('refreshOrder', (data) => {
			refreshList();
		});

		refreshList();
	});

	onUnload(() => {
		uni.$off('refreshOrder');
	});

	onPullDownRefresh(() => {
		refreshList();
	});

	onReachBottom(() => {
		loadMore();
	});
</script>

<style>
	page {
		background-color: #EEF7F7;
	}
</style>
<style lang="scss" scoped>
	.list {
		padding: 30rpx 30rpx 0rpx;
		display: flex;
		flex-direction: column;
	}

	.list .item {
		background: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.list .item .head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 28rpx;
		border-bottom: 1px solid #dcdcdc;
	}

	.list .item .head .icon {
		width: 48rpx;
		height: 48rpx;
	}

	.list .item .head .name {
		display: flex;
		align-items: center;
	}

	.list .text-green {
		font-size: 26rpx;
		color: #00b38b;
	}

	.list .text-orange {
		font-size: 26rpx;
		color: #ff8000;
	}

	.list .title {
		font-size: 30rpx;
		color: #333;
	}

	.list .detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 32rpx;
	}

	.list .detail .type {
		font-size: 26rpx;
		color: #999;
	}

	.list .detail .value {
		font-size: 26rpx;
		color: #333;
	}

	.list .finished .detail .value {
		color: #999;
	}

	.list .detail .odd {
		margin: 20rpx 0;
	}

	.list .cny {
		font-size: 26rpx;
		color: #333;
	}

	.list .finished .cny {
		color: #999;
	}

	.list .amount {
		font-size: 40rpx;
		font-weight: bold;
	}

	.list .finished .amount {
		color: #999;
	}

	.list .btns {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 1px solid #dcdcdc;
		margin: 0 30rpx;
		padding: 20rpx 0;
	}

	.list .btn {
		height: 60rpx;
		// line-height: 60rpx;
		border-radius: 30rpx;
		padding: 0 24rpx;
		font-size: 26rpx;
		box-sizing: border-box;
		margin-right: 20rpx;
	}

	.list .btns .btn:last-child {
		margin: 0;
	}

	.list .btn-primary {
		border: 1px solid #00b38b;
		color: #00b38b;
	}

	.list .btn-normal {
		border: 1px solid #dcdcdc;
		color: #333;
	}
</style>