stock-front/src/views/taskMessage/TaskAccount.vue

<script setup>
import sHeader from "@/components/SimpleHeader";
import { auditUserApply } from "@/service/taskAccount";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { showToast, showFailToast, showSuccessToast } from "vant";
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router'

const userName = ref('')
const phone = ref('')
const identityCard = ref('')
const payeeCode = ref('')
const allowMaximum = ref('')  // 允许最大份额
const cardNo = ref('')
const buyPriorityRank = ref('')  // 买卖优先级/奋斗贡献值，文字
const level = ref('')  // 买卖优先级/奋斗贡献值，值
const stockNum = ref('')  // 初始股票份额
const hisAverage = ref('')  // 历史股票均价
const applyId = ref('');

const userStore = useUserStore();
const router = useRouter();

const showPicker = ref(false);
const columns = [
  { text: '一级', value: '1' },
  { text: '二级', value: '2' },
  { text: '三级', value: '3' },
  { text: '四级', value: '4' },
  { text: '五级', value: '5' },
  { text: '六级', value: '6' },
  { text: '七级', value: '7' },
  { text: '八级', value: '8' },
  { text: '九级', value: '9' },
  { text: '十级', value: '10' },
  { text: '十一级', value: '11' },
  { text: '十二级', value: '12' },
  { text: '十三级', value: '13' },
  { text: '十四级', value: '14' },
  { text: '十五级', value: '15' },
  { text: '十六级', value: '16' },
  { text: '十七级', value: '17' },
  { text: '十八级', value: '18' },
  { text: '十九级', value: '19' },
  { text: '二十级', value: '20' },
]

const onConfirm = ({ selectedOptions }) => {
  buyPriorityRank.value = selectedOptions[0]?.text;
  level.value = selectedOptions[0]?.value;
  showPicker.value = false;
};


onMounted(() => {
  if (userStore.userInfo) {
    userName.value = userStore.userInfo.userName;
    phone.value = userStore.userInfo.phone;
    identityCard.value = userStore.userInfo.identityCard;
    payeeCode.value = userStore.userInfo.payeeCode;
    cardNo.value = userStore.userInfo.cardNo;
    applyId.value = userStore.userInfo.id;
  }
});

// 当组件卸载时清除用户信息
onBeforeUnmount(() => {
  userStore.clearUserInfo();
});

const validateStockNum = (val) => {
  const regex = /^([1-9]\d{0,4}|100000|0)$/;
  return regex.test(val) || val === '' ? true : '请输入[0,100000]范围内整数';
}

const validateHisAverage = (val) => {
  const regex = /^(0|[1-9][0-9]{0,5}\.[0-9]{0,2})$/;
  return regex.test(val) || val === '' ? true : '请输入有效数字，最多保留2位小数';
};

// const showHisAverage = computed(() => {
//   return stockNum.value > 0;
// });

// 拒绝
const rejectApply = async () => {
  const userCheck = {
    // userName: userName.value,
    // phone: phone.value,
    // identityCard: identityCard.value,
    // payeeCode: payeeCode.value,
    // cardNo: cardNo.value,
    applyId: applyId.value,
    pass: false
  }
  const { data } = await auditUserApply(userCheck);

  if (data.code === "00000") {
    showToast("已拒绝");
    router.go(-1)
  } else {
    showFailToast(data.message);
  }
}

// 同意
const approveApply = async () => {

  if (!buyPriorityRank.value || !allowMaximum.value) {
    showFailToast('奋斗值和最大分额是必填项');
    return;
  }

  console.log("allowMaximum >>>", allowMaximum.value);
  const userCheck = {
    allowMaximum: allowMaximum.value,
    level: level.value,
    stockNum: stockNum.value,
    hisAverage: hisAverage.value,
    applyId: applyId.value,
    pass: true
  }
  const { data } = await auditUserApply(userCheck);

  if (data.code === "00000") {
    // 成功
    // showToast("已同意");
    showSuccessToast("已同意")
    router.go(-1)
  } else {
    showFailToast(data.message);
  }
}

</script>

<template>
  <!-- 账号申请审批-->
  <div class="fife" style="background-color:#ebedf0">
    <s-header :name="'用户信息审批'" :noback="false"></s-header>
    <br>
    <van-form>
      <van-cell-group inset>
        <van-field v-model="userName" readonly name="用户名" label="用户名" placeholder="用户名" left-icon="smile-o" />
        <van-field v-model="phone" readonly name="手机号码" label="手机号码" placeholder="手机号码" left-icon="phone-o"
          :rules="[{ required: true, message: '手机号码不能为空' }]" />
        <van-field v-model="identityCard" readonly name="身份证号" label="身份证号" placeholder="身份证号" left-icon="contact-o" />
        <van-field v-model="payeeCode" readonly name="支付宝号" label="支付宝号" placeholder="支付宝号" left-icon="certificate"
          :rules="[{ required: true, message: '支付宝号不能为空' }]" />
        <van-field v-model="cardNo" readonly name="银行卡号" label="银行卡号" placeholder="银行卡号" left-icon="debit-pay"
          :rules="[{ required: true, message: '银行卡号不能为空' }]" />
        <van-field v-model="buyPriorityRank" is-link readonly name="picker" label="奋斗贡献值" placeholder="点击选择买卖优先级"
          left-icon="diamond-o" :rules="[{ required: true, message: '奋斗贡献值不能为空' }]" @click="showPicker = true" />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
        <van-field v-model="allowMaximum" name="允许买入的最大份额" label="最大买入份额" placeholder="允许买入的最大份额" left-icon="points"
          :rules="[{ required: true, message: '最大份额不能为空' }]" />
        <van-field v-model="stockNum" name="初始股票份额" label="初始股票份额" placeholder="初始股票份额(默认为0)" left-icon="balance-o"
          :rules="[{ validator: validateStockNum }]" />
        <van-field v-model="hisAverage" name="历史股票均价" label="历史股票均价" placeholder="历史股票均价(默认为0)"
          left-icon="gold-coin-o" :rules="[{ validator: validateHisAverage }]" />
      </van-cell-group>
      <div style="margin: 20px 30px; display: flex; justify-content: center; align-items: center; gap: 50px;">
        <van-button round class="custom-button" type="danger" size="small" @click="rejectApply" block>拒绝</van-button>
        <van-button round class="custom-button" type="success" size="small" @click="approveApply" block>通过</van-button>
      </div>
    </van-form>

  </div>
</template>

<style scoped></style>