PC-20250623MANY\Administrator
2025-09-29 58b0f1e9bd03a472321acf1dfc4e89fc4ce9df7a
src/page/user/myOrder.vue
@@ -6,8 +6,17 @@
      <div class="tui-money">
        <div class="normal flex-center">
          <div>
            <div class="text-xs">{{ $t("浮動盈虧") }}</div>
            <div class="price">
            <div class="text-xs">
              {{ $t("浮動盈虧") }}
              <van-icon name="eye-o" />
            </div>
            <div class="price" :style="`color:${moneyData.profitAndLoss > 0
              ? 'red'
              : moneyData.profitAndLoss < 0
                ? 'green'
                : ''
              }`
              ">
              {{ moneyData.symbol }} {{ moneyData.profitAndLoss }}
            </div>
          </div>
@@ -28,7 +37,7 @@
            </div>
          </div>
          <div class="assets-item flex-center" style="align-items: end;">
            <div class="all-size">{{ $t("账户盈亏") }}</div>
            <div class="all-size">{{ $t("平仓盈亏") }}</div>
            <div class="big-size">
              {{ moneyData.symbol }}{{ moneyData.cumulativeProfitAndLoss }}
            </div>
@@ -41,7 +50,7 @@
          </div>
          <div class="control-item flex-center" @click="$router.push('/markets-list')">
            <img src="@/assets/img/mc.png" />
            <div class="action-item-text">{{ $t("gm") }}</div>
            <div class="action-item-text">{{ $t("hj78") }}</div>
          </div>
          <div class="control-item flex-center" @click="$router.push('/Record')">
            <img src="@/assets/img/pc.png" />
@@ -52,25 +61,15 @@
    </div>
    <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('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-tabs>
    <div class="mo_list" v-if="active == '0'">
      <div
        class="mol_item"
        v-for="(i, index) in list"
        :key="i.id"
        @click="open(i, index)"
      >
      <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>
            {{ i.stockSpell }}
@@ -144,9 +143,7 @@
          </div>
          <div class="tui-wrapItem" style="width: 22%;">
            <div
              style="font-size: 0.28rem;margin-bottom: .25rem;text-align: center;"
            >
            <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: center;">
              {{ $t("持股") }}/{{ $t("可卖") }}
            </div>
            <div style="font-size: .4rem;text-align: center;">
@@ -158,9 +155,7 @@
          </div>
          <div class="tui-wrapItem" style="width: 25%;">
            <div
              style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;"
            >
            <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;">
              {{ $t("Current") }}/{{ $t("Cost") }}
            </div>
            <div style="font-size: .4rem;text-align: end;">
@@ -172,37 +167,25 @@
          </div>
          <div class="tui-wrapItem" style="width: 28%;">
            <div
              style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;"
            >
            <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;">
              {{ $t("盈虧") }}/{{ $t("hj141") }}
            </div>
            <div
              style="font-size: .4rem;text-align: end;"
              :style="
                `color:${
                  i.profitAndLose < 0
                    ? 'green'
                    : i.profitAndLose > 0
                    ? 'red'
                    : ''
                }`
              "
            >
            <div style="font-size: .4rem;text-align: end;" :style="`color:${i.profitAndLose < 0
              ? 'green'
              : i.profitAndLose > 0
                ? 'red'
                : ''
              }`
              ">
              {{ i.profitAndLose }}
            </div>
            <div
              style="font-size: .28rem;text-align: end;"
              :style="
                `color:${
                  i.profitAndLose < 0
                    ? 'green'
                    : i.profitAndLose > 0
                    ? 'red'
                    : ''
                }`
              "
            >
            <div style="font-size: .28rem;text-align: end;" :style="`color:${i.profitAndLose < 0
              ? 'green'
              : i.profitAndLose > 0
                ? 'red'
                : ''
              }`
              ">
              {{ i.profitAndLoseParent }}
            </div>
          </div>
@@ -230,12 +213,7 @@
    </div>
    <div class="mo_list" v-if="active == '1'">
      <div
        class="mol_item"
        v-for="(i, index) in list2"
        :key="i.id"
        @click="open(i, index)"
      >
      <div class="mol_item" v-for="(i, index) in list2" :key="i.id" @click="open(i, index)">
        <div class="moli_title flex-between">
          <div>
            {{ i.stockSpell }}
@@ -262,18 +240,13 @@
            <div>
              {{ $t("盈虧") }}
            </div>
            <div
              style="margin-left: .25rem;font-size: .4rem;"
              :style="
                `color:${
                  i.profitAndLose > 0
                    ? 'green'
                    : i.profitAndLose < 0
                    ? 'red'
                    : ''
                }`
              "
            >
            <div style="margin-left: .25rem;font-size: .4rem;" :style="`color:${i.profitAndLose > 0
              ? 'green'
              : i.profitAndLose < 0
                ? 'red'
                : ''
              }`
              ">
              {{ i.profitAndLose }}
            </div>
          </div>
@@ -324,8 +297,11 @@
</template>
<script>
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
@@ -348,6 +324,13 @@
      handler(state) {
        this.pageNum = 1;
        this.getList(state);
        clearInterval(teimss2);
        // 判断如果是获取平仓数据就不再轮询
        if(state == '1') return
        teimss2 = setInterval(() => {
          this.getList(state);
        }, 3000);
      },
      immediate: true
    }
@@ -360,7 +343,14 @@
    }
  },
  created() {
    if (!this.Operation) this.getMoney();
    this.getMoney();
    teimss = setInterval(() => {
      this.getMoney();
    }, 3000);
  },
  beforeDestroy() {
    clearInterval(teimss);
    clearInterval(teimss2);
  },
  methods: {
    // 获取 持仓 数据
@@ -370,15 +360,25 @@
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      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) {
      if (!this.Operation) return;
      // if (!this.Operation) return;
      this.actObj = i;
      this.actIndex = index;
    },
@@ -419,40 +419,59 @@
</script>
<style lang="less" scoped>
.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;
  .van-tab__text--ellipsis {
    overflow: visible;
  }
  .van-tab--active {
    color: #ccc !important;
  }
}
/deep/ .van-tabs__line {
  background-color: rgb(82, 91, 173);
}
.my_order {
  width: 100%;
  font-size: 0.3rem;
  background-color: rgba(#000, 0.9);
  .tui-money {
    margin-top: 0.65rem;
    margin-bottom: 0.3rem;
    width: 100%;
    background: linear-gradient(90deg, #585fb4, #48529e);
    border-radius: 0.175rem;
    .control {
      width: 100%;
      padding: 0.2rem 0.3rem;
      .control-item {
        width: 33%;
        padding-top: .1rem;
        padding-top: 0.1rem;
        flex-direction: column;
        .action-item-text {
          font-size: 0.3rem;
          line-height: 0.3rem;
          color: #aaa;
        }
        img {
          width: 0.5rem;
          height: 0.5rem;
@@ -460,30 +479,36 @@
        }
      }
    }
    .all-assets {
      width: 100%;
      padding: 0.225rem 0.3rem 0.35rem;
      justify-content: space-evenly;
      border-bottom: #aaa solid 1px;
      .assets-item {
        width: 33%;
        flex-shrink: 0;
        flex-direction: column;
        .big-size {
          font-size: 0.35rem;
          color: #fff;
          padding-top: 0.15rem;
        }
        .all-size {
          font-size: 0.35rem;
          color: #c4c7e4;
        }
      }
    }
    .normal {
      padding: 0.375rem 0;
      margin: 0 0.375rem;
      position: relative;
      .price {
        font-size: 0.825rem;
        line-height: 0.825rem;
@@ -491,34 +516,41 @@
        padding-top: 0.3rem;
        color: #fff;
      }
      .text-xs {
        font-size: 0.3rem;
        font-size: 0.45rem;
        color: #c7c9e6;
        text-align: center;
      }
    }
  }
  .mo_list {
    padding: 0 0.35rem;
    .mol_item {
      margin: 0 0 0.3rem;
      background-color: #13161e;
      border-radius: 0.325rem;
      color: #898a8e;
      margin-top: 0.3rem;
      .jiaoyi-action {
        width: 100%;
        height: 1.5rem;
        background-color: #191d27;
        .action-item {
          width: 33%;
          flex-shrink: 0;
          flex-direction: column;
          .action-item-text {
            font-size: 0.3rem;
            line-height: 0.3rem;
            color: #898a8e;
          }
          img {
            width: 0.5rem;
            height: 0.5rem;
@@ -526,16 +558,19 @@
          }
        }
      }
      .tui-wrapItem {
        padding: 0.175rem 0rem 0;
        color: #898a8e;
        width: 54%;
        line-height: 0.4rem;
      }
      .moli_orderTitle {
        padding: 0.3rem 0.3rem 0;
        color: #ccc;
      }
      .moli_title {
        padding: 0.3rem;
        border-bottom: 1px solid #494949;