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) => {
export const getInfo = async () => {
const result = await fetcher('api/member/getInfo', 'GET')
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 -->
<template>
<div v-if="displayStatus">
<van-tabbar class="footer" v-model="active">
<van-tabbar class="footer" v-model="active">
<van-tabbar-item to="/">
<img src="@/assets/images/footer/index.png">
<img src="@/assets/images/footer/index.png" />
</van-tabbar-item>
<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 to="/customer">
<img src="@/assets/images/footer/customer.png">
<img src="@/assets/images/footer/customer.png" />
</van-tabbar-item>
<van-tabbar-item to="/my">
<img src="@/assets/images/footer/my.png">
<img src="@/assets/images/footer/my.png" />
</van-tabbar-item>
</van-tabbar>
</div>
......@@ -26,23 +26,40 @@ export default {
};
},
watch: {
'$nuxt.$route.name'(data) {
this.navbarDisplay(data)
"$nuxt.$route.name"(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() {
this.navbarDisplay(this.$nuxt.$route.name)
this.navbarDisplay(this.$nuxt.$route.name);
},
methods: {
navbarDisplay(data) {
switch (data) {
case 'login':
case 'register':
this.displayStatus = false
break
case "login":
case "register":
this.displayStatus = false;
break;
default:
this.displayStatus = true
break
this.displayStatus = true;
break;
}
},
},
......@@ -57,6 +74,6 @@ export default {
}
.van-tabbar-item--active {
background-color: transparent
background-color: transparent;
}
</style>
pages/index.vue
浏览文件 @ c6becd8e
......@@ -2,10 +2,9 @@
<div class="index">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
<van-swipe-item v-for="item in bannerList" :key="item.id">
<img :src="`${item.url}`" />
</van-swipe-item>
</van-swipe>
<img class="index-recommend" src="@/assets/images/index/recommend.png">
......@@ -84,8 +83,27 @@
</template>
<script>
import { getBanner } from '~/api/user.js'
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>
......
pages/my.vue
浏览文件 @ c6becd8e
<template>
<div class="my">
<div class="my-customer">
<img src="@/assets/images/my/customer.png">
<img
src="@/assets/images/my/customer.png"
@click="$router.push('/customer')"
/>
</div>
<div class="my-header">
<div v-if="loginStatus">
<img :src="require(`@/assets/images/my/${userInfo.avator? userInfo.avator : 'avator'}.png`) ">
{{userInfo.userName}}
<img
:src="
require(`@/assets/images/my/${
userInfo.avator ? userInfo.avator : 'avator'
}.png`)
"
/>
{{ userInfo.userName }}
</div>
<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>
</div>
<div>></div>
......@@ -17,36 +26,62 @@
<div class="my-info">
<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>
<div class="my-info-item">
<div><img src="@/assets/images/my/icon_1.png">存款</div>
<div><img src="@/assets/images/my/icon_2.png">取款</div>
<div><img src="@/assets/images/my/icon_3.png">转账</div>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_1.png" />存款
</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 class="my-box">
<div class="my-box-title">个人中心</div>
<div class="my-box-line"></div>
<div class="my-box-list">
<div><img src="@/assets/images/my/icon_4.png">个人资料</div>
<div><img src="@/assets/images/my/icon_5.png">账户管理</div>
<div><img src="@/assets/images/my/icon_6.png">安全中心</div>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_4.png" />个人资料
</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 class="my-box">
<div class="my-box-title">常用功能</div>
<div class="my-box-line"></div>
<div class="my-box-list top">
<div><img src="@/assets/images/my/icon_7.png">投注记录</div>
<div><img src="@/assets/images/my/icon_8.png">交易记录</div>
<div><img src="@/assets/images/my/icon_9.png">分享记录</div>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_7.png" />投注记录
</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 class="my-box-list">
<div><img src="@/assets/images/my/icon_10.png">活动中心</div>
<div><img src="@/assets/images/my/icon_11.png">信息提示</div>
<div><img src="@/assets/images/my/icon_12.png">帮助中心</div>
<nuxt-link to="/securityCenter">
<img src="@/assets/images/my/icon_10.png" />活动中心
</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>
......@@ -54,17 +89,12 @@
<script>
import { mapState } from "vuex";
import { getToken } from '~/assets/scripts/auth'
import { getToken } from "~/assets/scripts/auth";
export default {
name: 'myPage',
name: "myPage",
data() {
return {
loginStatus: !!getToken(),
info: {
avator: 'avator',
name: 'TT',
wallet: 519.00
},
};
},
computed: {
......@@ -72,11 +102,11 @@ export default {
userInfo: (state) => state.user.userInfo,
}),
},
methods: {}
}
methods: {},
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
.my {
background: url("@/assets/images/index/bg.png");
background-repeat: no-repeat;
......@@ -111,7 +141,6 @@ export default {
height: 70px;
margin-right: 10px;
}
}
.my-header-tip {
......@@ -119,12 +148,12 @@ export default {
font-family: PingFang SC;
font-weight: bold;
letter-spacing: 1px;
color: white
color: white;
}
}
&-info {
background: linear-gradient(176deg, #37BBFC 0%, #13A4FF 100%);
background: linear-gradient(176deg, #37bbfc 0%, #13a4ff 100%);
border-radius: 15px;
color: white;
display: flex;
......@@ -148,10 +177,11 @@ export default {
&-item {
display: flex;
div {
a {
text-align: center;
margin-left: 15px;
font-size: 15px;
color: white;
}
img {
......@@ -164,7 +194,7 @@ export default {
}
&-box {
background: linear-gradient(176deg, #37BBFC 0%, #13A4FF 100%);
background: linear-gradient(176deg, #37bbfc 0%, #13a4ff 100%);
border-radius: 15px;
color: white;
margin-top: 15px;
......@@ -174,7 +204,7 @@ export default {
}
&-line {
border-top: 1px solid #0D92F7;
border-top: 1px solid #0d92f7;
}
&-list {
......@@ -183,6 +213,10 @@ export default {
justify-content: space-between;
font-size: 15px;
a {
color: white;
}
img {
width: 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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论