shangfutong-ui/jeepay-ui-uapp-face/pages/orderRefund/orderRefund.vue

<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>