Merge branch 'test' of https://e.coding.net/g-cphe0354/duanju/new_app into test
This commit is contained in:
duan
@@ -1,11 +1,201 @@
|
||||
<template>
|
||||
ios
|
||||
anzhuo
|
||||
<view class="container">
|
||||
<view class="u-status-bar"></view>
|
||||
<view class="list-wrap">
|
||||
<view class="title-wrap">
|
||||
<view class="title">最近观看</view>
|
||||
<view class="more">更多</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<div class="item-content">
|
||||
<view class="cover">
|
||||
<image class="img" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="num">第三集</view>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<view class="name">我在八十年代当后妈</view>
|
||||
<view class="t">言情</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
<view class="item">
|
||||
<div class="item-content">
|
||||
<view class="cover">
|
||||
<image class="img" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="num">第三集</view>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<view class="name">我在八十年代当后妈</view>
|
||||
<view class="t">言情</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
<view class="item">
|
||||
<div class="item-content">
|
||||
<view class="cover">
|
||||
<image class="img" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="num">第三集</view>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<view class="name">我在八十年代当后妈</view>
|
||||
<view class="t">言情</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
<view class="item">
|
||||
<div class="item-content">
|
||||
<view class="cover">
|
||||
<image class="img" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="num">第三集</view>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<view class="name">我在八十年代当后妈</view>
|
||||
<view class="t">言情</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
<view class="item">
|
||||
<div class="item-content">
|
||||
<view class="cover">
|
||||
<image class="img" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="num">第三集</view>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<view class="name">我在八十年代当后妈</view>
|
||||
<view class="t">言情</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
<view class="item">
|
||||
<div class="item-content">
|
||||
<view class="cover">
|
||||
<image class="img" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="num">第三集</view>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<view class="name">我在八十年代当后妈</view>
|
||||
<view class="t">言情</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view class="title-wrap">
|
||||
<view class="title">我的追剧</view>
|
||||
<view class="more">更多</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item">
|
||||
<div class="item-content">
|
||||
<view class="cover">
|
||||
<image class="img" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="num">第三集</view>
|
||||
</view>
|
||||
<view class="intro-wrap">
|
||||
<view class="name">我在八十年代当后妈</view>
|
||||
<view class="t">言情</view>
|
||||
</view>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { selectByUserId } from '@/api/me/me.js';
|
||||
import { onLoad } from '@dcloudio/uni-app';
|
||||
|
||||
async function selectByUserIdAjax() {
|
||||
try {
|
||||
const res = await selectByUserId();
|
||||
console.log(res);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
selectByUserId();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
page {
|
||||
background: #f5f7ff;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
color: #333;
|
||||
font-size: 28upx;
|
||||
}
|
||||
.list-wrap {
|
||||
margin-bottom: 40upx;
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 28upx;
|
||||
.title {
|
||||
font-weight: bold;
|
||||
font-size: 32upx;
|
||||
}
|
||||
.more {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(auto, 1fr);
|
||||
grid-column-gap: 28upx;
|
||||
grid-row-gap: 28upx;
|
||||
padding: 0 28upx;
|
||||
.item {
|
||||
.item-content {
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border-radius: 30upx;
|
||||
.cover {
|
||||
height: 200upx;
|
||||
position: relative;
|
||||
.img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.num {
|
||||
padding: 4upx 16upx;
|
||||
border-radius: 8upx;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(5px);
|
||||
position: absolute;
|
||||
right: 8upx;
|
||||
bottom: 8upx;
|
||||
color: #fff;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
.intro-wrap {
|
||||
padding: 20upx;
|
||||
.name {
|
||||
width: 180upx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 32upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.t {
|
||||
color: #999;
|
||||
font-size: 24upx;
|
||||
margin-top: 8upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
303
pages/login/appEq.vue
Normal file
303
pages/login/appEq.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<view class="containersView">
|
||||
<div style="width: 100%;height: 85%;position: absolute;background: url('../../static/images/appeq_bg.png') no-repeat center bottom / cover;"></div>
|
||||
|
||||
<view style="text-align: center;position: relative;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
|
||||
<image style="width: 124rpx;height: 124rpx;margin-top: -920rpx;border-radius:20upx;" src="../../static/images/appLogo.png"></image>
|
||||
<view style="font-size: 40rpx;margin-top: 22rpx;color: #FFFFFF;font-weight: bold;">斯耀短剧APP</view>
|
||||
<view style="font-size: 28rpx;margin-top: 16rpx;color: #FFFFFF;font-weight: bold;">海量电子榨菜 免费又过瘾</view>
|
||||
<button class="confirm-btn" @click="taobaoLogin">{{confirmBtn}}</button>
|
||||
|
||||
</view>
|
||||
<view id="shareit" v-if="show_share" @tap="closeShare">
|
||||
<image class="arrow" src="https://renwu.xiansqx.com/img/20210813/9aa484db4c60458f86deb2a8ab6fe400.png">
|
||||
</image>
|
||||
<view id="follow">点击右上角按钮，选择浏览器打开下载！</view>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<div v-if="isWeixin" style="width: 100%;height: 100%;position: absolute;top: 0;background: url('../../static/images/open_guide.png') no-repeat center bottom / cover;"></div>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobile: '',
|
||||
code: '',
|
||||
message: '',
|
||||
show_share: false,
|
||||
openShare: false,
|
||||
openShares: false,
|
||||
relationId: '',
|
||||
sending: false,
|
||||
confirmBtn: '斯耀短剧APP',
|
||||
isWeixin: false,
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
let u = navigator.userAgent;
|
||||
if ( u.indexOf('iPhone') > -1) {
|
||||
// #ifdef H5
|
||||
this.confirmBtn = "跳转网页版首页"
|
||||
// #endif
|
||||
}
|
||||
|
||||
if ( u.toLowerCase().indexOf('micromessenger') !== -1) {
|
||||
this.isWeixin = true
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
closeShare() {
|
||||
this.show_share = false;
|
||||
},
|
||||
taobaoLogin() {
|
||||
|
||||
var u = navigator.userAgent;
|
||||
if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
|
||||
this.$Request.get('/app/common/type/49').then(res => {
|
||||
if (res.code === 0) {
|
||||
if (res.data && res.data.value) {
|
||||
if (this.openShare) {
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') === -1) {
|
||||
this.show_share = false;
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
window.location.href = res.data.value;
|
||||
// #endif
|
||||
} else {
|
||||
this.show_share = true;
|
||||
}
|
||||
|
||||
} else {
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.setClipboardData({
|
||||
data: res.data.value,
|
||||
success: r => {
|
||||
// this.$queue.showToast('邀请码复制成功');
|
||||
}
|
||||
});
|
||||
window.location.href = res.data.value;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
this.$Request.get('/app/common/type/50').then(res => {
|
||||
if (res.code === 0) {
|
||||
if (res.data && res.data.value) {
|
||||
if (this.openShares) {
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('micromessenger') === -1) {
|
||||
this.show_share = false;
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
window.location.href = res.data.value;
|
||||
// uni.switchTab({
|
||||
// url: 'pages/index/index'
|
||||
// })
|
||||
// #endif
|
||||
} else {
|
||||
this.show_share = true;
|
||||
}
|
||||
} else {
|
||||
// #ifndef H5
|
||||
plus.runtime.openURL(res.data.value, function(res) {
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
uni.setClipboardData({
|
||||
data: res.data.value,
|
||||
success: r => {
|
||||
// this.$queue.showToast('邀请码复制成功');
|
||||
}
|
||||
});
|
||||
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
// window.location.href = res.data.value;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
uni-page-body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.containersView {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#shareit {
|
||||
-webkit-user-select: none;
|
||||
position: fixed;
|
||||
/*width: 100%;*/
|
||||
height: 2000px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#shareit img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 100px;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 1%;
|
||||
}
|
||||
|
||||
#follow {
|
||||
margin-right: 60px;
|
||||
margin-left: 30px;
|
||||
width: 90%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
float: left;
|
||||
margin-top: 160px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: 140upx;
|
||||
margin-top: 32upx;
|
||||
font-size: 24upx;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
border-radius: 30px;
|
||||
color: black;
|
||||
background: white;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.container {
|
||||
top: 0;
|
||||
padding-top: 50px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
background: #fff;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
.right-top-sign {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: -15px;
|
||||
z-index: 95;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
background: #e10a07;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: rotate(50deg);
|
||||
border-radius: 0 50px 0 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
right: -198px;
|
||||
top: 0;
|
||||
transform: rotate(-50deg);
|
||||
border-radius: 50px 0 0 0;
|
||||
/* background: pink; */
|
||||
}
|
||||
}
|
||||
|
||||
.left-bottom-sign {
|
||||
position: absolute;
|
||||
left: -270px;
|
||||
bottom: -320px;
|
||||
/*border: 100upx solid #d0d1fd;*/
|
||||
border-radius: 50%;
|
||||
padding: 90px;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
position: relative;
|
||||
left: 30px;
|
||||
top: -55px;
|
||||
font-size: 28px;
|
||||
color: #555;
|
||||
text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.input-content {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 416rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: #FD5775;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 70rpx;
|
||||
}
|
||||
</style>
|
||||
197
pages/login/bind.vue
Normal file
197
pages/login/bind.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<view class="containerView">
|
||||
<view class="cu-form-group"
|
||||
style="margin: 30upx;border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
|
||||
<view class="title">手机号</view>
|
||||
<input type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
|
||||
@input="inputChange" />
|
||||
</view>
|
||||
<view class="cu-form-group"
|
||||
style="margin: 30upx;border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
|
||||
<text class="title">验证码</text>
|
||||
<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code" @input="inputChange"
|
||||
@confirm="toLogin" />
|
||||
<button class="send-msg" @click="sendMsg" :disabled="sendIng">{{ sendTime }}</button>
|
||||
</view>
|
||||
|
||||
<button class="confirm-btn" @click="toLogin" :disabled="loginIng">立即绑定</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import listCell from '@/components/com-input';
|
||||
export default {
|
||||
components: {
|
||||
listCell
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mobile: '',
|
||||
code: '',
|
||||
loginIng: false,
|
||||
sendIng: false,
|
||||
sendTime: '获取验证码',
|
||||
count: 60,
|
||||
type: '',
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
if (option.type) {
|
||||
this.type = option.type
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
|
||||
countDown() {
|
||||
const {
|
||||
count
|
||||
} = this;
|
||||
if (count === 1) {
|
||||
this.count = 60;
|
||||
this.sendIng = false;
|
||||
this.sendTime = '获取验证码'
|
||||
} else {
|
||||
this.count = count - 1;
|
||||
this.sendIng = true;
|
||||
this.sendTime = count - 1 + '秒后重新获取';
|
||||
setTimeout(this.countDown.bind(this), 1000);
|
||||
}
|
||||
},
|
||||
sendMsg() {
|
||||
const {
|
||||
mobile
|
||||
} = this;
|
||||
if (!mobile) {
|
||||
this.$queue.showToast("请输入手机号");
|
||||
} else if (mobile.length !== 11) {
|
||||
this.$queue.showToast("请输入正确的手机号");
|
||||
} else {
|
||||
this.$queue.showLoading("正在发送验证码...");
|
||||
http.request({
|
||||
url: 'app/Login/sendMsg/' + mobile + '/gzg',
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.sendIng = true;
|
||||
this.$queue.showToast('验证码发送成功请注意查收');
|
||||
this.countDown();
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '短信发送失败',
|
||||
content: res.msg ? res.msg : '请一分钟后再获取验证码'
|
||||
});
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
toLogin() {
|
||||
const {
|
||||
mobile,
|
||||
code
|
||||
} = this;
|
||||
let userId = this.$queue.getData("userId");
|
||||
if (!mobile) {
|
||||
this.$queue.showToast("请输入手机号");
|
||||
} else if (mobile.length !== 11) {
|
||||
this.$queue.showToast("请输入正确的手机号");
|
||||
} else if (!code) {
|
||||
this.$queue.showToast("请输入验证码");
|
||||
} else {
|
||||
this.$queue.showLoading("正在绑定中...");
|
||||
let openId = this.$queue.getData('openId') ? this.$queue.getData('openId') : '';
|
||||
let openidnickname = this.$queue.getData('openidnickname') ? this.$queue.getData('openidnickname') :
|
||||
'';
|
||||
let openidheadimgurl = this.$queue.getData('openidheadimgurl') ? this.$queue.getData(
|
||||
'openidheadimgurl') : '';
|
||||
let invitation = this.$queue.getData('inviterCode') ? this.$queue.getData('inviterCode') : '';
|
||||
let userId = this.$queue.getData('userId') ? this.$queue.getData('userId') : '';
|
||||
|
||||
http.request({
|
||||
url: `app/Login/registerCode`,
|
||||
method: 'post',
|
||||
data: {
|
||||
phone: mobile,
|
||||
wxId: openId,
|
||||
userId: userId,
|
||||
inviterCode: invitation,
|
||||
avatar: openidheadimgurl,
|
||||
userName: openidnickname,
|
||||
msg: code
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$queue.setData("token", res.token);
|
||||
this.$queue.setData('userId', res.user.userId);
|
||||
this.$queue.setData('userName', res.user.userName);
|
||||
this.$queue.setData('phone', res.user.phone);
|
||||
this.$queue.setData('avatar', res.user.avatar ? res.user.avatar :
|
||||
'../../static/logo.png');
|
||||
this.$queue.showToast('绑定成功');
|
||||
setTimeout(function() {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '绑定失败',
|
||||
content: res.msg,
|
||||
});
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
border-radius: 30px;
|
||||
color: white;
|
||||
height: 30px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
background: #557EFD;
|
||||
}
|
||||
|
||||
.containerView {
|
||||
top: 0;
|
||||
padding-top: 32upx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 600upx;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
border-radius: 60upx;
|
||||
margin-top: 32upx;
|
||||
background: #557EFD;
|
||||
color: #ffffff;
|
||||
font-size: 32upx;
|
||||
|
||||
&:after {
|
||||
border-radius: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
316
pages/login/forgetPwd.vue
Normal file
316
pages/login/forgetPwd.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg" >
|
||||
<image src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="wrapper u-relative" style="padding-top: 48rpx;box-sizing: border-box;">
|
||||
<view class="input-content">
|
||||
<view style="font-size: 58rpx;font-weight: bold;color: #333;margin-bottom: 48rpx;">重置密码</view>
|
||||
<view class="cu-form-group">
|
||||
<view class="title">手机号</view>
|
||||
<input class="input" type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
|
||||
@input="inputChange" />
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<text class="title">验证码</text>
|
||||
<view class="input flex">
|
||||
<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code"
|
||||
@input="inputChange" @confirm="reset" />
|
||||
<button class="send-msg" @click="sendMsg" :disabled="sending">{{ sendTime }}</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-form-group">
|
||||
<text class="title">设置密码</text>
|
||||
<input class="input" type="password" :value="password" placeholder="请设置新密码" placeholder-class="input-empty"
|
||||
maxlength="20" minlength="6" data-key="password" @input="inputChange" @confirm="reset" />
|
||||
</view>
|
||||
<button class="confirm-btn" @click="reset">立即重置</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/http/http.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: '',
|
||||
mobile: '',
|
||||
password: '',
|
||||
sending: false,
|
||||
sendTime: '获取验证码',
|
||||
count: 60,
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 发送验证码
|
||||
*/
|
||||
sendMsg() {
|
||||
if (!this.mobile) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else if (this.mobile.length !== 11) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '正在发送验证码...'
|
||||
})
|
||||
http.request({
|
||||
url:'app/Login/sendMsg/' + this.mobile + '/forget',
|
||||
}).then(res => {
|
||||
if ( res.code == 0 ) {
|
||||
this.sending = true;
|
||||
uni.showToast({
|
||||
title: '验证码发送成功请注意查收',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
this.countDown();
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '短信发送失败',
|
||||
content: res.msg ? res.msg : '请一分钟后再获取验证码'
|
||||
});
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 验证码倒计时
|
||||
*/
|
||||
countDown() {
|
||||
const { count } = this;
|
||||
if (count === 1) {
|
||||
this.count = 60;
|
||||
this.sending = false;
|
||||
this.sendTime = '获取验证码';
|
||||
} else {
|
||||
this.count = count - 1;
|
||||
this.sending = true;
|
||||
this.sendTime = count - 1 + '秒后重新获取';
|
||||
setTimeout(this.countDown.bind(this), 1000);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取手机号/验证码/密码
|
||||
* @param {Object} e
|
||||
*/
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
reset() {
|
||||
const {
|
||||
mobile,
|
||||
password,
|
||||
code
|
||||
} = this;
|
||||
if (!mobile) {
|
||||
// this.$queue.showToast("请输入手机号");
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else if (!code) {
|
||||
// this.$queue.showToast("密码位数必须大于六位");
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else if (!password) {
|
||||
// this.$queue.showToast("请设置密码");
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else {
|
||||
this.loginIng = true;
|
||||
// this.$queue.showLoading("正在修改密码中...");
|
||||
uni.showLoading({
|
||||
title: '正在修改密码中...'
|
||||
})
|
||||
http.request({
|
||||
url: 'app/Login/forgetPwd?pwd=' + password + '&phone=' + mobile + '&msg=' + code,
|
||||
method: 'post'
|
||||
}).then(
|
||||
res => {
|
||||
// this.$Request.postJson("/appLogin/forgetPwd",{
|
||||
// pwd: password,
|
||||
// phone: mobile,
|
||||
// msg: code
|
||||
// }).then(res => {
|
||||
uni.hideLoading();
|
||||
if (res.code === 0) {
|
||||
uni.showToast({
|
||||
title: '密码找回成功',
|
||||
icon: 'none'
|
||||
});
|
||||
setTimeout(function() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
}, 1000)
|
||||
|
||||
} else {
|
||||
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '密码找回失败',
|
||||
content: res.msg,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bg{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
}
|
||||
.wrapper{
|
||||
position: relative;
|
||||
padding-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.footerView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 78rpx;
|
||||
|
||||
}
|
||||
.cuIcon::before{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.cuIcon-round::before {
|
||||
content: "\e6d7";
|
||||
}
|
||||
.cuIcon-radiobox:before {
|
||||
content: "\e75b";
|
||||
color: #37A6FF;
|
||||
}
|
||||
.send-msg {
|
||||
line-height: initial;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #EC6F48;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.send-msg::after{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.input-content {
|
||||
padding: 0 56rpx;
|
||||
}
|
||||
.cu-form-group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 48rpx;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
.title{
|
||||
margin-bottom: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.input{
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 40rpx;
|
||||
background: #EC6F48;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
288
pages/login/login.vue
Normal file
288
pages/login/login.vue
Normal file
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg" >
|
||||
<image src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="wrapper">
|
||||
<view class="input-content">
|
||||
<view style="font-size: 58rpx;font-weight: bold;color: #333;margin-bottom: 48rpx;">登录</view>
|
||||
|
||||
<view class="cu-form-group">
|
||||
<view class="title">手机号</view>
|
||||
<input class="input" type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
|
||||
@input="inputChange" />
|
||||
</view>
|
||||
|
||||
<view class="cu-form-group">
|
||||
<text class="title">密码</text>
|
||||
<view class="input flex">
|
||||
<input class="input" type="password" :value="password" placeholder="请输入密码" placeholder-class="input-empty"
|
||||
maxlength="20" minlength="6" data-key="password" @input="inputChange" @confirm="toLogin" />
|
||||
<text class="send-msg" @click="forget" style="flex-shrink: 0;">忘记密码</text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toLogin">登录</button>
|
||||
<view style="margin-top: 32px;text-align: center">
|
||||
<view>
|
||||
没有账号？
|
||||
<text style="color: #ff7581" @click="register()">立即注册</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footerView">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox v-model="checked" label-size='24upx' shape="circle" @change="radioChange"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<view>同意</view>
|
||||
<!-- 协议地址 -->
|
||||
<navigator url="/me/setting/mimi" open-type="navigate">《隐私政策》</navigator>
|
||||
和
|
||||
<navigator url="/me/setting/xieyi" open-type="navigate">《用户服务协议》</navigator>
|
||||
</view>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/http/http.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mobile: '',
|
||||
password: '',
|
||||
checked: false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
if (uni.getStorageSync('isSafeView')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您正在使用无痕浏览，可能导致登录状态失效，建议切换浏览模式',
|
||||
})
|
||||
uni.setStorageSync("isSafeView", null)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
register() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/register'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 忘记密码
|
||||
*/
|
||||
forget() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/forgetPwd'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取手机号/密码
|
||||
* @param {Object} e
|
||||
*/
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* 同意协议
|
||||
* @param {Object} e
|
||||
*/
|
||||
radioChange(e) {
|
||||
this.checked = e
|
||||
},
|
||||
|
||||
/**
|
||||
* 登录
|
||||
*/
|
||||
toLogin() {
|
||||
if (!this.checked) {
|
||||
uni.showToast({
|
||||
title: '请阅读并同意《隐私政策》和《用户服务协议》',
|
||||
icon: 'none',
|
||||
})
|
||||
return;
|
||||
}
|
||||
|
||||
const { mobile, password } = this;
|
||||
console.log(this.mobile)
|
||||
if (!mobile) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none',
|
||||
})
|
||||
} else if (mobile.length != 11) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none',
|
||||
})
|
||||
} else if (!password) {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none',
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '正在登录中...',
|
||||
})
|
||||
http.request({
|
||||
url: 'app/Login/registerCode?password=' + password + '&phone=' + mobile,
|
||||
method: 'post'
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
uni.setStorageSync('token', res.token)
|
||||
uni.setStorageSync('userId', res.user.userId)
|
||||
uni.setStorageSync('userName', res.user.userName)
|
||||
uni.setStorageSync('avatar', res.user.avatar ? res.user.avatar : '../../static/default/avatar.png')
|
||||
uni.setStorageSync('phone', res.user.phone)
|
||||
uni.setStorageSync('invitationCode', res.user.invitationCode)
|
||||
uni.setStorageSync('sex', res.user.sex)
|
||||
uni.setStorageSync('userId', res.user.userId)
|
||||
//设置渠道码
|
||||
if (res.user.qdCode) {
|
||||
uni.setStorageSync('qdCode', res.user.qdCode)
|
||||
}
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'none'
|
||||
})
|
||||
uni.reLaunch({
|
||||
url:'/pages/index/index'
|
||||
})
|
||||
} else{
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bg{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
}
|
||||
.wrapper{
|
||||
position: relative;
|
||||
padding-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.footerView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 78rpx;
|
||||
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
line-height: initial;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #EC6F48;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.send-msg::after{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
}
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.input-content {
|
||||
padding: 0 56rpx;
|
||||
}
|
||||
.cu-form-group{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 48rpx;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
}
|
||||
.cu-form-group .title{
|
||||
width: 100%;
|
||||
margin-bottom: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.cu-form-group .input{
|
||||
width: 100%!important;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 40rpx;
|
||||
background: #EC6F48;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
396
pages/login/register.vue
Normal file
396
pages/login/register.vue
Normal file
@@ -0,0 +1,396 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg" >
|
||||
<image src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="wrapper u-relative" style="padding-top: 48rpx;box-sizing: border-box;">
|
||||
<view class="input-content">
|
||||
<view style="font-size: 58rpx;font-weight: bold;color: #333;margin-bottom: 48rpx;">注册</view>
|
||||
|
||||
<view class="cu-form-group">
|
||||
<view class="title">手机号</view>
|
||||
<input class="input" type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
|
||||
@input="inputChange" />
|
||||
</view>
|
||||
<view class="cu-form-group">
|
||||
<text class="title">验证码</text>
|
||||
<view class="input flex">
|
||||
<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code"
|
||||
@input="inputChange" @confirm="toRegister" />
|
||||
<button class="send-msg" @click="sendMsg" :disabled="sending">{{ sendTime }}</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="cu-form-group">
|
||||
<text class="title">设置密码</text>
|
||||
<input class="input" type="password" :value="password" placeholder="请设置新密码" placeholder-class="input-empty"
|
||||
maxlength="20" minlength="6" data-key="password" @input="inputChange" @confirm="toRegister" />
|
||||
</view>
|
||||
<button class="confirm-btn" @click="toRegister">注册</button>
|
||||
<button class="confirm-btn" @click="toLogin">登录</button>
|
||||
</view>
|
||||
<view class="footerView">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox v-model="checked" label-size='24upx' shape="circle" @change="radioChange"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<view>注册即同意</view>
|
||||
<!-- 协议地址 -->
|
||||
<navigator url="/me/setting/mimi" open-type="navigate" style="color: #37A6FF;">《隐私政策》</navigator>
|
||||
与
|
||||
<navigator url="/me/setting/xieyi" open-type="navigate" style="color: #37A6FF;">《用户协议》</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/http/http.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: '',
|
||||
mobile: '',
|
||||
password: '',
|
||||
sending: false,
|
||||
sendTime: '获取验证码',
|
||||
count: 60,
|
||||
relation: "",
|
||||
invitation: '',
|
||||
registerCode: '',
|
||||
qdCodeion: '', //渠道码
|
||||
checked: false,
|
||||
};
|
||||
},
|
||||
onLoad( options ) {
|
||||
if (uni.getStorageSync('qdCodeion')) { this.qdCodeion = uni.getStorageSync('qdCodeion') }
|
||||
if (options.qdCode) { this.qdCodeion = options.qdCode }
|
||||
if (options.invitation ) { this.invitation = options.invitation }
|
||||
|
||||
http.request({
|
||||
url:'app/common/type/3',
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.registerCode = res.data.value
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 发送验证码
|
||||
*/
|
||||
sendMsg() {
|
||||
if (!this.mobile) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else if (this.mobile.length !== 11) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '正在发送验证码...'
|
||||
})
|
||||
http.request({
|
||||
url:'app/Login/sendMsg/' + this.mobile + '/login',
|
||||
}).then(res => {
|
||||
if ( res.code == 0 ) {
|
||||
this.sending = true;
|
||||
uni.showToast({
|
||||
title: '验证码发送成功请注意查收',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
this.countDown();
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '短信发送失败',
|
||||
content: res.msg ? res.msg : '请一分钟后再获取验证码'
|
||||
});
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 验证码倒计时
|
||||
*/
|
||||
countDown() {
|
||||
const { count } = this;
|
||||
if (count === 1) {
|
||||
this.count = 60;
|
||||
this.sending = false;
|
||||
this.sendTime = '获取验证码';
|
||||
} else {
|
||||
this.count = count - 1;
|
||||
this.sending = true;
|
||||
this.sendTime = count - 1 + '秒后重新获取';
|
||||
setTimeout(this.countDown.bind(this), 1000);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取注册值
|
||||
* @param {Object} e
|
||||
*/
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否同意协议
|
||||
* @param {Object} e
|
||||
*/
|
||||
radioChange(e) {
|
||||
this.checked = e
|
||||
},
|
||||
|
||||
/**
|
||||
* 登录
|
||||
*/
|
||||
toLogin() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 注册
|
||||
*/
|
||||
toRegister() {
|
||||
const {
|
||||
mobile,
|
||||
password,
|
||||
code,
|
||||
checked,
|
||||
invitation,
|
||||
registerCode,
|
||||
qdCodeion
|
||||
} = this;
|
||||
if (!mobile) {
|
||||
uni.showToast({
|
||||
title: '请输入账号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!code) {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!password) {
|
||||
uni.showToast({
|
||||
title: '请设置密码',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (password.length < 6) {
|
||||
uni.showToast({
|
||||
title: '密码位数必须大于六位',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (invitation.length == 0 && registerCode == '是') {
|
||||
uni.showToast({
|
||||
title: '请输入邀请码',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!checked) {
|
||||
uni.showToast({
|
||||
title: '请先同意《隐私政策》和《用户协议》',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
this.logining = true;
|
||||
uni.showLoading({
|
||||
title: '注册中...'
|
||||
})
|
||||
let platform = ''
|
||||
// #ifdef APP
|
||||
platform = 'app'
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
platform = 'h5'
|
||||
// #endif
|
||||
http.request({
|
||||
url: 'app/Login/registerCode?password=' + password + '&phone=' + mobile + '&msg=' + code +
|
||||
'&inviterCode=' + invitation + '&platform=' + platform + '&qdCode=' + qdCodeion,
|
||||
method: 'post'
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
if (res.code === 0) {
|
||||
uni.setStorageSync('token', res.token)
|
||||
uni.setStorageSync('userId', res.user.userId)
|
||||
uni.setStorageSync('phone', res.user.phone)
|
||||
uni.setStorageSync('invitationCode', res.user.invitationCode)
|
||||
//设置渠道码
|
||||
if (res.user.qdCod) {
|
||||
uni.setStorageSync('qdCod', res.user.qdCod)
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '注册成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '注册失败',
|
||||
content: res.msg
|
||||
});
|
||||
}
|
||||
uni.hideLoading();
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
page {
|
||||
background: #ffffff;
|
||||
}
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bg{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
}
|
||||
.wrapper{
|
||||
position: relative;
|
||||
padding-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.footerView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 78rpx;
|
||||
|
||||
}
|
||||
.cuIcon::before{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.cuIcon-round::before {
|
||||
content: "\e6d7";
|
||||
}
|
||||
.cuIcon-radiobox:before {
|
||||
content: "\e75b";
|
||||
color: #37A6FF;
|
||||
}
|
||||
.send-msg {
|
||||
line-height: initial;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #EC6F48;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
.send-msg::after{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
}
|
||||
|
||||
.input-content {
|
||||
padding: 0 56rpx;
|
||||
}
|
||||
.cu-form-group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 48rpx;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
.title{
|
||||
margin-bottom: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.input{
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 40rpx;
|
||||
background: #EC6F48;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
411
pages/login/registerApp.vue
Normal file
411
pages/login/registerApp.vue
Normal file
@@ -0,0 +1,411 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg" >
|
||||
<image src="../../static/default/i_bg.png" style="width: 100%;height:100%" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="wrapper u-relative" style="padding-top: 48rpx;box-sizing: border-box;">
|
||||
<view class="input-content">
|
||||
<view style="font-size: 58rpx;font-weight: bold;color: #333;margin-bottom: 48rpx;">注册</view>
|
||||
<view class="cu-form-group" >
|
||||
<view class="title">手机号</view>
|
||||
<input class="input" type="number" :value="mobile" placeholder="请输入手机号" maxlength="11" data-key="mobile"
|
||||
@input="inputChange" />
|
||||
</view>
|
||||
<view class="cu-form-group" >
|
||||
<text class="title">验证码</text>
|
||||
<view class="input flex">
|
||||
<input type="number" :value="code" placeholder="请输入验证码" maxlength="6" data-key="code"
|
||||
@input="inputChange" @confirm="toLogin" />
|
||||
<button class="send-msg" @click="sendMsg" :disabled="sending">{{ sendTime }}</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="cu-form-group" >
|
||||
<text class="title">设置密码</text>
|
||||
<input class="input" type="password" :value="password" placeholder="请设置新密码" placeholder-class="input-empty"
|
||||
maxlength="20" minlength="6" data-key="password" @input="inputChange" @confirm="toLogin" />
|
||||
</view>
|
||||
<!-- <view class="cu-form-group"
|
||||
style="border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
|
||||
<text class="title">邀请码</text>
|
||||
<input type="text" v-if="registerCode == '是'" :value="invitation" placeholder="请填写邀请码"
|
||||
data-key="invitation" maxlength="20" @input="inputChange" @confirm="toLogin" />
|
||||
<input type="text" v-if="registerCode == '否'" :value="invitation" placeholder="请填写邀请码(选填)"
|
||||
data-key="invitation" maxlength="20" @input="inputChange" @confirm="toLogin" />
|
||||
</view> -->
|
||||
<button class="confirm-btn" @click="toRegister">注册</button>
|
||||
<button class="confirm-btn" @click="toLogin">登录</button>
|
||||
</view>
|
||||
<view class="footerView">
|
||||
<u-checkbox-group>
|
||||
<u-checkbox v-model="checked" label-size='24upx' shape="circle" @change="radioChange"></u-checkbox>
|
||||
</u-checkbox-group>
|
||||
<view>同意</view>
|
||||
<!-- 协议地址 -->
|
||||
<navigator url="/me/setting/mimi" open-type="navigate" style="color: #37A6FF;">《隐私政策》</navigator>
|
||||
和
|
||||
<navigator url="/me/setting/xieyi" open-type="navigate" style="color: #37A6FF;">《用户协议》</navigator>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from '@/http/http.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
code: '',
|
||||
mobile: '',
|
||||
password: '',
|
||||
sending: false,
|
||||
sendTime: '获取验证码',
|
||||
count: 60,
|
||||
relation: "",
|
||||
invitation: '',
|
||||
registerCode: '',
|
||||
qdCodeion: '',
|
||||
checked: false,
|
||||
};
|
||||
},
|
||||
onLoad(e) {
|
||||
let relation = e.invitation
|
||||
if (relation) {
|
||||
this.relation = relation;
|
||||
this.invitation = relation;
|
||||
}
|
||||
if (e.qdCode) {
|
||||
this.qdCodeion = e.qdCode
|
||||
}
|
||||
http.request({
|
||||
url:'app/common/type/3',
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.registerCode = res.data.value
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**
|
||||
* 是否同意协议
|
||||
* @param {Object} e
|
||||
*/
|
||||
radioChange(e) {
|
||||
this.checked = e
|
||||
},
|
||||
|
||||
showMa() {
|
||||
//查询官方邀请码
|
||||
this.$Request.getT('/common/type/88').then(res => {
|
||||
if (res.code == 0) {
|
||||
this.invitation = res.data.value;
|
||||
}
|
||||
});
|
||||
},
|
||||
sendMsg() {
|
||||
const {
|
||||
mobile
|
||||
} = this;
|
||||
if (!mobile) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else if (mobile.length !== 11) {
|
||||
uni.showToast({
|
||||
title: '请输入正确的手机号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '正在发送验证码...'
|
||||
})
|
||||
http.request({
|
||||
url:'app/Login/sendMsg/' + mobile + '/login',
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.sending = true;
|
||||
uni.showToast({
|
||||
title: '验证码发送成功请注意查收',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
this.countDown();
|
||||
} else {
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '短信发送失败',
|
||||
content: res.msg ? res.msg : '请一分钟后再获取验证码'
|
||||
});
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
countDown() {
|
||||
const {
|
||||
count
|
||||
} = this;
|
||||
if (count === 1) {
|
||||
this.count = 60;
|
||||
this.sending = false;
|
||||
this.sendTime = '获取验证码';
|
||||
} else {
|
||||
this.count = count - 1;
|
||||
this.sending = true;
|
||||
this.sendTime = count - 1 + '秒后重新获取';
|
||||
setTimeout(this.countDown.bind(this), 1000);
|
||||
}
|
||||
},
|
||||
inputChange(e) {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this[key] = e.detail.value;
|
||||
},
|
||||
navBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
navTo(url) {
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
toLogin() {
|
||||
console.log("123");
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login'
|
||||
});
|
||||
},
|
||||
toRegister() {
|
||||
const {
|
||||
mobile,
|
||||
password,
|
||||
code,
|
||||
checked,
|
||||
invitation,
|
||||
registerCode,
|
||||
qdCodeion
|
||||
} = this;
|
||||
if (!mobile) {
|
||||
uni.showToast({
|
||||
title: '请输入账号',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!code) {
|
||||
uni.showToast({
|
||||
title: '请输入验证码',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!password) {
|
||||
uni.showToast({
|
||||
title: '请设置密码',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (password.length < 6) {
|
||||
uni.showToast({
|
||||
title: '密码位数必须大于六位',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (invitation.length == 0 && registerCode == '是') {
|
||||
uni.showToast({
|
||||
title: '请输入邀请码',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!checked) {
|
||||
uni.showToast({
|
||||
title: '请先同意《隐私政策》和《用户协议》',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
return
|
||||
}
|
||||
this.logining = true;
|
||||
uni.showLoading({
|
||||
title: '注册中...'
|
||||
})
|
||||
let platform = ''
|
||||
// #ifdef APP
|
||||
platform = 'app'
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
platform = 'h5'
|
||||
// #endif
|
||||
http.request({
|
||||
url: 'app/Login/registerCode?password=' + password + '&phone=' + mobile + '&msg=' + code +
|
||||
'&inviterCode=' + invitation + '&platform=' + platform + '&qdCode=' + qdCodeion,
|
||||
method: 'post'
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
// this.$queue.remove('invitation');
|
||||
uni.setStorageSync('token', res.token)
|
||||
uni.setStorageSync('userId', res.user.userId)
|
||||
uni.setStorageSync('phone', res.user.phone)
|
||||
uni.setStorageSync('invitationCode', res.user.invitationCode)
|
||||
//设置渠道码
|
||||
if (res.user.qdCode) {
|
||||
uni.setStorageSync('qdCode', res.user.qdCode)
|
||||
}
|
||||
uni.showToast({
|
||||
title: '注册成功',
|
||||
icon: 'none'
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/login/appEq'
|
||||
})
|
||||
}, 1000)
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showModal({
|
||||
showCancel: false,
|
||||
title: '注册失败',
|
||||
content: res.msg
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #fff;
|
||||
}
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.bg{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
}
|
||||
.wrapper{
|
||||
position: relative;
|
||||
padding-top: 48rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.footerView {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 178rpx;
|
||||
.cuIcon::before{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.cuIcon-round::before {
|
||||
content: "\e6d7";
|
||||
}
|
||||
.cuIcon-radiobox:before {
|
||||
content: "\e75b";
|
||||
color: #37A6FF;
|
||||
}
|
||||
}
|
||||
|
||||
.send-msg {
|
||||
line-height: initial;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #EC6F48;
|
||||
border: none;
|
||||
background-color: transparent!important;
|
||||
}
|
||||
.send-msg::after{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
position: relative;
|
||||
z-index: 90;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.input-content {
|
||||
padding: 0 56rpx;
|
||||
.cu-form-group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 48rpx;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
.title{
|
||||
margin-bottom: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
.input{
|
||||
width: 100%;
|
||||
height: 84rpx;
|
||||
line-height: 84rpx;
|
||||
background-color: #fff;
|
||||
align-items: center;
|
||||
padding: 22rpx 32rpx 22rpx 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
text-align: center;
|
||||
line-height: 100rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 40rpx;
|
||||
background: #EC6F48;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
|
||||
&:after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,294 @@
|
||||
<template>
|
||||
ios
|
||||
anzhuo
|
||||
<view class="container">
|
||||
<view class="u-status-bar"></view>
|
||||
<view class="top-bg"></view>
|
||||
<view class="content">
|
||||
<view class="user-info">
|
||||
<view class="logo-wrap">
|
||||
<view class="logo"></view>
|
||||
<view class="quick-menu">
|
||||
<image class="icon" src="/static/me/logo_btn1.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="/static/me/logo_btn2.png" mode="aspectFit"></image>
|
||||
<image class="icon" src="/static/me/logo_btn3.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="top">
|
||||
<image class="avatar" src="/static/default_avatar.png" mode="aspectFill"></image>
|
||||
<view class="info-wrap">
|
||||
<view class="name">159****3331</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btm">
|
||||
<view class="item">
|
||||
<view class="title">我的喜欢</view>
|
||||
<view class="num">0</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">我的追剧</view>
|
||||
<view class="num">0</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="title">我的红包</view>
|
||||
<view class="num">0</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-wrap">
|
||||
<view class="gold-wrap">
|
||||
<view class="left">
|
||||
<image class="icon" src="/static/me/gold_icon.png" mode="aspectFit"></image>
|
||||
<view class="num">123133.00</view>
|
||||
</view>
|
||||
<view class="btn">金币明细</view>
|
||||
</view>
|
||||
<view class="title-wrap">
|
||||
<view class="t">观看历史</view>
|
||||
<up-icon name="arrow-right"></up-icon>
|
||||
</view>
|
||||
<view class="history-list">
|
||||
<view class="item">
|
||||
<image class="cover" src="https://img0.baidu.com/it/u=966333451,3199467079&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=714" mode="aspectFill"></image>
|
||||
<view class="name">我在八零年代当后妈</view>
|
||||
<view class="t">看到8集</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="cover" src="https://img2.baidu.com/it/u=3352094756,2708106394&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1422" mode="aspectFill"></image>
|
||||
<view class="name">姜小姐的反击</view>
|
||||
<view class="t">看到12集</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="cover" src="https://q0.itc.cn/images01/20240806/a14af4ece3354215be6294f3d2c264a4.jpeg" mode="aspectFill"></image>
|
||||
<view class="name">霸道载誉归来</view>
|
||||
<view class="t">看到3集</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-wrap">
|
||||
<view class="menu-list">
|
||||
<view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon1.png" mode="aspectFit"></image>
|
||||
<view class="name">任务中心</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon2.png" mode="aspectFit"></image>
|
||||
<view class="name">设置中心</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon3.png" mode="aspectFit"></image>
|
||||
<view class="name">意见反馈</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon4.png" mode="aspectFit"></image>
|
||||
<view class="name">帮助中心</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon5.png" mode="aspectFit"></image>
|
||||
<view class="name">检查更新</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon6.png" mode="aspectFit"></image>
|
||||
<view class="name">用户协议</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon7.png" mode="aspectFit"></image>
|
||||
<view class="name">关于我们</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<image class="icon" src="/static/me/menu_icon8.png" mode="aspectFit"></image>
|
||||
<view class="name">隐私政策</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script setup></script>
|
||||
|
||||
<style>
|
||||
<style scoped lang="scss">
|
||||
$bgColor: #f5f7ff;
|
||||
page {
|
||||
background: $bgColor;
|
||||
}
|
||||
.container {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
.top-bg {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, #ffe5ea 0, #e4f5fb 49%, #fff0ee);
|
||||
&::after {
|
||||
content: '';
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, transparent, $bgColor);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 28upx;
|
||||
position: relative;
|
||||
.user-info {
|
||||
.logo-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.quick-menu {
|
||||
display: flex;
|
||||
gap: 20upx;
|
||||
.icon {
|
||||
$size: 60upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.avatar {
|
||||
$size: 94upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
margin-right: 12upx;
|
||||
}
|
||||
.info-wrap {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
.btm {
|
||||
display: flex;
|
||||
padding: 40upx 0;
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.title {
|
||||
font-size: 28upx;
|
||||
}
|
||||
.num {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-wrap {
|
||||
background: #fff;
|
||||
border-radius: 16upx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 28upx;
|
||||
.gold-wrap {
|
||||
background: #f2b5b5;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20upx 28upx;
|
||||
position: relative;
|
||||
// &::after {
|
||||
// $size: 40upx;
|
||||
// content: '';
|
||||
// width: $size;
|
||||
// height: $size;
|
||||
// border-radius: 8upx;
|
||||
// transform: rotate(45deg);
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// margin-left: $size * 0.5 * -1;
|
||||
// bottom: $size * 0.3 * -1;
|
||||
// background: inherit;
|
||||
// }
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon {
|
||||
$size: 52upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
margin-right: 20upx;
|
||||
}
|
||||
.num {
|
||||
color: #fff;
|
||||
font-size: 32upx;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
color: #977641;
|
||||
background: linear-gradient(90deg, #fee7bc 0%, #fdcc89 100%);
|
||||
width: 144upx;
|
||||
height: 56upx;
|
||||
border-radius: 56upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
.title-wrap {
|
||||
padding: 28upx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
.history-list {
|
||||
padding: 0 28upx 28upx;
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
.item {
|
||||
flex: 1;
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: 280upx;
|
||||
border-radius: 20upx;
|
||||
}
|
||||
.name {
|
||||
font-size: 28upx;
|
||||
width: 160upx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.t {
|
||||
color: #999;
|
||||
font-size: 24upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 28upx 0 0;
|
||||
.item {
|
||||
flex: 0 0 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 32upx;
|
||||
.icon {
|
||||
$size: 56upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
.name {
|
||||
font-size: 24upx;
|
||||
margin-top: 8upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
179
pages/me/userInfo.vue
Normal file
179
pages/me/userInfo.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<up-cell-group>
|
||||
<up-cell title="头像">
|
||||
<template #value>
|
||||
<image :src="userInfo.avatar?userInfo.avatar:'../../static/default/avatar.png'" mode="" @click="uploadImg"
|
||||
style="width: 111rpx;height: 111rpx;border-radius: 50%;"></image>
|
||||
</template>
|
||||
</up-cell>
|
||||
<up-cell title="用户名">
|
||||
<template #value>
|
||||
<input v-model="userInfo.userName" align="right" placeholder="请输入用户名" />
|
||||
</template>
|
||||
</up-cell>
|
||||
<up-cell title="手机">
|
||||
<template #value>
|
||||
<input :disabled="userInfo.phone?true:false" v-model="userInfo.phone" align="right" placeholder="请输入联系电话" />
|
||||
</template>
|
||||
</up-cell>
|
||||
</up-cell-group>
|
||||
<view class="save" @click="save">保存</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/commons/config.js';
|
||||
import http from '@/http/http.js';
|
||||
export default {
|
||||
data() {
|
||||
return{
|
||||
userInfo: {
|
||||
avatar: '',
|
||||
userName: '',
|
||||
phone: '',
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad( options ) {
|
||||
this.getUserInfo()
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* 获取个人信息
|
||||
*/
|
||||
getUserInfo() {
|
||||
http.request({
|
||||
url:'app/user/selectUserById',
|
||||
}).then(res => {
|
||||
this.userInfo = res.data
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 上次头像
|
||||
*/
|
||||
uploadImg() {
|
||||
let that = this;
|
||||
var url = null;
|
||||
uni.showActionSheet({
|
||||
// itemList按钮的文字接受的是数组
|
||||
itemList: ["查看头像", "从相册选择图片"],
|
||||
success(e) {
|
||||
var index = e.tapIndex
|
||||
console.log(index)
|
||||
if (index === 0) {
|
||||
// 用户点击了预览当前图片
|
||||
// 可以自己实现当前头像链接的读取
|
||||
let url = that.headImg;
|
||||
let arr = []
|
||||
arr.push(url)
|
||||
uni.previewImage({
|
||||
// 预览功能图片也必须是数组的
|
||||
urls: arr
|
||||
})
|
||||
} else if (index === 1) {
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function(res) {
|
||||
uni.showLoading({
|
||||
title: '上传中...'
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: config.baseApiUrl + 'alioss/upload',
|
||||
filePath: res.tempFilePaths[0],
|
||||
name: 'file',
|
||||
success: uploadFileRes => {
|
||||
url = JSON.parse(uploadFileRes.data);
|
||||
console.log(url)
|
||||
this.userInfo.avatar = url.data
|
||||
uni.hideLoading();
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 保存
|
||||
*/
|
||||
save() {
|
||||
if (!this.userInfo.userName) {
|
||||
uni.showToast({
|
||||
title: "用户名不能为空",
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!this.userInfo.phone) {
|
||||
uni.showToast({
|
||||
title: "手机号不能空",
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.checkPhone(this.userInfo.phone) == false) {
|
||||
uni.showToast({
|
||||
title: "手机号格式不正确",
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '确定保存信息',
|
||||
confirmColor: '#ff7581',
|
||||
success: e => {
|
||||
if (e.confirm) {
|
||||
http.request({
|
||||
url:'app/user/updateUsers',
|
||||
method: 'post',
|
||||
data: {
|
||||
userName: this.userInfo.userName,
|
||||
avatar: this.userInfo.avatar,
|
||||
phone: this.userInfo.phone,
|
||||
}
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: "none"
|
||||
})
|
||||
setTimeout(function() {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//根据正则验证手机号是否正确包括校验长度
|
||||
checkPhone(phone) {
|
||||
return /^1[3456789]\d{9}$/.test(phone);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style style="sass" scoped>
|
||||
.save{
|
||||
color: #FFFFFF;
|
||||
background: #ff7581;
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
height: 41px;
|
||||
font-size: 14px;
|
||||
line-height: 41px;
|
||||
margin: 0 auto;
|
||||
border-radius: 20px;
|
||||
margin-top: 78px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user