1
jhzh
2025-11-12 1bd03f5c2e7b9fa9cc80c4e673e18132da411333
src/page/user/myOrder.vue
@@ -39,7 +39,7 @@
          <div class="assets-item flex-center" style="align-items: end;">
            <div class="all-size">{{ $t("平仓盈亏") }}</div>
            <div class="big-size">
              {{ moneyData.symbol }}{{ moneyData.cumulativeProfitAndLoss }}
              {{ moneyData.symbol }}<span v-if="moneyData.isZf==1">-</span>{{ moneyData.cumulativeProfitAndLoss }}
            </div>
          </div>
        </div>
@@ -63,9 +63,13 @@
    <van-tabs v-model="active" title-inactive-color="#898a8e">
      <van-tab :title="$t('hj2')" name="0" title-style="font-size:0.4rem;"></van-tab>
      <van-tab :title="$t('hj121')" name="1" title-style="font-size:0.4rem;"></van-tab>
      <van-tab :title="$t('hj109')" name="2" title-style="font-size:0.4rem;"></van-tab>
    </van-tabs>
    <div class="mo_list" v-if="active == '0'">
      <div class="mo_all_sell" @click="allsellclick()">
        <div>{{ $t("gball") }}</div>
      </div>
      <div class="mol_item" v-for="(i, index) in list" :key="i.id" @click="open(i, index)">
        <div class="moli_title flex-between">
          <div>
@@ -75,58 +79,7 @@
            {{ i.orderDirection == "买涨" ? $t("gm") : $t("hj78") }}
          </div>
        </div>
        <!-- <div class="moli_orderTitle">
          <span>{{ $t("订单号") }}</span>
          <span style="margin-left: 1em;">{{ i.buyOrderId }}</span>
        </div> -->
        <div style="display:flex;flex-wrap:wrap;padding:0 .3rem .35rem;">
          <!-- <div class="tui-wrapItem flex-start">
            <div>
              {{ $t("Price") }}
            </div>
            <div style="margin-left: .25rem;font-size: .4rem;">
              {{ i.orderTotalPrice }}
            </div>
          </div>
          <div class="tui-wrapItem flex-start" style="width: 46%;">
            <div>
              {{ $t("盈虧") }}
            </div>
            <div
              style="margin-left: .25rem;font-size: .4rem;"
              :style="
                `color:${
                  i.profitAndLose > 0
                    ? 'green'
                    : i.profitAndLose < 0
                    ? 'red'
                    : ''
                }`
              "
            >
              {{ i.profitAndLose }}
            </div>
          </div>
          <div class="tui-wrapItem flex-start">
            <div>
              {{ $t("持倉價") }}
            </div>
            <div style="margin-left: .25rem;">
              {{ i.buyOrderPrice }}
            </div>
          </div>
          <div class="tui-wrapItem flex-start" style="width:100%">
            <div>
              {{ $t("持倉時間") }}
            </div>
            <div style="margin-left: .25rem;">
              {{ $moment(i.buyOrderTime).format("DD-MM-YYYY hh:mm:ss A") }}
            </div>
          </div> -->
          <div class="tui-wrapItem" style="width: 25%;">
            <div style="font-size: 0.28rem;margin-bottom: .25rem;">
              {{ $t("MingCheng") }}/{{ $t("市值") }}
@@ -239,7 +192,7 @@
            </div>
            <div style="margin-left: .25rem;font-size: .4rem;" :style="`color:${i.profitAndLose > 0
              ? 'green'
              : i.profitAndLose < 0
              : i.isZf < 0
                ? 'red'
                : ''
              }`
@@ -290,13 +243,91 @@
        <span>{{ $t("沒有更多了") }}</span>
      </div>
    </div>
    <div class="mo_list" v-if="active == '2'">
      <div class="mol_item" v-for="(i, index) in orderList" :key="i.id" >
        <div class="moli_title flex-between">
          <div>
            {{ i.stockName }}
          </div>
         <div v-if="i.status!=2" @click="cdclick(i.id)" class="mo_all_sells">
           {{ $t("hj126") }}
          </div>
        </div>
        <div style="display:flex;flex-wrap:wrap;padding-bottom: .35rem;margin: 0 10px;">
          <div class="tui-wrapItem flex-start">
            <div>
              {{ $t("hj125") }}
            </div>
            <div style="margin-left: .25rem;font-size: .4rem;">
              {{ i.nowPrice }}
            </div>
          </div>
          <div class="tui-wrapItem flex-start" style="width: 46%;">
            <div>
              {{ $t("hj101") }}
            </div>
            <div style="margin-left: .25rem;font-size: .4rem;" >
              {{ i.lever }}
            </div>
          </div>
          <div class="tui-wrapItem flex-start">
            <div>
              {{ $t("hj270") }}
            </div>
            <div style="margin-left: .25rem;">
              {{ i.buyNum }}
            </div>
          </div>
          <div class="tui-wrapItem flex-start" style="width: 46%;">
            <div>
              {{ $t("hj271") }}
            </div>
            <div style="margin-left: .25rem;">
              {{ i.targetPrice }}
            </div>
          </div>
          <div class="tui-wrapItem">
            <div>
              {{ $t("操作时间") }}
            </div>
            <div>
              {{ i.addTime }}
            </div>
          </div>
          <div class="tui-wrapItem" style="width: 46%;">
            <div>
              {{ $t("状态") }}
            </div>
            <div v-if="i.status==0">
              {{ $t('已挂单') }}
            </div>
            <div v-if="i.status==2">
              {{ $t('买入失败') }}
            </div>
          </div>
        </div>
      </div>
      <div class="more-news">
        <span>{{ $t("沒有更多了") }}</span>
      </div>
    </div>
  </div>
</template>
<script>
let teimss = null;
let teimss = null; // 轮询获取账户金额计时器
let teimss2 = null; // 轮询获取持仓数据计时器
import tabHead from "@/components/tabHead.vue";
import * as api from "@/axios/api";
import { Notify } from "vant";
export default {
  components: {
    tabHead
@@ -306,6 +337,7 @@
      active: "0",
      pageNum: 1,
      pageSize: 9999,
      orderList:[],//挂单列表
      total: 1,
      list: [], // 持仓数据
      list2: [], // 平仓数据
@@ -317,8 +349,20 @@
  watch: {
    active: {
      handler(state) {
        this.pageNum = 1;
        this.getList(state);
        console.log(state);
        if(state==2){
          this.getorderList()
        }else{
          this.pageNum = 1;
          this.getList(state);
          clearInterval(teimss2);
          // 判断如果是获取平仓数据就不再轮询
          if(state == '1') return
          teimss2 = setInterval(() => {
            this.getList(state);
          }, 3000);
        }
      },
      immediate: true
    }
@@ -334,12 +378,27 @@
    this.getMoney();
    teimss = setInterval(() => {
      this.getMoney();
    }, 10000);
    }, 3000);
  },
  beforeDestroy() {
    clearInterval(teimss);
    clearInterval(teimss2);
  },
  methods: {
    async cdclick(id){
      let data = await api.revocationOrder({"id":id});
      if (data.status === 0) {
        Notify({ type: "success", message: data.msg });
        this.getorderList()
      }
    },
    // 获取 挂单 数据
    async getorderList() {
      let data = await api.getorderList();
      if (data.status === 0) {
        this.orderList = data.data
      }
    },
    // 获取 持仓 数据
    async getList(state = 0) {
      let opt = {
@@ -347,11 +406,21 @@
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      let data = await api.getchicang(opt);
      let data = await api.getchicang(opt);
      if (data.status === 0) {
        if (this.active == "0") this.list = data.data.list;
        else this.list2 = data.data.list;
      }
    },
    // 一键平仓
    async allsellclick(){
      let data = await api.allsell();
      if (data.status === 0) {
        Notify({ type: "success", message: data.msg });
        this.getList(state);
      } else {
        Notify({ type: "danger", message: data.msg });
      }
    },
    open(i, index) {
@@ -396,6 +465,25 @@
</script>
<style lang="less" scoped>
  .mo_all_sells{
    padding: 10px 20px;
    background: linear-gradient(90deg, #585fb4, #48529e);
    border-radius: 25px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.mo_all_sell{
  padding: 20px 10px;
  background: linear-gradient(90deg, #585fb4, #48529e);
  border-radius: 25px;
  text-align: center;
  margin: 15px ;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/ .van-tabs__nav {
  background: none;