zx_flk_app/pages/activation/activation.vue

<template>
	<view class="">
		<navBar name="我的订单" left="0"></navBar>
		<view class="container-view">
			<view class="return-info">
				<view class="h5">车辆信息</view>
		
				<view v-if="overdueMoney" class="return-top  flex-row flex-between">
					<view style="align-items: baseline;" class="flex-row">逾期费用：
						<allPrice :amount="(overdueMoney/100)" />
					</view>
				</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="Number(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>
		
			<PayTypeModel @closeShow="()=>isShowToBuy=false" @payToOrder="payToOrder" :free_price="totalPrice"
				:isShowToBuy="isShowToBuy" />
		</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');
	import PayTypeModel from '@/component/payTypeModel/payTypeModel';
	import allPrice from '@/component/allPrice/allPrice';
	export default {
		components: {
			uploaders,
			PayTypeModel,
			allPrice
		},
		data() {
			return {
				totalPrice: 0,
				isShowToBuy: false,
				myLocation: {},
				shopInfo: {},
				isReturnCar: "",
				overdueTimes: '',
				model_id: "",
				car_sn: "",
				shopList: {},
				carInfoData: {},
				carInfo: {},
				overdueMoney: 0,
				overdueTime: 0,
				sub_sn: '',
				model_image: '3',
				car_model: '',
				return_imgs: [],
				car_imgs: [],
				model_image_list: '',
				_image_list: []
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.locationFn()
			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 || ''
			if (options.overdueMoney == 'undefined' || !options.overdueMoney) {
				this.overdueMoney = 0
			} else {
				this.overdueTime = Number(options.overdueMoney)
			}
			if (options.overdueTime == 'undefined' || !options.overdueTime == 'undefined') {
				this.overdueTime = ''
			} else {
				this.overdueTime = options.overdueTime
			}

			this.totalPrice = Number(this.overdueMoney) || 0
			this.carDetFn()
			this.shopSettingFn()


		},
		// API_FLK_CAR_DETAIL
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		onUnload: function() {},
		methods: {
			async payToOrder(pay_type) {
				let milliseconds = new Date().getTime();
				const current_time = this.overdueTime ? this.overdueTime : parseInt(milliseconds / 1000);
				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: this._image_list.join(','),
					pay_type,
					price: this.totalPrice,
					current_time
				})
				if (data.code == 200) {
					uni.removeStorageSync('car_info')
					common.simpleToast('还车成功！')
					setTimeout(() => {
						uni.switchTab({
							url: `/pages/index/index?plate_number=${this.car_sn}`,
						});
					}, 800)
				} else {
					common.simpleToast(data.msg)
				}
			},
			async locationFn() {
				let _this = this
				uni.getLocation({
					success(res) {
						_this.myLocation = {
							latitude: res.latitude,
							longitude: res.longitude,
						}

					}
				})
			},
			//还车
			async submitReturn() {
				this._image_list = this.car_imgs.map(item => {
					return item.url
				})
				if (this._image_list.length < 1) return common.simpleToast('请上传车辆照片')
				if (this.totalPrice > 0) {
					this.isShowToBuy = true
				} else {
					this.payToOrder(1)
				}


			},
			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
				console.log(this.car_imgs)
				const _image_list = this.car_imgs.map(item => item.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>