|
|
@@ -1,45 +1,54 @@
|
|
|
<template>
|
|
|
- <view class="body" :style="{height:screenHeight}">
|
|
|
- <view class="header">
|
|
|
- <view class="circle circle1"></view>
|
|
|
- <view class="circle circle2"></view>
|
|
|
- <view class="circle circle3"></view>
|
|
|
- <view class="text">
|
|
|
- <view class="en-text">hello</view>
|
|
|
- <view class="cn-text">欢迎登录！</view>
|
|
|
+ <view class="login-content">
|
|
|
+ <view class="login-content-info">
|
|
|
+ <view class="login-bgm":style="{backgroundImage:`url(${staticUrl}/img/tuan-index-bg.png)`}">
|
|
|
+ <image class="login-logo" :src="staticUrl+'/img/logo.png'" mode="scaleToFill"></image>
|
|
|
+ <text>{{ title }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="login-info">
|
|
|
+ <view class="login-info-box">
|
|
|
+ <text class="login-info-title">账号密码登陆</text>
|
|
|
+ <view class="login-info-form">
|
|
|
+ <u--form
|
|
|
+ labelWidth="0"
|
|
|
+ :borderBottom="false"
|
|
|
+ :model="form"
|
|
|
+ :rules="rules"
|
|
|
+ ref="uForm">
|
|
|
+ <u-form-item prop="mobile">
|
|
|
+ <u--input
|
|
|
+ v-model="form.mobile"
|
|
|
+ placeholder="请输入账号"
|
|
|
+ border="surround"
|
|
|
+ shape="circle"
|
|
|
+ prefixIcon="account-fill"
|
|
|
+ prefixIconStyle="font-size: 22px;color: #909399"
|
|
|
+ ></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item prop="password">
|
|
|
+ <u--input
|
|
|
+ v-model="form.password"
|
|
|
+ placeholder="请输入账密码"
|
|
|
+ border="surround"
|
|
|
+ shape="circle"
|
|
|
+ prefixIcon="lock-fill"
|
|
|
+ :password="true"
|
|
|
+ prefixIconStyle="font-size: 22px;color: #909399"
|
|
|
+ ></u--input>
|
|
|
+ </u-form-item>
|
|
|
+ </u--form>
|
|
|
+ </view>
|
|
|
+ <view class="login-info-submit">
|
|
|
+ <u-button
|
|
|
+ class="login-info-submit-but"
|
|
|
+ @click="submit()"
|
|
|
+ :loading="loading"
|
|
|
+ loadingText="登录中..."
|
|
|
+ >登录</u-button>
|
|
|
+ </view>
|
|
|
+ <view class="login-info-tip">暂不支持自行注册</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <view class="login-box">
|
|
|
- <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" >
|
|
|
- <u-form-item label="" prop="account" ref="account" >
|
|
|
- <u--input
|
|
|
- v-model="form.account"
|
|
|
- border="surround"
|
|
|
- placeholder="输入账号"
|
|
|
- :customStyle="inputCustomStyle"
|
|
|
- ></u--input>
|
|
|
- </u-form-item>
|
|
|
- <u-form-item label="" prop="password" ref="password" >
|
|
|
- <u--input
|
|
|
- v-model="form.password"
|
|
|
- border="surround"
|
|
|
- :password="true"
|
|
|
- placeholder="输入密码"
|
|
|
- :customStyle="inputCustomStyle"
|
|
|
- ></u--input>
|
|
|
- </u-form-item>
|
|
|
- </u--form>
|
|
|
- <u-button
|
|
|
- @click="submit"
|
|
|
- text="登录"
|
|
|
- type="primary"
|
|
|
- shape="circle"
|
|
|
- :customStyle="{'margin-top':'60rpx',height:'98rpx','box-sizing':'border-box'}"
|
|
|
- color="linear-gradient(90deg, #00D17D 0%, #00A447 100%)">
|
|
|
- </u-button>
|
|
|
- </view>
|
|
|
- <view class="tip">
|
|
|
- 提示：初始账号和密码由管理员设置，请与管理人员联系
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -48,52 +57,46 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- bname:'旭烁集团',
|
|
|
- //屏幕高度
|
|
|
- screenHeight: "",
|
|
|
+ staticUrl:this.$commonConfig.staticUrl,
|
|
|
+ title: '《伟大转折》剧目团购系统',
|
|
|
+ logoUrl: this.$commonConfig.staticUrl + "login/logo.png",
|
|
|
+ loading: false,
|
|
|
backUrl:null,
|
|
|
- form:{
|
|
|
- account:'',
|
|
|
- password:''
|
|
|
+ form: {
|
|
|
+ mobile: '',
|
|
|
+ password: '',
|
|
|
},
|
|
|
rules: {
|
|
|
- account: {
|
|
|
+ 'mobile': {
|
|
|
type: 'string',
|
|
|
required: true,
|
|
|
message: '请填写账号',
|
|
|
trigger: ['blur', 'change']
|
|
|
},
|
|
|
- password: {
|
|
|
+ 'password': {
|
|
|
type: 'string',
|
|
|
required: true,
|
|
|
message: '请填写密码',
|
|
|
trigger: ['blur', 'change']
|
|
|
},
|
|
|
},
|
|
|
- inputCustomStyle:{
|
|
|
- height:'98rpx',
|
|
|
- 'border-color':'#eee',
|
|
|
- 'padding-left':'30rpx',
|
|
|
- 'box-sizing':'border-box',
|
|
|
- }
|
|
|
- };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
|
|
|
+ this.$refs.uForm.setRules(this.rules)
|
|
|
},
|
|
|
onLoad() {
|
|
|
+ let that = this;
|
|
|
// 测试环境填充用户名密码
|
|
|
if(process.env.NODE_ENV=='development'){
|
|
|
- this.form.account = 'dls1234';
|
|
|
- this.form.password = '654321';
|
|
|
+ this.form.mobile = '13682277062';
|
|
|
+ this.form.password = '123456';
|
|
|
}
|
|
|
- let that = this;
|
|
|
- uni.getSystemInfo({
|
|
|
- success: (res) => {
|
|
|
- this.screenHeight = res.windowHeight + "px"
|
|
|
- }
|
|
|
- });
|
|
|
uni.getStorage({
|
|
|
key: 'backUrl',
|
|
|
success: function (res) {
|
|
|
- console.log('getStorage',res);
|
|
|
+ // console.log('getStorage',res);
|
|
|
},
|
|
|
complete(res) {
|
|
|
if(res.data){
|
|
|
@@ -104,123 +107,132 @@
|
|
|
console.log('backUrl',that.backUrl);
|
|
|
}
|
|
|
});
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- //onReady 为uni-app支持的生命周期之一
|
|
|
- this.$refs.uForm.setRules(this.rules)
|
|
|
+
|
|
|
},
|
|
|
onShow() {
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- submit(){
|
|
|
- console.log('form',this.form);
|
|
|
+ /**
|
|
|
+ *
|
|
|
+ * 提交登录
|
|
|
+ *
|
|
|
+ */
|
|
|
+ submit() {
|
|
|
+ this.loading = true
|
|
|
this.$refs.uForm.validate().then(res => {
|
|
|
- // uni.$u.toast('校验通过')
|
|
|
- this.$u.api.login(this.form).then(res=>{
|
|
|
+ this.$u.toast('校验通过')
|
|
|
+ this.$u.api.teamLogin(this.form).then(res=>{
|
|
|
+ this.loading = false
|
|
|
// console.log('res',res.data);
|
|
|
this.$u.vuex('vuex_user_info', res.data);
|
|
|
uni.reLaunch({url: this.backUrl});
|
|
|
}).catch(err=>{
|
|
|
console.log('login',err);
|
|
|
+ this.loading = false
|
|
|
})
|
|
|
}).catch(errors => {
|
|
|
- uni.$u.toast('请正确填写表单')
|
|
|
+ this.$u.toast('校验失败')
|
|
|
+ this.loading = false
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
-.body {
|
|
|
- background-color: #fff;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.header{
|
|
|
- position: relative;
|
|
|
- height: 368rpx;
|
|
|
- overflow: hidden;
|
|
|
- background: linear-gradient(325deg, #FCFFFD 0%, #ECFFF4 100%);
|
|
|
- .circle{
|
|
|
- position: absolute;
|
|
|
- border-radius: 50%;
|
|
|
- &.circle1{
|
|
|
- width: 201rpx;
|
|
|
- height: 149rpx;
|
|
|
- background: linear-gradient(230deg, #E5FFEC 0%, #C0FFD7 100%);
|
|
|
- left:-20rpx;
|
|
|
- bottom: -50rpx;
|
|
|
- }
|
|
|
- &.circle2{
|
|
|
- width: 148rpx;
|
|
|
- height: 148rpx;
|
|
|
- background: linear-gradient(215deg, #E7FFEE 0%, #BFFFDB 100%);
|
|
|
- opacity: 0.6;
|
|
|
- right:158rpx;
|
|
|
- top: 80rpx;
|
|
|
+ .login-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ --bgm-height: 630rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /** 背景 */
|
|
|
+ .login-content-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-bgm {
|
|
|
+ width: 100%;
|
|
|
+ height: 630rpx;
|
|
|
+ // background-image: url("#{$image-beas-url}login/bgm.png");
|
|
|
+ background-size: 100% auto;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .login-logo {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 172rpx;
|
|
|
+ padding: 50rpx 0;
|
|
|
}
|
|
|
- &.circle3{
|
|
|
- width: 232rpx;
|
|
|
- height: 237rpx;
|
|
|
- background: linear-gradient(215deg, #F1FFF8 0%, #C3FFD3 100%);
|
|
|
- right:-32rpx;
|
|
|
- top: -65rpx;
|
|
|
+
|
|
|
+ >text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: SourceHanSansCN, SourceHanSansCN;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
}
|
|
|
}
|
|
|
- .text{
|
|
|
+
|
|
|
+ .login-info {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - var(--bgm-height) + 40rpx);
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 28rpx 28rpx 0rpx 0rpx;
|
|
|
position: absolute;
|
|
|
- left: 40rpx;
|
|
|
- bottom: 80rpx;
|
|
|
- .en-text{
|
|
|
- position: relative;
|
|
|
- text-transform: uppercase;
|
|
|
- font-size: 58rpx;
|
|
|
- font-family: AlibabaPuHuiTi_2_115_Black;
|
|
|
- color: #333333;
|
|
|
- line-height: 81rpx;
|
|
|
- font-weight: bold;
|
|
|
- width: fit-content;
|
|
|
- z-index: 5;
|
|
|
- &::before{
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- width: 104%;
|
|
|
- height: 10rpx;
|
|
|
- background-color: #FFB100;
|
|
|
- position: absolute;
|
|
|
- left: -2%;
|
|
|
- bottom: 10rpx;
|
|
|
- z-index: -1;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 22;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 80rpx;
|
|
|
+ .login-info-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .login-info-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-family: SourceHanSansCN, SourceHanSansCN;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2D2D2D;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ .login-info-form {
|
|
|
+
|
|
|
+ }
|
|
|
+ .login-info-submit {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ padding: 40rpx 0 20rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .login-info-submit-but {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+ background-color: #ed0000;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login-info-tip {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: SourceHanSansCN, SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #C2C2C2;
|
|
|
}
|
|
|
- }
|
|
|
- .cn-text{
|
|
|
- font-size: 50rpx;
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- line-height: 70rpx;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.login-box{
|
|
|
- position: relative;
|
|
|
- top: -24rpx;
|
|
|
- padding: 60rpx 40rpx;
|
|
|
- border-top-left-radius: 24rpx;
|
|
|
- border-top-right-radius: 24rpx;
|
|
|
- background-color: #fff;
|
|
|
- // box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0,28,12,0.06);
|
|
|
-}
|
|
|
-.tip{
|
|
|
- position: fixed;
|
|
|
- bottom: 108rpx;
|
|
|
- width: 100vw;
|
|
|
- box-sizing: border-box;
|
|
|
- text-align: center;
|
|
|
- font-size: 24rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
-}
|
|
|
-</style>
|
|
|
|
|
|
+</style>
|
