最新

XIGUASSR

2022-11-10 f891d8d35067d3bb40e2b48ecc4ab28e26f00bcd

最新

 src/main.js

@@ -11,7 +11,7 @@
import state from './event'
import Vant from 'vant';
import 'vant/lib/index.css';
import { Swipe, SwipeItem, Skeleton } from 'vant';
import { Swipe, SwipeItem, Skeleton, Switch } from 'vant';
import './assets/css/style.css';


@@ -44,7 +44,7 @@
Vue.use(Vant);
Vue.use(Mint)
Vue.use(Tab);
Vue.use(Tabs, Popup, DatetimePicker);
Vue.use(Tabs, Popup, DatetimePicker, Switch);
Vue.component('icon', Icon)
Vue.config.productionTip = false
Object.keys(filters).forEach(key => {

 src/page/kline/index.vue

@@ -2,16 +2,72 @@
  <div class="kline_detail_page">
    <div class="content">
      <div class="detail_title">
        <div class="top_back">
          <div class="left_back" @click="handleBack()">
            <img src="../../assets/img/zuojiantou.png" alt />
          </div>
          <div class="right_title">
            <div class="t_t">
              <span>{{ kLineDetails.name }}</span>
        <div class="ti_cont">
          <div class="top_back">
            <div class="left_back" @click="handleBack()">
              <img src="../../assets/img/zuojiantou.png" alt />
            </div>
            <div class="b_t">
              <span>{{ singDetails.code }}</span>
            <div class="right_title">
              <div class="t_t">
                <span>{{ kLineDetails.name }}</span>
              </div>
              <div class="b_t">
                <span>{{ singDetails.code }}</span>
              </div>
            </div>
          </div>
          <div class="right_money sss" @click="openDialog()">
            <div class="content_money">
              <div class="top_price">
                <div class="left">
                  <span>{{ '余额' }}</span>
                </div>
                <div class="right">
                  <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span>
                  <span
                    v-if="$store.state.userInfo&&tabsItemIndex == 1"
                    style="white-space: nowarp;"
                  >
                    {{ '¥' + $store.state.userInfo.userIndexAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 0"
                    style="white-space: nowarp;"
                  >
                    {{ '¥ ' + $store.state.userInfo.userAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 2"
                    style="white-space: nowarp;"
                  >
                    {{ '¥ ' + $store.state.userInfo.userAmt
                    }}
                  </span>
                  <span
                    v-if="$store.state.userInfo&&tabsItemIndex == 3"
                    style="white-space: nowarp;"
                  >
                    {{
                    '¥' + $store.state.userInfo.userFuturesAmt
                    }}
                  </span>
                </div>
                <div class="sanjiao">
                  <img
                    :class="dialogFlag ? 'xuanz' : ''"
                    style="transition: all 0.5s;"
                    src="../../assets/img/xiala.png"
                    alt
                  />
                </div>
              </div>
              <div class="bottom_balance">
                <div>
                  <span>{{ '可用余额' }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
@@ -199,7 +255,7 @@
            <span>{{ '145.533' }}</span>
          </div>
        </div>
        <div class="sell_btn">
        <div class="sell_btn" @click="goBuy()">
          <div class="top_sell">
            <span>{{ '买入' }}</span>
          </div>
@@ -306,12 +362,21 @@
    },
    handleSc() {
      this.scFlag = !this.scFlag;
    },
    goBuy() {
      this.$router.push({
        path: "/TradingBuy"
      });
    }
  }
};
</script>

<style scoped lang="less">
.ti_cont {
  width: 100%;
  display: flex;
}
.kline_detail_page {
  width: 100%;
  height: calc(100% - 1.7rem);
@@ -323,7 +388,12 @@
    position: relative;
  }
}

.sss {
  width: 50%;
  height: 1.2rem;
  display: flex;
  justify-content: flex-end;
}
.detail_title {
  width: 100%;
  height: 3.2rem;
@@ -331,7 +401,7 @@
  background: #fff;

  .top_back {
    width: 100%;
    width: 50%;
    height: 1.2rem;
    display: flex;
    align-items: center;
@@ -731,5 +801,76 @@
  animation: zy 2.5s .15s linear infinite;
  animation: zy 2.5s .15s linear infinite;
  animation: zy 2.5s .15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
  animation: zy 2.5s 0.15s linear infinite;
}
.content_money {
  width: 80%;
  height: 80%;
}
.sanjiao {
  width: 0.4rem;
  height: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 0.4rem;
    height: 0.4rem;
  }
}
.top_price {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .left {
    width: 0.8rem;
    height: 0.4103rem;
    border-radius: 0.1rem;
    background: #4d73b1;
    color: #fff;
    font-size: 0.3077rem;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      display: inline-block;
      transform: scale(0.8);
      font-weight: 600;
    }
  }

  .right {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    min-width: 1.9rem;
    span {
      font-weight: 600;
      text-align: right;
    }
  }
}
.bottom_balance {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: flex-end;
  font-size: 0.3077rem;
  color: #acaeaf;
  transform: scale(0.9);
  margin-left: 0.2rem;
  padding-right: 0.68rem;
}
</style>

 src/page/trading/buy.vue

New file
@@ -0,0 +1,391 @@
<template>
  <div class="buy_page">
    <div class="content">
      <div class="top_cny">
        <div class="top_back">
          <div class="left_back" @click="handleBack()">
            <img src="../../assets/img/zuojiantou.png" alt />
          </div>
          <div class="right_title">
            <div class="t_t">
              <span>{{ '人民币' }}</span>
            </div>
            <div class="b_t">
              <span>{{ 'CNY' }}</span>
            </div>
          </div>
        </div>
        <div class="bottom_buy_price">
          <div class="cot">
            <div class="lefts">
              <div class="top_new">
                <span>{{ '1.34609' }}</span>
              </div>
              <div class="bottom_es">
                <span>{{ '买入价' }}</span>
              </div>
            </div>
            <div class="rights">
              <div class="ese">
                <div class="mr" 
                v-for="(item, index) in tradingArr" 
                :key="index"
                @click="handleTradingClick(index)"
                :class="tabsCurrentIndex === index ? 'active' : ''"
                >
                  <span>{{ item }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="price_tabs">
          <div class="tabs">
            <div class="tab_item" 
            v-for="(item, index) in priceTabs" 
            :key="index"
            @click="handleTabsClick(item, index)"
            :class="priceTabsCurrentIndex === index ? 'active' : ''"
            >
              <span>{{ item }}</span>
            </div>
          </div>
          <div class="tabs_content">
            <div class="num">
              <span>{{ '交易数量(手)' }}</span>
            </div>
            <div class="tr_es">
              <div class="top_input">
                <input type="text" v-model="num">
              </div>
            </div>
            <div class="tr_rs gg">
              <div class="top_bzz">
                <span>{{ '杠杆' }}</span>
                <span>{{ '200X' }}</span>
              </div>
              <div class="bottom_bzz">
                <span>{{  }}</span>
                <span>{{  }}</span>
              </div>
            </div>
            <div class="tr_rs">
              <div class="top_bzz">
                <span>{{ '需付保证金(¥)' }}</span>
                <span>{{ '可用余额(¥)' }}</span>
              </div>
              <div class="bottom_bzz">
                <span>{{ '5.00' }}</span>
                <span>{{ '49,698.61' }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="switchs">
          <div class="zy"
          v-for="(item, index) in profitArr"
          :key="index"
          >
            <div class="left_zy">
              <span>{{ item.name }}</span>
            </div>
            <div class="right_sw">
              <van-switch v-model="item.checked" />
            </div>
          </div>
        </div>
        <div class="btn_buy">
          <div>
            <span>{{ '买入' }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'trBuy',
  data() {
    return {
      tradingArr: ['卖出', '买入'],
      tabsCurrentIndex: 0,
      priceTabs: ['市单价', '挂单'],
      priceTabsCurrentIndex: 0,
      num: 0.01,
      profit: false,
      profitArr: [
        {
          name: '止盈',
          checked: false
        },
        {
          name: '止损',
          checked: false
        },
        {
          name: '追踪止损',
          checked: false
        }
      ]
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    handleTradingClick(index) {
      this.tabsCurrentIndex = index;
    },
    handleTabsClick(item, index) {
      this.priceTabsCurrentIndex = index;
    }
  }
};
</script>

<style scoped lang="less">
.buy_page {
  width: 100%;
  height: calc(100% - 1.7rem);
  > .content {
    width: 100%;
    height: 100%;
    position: relative;
  }
}
.top_cny {
  width: 100%;
  height: 3.5385rem;
  .top_back {
    width: 100%;
    height: 1.2rem;
    display: flex;
    align-items: center;
    padding: 0 .1rem;
    .left_back {
      width: 0.8rem;
      height: 80%;
      display: flex;
      align-items: center;
      > img {
        margin-top: 0.2rem;
        width: 0.6rem;
        height: 0.6rem;
      }
    }
    .right_title {
      width: 3rem;
      height: 80%;
      .t_t {
        width: 100%;
        height: 70%;
        display: flex;
        align-items: center;
        font-size: 0.4615rem;
        span {
          font-weight: 600;
        }
      }
      .b_t {
        width: 100%;
        height: 30%;
        font-size: 0.3615rem;
        display: flex;
        align-items: flex-start;
        color: #8c8c8c;
      }
    }
  }
  .bottom_buy_price {
    width: 100%;
    height: 2rem;
    display: flex;
    align-items: center;
    padding: 0 .8rem;
    margin-top: .3rem;
    .cot {
      width: 100%;
      height: 1.2rem;
      display: flex;
      .lefts {
        width: 40%;
        height: 100%;
        .top_new {
          width: 100%;
          height: 60%;
          font-size: .5615rem;
          color: rgb(232,55,70);
          span {
            font-weight: 600;
          }
        }
        .bottom_es {
          width: 100%;
          height: 40%;
          color: rgb(173, 173, 173);
        }
      }
      .rights {
        width: 60%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        >div {
          width: 65%;
          height: 80%;
          display: flex;
          justify-content: space-between;
          > div {
            width: 45%;
            height: 70%;
            background: rgb(236, 236, 236);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: .1rem;
            color: rgb(173, 173, 173);
          }
          .active {
            background: #fff;
            color: rgb(110,169,118);
            span {
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}
.price_tabs {
  width: 100%;
  height: 7rem;
  padding: .2rem .8rem;
  background: #fff;
  margin-top: .1rem;
  .tabs {
    width: 100%;
    height: .8205rem;
    background: rgb(247,247,247);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .15rem;
    > div {
      width: 49%;
      height: 80%;
      border-radius: .15rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      background: #fff;
      span {
        font-weight: 600;
      }
    }
  }
  .tabs_content {
    width: 100%;
    margin-top: .3rem;
    .num {
      width: 100%;
      height: .5rem;
    }
    .tr_es {
      width: 100%;
      height: 1.3rem;
      margin-top: .3rem;
      border-bottom: 0.05rem solid rgb(236, 236, 236);
      .top_input {
        width: 100%;
        height: 70%;
        font-size: .6615rem;
        input {
          font-weight: 600;
        }
      }
    }
    .tr_rs {
      width: 100%;
      height: 1.3rem;
      margin-top: .4rem;
      > div {
        width: 100%;
        height: 50%;
        color: rgb(160, 160, 160);
        display: flex;
        justify-content: space-between;
        span {
          font-weight: 600;
        }
      }
      .bottom_bzz {
        color: #000;
        font-size: .3846rem;
        span {
          font-weight: 600;
        }
      }
      .top_bzz {
        align-items: center;
      }
    }
    .gg {
      font-size: .3803rem;
      border-bottom: 0.05rem solid rgb(236, 236, 236);
      > div {
        color: #000;
      }
    }
  }
}
.switchs{
  width: 100%;
  height: 6rem;
  padding: 0 .8rem;
  background: #fff;
  margin-top: .3rem;
  .zy {
    width: 100%;
    height: 1.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.05rem solid rgb(236, 236, 236);
    >div {
      width: 20%;
      height: 50%;
      display: flex;
      align-items: center;
      font-size: .3346rem;
    }
    .right_sw {
      justify-content: flex-end;
    }
  }
}
.btn_buy{
  width: 100%;
  height: 4.8rem;
  background: #fff;
  padding: .2rem .8rem;
  display: flex;
  align-items: flex-end;
  > div {
    width: 100%;
    height: 1.2821rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(68,155,84);
    color: #fff;
    font-size: .3846rem;
    border-radius: .15rem;
  }
}
</style>

 src/router/index.js

@@ -48,6 +48,7 @@
import NewPage from '@/page/home/newPage'
import NewGg from '@/page/home/newGg'
import KLine from '@/page/kline/index.vue'
import TradingBuy from '@/page/trading/buy.vue'

Vue.use(Router)

@@ -611,6 +612,18 @@
      component: KLine
    },
    {
      path: '/TradingBuy',
      name: 'TradingBuy',
      meta: {
        title: '图标',
        requireAuth: false,
        hasHeader: false,
        index: 50,
        show: true
      },
      component: TradingBuy
    },
    {
      // 会匹配所有路径
      path: '*',
      redirect: '/home'