412 lines
9.1 KiB
Vue
412 lines
9.1 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar :is-back="false" :title="tittxt" :border-bottom="false" :background="bgc" title-color='#fff'
|
||
title-size='36' height='36'>
|
||
|
||
</u-navbar>
|
||
<view class="imgbox">
|
||
<image src="https://api.ccttiot.com/smartmeter/img/static/uCqHftk2W2zEPX03DLcb" mode=""></image>
|
||
</view>
|
||
<view class="tip">
|
||
欢迎来到共享开关
|
||
</view>
|
||
<view class="inputbox">
|
||
<view class="box1" v-if="syflag">
|
||
<view class="input_txt" style="width: 536rpx;font-size: 24rpx;line-height: 32rpx;">
|
||
您暂未授权共享开关小程序获取你的信息，将无法正常使用小程序的功能。如需要正常使用请点击“授权”按钮，打开头像，昵称等信息的授权。
|
||
</view>
|
||
<!-- <button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
|
||
style="margin-left: -10rpx;">
|
||
授权登录
|
||
</button> -->
|
||
<button class="button" @click="getPhoneNumber"
|
||
style="margin-left: -10rpx;">
|
||
授权登录
|
||
</button>
|
||
<view class="">
|
||
<view class="buttons" style="margin-top: 50rpx;margin-left: -10rpx;" @click="btnshoudong">
|
||
—— 账号密码登录 ——
|
||
</view>
|
||
<!-- <view class="buttons" style="margin-top: 50rpx;margin-left: -10rpx;" @click="btnyzm">
|
||
—— 验证码登录 ——
|
||
</view> -->
|
||
<view class="buttons" style="margin-top: 50rpx;margin-left: -10rpx;" @click="btnbudl">
|
||
—— 暂不授权登录 ——
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 账号密码登录 -->
|
||
<view class="zhangh" v-if="dlflag">
|
||
<view class="tit">
|
||
账号密码登录
|
||
</view>
|
||
<!-- <input type="text" v-model="zh" placeholder="请输入你的账号" /> -->
|
||
<view class="" style="margin-top: 30rpx;">
|
||
<u-input v-model="zh" :border="border" placeholder="请输入你的账号" />
|
||
</view>
|
||
|
||
<view class="" style="margin-top: 30rpx;">
|
||
<u-input v-model="mm" :type="onetype" :border="border" placeholder="请输入你的密码"
|
||
:password-icon="passwordIcon" />
|
||
</view>
|
||
<view class="mmdl" @click="btndl">
|
||
登录
|
||
</view>
|
||
<view class="mmdl" @click="btnqx(1)"
|
||
style="background-color: #fff;border: 1px solid #efefef;color: #000;margin-top: 20rpx;">
|
||
取消
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 验证码登录 -->
|
||
<view class="zhangh" v-if="yzmflag">
|
||
<view class="tit">
|
||
验证码登录
|
||
</view>
|
||
<view class="" style="margin-top: 30rpx;">
|
||
<u-input v-model="zh" :border="border" placeholder="请输入你的账号" />
|
||
</view>
|
||
|
||
|
||
<view class="" style="margin-top: 30rpx;display: flex;align-items: center;justify-content: space-between;">
|
||
<u-input v-model="yzm" :border="border" placeholder="请输入验证码" />
|
||
<u-toast ref="uToast"></u-toast>
|
||
<u-verification-code :seconds="seconds" @start="start" ref="uCode"
|
||
@change="codeChange"></u-verification-code>
|
||
<u-button @click="getCode">{{tips}}</u-button>
|
||
</view>
|
||
|
||
<view class="mmdl" @click="btndl">
|
||
登录
|
||
</view>
|
||
<view class="mmdl" @click="btnqx(2)"
|
||
style="background-color: #fff;border: 1px solid #efefef;color: #000;margin-top: 20rpx;">
|
||
取消
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tips: '',
|
||
seconds: 60,
|
||
onetype: 'password',
|
||
passwordIcon: true,
|
||
border: true,
|
||
twopwd: 'password',
|
||
bgc: {
|
||
backgroundColor: "#7D86EF",
|
||
},
|
||
tittxt: "授权登录",
|
||
chooseType: true,
|
||
usertype: '',
|
||
login: false,
|
||
id: '',
|
||
dlflag: false,
|
||
zh: '',
|
||
mm: '',
|
||
yzm: '',
|
||
yzmflag: false,
|
||
syflag: true
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
if (option.id) {
|
||
this.id = option.id
|
||
}
|
||
},
|
||
// 分享到好友（会话）
|
||
onShareAppMessage: function() {
|
||
return {
|
||
title: '创想物联',
|
||
path: '/pages/shouye/index'
|
||
}
|
||
},
|
||
|
||
// 分享到朋友圈
|
||
onShareTimeline: function() {
|
||
return {
|
||
title: '创想物联',
|
||
query: '',
|
||
path: '/pages/shouye/index'
|
||
}
|
||
},
|
||
methods: {
|
||
codeChange(text) {
|
||
this.tips = text;
|
||
},
|
||
getCode() {
|
||
if (this.$refs.uCode.canGetCode) {
|
||
// 模拟向后端请求验证码
|
||
uni.showLoading({
|
||
title: '正在获取验证码'
|
||
})
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
// 这里此提示会被this.start()方法中的提示覆盖
|
||
this.$u.toast('验证码已发送');
|
||
// 通知验证码组件内部开始倒计时
|
||
this.$refs.uCode.start();
|
||
}, 1000);
|
||
} else {
|
||
this.$u.toast('验证码已发送');
|
||
}
|
||
},
|
||
start() {
|
||
this.$u.toast('验证码已发送');
|
||
},
|
||
|
||
|
||
|
||
// 账号密码登录
|
||
btndl() {
|
||
let data = {
|
||
username: this.zh,
|
||
password: this.mm
|
||
}
|
||
this.$u.post("/app/auth/login", data).then(res => {
|
||
if (res.code == 200) {
|
||
wx.setStorageSync('token', res.token);
|
||
this.ceshi()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none',
|
||
duration: 2000,
|
||
})
|
||
}
|
||
})
|
||
},
|
||
btnqx(num) {
|
||
if (num == 1) {
|
||
this.dlflag = false
|
||
this.syflag = true
|
||
} else {
|
||
this.yzmflag = false
|
||
this.syflag = true
|
||
}
|
||
},
|
||
btnyzm() {
|
||
this.yzmflag = true
|
||
this.syflag = false
|
||
},
|
||
btnshoudong() {
|
||
this.dlflag = true
|
||
this.syflag = false
|
||
},
|
||
userType(num) {
|
||
this.chooseType = false
|
||
this.login = true
|
||
if (num == 1) {
|
||
this.usertype = '01'
|
||
} else {
|
||
this.usertype = '00'
|
||
}
|
||
},
|
||
getPhoneNumber(){
|
||
let taht = this
|
||
wx.login({
|
||
success(res) {
|
||
if (res.code) {
|
||
let data = {
|
||
loginCode: res.code,
|
||
}
|
||
taht.$u.post('/app/auth/wxLogin', data).then(res => {
|
||
if (res.code == 10003) {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
} else if (res.code == 200) {
|
||
uni.setStorageSync('token', res.token)
|
||
taht.ceshi()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
})
|
||
},
|
||
// getPhoneNumber(e) {
|
||
// let that = this;
|
||
// console.log("eeeeeeee", e);
|
||
// const wxLoginAsync = () => {
|
||
// return new Promise((resolve, reject) => {
|
||
// wx.login({
|
||
// success(res) {
|
||
// if (res.code) {
|
||
// let data = {
|
||
// loginCode: res.code,
|
||
// mobileCode: e.detail.code,
|
||
// }
|
||
// resolve(data);
|
||
// } else {
|
||
// reject(res.errMsg)
|
||
// }
|
||
// },
|
||
// fail(err) {
|
||
// reject(err)
|
||
// }
|
||
// })
|
||
// })
|
||
// }
|
||
// wxLoginAsync().then(async (data) => {
|
||
// this.$u.post("/app/auth/wxLogin", data).then((res) => {
|
||
// if (res.code == 200) {
|
||
// wx.setStorageSync('token', res.token);
|
||
// that.ceshi()
|
||
// }
|
||
// })
|
||
// }).catch((err) => {
|
||
// console.error(err)
|
||
// })
|
||
// },
|
||
async ceshi() {
|
||
this.$u.get("/app/user/userInfo").then((res) => {
|
||
if (this.id == 1) {
|
||
uni.navigateBack()
|
||
} else {
|
||
uni.reLaunch({
|
||
url: '/pages/shouye/index'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
btnbudl() {
|
||
uni.reLaunch({
|
||
url: '/pages/shouye/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/deep/ .u-size-default{
|
||
height: 37px !important;
|
||
line-height: 35px !important;
|
||
margin-left: 10rpx;
|
||
}
|
||
/deep/ .u-btn{
|
||
padding: 0 20rpx !important;
|
||
}
|
||
page {
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.zhangh {
|
||
width: 562rpx;
|
||
text-align: center;
|
||
|
||
.tit {
|
||
font-size: 40rpx;
|
||
color: #000;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
// input{
|
||
// width: 562rpx;
|
||
// height: 90rpx;
|
||
// margin-top: 20rpx;
|
||
// border-radius: 20rpx;
|
||
// background-color: #eeefee;
|
||
// text-align: center;
|
||
// padding-left: 30rpx;
|
||
// box-sizing: border-box;
|
||
// text-align: left;
|
||
// }
|
||
.mmdl {
|
||
width: 562rpx;
|
||
height: 80rpx;
|
||
background: #8883F0;
|
||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
line-height: 80rpx;
|
||
margin-top: 50rpx;
|
||
}
|
||
}
|
||
|
||
.buttons {
|
||
width: 562rpx;
|
||
text-align: center;
|
||
padding-bottom: 5rpx;
|
||
box-sizing: border-box;
|
||
color: #ccc;
|
||
}
|
||
|
||
.page {
|
||
position: relative;
|
||
/* 添加相对定位 */
|
||
}
|
||
|
||
.imgbox {
|
||
width: 750rpx;
|
||
height: 576rpx;
|
||
z-index: 0;
|
||
|
||
image {
|
||
width: 750rpx;
|
||
height: 576rpx;
|
||
}
|
||
}
|
||
|
||
.tip {
|
||
width: 204rpx;
|
||
position: absolute;
|
||
top: 400rpx;
|
||
left: 30rpx;
|
||
font-weight: 500;
|
||
font-size: 48rpx;
|
||
color: #FFFFFF;
|
||
line-height: 66rpx;
|
||
}
|
||
|
||
.inputbox {
|
||
position: absolute;
|
||
/* 或者 fixed，根据你的需求 */
|
||
top: 700rpx;
|
||
/* 调整这里来控制距离顶部的距离 */
|
||
|
||
width: 750rpx;
|
||
/* 调整输入框的宽度 */
|
||
padding: 100rpx 0;
|
||
background: #fff;
|
||
/* 设置背景颜色，这里是红色的半透明 */
|
||
border-radius: 50rpx;
|
||
/* 设置圆角 */
|
||
z-index: 999;
|
||
/* 设置 z-index，确保在其他内容上方显示 */
|
||
padding-left: 104rpx;
|
||
|
||
.input_txt {
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #3D3D3D;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.button {
|
||
margin-top: 64rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 562rpx;
|
||
height: 96rpx;
|
||
background: #8883F0;
|
||
border-radius: 52rpx 52rpx 52rpx 52rpx;
|
||
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
</style> |