Skip to content

L
light-bet
提交 c6becd8e authored 作者: ling's avatar ling
浏览文件
操作

add security center

上级 da6bd765
隐藏空白字符变更
内嵌 并排
正在显示 包含 615 行增加 和 53 行删除
api/user.js
浏览文件 @ c6becd8e
...@@ -18,4 +18,9 @@ export const login = async (data) => { ...@@ -18,4 +18,9 @@ export const login = async (data) => {
export const getInfo = async () => { export const getInfo = async () => {
const result = await fetcher('api/member/getInfo', 'GET') const result = await fetcher('api/member/getInfo', 'GET')
return result return result
}
export const getBanner = async () => {
const result = await fetcher('api/banner/list', 'GET')
return result
} }
\ No newline at end of file
components/Footer.vue
浏览文件 @ c6becd8e
<!-- Please remove this file from your project --> <!-- Please remove this file from your project -->
<template> <template>
<div v-if="displayStatus"> <div v-if="displayStatus">
<van-tabbar class="footer" v-model="active"> <van-tabbar class="footer" v-model="active">
<van-tabbar-item to="/"> <van-tabbar-item to="/">
<img src="@/assets/images/footer/index.png"> <img src="@/assets/images/footer/index.png" />
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item to="/plaza"> <van-tabbar-item to="/plaza">
<img src="@/assets/images/footer/plaza.png"> <img src="@/assets/images/footer/plaza.png" />
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item to="/customer"> <van-tabbar-item to="/customer">
<img src="@/assets/images/footer/customer.png"> <img src="@/assets/images/footer/customer.png" />
</van-tabbar-item> </van-tabbar-item>
<van-tabbar-item to="/my"> <van-tabbar-item to="/my">
<img src="@/assets/images/footer/my.png"> <img src="@/assets/images/footer/my.png" />
</van-tabbar-item> </van-tabbar-item>
</van-tabbar> </van-tabbar>
</div> </div>
...@@ -26,23 +26,40 @@ export default { ...@@ -26,23 +26,40 @@ export default {
}; };
}, },
watch: { watch: {
'$nuxt.$route.name'(data) { "$nuxt.$route.name"(data) {
this.navbarDisplay(data) switch (data) {
case "index":
this.active = 0;
break;
case "plaza":
this.active = 1;
break;
case "customer":
this.active = 2;
break;
case "my":
this.active = 3;
break;
default:
this.active = null;
break;
}
this.navbarDisplay(data);
}, },
}, },
mounted() { mounted() {
this.navbarDisplay(this.$nuxt.$route.name) this.navbarDisplay(this.$nuxt.$route.name);
}, },
methods: { methods: {
navbarDisplay(data) { navbarDisplay(data) {
switch (data) { switch (data) {
case 'login': case "login":
case 'register': case "register":
this.displayStatus = false this.displayStatus = false;
break break;
default: default:
this.displayStatus = true this.displayStatus = true;
break break;
} }
}, },
}, },
...@@ -57,6 +74,6 @@ export default { ...@@ -57,6 +74,6 @@ export default {
} }
.van-tabbar-item--active { .van-tabbar-item--active {
background-color: transparent background-color: transparent;
} }
</style> </style>
pages/index.vue
浏览文件 @ c6becd8e
...@@ -2,10 +2,9 @@ ...@@ -2,10 +2,9 @@
<div class="index"> <div class="index">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white"> <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>1</van-swipe-item> <van-swipe-item v-for="item in bannerList" :key="item.id">
<van-swipe-item>2</van-swipe-item> <img :src="`${item.url}`" />
<van-swipe-item>3</van-swipe-item> </van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe> </van-swipe>
<img class="index-recommend" src="@/assets/images/index/recommend.png"> <img class="index-recommend" src="@/assets/images/index/recommend.png">
...@@ -84,8 +83,27 @@ ...@@ -84,8 +83,27 @@
</template> </template>
<script> <script>
import { getBanner } from '~/api/user.js'
export default { export default {
name: 'IndexPage' name: 'IndexPage',
data() {
return {
bannerList: [],
};
},
created() {
this.getBanner()
},
methods: {
async getBanner() {
try {
const res = await getBanner()
this.bannerList = res.data.rows
} catch (err) {
console.log(err)
}
},
}
} }
</script> </script>
......
pages/my.vue
浏览文件 @ c6becd8e
<template> <template>
<div class="my"> <div class="my">
<div class="my-customer"> <div class="my-customer">
<img src="@/assets/images/my/customer.png"> <img
src="@/assets/images/my/customer.png"
@click="$router.push('/customer')"
/>
</div> </div>
<div class="my-header"> <div class="my-header">
<div v-if="loginStatus"> <div v-if="loginStatus">
<img :src="require(`@/assets/images/my/${userInfo.avator? userInfo.avator : 'avator'}.png`) "> <img
{{userInfo.userName}} :src="
require(`@/assets/images/my/${
userInfo.avator ? userInfo.avator : 'avator'
}.png`)
"
/>
{{ userInfo.userName }}
</div> </div>
<div v-else> <div v-else>
<img src="@/assets/images/my/avator.png"> <img src="@/assets/images/my/avator.png" />
<nuxt-link class="my-header-tip" to="/login">点击登录/注册</nuxt-link> <nuxt-link class="my-header-tip" to="/login">点击登录/注册</nuxt-link>
</div> </div>
<div>></div> <div>></div>
...@@ -17,36 +26,62 @@ ...@@ -17,36 +26,62 @@
<div class="my-info"> <div class="my-info">
<div> <div>
<div>钱包</div> <div>钱包</div>
<div v-if="loginStatus" class="my-info-wallet">{{userInfo.balance}}</div> <div v-if="loginStatus" class="my-info-wallet">
{{ userInfo.balance }}
</div>
<div v-else class="my-info-tip">登陆后查看</div> <div v-else class="my-info-tip">登陆后查看</div>
</div> </div>
<div class="my-info-item"> <div class="my-info-item">
<div><img src="@/assets/images/my/icon_1.png">存款</div> <nuxt-link to="/securityCenter">
<div><img src="@/assets/images/my/icon_2.png">取款</div> <img src="@/assets/images/my/icon_1.png" />存款
<div><img src="@/assets/images/my/icon_3.png">转账</div> </nuxt-link>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_2.png" />取款
</nuxt-link>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_3.png" />转账
</nuxt-link>
</div> </div>
</div> </div>
<div class="my-box"> <div class="my-box">
<div class="my-box-title">个人中心</div> <div class="my-box-title">个人中心</div>
<div class="my-box-line"></div> <div class="my-box-line"></div>
<div class="my-box-list"> <div class="my-box-list">
<div><img src="@/assets/images/my/icon_4.png">个人资料</div> <nuxt-link to="/securityCenter">
<div><img src="@/assets/images/my/icon_5.png">账户管理</div> <img src="@/assets/images/my/icon_4.png" />个人资料
<div><img src="@/assets/images/my/icon_6.png">安全中心</div> </nuxt-link>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_5.png" />账户管理
</nuxt-link>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_6.png" />安全中心
</nuxt-link>
</div> </div>
</div> </div>
<div class="my-box"> <div class="my-box">
<div class="my-box-title">常用功能</div> <div class="my-box-title">常用功能</div>
<div class="my-box-line"></div> <div class="my-box-line"></div>
<div class="my-box-list top"> <div class="my-box-list top">
<div><img src="@/assets/images/my/icon_7.png">投注记录</div> <nuxt-link to="/securityCenter">
<div><img src="@/assets/images/my/icon_8.png">交易记录</div> <img src="@/assets/images/my/icon_7.png" />投注记录
<div><img src="@/assets/images/my/icon_9.png">分享记录</div> </nuxt-link>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_8.png" />交易记录
</nuxt-link>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_9.png" />分享记录
</nuxt-link>
</div> </div>
<div class="my-box-list"> <div class="my-box-list">
<div><img src="@/assets/images/my/icon_10.png">活动中心</div> <nuxt-link to="/securityCenter">
<div><img src="@/assets/images/my/icon_11.png">信息提示</div> <img src="@/assets/images/my/icon_10.png" />活动中心
<div><img src="@/assets/images/my/icon_12.png">帮助中心</div> </nuxt-link>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_11.png" />信息提示
</nuxt-link>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_12.png" />帮助中心
</nuxt-link>
</div> </div>
</div> </div>
</div> </div>
...@@ -54,17 +89,12 @@ ...@@ -54,17 +89,12 @@
<script> <script>
import { mapState } from "vuex"; import { mapState } from "vuex";
import { getToken } from '~/assets/scripts/auth' import { getToken } from "~/assets/scripts/auth";
export default { export default {
name: 'myPage', name: "myPage",
data() { data() {
return { return {
loginStatus: !!getToken(), loginStatus: !!getToken(),
info: {
avator: 'avator',
name: 'TT',
wallet: 519.00
},
}; };
}, },
computed: { computed: {
...@@ -72,11 +102,11 @@ export default { ...@@ -72,11 +102,11 @@ export default {
userInfo: (state) => state.user.userInfo, userInfo: (state) => state.user.userInfo,
}), }),
}, },
methods: {} methods: {},
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.my { .my {
background: url("@/assets/images/index/bg.png"); background: url("@/assets/images/index/bg.png");
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -111,7 +141,6 @@ export default { ...@@ -111,7 +141,6 @@ export default {
height: 70px; height: 70px;
margin-right: 10px; margin-right: 10px;
} }
} }
.my-header-tip { .my-header-tip {
...@@ -119,12 +148,12 @@ export default { ...@@ -119,12 +148,12 @@ export default {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; letter-spacing: 1px;
color: white color: white;
} }
} }
&-info { &-info {
background: linear-gradient(176deg, #37BBFC 0%, #13A4FF 100%); background: linear-gradient(176deg, #37bbfc 0%, #13a4ff 100%);
border-radius: 15px; border-radius: 15px;
color: white; color: white;
display: flex; display: flex;
...@@ -148,10 +177,11 @@ export default { ...@@ -148,10 +177,11 @@ export default {
&-item { &-item {
display: flex; display: flex;
div { a {
text-align: center; text-align: center;
margin-left: 15px; margin-left: 15px;
font-size: 15px; font-size: 15px;
color: white;
} }
img { img {
...@@ -164,7 +194,7 @@ export default { ...@@ -164,7 +194,7 @@ export default {
} }
&-box { &-box {
background: linear-gradient(176deg, #37BBFC 0%, #13A4FF 100%); background: linear-gradient(176deg, #37bbfc 0%, #13a4ff 100%);
border-radius: 15px; border-radius: 15px;
color: white; color: white;
margin-top: 15px; margin-top: 15px;
...@@ -174,7 +204,7 @@ export default { ...@@ -174,7 +204,7 @@ export default {
} }
&-line { &-line {
border-top: 1px solid #0D92F7; border-top: 1px solid #0d92f7;
} }
&-list { &-list {
...@@ -183,6 +213,10 @@ export default { ...@@ -183,6 +213,10 @@ export default {
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 15px;
a {
color: white;
}
img { img {
width: 40px; width: 40px;
height: 40px; height: 40px;
......
pages/securityCenter/index.vue 0 → 100644
浏览文件 @ c6becd8e
<template>
<div class="page">
<div class="page-header">
<span @click="$router.go(-1)">&lt;</span>
安全中心
</div>
<nuxt-link
v-for="item in list"
:key="item.key"
class="page-item"
:to="`securityCenter/${item.path}`"
>
<div>{{ item.title }}</div>
<div>></div>
</nuxt-link>
</div>
</template>
<script>
export default {
name: "SecurityCenterPage",
data() {
return {
list: [
{ title: "修改登陆密码", path: "modifyLoginPassword" },
{ title: "重设登陆密码", path: "resetLoginPassword" },
{ title: "修改资金密码", path: "modifyFundPassword" },
{ title: "重设资金密码", path: "resetFundPassword" },
],
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.page {
background: url("@/assets/images/index/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
min-height: 100vh;
padding-bottom: 50px;
&-header {
color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: PingFang SC, Arial;
height: 50px;
line-height: 50px;
span {
position: absolute;
left: 20px;
font-weight: normal;
}
}
&-item {
background: #068ef6;
width: 100%;
color: white;
font-family: PingFang SC, Arial;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
padding: 30px 20px;
border-bottom: 1px solid white;
&:last-child {
border-bottom: none;
}
}
}
</style>
pages/securityCenter/modifyFundPassword.vue 0 → 100644
浏览文件 @ c6becd8e
<template>
<div class="page">
<div class="page-header">
<span @click="$router.go(-1)">&lt;</span>
修改资金密码
</div>
<div class="page-item">
<div>原始密码</div>
<input
v-model="oldPassword"
type="password"
placeholder="请输入原始资金密码"
/>
</div>
<div class="page-item">
<div>新密码</div>
<input v-model="newPassword" type="password" placeholder="请输入新密码" />
</div>
<div class="page-item">
<div>确认密码</div>
<input
v-model="comfirmPassword"
type="password"
placeholder="请再次确认新密码"
/>
</div>
<img class="page-btn" src="@/assets/images/securityCenter/submit.png" />
</div>
</template>
<script>
export default {
name: "ModifyFundPasswordPage",
data() {
return {
oldPassword: "",
newPassword: "",
comfirmPassword: "",
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.page {
background: url("@/assets/images/index/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
min-height: 100vh;
padding-bottom: 50px;
&-header {
color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: PingFang SC, Arial;
height: 50px;
line-height: 50px;
border-bottom: 1px solid white;
span {
position: absolute;
left: 20px;
font-weight: normal;
}
}
&-item {
width: 100%;
color: white;
font-family: PingFang SC, Arial;
font-size: 18px;
padding: 10px 20px;
input {
width: 100%;
padding: 15px 10px;
background-color: #068ef6;
outline: none;
border: none;
margin-top: 5px;
font-size: 14px;
&::placeholder {
color: #CCCCCC;
}
}
}
&-btn {
display: block;
margin: 20px auto;
}
}
</style>
pages/securityCenter/modifyLoginPassword.vue 0 → 100644
浏览文件 @ c6becd8e
<template>
<div class="page">
<div class="page-header">
<span @click="$router.go(-1)">&lt;</span>
修改登陆密码
</div>
<div class="page-item">
<div>原始密码</div>
<input
v-model="oldPassword"
type="password"
placeholder="请输入原始密码"
/>
</div>
<div class="page-item">
<div>新密码</div>
<input v-model="newPassword" type="password" placeholder="请确认新密码" />
</div>
<div class="page-item">
<div>确认密码</div>
<input
v-model="comfirmPassword"
type="password"
placeholder="请再次确认新密码"
/>
</div>
<img class="page-btn" src="@/assets/images/securityCenter/submit.png" />
</div>
</template>
<script>
export default {
name: "ModifyLoginPasswordPage",
data() {
return {
oldPassword: "",
newPassword: "",
comfirmPassword: "",
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.page {
background: url("@/assets/images/index/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
min-height: 100vh;
padding-bottom: 50px;
&-header {
color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: PingFang SC, Arial;
height: 50px;
line-height: 50px;
border-bottom: 1px solid white;
span {
position: absolute;
left: 20px;
font-weight: normal;
}
}
&-item {
width: 100%;
color: white;
font-family: PingFang SC, Arial;
font-size: 18px;
padding: 10px 20px;
input {
width: 100%;
padding: 15px 10px;
background-color: #068ef6;
outline: none;
border: none;
margin-top: 5px;
font-size: 14px;
&::placeholder {
color: #CCCCCC;
}
}
}
&-btn {
display: block;
margin: 20px auto;
}
}
</style>
pages/securityCenter/resetFundPassword.vue 0 → 100644
浏览文件 @ c6becd8e
<template>
<div class="page">
<div class="page-header">
<span @click="$router.go(-1)">&lt;</span>
重设资金密码
</div>
<div class="page-item">
<div>邮箱</div>
<input
v-model="email"
type="text"
class="email"
placeholder="请输入邮箱"
/>
<span>发送</span>
</div>
<div class="page-item">
<div>邮箱验证码</div>
<input v-model="verifyCode" type="text" placeholder="请输入邮箱验证码" />
</div>
<div class="page-item">
<div>资金密码</div>
<input v-model="password" type="password" placeholder="请输入资金密码" />
</div>
<div class="page-item">
<div>确认密码</div>
<input
v-model="comfirmPassword"
type="password"
placeholder="请再次确认资金密码"
/>
</div>
<img class="page-btn" src="@/assets/images/securityCenter/submit.png" />
</div>
</template>
<script>
export default {
name: "ResetFundPasswordPage",
data() {
return {
email: "",
verifyCode: "",
password: "",
comfirmPassword: "",
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.page {
background: url("@/assets/images/index/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
min-height: 100vh;
padding-bottom: 50px;
&-header {
color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: PingFang SC, Arial;
height: 50px;
line-height: 50px;
border-bottom: 1px solid white;
span {
position: absolute;
left: 20px;
font-weight: normal;
}
}
&-item {
width: 100%;
color: white;
font-family: PingFang SC, Arial;
font-size: 18px;
padding: 10px 20px;
input {
width: 100%;
padding: 15px 10px;
background-color: #068ef6;
outline: none;
border: none;
margin-top: 5px;
font-size: 14px;
&::placeholder {
color: #cccccc;
}
}
.email {
padding-right: 50px;
}
span {
position: absolute;
margin: 17px 0 0 -40px;
font-size: 14px;
}
}
&-btn {
display: block;
margin: 20px auto;
}
}
</style>
pages/securityCenter/resetLoginPassword.vue 0 → 100644
浏览文件 @ c6becd8e
<template>
<div class="page">
<div class="page-header">
<span @click="$router.go(-1)">&lt;</span>
重设登陆密码
</div>
<div class="page-item">
<div>邮箱</div>
<input
v-model="email"
type="text"
class="email"
placeholder="请输入邮箱"
/>
<span>发送</span>
</div>
<div class="page-item">
<div>邮箱验证码</div>
<input v-model="verifyCode" type="text" placeholder="请输入邮箱验证码" />
</div>
<div class="page-item">
<div>登陆密码</div>
<input v-model="password" type="password" placeholder="请输入登陆密码" />
</div>
<div class="page-item">
<div>确认密码</div>
<input
v-model="comfirmPassword"
type="password"
placeholder="请再次确认登陆密码"
/>
</div>
<img class="page-btn" src="@/assets/images/securityCenter/submit.png" />
</div>
</template>
<script>
export default {
name: "ResetLoginPasswordPage",
data() {
return {
email: "",
verifyCode: "",
password: "",
comfirmPassword: "",
};
},
methods: {},
};
</script>
<style lang="scss" scoped>
.page {
background: url("@/assets/images/index/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
min-height: 100vh;
padding-bottom: 50px;
&-header {
color: white;
text-align: center;
font-size: 20px;
font-weight: bold;
font-family: PingFang SC, Arial;
height: 50px;
line-height: 50px;
border-bottom: 1px solid white;
span {
position: absolute;
left: 20px;
font-weight: normal;
}
}
&-item {
width: 100%;
color: white;
font-family: PingFang SC, Arial;
font-size: 18px;
padding: 10px 20px;
input {
width: 100%;
padding: 15px 10px;
background-color: #068ef6;
outline: none;
border: none;
margin-top: 5px;
font-size: 14px;
&::placeholder {
color: #cccccc;
}
}
.email {
padding-right: 50px;
}
span {
position: absolute;
margin: 17px 0 0 -40px;
font-size: 14px;
}
}
&-btn {
display: block;
margin: 20px auto;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论