zhywpt-sp/issueActivation/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 ?? ''}}</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 ?? '0.00'}}</text>
					</view>
				</view>
			</view>
			<view class="btns">
				<!-- <view class="btn btn-primary as-gravity-center" @click="btnClick(item)">{{item.state === 1 ? '去激活' : '去开卡'}}</view> -->
				<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 { orderList } 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 res: any = null;
		  const options = {
		  	type:2,
		  	data:{
		  		"opId": getItem(StorageKeys.OpenId),
		  		"source":"WECHAT",
		  		"vehiclePlate":"",
		  		"tabIndex":'3', 
		  		"pageNo":params.pageNum,
		  		"pageSize":params.pageSize
		  	},
		  	method:'POST',
		  	showLoading: params.pageNum === 1 ? true : false,
		  }
		  
		 try{
		 	res = await request(orderList,options);
		 	const data = stringToJson(res.bizContent);
		 	params.total = data.totalCount;
		 	
		 	if(params.total > 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();
		 	}
		 }catch(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>