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>
|