源文件

jeepay-ui-uapp-merchant/pages/memberCenter/member/memberManual.vue

@@ -0,0 +1,195 @@
+<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>