home.vue
<template>
<div class="div0 w_page" :style="page_style" bubble="true">
<scroller>
<div class="div6 s-info">
<text class="text8 div7 s-title">{{systemdata&&systemdata.pt_name?systemdata.pt_name:""}}</text>
<w-input @bindinput="toChangeInput" data-keyname="userlogincode" placeholder="激活码" class="s-input"></w-input>
<movable-area class="movable_content" :style="{position:'relative',width:(750) +'px',backgroundColor:(movable_view_bg),color:(movable_view_color)}">
<text class="text11">拖动滑块验证</text>
<movable-view class="box" :style="{width:(box_width)+'px'}" :friction="100" direction="horizontal" :x="x" :damping="500" :disabled="disabled" @bindchange="drag" @bindtouchend="dragOver">
<div class="div13 movable-move" :style="{color:(movable_view_txt_color)}">
<text class="text15 div14">{{movable_view_txt}}</text>
</div>
</movable-view>
</movable-area>
<div class="s-btn">
<text @click.stop="doClickStop($event,'onCodeList')" class="text18 div17 s-btn-view">续费</text>
<text @click="toCodeLogin" class="text20 div19 s-btn-view s-btn-color">登录</text>
</div>
</div>
</scroller>
</div>
</template>
<script>
import wx from './../../common/wx.js';
import console from './../../common/console.js';
import wloading from './../../common/components/loading';
import wdialog from './../../common/components/dialog';
import movablearea from './../../common/components/movable-area';
import movableview from './../../common/components/movable-view';
// pages/service/servicelogin/servicelogin.js
const app = wx.getApp()
import winput from './../../common/components/input';
export default {
components: {
'w-input': winput,
'w-loading': wloading,
'w-dialog': wdialog,
'movable-area': movablearea,
'movable-view': movableview,
},
name: 'pages_service_servicelogin_servicelogin',
data: function () {
return {
x: 0,
area_width: 100,
box_width: 120,
maxNum: 0,
iscode: false,
movable_view_bg: '#ededed',
movable_view_color: '#666666',
movable_view_txt_color: '#666666',
movable_view_txt: ' \u3009\u3009',
verification: 0,
disabled: false,
systemdata: [],
movable_content: '',
box: '',
horizontal: ''
};
},
mixins: [
require('./../../mixins.js').basePage,
require('./../../common/publish').publish
],
methods: {
onLoad: function (options) {
var that = this;
wx.getSystemInfo({
success: function (res) {
var n = Math.floor(750 * that.data.area_width / 100 - that.data.box_width);
console.log("n:" +n);
that.setData({ maxNum: n });
}
});
that.toPost('Api_System|getSetting', {}).then(res => {
var data = res.data;
that.setData({ systemdata: data });
}).catch(res => {
});
},
drag(e) {
var that = this;
var coord = e.detail.x;
that.data.coord = coord;
},
dragOver(e) {
var that = this;
var coord = that.data.coord;
if (coord >= that.data.maxNum) {
this.setData({
movable_view_bg: '#009688',
movable_view_color: '#ffffff',
movable_view_txt_color: '#009688',
movable_view_txt: '\u221A',
verification: 1,
disabled: true
});
}
},
onCodeList() {
this.setData({ iscode: !this.data.iscode });
},
toCodeLogin(e) {
var that = this;
var inputValue = this.data.inputValue;
var verification = this.data.verification;
if (!inputValue.userlogincode || inputValue.userlogincode == '') {
that.tips('请输入登录的激活码');
return false;
}
if (verification != 1) {
that.tips('请拖动滑块验证');
return false;
}
var Param = { userlogincode: inputValue.userlogincode };
this.toPost('ApiServerUser|actioncodeLogin', Param).then(res => {
that.tips('登录成功');
wx.setStorageSync('isserverlogin', 1);
wx.setStorageSync('serverinfo', res.data);
that.gotoUrl('/pages/service/conversation/conversation', 'redirectTo');
}).catch(res => {
that.tips(res);
});
},
toRenew() {
var that = this;
var inputValue = that.data.inputValue;
if (!inputValue.usercode || inputValue.usercode == '') {
that.tips('请输入需要续费的激活码');
return false;
}
if (!inputValue.actioncode || inputValue.actioncode == '') {
that.tips('请输入用来续费的激活码');
return false;
}
var Param = {
usercode: inputValue.usercode,
actioncode: inputValue.actioncode
};
this.toPost('ApiServerUser|RenewServer', Param).then(res => {
that.onCodeList();
that.tips('续费成功\uFF0C请登录\uFF01\uFF01\uFF01');
}).catch(res => {
that.tips(res);
});
},
onShow: function () {
}
},
created :function() {
this.onLoad(this.getRouterParams());
},
beforeMount: function () {
this.onShow();
},
mounted :function() {
this.bindEventBus();
},
beforeDestroy: function () {
},
destroyed: function () {
},
eros: {
backAppeared(params, options) {
if (this.onShow) {
this.onShow();
}
},
beforeDisappear(options) {
this.handleBack();
},
disappeared(options) {
if (this.onHide) {
this.onHide();
}
}
}
};
</script>
<style scoped>
.w_button {
position: relative;
border: none;
display: flex;
flex-direction: column;
box-sizing: border-box;
font-size: 28px;
text-align: center;
text-decoration: none;
line-height: 26px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
overflow: hidden;
color: #000000;
background-color: #F8F8F8;
}
.share-item {
height: 60px;
}
.w_page {
font-size: 28px;
color: #222;
background-color: #f2f2f2;
}
.iphone-x {
position: fixed;
padding-bottom: 40px;
width: 750px;
height: 220px;
flex-direction: row;
align-items: center;
justify-content: space-around;
background-color: #fff;
bottom: 0px;
left: 0px;
}
.group-foot {
position: fixed;
width: 750px;
height: 100px;
flex-direction: row;
align-items: center;
justify-content: space-around;
background-color: #fff;
bottom: 0px;
left: 0px;
}
.bg {
position: fixed;
width: 750px;
height: 1333px;
display: flex;
flex-direction: column;
top: 0;
}
.bg-lay {
position: fixed;
width: 750px;
height: 1333px;
background-color: rgba(0, 0, 0, 0.4);
top: 0;
}
.s-info {
position: absolute;
padding-top: 0;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
width: 750px;
top: 160px;
left: 0;
box-sizing: border-box;
}
.s-title {
text-align: center;
color: #fff;
font-size: 48px;
line-height: 50px;
}
.s-input {
padding-left: 20px;
width: 710px;
height: 90px;
background-color: #fff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-top: 40px;
box-sizing: border-box;
}
.s-btn {
width: 710px;
margin-top: 50px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.s-btn-view {
width: 340px;
height: 90px;
background-color: #009688;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
text-align: center;
line-height: 90px;
color: #fff;
font-size: 28px;
}
.s-btn-color {
background-color: #1e9fff;
}
.movable_content {
height: 90px;
margin: 0 auto;
margin-top: 50px;
background-color: #ededed;
color: #666;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 28px;
align-self: center;
}
.movable-move {
font-size: 50px;
}
.box {
height: 90px;
background-color: #fff;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.movable-icon {
width: 60px;
height: 100%;
background-size: 100% 100%;
}
.movable-image {
width: 62px;
height: 46px;
display: flex;
flex-direction: column;
}
.code-bg {
position: fixed;
width: 750px;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.6);
}
.code {
position: fixed;
width: 680px;
height: 470px;
left: 35px;
top: 370px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #fff;
overflow: hidden;
}
.code-top {
padding-top: 0;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ebebeb;
height: 71px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #f8f8f8;
font-size: 24px;
}
.close {
width: 34px;
height: 34px;
display: flex;
flex-direction: column;
}
.code-renew {
padding-left: 20px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #e2e2e2;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e2e2e2;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #e2e2e2;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e2e2e2;
width: 650px;
height: 64px;
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
margin-top: 26px;
box-sizing: border-box;
align-self: center;
}
.code-m {
margin-top: 30px;
}
.code-btn {
padding-top: 0;
padding-right: 15px;
padding-bottom: 0;
padding-left: 15px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-top: 30px;
}
.code-btn-list {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #c2c2c2;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #c2c2c2;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #c2c2c2;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c2c2c2;
width: 118px;
height: 72px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #ffffff;
font-size: 26px;
color: #3e3e3e;
line-height: 70px;
text-align: center;
margin-left: 28px;
}
.code-btn-list-color {
background-color: #009688;
color: #fff;
}
.div0 {
flex-direction: column;
}
.div3 {
flex-direction: column;
}
.div5 {
flex-direction: column;
}
.div6 {
flex-direction: column;
}
.div7 {
flex-direction: column;
}
.text8 {
color: rgb(255, 255, 255);
text-align: center;
font-size: 48px;
line-height: 50px;
}
.text11 {
color: rgb(102, 102, 102);
font-size: 28px;
}
.div13 {
flex-direction: column;
}
.div14 {
flex-direction: column;
}
.text15 {
color: rgb(102, 102, 102);
font-size: 50px;
}
.div17 {
flex-direction: column;
}
.text18 {
color: rgb(255, 255, 255);
text-align: center;
font-size: 28px;
line-height: 90px;
}
.div19 {
flex-direction: column;
}
.text20 {
color: rgb(255, 255, 255);
text-align: center;
font-size: 28px;
line-height: 90px;
}
.div21 {
flex-direction: column;
}
.div22 {
flex-direction: column;
}
.div24 {
flex-direction: column;
}
.text25 {
color: rgb(34, 34, 34);
font-size: 24px;
}
.div27 {
flex-direction: column;
}
.div31 {
flex-direction: column;
}
.text32 {
color: rgb(255, 255, 255);
text-align: center;
font-size: 26px;
line-height: 70px;
}
.div33 {
flex-direction: column;
}
.text34 {
color: rgb(62, 62, 62);
text-align: center;
font-size: 26px;
line-height: 70px;
}
</style>