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 v-if="carInfoData.license_plate_number" class="return-top  flex-row flex-between">
					<view>车牌号：{{carInfoData.license_plate_number}}</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 / 2).toFixed(2)}}km</view>
				</view>
				<view class="return-top  flex-row flex-between">
					<view>重量：{{(carInfoData.weight / 100).toFixed(2)}}kg</view>
				</view>
				<view class="return-top  flex-row ">
					<view>照片：</view>
					<view style="display: flex;align-items: center;" class="">
						<image style="margin-right: 10rpx;" v-for="(item,index) of carInfoData.model_images"
							:key="index" class="img" :src="item" mode="aspectFill"></image>
					</view>
				</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 class="list-group">
					<view class="list-item" @click="bindUpImg(index)" @longpress="bindDelImage(index)" :data-idx="index" v-for="(item, index) in shopList.flk_hire_return_car_img"
						:key="item.unique">
						<image v-if="!item.imgUrl"  class="img-item-demo" :src="item.url"></image>
						<image v-else class="img-item" :src="item.imgUrl" mode="aspectFill"></image>
						<view class="img_text">{{ item.title? item.title : '车辆照片'}}</view>
						<view v-if="!item.imgUrl" class="empity-item">＋</view>
					</view>
				</view>
				<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';
	import upload from '@//component/uploaders/upload.js.js';
	export default {
		components: {
			uploaders,
			PayTypeModel,
			allPrice
		},
		data() {
			return {
				imgList:[],
				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()
			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 bindDelImage(index){
				let res = await uni.showModal({
					title: '提示',
					content: '你确定要删除吗？',
					showCancel: true,
				})
				if (res[1].confirm) {
					this.shopList.flk_hire_return_car_img[index].imgUrl = ''
					this.$forceUpdate()
				}
			},
			async bindUpImg(index) {
				let res = await uni.chooseImage({
					count: 1,
				})
				if(res[1]){
					const imgList = res[1].tempFilePaths
					let data = await upload.uploadFile(imgList)
					this.shopList.flk_hire_return_car_img[index].imgUrl = data[0].url
					this.$forceUpdate()
					// this.imgList = this.imgList.concat(data)
					// this.updateImages(this.imgList)
				}
			},	
			
			
			
			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`,
						});
					}, 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() {
				let _image_list = this.shopList.flk_hire_return_car_img.map(item => {
					return item.imgUrl
				})
				 _image_list = _image_list.filter(item=> {
					if(item){
						return item
					}
				})
				if (_image_list.length < this.shopList.flk_hire_return_car_img.length) 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) {
					data.data.model_images = data.data.model_images.split(',') || []
					this.carInfoData = data.data
				} else {
					common.simpleToast(data.msg)
				}
			},
			handleCarImagesUpdate(updatedImages) {
				// 这里会接收到子组件传来的更新后的图片URL数组
				this.car_imgs = updatedImages
			},

			submitEnabled() {
				const me = this
				let _image_list =this.shopList.flk_hire_return_car_img.map(item => item.imgUrl)
				_image_list = _image_list.filter(item=> {
					if(item){
						return item
					}
				})
				if (_image_list.length < this.shopList.flk_hire_return_car_img.length) 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 scoped>
	@import './activation.css';
	.list-group {
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-start;
	    flex-wrap: wrap;
	}
	
	.list-item {
		width: 200rpx;
		height: 200rpx;
		background-color: #F4F5F6;
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
	    margin-right: 9rpx;
	    margin-bottom: 10rpx;
		position: relative;
		align-items: center;
	}
	
	.img-item {
	    width: 200rpx;
	    height: 200rpx;
	    background-color: #fff;
		border-radius: 16rpx;
	}
	.img-item-demo {
	    width: 200rpx;
	    height: 200rpx;
	    background-color: #fff;
		border-radius: 16rpx;
		/* 翻转图片的颜色 */
		filter: invert(30%); 
		opacity: 0.8;
	}
	
	
	
	.empity-item {
		position: absolute;
		/* #ifdef MP-ALIPAY */
		top: 0.7rem;
		left: 0.5rem;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		top: 10rpx;
		left: 48rpx;
		/* #endif */
	
	    color: #e6e6e6;
	    font-size: 120rpx;
	    text-align: center;
	}
	
	.img_text {
	    font-family: PingFangSC, PingFang SC;
	    font-weight: 500;
	    font-size: 24rpx;
	    color: #fff;
	    line-height: 24rpx;
	    /* text-align: center; */
	    font-style: normal;
	    /* text-align: center; */
	    position: absolute;
	    bottom: 17rpx;
	    /* left: 73rpx; */
	}
</style>