zhywpt-sp/subpackage/after-sale/refundPage.vue

<template>
	<view class="oderPage">
		<view class="content">
			<text class="title">卡上余额(元)</text>
			<view class="">
				<text style="font-size: 30rpx;">￥</text>{{state.hasData.cardBalance? state.hasData.cardBalance / 100:state.hasData.cardBalance}}
			</view>
		</view>
		<view class="from">
			<view class="from_item">
				<text>退费类型：</text>
				<u-radio-group v-model="radiovalue1">
					<u-radio :customStyle="{marginBottom: '8px'}" activeColor="#2CE242"
						v-for="(item, index) in radiolist1" :key="index" :label="item.disabled" :name="item.name"
						@change="radioChange">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view v-if="flag">
				<view class="from_item"  >
					<text>联系人姓名:</text>
					<input type="text" name="" id="" placeholder="请输入联系人姓名" v-model="state.hasData.customerName">
				</view>
				<view class="from_item" v-if="state.isShow">
					<text>开户行：</text>
					<!-- <input type="text" name=""  placeholder="请输入开户行" v-model="state.bankType"> -->
					<picker @change="bindPickerChange" :value="state.index" :range="state.array">
						<view class="uni-input">{{state.index==-1?"请选择":state.array[state.index]}}</view>
					</picker>
				</view>
				<view class="from_item" v-if="state.isShow">
					<text>开户行支行：</text>
					<input type="number"  placeholder="开户行支行" v-model="state.branchName">
				</view>
				<view class="from_item" v-if="state.isShow">
					<text>退费银行卡号：</text>
					<input type="number"  placeholder="请输入银行卡号" v-model="state.bankCardId">
				</view>
				<view class="from_item" v-if="state.isShow">
					<text>开户行地址：</text>
					<picker mode="region"  @change="choiceAddress" >
						<view>{{state.addressShow}}</view>
					</picker>
				</view>
				<u-form-item label="手机号" class="phoneBox" >
					<u-input placeholder='请输入手机号' type="number" v-model="state.tel" />
					<u-button type="success" size="mini" @click="getCode" v-if="waitTime==0">获取验证码</u-button>
					<text class="agreen" v-else>{{waitTime}}后重试</text>
				</u-form-item>
				<u-form-item label="验证码" >
					<u-input placeholder='请输入验证码' type="number" v-model="state.newMobileCode" class="code" />
				</u-form-item>
				<view class="from_item">
					<text>退款方式：</text>
					<u-radio-group v-model="radiovalue2">
						<u-radio :customStyle="{marginBottom: '8px'}" activeColor="#2CE242"
							v-for="(item, index) in radiolist2" :key="index" :label="item.disabled" :name="item.name"
							@change="radioChange2">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
				<view class="from_item">
					<text>用户类型：</text>
					<u-radio-group v-model="radiovalue3">
						<u-radio :customStyle="{marginBottom: '8px'}" activeColor="#2CE242"
							v-for="(item, index) in radiolist3" :key="index" :label="item.disabled" :name="item.name"
							@change="radioChange3">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			
		</view>
		<button class="submit" @click="sure()">确认退费</button>
	</view>
</template>

<script setup lang="ts">
	import {ref,reactive} from "vue";
    import { checkStr, msg } from "@/utils/utils";
	import {navTo} from "@/utils/utils";
	import {queryRefund,queryCardFreeExit,queryRefundApply,sendCode} from "@/utils/network/api.js";
	import {onLoad} from "@dcloudio/uni-app";
	import {request} from "@/utils/network/request.js";
	import {stringToJson} from "@/utils/network/encryption";
	// 单选数据列表
	const radiolist1 = reactive([{
			name: '卡退费',
			disabled: false
		},
		{
			name: '余额补领',
			disabled: false
		},
	], )
	const radiolist2 = reactive([{
			name: '银行卡',
			disabled: false
		},
		{
			name: '现金',
			disabled: false
		},
	], )
	const radiolist3 = reactive([{
			name: '个人',
			disabled: false
		},
		{
			name: '单位',
			disabled: false
		},
	], )
	const state = reactive({
		name:'',
		phone:"",
		bank:"",
		vehicleId:"", //车牌号
		hasData:{},  //通过车牌查出来的数据
		address:"", //地址
		addressShow:"请选择开户行地址",  //展示的地址
		tel:"",
		newMobileCode:"",
		bankType:"",  //开户行
		branchName:"",  //开户行支行
		refoundMethod:1,  //退款方式 1:银行卡 2现金
		array: ['贵阳银行股份有限公司', '中国工商银行股份有限公司', '中国建设银行股份有限公司', '中国银行股份有限公司','中国农业银行股份有限公司','中国交通银行股份有限公司',
		'兴业银行股份有限公司','平安银行股份有限公司','中国邮政储蓄银行股份有限公司','中国光大银行股份有限公司','贵州银行股份有限公司','中国民生银行股份有限公司',
		'招商银行股份有限公司','.农村信用社联合社','农村商业银行'],
		index: -1,
		cusType:1, //用户类型 1-个人 2-单位
		bankCardId:"",  //银行卡号
		isShow:true,  //是否展示银行卡那些
	});
	// 单选默认数据
	const radiovalue1 = ref('卡退费')

	let flag = ref(true)


	// 单选
	const radioChange = (n) => {
		console.log('radioChange', n);
		if (n == '卡退费') {
			flag.value = true
			console.log(flag.value);
		} else {
			flag.value = false
			console.log(flag.value);
		}
	}
	// 单选默认数据
	const radiovalue2 = ref('银行卡')
	let refundType = ref(true)
	const radioChange2 = (n) => {
		console.log('radioChange', n);
		if (n == '银行卡') {
			refundType.value = true
			state.refoundMethod=1
			state.isShow=true;
			console.log(refundType.value);
		} else {
			refundType.value = false
			state.refoundMethod=2
			state.isShow=false;
			state.bankType="";
			state.branchName="";
			state.bankCardId="";
			state.address="";
			console.log(refundType.value);
		}
	}
	// 退款方式
	const radiovalue3 = ref('个人')
	let refundType3 = ref(true)
	const radioChange3 = (n) => {
		console.log('radioChange', n);
		if (n == '个人') {
			refundType3.value = true
			state.cusType=1
			console.log(refundType.value);
		} else {
			refundType3.value = false
			state.cusType=2
			console.log(refundType.value);
		}
	}
	/*视图进入后操作*/
	onLoad((option) => {
		state.vehicleId = option.vehicleId
	    queryRefundAction();
		
	});
	const sure=()=>{
		// 卡退费
		if(flag.value){
			// 银行卡才需要做这些判断
			if(refundType.value){
				if(state.array[state.index]=='请选择'){
					msg("请输入开户行！");
					return;
				}
				if(!state.branchName){
					msg("请输入开户行支行！");
					return;
				}
				if(state.addressShow=="请选择开户行地址"){
					msg("请选择开户行地址！");
					return;
				}
				if(!state.bankCardId){
					msg("请输入银行卡号！");
					return;
				}
			}
			if (!checkStr(state.tel, "mobile")) {
			  msg("请输入正确的手机号！");
			  return;
			}
			if(!state.newMobileCode){
				msg("请输入验证码！");
				return;
			}
			cardFree();
		}else{
			// 余额退费
			balanceReclaiming();
		}
	}
	//储值卡注销退费查询接口
	const queryRefundAction = () => {
		var data = {
			vehicleId: state.vehicleId
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
	
		request(queryRefund, options).then((res) => {
		  const data = stringToJson(res.bizContent);
		  console.log("data",data)
		  // 有无数据卡数据
		  if(data.hasData){
			  state.hasData=data.data[0]
		  }
		});
	}
	// 卡退费
	const cardFree=()=>{
		var data = {
			orderId: state.hasData.orderId,  //退费信息编号
			bankType: state.bankType,  //开户行
			province: state.address[0],  //开户行所在的省
			sell: state.address[1],      //开户行所在的市
			cusName: state.hasData.customerName,   //开户人名称
			bankCardId: state.bankCardId,   //银行卡号
			cusTel: state.tel,   //联系方式
			cusType: state.cusType,   //用户类型
			operateType: state.refoundMethod,   //退款方式 1:银行卡 2现金
			branchName: state.branchName,   //开户行支行名称
			code: state.newMobileCode,   //验证码
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
		console.log("options",options)
		request(queryCardFreeExit, options).then((res) => {
			
		  const data = stringToJson(res.bizContent);
		  console.log("data",data)
		  navTo(`/subpackage/after-sale/refundPage-result`)
		});
	}
	// 余额补领
	const balanceReclaiming=()=>{
		var data = {
			orderId: state.hasData.orderId,  //退费信息编号
			// orderId: "2a0cc6aca04548a7ac42ee1606eac4f8",  //退费信息编号
		};
		const options = {
			type: 2,
			data: data,
			method: "POST",
			showLoading: true,
		};
			
		request(queryRefundApply, options).then((res) => {
		  const data = stringToJson(res.bizContent);
		  console.log("data",data)
		  navTo(`/subpackage/after-sale/refundPage-result`)
		});
	}
	function choiceAddress(e){
		console.log("e",e.detail.value)
		state.address=e.detail.value;
		state.addressShow=state.address[0]+"-"+state.address[1]+"-"+state.address[2]
	}
	const getCode = () => {
		console.log(123);
		if (state.tel) {
			sendCodeApi()
			codeInterval()
		} else {
			uni.showToast({
				title: '请输入手机号',
				icon: 'none'
			});
		}
	
	}
	// 发送验证码
	const sendCodeApi = (type) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				mobile: state.tel
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};
	
		//调用方式
		request(sendCode, options)
			.then((res) => {
				let data = stringToJson(res.bizContent)
				console.log(data, "#################");
				if (data.info == "成功.") {
					console.log('######################CCCCCCCCCCCCCCCCC');
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}
	let waitTime = ref(0)
	//倒计时函数
	const codeInterval = () => {
		waitTime.value = 60
		let timer = setInterval(() => {
			if (waitTime.value == 1) {
				clearInterval(timer)
			}
			waitTime.value -= 1
		}, 1000)
	}
	function bindPickerChange(e){
		state.index = e.detail.value
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-icon__icon{
		top: -4px !important;
	}
	.oderPage {
		flex: 1;
		width: 100%;

		.content {
		    display: flex;
		    flex-direction: column;
		    /* justify-content: center; */
		    align-items: center;
		    width: 750rpx;
		    // height: 266rpx;
		    background-color: #fff;
		    margin-bottom: 30rpx;
		    padding: 75rpx 0;

			.title {
				font-size: 28rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				color: #717171;
				margin-bottom: 40rpx;
			}

			view {
				font-size: 40rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				color: #2A2A2A;
				font-weight: bold;
			}
		}

		.from {
			background-color: #fff;
			padding: 0 30rpx;

			.from_item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				padding: 20rpx 0;
				border-bottom: #DCDCDC 1px solid;
				align-items: center;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #666666;

				input {
					text-align: right;
				}
			}
		}
	}

	.submit {
		background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		border-radius: 100rpx;
		z-index: 999;
		// position: fixed;
		// bottom: 60rpx;
		// left: 50%;
		// transform: translate(-50%);
		margin: 30rpx auto;
	}
	::v-deep .u-form-item--right__content__slot {
		display: flex;
	    justify-content: space-between;
		.btn {
			flex: 1;
			background: transparent;
			font-size: 30rpx;
			color: #15E5C1;
			z-index: 999;
	
		}
	}
	.agreen{
		color: rgb(25, 190, 197);
	}
	::v-deep .code>view{
		text-align: right !important;
	}
	::v-deep .code{
		width: 100% !important;
	}
</style>