源文件
This commit is contained in:
218
jeepay-ui-uapp-face/pages/orderRefund/orderRefund.vue
Normal file
218
jeepay-ui-uapp-face/pages/orderRefund/orderRefund.vue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view class="refund-amount">
|
||||
<view class="amount">￥{{ (vdata.amount / 100).toFixed(2) }}</view>
|
||||
<view class="title">收款金额</view>
|
||||
</view>
|
||||
<view class="refund">
|
||||
<view>已退金额</view>
|
||||
<view>￥{{ (vdata.refundAmount / 100).toFixed(2) }}</view>
|
||||
</view>
|
||||
<view class="refund">
|
||||
<view>可退金额</view>
|
||||
<view>￥{{ ((vdata.amount - vdata.refundAmount) / 100).toFixed(2) }}</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="input-title">输入退款金额（元）</view>
|
||||
<view class="input-refund">
|
||||
<input type="digit" placeholder="请输入退款金额" v-model="vdata.refundAmountNum" />
|
||||
<view class="input-but" @tap="sumOrReset">
|
||||
{{ vdata.refundAmountNum ? '取消' : '全额' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="remarks-input">
|
||||
<view class="remarks">退款原因:</view>
|
||||
<input type="text" placeholder="请输入退款原因" maxlength="50" v-model="vdata.refundReason" />
|
||||
</view>
|
||||
<view class="refund-button" @tap="open">退款</view>
|
||||
|
||||
<uni-popup ref="refPopup" type="center">
|
||||
<view class="refund-pwd">
|
||||
<view class="title">退款密码</view>
|
||||
<view class="input-box">
|
||||
<input type="number" maxlength="6" password v-model="vdata.refundPassword" focus
|
||||
style="flex-grow: 1; width: 100%" />
|
||||
</view>
|
||||
<view class="button-box">
|
||||
<view @tap="close">取消</view>
|
||||
<view class="confirm" @tap="confirmRefund">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { req, API_URL_PAY_ORDER_LIST, $payOrderRefund } from '@/http/apiManager.js'
|
||||
onLoad((options) => {
|
||||
getDetails(options.orderId)
|
||||
})
|
||||
const vdata = reactive({})
|
||||
const refPopup = ref(null)
|
||||
const getDetails = (id) => {
|
||||
req.getById(API_URL_PAY_ORDER_LIST, id).then(({ bizData }) => {
|
||||
Object.assign(vdata, bizData)
|
||||
})
|
||||
}
|
||||
const sumOrReset = () => {
|
||||
return vdata.refundAmountNum ? (vdata.refundAmountNum = '') : (vdata.refundAmountNum = ((vdata.amount - vdata.refundAmount) / 100).toFixed(2))
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
if (!vdata.refundReason) return errText('请输入退款原因')
|
||||
refPopup.value.open()
|
||||
}
|
||||
const close = () => refPopup.value.close()
|
||||
const confirmRefund = () => {
|
||||
if (!vdata.refundPassword) return errText('请输入密码')
|
||||
uni.showLoading({
|
||||
title: '请稍等',
|
||||
mask: true,
|
||||
})
|
||||
$payOrderRefund(vdata)
|
||||
.then((res) => {
|
||||
uni.showLoading()
|
||||
uni.$emit('ORDER_DETAILS')
|
||||
uni.$emit('ORDER_LIST')
|
||||
uni.$J.showToast('退款成功').then((res) => {
|
||||
close()
|
||||
uni.navigateBack()
|
||||
})
|
||||
})
|
||||
.catch((err) => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
}
|
||||
const errText = (title) => uni.showToast({ title, icon: 'none' })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.refund-amount {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.amount {
|
||||
margin-top: 30rpx;
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: rgba(45, 218, 119, 1);
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 30rpx;
|
||||
font-size: 18rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.refund {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 10rpx;
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
.input-title {
|
||||
margin: 30rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-refund {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #ededed;
|
||||
padding: 10rpx 30rpx;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-but {
|
||||
color: $v-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.remarks-input {
|
||||
display: flex;
|
||||
margin: 20rpx 0;
|
||||
padding: 10rpx 30rpx;
|
||||
height: 160rpx;
|
||||
background-color: #ededed;
|
||||
|
||||
/* #ifdef MP-ALIPAY */
|
||||
input {
|
||||
transform: translateY(-7rpx);
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.refund-button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 260rpx;
|
||||
height: 60rpx;
|
||||
background-color: rgba(242, 77, 77, 1);
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
letter-spacing: 2rpx;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.refund-pwd {
|
||||
padding: 15rpx;
|
||||
width: 420rpx;
|
||||
height: 260rpx;
|
||||
border-radius: 14rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.title {
|
||||
margin-bottom: 50rpx;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
border-bottom: 1rpx solid #000;
|
||||
|
||||
input {
|
||||
padding: 10rpx 0;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button-box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 60rpx;
|
||||
|
||||
view {
|
||||
flex: 0 0 38%;
|
||||
height: 55rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24rpx;
|
||||
color: $v-primary;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background-color: $v-primary;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user