From 58b0f1e9bd03a472321acf1dfc4e89fc4ce9df7a Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Mon, 29 Sep 2025 01:14:10 +0800
Subject: [PATCH] 9.28更换api
---
src/page/markets/aiTrading.vue | 207 ++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 195 insertions(+), 12 deletions(-)
diff --git a/src/page/markets/aiTrading.vue b/src/page/markets/aiTrading.vue
index 67478ba..fa72367 100644
--- a/src/page/markets/aiTrading.vue
+++ b/src/page/markets/aiTrading.vue
@@ -1,6 +1,6 @@
<template>
<div class="ai_trading">
- <page-head :title="`AI ${$t('量化交易')}`">
+ <page-head :title="`${$t('量化交易')}`">
<template slot="right">
<div class="head_right" @click="$router.push('/aiTradingOrder')">
{{ $t("订单") }}
@@ -8,40 +8,40 @@
</template>
</page-head>
- <div class="trading_card" v-for="i in 5" :key="i">
+ <div class="trading_card" v-for="i in list" :key="i.id">
<p class="card_label1 flex-start">
- <span class="label_icon">US</span>
- <span>444</span>
+ <span class="label_icon">{{ i.stockType }}</span>
+ <span>{{ i.stockName }}</span>
</p>
<p class="card_label2 flex-between">
<span>{{ $t("最低认购金额") }}</span>
- <span>$ 2,000</span>
+ <span>{{ i.stockType | currencySymbol }} {{ i.minPrice }}</span>
</p>
<p class="card_label2 flex-between">
<span>{{ $t("交易成功率") }}</span>
- <span>100%</span>
+ <span>{{ i.successRate }}%</span>
</p>
<p class="card_label2 flex-between">
<span>{{ $t("预期收益") }}</span>
- <span>3</span>
+ <span>{{ i.expectedEarning }}</span>
</p>
<p class="card_label2 flex-between">
<span>{{ $t("交易周期") }}</span>
- <span>1天</span>
+ <span>{{ i.cycle + $t("hj87") }}</span>
</p>
- <p class="card_buy flex-center">
+ <p class="card_buy flex-center" @click="buyOpen(i)">
<van-icon name="add-square" size=".4em" />
<span>{{ $t("gm") }}</span>
</p>
</div>
<!-- 无数据时显示 -->
- <div class="no_data flex-center">
+ <div class="no_data flex-center" v-show="!list || list.length == 0">
<img src="@/assets/img/zhaobudao2.png" alt="" />
</div>
@@ -50,14 +50,77 @@
:pageSize="pageSize"
:total="total"
></n-pagination>
+
+ <!-- 购买弹窗 -->
+ <van-popup v-model="buyShow" round>
+ <van-form class="buy_popup" @submit="popupSubmit">
+ <div class="popup_title flex-center">
+ <span>{{ `${$t("量化交易")}` }}</span>
+ </div>
+
+ <div class="division"></div>
+
+ <div class="popup_name popup_item flex-start">
+ <span class="popup_icon">{{ popupData.stockType }}</span>
+ <span>{{ popupData.stockName }}</span>
+ </div>
+
+ <div class="popup_item flex-between">
+ <span>{{ $t("最低认购金额") }}</span>
+ <span>
+ {{ popupData.stockType | currencySymbol }} {{ popupData.minPrice }}
+ </span>
+ </div>
+
+ <div class="popup_item" style="display: grid;">
+ <p class="flex-start">
+ <span style="color:red">*</span>
+ <span>{{ $t("申购金额") }}</span>
+ </p>
+ <van-field
+ v-model="popupPrice"
+ :placeholder="$t('请输入')"
+ type="number"
+ clearable
+ :rules="[
+ { required: true, message: $t('请输入') },
+ { validator, message: $t('低于最小申购金额') }
+ ]"
+ />
+ </div>
+
+ <div
+ class="popup_item popup_name flex-end"
+ v-if="popupPrice && popupData.stockType != 'US'"
+ >
+ <span>≈ $ {{ (rate * popupPrice).toFixed(2) }}</span>
+ </div>
+
+ <div class="division"></div>
+
+ <div class="buts flex-between">
+ <p class="flex-center" @click="buyShow = false">
+ <span>{{ $t("qx") }}</span>
+ </p>
+ <p class="flex-center" native-type="submit">
+ <!-- <span>{{ $t("qr") }}</span> -->
+ <van-button native-type="submit">{{ $t("qr") }}</van-button>
+ </p>
+ </div>
+ </van-form>
+ </van-popup>
</div>
</template>
<script>
import PageHead from "@/components/pageHead.vue";
import nPagination from "@/components/nPagination.vue";
+import * as api from "@/axios/api";
+import { myMixin } from "@/mixins/myMixin";
+import { Toast } from "vant";
export default {
+ mixins: [myMixin],
components: {
PageHead,
nPagination
@@ -66,8 +129,66 @@
return {
pageNum: 1,
pageSize: 10,
- total: 1
+ total: 1,
+ list: [],
+ buyShow: false, // 购买弹窗控制
+ popupData: {}, // 点击购买的数据
+ popupPrice: "" // 购买金额
};
+ },
+ computed: {
+ // 计算当前汇率
+ rate() {
+ let rate = 1;
+ if (this.popupData.stockType == "HK") rate = this.htu;
+ else if (this.popupData.stockType == "IN") rate = this.itu;
+ else if (this.popupData.stockType == "TW") rate = this.ttu;
+ return rate;
+ }
+ },
+ created() {
+ this.getStockAiList();
+ },
+ methods: {
+ // 获取列表数据
+ async getStockAiList() {
+ let options = {
+ pageNum: this.pageNum,
+ pageSize: this.pageSize
+ };
+ let data = await api.getStockAiList(options);
+ if (data.status == 0) {
+ this.list = data.data.list;
+ this.total = data.data.total || 1;
+ }
+ },
+ // 购买弹窗
+ buyOpen(i) {
+ this.popupData = i;
+ this.popupPrice = "";
+ this.buyShow = true;
+ },
+ // 提交购买
+ async popupSubmit() {
+ let opt = {
+ buyNum: this.popupPrice,
+ id: this.popupData.id
+ };
+
+ let data = await api.buyStockAi(opt);
+
+ if (data.status == 0) {
+ Toast.success();
+ setTimeout(() => {
+ this.buyShow = false;
+ }, 1000);
+ } else {
+ Toast.fail(data.msg);
+ }
+ },
+ validator(val) {
+ return val >= this.popupData.minPrice;
+ }
}
};
</script>
@@ -80,6 +201,68 @@
background-color: #f5f5f5;
min-height: 100vh;
padding-bottom: 0.3em;
+
+ .buy_popup {
+ width: 8em;
+ /deep/ .van-cell {
+ padding: 0;
+ font-size: 0.4em;
+ }
+ /deep/ .van-field__body {
+ border: 0.01em solid #f5f5f5;
+ height: 2.5em;
+ padding: 0 0.5em;
+ margin-top: 0.5em;
+ }
+ /deep/ .van-button {
+ border: none;
+ font-size: 1em;
+ color: @green;
+ }
+ .division {
+ width: 100%;
+ height: 0.25em;
+ background-color: #f5f5f5;
+ }
+ .popup_title {
+ width: 100%;
+ min-height: 1.22em;
+ font-weight: bold;
+ padding: 0 0.25em;
+ }
+ .popup_name {
+ color: @green;
+ .popup_icon {
+ background: @green;
+ color: #fff;
+ padding: 0.2em 0.35em;
+ border-radius: 0.15em;
+ margin-right: 0.3em;
+ font-size: 0.3em;
+ }
+ }
+ .popup_item {
+ width: 7.5em;
+ margin: 0 auto;
+ padding: 0.35em 0;
+ border-bottom: #f5f5f5 solid 0.01em;
+ }
+ span {
+ font-size: 0.4em;
+ }
+ .buts {
+ width: 100%;
+ height: 1.22em;
+ p {
+ height: 100%;
+ flex: 1;
+ }
+ & > p:last-child {
+ border-left: #f5f5f5 solid 0.01em;
+ color: @green;
+ }
+ }
+ }
.trading_card {
width: 9.5em;
@@ -108,7 +291,7 @@
color: #323233;
span {
font-size: 0.4em;
- font-weight: 300;
+ font-weight: 500;
}
& > span:last-child {
color: #969799;
--
Gitblit v1.9.3