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

<!-- 设备激活2-上传图片 -->
<template>
	<view class="main" :style="{minHeight: height+'px'}">

		<view class="item-row">
			<view class="item-left">
				<view class="title">车身照</view>
				<view class="desc">上传汽车的45度车身照片</view>
				<view class="flag"><text>拍摄示例</text> </view>
			</view>
			<view class="item-right" @click="chooseImage(1)">
				<image :src="state.headstockImg ?state.headstockImg: defHeadstockImg"
					:data-url="state.headstockImg ?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)">
				<image :src="state.installImg ?state.installImg: defInstallImg"></image>
			</view>
		</view>
		<view class="hint">
			<image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image>
			<view>请打开手机蓝牙后再进行下一步操作。</view>
		</view>
		<view class="open-tips">
			<view class="tip-title">开启蓝牙</view>
			<view class="item-tips">
				<view class="item-title">方式一</view>
				<view class="item">
					<view class="point"></view>打开手机的【设置】菜单。
				</view>
				<view class="item">
					<view class="point"></view>在【设置】菜单中，找到【蓝牙】选项。
				</view>
				<view class="item">
					<view class="point"></view>点击【蓝牙】选项，然后打开蓝牙开关。
				</view>
			</view>
			<view class="item-tips">
				<view class="item-title">方式二</view>
				<view class="item">
					<view class="point"></view>下拉打开通知栏。
				</view>
				<view class="item">
					<view class="point"></view>然后打开蓝牙开关。
				</view>
			</view>
		</view>

		<view class="action">
			<button type="default" class="ui-btn" @click="gotoNextStep">
				下一步
			</button>
		</view>
	</view>
</template>

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

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

	const defHeadstockImg = imgURL + "issuance/chetou.png";
	const defInstallImg = imgURL + "issuance/shebei.png";

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

	//选择图片
	const chooseImage = (type) => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera'],
			success: function(res) {
				console.log(res.tempFilePaths);
				uploadFile(res.tempFilePaths[0], "", "").then((data) => {
					if (type === 1) { //车头照
						state.headstockImg = data;
					} else { //安装照
						state.installImg = data;
					}
				})

			}
		});
	}

	//下一步
	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,
							vehicleBodyImgUrl: state.headstockImg,
							installImgUrl: state.installImg,
							orderSource: "WECHAT",
							openId: state.openId,
						},
						method: "POST",
						showLoading: true,
					};

					requestNew(activeImgUpload, options).then((res) => {
						navTo(`/pages/bluetooth/bluetooth?routeType=1&transfer=${state.transfer}&isAfter=${state.isAfter}`)
					});

				}
			}
		})
	}
</script>

<style>
	page {
		background: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.main {
		background: #E9EDF0;
		padding-bottom:160rpx;
		position: relative;
		box-sizing: border-box;
		.action {
			position: absolute;
			bottom: 0rpx;
			left: 0;
			height: 128rpx;
			background-color: #fff;
			border-radius: 30rpx 30rpx 0 0;
			width: 100vw;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		.item-row {
			width: 690rpx;
			height: 240rpx;
			margin: 30rpx auto 0;
			display: flex;
			justify-content: space-between;
			background: white;
			padding: 30rpx;
			border-radius: 20rpx;
			box-sizing: border-box;

			.item-left {
				.title {
					margin-top: 24rpx;
					font-size: 32rpx;
					color: #111;
					font-weight: bold;
				}

				.desc {
					font-size: 24rpx;
					color: #999;
					margin-top: 6rpx;
				}

				.flag {
					width: 100rpx;
					height: 30rpx;
					line-height: 30rpx;
					margin-top: 20rpx;
					border-radius: 5rpx;
					text-align: center;
					font-size: 20rpx;
					border: 1rpx solid #CCB375;
					font-family: SourceHanSansSC, SourceHanSansSC;
					color: #CCB375;
				}
			}

			.item-right {
				width: 288rpx;
				height: 174rpx;
				position: relative;

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

				// &::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: 28rpx;
			color: #545454;
			padding: 0px 30rpx;
			margin-top: 40rpx;
			align-items: center;

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

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

		.btn {
			margin: 60rpx 40rpx;
		}
	}

	.open-tips {
		width: 94%;
		margin: 20rpx auto;
		font-size: 30rpx;

		.tip-title {
			font-family: MicrosoftYaHei;
			font-size: 32rpx;
			color: #111111;
			line-height: 35px;
		}
	}

	.item-tips {
		margin-top: 10rpx;
		overflow: hidden;

		.item-title {
			font-family: MicrosoftYaHei;
			font-size: 28rpx;
			color: #111111;
			line-height: 35rpx;
		}

		.item {
			font-family: MicrosoftYaHei;
			font-size: 28rpx;
			color: #999999;
			line-height: 48rpx;
			display: flex;
			align-items: center;
			margin-top: 10rpx;

			.point {
				flex-shrink: 0;
				width: 10rpx;
				height: 10rpx;
				background: #A0A0A0;
				margin-right: 16rpx;
				border-radius: 50%;
			}
		}
	}

</style>