pika_shangjia/warning/orderAlarm/orderAlarm.vue

<template>
	<view>
		<!-- tab -->
		<view class="tab-box ddflex">
			<view class="fflex ddflex">
				<view :class="'tab-item fflex '+(queryType==''?'tab-item-active':'')" @click="queryTypeChange(0)">
					<view>待处理</view>
					<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
				</view>
				<view :class="'tab-item fflex '+(queryType==1?'tab-item-active':'')" @click="queryTypeChange(1)">
					<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)">
				<view class="ddflex order-item-header">
					<view class="order-time">类型：{{item.exceptionCause}}</view>
					<block>
						<view v-if="item.isException==0" 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">{{item.exceptionCause}}</view>
					</view>
				</view>
				<view v-if="item.isException!==0" class="order-btns ddflex">
					<view class="order-btn-time">2022-12-31 17:16:37</view>
					<view style="justify-content: flex-end;" class="ddflex">
						<view class="order-btn" v-if="item.status>1&&item.refundStatus==0" @click.stop="openPop(item)">退款</view>
						<view class="order-btn" v-else @click.stop="finishOrder">结束订单</view>
					</view>
				</view>
			</view>
		</view>

		<bottom-pop v-if="showPop" :showPop='showPop' :btnColor="'#11BB8B'" :showBtn='true' title="退款"
			@closePop="closePop()" @popSubmit="popSubmit()">
			<view class="apply-info-box">
				<view class="reason-input">
					<input v-model="tempData.rmoney" placeholder="请填写退款金额"></input>
				</view>
				<view>请填写退款金额,最多可退￥{{tempData.payMoney}}</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 {

				queryType: 0,

				groupList: [],
				page: 1,
				limit: 10,
				searchValue: '',
				isQuerying: false, //正在查询数据
				
				// 筛选弹窗
				showPop: false,
				tempData: null,
			}
		},
		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,index) {
				this.tempData = item;
				this.tempData.rmoney = item.payMoney
				this.showPop = true
			},
			// 弹窗关闭
			closePop() {
				this.showPop = false
				this.tempData = null
			},
			// 弹窗确认
			popSubmit() {
				if(Number(this.tempData.rmoney)>Number(this.tempData.payMoney)) return req.msg('退款金额超出支付金额')
				uni.showModal({
					title: '提示',
					content: "确定退款？",
					success: (res) => {
						if (res.confirm) {
							req.getRequest('/admin/v2/order/refund', {
								id: this.tempData.id,
								refundMoney:this.tempData.rmoney
							}, data => {
								this.tempData = null
								this.showPop = false
								res.msg('订单已退款')
								this.getMachineList()
							})
						}
					}
				})
			},
			// 结束订单
			finishOrder(item) {
				uni.showModal({
					title: '提示',
					content: "确定结束该订单？",
					success: (res) => {
						if (res.confirm) {
							req.getRequest('/admin/v2/order/settle', {
								id: item.id
							}, data => {
								res.msg('订单已结束')
								this.getMachineList()
							})
						}
					}
				})
			}
		},
		mounted() {},
		onPageScroll: function(e) {}
	}
</script>

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