123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- <template>
- <view class="history-box" :rise-fall="stocksColor">
- <headContent borderBottom>
- <template #left>
- <reverse-back />
- </template>
- <template #content>
- <view class="haed-title">
- 合约历史
- </view>
- </template>
- </headContent>
- <view class="swiper-lable">
- <template v-for="(item , index) in historyLable">
- <view @click.stop="historyIdex = index"
- :class="['swiper-lable-item' , historyIdex === index ? 'active-swiper-lable' : '']">
- {{ item.name }}
- </view>
- </template>
- </view>
- <view class="">
- <!-- <u-swiper :list="list1" @change="change" ></u-swiper> -->
- <swiper class="swiper-content" :current="historyIdex"
- :style="{'height': swiperHeight ? `${swiperHeight}px` : '' }" :duration="200">
- <swiper-item class="swiper-item-box">
- <at-present :listHeight="swiperHeight" :status="historyLable[historyIdex].status"
- :legal_id="legal_id" :currency_id="currency_id" />
- </swiper-item>
- <swiper-item class="swiper-item-box">
- <history-entrust :listHeight="swiperHeight" :status="historyLable[historyIdex].status"
- :legal_id="legal_id" :currency_id="currency_id" />
- </swiper-item>
- <swiper-item>
- <history-freight-space :listHeight="swiperHeight" :status="historyLable[historyIdex].status" @shareContent="val => $refs.shareRef.openShare(val)"/>
- </swiper-item>
- <swiper-item>
- <turnover :listHeight="swiperHeight" :status="historyLable[historyIdex].status" />
- </swiper-item>
- </swiper>
- </view>
-
- <sharePage ref="shareRef" :shareType="2"></sharePage>
- </view>
- </template>
- <script>
- import {
- mapGetters
- } from 'vuex'
- import entrust from "../sustainability/entrust.vue"
- import atPresent from "./at-present.vue"
- import historyEntrust from "./history-entrust.vue"
- import historyFreightSpace from "./history-freight-space.vue"
- import turnover from "./turnover.vue"
- import {
- Api_getRegister
- } from "@/api/index.js"
- export default {
- name: 'contract-history',
- components: {
- entrust,
- historyEntrust,
- historyFreightSpace,
- turnover,
- atPresent
- },
- data() {
- return {
- legal_id: '',
- currency_id: '',
- swiperHeight: 0,
- historyIdex: 0,
- historyLable: [
- // 类型:
- // -1:历史仓位;
- // 3:成交记录;
- // 0:当前委托;
- // 1:当前持仓
- // (无历史委托,成交的委托会转 1 当前持仓,成交后转 成交记录)
- {
- name: '当前委托',
- status: 0,
- },
- {
- name: '历史委托',
- status: 999,
- },
- {
- name: '历史仓位',
- status: -1,
- },
- {
- name: '成交记录',
- status: 3,
- }
- ],
- historyData: [
- [],
- [],
- []
- ]
- };
- },
- computed: {
- ...mapGetters([
- "stocksColor",
- 'PageContentHeight'
- ])
- },
- watch: {
- PageContentHeight: {
- handler(newH) {
- if (newH) {
- this.swiperHeight = newH - uni.upx2px(96);
- }
- },
- immediate: true
- },
- },
- onLoad(opt) {
- this.legal_id = opt?.legal_id;
- this.currency_id = opt?.currency_id;
- // ?legal_id=3¤cy_id=1
- },
- mounted() {
- },
- methods: {
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "~../sustainability/index.scss";
- .history-box {
- width: 100%;
- height: 100vh;
- // <view class="swiper-lable">
- // <template v-for="(item , index) in historyLable">
- // <view class="swiper-lable-item">{{ item.name }}</view>
- // </template>
- // </view>
- .swiper-lable {
- padding: 0 $pages-padding;
- width: 100%;
- height: 96rpx;
- border-bottom: 1rpx solid $border-color;
- background-color: #fff;
- display: flex;
- align-items: stretch;
- .swiper-lable-item {
- display: flex;
- align-items: center;
- font-size: 28rpx;
- color: $SizeColor3;
- font-weight: 700;
- &:nth-child(n + 2) {
- margin-left: 30rpx;
- }
- }
- .active-swiper-lable {
- position: relative;
- color: $Theme-Color;
- &::before {
- content: '';
- position: absolute;
- left: 50%;
- bottom: 0;
- width: 40rpx;
- height: 7rpx;
- background-color: $Theme-Color;
- transform: translateX(-50%);
- border-radius: 8rpx;
- }
- }
- }
- .swiper-content {
- width: 100%;
- .swiper-item-box {
- width: 100%;
- height: 100%;
- }
- .swiper-list {}
- }
- }
- </style>
|