zx_flk_app/pages/activation/activation.vue

<template>
	<view class="container-view">
		<view class="return-info flex-row flex-between">
			<view class="return-top">
				<view>车型：{{car_model}}</view>
				<view>车牌：{{plate_number}}</view>
			</view>

			<view><img :src="model_image" /></view>
		</view>
		<view class="pictures-info">
			<view>车辆照片</view>
			<!-- <view>这里是关于激活车辆照片的文案描述，这里是关于激活车辆照片的文案描述</view> -->
			<uploader :car_info="car_imgs" @update-car-images="handleCarImagesUpdate"></uploader>
			<view @tap="submitEnabled" class="pictures-btn">激活车辆</view>
		</view>
	</view>
</template>

<script>
	import uploader from '@/component/uploader/uploader';
	const http = require('../../common/http.js');
	const config = require('../../common/config.js');
	const common = require('../../common/common.js');
	export default {
		components: {
			uploader
		},
		data() {
			return {
				isJumpReturn:true,
				isCustomJump: true,
				carInfo: {},
				plate_number: '',
				order_sn: '',
				model_image: '',
				car_model: '',
				return_imgs: [],
				car_imgs: [],
				model_image_list: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.plate_number = options.plate_number ? options.plate_number : ''
			this.isJumpReturn = options.isJumpReturn ? false : true
			if (options.order_sn && options.return_imgs) { // 预约租车
				this.order_sn = options.order_sn ? options.order_sn : ''
				this.car_model = options.car_model ? options.car_model : ''
				this.model_image = options.model_image ? options.model_image : ''
				// 处理上传图片格式问题
				this.return_imgs = options.return_imgs ? JSON.parse(decodeURIComponent(options.return_imgs)) : ''
				this.handleImage()

			} else { //扫码租车
				this.loadCarInfo()
			}
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.isCustomJump = true
		},
		onUnload: function () {
			if(this.isCustomJump && this.isJumpReturn){
				uni.switchTab({
					url: '/pages/my/my' // 假设首页的路径是/pages/home/home
				});
			}
		},
		methods: {
			loadCarInfo() {
				const me = this
				const myLocation = uni.getStorageSync('user_current_location')
				const pData = {
					longitude: myLocation.longitude,
					latitude: myLocation.latitude,
					plate_number: me.plate_number
				}
				http.postApi(config.API_DAYHIRE_CAR_CAR_INFO, pData, function(resp) {
					if (resp.data.code === 200) {
						me.orderInfo = resp.data.data
						me.order_sn = me.orderInfo.order_sn
						me.model_image_list = me.orderInfo.model_info.model_images.split(
							',') // 处理图片格式问题，确保能正确显示图片。
						me.model_image = me.model_image_list[0]
						me.return_imgs = me.orderInfo.return_imgs
						me.handleImage()

					} else {
						// 默认返回首页再提示报错
						me.isCustomJump = false
						uni.reLaunch({
							url: '/pages/index/index'
						})
						common.simpleToast(resp.data.msg)
					}
				})
			},
			
			handleImage() {
				const length = this.return_imgs.list ? this.return_imgs.list.length : 0
				const num = this.return_imgs.num - 0
				for (let i = length; i < num; i++) { // 循环num-length次，每次添加一个空对象到数组中
					this.return_imgs.list.push({});
				}
				this.car_imgs = this.return_imgs.list.map(item => {
					if (!item.hasOwnProperty('img_url')) {
						item.img_url = ""
					}
					if (!item.hasOwnProperty('title')) {
						item.title = ""
					}
					if (!item.hasOwnProperty('url')) {
						item.url = ""
					}
					return item
				})
			},

			handleCarImagesUpdate(updatedImages) {
				// 这里会接收到子组件传来的更新后的图片URL数组
				this.car_imgs = updatedImages
			},
			
			submitEnabled() {
				const me = this
				const _image_list = this.car_imgs.map(item => item.img_url)
				if (_image_list.includes('' || "")) return common.simpleToast('请上传车辆照片')
				const pData = {
					plate_number: this.plate_number,
					order_sn: this.order_sn,
					image_list: _image_list.join(', ')
				}
				http.postApi(config.API_DAYHIRE_HIRE_ACTIVE, pData, (resp) => {
					if (resp.data.code === 200) {
						common.simpleToast('车辆激活成功')
						setTimeout(function() {
							me.isCustomJump = false
							uni.navigateTo({
								url: `/pages/battery/battery?plate_number=${me.plate_number}&isActivePage=true`,
								success: function(res) {},
								fail: function(res) {},
								complete: function(res) {}
							});
						}, 500)
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			}
		}
	};
</script>

<style>
	@import './activation.css';
</style>