pika_shangjia/warning/orderAlarm/orderAlarm.vue

<template>
	<view style="overflow: hidden;">
		<!-- tab -->
		<view class="tab-box ddflex">
			<view class="fflex ddflex">
				<view :class="'tab-item fflex '+(queryType==2?'tab-item-active':'')" @click="queryTypeChange(2)">
					<view>待处理</view>
					<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
				</view>
				<view :class="'tab-item fflex '+(queryType==3?'tab-item-active':'')" @click="queryTypeChange(3)">
					<view>已处理</view>
					<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
				</view>
			</view>
		</view>
		<view style="height: 110rpx;"></view>

		<!-- 订单 -->
		<view>
			<view class="order-item" v-for="item,index in groupList"
				@click="jumpUrl('/pages/orderDetail/orderDetail?id='+item.id)">
				<view class="ddflex order-item-header">
					<view class="order-time">类型：{{item.type==2?'按次计费':item.type==3?'按时计费':''}}</view>
					<block>
						<view v-if="item.isException==2" class="order-state">待处理</view>
						<view v-else class="order-state" style="color: #0FCB27;border: 2rpx solid #0FCB27;">已处理</view>
					</block>
				</view>
				<view class="order-item-body">
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">订单编号：</view>
						<view class="order-item-content-data fflex tover">{{item.orderNo}}</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">订单状态：</view>
						<view class="order-item-content-data fflex tover">
							{{item.finishStatus==0?'未结束':item.finishStatus==1?'自动结束':'人工结束'}}</view>
					</view>
					<!-- <view class="order-item-content ddflex">
						<view class="order-item-content-label">机柜编号：</view>
						<view class="order-item-content-data fflex tover">{{item.leaseDevId}}</view>
					</view> -->
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">电池编号：</view>
						<view class="order-item-content-data fflex tover">{{item.batteryId}}</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">应付金额：</view>
						<view class="order-item-content-data fflex tover" style="color: #EB5C20">{{item.totalMoney?'￥'+item.totalMoney:'-'}}</view>
					</view>
					<view class="order-item-content ddflex">
						<view class="order-item-content-label">描述：</view>
						<view class="order-item-content-data fflex tover">
							<view style="color: #2A82E4;margin-left: 10rpx;text-decoration: underline;" @click.stop="jumpUrl('/warning/userAlarm/userAlarm?orderId='+item.id)">查看用户报障</view>
						</view>
					</view>
				</view>
				<view class="order-btns ddflex">
					<view class="order-btn-time">{{item.createDate}}</view>
					<view v-if="item.isException==2" style="justify-content: flex-end;" class="ddflex">
						<view class="order-btn" v-if="item.status==3&&item.refundStatus==0" @click.stop="openPop(item,'退款')">退款</view>
						<view class="order-btn" v-if="item.status==0||item.status==1" @click.stop="openPop(item,'结算')">结算</view>
						<view class="order-btn" @click.stop="finishOrder(item)">处理</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="groupList.length==0">
			<view class="nodata">
				<image :src="picUrlss+'empty.png'" mode="aspectFit"></image>
				<text>暂无订单~</text>
			</view>
		</view>

		<bottom-pop v-if="showPop" :showPop='showPop' :btnColor="'#11BB8B'" :showBtn='true' :title="popTitle"
			@closePop="closePop()" @popSubmit="popSubmit()">
			<view class="apply-info-box" v-if="popTitle=='退款'">
				<view class="reason-input">
					<input v-model="tempData.rmoney" type="digit"  placeholder="请填写退款金额"></input>
				</view>
				<view>请填写退款金额,最多可退￥{{tempData.payMoney}}</view>
			</view>
			<view class="apply-info-box" v-if="popTitle=='结算'">
				<view class="reason-input">
					<input v-model="tempData.rmoney" type="digit" placeholder="是否调整订单金额"></input>
				</view>
				<view>如需调整订单金额，请填写调整后的订单金额，否则无需填写</view>
			</view>
		</bottom-pop>

	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import bottomPop from "../../components/bottom-pop/index";

	export default {
		components: {
			bottomPop
		},
		props: {},
		data() {
			return {
				picUrlss: req.public.picUrls,
				queryType: 2,

				groupList: [],
				page: 1,
				limit: 10,
				searchValue: '',
				isQuerying: false, //正在查询数据
				
				// 筛选弹窗
				showPop: false,
				tempData: null,
				popTitle:''
			}
		},
		onLoad(options) {
			this.getMachineList()
		},
		onShow() {

		},
		onReachBottom() {
			this.getMachineList(true)
		},
		methods: {
			jumpUrl(url) {
				if (req.isLogins(true)) {
					uni.navigateTo({
						url: url
					})
				}
			},
			queryTypeChange(val) {
				if (this.queryType == val) return false
				this.queryType = val
				this.getMachineList()
			},

			// 获取机柜列表
			getMachineList(isPage) {
				if (this.isQuerying) return
				else this.isQuerying = true
				if (!isPage) {
					this.page = 1
				}
				let queryParams = {
					page: this.page,
					limit: this.limit,
				}
				queryParams.status = this.queryType
				req.getRequest(
					'/admin/v2/alarm/exceptionOrderPage',
					queryParams,
					data => {
						if (data != null && data.list.length > 0) {
							if (!isPage) {
								this.groupList = data.list
							} else {
								this.groupList = this.groupList.concat(data.list)
							}
							this.page++
						} else {
							if (!isPage)
								this.groupList = data.list
							else {}
						}
						uni.hideLoading()
						this.isQuerying = false
					}
				)
			},
			
			// 弹窗打开
			openPop(item,title) {
				this.popTitle = title
				if(title=='退款'){
					this.tempData = item;
					this.tempData.rmoney = item.payMoney
					this.showPop = true
				}else if(title=='结算'){
					this.tempData = item;
					this.tempData.rmoney = 0
					this.showPop = true
				}
			},
			// 弹窗关闭
			closePop() {
				this.showPop = false
				this.tempData = null
			},
			// 弹窗确认
			popSubmit() {
				if(this.popTitle=='退款'){
					if(Number(this.tempData.rmoney)>Number(this.tempData.payMoney)) return req.msg('退款金额超出支付金额')
					uni.showModal({
						title: '提示',
						content: "确定退款？",
						success: (res) => {
							if (res.confirm) {
								req.postRequest('/admin/v2/order/refund', {
									orderNo:this.tempData.orderNo,
									refundMoney:this.tempData.rmoney
								}, data => {
									this.tempData = null
									this.showPop = false
									req.msg('订单已退款')
									this.getMachineList()
								})
							}
						}
					})
				}else if(this.popTitle=='结算'){
					uni.showModal({
						title: '提示',
						content: "确定结算？",
						success: (res) => {
							if (res.confirm) {
								req.postRequest('/admin/v2/order/settle', {
									orderId: this.tempData.id,
									settleMoney:this.tempData.rmoney,
									settleType:2
								}, data => {
									this.tempData = null
									this.showPop = false
									req.msg('订单已结算')
									this.getMachineList()
								})
							}
						}
					})
				}
			},
			// 结束订单
			finishOrder(item) {
				uni.showModal({
					title: '提示',
					content: "确定直接处理该订单？如需调整订单金额请取消并点击结算操作，如需退款请取消并点击退款操作",
					success: (res) => {
						if (res.confirm) {
							req.postRequest('/admin/v2/order/finish', {
								orderId:item.id
							}, data => {
								req.msg('订单已处理')
								this.getMachineList()
							})
						}
					}
				})
			}
		},
		mounted() {},
		onPageScroll: function(e) {}
	}
</script>

<style>
	@import "./orderAlarm.css";
</style>