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="gotoConfirmReceipt(item)"
					v-if="item.orderStep==9 && item.orderStatus=='0'">确认收货</view>
				<view class="btn btn-primary as-gravity-center" @click="gotoActiveOrder(item)"
					v-if="item.orderStep==10 && item.orderStatus=='0'">去激活</view>
				<view class="btn btn-primary as-gravity-center" @click="gotoOnceActivate(item)"
					v-if="item.orderStep==11 && item.orderStatus=='1'">OBU重新激活</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,setItem } from "@/utils/storage";
	import { hasLogin, msg, getOrderStatusName, getOrderTypeName, navTo } from "@/utils/utils";
	import { noActivationOrder,ndActivateVerification,silentLoginApi} from "@/utils/network/api";
	import { PageData } from "@/datas/enum";
	import useOrderSkip from "@/composables/order/useOrderSkip";

	//跳转
	const { gotoActiveOrder, gotoConfirmReceipt } = useOrderSkip();
	const gotoOnceActivate = (item) => {
		// #ifdef MP-WEIXIN
		navTo(
			`/subpackage/after-sale/activation-once-again/activation-once-again?id=${item.id}`
		);
		// #endif
		// #ifdef MP-ALIPAY
		navTo(
			`/subpackage/after-sale/activation-once-again/activation-once-again-ali?id=${item.id}`
		);
		// #endif
	}
	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: [],
		vehicleId:"",
		tel:"",
		qdOrderNo:""
	})

	/* 刷新列表 */
	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((option) => {
		// 诺德数据过来  验证+无感登录
		if(option.qdOrderNo){
			params.qdOrderNo=option.qdOrderNo
			params.tel=option.tel
			params.vehicleId=option.vehicleId
			ndActivateVerificationQuery().then((data) => {
				console.log("验证")
				silentLogin(data).then(() => {
					//监听订单刷新信息
					uni.$on('refreshOrder', (data) => {
						refreshList();
					});
					console.log("guoliale")
					refreshList();
				})
			})
		}else{
			//监听订单刷新信息
			uni.$on('refreshOrder', (data) => {
				refreshList();
			});
			console.log("guoliale")
			refreshList();
		}
	});
	// 诺德激活验证接口
const ndActivateVerificationQuery = () => {
		const options = {
			type: 2,
			data: {
				"code": "1",  //诺德
				"qdOrderNo": params.qdOrderNo, //渠道订单号
				"tel": params.tel,
				"vehicleId": params.vehicleId,
			},
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(ndActivateVerification, options);
			const data = stringToJson(res.bizContent);
			console.log("data==", data)
			resolve(data);
		}).catch((error) => {
			reject(error);
		});

	}
	const silentLogin = (data) => {
		if (data.userType == "1") {
			var datas = {
				userType: data.userType,
				account: data.mobile,
				loginSource: getItem("loginSource"),
			};
		} else {
			var datas = {
				userType: data.userType,
				account: data.userIdNum,
				loginSource: getItem("loginSource"),
			};
		}
		const options = {
			type: 2,
			data: datas,
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(silentLoginApi, options);
			const data = stringToJson(res.bizContent);
			setItem("openId", data.openId);
			setItem("token", data.accessToken);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	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>