453530270@qq.com
2 years ago
19 changed files with 815 additions and 24 deletions
@ -0,0 +1,198 @@ |
|||
<template> |
|||
<view class="phone_code"> |
|||
<text class="phone_code_label">验证码已发送至</text> |
|||
<view class="phone_code_count"> |
|||
<text class="phone_code_count_new">{{ newPhone }}</text> |
|||
<view v-if="isReget" class="phone_code_count_reget"> |
|||
<button plain="true" type="warn" size="mini" @click="getCode">重新获取</button> |
|||
</view> |
|||
<text v-else class="phone_code_count_down">获取验证码<text>{{count}}</text>s</text> |
|||
</view> |
|||
<view class="phone_code_single"> |
|||
<input class="phone_code_single_cinput" adjust-position="false" auto-blur="true" @blur="codeNumBlurFun" |
|||
@input="codeNumInputFun" :focus="focus" v-model="code" type="number" maxlength="6" /> |
|||
<view class="phone_code_single_codeinput"> |
|||
<view v-for="(item,index) in 6" :key="index" @click="codefocusFun(index)" |
|||
:style="(index == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')"> |
|||
{{code[index]}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<button :disabled="isCode" class="btn" type="warn" @click="submitFun()">确定</button> |
|||
</view> |
|||
</template> |
|||
|
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
newPhone: "167****8898", // 当前显示电话 |
|||
isReget: false, // 判断是否显示 ‘重新获取’按钮 |
|||
timer: null, // 定时器 |
|||
count: 60, // 时间 |
|||
code:"", // 验证码 |
|||
focus:true, // 焦点 |
|||
isCode:true // ‘确定’按钮是否禁用 |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.getTimer() // 开启定时器 |
|||
this.getCode() // 获取验证码 |
|||
}, |
|||
watch: { |
|||
count(val) { |
|||
if (val == 0) { |
|||
this.isReget = true |
|||
clearInterval(this.timer) |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 定时器 |
|||
* */ |
|||
getTimer() { |
|||
this.timer = setInterval(() => { |
|||
if (this.count == 0) { |
|||
clearInterval(this.timer) |
|||
uni.navigateBack({ |
|||
delta: 1 |
|||
}) |
|||
return |
|||
} |
|||
this.count-- |
|||
}, 1000) |
|||
}, |
|||
|
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 获取验证码 |
|||
* */ |
|||
getCode() { |
|||
console.log("获取验证码", this.newPhone) |
|||
if (this.count == 0) { |
|||
this.count = 60 |
|||
this.isReget = false |
|||
this.getTimer() |
|||
} |
|||
}, |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 输入框输入事件 |
|||
* */ |
|||
codeNumInputFun(e) { |
|||
let val = e.detail.value |
|||
this.code = val |
|||
if (val.length == 6) this.isCode = false |
|||
else this.isCode = true |
|||
}, |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 输入框失去焦点事件 |
|||
* */ |
|||
codeNumBlurFun(e) { |
|||
let val = e.detail.value |
|||
this.focus = false |
|||
if (val.length == 6) this.isCode = false |
|||
else this.isCode = true |
|||
}, |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 输入框点击事件 |
|||
* @param {Number} index 当前点击框索引 |
|||
* */ |
|||
codefocusFun(index) { |
|||
this.focus = true |
|||
}, |
|||
/** |
|||
* AUTHOR: 单乘风 |
|||
* DESC: 按钮点击事件 |
|||
* */ |
|||
submitFun() { |
|||
console.log("确认更换手机号") |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.phone { |
|||
background-color: #FFF; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
|
|||
&_code { |
|||
padding: 30rpx; |
|||
|
|||
&_label { |
|||
font-size: 30rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
&_count { |
|||
margin-top: 30rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
height: 100rpx; |
|||
|
|||
&_new { |
|||
color: #e64340; |
|||
font-size: 38rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&_down { |
|||
border: 1rpx solid #eee; |
|||
border-radius: 10rpx; |
|||
color: #999; |
|||
height: 60rpx; |
|||
line-height: 60rpx; |
|||
padding: 0 20rpx; |
|||
|
|||
text { |
|||
margin-left: 10rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&_single { |
|||
margin-top: 30rpx; |
|||
|
|||
&_cinput { |
|||
position: fixed; |
|||
left: -100rpx; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
&_codeinput { |
|||
margin: auto; |
|||
width: 650rpx; |
|||
height: 100rpx; |
|||
display: flex; |
|||
} |
|||
|
|||
&_codeinput>view { |
|||
margin-top: 5rpx; |
|||
margin-left: 15rpx; |
|||
width: 86rpx; |
|||
height: 86rpx; |
|||
line-height: 86rpx; |
|||
font-size: 60rpx; |
|||
font-weight: bold; |
|||
color: #313131; |
|||
text-align: center; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
&_codeinput>view:nth-child(1) { |
|||
margin-left: 0rpx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,508 @@ |
|||
<template> |
|||
<view class="container"> |
|||
<!-- 头部 --> |
|||
<view class="headzone"> |
|||
<!-- 头像 --> |
|||
<view class="avtarzone"> |
|||
<view class="avatar-bg"> |
|||
<image class="avatar" mode="aspectFit" src="../static/tx.svg"></image> |
|||
</view> |
|||
</view> |
|||
<!-- 用户信息 --> |
|||
<view class="ubinfo"> |
|||
<view class="ubi-uname">用户名</view> |
|||
<view class="ubi-verify"> |
|||
<view class="mbtxt">手机号：13812345678</view> |
|||
<view class="mbstatus verify" v-if="hasverify">认证</view> |
|||
<view class="mbstatus unverfiy" v-else>未认证</view> |
|||
</view> |
|||
</view> |
|||
<!-- 服务状态 --> |
|||
<view class="devinfo"> |
|||
<view class="dev-txt" :class="hasverify?'verify':'unverfiy'">有效期： 0个月</view> |
|||
<view class="dev-txt" :class="hasverify?'verify':'unverfiy'">设备数： 0台</view> |
|||
</view> |
|||
</view> |
|||
<!-- 交易中心的快速连接 --> |
|||
<view class="gtcenter"> |
|||
<view class="gttxt">全国文化大数据交易中心</view> |
|||
<view class="gtlinks">快速跳转</view> |
|||
</view> |
|||
|
|||
<!-- 服务内容 --> |
|||
<view class="fwnr"> |
|||
<!-- // first --> |
|||
<view class="fw-one"> |
|||
<view class="fwo-item"> |
|||
<view class="fwulb"> |
|||
<text class="fwname">订购服务</text> |
|||
<text class="fwnote">服务开通/续费</text> |
|||
</view> |
|||
<image class="fwubg" src="../static/dgfw.svg"></image> |
|||
</view> |
|||
<view class="fwo-item"> |
|||
<view class="fwulb"> |
|||
<text class="fwname">入网信息</text> |
|||
<text class="fwnote">信息登记/修改</text> |
|||
</view> |
|||
<image class="fwubg" src="../static/rwxx.svg"></image> |
|||
</view> |
|||
</view> |
|||
<!-- 我的订单 --> |
|||
<view class="my-service"> |
|||
<view class="service-title">我的订单</view> |
|||
<view class="service-content clearfix"> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/m_dzf.svg"></image> |
|||
</view> |
|||
<view class="item-name">待支付</view> |
|||
</view> |
|||
</block> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/m_dsh.svg"></image> |
|||
</view> |
|||
<view class="item-name">待审核</view> |
|||
</view> |
|||
</block> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/m_ywc.svg"></image> |
|||
</view> |
|||
<view class="item-name">已完成</view> |
|||
</view> |
|||
</block> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/m_qbdd.svg"></image> |
|||
</view> |
|||
<view class="item-name">全部订单</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
</view> |
|||
<!-- 其他工具 --> |
|||
<view class="othtools"> |
|||
<view class="service-title">其他工具</view> |
|||
<view class="service-content clearfix"> |
|||
<!-- 生效记录 --> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/t_sxjl.svg"></image> |
|||
</view> |
|||
<view class="item-name">生效记录</view> |
|||
</view> |
|||
</block> |
|||
<!-- 我的发票 --> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/t_wdfp.svg"></image> |
|||
</view> |
|||
<view class="item-name">我的发票</view> |
|||
</view> |
|||
</block> |
|||
<!-- 我的设备 --> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/t_wdsb.svg"></image> |
|||
</view> |
|||
<view class="item-name">我的设备</view> |
|||
</view> |
|||
</block> |
|||
<!-- 检查开关 --> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/t_jckg.svg"></image> |
|||
</view> |
|||
<view class="item-name">检查开关</view> |
|||
</view> |
|||
</block> |
|||
<!-- 设置密码 --> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/t_szmm.svg"></image> |
|||
</view> |
|||
<view class="item-name">设置密码</view> |
|||
</view> |
|||
</block> |
|||
<!-- 系统帮助 --> |
|||
<block> |
|||
<view class="service-item"> |
|||
<view class="item-icon"> |
|||
<image class="icon-img" src="../static/t_xtbz.svg"></image> |
|||
</view> |
|||
<view class="item-name">系统帮助</view> |
|||
</view> |
|||
</block> |
|||
</view> |
|||
|
|||
</view> |
|||
<!-- LOGOUT --> |
|||
<!-- 退出登录 --> |
|||
<view v-if="isLogin" class="my-logout"> |
|||
<view class="logout-btn" @click="handleLogout()"> |
|||
<text>退出登录</text> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
//认证标识 |
|||
hasverify: false, |
|||
// |
|||
isLogin: true, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 退出登录 |
|||
handleLogout() { |
|||
const app = this |
|||
uni.showModal({ |
|||
title: '友情提示', |
|||
content: '您确定要退出登录吗?', |
|||
success(res) { |
|||
if (res.confirm) { |
|||
store.dispatch('Logout', {}) |
|||
.then(result => app.onRefreshPage()) |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.container { |
|||
position: relative; |
|||
background-color: #F4F4F4; |
|||
} |
|||
|
|||
.headzone { |
|||
background-color: #0F476E; |
|||
// height: 460rpx; |
|||
height: 28vh; |
|||
width: 100%; |
|||
padding: 10%; |
|||
// margin-bottom: 22rpx; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
|
|||
// 黄色的圆 |
|||
.avtarzone { |
|||
background-color: #FEBD45; |
|||
width: 200rpx; |
|||
height: 200rpx; |
|||
border-radius: 50%; |
|||
text-align: center; |
|||
float: left; |
|||
margin: 0 auto; |
|||
|
|||
|
|||
//白色的圆 |
|||
.avatar-bg { |
|||
float: left; |
|||
background-color: #fff; |
|||
width: 160rpx; |
|||
height: 160rpx; |
|||
border-radius: 50%; |
|||
margin: 20rpx; |
|||
} |
|||
|
|||
.avatar { |
|||
display: inline-block; |
|||
margin: 13rpx; |
|||
width: 140rpx; |
|||
height: 140rpx; |
|||
} |
|||
} |
|||
|
|||
.ubinfo { |
|||
color: #fff; |
|||
width: 64% !important; |
|||
float: left; |
|||
margin-left: 16rpx; |
|||
|
|||
.ubi-uname { |
|||
font-size: 36rpx; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
//用户认证状态 |
|||
.ubi-verify { |
|||
margin-top: 20rpx; |
|||
height: 36rpx; |
|||
line-height: 36rpx; |
|||
|
|||
.mbtxt { |
|||
display: block; |
|||
float: left; |
|||
width: 74%; |
|||
} |
|||
|
|||
.mbstatus { |
|||
display: block; |
|||
float: left; |
|||
width: 26%; |
|||
text-align: center; |
|||
padding: 0 5rpx 0; |
|||
height: 100%; |
|||
line-height: 100%; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
.devinfo { |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
margin-top: 26rpx; |
|||
height: 48rpx; |
|||
line-height: 42rpx; |
|||
text-align: center; |
|||
color: #efefef; |
|||
|
|||
.dev-txt { |
|||
margin-left: 22rpx; |
|||
width: 42%; |
|||
float: left; |
|||
padding-left: 10rpx; |
|||
padding-right: 10rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
// 状态类 |
|||
.unverfiy { |
|||
background-color: #CECECE; |
|||
border: 1rpx solid #CECECE; |
|||
} |
|||
|
|||
.verify { |
|||
background-color: #C6A94D; |
|||
border: 1rpx solid #C6A94D; |
|||
} |
|||
} |
|||
|
|||
// 快速连接 |
|||
.gtcenter { |
|||
position: absolute; |
|||
top: 400rpx; |
|||
left: 5%; |
|||
width: 90%; |
|||
height: 88rpx; |
|||
background-color: #FEBD45; |
|||
// margin: 0 auto; |
|||
border-radius: 44rpx; |
|||
padding: 0 10rpx 0; |
|||
display: flex; |
|||
flex-direction: row; |
|||
border: #034373; |
|||
box-shadow: 1rpx soild #0F476E; |
|||
|
|||
.gttxt { |
|||
color: #034373; |
|||
font-size: 40rpx; |
|||
font-weight: 800; |
|||
line-height: 88rpx; |
|||
padding-left: 26rpx; |
|||
} |
|||
|
|||
.gtlinks { |
|||
background-color: #F9DE8F; |
|||
height: 48rpx; |
|||
line-height: 46rpx; |
|||
margin-top: 14rpx; |
|||
margin-left: 16rpx; |
|||
padding: 0 20rpx 0 20rpx; |
|||
border-radius: 38%; |
|||
border: #F9DE8F; |
|||
} |
|||
} |
|||
|
|||
// 服务内容 |
|||
.fwnr { |
|||
margin-top: 60rpx; |
|||
background-color: #f4f4f4; |
|||
min-height: 82vh; |
|||
|
|||
// |
|||
.fw-one { |
|||
// height: 96rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
margin: 10rpx auto; |
|||
|
|||
.fwo-item { |
|||
width: 42%; |
|||
height: 206rpx; |
|||
border-radius: 12%; |
|||
margin-left: 5%; |
|||
background-color: #fff; |
|||
|
|||
.fwulb { |
|||
margin-top: 60rpx; |
|||
margin-left: 20rpx; |
|||
height: 60rpx; |
|||
display: block; |
|||
float: left; |
|||
width: 60%; |
|||
|
|||
.fwname { |
|||
display: flex; |
|||
font-size: 32rpx; |
|||
color: #034373; |
|||
font-weight: 800; |
|||
} |
|||
|
|||
.fwnote { |
|||
font-size: 22rpx; |
|||
} |
|||
} |
|||
|
|||
// background image |
|||
.fwubg { |
|||
margin-top: 60rpx; |
|||
width: 102rpx; |
|||
height: 102rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
// 我的服务 |
|||
.my-service { |
|||
margin: 22rpx auto 22rpx auto; |
|||
padding: 22rpx 0; |
|||
width: 94%; |
|||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
|||
border-radius: 20rpx; |
|||
background: #fff; |
|||
|
|||
.service-title { |
|||
padding-left: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.service-content { |
|||
margin-bottom: -20rpx; |
|||
|
|||
.service-item { |
|||
position: relative; |
|||
width: 25%; |
|||
float: left; |
|||
margin-bottom: 30rpx; |
|||
|
|||
.item-icon { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
padding: 14rpx 0; |
|||
color: #ff3800; |
|||
font-size: 44rpx; |
|||
} |
|||
|
|||
.icon-img { |
|||
width: 62rpx; |
|||
height: 62rpx; |
|||
} |
|||
|
|||
.item-name { |
|||
font-size: 28rpx; |
|||
color: #545454; |
|||
text-align: center; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// |
|||
.othtools { |
|||
margin: 22rpx auto 22rpx auto; |
|||
padding: 22rpx 0; |
|||
width: 94%; |
|||
box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05); |
|||
border-radius: 20rpx; |
|||
background: #fff; |
|||
|
|||
.service-title { |
|||
padding-left: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
font-size: 30rpx; |
|||
} |
|||
|
|||
.service-content { |
|||
margin-bottom: -20rpx; |
|||
|
|||
.service-item { |
|||
position: relative; |
|||
width: 25%; |
|||
float: left; |
|||
margin-bottom: 30rpx; |
|||
|
|||
.item-icon { |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
padding: 14rpx 0; |
|||
color: #ff3800; |
|||
font-size: 44rpx; |
|||
} |
|||
|
|||
.icon-img { |
|||
width: 62rpx; |
|||
height: 62rpx; |
|||
} |
|||
|
|||
.item-name { |
|||
font-size: 28rpx; |
|||
color: #545454; |
|||
text-align: center; |
|||
margin-right: 10rpx; |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
// 退出登录 |
|||
.my-logout { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 50rpx; |
|||
|
|||
.logout-btn { |
|||
width: 60%; |
|||
margin: 0 auto; |
|||
font-size: 28rpx; |
|||
color: #fff; |
|||
background-color: #0F476E; |
|||
border-radius: 20rpx; |
|||
border: 1px solid #dcdcdc; |
|||
padding: 16rpx 0; |
|||
text-align: center; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 764 B |
|
After Width: | Height: | Size: 435 B |
|
After Width: | Height: | Size: 546 B |
|
After Width: | Height: | Size: 912 B |
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 601 B |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 757 B |
|
After Width: | Height: | Size: 630 B |
|
After Width: | Height: | Size: 890 B |
|
After Width: | Height: | Size: 435 B |
|
After Width: | Height: | Size: 542 B |
|
After Width: | Height: | Size: 597 B |
|
After Width: | Height: | Size: 659 B |
Loading…
Reference in new issue