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 v-else>
		<view v-for="(item,index) in params.ordersList" :key="index" :item="item" class="item">
			<view class="head">
				<view class="name">
					<image :src="`${$imgUrl}order/icon-car.png`" class="icon" mode="aspectFit"></image>
					<text class="title">{{item.vehiclePlate ?item.vehiclePlate: ''}}</text>
				</view>
				<view v-if="item.promotionModes==1" class="xiao">小程序</view>
				<view v-else class="xianxia">线下网点</view>
			</view>
			<view class="content">
				<view class="picture">
					<view>
						<view style="padding-bottom: 10rpx;">
							<text>车牌颜色：</text>
							<text>{{getVehiclePlateColor(item.vehiclePlateColor)}}</text>
						</view>
						<view>
							<text>产品名称：</text>
							<text>{{item.productName ?item.productName: ''}}</text>
						</view>
					</view>
					<view>
						<view v-if="item.status==2">
							<image class="tupian" :src="`${$imgUrl}order/daishouhuo.png`" mode="aspectFill"></image>
						</view>
						<view
							v-else="item.status==1">
							<image class="tupian" :src="`${$imgUrl}order/dajihuo.png`" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view>
					<text class="type">新办订单号：</text>
					<text class="value">{{item.orderNo}}</text>
				</view>
				<view v-if="item.amount" class="all">合计：<text class="cny">￥</text><text class="amount"
						>{{item.amount / 100}}</text></view>
			</view>
			<view class="btns">
				<view class="btn btn-primary"@click="gotoConfirmReceipt(item)"
					v-if="item.status==2">确认收货</view>
				<view class="btn btn-primary"@click="gotoActiveOrder(item)"
					v-if="item.status==1">去激活</view>
					<view class="btn btn-primary"@click="gotoOnceActivate(item)"
						v-if="item.status==3">OBU重新激活</view>
			</view>
		</view>
	</view>
	<uni-load-more :status="params.status" iconType="snow" :icon-size="16" :content-text="config.contentTxt"
		v-if="params.ordersList.length > 0" />
</template>

<script setup lang="ts">
	import { reactive, ref, watch } from "vue";
	import { request, requestNew } 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,interceptND } from "@/utils/utils";
	import { queryActiveInfo,ndActivateVerification,silentLoginApi} from "@/utils/network/api";
	import useOrderSkip from "@/composables/order/useOrderSkip";
	import { deviceType } from "@/utils/network/difference";
    import { jump } from "@/datas/9901Jump.js";
	import {
		getVehiclePlateColor
	} from "@/datas/vehiclePlateColor";
	//跳转
	const { gotoActiveOrder, gotoConfirmReceipt } = useOrderSkip();
	const gotoOnceActivate = (item) => {
		if (item.deviceType == deviceType) {
			const params = encodeURIComponent(JSON.stringify(item))
			jump("1", params)
		} else {
			let vehicleId=item.vehiclePlate+"_"+item.vehiclePlateColor
					// #ifdef MP-WEIXIN
					navTo(
						`/subpackage/after-sale/activation-once-again/activation-once-again?vehicleId=${item.vehicleId}`
					);
					// #endif
					// #ifdef MP-ALIPAY
					navTo(
						`/subpackage/after-sale/activation-once-again/activation-once-again-ali?vehicleId=${item.vehicleId}`
					);
					// #endif
		}
		
		
	}
	const config = {
		emptyHint: {
			hint: '~ 暂无待激活订单 ~',
			icon: '',
			mode: 'order'
		},
		contentTxt: {
			contentdown: '~上拉加载更多~',
			contentrefresh: '努力加载中...',
			contentnomore: '-- 我是有底线的 --'
		}
	}

	//请求参数
	const params = reactive({
		pageNo: 1,
		pageSize: 10,
		total: 0,
		status: 'more',
		reload: false,
		ordersList: [],
		vehicleId:"",
		tel:"",
		qdOrderNo:""
	})

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

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

	/* 获取列表数据 */
	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.pageNo === 1 ? true : false,
		}

		try {
			res = await requestNew(queryActiveInfo, options);
			const data =res;
			console.log("data===",data)
			params.total = data.data;
			console.log("res====", params.total)
			if (data.activeList.length > 0 || data.receiveList.length > 0 || data.secondActiveList.length > 0) {
				// status 1 首次激活车辆信息列表  2确认收货车辆信息列表 3二次激活车辆信息列表
				var activeList=data.activeList
				var receiveList=data.receiveList
				var secondActiveList=data.secondActiveList
				if (data.activeList.length > 0){
					for(var i=0;i<activeList.length;i++){
						activeList[i]['status']=1
					}
				}
				if (data.receiveList.length > 0){
					for(var i=0;i<receiveList.length;i++){
						receiveList[i]['status']=2
					}
				}
				if (data.secondActiveList.length > 0){
					for(var i=0;i<secondActiveList.length;i++){
						secondActiveList[i]['status']=3
					}
				}
				const curList = [...activeList,...receiveList,...secondActiveList] || [];
				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.pageNo === 1) {
				uni.stopPullDownRefresh();
			}
			console.log("params.ordersList", params.ordersList)
		} catch (e) {
			console.log('输出内容', e)
			uni.stopPullDownRefresh();
		}
	}

	onLoad((option) => {
		console.log("诺德激活",option)
		// 诺德数据过来  验证+无感登录
		if(option.qdOrderNo){
			params.qdOrderNo=option.qdOrderNo
			params.tel=option.tel
			params.vehicleId=option.vehicleId
			ndActivateVerificationQuery().then((data) => {
				if(data.pass=='on'){
					console.log("验证")
					silentLogin(data).then(() => {
						//监听订单刷新信息
						uni.$on('refreshOrder', (data) => {
							refreshList();
						});
						console.log("guoliale")
						refreshList();
					})
				}else{
					msg("不属于该渠道")
				}
			})
		}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.idNum,
				loginSource: getItem("loginSource"),
			};
		}
		console.log("datas",datas)
		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);
			console.log("data===",data)
			setItem("openId", data.openId);
			setItem("token", data.accessToken);
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
	onUnload(() => {
		uni.$off('refreshOrder');
	});

	onPullDownRefresh(() => {
		refreshList();
	});
</script>

<style>
	page {
		background-color: #EEF7F7;
	}
</style>
<style lang="scss" scoped>
	.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: 30rpx 30rpx 0rpx;
	}
	.item .head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #dcdcdc;
		width: 95%;
		margin: 0 auto;
	}
	
	.item .head {
		.head-row {
			display: flex;
			width: 100%;
			justify-content: space-between;
			align-items: center;
		}
	
	
		.name>text {
			font-size: 26rpx;
			font-family: Noto Sans S Chinese;
			font-weight: 400;
			color: #999999;
			line-height: 36rpx;
			margin-left: 6rpx;
		}
	}
	
	.item .head .icon {
		width: 37rpx;
		height: 31rpx;
	}
	
	.item .head .name {
		display: flex;
		align-items: center;
	}
	.xiao {
		background: #42D175;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 6rpx;
	}
	
	.xianxia {
		background: #CCB375;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 6rpx;
	}
	.content {
		font-size: 26rpx;
		padding: 6rpx 20rpx;
	}
	.picture {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 10rpx 0;
	}
	
	.picture>view:first-child {
		width: 65%;
	}
	.tupian {
		width: 90rpx;
		height: 80rpx;
	}
	 .type {
		font-size: 26rpx;
		color: #999;
	}
	
	 .value {
		font-size: 26rpx;
		color: #333;
	}
	.all {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 10rpx;
	}
	.cny {
		font-size: 26rpx;
		color: #333;
	}
	
	.amount {
		font-size: 40rpx;
		font-weight: bold;
	}
	.btns {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		border-top: 1px solid #dcdcdc;
		margin: 0 30rpx;
		padding: 20rpx 0;
	}
	.btn {
		height: 60rpx;
		line-height: 58rpx;
		border-radius: 30rpx;
		padding: 0 24rpx;
		font-size: 23rpx;
		box-sizing: border-box;
	}
	.btn-primary {
		color: white;
		background-color: #133850;
	}
</style>