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">
				<image :src="state.headstockImg ?state.headstockImg: defHeadstockImg"
					:data-url="state.headstockImg ?state.headstockImg: defHeadstockImg">
				</image>
			</view>
		</view>
		
		<view class="item-row" v-if="state.orderDetail.promotionModes == 1">
			<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">
				<image v-if="state.installPhoto" :src="getFullImageUrl(state.installPhoto)" mode="aspectFill"></image>
				<image v-else :src="defInstallImg" mode="aspectFill"></image>
				
			</view>
		</view>
		
		<view class="hint" style="margin-top: 40rpx;">
			<image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image>
			<view>请打开手机蓝牙后再进行下一步操作。</view>
		</view>
		<view class="hint">
			<image :src="`${$imgUrl}common/icon-hint.png`" class="icon"></image>
			<view>运营和服务规则中：车载单元（OBU）,安装在车辆内部（风挡玻璃或仪表台上）。</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> -->
		<FixedFooter>
			<button type="default" class="ui-btn" @click="gotoNextStep">
				下一步
			</button>
		</FixedFooter>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue";
	import {
		msg,
		navTo,
		uploadFile,
		getFullImageUrl
	} 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 {
		activeImgUpload,orderDetailQuery, issueUploadInstallPhoto
	} from "@/utils/network/api.js";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import FixedFooter from '@/components/common/FixedFooter.vue'
	const height = uni.getSystemInfoSync().windowHeight

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

	const state = reactive({
		headstockImg: null, //车头照
		id: null,
		orderId: null,
		openId: null,
		transfer: 0,
		isAfter: '',
		installPhoto: null,
		orderDetail: {}
	});
	onLoad((option) => {
		//读取传入 存储的数据orderInfo
		let orderData = getItem("orderInfo");
		state.orderId = orderData.orderId;
		state.openId = getItem("openId");
		state.transfer = option.transfer
		state.isAfter = option.isAfter
		console.log(state);
		if(option.transfer == '1' || !state.transfer) {
			getOrderDetails(orderData.orderId)
		}else{
			let vehicleData = getItem("currentActivateData");
			console.log("我的车辆信息：",vehicleData)
			state.headstockImg = vehicleData.vehBodyUrl
		}
	})
//获取订单详情
	const getOrderDetails = (orderId) => {
		console.log('======获取订单信息======')
		const options = {
			type: 2,
			data: {
				orderNo:orderId
			},
			method: "POST",
			showLoading: false,
		};
		state.disabled = false
		requestNew(orderDetailQuery, options).then((res) => {
			console.log("orderInfo", res);
			state.orderDetail = res
			state.headstockImg='https://qtzl.etcjz.cn/'+res['vehBodyUrl']
		});
	};

	//下一步
	const gotoNextStep = () => {
		if (state.orderDetail.promotionModes == 1 && !state.installPhoto) {
			msg('请上传安装照片')
			return
		}
		uni.openBluetoothAdapter()
		/* 判断是否打开蓝牙 */
		uni.getBluetoothAdapterState({
			success(res) {
				//如果res.avaliable==false 说明没打开蓝牙 反之则打开
				if (res.available == false) {
					uni.showToast({
						title: '请打开手机蓝牙',
						icon: "error",
						duration: 2000
					})
					return
				} else {
					navTo(`/pages/bluetooth/bluetooth?routeType=1&transfer=${state.transfer}&isAfter=${state.isAfter}`)
				}
			}
		})
	}
	
	
	//选择图片
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			success: (res) => {
				uploadFile(res.tempFilePaths[0], 100).then((uploadRes) => {
					state.installPhoto = uploadRes.imageUrl
					let option = {
						type: 2,
						data: {
							orderNo: state.orderId,
							url: state.installPhoto
						},
						method: "POST",
						showLoading: true,
					}
					requestNew(issueUploadInstallPhoto, option)
				})
			}
		})
	}
</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;
				}
			}

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

		.hint {
			display: flex;
			flex-direction: row;
			justify-content: center;
			font-size: 28rpx;
			color: #545454;
			padding: 0px 30rpx;
			margin-top: 20rpx;
			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>