// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import * as FastClick from "fastclick"

import App from './App'

import router from './router'

import './styles/theme.styl'

import './styles/global.css'

import store from './store/store'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

import qs from 'qs';

Vue.prototype.$qs = qs;

// 引入vue-cookies

import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

//import $ from 'jquery'

//import 'jquery'

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */

window.Vue = new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: '<App/>'

})

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/views/home'

import Home2 from '@/views/home2'

import Login from '@/views/login'

import verificationMobile from '@/views/verificationMobile'

import verificationGoogle from '@/views/verificationGoogle'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'Home',

      component: Home

    },

    {

      path: '/home2',

      name: 'Home2',

      component: Home2

    },

    {

      path: '/login',

      name: 'Login',

      component: Login

    },

    {

      path: '/verificationMobile',

      name: 'verificationMobile',

      component: verificationMobile

    },

    {

      path: '/verificationGoogle',

      name: 'verificationGoogle',

      component: verificationGoogle

    },

  ]

})

<template>

  <main id="home" class="view" role="main">

    <div class="heading">

      <h1>

        <span>行情</span>

      </h1>

    </div>

    <div class="toptabs">

      <md-tabs :titles="titles">

        <div v-for="(bbTitle,index) in bbTitles" :key="index">

        <md-field title >

          <md-field-item name="item0" @click="onClick">

            <div slot="left">交易量</div>

            <div slot="default">价格</div>

            <div slot="right">日涨跌</div>

          </md-field-item>

          <div v-for="(coin,index) in bbTitle.coin_list" :key="index">

          <md-field-item name="item1" @click="onClick">

            <div slot="left">

              <div class="coin_img">

                <img :src="$store.state.apis + coin.icon">

              </div>

              <div class="coin_info">

                <div class="coin_name">{{coin.title_en.toUpperCase()}}</div>

                <div class="coin_volume">{{coin.trade_num}}</div>

              </div>

            </div>

            <div slot="default">

              <div class="coin_price">

                <div class="price_usdt">{{coin.price}}</div>

                <!-- <div class="price_rmb">{{coin.price}}</div> -->

              </div>

            </div>

            <div slot="right">

              <md-button type="warning" class="coin_up" v-if="coin.is_rise == 1 || coin.is_rise == 0">+{{coin.rise_range}}%</md-button>

              <md-button type="warning" class="coin_down" v-if="coin.is_rise == 2">{{coin.rise_range}}%</md-button>

            </div>

          </md-field-item>

          </div>

        </md-field>

        </div>

      </md-tabs>

    </div>

    <div class="footer_nav">

      <md-tab-bar

      :show-ink-bar="false">

      <div>

        <md-icon name="hollow-plus" size="lg"></md-icon>

        <div>行情</div>

      </div>

      <div>

        <md-icon name="circle-right" size="lg"></md-icon>

        <div>币币</div>

      </div>

      <div @click="handleClick">

        <md-icon name="right" size="lg"></md-icon>

        <div>我的</div>

      </div>

    </md-tab-bar>

    </div>

  </main>

</template>

<script>

import {

  Button,

  Toast,

  Tabs,

  TabBar,

  Field,

  FieldItem,

  Icon,

  Dialog

} from "mand-mobile";

export default {

  name: "home-view",

  data() {

    return {

      titles: ["USDT","OCC", "ETH", "BTC"],

      bbTitles: [],

      bbListShow: false,

    };

  },

  created(){

    this.bbList();

  },

  components: {

    [Field.name]: Field,

    [FieldItem.name]: FieldItem,

    [TabBar.name]: TabBar,

    [Tabs.name]: Tabs,

    [Icon.name]: Icon,

    [Button.name]: Button

  },

  methods: {

    // 获取币币列表数据

    bbList(){

      this.$http.post(this.$store.state.apis + "/Index/Trade/tradeMenu",{}).then( res => {

        var self = this;

        var arr = res.data.data;

        this.bbTitles = [arr[3],arr[2],arr[1],arr[0]];

        console.log('bb列表数据');

        console.log(this.bbTitles);

        this.bbListShow = true;

      });

    },

  }

};

</script>

<style>

.heading {

  text-align: center;

  margin-top: 20px;

}

.heading h1 {

  line-height: 1.15;

  font-size: 45px;

  color: #011627;

  font-weight: bold;

  text-align: center;

}

.heading h1 span {

  position: relative;

}

.toptabs{

  padding: 10px 0px 20px 20px;

}

.md-tab-bar .md-tab-title.active {

  color: #ff384f !important;

}

.md-tab-bar .ink-bar {

  background: #ff384f !important;

}

.md-field-item-extra {

  width: 35%;

}

.md-field-item-content {

  width: 32%;

}

.md-field-right {

  width: 33%;

}

.md-field .md-field-content .md-field-item {

  padding-left: 0px !important;

  padding-right: 0px !important;

}

.md-tabs .md-tab-content-wrapper .md-tab-content{

  overflow-y: hidden !important;

}

.coin_img {

  float: left;

  margin-right: 10px;

}

.coin_img img {

  width: 60px;

  height: 60px;

}

.coin_info {

  float: right;

}

.coin_info .coin_name {

  display: block;

  font-size: 35px;

  font-weight: 600;

  color: rgba(1, 22, 39, 1);

}

.coin_info .coin_volume {

  display: block;

  font-size: 25px;

  font-weight: 400;

  color: rgba(146, 149, 157, 1);

}

.coin_price {

  float: right;

}

.coin_price .price_usdt {

  display: block;

  text-align: left;

  font-size: 35px;

  font-weight: 600;

  color: rgba(1, 22, 39, 1);

}

.coin_price .price_rmb {

  display: block;

  text-align: left;

  font-size: 25px;

  font-weight: 400;

  color: rgba(146, 149, 157, 1);

}

.coin_up {

  font-size: 25px;

  font-weight: 600;

  color: #ffffff;

  background-color: #fc4c4c !important;

  padding: 20px;

  width: 170px;

}

.coin_down {

  font-size: 25px;

  font-weight: 600;

  color: #ffffff;

  background-color: #05c19e !important;

  padding: 20px;

  width: 170px;

}

.footer_nav{

  margin-top: 10px;

  position: fixed;

            left: 0px;

            bottom: 0px;

            width: 100%;

            padding-bottom: 20px;

}

</style>

<template>

  <main id="home" class="view" role="main">

    <div class="heading">

      <div class="cross">

        <md-icon name="cross" size="lg" @click="goback()"></md-icon>

      </div>

      <div class="title">登录</div>

    </div>

    <div>

      <md-field>

        <md-input-item ref="input0" v-model="username" title placeholder="用户名/手机号码" :maxlength="12"></md-input-item>

        <md-input-item ref="input1" v-model="password" type="password" title placeholder="登录密码" :maxlength="16"></md-input-item>

        <md-input-item ref="input2" v-model="code" placeholder="请输入验证码" :maxlength="4">

          <img

            slot="right"

            class="verificationCode"

            :src="srcImg"

            @click="changeSrcImg()"

            title=""

          >

        </md-input-item>

      </md-field>

    </div>

    <div class="login">

      <md-button @click="loginBtn" class="login-btn">登录</md-button>

    </div>

  </main>

</template>

<script>

import {

  Button,

  Toast,

  Tabs,

  TabBar,

  Field,

  FieldItem,

  InputItem,

  Icon,

  Dialog

} from "mand-mobile";

import $ from 'jquery';

//import axios from 'axios';

import qs from 'qs';

export default {

  name: "login-view",

  data() {

    return {

      username: '',

      password: '',

      code: '',

      srcImg: "",

    };

  },

  created() {

    var this_ = this;

    this.$http.post(this.$store.state.apis + "/index/index/getToken",qs.stringify({})).then( res => {

        this.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

        this.axios.defaults.headers.post['token'] = res.data.data.token;

        this.axios.defaults.headers.post['lang'] = 'null';

        this.axios.defaults.withCredentials = true;// 跨域携带cookie

        this.$cookies.set("token", res.data.data.token);

    })

    setTimeout(function() {

      this_.changeSrcImg();

    }, 100);

  },

  components: {

    [Field.name]: Field,

    [FieldItem.name]: FieldItem,

    [InputItem.name]: InputItem,

    [TabBar.name]: TabBar,

    [Tabs.name]: Tabs,

    [Icon.name]: Icon,

    [Button.name]: Button

  },

  methods: {

    goback() {

      this.$router.go(-1);

    },

    changeSrcImg() {

      this.srcImg =

        this.$store.state.apis + "/index/login/verify" +

        "?time=" +

        new Date().getTime();

    },

    loginBtn(){

      // console.log("loginBtn")

        var _this = this;

        if(this.username == "" || this.username == null || this.username.length < 6 || this.username.length > 12){

            Toast.failed('用户名输入错误！');

            this.changeSrcImg();

            return;

        }

        if(this.password == "" || this.password == null || this.password.length < 6 || this.password.length > 16){

            Toast.failed('密码输入错误！');

            this.changeSrcImg();

            return;

        }

        if(this.code == '' || this.code == null){

            Toast.failed('请输入图形验证码');

            this.changeSrcImg();

            return;

        }

        $(".login-btn").attr("disabled","disabled").css({backgroundColor:"#ccc",borderColor:"#ccc",cursor: "not-allowed"}).children("div").text("正在登录...")

        this.$http.post(this.$store.state.apis + "/index/login/loginact",

        qs.stringify({username:this.username,password:this.password,code:this.code}))

        .then(res => {

                if(res.data.code == 1){

                  // console.log(res.data)

                    if(res.data.data.verifyType == 0){

                        this.$store.state.token = res.data.data.token;

                        Toast.succeed('登录成功');

                        setTimeout(function(){

                            _this.$store.commit("userInfo",_this);

                            _this.$router.push("/");

                        },500);

                    }else if(res.data.data.verifyType == 1){

                        this.$router.push({ path: '/verificationGoogle'});

                    }else if(res.data.data.verifyType == 2){

                        this.$router.push({ path: '/verificationMobile'});

                    }

                }else {

                    Toast.failed(res.data.msg);

                    this.changeSrcImg();

                    $(".login-btn").removeAttr("disabled").css({backgroundColor:"#fc9153",borderColor:"#fc9153",cursor: "pointer"}).children("div").text("登录");

                }

        })

        .catch(function (error) {

          console.log(error);

        });

    }

  }

};

</script>

<style>

.heading {

  text-align: right;

  clear: both;

  margin-bottom: 30px;

}

.heading .title {

  text-align: left;

  padding-left: 40px;

  line-height: 1.15;

  font-size: 50px;

  color: #011627;

  font-weight: bold;

}

.heading .cross {

  text-align: right;

  padding: 0px 20px 20px 0px;

}

.md-input-item-right{

width: 250px !important;

}

.verificationCode {

  width: 250px !important;

  display: block;

  margin-left: 10px;

  cursor: pointer;

}

.login {

  padding: 20px;

  margin-top: 40px;

}

</style>