zhywpt-sp/subpackage/orders/product-detail.vue

<template>
	<navBar title="产品详情"></navBar>
	<navBgCar></navBgCar>
	<view class="content-wrap">
		<view class="value-wrapper">
			<view class="flex" v-for="(item,index) in state.dataArray">
				<view class="title"> {{item.payName}} </view>
				<view class="value">
					{{ "¥" + item.fee * 0.01 }}
				</view>
			</view>
			<view class="flex">
				<view class="title"> 运费 </view>
				<view class="value"> ¥0.00 </view>
			</view>
			<view class="flex">
				<view class="title"> 实付款 </view>
				<view class="money">
					{{ "¥" + state.allMoney }}
				</view>
			</view>

			<view class="as-layout-horizontal agreement">
				<checkbox-group @change="checkboxChange">
					<checkbox :checked="state.checked" style="transform: scale(0.8)" />我已阅读并同意
				</checkbox-group>
				<text v-for="(item,index) in state.agreeURL" style="color:#007AFF;text-decoration: underline;" @click="downAuthD(item)">《{{item.name}}》</text>
			</view>
		</view>

		<view class="action">
			<button type="default" class="button" @click="savaHandle()">
				{{ "确认办理:¥" + state.allMoney  }}
			</button>
		</view>

	</view>
</template>

<script setup lang="ts">
	import {
		onLoad,
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref
	} from "vue";
	import {
		getOpenidApi,
		getAgreementApi,
		PAYDETECTION,
		envs,
		agreementConfirmApi
	} from "@/utils/network/api.js";
	import {
		request
	} from "@/utils/network/request.js";

	import {
		stringToJson
	} from "@/utils/network/encryption";
	import navBgCar from "./components/nav-bg-car5";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import {
		msg
	} from "@/utils/utils";

	const savaHandle = () => {
		console.log("state.productId.length", state.productId.length,"111",state.typeScanCode)
		if (state.typeScanCode == 2) {
			console.log("233")
			// 扫码进来
			if (state.checked) {
				agreementConfirm().then((value) => {
					console.log("协议确认",value)
					msg("协议确认成功");
				})
			} else {
				msg("请勾选协议");
			}

		} else {
			console.log("state.checked", state.checked)
			if (state.checked) {
				agreementConfirm().then((value) => {
					console.log("协议确认",value)
					uni.navigateTo({
						url: `/subpackage/orders/order_payment?orderId=${state.orderId}&&clientFee=${state.clientFee}&&id=${state.id}&&isValueCard=${state.isValueCard}&vehicleId=${state.vehicleId}`,
					});
				})
				
			} else {
				msg("请勾选协议");
			}
		}

	};
	const downAuthD = (item) => {
		console.log('=======123',item)
		console.log("uni.env.USER_DATA_PATH '", uni.env.USER_DATA_PATH + '/' + '产品协议.docx')
		uni.downloadFile({
			url: item.url,
			filePath: uni.env.USER_DATA_PATH + '/' +item.name+ '.docx',
			success(res) {
				const filePath = res.filePath
				uni.openDocument({
					filePath: filePath,
					fileType: 'docx',
					showMenu: true, //关键点
					success: function (res) {
					},
					fail: function (err) {
						msg("打开文档失败");
					}
				});
			},
			fail: function (err) {
				msg("下载文档失败");
				console.log("err", err)
			},
			complete(res) {

			}
		})
	}
	//获取微信小程序openid
	const getOpenID = () => {
		uni.login({
			provider: "weixin",
			success: function (e) {
				getOpenid(e.code);
			},
		});
	};
	const getOpenid = (code) => {
		const options = {
			type: 2,
			data: {
				"jsCode": code
			},
			method: "POST",
			showLoading: true,
		};
		// #ifdef MP-WEIXIN
		request(getOpenidApi, options).then((res) => {
			const result = stringToJson(res.bizContent);
			console.log("获取微信小程序openid", result);
			const openidData = stringToJson(result.data);
			state.openid = openidData.openid;
		});
		// #endif
	}

	// 协议确认接口
	const agreementConfirm = () => {
		const options = {
			type: 2,
			data: {
				orderId: state.orderId,
				protocol: state.checked ? 1 : 0,
				agreements:state.agreements
			},
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await request(agreementConfirmApi, options);
			const data = stringToJson(res.bizContent);
			console.log("确认协议", data)
			
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	};
	onLoad((option : any) => {
		state.orderId = option.orderId;
		state.isValueCard = option.isValueCard;
		console.log("传递过来的参数", option)
		console.log("查协议", envs[process.env.NODE_ENV].baseUrl)
		state.id = option.id;
		state.vehicleId = option.vehicleId;
		getOpenID();
		refresh();
		if (option.typeScanCode) {
			state.typeScanCode = option.typeScanCode
			console.log("state.agreeURL", state.agreeURL)
		} 
		queryAgreement();
	});

	const state = reactive({
		openid: "",
		orderId: "",
		clientFee: undefined,
		id: "",
		options2: [{
			text: '删除',
			style: {
				backgroundColor: '#F56C6C'
			}
		}],
		list: [],
		productMoney: 0,
		allMoney: 0,
		productId: [],
		// 弹框
		type: 'center',
		msgType: 'success',
		messageText: '这是一条成功提示',
		value: '',
		detailsObj: '',
		isValueCard: "",
		dataArray: [],
		checked: false,
		agreeURL: [],
		typeScanCode: 0,//扫码进来得
		vehicleId:"",
		agreements:[]
	});
	// 查协议
	const queryAgreement = () => {
		const options = {
			type: 2,
			data: {
				orderId: state.orderId, //订单编号
				status:1
				
			},
			method: "POST",
			showLoading: true,
		};
		request(getAgreementApi, options).then((res) => {
			let data = stringToJson(res.bizContent);
			let supAgreeArr=data.data
			console.log("data==",supAgreeArr)
			for(var m=0;m<supAgreeArr.length;m++){
				let obj={}
				obj['name']=supAgreeArr[m]['name']
				for(var k=0;k<supAgreeArr[m]['address'].length;k++){
					state.agreements.push(supAgreeArr[m]['address'][k]['id'])
					obj['url']=envs[process.env.NODE_ENV].baseUrl+supAgreeArr[m]['address'][k]['url']
					state.agreeURL.push(obj)
				}
			}
			console.log("查协议", state.agreeURL)
		});
	}
	const checkboxChange = (e) => {
		state.checked = !state.checked;
		console.log(state.checked);
	};
	const refresh = () => {
		let source = ""
		// #ifdef MP-ALIPAY
		source = "ALI"
		// #endif
		// #ifdef MP-WEIXIN
		source = "WECHAT"
		// getOpenID();
		// #endif
		var data = {
			orderId: state.orderId,
			source: source   //请求方来源
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		console.log("输出内容", options);
		request(PAYDETECTION, options).then((res) => {
			// console.log(res.bizContent);
			const data = stringToJson(res.bizContent);
			console.log(data);
			// console.log(typeof(data));
			// if (data.paymentStatus == 'ALLSUCCESS') {
			// 	gotoEditUserOrUnitInfo()
			// }
			state.dataArray = data.datas;
			// HANDLE("办理费",1){},
			//     MARGIN("保证金",2){},
			//     PRESTORE("预存金",3){},
			//     EQUITY("权益费",4){},
			for (let i = 0; i < state.dataArray.length; i++) {
				if (state.dataArray[i].payType === 'HANDLE') {
					state.dataArray[i].payName = '权益金'
				} else if (state.dataArray[i].payType === 'MARGIN') {
					state.dataArray[i].payName = '保证金'
				} else if (state.dataArray[i].payType === 'PRESTORE') {
					state.dataArray[i].payName = '预存金'
				} else if (state.dataArray[i].payType === 'EQUITY') {
					state.dataArray[i].payName = '权益费'
				} else {
					state.dataArray[i].payName = '未知费'
				}
				// SUCCESS("支付成功",1){},
				//     PAYING("支付中",2){},
				//     FAILED("支付失败",3){},
				//     UNPAY("未支付",4){},
				//     CLOSED("已关闭",5){},
				//     CANCELED("已撤销",6){},
				//     REFUND("转入退费",7){},
				if (state.dataArray[i].payStatus === 'SUCCESS') {
					state.dataArray[i].payStatusName = '已支付'
				} else if (state.dataArray[i].payStatus === 'PAYING') {
					state.dataArray[i].payStatusName = '支付中'
				} else if (state.dataArray[i].payStatus === 'FAILED') {
					state.dataArray[i].payStatusName = '支付失败'
				} else if (state.dataArray[i].payStatus === 'UNPAY') {
					state.dataArray[i].payStatusName = '未支付'
				} else if (state.dataArray[i].payStatus === 'CLOSED') {
					state.dataArray[i].payStatusName = '已关闭'
				} else if (state.dataArray[i].payStatus === 'CANCELED') {
					state.dataArray[i].payStatusName = '已撤销'
				} else if (state.dataArray[i].payStatus === 'REFUND') {
					state.dataArray[i].payStatusName = '转入退费'
				} else {
					state.dataArray[i].payStatusName = '未知'
				}
				state.allMoney += state.dataArray[i]["fee"] * 0.01
			}
			console.log("state.dataArray", state.dataArray)
		});
	}
</script>

<style lang="scss" scoped>
	.action {
		margin-top: 40rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;

		.button {
			height: 80rpx;
			background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
		}
	}

	.value-wrapper {
		margin-top: 40rpx;
		padding: 0rpx 30rpx;

		.flex {
			padding: 20rpx 0rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #777777;
				line-height: 28rpx;
			}

			.value {
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				line-height: 28rpx;
			}

			.money {
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #00b38b;
				line-height: 36rpx;
			}
		}
	}

	.content-wrap {
		position: relative;
		margin-top: -50rpx;
		padding: 0rpx 30rpx;

		.ul-item {
			padding: 5px 20rpx;
			display: flex;
			align-items: center;

			.item-value {
				padding: 20rpx;
				position: absolute;
				display: flex;
				align-items: center;
				// justify-content: space-around;
				width: 80%;

				.content {
					width: 48%;

					.title {
						font-size: 32rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #ffffff;
					}

					.tip {
						font-size: 24rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}

			.icon-tip {
				width: 100rpx;
				height: 100rpx;
			}

			.content {
				margin-left: 40rpx;
			}
		}
	}

	.del_item {
		background-color: rgb(41, 199, 207) !important;
	}

	.content-box {
		background-color: rgb(41, 199, 207);
		line-height: 80rpx;
		color: white;
		font-size: 32rpx;
		border-radius: 10rpx 0 0 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	::v-deep.uni-swipe_button-text {
		font-size: 30rpx !important;
	}

	::v-deep.uni-swipe_button-group {
		font-size: 28rpx !important;
	}

	.add_all {
		width: 95%;
		margin: 0 auto;
	}

	.uni-swipe_box {
		margin-bottom: 16rpx !important;
	}

	::v-deep.uni-swipe {
		margin-bottom: 16rpx !important;
	}

	.imageDefault {
		height: 40rpx;
		width: 40rpx;
		transform: rotate(270deg);
		margin-right: 12rpx;
		color: white;
	}

	.imageChange {
		height: 40rpx;
		width: 40rpx;
		transform: rotate(90deg);
		margin-right: 12rpx;
		color: white;
	}

	.price {
		color: white;
	}

	.agreement {
		font-size: 30rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		align-items: center;
	}
</style>