zhywpt-sp/subpackage/orders/device-install-photo.vue

<!-- 设备激活2-上传图片 -->
<template>
	<view class="main">

		<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">
				<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>运营和服务规则中：车载单元（OBU）,安装在车辆内部（风挡玻璃或仪表台上）。</view>
		</view>
		
		<FixedFooter>
			<button type="default" class="ui-btn" @click="gotoNextStep">
				下一步
			</button>
		</FixedFooter>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from "vue";
	import { msg, navTo, uploadFile, objectToQueryString, 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 { issueUploadInstallPhoto } from "@/utils/network/api.js";
	import { onLoad, onPageScroll } from '@dcloudio/uni-app'
	import FixedFooter from '@/components/common/FixedFooter.vue'
	import navBar from "@/components/nav-bar/nav-bar2.vue";

	const defInstallImg = imgURL + "bluetooth/device-active-img2.png";
	const scrollTop = ref(0);
	const state = reactive({
		installPhoto: null, //车头照
		id: null,
		orderId: null,
		clientFee: '',
		isValueCard: '',
		vehicleId: ''
	});
	
	interface Option {
		orderId: string,
		clientFee: string,
		id: string,
		isValueCard: string,
		vehicleId: string
	}
	
	interface uploadRes {
		imageUrl: string
	}
	
	onLoad((option: Option) => {
		//读取传入 存储的数据orderInfo
		state.orderId = option.orderId;
		state.clientFee = option.clientFee;
		state.id = option.id;
		state.isValueCard = option.isValueCard;
		state.vehicleId = option.vehicleId;
		
		console.log(state);
	})
	
	//选择图片
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			success: function (res) {
				uploadFile(res.tempFilePaths[0], 100).then((uploadRes: uploadRes) => {
					console.log(uploadRes)
					state.installPhoto = uploadRes.imageUrl
					let option = {
						type: 2,
						data: {
							orderNo: state.orderId,
							url: state.installPhoto
						},
						method: "POST",
						showLoading: true,
					}
					requestNew(issueUploadInstallPhoto, option)
				})
			}
		})
	}

	//下一步
	const gotoNextStep = () => {
		if (!state.installPhoto) {
			msg("请上传安装照");
			return;
		}
		let params = {
			orderId: state.orderId,
			clientFee: state.clientFee,
			id: state.id,
			isValueCard: state.isValueCard,
			vehicleId: state.vehicleId
		}
		navTo(
			`/subpackage/orders/product-detail?${objectToQueryString(params)}`,
		);
	}
	
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
</script>

<style>
	page {
		background: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.main {
		padding-bottom:160rpx;
		box-sizing: border-box;
		.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>