menber-center/pages/daiJiaoGeRenChaXunJieGuo/daiJiaoGeRenChaXunJieGuo.vue

<template>
	<view class="container">
		<view class="info-box">
			<view class="info-item-box flex">
				<view class="label">
					姓名
				</view>
				<view class="text">
					{{ info.username }}
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					证件号码
				</view>
				<view class="text">
					{{ info.idNumber }}
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					业务水平认证证书编号
				</view>
				<view class="text">
					{{ info.licenseNo ?? '无' }}
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					信用信息卡号
				</view>
				<view class="text">
					{{ info.creditNo ?? '无' }}
				</view>
			</view>
			<view class="info-item-box flex">
				<view class="label">
					缴费年份
				</view>
				<view class="text" @click="showYear = true">
					{{ info.year }}（可拉下选中缴费时间）
				</view>
			</view>
		</view>
		<u-select v-model="showYear" :list="yearList" @confirm="onYearConfirm"></u-select>
		<view class="info-box" style="background: none;">
			<view class="info-item-box row" style="height: auto;border-bottom: 0;">
				<view class="text" v-html="info.remark"></view>
			</view>
		</view>
		<view class="bottom-box-block">
		</view>
		<view class="bottom-box">
			<u-button type="error" shape="circle" @click="onSubmit">点击缴费</u-button>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { person, personPayment, getSubPersonCastAgree } from '@/api/cost.js'
	import { msgError, msgSuccess } from '@/utils/common'
	import { useAuthStore } from '@/store/authStore'
	const authStore = useAuthStore()
	
	const openid = ref('')
	
	const form = ref({
		name: '',
		idNumber: ''
	})
	
	const info = ref({
		userId: 1,
		username: 'xxxxxxxxxx', // 姓名
		idNumber: 'xxxxxxxxxx', // 证件号码
		phone: 'xxxxxxxxxx', // 手机号码
		licenseNo: 'xxxxxxxxxx', // 业务水平认证证书编号
		creditNo: 'xxxxxxxxxx', // 信用信息卡号
		year: '', // 缴交年份
		duePrice: 0.00, // 价格
		remark: ""
	})
	
	const showYear = ref(false)
	const yearList = ref([
		{
			value: '2025',
			label: '2025'
		}
	])
	function onYearConfirm(val) {
		info.value.year = val[0].value
	}
	
	function onSubmit() {
		const {giver, giverPhone} = info.value
		/**
		 * 20250915
		 * 1.代缴个人支付接口增加代缴用户姓名，代缴用户联系电话
		 * 2.目前对接正式数据，未作支付测试
		*/ 
		const form = {
			title: `${info.value.year}年度个人会费代缴`,
			year: info.value.year,
			amount: info.value.duePrice,
			desc: `${info.value.year}年度个人会费代缴`,
			userId: info.value.userId,
			openid: openid.value,
			giver,
			giverPhone
		}
		// console.log(form, "支付代缴个人")
		personPayment(form).then(res => {
			if (res && res.code === 0) {
				const params = res.data
				wx.requestPayment({
				  timeStamp: params.timeStamp,
				  nonceStr: params.nonceStr,
				  package: params.package,
				  signType: params.signType,
				  paySign: params.paySign,
				  success (res) {
						msgSuccess('支付成功')
						uni.navigateBack()
					},
				  fail (res) {
						const errMsg = res.errMsg
						if (errMsg.indexOf('fail cancel')) {
							msgError('已取消支付')
						}
					}
				})
			}
		})
	}
	function init(){
		getSubPersonCastAgree().then(res=>{
			if (res && res.code === 0) {
				// console.log("代缴个人会费缴交",res.data)
				info.value.remark = res.data.content
				// info.value.remark = `<p>
				//     描述：
				// </p>
				// <p>
				//     根据协会章程，个人会费200元/年/人，会员会籍为每年1月1日至12月31日。
				// </p>
				// <p>
				//     个人会员可享受以下会员服务：
				// </p>
				// <p>
				//     1、免费使用网络教育培训系统【系统已上线海量视频课程，77本电子书，涵盖：政策法规、职业素养、商务礼仪、客户服务、销售技能、市场营销、团队管理、办公软件等多个知识领域】
				// </p>
				// <p>
				//     2、优先或以会员价参加协会组织的公开培训课
				// </p>
				// <p>
				//     更多优惠请关注协会微信号【gzreavip】
				// </p>`
			}
		})
	}
	onLoad((load) => {
		yearList.value = []
		const year = new Date().getFullYear()
		const giver = load.giver
		const giverPhone = load.giverPhone
		openid.value = uni.getStorageSync('openid')
		
		for (let i = 0; i < 10; i++) {
			yearList.value.push({
				value: `${year - i}`,
				label: `${year - i}`
			})
		}
		
		form.value = {
			name: load.name,
			idNumber: load.idNumber,	
		}
		init()
		person(form.value).then(res => {
			if (res && res.code === 0) {
				info.value = res.data
				info.value.year = year
				info.value.userId = res.data.userId
				info.value.giver = giver
				info.value.giverPhone = giverPhone
			}
		})
	})
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		width: 100vw;
		background-color: $uni-bg-color;
		padding: 0 20rpx;
		.info-box {
			padding: 30rpx;
			background-color: $uni-bg-color-grey;
			border-radius: $uni-card-border-radius;
			.info-item-box {
				font-size: $uni-title-font-size-2;
				border-bottom: 1rpx solid #E6E6E6;
				height: 82rpx;
				.label {
					font-weight: bold;
				}
			}
			.flex {
				display: flex;
				align-items: center;
				.label {
					width: 40%;
				}
				.text {
					width: 60%;
				}
			}
			.row {
				.label {
					line-height: 62rpx;
				}
				.text {
					line-height: 180%;
					font-size: 28rpx;
					font-weight: bold;
				}
			}
		}
	
		.bottom-box-block{
			height: 150rpx;
		}
		.bottom-box {
			padding: 20rpx;
			position: fixed;
			bottom: 50rpx;
			width: 95%;
		}
	}
</style>