zx_flk_app/pages/activation/activation.vue

<template>
	<view class="container-view">
		<view class="return-info">
			<view class="h5">车辆信息</view>
			<view class="return-top  flex-row flex-between">
				<view>车辆编号：{{car_sn}}</view>
			</view>
			<view class="return-top  flex-row flex-between">
				<view>车辆名称：{{carInfoData.car_name}}</view>
			</view>
			<view class="return-top  flex-row flex-between">
				<view>车型：{{carInfoData.model_name}}</view>
			</view>
			<view class="return-top  flex-row flex-between">
				<view>续航：{{carInfoData.endurance}}m</view>
			</view>
			<view class="return-top  flex-row flex-between">
				<view>重量：{{carInfoData.weight}}kg</view>
			</view>
			<view class="return-top  flex-row ">
				<view>照片：</view>
				<image class="img" :src="carInfoData.model_images" mode="aspectFill"></image>
			</view>
		</view>
		<view v-if="shopInfo.shop_name" class="return-info">
			<view class="h5">门店信息</view>
			<view class="return-top  flex-row flex-between">
				<view>门店名称：{{shopInfo.shop_name}}</view>
			</view>
			<view class="return-top  flex-row flex-between">
				<view>门店地址：{{shopInfo.address}}</view>
			</view>
		</view>
		<view class="pictures-info">
			<view>车辆照片</view>
			<!-- <view>这里是关于激活车辆照片的文案描述，这里是关于激活车辆照片的文案描述</view> -->
			<uploaders :max="shopList.flk_hire_car_img_num" :car_info="car_imgs" @update-car-images="handleCarImagesUpdate"></uploaders>
			<view v-if="isReturnCar" @tap="submitReturn" class="pictures-btn">归还车辆</view>
			<view v-else @tap="submitEnabled" class="pictures-btn">激活车辆</view>
		</view>
	</view>
</template>

<script>
	import uploaders from '@/component/uploaders/uploaders';
	const http = require('@/common/http.js');
	const request = require('../../common/request');
	const config = require('@/common/config.js');
	const config_gyq = require('@/common/config_gyq.js');
	const common = require('@/common/common.js');
	export default {
		components: {
			uploaders
		},
		data() {
			return {
				myLocation:{},
				shopInfo:{},
				isReturnCar:"",
				model_id:"",
				car_sn:"",
				shopList:{},
				carInfoData:{},
				carInfo: {},
				sub_sn: '',
				model_image: '3',
				car_model: '',
				return_imgs: [],
				car_imgs: [],
				model_image_list: ''
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			console.log(options,'options');
			this.isReturnCar = options.isReturnCar
			if(options.isReturnCar){
				uni.setNavigationBarTitle({
					title:'归还车辆'
				})
				this.shopInfoFn()
			}
			this.sub_sn =  options.sub_sn || ''
			this.model_id =  options.model_id || ''
			this.car_sn =  options.car_sn || ''
			this.carDetFn()
			this.shopSettingFn()
			
			
		},
		// API_FLK_CAR_DETAIL
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
		},
		onUnload: function () {
		},
		methods: {
			async locationFn() {
				let res = await uni.getLocation()
				if (res[1]) {
					this.myLocation = {
						latitude: res[1].latitude,
						longitude: res[1].longitude,
					}
					this.shopInfoFn()
				}
			},
			//还车
			async submitReturn(){
				const price = 0
				let milliseconds = new Date().getTime();
				const current_time = parseInt(milliseconds / 1000);
				const _image_list = this.car_imgs.map(item => item.img_url)
				if (_image_list.length < 1) return common.simpleToast('请上传车辆照片')
				let {data} = await request.postApi(config_gyq.API_FLK_CAR_RETURN_CAR,{
					latitude: this.myLocation.latitude,
					longitude: this.myLocation.longitude,
					shop_id:this.shopInfo.id,
					car_sn:this.car_sn,
					image_list:_image_list.join(','),
					pay_type:0,
					price,
					current_time
				})
				if(data.code == 200){
					common.simpleToast('还车成功！')
					setTimeout(()=> {
						uni.switchTab({
							url: `/pages/index/index?plate_number=${this.car_sn}`,
						});
					}, 800)
				}else{
					common.simpleToast(resp.data.msg)
				}
			},
			async shopInfoFn(){
				let res = await uni.getLocation()
				let {data} = await request.postApi(config.API_NEAR_SHOP_LIST,
				{
					limit:1,
					latitude: this.myLocation.latitude,
					longitude: this.myLocation.longitude,
				}
				)
				if(data.code == 200){
					if(data.data.list.length > 0){
						this.shopInfo = data.data.list[0]
					}else{
						common.simpleToast('未获取到门店位置！')
					}
				}else{
					common.simpleToast(data.msg)
				}
			},
			async shopSettingFn(){
				let {data} = await request.postApi(config_gyq.API_FLK_INDEX_SHOP_SETTING,{model_id:this.model_id})
				if(data.code == 200){
					this.shopList = data.data
				}else{
					common.simpleToast(data.msg)
				}
			},
			async carDetFn(){
				let {data} = await request.postApi(config.API_FLK_CAR_DETAIL,{car_sn:this.car_sn})
				if(data.code == 200){
					this.carInfoData = data.data
				}else{
					common.simpleToast(data.msg)
				}
			},
			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.length < 1) return common.simpleToast('请上传车辆照片')
				const pData = {
					car_sn: this.car_sn,
					sub_sn: this.sub_sn,
					image_list: _image_list.join(',')
				}
				http.postApi(config.API_FLK_CAR_ASSIGNMENT, pData, (resp) => {
					if (resp.data.code === 200) {
						common.simpleToast('车辆激活成功')
						setTimeout(function() {
							uni.switchTab({
								url: `/pages/index/index?plate_number=${me.car_sn}`,
							});
						}, 800)
					} else {
						common.simpleToast(resp.data.msg)
					}
				})
			}
		}
	};
</script>

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