zhywpt-sp/after-sale/ETC-log-off/upload-card.vue

<template>
	<view class="upload-box">
		<view class="head-tips">
			检测到您的ETC卡中还剩余额<text>100.00</text>元，我们将于<text>14</text>个工作日争议期后退回到您的银行卡中，这里将收集您的收款信,具体金额可能会出现增多或减少得情况，敬请谅解！
		</view>
		<view class="upload-card" @click="upload()">
			<view class="card-left">
				<view class="item1"> ETC卡剪段照片 </view>
				<view class="item2"> ETC卡剪段并上传照片 </view>
				<view class="item3"> 拍摄示例 </view>
			</view>
			<image :src="`${$imgUrl}ETC1.png`" mode="" v-if="!form.imageUrl"></image>
			<image :src="form.imageUrl" mode="" v-else></image>
		</view>

		<u-form :model="form" ref="myForm" :error-type="errorType">
			<view class="from">
				<u-form-item prop="state">
					<view class="from_item">
						<text><text style="color: red"></text>是否寄回设备：</text>
						<u-radio-group v-model="form.state">
							<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>
				</u-form-item>
				<u-form-item prop="logisticsname" v-if="form.state=='寄回'">
					<view class="from_item">
						<text><text style="color: red">*</text>物流公司:</text>
						<view style="display: flex" @click="showPicker(1)">
							<u-input v-model="form.logisticsname" class="input" disabled placeholder="请选择" />
							<u-icon name="arrow-right" style="margin-left: 10px;display: flex;"></u-icon>
						</view>
					</view>
				</u-form-item>
				<u-form-item prop="logisticsNum" v-if="form.state=='寄回'">
					<view class="from_item">
						<text><text style="color: red">*</text>物流单号:</text>
						<u-input v-model="form.logisticsNum" class="input" />
					</view>
				</u-form-item>

				<view class="title"> 请输入退费信息 </view>
				<u-form-item prop="username">
					<view class="from_item">
						<text style="color: #777777"><text style="color: red">*</text>联系人姓名:</text>
						<u-input v-model="form.username" class="input" />
					</view>
				</u-form-item>
				<u-form-item prop="phone">
					<view class="from_item">
						<text style="color: #777777"><text style="color: red">*</text>手机号:</text>
						<u-input v-model="form.phone" class="input" />
					</view>
				</u-form-item>
				<u-form-item prop="bank">
					<view class="from_item">
						<text style="color: #777777"><text style="color: red">*</text>开户行:</text>
						<u-input v-model="form.bank" class="input" />
					</view>
				</u-form-item>
				<u-form-item prop="bankcardid">
					<view class="from_item">
						<text style="color: #777777"><text style="color: red">*</text>退费银行卡号:</text>
						<u-input v-model="form.bankcardid" class="input" />
					</view>
				</u-form-item>
				<view class="title"> 请填写注销原因 </view>
				<u-form-item prop="remark">
					<view class="from_item">
						<text><text style="color: red"></text>注销原因:</text>
						<view style="display: flex" @click="showPicker(2)">
							<u-input v-model="form.remark" class="input" disabled placeholder="请选择" />
							<u-icon name="arrow-right" style="margin-left: 10px;display: flex;"></u-icon>
						</view>
					</view>
				</u-form-item>
			</view>
		</u-form>

		<button class="submit" @click="toPage()">寄回，不收费</button>
		<!-- 选择弹窗 -->
		<view>
			<!-- 物流 -->
			<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
			<!-- 原因 -->
			<u-select v-model="show2" mode="single-column" :list="list2" @confirm="confirm2"></u-select>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onShow,
		onReady
	} from "@dcloudio/uni-app";
	import {
		navTo,
		checkStr
	} from "@/utils/utils";
	import {
		request
	} from "../../utils/network/request.js";
	import {
		getLogistics,
		CardSignCancellation
	} from "../../utils/network/api.js";
	import {
		stringToJson
	} from "../../utils/network/encryption.js";
	// 表单数据
	const form = reactive({
		imageUrl: "",
		logisticsname: "",
		logisticsNum: "",
		state: "",
		username: "",
		phone: "",
		bank: "",
		bankcardid: "",
		remark: "",
	});

	const list = reactive([]); //物流数据
	const list2 = reactive([{
			//原因
			value: "原因1",
			label: "原因1",
		},
		{
			value: "原因1",
			label: "原因1",
		},
		{
			value: "原因1",
			label: "原因1",
		},
	]);

	const rules = {
		// logisticsname: [{
		// 	required: true,
		// 	message: "请选择",
		// 	trigger: ["change", "blur"],
		// }, ],
		logisticsNum: [{
			required: true,
			message: "请输入",
			trigger: ["change", "blur"],
		}, ],
		state: [{
			required: true,
			message: "请输入",
			trigger: ["change", "blur"],
		}, ],
		username: [{
			required: true,
			message: "请输入",
			trigger: ["change", "blur"],
		}, ],
		bank: [{
			required: true,
			message: "请输入",
			trigger: ["change", "blur"],
		}, ],
		bankcardid: [{
			required: true,
			message: "请输入",
			trigger: ["change", "blur"],
		}, ],
		// remark: [{
		// 	required: true,
		// 	message: "请选择",
		// 	trigger: ["change", "blur"],
		// }, ],
		phone: [{
				required: true,
				message: "请输入手机号",
				trigger: ["change", "blur"],
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					console.log(checkStr(value, "mobile"), "0011");
					return checkStr(value, "mobile");
				},
				message: "手机号码不正确",
				trigger: ["change", "blur"],
			},
		],
	};
	// 验证提示类型(toast要版本为1.3.5才支持)
	const errorType = ["border-bottom", "toast"];

	// 设置验证规则
	const myForm = ref(null);
	onReady(() => {
		myForm.value.setRules(rules);
	});

	onLoad(() => {
		getexpresslist();
	});
	const getexpresslist = () => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				// opId: getItem("openId"),
				// source: "WECHAT",
				// tabIndex: "0",
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(getLogistics, options)
			.then((res) => {
				// stringToJson(res.bizContent)
				stringToJson(res.bizContent).forEach((item) => {
					list.push({
						value: item,
						label: item,
					});
				});
			})
			.catch((err) => {
				console.log(err);
			});
	};

	// 卡签注销
	const logoff = (offtype) => {
		//参数说明
		let options = {
			type: 2, //type: 2,JSON格式提交数据(默认表单形式提交)
			data: {
				cardId: '', //卡号
				obuId: "", //签号
				serviceType: "1", //注销类型 1-卡注销，2-签注销，3-卡签注销
				operation: offtype, //注销方式  1-有卡注销，2-无卡注销
				orderId: '20230225155521777646302', //订单编号
				ReasonCancellation: ''
			}, //请求参数
			method: "POST", //提交方式(默认POST)
			showLoading: true, //是否显示加载中(默认显示)
		};

		//调用方式
		request(CardSignCancellation, options)
			.then((res) => {
				stringToJson(res.bizContent)
				if (stringToJson(res.statusCode) == 0) {
					navTo("/after-sale/ETC-log-off/log-off-result");
				}
			})
			.catch((err) => {
				console.log(err);
			});
	}

	// 单选数据列表
	const radiolist1 = reactive([{
			name: "寄回",
			disabled: false,
		},
		{
			name: "不寄回",
			disabled: false,
		},
	]);
	// 单选
	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 upload = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function(res) {
				console.log(res);
				// pathToBase64(res.tempFilePaths[0]).then(path => {
				form.imageUrl = res.tempFilePaths[0];
				// }).catch(error => {

				// })
			},
		});
	};

	const show = ref(false);
	const show2 = ref(false);

	const showPicker = function(type) {
		if (type == 1) {
			show.value = true;
			console.log(show.value);
		} else {
			show2.value = true;
			console.log(show2.value);
		}
	};
	// 选择物流
	const confirm = (e) => {
		console.log(e);
		form.logisticsname = e[0].value;
	};
	const confirm2 = (e) => {
		console.log(e);
		form.remark = e[0].value;
	};

	const toPage = () => {
		myForm.value.validate((valid) => {
			console.log(valid);
			if (valid) {
				console.log("验证通过", form);
				wx.showModal({
					confirmText: "寄回",
					cancelText: "不寄回",
					success: function(res) {
						if (res.confirm) {
							console.log("用户点击确定");
							logoff(2)
							// navTo("/after-sale/ETC-log-off/log-off-result");

						} else if (res.cancel) {
							console.log("用户点击取消");
							navTo("/after-sale/ETC-log-off/etc-log-off-pay");
						}
					},
				});
			} else {
				console.log("验证未通过");
			}
		});
	};
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.upload-box {
		// width: 100%;
		padding: 30rpx;

		.head-tips {
			text-indent: 2rem;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
			line-height: 50rpx;
			margin-bottom: 45rpx;

			text {
				color: #ff8000;
			}
		}

		.upload-card {
			margin-bottom: 70rpx;
			height: 260rpx;
			background: #ffffff;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			justify-content: space-between;

			.card-left {
				.item1 {
					font-size: 34rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #000000;
					margin-bottom: 30rpx;
				}

				.item2 {
					font-size: 24rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #999999;
					margin-bottom: 30rpx;
				}

				.item3 {
					width: 110rpx;
					height: 40rpx;
					background: #ecfbf8;
					/* opacity: 0.2; */
					border-radius: 6rpx;
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					text-align: center;
					line-height: 40rpx;
					color: #0a8f8a;
				}
			}

			image {
				width: 295rpx;
				height: 188rpx;
			}
		}

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

			::v-deep .u-form-item {
				padding: 0;
				line-height: normal;

				.u-form-item__message {
					margin-bottom: 12rpx;
				}
			}

			.title {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				margin: 38rpx 0;
			}

			.from_item {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				border-bottom: 1rpx solid #dcdcdc;

				::v-deep .input {
					text-align: right;
					flex: 1;

					input {
						text-align: right;
					}
				}
			}

			.from_item1 {
				display: flex;
				flex-wrap: nowrap;
				flex-direction: column;
				justify-content: space-between;
				padding: 30rpx;
				border-bottom: #dcdcdc 1px solid;

				input {
					text-align: right;
				}

				.textarea {
					background-color: #f1f1f1;
					width: 100%;
					border-radius: 20rpx;
					margin-top: 10rpx;
					text-indent: 1rem;
					height: 180rpx;
					padding: 20rpx;
					box-sizing: border-box;
				}
			}
		}

		.submit {
			height: 80rpx;
			background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
			margin: 60rpx auto;
		}
	}
</style>