简柏林 / thingskit-app · Commits

Commit 404e496a040ddeeff13484fe1d1f09dd33080cb4

Authored by fengtao
1 parent 5a10304e

feat:新增登录页面等

Inline Side-by-side
Showing 7 changed files with 873 additions and 20 deletions
  1 +node_modules/
  2 +.project
  3 +unpackage/
  4 +.DS_Store
\ No newline at end of file
... ...
... ... @@ -22,8 +22,30 @@
22 22 }, {
23 23 "path": "pages/personal/personal",
24 24 "style": {
25   - "navigationBarTitleText": "",
26   - "navigationStyle": "custom" // 隐藏导航栏
  25 + "navigationBarTitleText": "个人中心"
  26 + }
  27 + }, {
  28 + "path": "pages/personal/login",
  29 + "style": {
  30 + "navigationBarTitleText": "登录"
  31 + }
  32 +
  33 + }, {
  34 + "path": "pages/personal/code",
  35 + "style": {
  36 + "navigationBarTitleText": "验证码登录"
  37 + }
  38 +
  39 + }, {
  40 + "path": "pages/personal/findPassword",
  41 + "style": {
  42 + "navigationBarTitleText": "找回密码"
  43 + }
  44 +
  45 + }, {
  46 + "path": "pages/personal/set",
  47 + "style": {
  48 + "navigationBarTitleText": "个人资料"
27 49 }
28 50
29 51 }
... ...
  1 +<template>
  2 + <view class="code-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="f__login">
  6 + <view class="loginPhone">
  7 + <view class="form-row">
  8 + <input class="input" type="number" v-model="phone" placeholder="请输入手机号码"
  9 + placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
  10 + </view>
  11 + <view class="form-row">
  12 + <input class="input" type="number" v-model="vCode" placeholder="请输入验证码"
  13 + placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
  14 + <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
  15 + </view>
  16 + <button class="submit" size="default" @click="onSubmit" :style="{background:PrimaryColor}">确定</button>
  17 + </view>
  18 + </view>
  19 + </view>
  20 +</template>
  21 +
  22 +<script>
  23 + export default {
  24 + data() {
  25 + return {
  26 + PrimaryColor: '#0079fe', //主题色
  27 + readonly: false,
  28 + codeText: '获取验证码',
  29 + phone: '', //号码
  30 + vCode: '', //验证码
  31 + }
  32 + },
  33 + methods: {
  34 + //验证码按钮文字状态
  35 + getCodeState() {
  36 + const _this = this;
  37 + this.readonly = true;
  38 + this.codeText = '60S后重新获取';
  39 + var s = 60;
  40 + clear = setInterval(() => {
  41 + s--;
  42 + _this.codeText = s + 'S后重新获取';
  43 + if (s <= 0) {
  44 + clearInterval(clear);
  45 + _this.codeText = '获取验证码';
  46 + _this.readonly = false;
  47 + }
  48 + }, 1000);
  49 + },
  50 + //获取验证码
  51 + getVcode() {
  52 + console.log('getVcode')
  53 + if (this.readonly) {
  54 + uni.showToast({
  55 + title: '验证码已发送~',
  56 + icon: 'none'
  57 + });
  58 + return;
  59 + }
  60 + if (this.phone == '') {
  61 + uni.showToast({
  62 + title: '请输入手机号~',
  63 + icon: 'none'
  64 + });
  65 + return;
  66 + }
  67 + const phoneRegular = /^1\d{10}$/;
  68 + if (!phoneRegular.test(this.phone)) {
  69 + uni.showToast({
  70 + title: '手机号格式不正确~',
  71 + icon: 'none'
  72 + });
  73 + return;
  74 + }
  75 + let httpData = {}
  76 + // 获取验证码接口
  77 + // uni.$u.http.post('您的接口', httpData).then(res => {
  78 + this.getCodeState(); //开始倒计时
  79 + // })
  80 + },
  81 + onSubmit() {}
  82 + }
  83 + }
  84 +</script>
  85 +
  86 +<style lang="scss" scoped>
  87 + .f__login {
  88 + padding: 48rpx 32rpx;
  89 + border-radius: 18rpx 18rpx 0 0;
  90 + z-index: 99;
  91 + position: relative;
  92 + }
  93 +
  94 + .loginPhone {
  95 + .form-row {
  96 + position: relative;
  97 + border-bottom: 1rpx solid #e8e8e8;
  98 +
  99 + .input {
  100 + font-size: 34rpx;
  101 + line-height: 102rpx;
  102 + height: 94rpx;
  103 + width: 100%;
  104 + box-sizing: border-box;
  105 + font-size: 30rpx;
  106 + padding: 0;
  107 + font-weight: bold;
  108 + }
  109 +
  110 + .getvcode {
  111 + font-size: 26rpx;
  112 + height: 80rpx;
  113 + color: #333;
  114 + line-height: 80rpx;
  115 + background: #eee;
  116 + min-width: 188rpx;
  117 + text-align: center;
  118 + border-radius: 8rpx;
  119 + position: absolute;
  120 + top: 50%;
  121 + transform: translateY(-50%);
  122 + right: 0;
  123 + z-index: 11;
  124 +
  125 + &.forhidden {
  126 + background: #eee;
  127 + color: #cccccc;
  128 + }
  129 + }
  130 + }
  131 +
  132 +
  133 + .submit {
  134 + margin-top: 60rpx;
  135 + color: #fff;
  136 + width: 100%;
  137 + border: none;
  138 + }
  139 + }
  140 +</style>
... ...
  1 +<template>
  2 + <view class="find-password-page">
  3 + <public-module></public-module>
  4 + <view class="top u-flex" style="justify-content: space-between;flex-direction: row;align-items: center;">
  5 + <!-- color:#0079fe -->
  6 + <view :style="{color:!nextStatus?'#0079fe':''}" class="item">1.验证手机号码</view>
  7 + <view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view>
  8 + </view>
  9 + <view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login">
  10 + <view class="loginPhone">
  11 + <view class="form-row">
  12 + <input class="input" type="number" v-model="phone" placeholder="请输入手机号码"
  13 + placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
  14 + </view>
  15 + <view class="form-row">
  16 + <input class="input" type="number" v-model="vCode" placeholder="请输入验证码"
  17 + placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
  18 + <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
  19 + </view>
  20 + <button class="submit" size="default" @click="onNextSubmit"
  21 + :style="{background:PrimaryColor}">下一步</button>
  22 + </view>
  23 + </view>
  24 + <view v-else style="margin-top: 40rpx;" class="f__login">
  25 + <view class="loginPhone">
  26 + <view class="form-row">
  27 + <u--input class="input" prefixIcon="lock-fill" type="text" placeholder="请设置6-20位新的登录密码"
  28 + border="surround" v-model="account">
  29 + </u--input>
  30 + </view>
  31 + <view class="form-row">
  32 + <u--input class="input" prefixIcon="lock-fill" :suffixIcon="showPasswordIcon"
  33 + suffixIconStyle="color: #909399" type="password" placeholder="请再次输入新的登录密码" border="surround"
  34 + v-model="password" @change="passwordChange">
  35 + </u--input>
  36 + </view>
  37 + <button class="submit" size="default" @click="onSubmit" :style="{background:PrimaryColor}">提交</button>
  38 + </view>
  39 + </view>
  40 + </view>
  41 +</template>
  42 +
  43 +<script>
  44 + export default {
  45 + data() {
  46 + return {
  47 + PrimaryColor: '#0079fe', //主题色
  48 + readonly: false,
  49 + codeText: '获取验证码',
  50 + phone: '', //号码
  51 + vCode: '', //验证码
  52 + nextStatus: false
  53 + }
  54 + },
  55 + methods: {
  56 + //验证码按钮文字状态
  57 + getCodeState() {
  58 + const _this = this;
  59 + this.readonly = true;
  60 + this.codeText = '60S后重新获取';
  61 + var s = 60;
  62 + clear = setInterval(() => {
  63 + s--;
  64 + _this.codeText = s + 'S后重新获取';
  65 + if (s <= 0) {
  66 + clearInterval(clear);
  67 + _this.codeText = '获取验证码';
  68 + _this.readonly = false;
  69 + }
  70 + }, 1000);
  71 + },
  72 + //获取验证码
  73 + getVcode() {
  74 + console.log('getVcode')
  75 + if (this.readonly) {
  76 + uni.showToast({
  77 + title: '验证码已发送~',
  78 + icon: 'none'
  79 + });
  80 + return;
  81 + }
  82 + if (this.phone == '') {
  83 + uni.showToast({
  84 + title: '请输入手机号~',
  85 + icon: 'none'
  86 + });
  87 + return;
  88 + }
  89 + const phoneRegular = /^1\d{10}$/;
  90 + if (!phoneRegular.test(this.phone)) {
  91 + uni.showToast({
  92 + title: '手机号格式不正确~',
  93 + icon: 'none'
  94 + });
  95 + return;
  96 + }
  97 + let httpData = {}
  98 + // 获取验证码接口
  99 + // uni.$u.http.post('您的接口', httpData).then(res => {
  100 + this.getCodeState(); //开始倒计时
  101 + // })
  102 + },
  103 + onNextSubmit() {
  104 + this.nextStatus = true
  105 + },
  106 + onSubmit() {}
  107 + }
  108 + }
  109 +</script>
  110 +
  111 +<style lang="scss" scoped>
  112 + .top {
  113 + width: 750rpx;
  114 + height: 100rpx;
  115 + border: 1px solid #e8e8e8;
  116 +
  117 + .item {
  118 + width: 375rpx;
  119 + height: 100rpx;
  120 + border: 1px solid #e8e8e8;
  121 + text-align: center;
  122 + line-height: 90rpx;
  123 + }
  124 + }
  125 +
  126 + .f__login {
  127 + padding: 0 30rpx;
  128 +
  129 + .loginPhone {
  130 + .form-row {
  131 + position: relative;
  132 + border-bottom: 1rpx solid #e8e8e8;
  133 +
  134 + .input {
  135 + font-size: 34rpx;
  136 + line-height: 102rpx;
  137 + height: 94rpx;
  138 + width: 100%;
  139 + box-sizing: border-box;
  140 + font-size: 30rpx;
  141 + padding: 0;
  142 + font-weight: bold;
  143 + }
  144 +
  145 + .getvcode {
  146 + font-size: 26rpx;
  147 + height: 80rpx;
  148 + color: #333;
  149 + line-height: 80rpx;
  150 + background: #eee;
  151 + min-width: 188rpx;
  152 + text-align: center;
  153 + border-radius: 8rpx;
  154 + position: absolute;
  155 + top: 50%;
  156 + transform: translateY(-50%);
  157 + right: 0;
  158 + z-index: 11;
  159 +
  160 + &.forhidden {
  161 + background: #eee;
  162 + color: #cccccc;
  163 + }
  164 + }
  165 + }
  166 +
  167 +
  168 + .submit {
  169 + margin-top: 60rpx;
  170 + color: #fff;
  171 + width: 100%;
  172 + border: none;
  173 + }
  174 + }
  175 + }
  176 +</style>
... ...
  1 +<template>
  2 + <view class="login-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="u-flex" style="justify-content: center;">
  6 + <image style="width: 250rpx;height: 250rpx;" src="../../static/logo.png" mode="aspectFill"></image>
  7 + </view>
  8 + <view class="f__login">
  9 + <view class="loginPhone">
  10 + <view class="form-row">
  11 + <u--input class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" border="surround"
  12 + v-model="account">
  13 + </u--input>
  14 + </view>
  15 + <view class="form-row">
  16 + <u--input class="input" prefixIcon="lock-fill" :suffixIcon="showPasswordIcon"
  17 + suffixIconStyle="color: #909399" type="password" placeholder="登录密码" border="surround"
  18 + v-model="password" @change="passwordChange">
  19 + </u--input>
  20 + </view>
  21 + <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
  22 + <view style="color: #0079fe;font-size: 14px;" @click="openCodeFunc">手机验证码登录</view>
  23 + <view style="color: #0079fe;font-size: 14px;" @click="findPassrordFunc">忘记密码</view>
  24 + </view>
  25 + <button class="submit" size="default" @click="onSubmitFunc"
  26 + :style="{background:PrimaryColor}">登录</button>
  27 + <view class="u-flex" style="justify-content: center;flex-direction: column;margin-top: 60rpx;">
  28 + <view style="color:#cccccc">第三方账号登录</view>
  29 + <view>
  30 + <image style="width: 150rpx;height: 150rpx;" src="../../static/logo.png" mode="aspectFill">
  31 + </image>
  32 + </view>
  33 + </view>
  34 + </view>
  35 + </view>
  36 + </view>
  37 +</template>
  38 +
  39 +<script>
  40 + export default {
  41 + data() {
  42 + return {
  43 + PrimaryColor: '#0079fe', //主题色
  44 + showPasswordIcon: 'eye-off'
  45 + }
  46 + },
  47 + methods: {
  48 + passwordChange() {},
  49 + onSubmitFunc() {},
  50 + openCodeFunc() {
  51 + uni.navigateTo({
  52 + url: './code'
  53 + })
  54 + },
  55 + findPassrordFunc() {
  56 + uni.navigateTo({
  57 + url: './findPassword'
  58 + })
  59 + }
  60 + }
  61 + }
  62 +</script>
  63 +
  64 +<style lang="scss" scoped>
  65 + .login-page {
  66 + min-height: 100vh;
  67 + background-color: #fff;
  68 + }
  69 +
  70 + .f__login {
  71 + padding: 48rpx 32rpx;
  72 + border-radius: 18rpx 18rpx 0 0;
  73 + z-index: 99;
  74 + position: relative;
  75 + }
  76 +
  77 + .loginPhone {
  78 + .form-row {
  79 + position: relative;
  80 +
  81 + .input {
  82 + font-size: 34rpx;
  83 + line-height: 102rpx;
  84 + height: 114rpx;
  85 + width: 100%;
  86 + box-sizing: border-box;
  87 + font-size: 30rpx;
  88 + padding: 0;
  89 + font-weight: bold;
  90 + }
  91 + }
  92 +
  93 +
  94 + .submit {
  95 + margin-top: 60rpx;
  96 + color: #fff;
  97 + width: 100%;
  98 + border: none;
  99 + }
  100 + }
  101 +</style>
... ...
... ... @@ -2,27 +2,150 @@
2 2 <view class="personal">
3 3 <!-- 公共组件-每个页面必须引入 -->
4 4 <public-module></public-module>
5   - <f-navbar title="个人中心" fontColor="#fff" :bgColor="PrimaryColor" :scrollTop="scrollTop" navbarType='5'
6   - :isShowLeft="false" :isShowTransparentTitle="false"></f-navbar>
7   - <view class="head-box">
  5 + <view class="headBox">
8 6 <!-- #ifdef MP -->
9   - <view class="u-flex">
10   - <text>11111</text>
  7 + <!-- 登录 -->
  8 + <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
  9 + <block v-if="userInfo.token">
  10 + <view class="u-m-r-20">
  11 + <image class="avatar" mode="aspectFill" :src="userInfo.headLogo || '/static/logo.png'"></image>
  12 + </view>
  13 + <view class="u-flex-1" @click="onJump('/pages/personal/set')">
  14 + <view class="nickName u-flex">
  15 + <view class="name u-m-r-10" v-if="userInfo.nickName">{{userInfo.nickName}}</view>
  16 + </view>
  17 + <view class="detail" v-if="userInfo.phoneNum">手机号：{{userInfo.phoneNum | phone}}</view>
  18 + <view class="detail" v-else>手机号:未绑定</view>
  19 + </view>
  20 + </block>
  21 + <block v-else>
  22 + <view class="u-m-r-20">
  23 + <view class="avatar u-flex" style="justify-content: center;">
  24 + <u-icon name="account-fill" color="black" size="30"></u-icon>
  25 + </view>
  26 + </view>
  27 + <view class="u-flex-1">
  28 + <view @click="openLoginFunc" class="u-font-lg" style="color:black;font-weight: bold;">请点击登录
  29 + </view>
  30 + <view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view>
  31 + </view>
  32 + </block>
  33 + <view>
  34 + <u-icon @click="openPersonalInfo" name="arrow-right" color="black" size="13"></u-icon>
  35 + </view>
11 36 </view>
12 37 <!-- #endif -->
13 38 <!-- #ifndef MP -->
14   - <view class="u-flex">
15   - <text>2222</text>
  39 + <!-- 登录 -->
  40 + <view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
  41 + <block v-if="userInfo.token">
  42 + <view class="u-m-r-20">
  43 + <image class="avatar" mode="aspectFill" :src="userInfo.headLogo"></image>
  44 + </view>
  45 + <view class="u-flex-1" @click="onJump('/pages/user/set')">
  46 + <view class="nickName">{{userInfo.userName}}</view>
  47 + <view class="detail" v-if="userInfo.phoneNum">手机号：{{userInfo.phoneNum | phone}}</view>
  48 + <view class="detail" v-else>手机号:未绑定</view>
  49 + </view>
  50 + </block>
  51 + <block v-else>
  52 + <view class="u-m-r-20">
  53 + <view class="avatar u-flex" style="justify-content: center;">
  54 + <u-icon name="account-fill" color="black" size="30"></u-icon>
  55 + </view>
  56 + </view>
  57 + <view class="u-flex-1">
  58 + <view @click="openLoginFunc" class="u-font-lg" style="color: black;font-weight: bold;">登录</view>
  59 + <view @click="clickAccountFunc" style="color:black;" class="detail">绑定账号</view>
  60 + </view>
  61 + </block>
  62 + <view>
  63 + <u-icon @click="openPersonalInfo" name="arrow-right" color="black" size="13"></u-icon>
  64 + </view>
16 65 </view>
17 66 <!-- #endif -->
18 67 </view>
  68 + <view style="height: 50rpx;"></view>
  69 + <view class="cell-group">
  70 + <view class="cell-item u-flex" @click="onJump(item.url)"
  71 + :style="[{animation: 'show ' + ((index+1)*0.2+.2) + 's'}]" v-for="(item,index) in list" :key="index">
  72 + <u-icon :name="item.icon" size="14" color="#333"></u-icon>
  73 + <view class="title u-flex-m">{{item.title}}</view>
  74 + <u-icon name="arrow-right" size="14" color="#333"></u-icon>
  75 + </view>
  76 + </view>
  77 + <view class="u-flex" style="justify-content: center;">
  78 + <button class="submit" size="default" @click="onLoginoutFunc"
  79 + :style="{background:PrimaryButtonColor}">退出账号</button>
  80 + </view>
  81 + <!-- 绑定账号 -->
  82 + <view>
  83 + <u-modal confirmText="绑定账号" @confirm="bindConfirm" :show="show" :title="title">
  84 + <view v-if="!bindPhone" class="loginPhone">
  85 + <view class="form-row">
  86 + <u--input class="input" prefixIcon="account-fill" type="text" placeholder="登录账号"
  87 + border="surround" v-model="account">
  88 + </u--input>
  89 + </view>
  90 + <view class="form-row">
  91 + <u--input class="input" prefixIcon="lock-fill" :suffixIcon="showPasswordIcon"
  92 + suffixIconStyle="color: #909399" type="password" placeholder="登录密码" border="surround"
  93 + v-model="password" @change="passwordChange">
  94 + </u--input>
  95 + </view>
  96 + <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
  97 + <view style="visibility: hidden;">手机验证码登录</view>
  98 + <view style="color: #0079fe;font-size: 14px;" @click="bindPhoneFunc">手机绑定</view>
  99 + </view>
  100 + </view>
  101 + <view v-else class="loginPhone">
  102 + <view class="form-row">
  103 + <u--input class="input" type="text" v-model="phone" placeholder="请输入手机号码"
  104 + placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
  105 + </view>
  106 + <view class="form-row">
  107 + <u--input class="input" type="text" v-model="vCode" placeholder="请输入验证码"
  108 + placeholder-style="font-weight:normal;color:#bbbbbb;"></u--input>
  109 + <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
  110 + </view>
  111 + <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
  112 + <view style="visibility: hidden;">手机验证码登录</view>
  113 + <view style="color: #0079fe;font-size: 14px;" @click="bindAccountFunc">账号绑定</view>
  114 + </view>
  115 + </view>
  116 + </u-modal>
  117 + </view>
  118 + <!-- 退出登录 -->
  119 + <view>
  120 + <u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom">
  121 + <view class="u-flex"
  122 + style="flex-direction: column;height: 300rpx;margin: 30rpx 40rpx;background:#f5f5f5;border-radius: 20rpx;">
  123 + <view
  124 + style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;">
  125 + <text style="color:#999999">确定要退出当前账号？</text>
  126 + </view>
  127 + <view
  128 + style="width:669rpx;height: 100rpx;border-bottom: 1rpx solid #d6d6d6;text-align: center;line-height: 86rpx;">
  129 + <text style="color:#f95e5a">退出登录</text>
  130 + </view>
  131 + <view
  132 + style="width:669rpx;height: 100rpx;text-align: center;line-height: 86rpx;">
  133 + <text @click="closeLogout" style="color:#3478f7">取消</text>
  134 + </view>
  135 + </view>
  136 + </u-popup>
  137 + </view>
19 138 <f-tabbar></f-tabbar>
20 139 </view>
21 140 </template>
22 141
23 142 <script>
  143 + import base from '@/config/baseUrl';
24 144 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
25 145 import fNavbar from '@/components/module/f-navbar/f-navbar';
  146 + import {
  147 + mapState
  148 + } from 'vuex';
26 149
27 150 export default {
28 151 components: {
... ... @@ -31,31 +154,248 @@
31 154 },
32 155 data() {
33 156 return {
34   - scrollTop: 0,
35   - PrimaryColor: '#fe461d', //主题色
  157 + PrimaryColor: '#0079fe', //主题色
  158 + showLogout: false,
  159 + readonly: false,
  160 + codeText: '获取验证码',
  161 + phone: '', //号码
  162 + vCode: '', //验证码
  163 + tips: '验证码',
  164 + bindPhone: false,
  165 + show: false,
  166 + title: '绑定账号',
  167 + systemInfo: base.systemInfo,
  168 + PrimaryButtonColor: '#0079fe', //主题色
  169 + list: [{
  170 + title: '系统通知',
  171 + url: '',
  172 + icon: 'setting-fill'
  173 + }, {
  174 + title: '意见反馈',
  175 + url: '',
  176 + icon: 'more-circle-fill'
  177 + }, {
  178 + title: '首页设置',
  179 + url: '',
  180 + icon: 'bag-fill'
  181 + }],
36 182 }
37 183 },
38 184 onLoad() {
39 185 // 隐藏原生的tabbar
40 186 uni.hideTabBar();
41 187 },
  188 + computed: {
  189 + ...mapState(['userInfo'])
  190 + },
42 191 methods: {
43   - onPageScroll(e) {
44   - this.scrollTop = e.scrollTop;
  192 + openLoginFunc() {
  193 + uni.navigateTo({
  194 + url: './login'
  195 + })
  196 + },
  197 + openPersonalInfo() {
  198 + uni.navigateTo({
  199 + url: './set'
  200 + })
  201 + },
  202 + clickAccountFunc() {
  203 + this.show = true
  204 + },
  205 + bindConfirm() {
  206 + this.show = false
  207 + },
  208 + bindPhoneFunc() {
  209 + this.bindPhone = true
  210 + },
  211 + bindAccountFunc() {
  212 + this.bindPhone = false
  213 + },
  214 + //验证码按钮文字状态
  215 + getCodeState() {
  216 + const _this = this;
  217 + this.readonly = true;
  218 + this.codeText = '60S后重新获取';
  219 + var s = 60;
  220 + clear = setInterval(() => {
  221 + s--;
  222 + _this.codeText = s + 'S后重新获取';
  223 + if (s <= 0) {
  224 + clearInterval(clear);
  225 + _this.codeText = '获取验证码';
  226 + _this.readonly = false;
  227 + }
  228 + }, 1000);
45 229 },
  230 + //获取验证码
  231 + getVcode() {
  232 + console.log('getVcode')
  233 + if (this.readonly) {
  234 + uni.showToast({
  235 + title: '验证码已发送~',
  236 + icon: 'none'
  237 + });
  238 + return;
  239 + }
  240 + if (this.phone == '') {
  241 + uni.showToast({
  242 + title: '请输入手机号~',
  243 + icon: 'none'
  244 + });
  245 + return;
  246 + }
  247 + const phoneRegular = /^1\d{10}$/;
  248 + if (!phoneRegular.test(this.phone)) {
  249 + uni.showToast({
  250 + title: '手机号格式不正确~',
  251 + icon: 'none'
  252 + });
  253 + return;
  254 + }
  255 + let httpData = {}
  256 + // 获取验证码接口
  257 + // uni.$u.http.post('您的接口', httpData).then(res => {
  258 + this.getCodeState(); //开始倒计时
  259 + // })
  260 + },
  261 + onLoginoutFunc() {
  262 + this.showLogout = true
  263 + },
  264 + closeLogout() {
  265 + this.showLogout = false
  266 + }
46 267 }
47 268 }
48 269 </script>
49 270
50 271 <style lang="scss" scoped>
51   - .personal {
52   - min-height: 2000rpx;
  272 + .headBox {
  273 + background-color: #fff;
  274 + border-top: 0.2px solid gray;
  275 + height: 250rpx;
  276 +
  277 + .avatar {
  278 + width: 50px;
  279 + height: 50px;
  280 + border-radius: 25px;
  281 + background-color: #ccc;
  282 + }
  283 +
  284 + .nickName {
  285 + .btn {
  286 + font-size: 22rpx;
  287 + font-weight: normal;
  288 + color: #666;
  289 + background: #fff;
  290 + border-radius: 5rpx;
  291 + height: 45rpx;
  292 + line-height: 45rpx;
  293 + padding: 0 10rpx;
  294 + position: relative;
  295 +
  296 + .itemButton {
  297 + border-radius: 0;
  298 + text-align: left;
  299 + opacity: 0;
  300 + width: 100%;
  301 + height: 100%;
  302 + position: absolute;
  303 + left: 0;
  304 + top: 0;
  305 + }
  306 + }
  307 +
  308 + .name {
  309 + color: #fff;
  310 + font-weight: bold;
  311 + font-size: 32rpx;
  312 + }
  313 +
  314 + .placardVip {
  315 + background: #2a2e44;
  316 + color: #f4d6a1;
  317 + font-size: 22rpx;
  318 + padding: 4rpx 10rpx;
  319 + text-align: center;
  320 + border-radius: 4rpx;
  321 + }
  322 +
  323 + }
  324 +
  325 + .detail {
  326 + color: #fff;
  327 + font-size: 24rpx;
  328 + padding-top: 6rpx;
  329 + }
  330 +
  331 + }
  332 +
  333 + .cell-group {
  334 + .cell-item {
  335 + border-bottom: 2rpx solid #eee;
  336 + background-color: #fff;
  337 + border-radius: 10rpx;
  338 + padding: 20rpx 24rpx;
  339 +
  340 + .title {
  341 + color: #333;
  342 + font-size: 28rpx;
  343 + padding: 0 10rpx;
  344 + font-weight: bold;
  345 + margin: 0;
  346 + }
  347 +
  348 + .more {
  349 + font-size: 24rpx;
  350 + color: #999;
  351 + }
  352 + }
  353 + }
  354 +
  355 + .submit {
  356 + margin-top: 160rpx;
  357 + color: #fff;
  358 + width: 650rpx;
  359 + border: none;
53 360 }
54 361
55   - .head-box {
56   - padding-top: 128rpx;
57   - background: linear-gradient(to left top, #f32735, #fc674d);
58   - border-radius: 50% / 0 0 5% 5%;
59   - overflow: hidden;
  362 + .loginPhone {
  363 + width: 750rpx;
  364 + padding: 0rpx 10rpx;
  365 +
  366 + .form-row {
  367 + position: relative;
  368 +
  369 + .input {
  370 + font-size: 34rpx;
  371 + line-height: 102rpx;
  372 + height: 94rpx;
  373 + box-sizing: border-box;
  374 + font-size: 30rpx;
  375 + padding: 0;
  376 + font-weight: bold;
  377 + }
  378 +
  379 + .getvcode {
  380 + font-size: 26rpx;
  381 + height: 50rpx;
  382 + color: #333;
  383 + line-height: 52rpx;
  384 + background: #eee;
  385 + min-width: 188rpx;
  386 + text-align: center;
  387 + border-radius: 8rpx;
  388 + position: absolute;
  389 + top: 50%;
  390 + transform: translateY(-50%);
  391 + right: 17rpx;
  392 + z-index: 11;
  393 +
  394 + &.forhidden {
  395 + background: #eee;
  396 + color: #cccccc;
  397 + }
  398 + }
  399 + }
60 400 }
61 401 </style>
... ...
  1 +<template>
  2 + <view class="set-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="u-m-t-20">
  6 + <text style="color:#8f9ca2">基本资料</text>
  7 + </view>
  8 + <view style="border: 0.1px solid #e4e4e4;margin-top: 20rpx;padding-left: 15rpx;">
  9 + <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
  10 + <u-form-item labelWidth="80px" label="真实姓名" prop="userInfo.name" borderBottom ref="item1">
  11 + <u--input placeholder="请输入真实姓名" v-model="model1.userInfo.name" border="none"></u--input>
  12 + </u-form-item>
  13 + <u-form-item labelWidth="80px" label="手机号码" prop="userInfo.name" borderBottom ref="item1">
  14 + <u--input placeholder="请输入手机号码" v-model="model1.userInfo.name" border="none"></u--input>
  15 + </u-form-item>
  16 + <u-form-item labelWidth="80px" label="用户账号 " prop="userInfo.account" borderBottom ref="item1">
  17 + <u--input placeholder="请输入用户账号 " v-model="model1.userInfo.name" border="none"></u--input>
  18 + </u-form-item>
  19 + <u-form-item labelWidth="80px" label="邮箱地址" prop="userInfo.name" borderBottom ref="item1">
  20 + <u--input placeholder="请输入邮箱地址" v-model="model1.userInfo.name" border="none"></u--input>
  21 + </u-form-item>
  22 + <u-form-item labelWidth="80px" label="有效期" prop="userInfo.name" borderBottom ref="item1">
  23 + <u--input placeholder="请选择有效期" v-model="model1.userInfo.name" border="none"></u--input>
  24 + </u-form-item>
  25 + </u--form>
  26 + </view>
  27 +
  28 + <view>
  29 + <button class="submit" size="default" @click="onSubmitFunc" :style="{background:PrimaryColor}">确认</button>
  30 + </view>
  31 + <!-- #ifdef MP -->
  32 + <view class="u-m-t-40">
  33 + <text style="visibility: hidden;">#</text>
  34 + </view>
  35 + <!-- #endif -->
  36 + </view>
  37 +</template>
  38 +
  39 +<script>
  40 + export default {
  41 + data() {
  42 + return {
  43 + PrimaryColor: '#0079fe', //主题色
  44 + value: '',
  45 + model1: {
  46 + userInfo: {
  47 + name: '',
  48 + sex: '',
  49 + account: 'test9527'
  50 + },
  51 + },
  52 + };
  53 + },
  54 + methods: {},
  55 + }
  56 +</script>
  57 +
  58 +<style lang="scss" scoped>
  59 + .set-page {
  60 + padding: 0rpx 30rpx;
  61 +
  62 + .submit {
  63 + margin-top: 60rpx;
  64 + color: #fff;
  65 + width: 100%;
  66 + border: none;
  67 + border-radius: 40rpx;
  68 + }
  69 + }
  70 +</style>
... ...