vue用mand-mobile ui做交易所移动版实战示例
阿里云国际版折扣https://www.yundadi.com |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
vue用mand-mobile ui做交易所移动版实战示例
先展示几个界面：
目录结构：
main.js
// 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/>'
})
router/index.js
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
},
]
})
home.vue
<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>
login.vue
<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>
阿里云国际版折扣https://www.yundadi.com |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |