cashier_app/pageRed/red/member/memberManual.vue

<template>
  <view class="page-wrapper">
    <view class="member-header">
      <view class="left">
        <view class="top-title">会员当前余额 (元)</view>
        <view class="member-amount">{{ (vdata.balance / 100).toFixed(2) }}</view>
      </view>
      <image :src="vdata.avatarUrl" class="member-photo"></image>
    </view>
    <view class="m-wrapper" @tap="openAddOrRed">
      <view class="left">
        <view class="sub-title">调账方式</view>
        <view class="m-type">{{ vdata.addOrRedUce == 'add' ? '加款' : '减款' }} </view>
      </view>
      <view class="right">
        <image src="/static/iconImg/icon-arrow-right.svg" class="member-photo"></image>
      </view>
    </view>
    <view class="m-wrapper m-amout">
      <view class="left">
        <view class="sub-title">调账金额</view>
        <input class="m-input" type="digit" v-model="vdata.num" placeholder="请输入调账金额" @input="inputChange">
      </view>
      <view class="right">
        元
      </view>
    </view>
    <view class="ba-wrapper">
      <view class="sub-title">调账后金额</view>
      <view class="m-balance">￥{{ (vdata.manualAmount / 100).toFixed(2) }}</view>
    </view>
    <view class="but-wrapper">
      <Button @tap="openManual">确认调账</Button>
    </view>
  </view>
  <ConfirmManual ref="refManual" />
  <JSinglePopup :list="list" ref="refSingle" />
</template>

<script setup>
import { ref, reactive } from "vue"
import { onLoad } from '@dcloudio/uni-app'
import ConfirmManual from "./conponents/ConfirmManual.vue"
import { $memberManual, reqLoad, API_URL_MEMBERS } from "@/http/apiManager"
import infoBox from '@/commons/utils/infoBox.js';
onLoad((options) => {
  getMemberInfos(options.mbrId)
})
const vdata = reactive({})
const refSingle = ref(null)
const refManual = ref(null)
const list = [
  {
    label: '加款', value: 'add', fun: () => {
      vdata.addOrRedUce = 'add'
      if (vdata.num) return vdata.manualAmount = (vdata.balance * 1 + vdata.num * 100)// 隐式转换后 在进行加法运算 
    }
  },
  {
    label: '减款', value: 'reduce', fun: () => {
      vdata.addOrRedUce = 'reduce'
      if (vdata.num) return vdata.manualAmount = (vdata.balance - vdata.num * 100)
    }
  },
]
const styles = {
  backgroundColor: 'transparent',
  color: '#000',
  fontSize: '32rpx',
}
function getMemberInfos (mbrId) {
  reqLoad.getById(API_URL_MEMBERS, mbrId).then(({ bizData }) => {
    Object.assign(vdata, bizData)
    vdata.manualAmount = bizData.balance
    vdata.addOrRedUce = 'add' //赋值初始值 加款
  })
}
const openAddOrRed = () => {
  refSingle.value.open()
}
const inputChange = (e) => {
  if (vdata.addOrRedUce == 'add') {
    vdata.manualAmount = (vdata.balance * 1 + vdata.num * 100)// 隐式转换后 在进行加法运算 
    return
  }
  return vdata.manualAmount = (vdata.balance - vdata.num * 100)
}
const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
const openManual = () => {
  if (vdata.num <= 0) return infoBox.showToast('调账金额 不能为零')
  if (!REG_AMOUNT.test(vdata.num)) return infoBox.showToast('请输入正数金额 保留两位小数')
  refManual.value.open(vdata)
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  background-color: #fff !important;
  min-height: 100vh;

  .sub-title {
    color: #4c4c4cff;
    font-size: 30rpx;
    text-align: center;
    white-space: nowrap;
  }

  .member-header {
    display: flex;
    justify-content: space-between;
    margin: 35rpx;
    padding-bottom: 50rpx;
    border-bottom: 1rpx solid #0000000f;

    .top-title {
      color: #808080ff;
      font-size: 26rpx;
    }

    .member-amount {
      margin-top: 20rpx;
      color: #000000ff;
      font-size: 50rpx;
      font-weight: 500;
    }

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
  }
}


.m-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 680rpx;
  height: 120rpx;
  border-radius: 32rpx;
  opacity: 1;
  background: #f7f7f7ff;

  .left {
    display: flex;
    margin-left: 40rpx;

    .m-type {
      margin-left: 78rpx;
    }
  }

  .right {
    image {
      width: 108rpx;
      height: 120rpx;
    }
  }
}

.m-amout {
  margin-top: 30rpx;

  .m-input {
    margin-left: 78rpx;
  }

  .right {
    margin-right: 40rpx;
    color: #00000080;
    font-size: 32rpx;
  }
}

.ba-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 50rpx auto;
  width: 600rpx;

  .m-balance {
    color: #000000ff;
    font-size: 30rpx;
    font-weight: 500;
  }
}

.but-wrapper {
  margin: 105rpx auto;
  width: 400rpx;
}
</style>