<template>
<view class="box u-p-l-35 u-p-r-35">
<u-image class="head_img" shape="circle" width="120rpx" height="120rpx" src="../../static/head.png"></u-image>
<view class="title">
<text>苏州华开农创智慧科技管</text>
</view>
<u-form>
<u-form-item>
<u-input v-model="account" placeholder="请输入账号"></u-input>
</u-form-item>
<u-form-item>
<u-input class="inp" v-model="password" type="password" placeholder="请输入密码"></u-input>
</u-form-item>
<u-form-item>
<u-input class="inp" type="text" v-model="code" placeholder="请输入验证码"></u-input>
<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="canvas" @click="changeCode" @error="canvasIdErrorCallback"></canvas>
</u-form-item>
<view class="option">
<u-icon @click="getMore" :name="arrow" :index="arrow" color="#666666"></u-icon><text>网络配置</text>
</view>
<view v-if="arrow == 'arrow-up-fill'">
<u-form-item>
<u-input v-model="ip_adress" placeholder="请输入IP地址"></u-input>
</u-form-item>
<u-form-item>
<u-input v-model="port_number" placeholder="请输入端口号"></u-input>
</u-form-item>
</view>
</u-form>
<u-image v-if="sub_show" class="sub" src="../../static/login.png" width="100rpx" height="100rpx" mode="widthFix"></u-image>
<u-image v-else class="sub" @click.native="sub" src="../../static/login_show.png" width="100rpx" height="100rpx" mode="widthFix"></u-image>
</view>
</template>
<script>
export default {
data() {
return {
//头像
headimg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606985171381&di=db5845b1115851ca0d934f0b7619ec47&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201910%2F26%2F20191026201534_xotym.thumb.700_0.jpg',
//表单数据
account: '',
password: '',
code: '',
ip_adress: '',
port_number: '',
//验证码size
width: 120,
height: 45,
//下拉状态
arrow: 'arrow-down-fill',
//按钮显示状态
sub_show: true
}
},
methods: {
//提交
sub: function() {
if (this.account == '') {
uni.showToast({
icon: 'none',
position: 'center',
title: '请填写账号'
});
return false;
}
if (this.password == '') {
uni.showToast({
icon: 'none',
position: 'center',
title: '请填写密码'
});
return false;
}
if (this.code.toLowerCase() != uni.getStorageSync('imgcode').toLowerCase()) {
uni.showToast({
icon: 'none',
position: 'bottom',
title: '验证码不正确'
});
return false;
}
},
//切换
getMore: function(e) {
console.log(e)
console.log(666)
if (e == 'arrow-down-fill') {
this.arrow = 'arrow-up-fill'
} else {
this.arrow = 'arrow-down-fill'
}
},
//验证码换一张
changeCode: function() {
this.init();
},
// 初始化验证码
init: function() {
console.log('start');
var context = uni.createCanvasContext('canvas', this),
w = this.width,
h = this.height;
context.setFillStyle("white");
context.setLineWidth(5);
context.fillRect(0, 0, w, h);
var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",
"T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
],
str = '';
for (var i = 0; i < 4; i++) {
var c = pool[this.rn(0, pool.length - 1)];
var deg = this.rn(-30, 30);
context.setFontSize(18);
context.setTextBaseline("top");
context.setFillStyle(this.rc(80, 150));
context.save();
context.translate(30 * i + 15, parseInt(h / 1.5));
context.rotate(deg * Math.PI / 180);
context.fillText(c, -15 + 5, -15);
context.restore();
str += c;
}
uni.setStorage({
key: 'imgcode',
data: str,
});
for (var i = 0; i < 40; i++) {
context.beginPath();
context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
context.closePath();
context.setFillStyle(this.rc(150, 200));
context.fill();
}
context.draw();
console.log('end');
},
rc: function(min, max) {
var r = this.rn(min, max);
var g = this.rn(min, max);
var b = this.rn(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
},
rn: function(max, min) {
return parseInt(Math.random() * (max - min)) + min;
},
canvasIdErrorCallback: function(e) {
console.error(e.detail.errMsg)
},
},
updated: function() {
console.log('updated')
if (this.code != '' || this.account != '' || this.password != '') {
this.sub_show = false;
console.log(6)
}else{
this.sub_show = true;
}
},
onShow() {
var _this = this;
setTimeout(function() {
_this.init();
}, 1000)
}
}
</script>
<style lang="scss">
.box {
background-color: white;
.head_img {
margin: auto;
margin-top: 88rpx;
margin-bottom: 22rpx;
text-align: center;
}
.title {
font-size: 36rpx;
text-align: center;
margin-bottom: 70rpx;
}
.sub {
margin: auto;
margin-top: 226rpx;
}
canvas {
width: 180rpx;
height: 56rpx;
border-radius: 28rpx;
float: left;
margin-top: 22rpx;
}
.option {
margin-top: 29rpx;
text {
color: #666666;
font-size: 26rpx;
margin-left: 12rpx;
}
}
}
</style>
