会员权益
This commit is contained in:
778
pages/login/index.vue
Normal file
778
pages/login/index.vue
Normal file
@@ -0,0 +1,778 @@
|
||||
<!-- +----------------------------------------------------------------------
|
||||
| 麦沃德科技赋能开发者，助力商协会发展
|
||||
+----------------------------------------------------------------------
|
||||
| Copyright (c) 2017～2024 www.wdsxh.cn All rights reserved.
|
||||
+----------------------------------------------------------------------
|
||||
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
|
||||
+----------------------------------------------------------------------
|
||||
| Author: MY WORLD Team <bd@maiwd.cn> www.maiwd.cn
|
||||
+----------------------------------------------------------------------
|
||||
| 登录 开发者: 麦沃德科技-半夏
|
||||
+---------------------------------------------------------------------- -->
|
||||
|
||||
<template>
|
||||
<view class="container" :style="{'--theme-color': themeColor}">
|
||||
<!-- 标题栏 -->
|
||||
<title-bar :showBack="true" title="登录"></title-bar>
|
||||
<!-- 内容区 -->
|
||||
<view class="container-main" v-if="loadEnd">
|
||||
<image class="main-header" :src="loginImg" mode="aspectFit" v-if="loginImg"></image>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="main-login">
|
||||
<view class="login-title">小程序需要登录注册才能使用相关功能，申请获取以下权限</view>
|
||||
<view class="login-subtitle">获得你的公开信息(昵称、头像、手机号码等)</view>
|
||||
<!-- 授权登录 -->
|
||||
<view class="login-info" v-if="isRegister">
|
||||
<view class="info-btn" @click="handleLogin">授权登录</view>
|
||||
<view class="info-btn cancel" @click="goBack(2)">取消登录</view>
|
||||
</view>
|
||||
<!-- 授权头像昵称 -->
|
||||
<form class="login-info" @submit="handleLogin" v-else>
|
||||
<view class="info-item">
|
||||
<view class="item-title">头像</view>
|
||||
<button class="item-avatar" open-type="chooseAvatar" @chooseavatar="bindChooseAvatar">
|
||||
<image class="image" :src="avatarPath || '/static/login.png'" mode="aspectFill"></image>
|
||||
</button>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="item-title">昵称</view>
|
||||
<input class="item-nickname" type="nickname" name="nickname" :value="userInfo.nickname" placeholder="请输入昵称" />
|
||||
</view>
|
||||
<button class="info-btn" style="margin-top: 48rpx;" form-type="submit">授权登录</button>
|
||||
<button class="info-btn cancel" @click="goBack(2)">取消登录</button>
|
||||
</form>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<!-- 手机号验证码登录 -->
|
||||
<view class="main-form" v-if="!isShowInfo">
|
||||
<view class="form-input">
|
||||
<input class="input" v-model="mobile" maxlength="11" type="number" placeholder="请输入您的手机号" placeholder-class="placeholder" />
|
||||
</view>
|
||||
<view class="form-input flex align-items-center">
|
||||
<input class="input flex-item" v-model="captcha" type="text" placeholder="请输入验证码" placeholder-class="placeholder" />
|
||||
<view class="countdown" v-if="countdown && countdown > 0">{{countdown}}秒</view>
|
||||
<view class="btn" @click="getCaptcha()" v-else>发送验证码</view>
|
||||
</view>
|
||||
<view class="form-btn" @click="onLogin">登录</view>
|
||||
<view class="form-read flex align-items-center" @click="isRead = !isRead">
|
||||
<view class="radio" :class="{active: isRead}">
|
||||
<image src="/static/tick.png" mode="aspectFill" v-if="isRead"></image>
|
||||
</view>
|
||||
<view class="label flex-item">我已阅读并同意 <text @click.stop="toAgreement(1)">《用户协议》</text>和<text @click.stop="toAgreement(2)">《隐私政策》</text></view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 授权头像昵称 -->
|
||||
<view class="main-login" v-else>
|
||||
<view class="login-info">
|
||||
<view class="info-item">
|
||||
<view class="item-title">头像</view>
|
||||
<view class="item-avatar" @click="chooseAvatar">
|
||||
<image class="image" :src="avatarPath || '/static/login.png'" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="item-title">昵称</view>
|
||||
<input class="item-nickname" v-model="userInfo.nickname" placeholder="请输入昵称" />
|
||||
</view>
|
||||
<button class="info-btn" style="margin-top: 48rpx;" @click="handleUpdateUser">授权登录</button>
|
||||
<button class="info-btn cancel" @click="goBack(1)">稍后授权</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import { mapState } from "vuex"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 加载完成
|
||||
loadEnd: false,
|
||||
// 微信参数
|
||||
// #ifdef MP-WEIXIN
|
||||
// 是否已经注册
|
||||
isRegister: false,
|
||||
// #endif
|
||||
// 已选择头像
|
||||
avatarPath: "",
|
||||
// 用户信息
|
||||
userInfo: {
|
||||
avatar: "",
|
||||
nickname: "",
|
||||
},
|
||||
// 公众号H5参数
|
||||
// #ifndef MP-WEIXIN
|
||||
// 是否已读
|
||||
isRead: false,
|
||||
// 手机号
|
||||
mobile: "",
|
||||
// 验证码
|
||||
captcha: "",
|
||||
// 验证码倒计时
|
||||
countdown: 0,
|
||||
// 定时器
|
||||
interval: null,
|
||||
// 是否显示设置头像昵称
|
||||
isShowInfo: false,
|
||||
// #endif
|
||||
// 来源链接
|
||||
fromPage: null,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.from) this.fromPage = decodeURIComponent(option.from)
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getAuthStatus(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
onShow() {
|
||||
// #ifndef MP-WEIXIN
|
||||
if (this.isRead || this.mobile || this.captcha || this.isShowInfo) return
|
||||
this.loadEnd = false
|
||||
uni.showLoading({
|
||||
title: "加载中"
|
||||
})
|
||||
this.getAuthCode(() => {
|
||||
uni.hideLoading()
|
||||
this.loadEnd = true
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
onUnload() {
|
||||
clearInterval(this.interval)
|
||||
},
|
||||
// #endif
|
||||
computed: {
|
||||
...mapState({
|
||||
themeColor: state => state.app.themeColor,
|
||||
appletLogo: state => state.app.appletLogo,
|
||||
appletName: state => state.app.appletName,
|
||||
loginImg: state => state.app.loginImg,
|
||||
token: state => state.user.token,
|
||||
WeChatAppid: state => state.app.WeChatAppid,
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 返回上一页
|
||||
async goBack(type) {
|
||||
try {
|
||||
let pages = getCurrentPages()
|
||||
if (type == 2) {
|
||||
if (pages.length == 1 || pages[pages.length - 2].route.indexOf("pages/login/index") > -1) {
|
||||
this.$util.toPage({
|
||||
mode: 3,
|
||||
path: "/pages/mine/index",
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
} else {
|
||||
if (this.fromPage && this.fromPage.indexOf("pages/login/index") == -1) {
|
||||
const isPermission = await this.$util.getPagePermission({ mode: 2, path: this.fromPage }, 2)
|
||||
if (isPermission) {
|
||||
this.$util.toPage({
|
||||
mode: 2,
|
||||
path: this.fromPage
|
||||
})
|
||||
} else {
|
||||
this.$util.toPage({
|
||||
mode: 3,
|
||||
path: "/pages/mine/index",
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (pages.length == 1 || pages[pages.length - 2].route.indexOf("pages/login/index") > -1) {
|
||||
this.$util.toPage({
|
||||
mode: 3,
|
||||
path: "/pages/mine/index",
|
||||
})
|
||||
} else {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
this.$util.toPage({
|
||||
mode: 3,
|
||||
path: "/pages/mine/index",
|
||||
})
|
||||
}
|
||||
},
|
||||
// 微信登录
|
||||
// #ifdef MP-WEIXIN
|
||||
// 获取账号是否已注册
|
||||
getAuthStatus(fn) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: loginRes => {
|
||||
this.$util.request("login.isAuth", {
|
||||
code: loginRes.code
|
||||
}).then(res => {
|
||||
if (fn) fn()
|
||||
if (res.code == 1) {
|
||||
if (res.data.auth_status == 1) {
|
||||
this.isRegister = true
|
||||
} else {
|
||||
this.isRegister = false
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
if (fn) fn()
|
||||
console.error('获取账号是否已注册 ', error)
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "授权失败，请重试"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 选择头像
|
||||
bindChooseAvatar(e) {
|
||||
this.avatarPath = e.detail.avatarUrl
|
||||
},
|
||||
// 提交登录
|
||||
handleLogin(e) {
|
||||
if (!this.isRegister) {
|
||||
this.userInfo.nickname = e.detail.value.nickname
|
||||
if (!this.avatarPath) {
|
||||
uni.showToast({
|
||||
title: "请设置头像后登录",
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.userInfo.nickname) {
|
||||
uni.showToast({
|
||||
title: "请设置昵称后登录",
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
uni.showLoading({
|
||||
title: '授权中',
|
||||
mask: true,
|
||||
})
|
||||
if (this.avatarPath) {
|
||||
this.$util.uploadFile(this.avatarPath).then(result => {
|
||||
if (result.code == 1) {
|
||||
this.userInfo.avatar = result.data.url
|
||||
this.loginEvent()
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result?.msg || "上传失败",
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('上传图片 ', error)
|
||||
})
|
||||
} else {
|
||||
this.loginEvent()
|
||||
}
|
||||
},
|
||||
// 提交事件
|
||||
loginEvent() {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: loginRes => {
|
||||
let url = ""
|
||||
let data = {
|
||||
code: loginRes.code
|
||||
}
|
||||
if (this.isRegister) {
|
||||
url = "login.login"
|
||||
} else {
|
||||
url = "login.register"
|
||||
if (uni.getStorageSync("parentWechatId")) data.parent_wechat_id = uni.getStorageSync("parentWechatId")
|
||||
if (this.userInfo.nickname) data.nickname = this.userInfo.nickname
|
||||
if (this.userInfo.avatar) data.avatar = this.userInfo.avatar
|
||||
}
|
||||
console.log('触发')
|
||||
this.$util.request(url, data).then(res => {
|
||||
|
||||
console.log(res,'====================res==================')
|
||||
|
||||
|
||||
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
console.log(res.data,'================data=================')
|
||||
uni.setStorageSync('token', res.data.token);
|
||||
uni.setStorageSync("userInfo", res.data)
|
||||
console.log(res.data,'=============res.data======================')
|
||||
this.$store.commit('user/setToken', res.data.token)
|
||||
this.$store.commit('user/setUserInfo', res.data)
|
||||
this.goBack(1)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('登录/注册 ', error)
|
||||
})
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "授权失败，请重试"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
// 公众号H5登录
|
||||
// #ifndef MP-WEIXIN
|
||||
// 获取微信授权code
|
||||
getAuthCode(fn) {
|
||||
let authCode = this.getUrlCode('code')
|
||||
if (authCode) {
|
||||
const now = new Date().getTime();
|
||||
const item = {
|
||||
value: authCode,
|
||||
expiry: parseInt(now) + 240000,
|
||||
}
|
||||
sessionStorage.setItem('authCode', JSON.stringify(item));
|
||||
if (document.referrer.indexOf("open.weixin.qq.com") == -1) {
|
||||
history.back()
|
||||
} else {
|
||||
history.go(-2)
|
||||
}
|
||||
} else {
|
||||
if (this.getSessionValue('authCode')) {
|
||||
if (fn) fn()
|
||||
} else {
|
||||
var local = window.location.href;
|
||||
var appid = this.WeChatAppid
|
||||
location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + encodeURIComponent(local) + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取临时存储
|
||||
getSessionValue(key) {
|
||||
const itemStr = sessionStorage.getItem(key);
|
||||
if (!itemStr) {
|
||||
return null;
|
||||
}
|
||||
const item = JSON.parse(itemStr);
|
||||
const now = new Date();
|
||||
if (now.getTime() > item.expiry) {
|
||||
sessionStorage.removeItem(key);
|
||||
return null;
|
||||
}
|
||||
return item.value;
|
||||
},
|
||||
// 截取url中的code方法
|
||||
getUrlCode(name) {
|
||||
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
|
||||
let url = window.location.href.split('#')[0];
|
||||
let search = url.split('?')[1];
|
||||
if (search) {
|
||||
var r = search.substr(0).match(reg);
|
||||
if (r !== null) {
|
||||
return unescape(r[2]);
|
||||
}
|
||||
return null;
|
||||
} else return null;
|
||||
},
|
||||
// 跳转用户协议和隐私政策
|
||||
toAgreement(type) {
|
||||
this.$util.toPage({
|
||||
mode: 1,
|
||||
path: "/pages/mine/settings/agreement?type=" + type
|
||||
})
|
||||
},
|
||||
// 获取验证码
|
||||
getCaptcha() {
|
||||
if (!this.mobile) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入手机号"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.$util.validation("phone", this.mobile)) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入正确的手机号"
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$util.request("login.captcha", {
|
||||
mobile: this.mobile,
|
||||
event: "mobilelogin",
|
||||
}).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
clearInterval(this.interval)
|
||||
this.countdown = 60
|
||||
this.interval = setInterval(() => {
|
||||
if (this.countdown <= 1) {
|
||||
clearInterval(this.interval)
|
||||
this.countdown = 0
|
||||
} else this.countdown--
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('发送验证码', error)
|
||||
})
|
||||
},
|
||||
// 登录
|
||||
onLogin() {
|
||||
if (!this.isRead) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请阅读并同意用户协议和隐私政策"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.mobile) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入手机号"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.$util.validation("phone", this.mobile)) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入正确的手机号"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.captcha) {
|
||||
uni.showToast({
|
||||
icon: "none",
|
||||
title: "请输入手机验证码"
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showLoading({
|
||||
title: "登录中",
|
||||
mask: true
|
||||
})
|
||||
let data = {
|
||||
code: this.getSessionValue('authCode'),
|
||||
mobile: this.mobile,
|
||||
captcha: this.captcha,
|
||||
}
|
||||
if (uni.getStorageSync("parentWechatId")) data.parent_wechat_id = uni.getStorageSync("parentWechatId")
|
||||
this.$util.request("login.officialLogin", data).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
sessionStorage.removeItem("authCode")
|
||||
uni.setStorageSync('token', res.data.token);
|
||||
uni.setStorageSync("userInfo", res.data)
|
||||
this.$store.commit('user/setToken', res.data.token)
|
||||
this.$store.commit('user/setUserInfo', res.data)
|
||||
|
||||
|
||||
console.log(res.data,'=1111111111111===========================>>>>>>>>')
|
||||
|
||||
if (res.data.register_state == 1) {
|
||||
this.isShowInfo = true
|
||||
} else {
|
||||
this.goBack(1)
|
||||
}
|
||||
} else {
|
||||
if (res.msg.indexOf("40163") > -1) {
|
||||
sessionStorage.removeItem("authCode")
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "公众号授权状态已过期，请重试",
|
||||
showCancel: false,
|
||||
confirmColor: this.themeColor,
|
||||
confirmText: "重新授权",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
this.getAuthCode()
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('登录/注册 ', error)
|
||||
})
|
||||
},
|
||||
// 选择头像
|
||||
chooseAvatar() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
this.avatarPath = res.tempFiles[0].tempFilePath
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sourceType: ['album', 'camera'],
|
||||
sizeType: ['compressed'],
|
||||
success: (res) => {
|
||||
this.avatarPath = res.tempFilePaths[0]
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
},
|
||||
// 更新用户头像昵称
|
||||
handleUpdateUser() {
|
||||
if (!this.avatarPath) {
|
||||
uni.showToast({
|
||||
title: "请设置头像后登录",
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.userInfo.nickname) {
|
||||
uni.showToast({
|
||||
title: "请设置昵称后登录",
|
||||
icon: 'none',
|
||||
})
|
||||
return
|
||||
}
|
||||
this.uploadAvatar((path) => {
|
||||
this.userInfo.avatar = path
|
||||
this.$util.request("mine.updateUser", this.userInfo).then(res => {
|
||||
uni.hideLoading()
|
||||
if (res.code == 1) {
|
||||
var userInfo = uni.getStorageSync("userInfo")
|
||||
userInfo.avatar = res.data.avatar
|
||||
userInfo.nickname = res.data.nickname
|
||||
uni.setStorageSync("userInfo", userInfo)
|
||||
this.$store.commit('user/setUserInfo', userInfo)
|
||||
this.goBack(1)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
uni.hideLoading()
|
||||
console.error('更新用户信息 ' + error)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 上传头像
|
||||
uploadAvatar(fn) {
|
||||
this.$util.uploadFile(this.avatarPath).then(result => {
|
||||
if (result.code == 1) {
|
||||
fn(result.data.url)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: result?.msg || "上传失败",
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('上传图片 ', error)
|
||||
})
|
||||
},
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.container {
|
||||
.container-main {
|
||||
padding: 96rpx 60rpx 0;
|
||||
|
||||
.main-header {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
margin-bottom: 76rpx;
|
||||
}
|
||||
|
||||
.main-login {
|
||||
.login-title {
|
||||
color: #585858;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
color: #888;
|
||||
font-size: 28rpx;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.login-info {
|
||||
margin-top: 48rpx;
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #ffffff;
|
||||
border-bottom: 1rpx solid #F6F7FB;
|
||||
|
||||
.item-title {
|
||||
margin-right: 40rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
flex: 1;
|
||||
padding: 32rpx 0;
|
||||
height: 80rpx;
|
||||
background: transparent;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-nickname {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 32rpx 0;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
.info-btn {
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
font-size: 28rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
background: var(--theme-color);
|
||||
color: #ffffff;
|
||||
|
||||
&.cancel {
|
||||
background: #eee;
|
||||
color: #999;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-form {
|
||||
margin-top: 96rpx;
|
||||
|
||||
.form-input {
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #F0F0F0;
|
||||
background: #FFF;
|
||||
margin-top: 32rpx;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
color: #5A5B6E;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 36rpx 32rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #ACADB7;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 24rpx;
|
||||
color: var(--theme-color);
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
padding: 0 24rpx;
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
color: #FFF;
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 36rpx;
|
||||
border-radius: 16rpx;
|
||||
background: var(--theme-color);
|
||||
margin-top: 48rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-read {
|
||||
margin-top: 52rpx;
|
||||
|
||||
.radio {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
background: #D6DBDE;
|
||||
border-radius: 50%;
|
||||
|
||||
&.active {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-left: 20rpx;
|
||||
color: #5A5B6E;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
|
||||
text {
|
||||
color: var(--theme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user