zhywpt-sp/after-sale/card-loss-reporting/cardloss.vue

<template>
	<view class="formBox">
		<view class="from_item">
			<text class="label">账号验证</text>
			<input type="text" placeholder="输入验证码" v-model="model1.uname" placeholder-style="color:#000">
		</view>
		<view class="from_item">
			<text class="label">手机号码</text>
			<input type="text" placeholder="" v-model="model1.phone" placeholder-style="color:#000" disabled="true">
		</view>
		<view class="from_item">
			<text class="label">验证码</text>
			<input type="text" placeholder="请输入验证码" placeholder-style="color:#000">
			<text class="btn" @click="getCode">获取验证码</text>
		</view>
		<button class="submit" @click="submit">验证</button>
	</view>

</template>

<script setup lang="ts">
	import {
		reactive,ref
	} from "vue";
	import {
		navTo
	} from "@/utils/utils"
	import {
		CardlossStatus
	} from "@/utils/network/api.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		stringToJson
	} from "../../utils/network/encryption.js";
	import {
		request
	} from "../../utils/network/request.js";
	let model1 = reactive({
		uname: '输入验证码',
		phone: '135****9090',
		code: ''
	})

	const getCode = () => {
		console.log(123);
	}
	
	const type=ref('')
	
	onLoad((options:any) => {
		console.log(options, "传参");
		type.value=options.type
	})
	// 卡签挂失/解除挂失
	const changeCardstatus = (type) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				cardId: '', //卡号
				obuId: "", //签号
				operation: "4", //1-卡挂失， 2-牵挂失， 3-卡签挂失， 4-卡解挂 ，5-签解挂
				orderId: '20230225155521777646302', //订单编号
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(CardlossStatus, options)
			.then((res) => {
				stringToJson(res.bizContent)
				if(stringToJson(res.statusCode)==0){
					navTo('/after-sale/card-loss-reporting/card-result')
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}

	const submit = () => {
		console.log("111");
		changeCardstatus(type.value)
		// navTo('/after-sale/card-loss-reporting/card-result')
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.formBox {
		height: 90%;
		width: 100%;

		// background-color: red;
		.from_item {
			padding: 30rpx;
			padding-top: 60rpx;
			position: relative;

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

			input {
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				line-height: 58rpx;
				border-bottom: 1rpx solid #DCDCDC;
				margin-top: 50rpx;
				padding-bottom: 10rpx;

			}

			.btn {
				position: absolute;
				right: 45rpx;
				bottom: 48rpx;
				background: transparent;
				font-size: 30rpx;
				color: #15E5C1;
				z-index: 999;

			}

		}

		.submit {
			background: linear-gradient(to left, #43A1E0 0%, #13E7C1 100%);
			width: 670rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			border-radius: 100rpx;
			position: fixed;
			bottom: 100rpx;
			left: 50%;
			transform: translate(-50%);
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
</style>