375 lines
10 KiB
Vue
375 lines
10 KiB
Vue
<template>
|
||
<view class="mt">
|
||
<view class="flex_column flex_items" style="width: 100%;">
|
||
<view class="mt120 f58 flex_column flex_items bolder" style="color: #4d4d4d;">
|
||
<text>美食一键送达</text>
|
||
<text class="ml10">让生活更有滋味</text>
|
||
</view>
|
||
<image class="mt50" :src="imgUrl+'mtc11.png'" style="width:446rpx;" mode="widthFix"></image>
|
||
<view v-if="istype==1" class="flex_items flex_center"
|
||
style="width: 100%;position: fixed;left: 0;bottom: 30rpx;">
|
||
<view class="bgwhite plr30 pb30 pt50" style="width: calc(100% - 120rpx);border-radius:20rpx;">
|
||
<view class="f-center f30 bold">请登录</view>
|
||
<view class="mt40">
|
||
<u--form labelPosition="left" :model="form" labelWidth="60">
|
||
<!-- <u-form-item label="手机号" prop="form.account" borderBottom>
|
||
<u--input v-model="form.account" border="none" placeholder="请输入用户名"></u--input>
|
||
</u-form-item> -->
|
||
<u-form-item label="手机号" prop="form.account" borderBottom style="border-radius: 8rpx;">
|
||
<u--input v-model="form.mobile" border="none" placeholder="请输入手机号"
|
||
placeholderStyle="color:#9D9EA2;font-size:32rpx"></u--input>
|
||
<u-button @click="getcode" :text="codemsg" size="normal" type="warning"
|
||
style="width:180rpx;"></u-button>
|
||
</u-form-item>
|
||
<u-form-item label="验证码" prop="form.password" borderBottom>
|
||
<u--input v-model="form.code" border="none" placeholder="请输入验证码"
|
||
type="password"></u--input>
|
||
</u-form-item>
|
||
<view class="mt30 flex_items flex_center">
|
||
<u-button @click="getloadin" text="登 录" type="warning"></u-button>
|
||
</view>
|
||
<!-- <view v-if="isfa" class="mt30">
|
||
<liu-slider-verify sBgColor="#FBB500" sColor="#ffffff" ref="verify"
|
||
@change='change'></liu-slider-verify>
|
||
</view> -->
|
||
</u--form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 登录 -->
|
||
<view v-if="istype==0" class="flex_items flex_center"
|
||
style="width: 100%;position: fixed;left: 0;bottom: 30rpx;">
|
||
<view class="bgwhite plr30 pb30 pt50" style="width: calc(100% - 120rpx);border-radius:20rpx;">
|
||
<view class="f-center f30 bold">请登录</view>
|
||
<view class="mt40">
|
||
<u--form labelPosition="left" :model="form" labelWidth="60">
|
||
<u-form-item label="姓名" prop="form.account" borderBottom>
|
||
<u--input v-model="form.account" border="none" placeholder="请输入用户名"></u--input>
|
||
</u-form-item>
|
||
<u-form-item label="密码" prop="form.password" borderBottom>
|
||
<u--input v-model="form.password" border="none" placeholder="请输入密码"
|
||
type="password"></u--input>
|
||
</u-form-item>
|
||
<view class="mt30 flex_items flex_center">
|
||
<u-button @click="getloadin" text="登 录" type="warning"></u-button>
|
||
</view>
|
||
</u--form>
|
||
</view>
|
||
<view class="mt30 f26 f-center">还没有账号?点击<text style="color: #FBB500;" class="f30 bold"
|
||
@click="gore">这里</text>注册</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- tk -->
|
||
<view v-if="modalShow" class="flex_items flex_center"
|
||
style="width: 100%;height: 100vh;background: rgba(0,0,0,.5);position: fixed;left: 0;top: 0;z-index: 5;">
|
||
<view class="bgwhite tkk flex_column flex_items ptb30">
|
||
<text class="f36 bold" style="color: #585858;">请输入账号</text>
|
||
<input type="text" class="mt30 ptb20 plr20" v-model="usernumber" placeholder="账号"
|
||
style="text-align: left;border: 1px solid #e9e9e9;background:#d4d4d4;width:70%;">
|
||
<view class="mt10 f24" style="color:#a9a6a6;width: 65%;">访客登陆账号为：13902、13903、13904、13905、13906</view>
|
||
<view class="flex_start flex_items mt20 bte9s ptb20" style="width: 80%;">
|
||
<view @click="out" class="flex_items flex_center"
|
||
style="width: 49%;height: 40rpx;border-right: 1px solid #e9e9e9;">
|
||
<text>取消</text>
|
||
</view>
|
||
<view @click="yes" style="width: 50%;height: 40rpx;color: #167eef;">
|
||
<text>确认</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="show"
|
||
style="width: 100%;height: 100vh;background: rgba(0,0,0,.7);top: 0;left: 0;position: fixed;z-index: 2;"
|
||
class="flex_items flex_center">
|
||
<view class="flex_items flex_center bgwhite ptb40" style="width: 650rpx;">
|
||
<view style="width:calc(100% - 60rpx)">
|
||
<view class="flex_between flex_items">
|
||
<u-icon name="photo" color="#e6effb" size="28" style="opacity: 0;"></u-icon>
|
||
<text class="f32">请滑动验证</text>
|
||
<u-icon @click="close" name="close-circle" color="#5e6d82" size="20"></u-icon>
|
||
</view>
|
||
<liu-slider-verify class="mt40" sBgColor="#FBB500" sColor="#ffffff" ref="verify"
|
||
@change='change'></liu-slider-verify>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
usernumber: "",
|
||
modalShow: false,
|
||
types: 1,
|
||
imgUrl: "",
|
||
form: {
|
||
// account: "",
|
||
// password: "",
|
||
mobile: "",
|
||
code: ""
|
||
},
|
||
imgcode: "",
|
||
istype: 1,
|
||
codemsg: "发送验证码",
|
||
show: false
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
// console.log(options.usernumber)
|
||
// this.usernumber = options.usernumber
|
||
this.imgUrl = this.api.imgUrl
|
||
},
|
||
methods: {
|
||
goout(types) {
|
||
uni.removeStorageSync('token')
|
||
if (types == '1') {
|
||
uni.showLoading({
|
||
title: "登录中..."
|
||
})
|
||
this.api.mtlogin({
|
||
account: "zhangsan",
|
||
password: "123456"
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == '200') {
|
||
uni.setStorageSync('token', res.data.data.token)
|
||
uni.navigateTo({
|
||
url: "/pages/mt/preferential?user=" + res.data.data.user_number
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
this.modalShow = true
|
||
}
|
||
return false
|
||
let that = this
|
||
this.types = types
|
||
this.usernumber = ""
|
||
that.modalShow = true
|
||
},
|
||
getcode() {
|
||
if (this.form.phone == '') {
|
||
uni.showToast({
|
||
title: "手机号不能为空",
|
||
icon: "none"
|
||
})
|
||
return false
|
||
}
|
||
this.show = true
|
||
// if (this.codemsg == "发送验证码" || this.codemsg == "重新发送") {
|
||
// // this.getphonecode()
|
||
// this.codemsg = 5;
|
||
// this.int = setInterval(() => {
|
||
// this.codemsg -= 1;
|
||
// if (this.codemsg == 0) {
|
||
// clearInterval(this.int);
|
||
// this.codemsg = "重新发送";
|
||
// }
|
||
// }, 1000);
|
||
// }
|
||
},
|
||
out() {
|
||
this.modalShow = false
|
||
},
|
||
yes() {
|
||
if (this.usernumber == "") {
|
||
uni.showToast({
|
||
title: "账号不能为空",
|
||
icon: "none"
|
||
})
|
||
return false
|
||
}
|
||
this.submit(this.types, this.usernumber)
|
||
},
|
||
close() {
|
||
this.show = false
|
||
},
|
||
//验证回调
|
||
change(e) {
|
||
console.log(e)
|
||
if (e.state) {
|
||
this.getphonecode()
|
||
// this.goregister()
|
||
} else {
|
||
this.reset()
|
||
}
|
||
},
|
||
getphonecode() {
|
||
let that = this
|
||
uni.showLoading({
|
||
title: "发送中..."
|
||
})
|
||
that.api.gocode({
|
||
mobile: that.form.mobile
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == '200') {
|
||
uni.showToast({
|
||
title: "发送成功",
|
||
icon: "success",
|
||
duration: 800,
|
||
})
|
||
setTimeout(function() {
|
||
that.show = false
|
||
if (that.codemsg == "发送验证码" || that.codemsg == "重新发送") {
|
||
// that.getphonecode()
|
||
that.codemsg = 5;
|
||
that.int = setInterval(() => {
|
||
that.codemsg -= 1;
|
||
if (that.codemsg == 0) {
|
||
clearInterval(that.int);
|
||
that.codemsg = "重新发送";
|
||
}
|
||
}, 1000);
|
||
}
|
||
}, 800);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
this.reset()
|
||
this.show = false
|
||
}
|
||
})
|
||
},
|
||
goregister() {
|
||
uni.showLoading({
|
||
title: "注册中..."
|
||
})
|
||
this.api.register(this.form).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == '200') {
|
||
uni.showToast({
|
||
title: '注册成功！',
|
||
icon: "success"
|
||
})
|
||
this.getloadin()
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none',
|
||
duration: 1200
|
||
})
|
||
let that = this
|
||
setTimeout(function() {
|
||
that.istype = 0
|
||
that.reset()
|
||
}, 1200);
|
||
|
||
}
|
||
})
|
||
},
|
||
getloadin() {
|
||
if(this.form.mobile==''){
|
||
uni.showToast({
|
||
title:'手机号不能为空',
|
||
icon:"none"
|
||
})
|
||
return false
|
||
}
|
||
if(this.form.code==''){
|
||
uni.showToast({
|
||
title:'手机验证码不能为空',
|
||
icon:"none"
|
||
})
|
||
return false
|
||
}
|
||
uni.showLoading({
|
||
title: "正在登录..."
|
||
})
|
||
this.api.mtlogin(this.form).then((res) => {
|
||
console.log(res)
|
||
if (res.data.code == '200') {
|
||
uni.setStorageSync('token', res.data.data.token)
|
||
uni.showToast({
|
||
title: '登录成功！',
|
||
icon: "success",
|
||
duration: 1200
|
||
})
|
||
setTimeout(function() {
|
||
uni.reLaunch({
|
||
url: "/pages/mt/index?user=" + res.data.data.user_number
|
||
})
|
||
}, 1200);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
gore() {
|
||
this.istype = 1
|
||
},
|
||
//重置
|
||
reset() {
|
||
this.$refs.verify.initialization()
|
||
},
|
||
submit(types, usernumber) {
|
||
uni.showLoading({
|
||
title: "登录中..."
|
||
})
|
||
// https://mtapi.86698.cn
|
||
uni.request({
|
||
url: "https://mtapi.86698.cn/api/login?user_number=" + usernumber + "&type=" + types,
|
||
method: 'get',
|
||
header: {
|
||
'content-type': 'application/json',
|
||
},
|
||
success: res => {
|
||
console.log(res)
|
||
uni.hideLoading()
|
||
var href = res.data.url
|
||
window.open(href, '_self')
|
||
},
|
||
fail: (error) => {
|
||
console.log(error);
|
||
},
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.mt {
|
||
background-image: url('https://mtweb.86698.cn/static/images/mtbg.png');
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.mask {
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 10;
|
||
background: rgba(0, 0, 0, .5);
|
||
}
|
||
|
||
.tkk {
|
||
width: 80%;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
}
|
||
</style> |