stock-front/src/views/trading/TradingBuy.vue

<script setup>
import { onMounted, ref } from 'vue';
import sHeader from "@/components/SimpleHeader";
import { showConfirmDialog, showFailToast, showSuccessToast } from 'vant';
import { addPendOrder, queryAllowPendNum } from "@/service/trading";
// import { useRouter } from 'vue-router'

const buyNum = ref('100');
const unitPrice = ref('10');
const allowMaximum = ref(0);
const active = ref(0);

// const router = useRouter();

onMounted(async () => {
    try {
        const { data } = await queryAllowPendNum();
        if (data.code === "00000") {
            allowMaximum.value = data.data.allowBuyNum
            // console.log("允许挂单份额 >>>", allowMaximum.value);
        }
    } catch (error) {
        console.error("请求出错", error);
    }
})


const onSubmitBuy = async (values) => {
  try {
    const result = await queryAllowPendNum();
    if (result.data.code === "00000") {
      allowMaximum.value = result.data.data.allowBuyNum;
      console.log("允许挂单份额 >>>", allowMaximum.value);
    }

    // 等待用户确认对话框
    const confirmation = await showConfirmDialog({
      title: '提醒',
      message: '挂单后不可撤回',
    });

    if (confirmation) {
      console.log('submitBuy', values);
      const entrustNumber = parseInt(buyNum.value, 10);
      const price = parseFloat(unitPrice.value);
      const params = {
        entrustNumber: entrustNumber,
        price: price,
        type: '1', // 1 代表买，2 代表卖
      };
      const { data } = await addPendOrder(params);
      if (data.code === '00000') {
        showSuccessToast("买入挂单成功");
        // router.go(-1)
      } else {
        showFailToast(data.message);
      }
    } else {
      // 用户取消了对话框
      console.log('用户取消了挂单操作');
    }
  } catch (error) {
    console.error('处理买入挂单时发生错误:', error);
  }
};


</script>

<template>
    <div class="tradingBuy flex-col">
        <div class="tradingBuyBox">
            <s-header :name="'股票交易'" :noback="false" :isFixed="false"></s-header>

            <div style="height: 200px;">
                <van-tabs v-model:active="active" animated>
                    <van-tab><template #title> <van-icon name="points" />买入股票 </template>
                        <van-form @submit="onSubmitBuy" style="margin: 10px;">
                            <van-cell-group inset>
                                <van-field name="买入量" label="买入量" placeholder="买入量"
                                    :rules="[{ required: true, message: '请填写买入量' }]">
                                    <template #input>
                                        <van-stepper v-model="buyNum" step="100" input-width="70px" integer min='0'
                                            :max="allowMaximum" />
                                    </template>
                                </van-field>

                                <van-field name="单价￥" label="单价￥" placeholder="每股单价,小数点后两位有效"
                                    :rules="[{ required: true, message: '请填写单价' }]">
                                    <template #input>
                                        <van-stepper v-model="unitPrice" step="0.01" input-width="70px"
                                            :decimal-length="2" />
                                    </template>
                                </van-field>
                            </van-cell-group>

                            <div style="margin: 20px;">
                                <van-button round block type="warning" native-type="submit">
                                    提交
                                </van-button>


                            </div>
                        </van-form>

                    </van-tab>
                </van-tabs>
            </div>

        </div>
    </div>
</template>

<style scoped></style>