zhywpt-sp/subpackage/orders/opening-account-people.vue

<template>
	<navBar title="ETC开户新办申请-个人" navbgClass="nav-bgXin" fontColor='#fff' :scrollTop="scrollTop"></navBar>
	<navBgCar :activeNum='3'></navBgCar>
	<view class="content-wrap">
		<view class="t-card">
			<view v-if="state.isMyPeopple" class="content">
				<view class="t-con">
					<view class="t-select">
						<view @click="tabChange(true)" class="item-select l-item" :class="{active:state.isMyPeopple}">
							本人车辆
						</view>
						<view @click="tabChange(false)" class="item-select r-item" v-if="state.isEnableOther"
							:class="{active:!state.isMyPeopple}">
							他人车辆
						</view>
					</view>
					<view class="item-tips">
						<view class="title"> 上传后请核对识别信息 </view>
						<view class="tip"> 如有错误请及时手动修改 </view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode('1','my')">
						<view class="bg">
							<view class="">
								<view class="name"> 人像面 </view>
								<view class="value"> 上传身份证的人像面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.userPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png)`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode('2','my')">
						<view class="bg">
							<view class="">
								<view class="name"> 国徽面 </view>
								<view class="value"> 上传身份证的国徽面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.userNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.userNegImgUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
				</view>
				<view class="shibie-wrapper">
					<view class="title"> 识别内容如下 </view>
					<u-form label-width="230" :model="state.form" ref="uForm" :label-style='labelStyle'>
						<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input v-model="state.form.userName" placeholder='请输入姓名' :disabled="state.isEnableOCRData"
								maxlength="20" @input="replaceInput" inputAlign="right"/>
						</u-form-item>
						<u-form-item label="身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input placeholder='请输入身份证' type="idcard" v-model="state.form.userIdNum"
								:disabled="state.isEnableOCRData" maxlength="18" inputAlign="right"/>
						</u-form-item>
						<u-form-item label="地址" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input placeholder='请输入地址' :autoHeight='true' v-model="state.form.userAddress"
								:disabled="state.isEnableOCRData" maxlength="50" inputAlign="right"/>
						</u-form-item>
						<u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input placeholder='请输入联系方式' type="number" v-model="state.form.tel" maxlength="11" inputAlign="right"/>
						</u-form-item>
					</u-form>
				</view>


				<view class="action">
					<view class="btn-tip">
						如识别信息有误，请手动修改，确认无误后，点击下一步！
					</view>
					<button type="default" class="ui-btn" @click="savaHandle()">
						下一步
					</button>
				</view>
			</view>
			<view v-else class="content">
				<view class="t-con">
					<view class="t-select">
						<view @click="tabChange(true)" class="item-select l-item" :class="{active:state.isMyPeopple}">
							本人车辆
						</view>
						<view @click="tabChange(false)" class="item-select r-item" v-if="state.isEnableOther"
							:class="{active:!state.isMyPeopple}">
							他人车辆
						</view>
					</view>
					<view class="title"> 车主信息 </view>
					<view class="item-tips">
						<view class="title"> 上传后请核对识别信息 </view>
						<view class="tip"> 如有错误请及时手动修改 </view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode('1','my')">
						<view class="bg">
							<view class="">
								<view class="name"> 人像面 </view>
								<view class="value"> 上传身份证的人像面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.userPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.userPosImgUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode('2','my')">
						<view class="bg">
							<view class="">
								<view class="name"> 国徽面 </view>
								<view class="value"> 上传身份证的国徽面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.userNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.userNegImgUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
				</view>

				<view class="shibie-wrapper">
					<view class="title"> 识别内容如下 </view>
					<u-form label-width="200" :model="state.form" ref="uForm" :label-style='labelStyle'>
						<u-form-item label="姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input inputAlign="right" placeholder='请输入姓名' v-model="state.form.userName"
								:disabled="state.isEnableOCRData" maxlength="20" />
						</u-form-item>
						<u-form-item label="身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.userIdNum"
								:disabled="state.isEnableOCRData" type="idcard" maxlength="18" />
						</u-form-item>
						<u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.tel" maxlength="11" type="number" />
						</u-form-item>
						<u-form-item label="地址" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input placeholder='请输入地址' inputAlign="right" :autoHeight='true' v-model="state.form.userAddress"
								:disabled="state.isEnableOCRData" maxlength="50" />
						</u-form-item>
					</u-form>
				</view>
				<view class="card-box">

					<view class="title"> 代办人信息 </view>
					<view class="item-tips">
						<view class="title">上传后请核对识别信息</view>
						<view class="tip">如有错误请及时手动修改</view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode('1','other')">
						<view class="bg">
							<view class="">
								<view class="name"> 人像面 </view>
								<view class="value"> 上传身份证的人像面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.agentPosImgUrl" class="icon" :src="`${$imgUrl}issuance/sfz.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.agentPosImgUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<view class="picture-wrapper" @click="takePhotoMode('2','other')">
						<view class="bg">
							<view class="">
								<view class="name"> 国徽面 </view>
								<view class="value"> 上传身份证的国徽面 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
							</view>
							<image v-if="!state.form.agentNegImgUrl" class="icon" :src="`${$imgUrl}issuance/sff.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.agentNegImgUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
					<view class="picture-wrapper" @click="cardFileImageUpdate()" v-if='state.isEnableBook'>
						<view class="bg">
							<view class="">
								<view class="name"> 委托书 </view>
								<view class="value"> 上传文字清晰的委托书 </view>
								<view class="tip">
									<view class="tip-value"> 拍摄规范 </view>
								</view>
								<view class="down" @click="downAuthD">模板下载</view>
							</view>
							<image v-if="!state.form.proxyUrl" class="icon" :src="`${$imgUrl}issuance/weituo.png`"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}">
							</image>
							<image v-else class="icon" :src="strReplace(state.form.proxyUrl)"
								:style="{'--bgimg':`url(${$imgUrl}issuance/bg-border.png`}"></image>
						</view>
					</view>
				</view>
				<view class="shibie-wrapper">
					<view class="title"> 识别内容如下 </view>
					<u-form label-width="200" :model="state.form" ref="uForm">
						<u-form-item label="经办人姓名" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input inputAlign="right" placeholder='请输入经办人姓名' v-model="state.form.agentName"
								:disabled="state.isEnableOCRData" maxlength="20" />
						</u-form-item>
						<u-form-item label="身份证号" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input inputAlign="right" placeholder='请输入身份证号' v-model="state.form.agentIdNum"
								:disabled="state.isEnableOCRData" maxlength="18" type="idcard" />
						</u-form-item>
						<u-form-item label="联系方式" :left-icon='`${$imgUrl}issuance/point-form.png`' :left-icon-style='leftIcon'>
							<u-input inputAlign="right" placeholder='请输入联系方式' v-model="state.form.agentTel" type="number"
								maxlength="11" />
						</u-form-item>
					</u-form>
				</view>
				<view class="action">
					<view class="btn-tip">
						如识别信息有误，请手动修改，确认无误后，点击下一步！
					</view>
					<button type="default" class="ui-btn" @click="savaHandle()">
						下一步
					</button>
				</view>
			</view>
		</view>
	</view>

	<u-select mode="single-column" :list="state.genderList" v-model="state.genderShow" @confirm="genderSelectConfirm">
	</u-select>
		<uploadImg :isTakePhotoModeShow="state.isTakePhotoModeShow" :phoneType="state.choiceIndex" @close="close" @ocrResult="ocrResult">
		</uploadImg>
</template>

<script setup lang="ts">
	import uploadImg from '@/components/uploadOcr';
	import navBgCar from "./components/nav-bg-car1";
	import {
		reactive,
		ref,
	} from "vue";
	import {
		msg,
		checkStr,
		strReplace,
		uploadFile,
		hasLogin,
		compressImage,
		chooseImageCompress,
		compareDates
	} from "@/utils/utils";
	import {
		onLoad,
		onPageScroll,
	} from "@dcloudio/uni-app";
	import {
		getUserMsg,
		userUpload, registerFull
	} from "@/utils/network/api.js";

	import {requestNew} from "@/utils/network/request.js";

	import {navTo } from "@/utils/utils";
	import {
		setItem,
		getItem,
	} from "@/utils/storage";
	import {
		getCodeName
	} from "@/datas/queryKey.js";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const leftIcon = {
		height: '100%',
		width: '8rpx',
		display: 'flex',
		'align-items': 'center',
		'margin-right': '4rpx',
	}
	const scrollTop = ref(0)
	const state = reactive({
		showImg: true,
		isMy: "",//自己办理  他人办理
		phoneType: 0,  // 1 身份证正面  2 身份证反面  3行驶证正面 4行驶证反面
		choiceIndex: 1,  // 1 身份证正面  2 身份证反面
		isTakePhotoModeShow: false,  //选择拍照方式是否出来
		images: '',
		genderList: [{
			value: '男',
			label: '男'
		},
		{
			value: '女',
			label: '女'
		}
		],
		form: {
			orderId: "", //订单ID
			userName: "", //开户人姓名
			userIdType: "101", //用户证件类型 101//身份证
			userIdNum: "", //用户证件号码
			userPosImgUrl: "", //身份证正面
			userNegImgUrl: "", //身份证反面
			tel: "", //开户人手机号
			userAddress: "", //开户人地址
			sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
			channelId: "", //渠道id
			gender: "",
			customerIdVld: "", //用户证件有效期
			agentName: "",
			agentGender: "",
			agentTel: '',
			agentPhone: "",
			agentIdType: "101",
			agentIdNum: "",
			agentPosImgUrl: "",
			agentNegImgUrl: "",
			proxyUrl: "",
			agentAddress: "",
			agentIdVld: '',
			opId: '',
			orderSource: 'WECHAT',
			isAgent: false
		},

		genderShow: false,
		orderId: "",
		vehiclePlateColor: undefined,
		isMyPeopple: true,
		isSign: '',
		vanType: 1,
		isEnableOther: true,  //小程序是否支持他人办理
		isEnableBook: true,  //他人办理时是否上传委托书
		isEnableInfo: true,  //小程序信息带出
		isEnableOCRData: true,  //允许修改OCR识别出来的数据
		vehicleId: "",
		jsCode: ""
	});
	const userGenderAction = () => {
		state.genderShow = true;
	};
const close=(e)=>{
	console.log("e",e)
	state.isTakePhotoModeShow=e
}
	const genderSelectConfirm = (e) => {
		state.form.gender = ''
		e.map((val, index) => {
			state.form.gender = val.label;
		})
	};

	const camera = () => {
		state.phoneType = 0
	}

	const savaHandle = () => {

		if (!state.form.userName) {
			msg('请输入姓名');
			return;
		}
		if (!state.form.userPosImgUrl) {
			msg('请上传身份证的人像面');
			return;
		}
		if (!state.form.userNegImgUrl) {
			msg('请上传身份证的国徽面');
			return;
		}
		if (!checkStr(state.form.userIdNum, 'card')) {
			msg('请输入正确身份证号');
			return;
		}
		if (!checkStr(state.form.tel, 'mobile')) {
			msg('请输入正确的手机号');
			return;
		}

		// 都要无感注册
		// 没登录就存token  登录了就正常走

		registerRequest().then((result : any) => {
			console.log("result==", result)
			if (!getItem('openId')) {
				setItem('token', result.accessToken)
				setItem('openId', result.openId)
				setItem('mobile', state.form.tel)
				state.form.opId = getItem('openId') ? getItem('openId') : '';
			}
			console.log("正常走  ")
			// 已经登录		
			let data = state.form;
			console.log("data==", data)
			const options = {
				type: 2,
				data: data,
				method: "POST",
				showLoading: true,
			};
			requestNew(userUpload, options).then((res) => {
				console.log(res);
				navTo(
					`/subpackage/orders/car-release?orderId=${state.orderId}&vehiclePlateColor=${state.vehiclePlateColor}&vanType=${state.vanType}&isSign=${state.isSign}&vehicleId=${state.vehicleId}`,
				);
			});
		})

	};
	const cardFileImageUpdate = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function (res) {
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					state.form.proxyUrl = data;
				})
			},
		});
	};

	//tab切换
	const tabChange = (val : any) => {
		state.isTakePhotoModeShow = false
		if (val) {
			state.isMyPeopple = true;
			state.form.isAgent = false
		} else {
			state.isMyPeopple = false;
			state.form.isAgent = true
		}
		state.form = {
			orderId: state.orderId, //订单ID
			userName: "", //开户人姓名
			userIdType: "101", //用户证件类型 101//身份证
			userIdNum: "", //用户证件号码
			userPosImgUrl: "", //身份证正面
			userNegImgUrl: "", //身份证反面
			tel: "", //开户人手机号
			userAddress: "", //开户人地址
			sceneType: "", //用户协议支撑服务场景（发行服务机构和用户签订的协议）
			channelId: "", //渠道id
			gender: "",
			customerIdVld: "",
			agentName: "",
			agentGender: "",
			agentTel: '',
			agentPhone: "",
			agentIdType: "101",
			agentIdNum: "",
			agentPosImgUrl: "",
			agentNegImgUrl: "",
			proxyUrl: "",
			agentAddress: "",
			agentIdVld: '',
			orderSource: 'WECHAT',
			isAgent: false
		};
	};
	onLoad((option : any) => {
		state.form.orderId = option.orderId;
		state.orderId = option.orderId;
		state.vehiclePlateColor = option.vehiclePlateColor;
		state.form.opId = getItem('openId') ? getItem('openId') : '';
		state.isSign = option.isSign;
		state.vanType = option.vanType;
		state.vehicleId = option.vehicleId;
		getGlobalParam(); //全局配置数据
		console.log("option", option)
		uni.login({
			provider: "weixin",
			success: function (e) {
				console.log("jsCode", e.code)
				state.jsCode = e.code

			},
		});
	});

	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	const replaceInput = (event) => {
		console.log("event", event)
		const screeningStr = /[^\u4E00-\u9FA5]/g;      //想禁止什么类型，在这里替换正则就可以了
		if (screeningStr.test(event)) {
			setTimeout(() => {
				state.form.userName = event.replace(screeningStr, '');
			}, 100)
		} else {
			setTimeout(() => {
				state.form.userName = event;
			}, 100)
		}
		console.log("event.replace(screeningStr, '')", event.replace(screeningStr, ''), event, state.form.userName)
	}

	const getGlobalParam = () => {
		const data = getItem('globalParam')
		console.log("全局配置数据", getCodeName('IS_ENABLE', data.miniSupportOther), getCodeName('IS_ENABLE', data.otherUploadProxy), getCodeName('IS_ENABLE', data.miniInfoShow), getCodeName('IS_ENABLE', data.changeOCRData))
		// 小程序是否支持他人办理
		if (getCodeName('IS_ENABLE', data.miniSupportOther) == '启用') {
			state.isEnableOther = true;
		} else {
			state.isEnableOther = false;
		}
		// 他人办理时是否上传委托书
		if (getCodeName('IS_ENABLE', data.otherUploadProxy) == '启用') {
			state.isEnableBook = true;
		} else {
			state.isEnableBook = false;
		}
		// 小程序信息带出  登录情况下才需要带出用户信息
		if (hasLogin()) {
			if (getCodeName('IS_ENABLE', data.miniInfoShow) == '启用') {
				state.isEnableInfo = true;
				uni.showModal({
					// title: '提示',
					content: '是否允许带出用户信息',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							queryUserMsg()  //通过opneId查询用户信息
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else {
				state.isEnableInfo = false;
			}
		}

		// 允许修改OCR识别出来的数据
		if (getCodeName('IS_ENABLE', data.changeOCRData) == '启用') {
			state.isEnableOCRData = false;
		} else {
			state.isEnableOCRData = true;
		}

	}
	// 通过opneId查询用户信息
	const queryUserMsg = () => {
		const options = {
			type: 2,
			data: {
				"openId": getItem('openId')
			},
			method: "POST",
			showLoading: true,
		};
		requestNew(getUserMsg, options).then((res) => {
			console.log("通过opneId查询用户信息", res)
			const data = res;
			state.form.userPosImgUrl = data.customerPosImgUrl;
			state.form.userNegImgUrl = data.customerNegImgUrl;
			state.form.userName = data.customerName;
			state.form.userIdNum = data.customerIdNum;
			state.form.userAddress = data.customerAddress;
			state.form.tel = data.customerTel;
		})
	}
	const takePhotoMode = (index, isMy) => {
		console.log("index", index, isMy)
		state.isTakePhotoModeShow = true
		state.choiceIndex = index
		state.isMy = isMy
	}
	
	const ocrResult = (data) => {
		console.log("图片地址val", data)
			if (state.isMy == "my") {
				if (state.choiceIndex == 1) {
					state.form.userName = data.name;
					state.form.gender = data.gender;
					state.form.userIdNum = data.idno;
					state.form.userPosImgUrl = data.imageUrl;
					state.form.userAddress = data.address;
				} else {
					state.form.customerIdVld = data.enddate;
					state.form.userNegImgUrl = data.imageUrl;
					compareDates(data.enddate)
				}
			} else {
				if (state.choiceIndex == 1) {
					state.form.agentName = data.name;
					state.form.agentGender = data.gender;
					state.form.agentIdNum = data.idno;
					state.form.agentPosImgUrl = data.imageUrl;
					state.form.agentAddress = data.address;
				} else {
					console.log("state.isMy", state.isMy, state.choiceIndex, state.choiceIndex == 1, data)
					state.form.agentIdVld = data.enddate;
					state.form.agentNegImgUrl = data.imageUrl;
					compareDates(data.enddate)
				}
			}
	}
	const downAuthD = () => {
		uni.downloadFile({
			url: "https://qtzl.etcjz.cn/default-bucket/20240311/个人委托书.docx",
			filePath: uni.env.USER_DATA_PATH + '/' + '个人委托书.docx',
			success(res) {
				const filePath = res.filePath
				uni.openDocument({
					filePath: filePath,
					fileType: 'docx',
					showMenu: true, //关键点
					success: function (res) {
						// msg("成功查看协议详情");
					},
					fail: function (err) {
						msg("打开文档失败");
					}
				});
			},
			fail: function (err) {
				msg("下载文档失败");
				console.log("err", err)
			},
			complete(res) {

			}
		})
	}
	// 无感注册
	const registerRequest = () => {
		let data = {
			userType: "PERSONAL",
			idNum: state.form.userIdNum,
			idType: state.form.userIdType,
			mobile: state.form.tel,
			userName: state.form.userName,
			gender: state.form.gender == '男' ? 'MALE' : 'FEMALE',
			certifyChannel: "BAIDUOCR",
			address: state.form.userAddress,
			agentIdNum: state.form.agentIdNum,
			agentIdType: state.form.agentIdType,
			agentName: state.form.agentName,
			department: "",
			userIdImgUrl: state.form.userPosImgUrl,
			userIdImgBase64: "",
			jsCode: state.jsCode
		}

		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		return new Promise(async (resolve, reject) => {
			const res = await requestNew(registerFull, options);
			const data = res;
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 35rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #01243A;
		line-height: 35rpx;
		margin-bottom: 20rpx;
	}

	.content-wrap {
		position: absolute;
		top: 370rpx;
		width: 100%;
		min-height: calc(100% - 370rpx);
		box-sizing: border-box;
		padding: 0 30rpx 210rpx;


		.t-con {
			width: 100%;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 40rpx 30rpx 30rpx;
			box-sizing: border-box;
		}

		.t-select {
			display: flex;
			padding-bottom: 30rpx;
			justify-content: center;
			align-items: center;

			.item-select {
				width: 200rpx;
				height: 68rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #CCB375;
				text-align: center;
				line-height: 68rpx;
				border: 1rpx solid #CCB375;

				&.l-item {
					border-radius: 34rpx 0 0 34rpx;
				}

				&.r-item {
					border-radius: 0 34rpx 34rpx 0;
				}

				&.active {
					color: #fff;
					background: #CCB375;
				}
			}
		}

		.big {
			font-size: 30rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #333333;
			line-height: 24rpx;
		}

		.nomal {
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			line-height: 24rpx;
		}


	}

	.content {

		.action {
			position: absolute;
			bottom: 0rpx;
			left: 0;
			height: 188rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.btn-tip {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #CCB375;
				margin-bottom: 14rpx;
			}

			.button {
				height: 88rpx;
				background: radial-gradient(at 0% 0%, #01243A 0%, #004576 100%);
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #ffffff;
				line-height: 88rpx;
				width: 660rpx;
				margin: 0 auto;
			}
		}

		.item-tips {
			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 500;
				color: #01243A;
				line-height: 30rpx;
			}

			.tip {
				margin-top: 16rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
		}

		.picture-wrapper {
			margin-top: 30rpx;

			.bg {
				background: #F5F9FB;
				border-radius: 10rpx;
				padding: 40rpx 30rpx;
				display: flex;
				// align-items: center;
				justify-content: space-between;

				.name {
					padding-top: 30rpx;
					font-size: 32rpx;
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					color: #111;
					line-height: 34rpx;
				}

				.value {
					margin-top: 20rpx;
					font-size: 22rpx;
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 400;
					color: #999999;
					line-height: 24rpx;
				}

				.tip {
					margin-top: 20rpx;
					text-align: center;
					width: 100rpx;
					height: 30rpx;
					// background: rgba(204, 179, 117);
					border-radius: 6rpx;
					border: 1rpx solid #CCB375;

					.tip-value {
						font-size: 20rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #CCB375;
						line-height: 30rpx;
						opacity: 1;
					}
				}
			}

			.icon {
				width: 304rpx;
				height: 190rpx;
				background-image: var(--bgimg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}

		.shibie-wrapper,
		.card-box {
			margin-top: 30rpx;
			border-radius: 12rpx;
			background-color: #fff;
			width: 100%;
			padding: 30rpx 30rpx 0;
			box-sizing: border-box;

			.title {
				font-size: 30rpx;
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				color: #01243A;
				line-height: 30rpx;
			}
		}

		.buchong-wrapper {
			margin-top: 60rpx;

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

		.green-tip {
			margin-top: 50rpx;
			font-size: 24rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #999;
			line-height: 24rpx;
			margin-bottom: 60rpx;
		}
	}

	.down {
		background: #CCB375;
		color: #fff;
		border-radius: 5rpx;
		font-size: 20rpx;
		margin-top: 10rpx;
		width: 100rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
	}
</style>