stock-front/src/views/position/PositionIndex.vue

<template>
    <!-- 持仓情况 -->
    <div class="positionPage flex-col">
        <div class="listBox">
            <s-header :name="$t('position.machineSalesRanking')" :noback="true" :isFixed="false"></s-header>
            <van-list v-model:loading="loading" v-model:error="error" :error-text="$t('public.requestFailed')"
                :finished="finished" :finished-text="$t('public.noMore')" offset="100" :immediate-check="false"
                @load="onLoad">
                <!-- 持仓情况 -->
                <div class="positionBox1 flex-col">
                    <div class="searchRow flex-row justify-between">
                        <div class="flex-col">
                            <div class="flex-row justify-between bd3">
                                <div class="flex-col outer4"></div>
                                <span class="flex-col txt2">
                                    持仓情况</span>
                            </div>
                        </div>
                    </div>
                    <img class="pic1" src="../../assets/device/line.png" />
                    <!-- 股价/盈亏 -->
                    <div class="o-plr-15 o-ptb-20">
                        <div class="bd1 flex-col">
                            <div class="box2 l-f l-flex-c l-flex-j-a">

                                <!-- <div class="TextGroup flex-col">
                                    <div class="main6 flex-col justify-between align-center">
                                        <span class="word5">{{ twoNumber(currentPrice) }}</span>
                                        <span class="word6">当前股价￥</span>
                                    </div>
                                </div> -->

                                <div class="TextGroup flex-col">
                                    <div class="main6 flex-col justify-between align-center">
                                        <span class="word5">{{ stockNum }}</span>
                                        <span class="word6">持仓份额</span>
                                    </div>
                                </div>

                                <div class="TextGroup flex-col">
                                    <div class="main6 flex-col justify-between align-center">
                                        <span class="word5">{{ twoNumber(dailyDiff) }}</span>
                                        <span class="word6">当日盈亏￥</span>
                                    </div>
                                </div>

                                <div class="TextGroup flex-col">
                                    <div class="main6 flex-col justify-between align-center">
                                        <span class="word5">{{ twoNumber(totalDiff) }}</span>
                                        <span class="word6">总盈亏￥</span>
                                    </div>
                                </div>

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

                <div class="positionBox1 flex-col">
                    <div class="searchRow flex-row justify-between">
                        <div class="flex-col">
                            <div class="flex-row justify-between bd3">
                                <div class="flex-col outer2"></div>
                                <span class="flex-col txt2">
                                    挂单历史</span>
                            </div>
                        </div>
                        <!-- 菜单，搜索 -->
                        <div class="flex-col">
                            <div class="main5 flex-row justify-between">
                                <!-- <van-popover v-model:show="showPopover" placement="left-start" theme="dark"
                                    :actions="actions" @select="selectLabel">
                                    <template #reference>
                                        <van-icon name="bars" class="fixed-icon o-pr-15" style="font-size: 0.55rem;"
                                            color="#4d6add" />
                                    </template>
</van-popover> -->
                                <img class="label2" src="../../assets/position/searchIcon.png" @click="searchClick" />
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 挂单历史列表 -->
                <div class="positionBox2 flex-col justify-between">
                    <div class="section1 flex-col">
                        <div class="outer1 flex-col o-plr-15">
                            <div v-if="hisLength === 0">
                                <van-empty image="search" description="暂无挂单历史" />
                            </div>
                            <div v-else>
                                <!-- <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了"
                                    @load="onLoad"> -->
                                <div v-for="item in orderHisList" :key="item.id">
                                    <van-card>
                                        <template #title>
                                            <span class="word13">挂单数量：{{ item.entrustNumber }} 股
                                                &nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        </template>
                                        <template #desc>
                                            <span class="word11">&nbsp;&nbsp;&nbsp;&nbsp;创建时间：{{ item.createTime
                                                }}</span>
                                        </template>
                                        <template #tags>
                                            <div v-if="item.type === '1'">交易类型：<van-tag type="warning">买入</van-tag>
                                            </div>
                                            <div v-else>交易类型：<van-tag type="success">卖出</van-tag></div>
                                            <!-- <van-tag  type="danger">挂单失败</van-tag> -->
                                        </template>
                                        <template #price-top>
                                            <!-- status 状态：0过期，1生效，2撤单，3全部成交，4部分成交 -->
                                            <!-- <div>
                  交易状态：<van-tag plain round type="danger">{{ showStatusText(item.status) }}</van-tag>
                </div> -->
                                            <div v-if="item.status === '0'">挂单状态：<van-tag plain round
                                                    type="danger">过期</van-tag></div>
                                            <div v-else-if="item.status === '1'">挂单状态：<van-tag plain round
                                                    type="success">匹配中</van-tag></div>
                                            <div v-else-if="item.status === '2'">挂单状态：<van-tag plain round>撤单</van-tag>
                                            </div>
                                            <div v-else-if="item.status === '3'">挂单状态：<van-tag plain round
                                                    type="primary">匹配成功</van-tag></div>
                                            <div v-else-if="item.status === '4'">挂单状态：<van-tag plain round
                                                    color="#6b6bff">部分匹配成功</van-tag></div>
                                            <div v-else>挂单状态：<van-tag plain round>未知状态</van-tag></div>
                                        </template>
                                        <template #price>
                                            <span class="txt9">每股单价
                                                ：￥{{ item.price }}
                                            </span>
                                        </template>
                                    </van-card>
                                    <br>
                                </div>
                                <!-- </van-list> -->
                            </div>
                            <!-- <van-back-top @click="backTop" right="5vw" bottom="10vh" /> -->
                        </div>
                    </div>
                </div>
            </van-list>
        </div>

        <!-- 搜索弹出框 -->
        <SearchPop ref="searchRef" @search="search($event)"></SearchPop>

        <div style="height: 50px;"></div>
        <!-- <nav-bar></nav-bar> -->
    </div>
</template>


<script setup>
// 导入无数据组件
import sHeader from "@/components/SimpleHeader"
import { onMounted, reactive, ref } from "vue"
import { listMyOrderHis, getMyStock } from "@/service/position";
import SearchPop from "./SearchPop";
import { showFailToast } from "vant";

const orderHisList = ref([]);
const error = ref(false);

const loading = ref(false)
const finished = ref(false)
const hisLength = ref(0)
const stockNum = ref(0)

function twoNumber(val) {
    const num = parseFloat(val)
    if (!isNaN(num)) {
        return num.toFixed(2)
    } else {
        return val
    }
}

// 滚动加载
const onLoad = async () => {
    // console.log("finished >>>", finished.value);
    if (!finished.value) {
        loading.value = true
        searchParams.current = searchParams.current + 1;
        getList();
        getMyStockFunc();
    }
};

let searchParams = reactive({
    current: 1, // 当前页，默认1
    size: 10, // 页大小，默认10条
})

// 查询列表
const init = () => {
    getMyStockFunc();
    orderHisList.value = [];
    searchParams.current = 1;
    getList();
};

const getList = async () => {
    finished.value = false;
    const params = Object.assign({}, searchParams);
    const { data } = await listMyOrderHis(params);
    console.log("data.data >>>", data.data);
    if (data.code === "00000") {
        if (searchParams.current === 0) {
            orderHisList.value = [];
        }
        // 列表叠加
        orderHisList.value = orderHisList.value.concat(
            data.data.records
        );
        // hisLength.value = orderHisList.value.length
        hisLength.value = data.data.total
        if (orderHisList.value.length >= data.data.total) {
            finished.value = true;
        }
        // 加载状态结束
        loading.value = false;
    } else {
        showFailToast(data.message);
    }

}

onMounted(() => {
    init();
});

const buyPrice = ref()
const currentPrice = ref()
const dailyDiff = ref()
const totalDiff = ref()

const getMyStockFunc = async () => {
    const { data } = await getMyStock();
    if (data.code === '00000') {
        buyPrice.value = data.data.buyPrice
        currentPrice.value = data.data.currentPrice
        dailyDiff.value = data.data.dailyDiff
        totalDiff.value = data.data.totalDiff
        stockNum.value = data.data.stockNum
    }
}

const searchRef = ref(null);

// 搜索点击
const searchClick = () => {
    searchRef.value.showSearch();
};

// 搜索条件触发查询
const search = (e) => {
    orderHisList.value = [];
    loading.value = true;
    searchParams.current = 1;
    searchParams = Object.assign(searchParams, e);
    getList();
};


</script>

<style lang="less" scoped>
@import "../../common/style/common";
@import "../../styles/position/index";
</style>