ox_zhiNengZhuShou/src/components/end_billing_modal/end_billing_modal.vue

<template>
	<!-- 弹框 结束计费 -->
	<view class="ox-dark-mask" @touchmove.stop.prevent="moveHandle" @click.stop="">
		<view class="odm-end-modal" >
			<view class="oem-close">
				<image src="/static/images/icon/x_close.png" @click="closeChange"></image>
			</view>
			<view class="oem-tit">结束计费</view>
			<view class="oem-line">操作人：{{orderInfo.end_bill_operator_name || '-'}}</view>
			<view class="oem-line">时长合计：<text class="ol-txt1">{{orderInfo.extension.duration || '-'}}</text></view>
			<view class="oem-line">金额合计：<text class="ol-txt2">¥{{orderInfo.amount || 0}}</text></view>
			<view class="oem-box">
				<view @click="selectBtn(1)">
					<image :class="[selectType==1?'ob-img':'']" :src="selectType==1?'/static/images/icon/selected_ring.png':''"></image>
					<view :class="[selectType==1?'ov-active':'']">停止计时</view>
				</view>
				<view @click="selectBtn(2)">
					<image :class="[selectType==2?'ob-img':'']" :src="selectType==2?'/static/images/icon/selected_ring.png':''"></image>
					<view :class="[selectType==2?'ov-active':'']">完结订单</view>
				</view>
			</view>
			<view class="oem-tips">*<text>请输入金额</text></view>
			<view class="oem-ipt"><input type="digit" v-model="input_amount"/></view>
			<view class="oem-btn" hover-class="hover-active" @click="confirmChange" >确认</view>
		</view>
	</view>
</template>

<script>
import util from '@/utils/util';
import deviceApi from '../../subpackage/device/js/device_api.js';
import deviceServer from '../../subpackage/device/js/device_server.js';
import { mapState } from 'vuex';
export default {
	props: {
		orderInfo: {
			type: Object,
			default: ()=>({})
		}
		
	},
	computed: {
		...mapState(['brandInfo']),
	},
	
	data() {
		return {
			input_amount: "",
			selectType: 1,  //默认1(停止计时)  2(完结订单)
		}
	},
	methods: {
		moveHandle(){},
		closeChange(){
			this.$emit('close');
		},
		
		confirmChange(){
			let { brandInfo, orderInfo, input_amount, selectType } = this
			if(input_amount == '')return util.showNone('请输入金额！');
			util.showLoad();
			deviceServer.get({
			    url: deviceApi.timeOrderEnd,
			    data: { 
					brand_id: brandInfo.brand.id,
					order_no: orderInfo.order_no,
					pay_amount: parseFloat(input_amount),
					end_type: selectType==1?'end_timing':selectType==2?'end_order':'',
				},
			    failMsg: '加载失败！'
			})
			.then(res=>{
			    util.hideLoad()
				util.showNone('操作成功！');
				this.$emit('close');
				// setTimeout(()=>uni.navigateBack(),1200);
				this.$emit('timeEndBtn');
			})
		},
		
		selectBtn(type){
			this.selectType = type
		},
	},
}

</script>

<style lang="scss" >
@import '~style/public.scss';
.odm-end-modal{
	position: absolute;
	left: 65rpx;
	top: 12%;
	background-color: #fff;
	width: 620rpx;
	padding: 30rpx 0rpx 60rpx;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.oem-close{
		width: 100%;
		@include centerFlex(flex-end);
		>image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 30rpx;
		}
	}
	.oem-tit {
		color: #333;
		font-size: 32rpx;
		font-weight: 700;
		margin: 16rpx 0rpx 34rpx;
	}
	.oem-line{
		width: 456rpx;
		color: #333;
		font-size: 28rpx;
		line-height: 48rpx;
		.ol-txt1{
			color: #009874;
		}
		.ol-txt2{
			color: #FF873D;
		}
	}
	.oem-box{
		margin: 58rpx 0 48rpx;
		width: 456rpx;
		@include centerFlex(space-between);
		>view{
			@include centerFlex(flex-start);
			>image{
				flex-shrink: 0;
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				border: 2rpx solid #D8D8D8;
				&.ob-img{
					width: 32rpx;
					height: 32rpx;
					border: 0rpx solid #D8D8D8;
				}
			}
			>view{
				margin-left: 12rpx;
				font-size: 28rpx;
				line-height: 48rpx;
				color: #9C9C9F;
				&.ov-active{
					color: #1A1A1A;
				}
				
			}
		}
	}
	.oem-tips{
		width: 456rpx;
		margin: 0rpx 0rpx 8rpx;
		color: #EA5061;
		font-size: 28rpx;
		>text{
			color: #333333;
		}
	}
	.oem-ipt{
		width: 456rpx;
		border: 2rpx solid #D8D8D8;
		border-radius: 10rpx;
		& input {
			flex-grow: 1;
			height: 88rpx;
			color: #333;
			font-size: 28rpx;
			padding: 0rpx 20rpx;
		}
	}
	.oem-btn{
		width: 240rpx;
		height: 88rpx;
		margin-top: 60rpx;
		border-radius: 10rpx;
		background-color: #009874;
		color: #FFF;
		font-size: 32rpx;
		line-height: 88rpx;
		text-align: center;
	}
}
</style>