<template>
<view class="page">
<ul class="profile" >
<li>登录账号：</li>
<li style='position: relative;'>
<input type="text" style="width: 150px;" maxlength="10" class="input1" placeholder="请输入登录账号" v-model="form.username" @blur="check_name($event.detail.value)" />
<uni-icons :type="usernamemsg=='ok'?'checkbox-filled':'clear'" :class="{'tip-icons':true,'ok':usernamemsg=='ok','error':usernamemsg=='error'}" ></uni-icons>
</li>
</ul>
<ul class="profile" >
<li>登录密码：</li>
<li>
<input type="password" style="width: 150px;" maxlength="10" class="input1" placeholder="默认密码:123456" v-model="form.password"/>
</li>
</ul>
<ul class="profile" >
<li>用户类型：</li>
<li>
<radio :checked="form.isdaili==true" @tap="set_daili(true)" >代理</radio>
<radio style="margin-left: 10px;" :checked="form.isdaili!=true" @tap="set_daili(false)" >用户</radio>
</li>
</ul>
<ul class="profile" style='display: none;' >
<li>返点比例：</li>
<li>
<picker @change="change_rebate" :value="rebate_index" :range="rebates" :disabled="rebate_disabled" style="display: inline-block;">
<view class="uni-input">{{form.rebate}}%</view>
</picker>
<span style="margin-left:10px;color:#666;">
(
<block v-if="form.isdaili">
打赏分润占比
</block>
<block v-else>
用户账号无分润
</block>
</span>
)
</li>
</ul>
<view style="margin:15px auto;display:block;width: 80%;">
<button class="button1" @tap="click_sub()">确认并提交</button>
</view>
<view class="modalhtml" v-if="showModal">
<view class="modal">
<view class="title">
开户成功
</view>
<view class="content">
登录账号：{{form.username}}<br>
登录密码：{{form.password}}<br>
账号类型：<block v-if="form.isdaili">代理</block><block v-else>用户</block><br>
访问网址：{{loginurl}}
</view>
<view class="btns" >
<span @tap="showModal=false;">关 闭</span>
<span style="color:#2319DC;font-weight: 600;" @tap="copyinfo()">复 制</span>
</view>
</view>
</view>
<tabbar></tabbar>
</view>
</template>
<script>
import http from "../../library/http.js"
import config from "../../config.js"
import uniIcons from '../../components/uni-icons/uni-icons.vue'
import tabbar from '../../components/tabbar.vue'
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ;
export default {
components:{
uniIcons,
tabbar
},
data() {
return {
list:[],
user:uni.getStorageSync('userInfo'),
rebates:[],
rebate_disabled:false,
rebate_index:0,
form:{
username:'',
rebate:'',
isdaili:true,
userid:uni.getStorageSync('access_token'),
password:'',
},
showcode:false,
qrcode:'',
qrcode_id:'',
usernamemsg:false,
name_status:false,
showModal:false,
loginurl:config.imgUri
}
},
methods: {
check_name(value) {
var reg=/^[\d\w]+$/;
if(reg.test(value)){
if(value.length>5){
http.setWait(false).post('user.php?act=checkname1',{username:value}).then(res=>{
var data=res.data;
if(res.status==200){
this.name_status=true;
this.usernamemsg='ok';
}else{
this.usernamemsg='error';
this.name_status=false;
uni.showToast({
icon:'none',
title:res.message,
duration:1000
})
}
})
}else{
this.name_status=false;
this.usernamemsg='error';
}
}else{
this.usernamemsg='error';
this.name_status=false;
}
},
set_daili(type){
this.form.isdaili=type;
if(type==true){
this.form.rebate= this.rebates[this.rebate_index];
this.rebate_disabled=false;
}
else{
this.form.rebate=0;
this.rebate_disabled=true;
}
},
change_rebate(e){
var index=e.detail.value;
this.rebate_index=index;
this.form.rebate= this.rebates[this.rebate_index];
},
click_sub(){
this.form.userid=this.user.id;
this.form.isdaili=this.form.isdaili?1:0;
if(this.form.username==''){
uni.showToast({
icon:'none',
title:'请输入用户名',
duration:1000
})
return false;
}
if(this.form.username.length<6){
uni.showToast({
icon:'none',
title:'用户长度不能小于6位',
duration:1000
})
return false;
}
if(this.name_status==false){
uni.showToast({
icon:'none',
title:'该账号已被注册',
duration:1000
})
return false;
}
if(this.form.password=='') this.form.password='123456';
if(this.form.password.length<6){
uni.showToast({
icon:'none',
title:'密码长度不能小于6位',
duration:1000
})
return false;
}
http.setWait(true).post('user.php?act=user_add',this.form).then(res=>{
if(res.code==200){
this.showModal=true;
}
})
},
copyinfo(){
var str="登录账号："+this.form.username+"\n";
str+="登录密码："+this.form.password+"\n";
str+="账号类型：";
if(this.form.isdaili) str+="代理";
else str+="用户";
str+="\n";
str+="返点比例："+this.form.rebate+"\n";
str+="访问网址："+this.loginurl+"\n";
this.copy(str);
this.showModal=false;
},
timestampToTime(timestamp) {
var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() ;
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
var D = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
if(D<10) D='0'+D;
if(h<10) h='0'+h;
if(m<10) m='0'+m;
if(s<10) s='0'+s;
return Y+'-'+M+'-'+D;
},
copy(data){
uni.setClipboardData({
data:data,
success() {
uni.showToast({
title:'复制成功',
icon:'none'
})
},
fail: () => {
uni.showToast({
title:'复制失败',
icon:'none'
})
}
})
},
},
onLoad(opts) {
this.user = uni.getStorageSync('userInfo');
this.form.rebate=this.user.rebate-0.5;
this.rebates=[];
for(var i=this.form.rebate;i>=0;i=i-0.5){
this.rebates.push(i.toFixed(1));
}
},
onNavigationBarButtonTap() {
}
}
</script>
<style lang="scss" scoped>
@import "@/static/css/user.css";
.page{
background-color: #fafafa;
}
.modalhtml{
position: fixed;
z-index: 999;
top:0px;
width: 100%;
left: 0px;height: 100vh;
background-color: rgba(0,0,0,0.7);
}
.modalhtml .modal{
background-color: #fff;
border-radius: 10px;;
top:30vh;
width: 80vw;
left: 10vw;
position: fixed;
border: 1px #ddd solid;
}
.modalhtml .modal .title{
text-align: center;
height: 35px;
line-height: 35px;
color: #000;;
font-size: 16px;;
font-weight: 600;
margin-top: 5px;;
}
.modalhtml .modal .content{
padding: 5px 10px;
max-height: 160px;;
min-height: 65px;
line-height: 30px;;
overflow-y: scroll;
font-size: 14px;
}
.modalhtml .modal .btns{
text-align: center;
height: 35px;
line-height: 35px;
color: #000;;
font-size: 16px;;
font-weight: 600;
border-top: #eee 1px solid;
}
.modalhtml .modal .btns >span{
display: inline-block;
width: calc(50% - 1px);
height: 35px;
line-height: 35px;
}
.modalhtml .modal .btns >span:last-child{
border-left: #eee 1px solid;
}
.tip-icons {
position: absolute;
left:180px;
top:-8px;
font-size: 22px !important;
display: none;
}
.tip-icons.ok{
color: #1D830D !important;
display: inline-block;
}
.tip-icons.error{
color: #e7202a !important;
display: inline-block;
}
.tip-icons.active {
color: #2319dc !important;
}
.profile,.login-lines1{
background-color: #fff;
margin: 10px auto;
width: 100%;
vertical-align: middle;
}
.profile li{
vertical-align: middle;
}
.profile li:first-child{
width:120px
}
.profile li:last-child{
width:calc(100% - 130px)
}
.nodata{
height: 40px;
line-height: 40px;
text-align: center;
}
.lists{
background-color: #fff;
margin-top: 10px;
padding: 5px 10px;
line-height: 25px;
clear: both;
display: inline-block;
width: calc(100% - 20px);
}
.lists > view{
clear: both;
}
.lists > view > span{
display: inline-block;
}
.lists > view > span:first-child{
text-align: left;
float: left;
}
.lists > view > span:last-child{
text-align: right;
float: right;
}
.lists > view .title1{
color: #666;
}
.btn1{
display: inline-block;
height: 22px;
line-height: 22px;vertical-align: middle;font-size: 14px;
margin-left: 4px;
background-color: #f8f8f8;
border: 1px #e7e7e7 solid;
border-radius: 5px;
}
.btn2{
display: inline-block;
height: 28px;
line-height: 28px;vertical-align: middle;font-size: 14px;
margin-left: 4px;
background-color: #2319dc;
border: 1px #2319dc solid;
color:#fff;
border-radius: 5px;
padding: 0px 10px;
margin: 0px 15px;
}
.btn2.delete{
background-color: #f8f8f8;
border: 1px #e7e7e7 solid;
color:#222;
padding: 0px 10px;
}
.lists > view.btns{
height: 30px;line-height: 30px;text-align: center;
}
.qrcode{
background-color: rgba($color: #000000, $alpha: 0.5);
position: fixed;
left: 0px;
width: 100%;
height: 100vh;
top:0px;
}
.qrcode .code{
height: 200px;
width: 200px;
top:calc(50% - 150px);
left: calc(50% - 100px);
position: fixed;
}
.qrcode .close{
bottom: 80px;;
left: calc(50% - 20px);
position: fixed;
height: 40px;width: 40px;
}
</style>