zhywpt-sp/after-sale/activation/operation-upload.vue

<!-- 设备激活2-上传图片 -->
<template>
	<view class="main" :style="{height: height+'px'}">
		<view class="item-row">
			<view class="item-left">
				<view class="title">车头照</view>
				<view class="desc">上传汽车的车头照片</view>
				<view class="flag"><text>拍摄示例</text> </view>
			</view>
			<view class="item-right" @click="chooseImage(1)">
				<view class="empty-node"></view>
				<image :src="state.headstockImg ?? defHeadstockImg" :data-url="state.headstockImg ?? defHeadstockImg">
				</image>
			</view>
		</view>
		<view class="item-row">
			<view class="item-left">
				<view class="title">安装照</view>
				<view class="desc">上传安装照片</view>
				<view class="flag"><text>拍摄示例</text> </view>
			</view>
			<view class="item-right" @click="chooseImage(2)">
				<view class="empty-node"></view>
				<image :src="state.installImg ?? defInstallImg"></image>
			</view>
		</view>
		<view class="hint">
			<image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image>
			<view>请打开手机蓝牙后再进行下一步操作。</view>
		</view>
		<view class="btn">
			<submit-button @submit="gotoNextStep" title="下一步"></submit-button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	import {
		msg,
		navTo
	} from '@/utils/utils';
	import {
		fileURL
	} from "@/datas/fileURL.js";
	import {
		getItem
	} from "../../utils/storage";
	const imgURL = `${fileURL}image/`;
	import {
		request
	} from "../../utils/network/request.js";

	import {
		stringToJson
	} from "../../utils/network/encryption.js";
	import {
		upLoadImg
	} from "../../utils/network/api.js";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const height = uni.getSystemInfoSync().windowHeight

	const defHeadstockImg = imgURL + "bluetooth/device-active-img1.png";
	const defInstallImg = imgURL + "bluetooth/device-active-img2.png";

	const state = reactive({
		headstockImg: null, //车头照
		installImg: null, //安装照
		id: null,
		orderId: null,
		openId: null,
	});
	onLoad(() => {
		//读取传入 存储的数据orderInfo
		let orderData = getItem("orderInfo");
		state.id = orderData.id;
		state.orderId = orderData.orderId;
		state.openId = getItem("openId");
		console.log(state);
	})

	//选择图片
	const chooseImage = (type) => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			//sourceType: ['album','camera'], 
			success: function(res) {
				console.log(res.tempFilePaths);

				if (type === 1) { //车头照
					state.headstockImg = res.tempFilePaths[0];
				} else { //安装照
					state.installImg = res.tempFilePaths[0];
				}
			}
		});
	}

	//下一步
	const gotoNextStep = () => {
		if (!state.headstockImg || !state.installImg) {
			msg('请按照要求上传图片！');
			return;
		}
		uni.openBluetoothAdapter()
		/* 判断是否打开蓝牙 */
		uni.getBluetoothAdapterState({
			success(res) {
				//如果res.avaliable==false 说明没打开蓝牙 反之则打开
				if (res.available == false) {
					uni.showToast({
						title: '请打开手机蓝牙',
						icon: "error",
						duration: 2000
					})
					return
				} else {

					const options = {
						type: 2,
						data: {
							orderId: state.orderId,
							vehicleHeadImgUrl: state.headstockImg,
							installImgUrl: state.installImg,
							orderSource: "WECHAT",
							openId: state.openId,
						},
						method: "POST",
						showLoading: true,
					};
					request(upLoadImg, options).then((res) => {
						const data = stringToJson(res.bizContent);
						console.log(data);
						// state.form.vehBodyUrl = data.data.url;
						navTo('/pages/bluetooth/bluetooth?routeType=1')
					});

				}
			}
		})
	}
</script>

<style>
	page {
		background: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.main {
		overflow: hidden;

		.item-row {
			width: calc(100% - 60rpx);
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			background: white;
			padding: 30rpx;
			border-radius: 20rpx;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);

			.item-left {
				.title {
					font-size: 34rpx;
					color: #333;
					font-weight: bold;
				}

				.desc {
					font-size: 24rpx;
					color: #999;
					margin: 10rpx 0;
				}

				.flag {
					width: 110rpx;
					height: 45rpx;
					line-height: 42rpx;
					color: #0A8F8A;
					margin-top: 16rpx;
					border-radius: 6rpx;
					text-align: center;
					font-size: 20rpx;
					background: #D9F8F1;
				}
			}

			.item-right {
				width: 295rpx;
				height: 188rpx;
				position: relative;

				image {
					position: relative;
					z-index: 10;
					width: 100%;
					height: 188rpx;
				}

				&::before {
					content: '';
					position: absolute;
					width: 22rpx;
					height: 22rpx;
					border: 4rpx solid #21BEB1;
					border-bottom: none;
					border-right: none;
					z-index: 0;
					left: -4rpx;
					top: -4rpx;
				}

				&::after {
					content: '';
					position: absolute;
					width: 22rpx;
					height: 22rpx;
					border: 4rpx solid #21BEB1;
					border-top: none;
					border-right: none;
					z-index: 0;
					left: -4rpx;
					bottom: -4rpx;
				}
			}

			.empty-node {
				position: absolute;
				z-index: 0;
				width: 100%;
				height: 100%;

				&::before {
					content: '';
					position: absolute;
					width: 22rpx;
					height: 22rpx;
					border: 4rpx solid #21BEB1;
					border-left: none;
					border-bottom: none;
					z-index: 0;
					right: -4rpx;
					top: -4rpx;
				}

				&::after {
					content: '';
					position: absolute;
					width: 22rpx;
					height: 22rpx;
					border: 4rpx solid #21BEB1;
					border-top: none;
					border-left: none;
					z-index: 0;
					right: -4rpx;
					bottom: -4rpx;
				}
			}
		}

		.hint {
			display: flex;
			flex-direction: row;
			justify-content: center;
			font-size: 26rpx;
			color: #666666;
			padding: 0px 30rpx;
			margin-top: 60rpx;

			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			view {
				width: calc(100% - 36rpx);
			}
		}

		.btn {
			margin: 60rpx 40rpx;
		}
	}
</style>