xiejiahao
4 years ago
9 changed files with 1399 additions and 4 deletions
-
6src/router/index.js
-
30src/router/routes_order.js
-
383src/views/login/components/login.vue
-
276src/views/login/components/register.vue
-
151src/views/login/index.scss
-
3src/views/login/index.vue
-
62src/views/login/index2.vue
-
282src/views/order/index.scss
-
210src/views/order/index.vue
@ -0,0 +1,30 @@ |
|||||
|
/* Layout */ |
||||
|
import Layout from '../views/layout/Layout' |
||||
|
const _import = require('./_import_' + process.env.NODE_ENV) |
||||
|
|
||||
|
export default { |
||||
|
routes: [ |
||||
|
{ |
||||
|
path: '/my/order', |
||||
|
component: Layout, |
||||
|
name: '订单', |
||||
|
meta: { |
||||
|
title: '订单', |
||||
|
icon: 'task' |
||||
|
}, |
||||
|
children: [ |
||||
|
{ |
||||
|
path: 'index', |
||||
|
component: _import('order/index'), |
||||
|
name: '我的', |
||||
|
meta: { |
||||
|
title: '我的', |
||||
|
icon: 'component' |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,383 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div v-if="!isRestPwd"> |
||||
|
<div class="login_form"> |
||||
|
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"> |
||||
|
<el-form-item prop="displayUserid" v-show="loginForm.authType=='password_display_userid'"> |
||||
|
<el-input class="inp" type="text" v-model="loginForm.displayUserid" autoComplete="on" placeholder="账号"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="password" v-show="loginForm.authType=='password_display_userid'"> |
||||
|
<el-input class="inp" show-password v-model="loginForm.password" autoComplete="on" placeholder="密码"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="phoneno" v-show="loginForm.authType=='sms'"> |
||||
|
<el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="smsCode" v-show="loginForm.authType=='sms'"> |
||||
|
<el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码"> |
||||
|
</el-input> |
||||
|
<el-button class="sendCode" :disabled="abledBut" @click.prevent="sendPhonenoSmsCode"> |
||||
|
<span class="text" v-if="!abledBut">发送验证码</span> |
||||
|
<span class="text" v-else>({{setTimeNum}}s)</span> |
||||
|
</el-button> |
||||
|
|
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div class="oper"> |
||||
|
<a @click="isRestPwd = true">忘记密码</a> |
||||
|
<a v-if="loginForm.authType == 'password_display_userid' " @click="loginForm.authType = 'sms'">手机号登录</a> |
||||
|
<a v-if="loginForm.authType == 'sms' " @click="loginForm.authType = 'password_display_userid' ">密码登录</a> |
||||
|
</div> |
||||
|
|
||||
|
<el-button class="login" :loading="loading" @click.native.prevent="handleLogin"> |
||||
|
<span class="text">登 录</span> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<el-divider content-position="center">第三方登录方式</el-divider> |
||||
|
<div class="other"> |
||||
|
<img src="@/assets/image/module/weixin.png"> |
||||
|
<img src="@/assets/image/module/qq.png"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="isRestPwd"> |
||||
|
<div class="login_form"> |
||||
|
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"> |
||||
|
<el-form-item prop="phoneno" > |
||||
|
<el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item prop="smsCode"> |
||||
|
<el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码"> |
||||
|
</el-input> |
||||
|
<el-button :disabled="abledBut" class="sendCode" @click.prevent="sendPhonenoSmsCode"> |
||||
|
<span class="text" v-if="!abledBut">发送验证码</span> |
||||
|
<span class="text" v-else>({{setTimeNum}}s)</span> |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item prop="password" > |
||||
|
<el-input class="inp" show-password name="password" :type="passwordType" v-model="loginForm.password" autoComplete="on" placeholder="新密码"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div class="oper"> |
||||
|
<a @click="isRestPwd = false" style="color:#409EFF;">《 返回</a> |
||||
|
</div> |
||||
|
<el-button class="login" :loading="loading" @click.native.prevent="handleResetPasswordByPhoneno"> |
||||
|
<span class="text">重置密码</span> |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { sendSmsCode } from '@/api/sms/sms'; |
||||
|
import { mapGetters } from 'vuex'; |
||||
|
import md5 from 'js-md5'; |
||||
|
import { resetPasswordByPhoneno } from '@/api/login'; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
name: 'login', |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'myBranchs','myDepts','userInfo','roles' |
||||
|
]), |
||||
|
screenWidth:function(){ |
||||
|
return screen.width; |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
watch: { |
||||
|
/* 使用watch来响应数据的变化 */ |
||||
|
//监听倒计时数据的变化，小于0的时候，清除定时器，解开按钮，重置倒计时 |
||||
|
setTimeNum(newVal, oldVal) { |
||||
|
if(newVal < 0){ |
||||
|
clearInterval(this.timeWrap) |
||||
|
this.abledBut = false |
||||
|
this.setTimeNum = 60 |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
const validateDisplayUserid = (rule, value, callback) => { |
||||
|
if (this.loginForm.authType=='password_display_userid') { |
||||
|
if(value.length<=6){ |
||||
|
callback(new Error('请输入6位以上用户账号')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const validatePassword = (rule, value, callback) => { |
||||
|
if (this.loginForm.authType=='password_display_userid') { |
||||
|
if(value.length<6){ |
||||
|
callback(new Error('密码最少为六位')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const validatePhoneno = (rule, value, callback) => { |
||||
|
if (this.loginForm.authType=='sms') { |
||||
|
if(value.length !=11 ){ |
||||
|
callback(new Error('手机号码必须为11位号码')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const validateSmsCode = (rule, value, callback) => { |
||||
|
if (this.loginForm.authType=='sms') { |
||||
|
if(value.length !=6 ){ |
||||
|
callback(new Error('请输入6位短信验证码')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} else { |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
loginForm: { |
||||
|
displayUserid: '', |
||||
|
password: '', |
||||
|
authType:'sms',//password/sms/password_display_userid 分别为账户密码、短信验证码快捷登录 |
||||
|
phoneno:'',//手机号码 |
||||
|
smsCode:'',//短信验证码 |
||||
|
}, |
||||
|
loginRules: { |
||||
|
displayUserid: [{ required: true, trigger: 'blur', validator: validateDisplayUserid }], |
||||
|
password: [{ required: true, trigger: 'blur', validator: validatePassword }], |
||||
|
phoneno: [{ required: true, trigger: 'blur', validator: validatePhoneno }], |
||||
|
smsCode: [{ required: true, trigger: 'blur', validator: validateSmsCode }], |
||||
|
}, |
||||
|
passwordType: 'password', |
||||
|
loading: false, |
||||
|
showResetPasswordDialog:false,//显示忘记密码重置密码窗口 |
||||
|
showTpLoginDialog: false, //显示第三方登陆对话框 |
||||
|
showRegisterDialog: false,//显示注册窗口 |
||||
|
deptSelectVisible:false,//显示选择部门对话框 |
||||
|
userDeptid:'',//选中的部门编号 |
||||
|
userBranchId:'',//选中的部门对应的机构号 |
||||
|
addBranchFormVisible:false, //显示添加机构对话框 |
||||
|
isRestPwd: false, |
||||
|
abledBut: false, //是否禁止 |
||||
|
setTimeNum: 60, // 倒计时时间 |
||||
|
timeWrap: null, // 定时器标识 |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
showPwd() { |
||||
|
if (this.passwordType === 'password') { |
||||
|
this.passwordType = '' |
||||
|
} else { |
||||
|
this.passwordType = 'password' |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
sendPhonenoSmsCode(){ |
||||
|
var params={ |
||||
|
phoneno:this.loginForm.phoneno, |
||||
|
scene:"login" |
||||
|
} |
||||
|
sendSmsCode(params).then(res=>{ |
||||
|
if(res.data.tips.isOk){ |
||||
|
this.$message.success("发送成功"); |
||||
|
if (this.setTimeNum > 0) { |
||||
|
this.abledBut = true |
||||
|
this.timeWrap = setInterval(() => { |
||||
|
this.setTimeNum -= 1 |
||||
|
}, 1000) |
||||
|
} |
||||
|
}else{ |
||||
|
this.$message.error(res.data.tips.msg); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleResetPasswordByPhoneno() { |
||||
|
this.loading = true |
||||
|
this.$refs.loginForm.validate(valid => { |
||||
|
if (valid) { |
||||
|
let params={ |
||||
|
newPassword:md5(this.loginForm.password), |
||||
|
phoneno:this.loginForm.phoneno, |
||||
|
smsCode:this.loginForm.smsCode |
||||
|
} |
||||
|
resetPasswordByPhoneno(params).then(res=>{ |
||||
|
this.loading = false |
||||
|
if(res.data.tips.isOk){ |
||||
|
this.$message.success(res.data.tips.msg); |
||||
|
this.isRestPwd = false; |
||||
|
}else{ |
||||
|
this.$message.error(res.data.tips.msg); |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
this.loading = false |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
handleLogin() { |
||||
|
this.$refs.loginForm.validate(valid => { |
||||
|
if (valid) { |
||||
|
this.loading = true |
||||
|
let params={ |
||||
|
displayUserid:this.loginForm.displayUserid, |
||||
|
password:md5(this.loginForm.password), |
||||
|
deptid:this.userDeptid, |
||||
|
authType:this.loginForm.authType, |
||||
|
phoneno:this.loginForm.phoneno, |
||||
|
smsCode:this.loginForm.smsCode, |
||||
|
branchId:this.userBranchId, |
||||
|
} |
||||
|
var loginParams={ } |
||||
|
if(params.authType=='password_display_userid'){ |
||||
|
loginParams.userloginid=params.displayUserid |
||||
|
loginParams.password=params.password |
||||
|
loginParams.grantType="password" |
||||
|
loginParams.authType='password_display_userid' |
||||
|
//loginParams.deptid=params.deptid |
||||
|
loginParams.branchId=params.branchId |
||||
|
}else if(params.authType=='sms'){ |
||||
|
loginParams.userloginid=params.phoneno |
||||
|
loginParams.password=params.smsCode |
||||
|
loginParams.grantType="password" |
||||
|
loginParams.authType="sms" |
||||
|
//loginParams.deptid=params.deptid |
||||
|
loginParams.branchId=params.branchId |
||||
|
} |
||||
|
this.$store.dispatch("LoginByUserloginid",loginParams).then(res => { |
||||
|
this.loading = false |
||||
|
if(res.data.tips.isOk==true){ |
||||
|
this.loading = true; |
||||
|
this.$store.dispatch('GetUserInfo').then((res2)=>{ |
||||
|
//this.userDeptid=res2.data.userInfo.deptid |
||||
|
this.loading = false |
||||
|
if(res2.data.tips.isOk==true){ |
||||
|
if(this.$store.state.user.myBranchs==null ||this.$store.state.user.myBranchs.length==0||this.$store.state.user.myDepts==null || this.$store.state.user.myDepts.length<=0){ |
||||
|
//if(1==1){ |
||||
|
//this.$message.error("亲，您不在任何一个公司或者部门中，需要【先创建公司】\n 或者请【管理员加您进入公司】哦"); |
||||
|
this.addBranchFormVisible=true; |
||||
|
}else if(this.$store.state.user.myDepts.length>1 ){ |
||||
|
//this.$message.info("亲，您在多个部门中任职，我分不清您要登陆哪个部门，请选择一个部门登陆吧"); |
||||
|
if( !this.userDeptid ){ |
||||
|
this.userDeptid=res2.data.userInfo.deptid |
||||
|
this.deptSelectVisible=true; |
||||
|
}else{ |
||||
|
this.rolesChecked(); |
||||
|
} |
||||
|
//this.$router.push({ path: 'mdp/sys/branch/BranchAdd' }) |
||||
|
}else if(this.$store.state.user.myDepts.length==1){ |
||||
|
//进行角色身份验证 |
||||
|
this.userDeptid=res2.data.userInfo.deptid |
||||
|
this.rolesChecked(); |
||||
|
}else{ |
||||
|
this.rolesChecked(); |
||||
|
} |
||||
|
}else{ |
||||
|
this.$message.error(res2.data.tips.msg); |
||||
|
} |
||||
|
|
||||
|
}).catch(err=>{ |
||||
|
console.log(err); |
||||
|
this.loading = false |
||||
|
}); |
||||
|
}else{ |
||||
|
this.$message.error(res.data.tips.msg); |
||||
|
} |
||||
|
}).catch((e) => { |
||||
|
this.loading = false |
||||
|
}) |
||||
|
} else { |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
deptChecked() { |
||||
|
if( !this.userDeptid){ |
||||
|
this.$message.error("请选择登陆的部门") |
||||
|
return |
||||
|
} |
||||
|
if(this.$store.state.user.userInfo.deptid!=this.userDeptid){ |
||||
|
let depts=this.myDepts.filter(d=>d.deptid==this.userDeptid) |
||||
|
this.userBranchId=depts[0].branchId |
||||
|
this.handleLogin(); |
||||
|
return; |
||||
|
}else{ |
||||
|
this.rolesChecked(); |
||||
|
} |
||||
|
}, |
||||
|
//角色身份验证 |
||||
|
rolesChecked(){ |
||||
|
if(this.userInfo.isSuperAdmin){ |
||||
|
this.$router.push({ path: '/' }); |
||||
|
this.$message.info("欢迎登陆，超级管理员"); |
||||
|
}else if(this.userInfo.isPlatformAdmin){ |
||||
|
this.$router.push({ path: '/' }); |
||||
|
this.$message.info("欢迎登陆，平台管理员"); |
||||
|
}else{ |
||||
|
this.$router.push({ path: '/' }); |
||||
|
this.$message.info("欢迎登陆"); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
afterAddBranchSubmit(branch){ |
||||
|
this.addBranchFormVisible=false; |
||||
|
this.handleLogin(); |
||||
|
}, |
||||
|
|
||||
|
afterQRScan() { |
||||
|
// const hash = window.location.hash.slice(1) |
||||
|
// const hashObj = getQueryObject(hash) |
||||
|
// const originUrl = window.location.origin |
||||
|
// history.replaceState({}, '', originUrl) |
||||
|
// const codeMap = { |
||||
|
// wechat: 'code', |
||||
|
// tencent: 'code' |
||||
|
// } |
||||
|
// const codeName = hashObj[codeMap[this.auth_type]] |
||||
|
// if (!codeName) { |
||||
|
// alert('第三方登录失败') |
||||
|
// } else { |
||||
|
// this.$store.dispatch('LoginByThirdparty', codeName).then(() => { |
||||
|
// this.$router.push({ path: '/' }) |
||||
|
// }) |
||||
|
// } |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// window.addEventListener('hashchange', this.afterQRScan) |
||||
|
}, |
||||
|
destroyed() { |
||||
|
// window.removeEventListener('hashchange', this.afterQRScan) |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '../index.scss'; |
||||
|
</style> |
||||
@ -0,0 +1,276 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="login_form"> |
||||
|
<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm"> |
||||
|
<el-form-item prop="phoneno"> |
||||
|
<el-input class="inp" name="phoneno" type="text" v-model="loginForm.phoneno" autoComplete="on" placeholder="手机号码"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item prop="smsCode"> |
||||
|
<el-input class="inp smsCode" name="smsCode" type="text" v-model="loginForm.smsCode" autoComplete="on" placeholder="短信验证码"> |
||||
|
</el-input> |
||||
|
<el-button class="sendCode" @click.prevent="sendPhonenoSmsCode"><span class="text">发送验证码</span></el-button> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item prop="username"> |
||||
|
<el-input class="inp" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名称" > |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item prop="displayUserid"> |
||||
|
<el-input class="inp" name="displayUserid" type="text" v-model="loginForm.displayUserid" autoComplete="on" placeholder="用户编号" > |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item prop="password"> |
||||
|
<el-input class="inp" show-password name="password" :type="passwordType" v-model="loginForm.password" autoComplete="on" placeholder="密码"> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-button class="register" :loading="loading" @click.native.prevent="handleRegister"> |
||||
|
<span class="text">注 册</span> |
||||
|
</el-button> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { sendSmsCode } from '@/api/sms/sms'; |
||||
|
import { checkPhoneno,checkDisplayUserid,doRegister } from '@/api/login'; |
||||
|
import LangSelect from '@/components/LangSelect'; |
||||
|
import SocialSign from '../socialsignin'; |
||||
|
import BranchAdd from '../BranchAdd'; |
||||
|
import { mapGetters } from 'vuex'; |
||||
|
import md5 from 'js-md5'; |
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
components: { LangSelect, SocialSign, BranchAdd }, |
||||
|
name: 'login', |
||||
|
data() { |
||||
|
const validateDisplayUserid = (rule, value, callback) => { |
||||
|
if( !value || value.length<=6){ |
||||
|
callback(new Error('请输入6位以上用户账号')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const validatePassword = (rule, value, callback) => { |
||||
|
if( !value || value.length<6){ |
||||
|
callback(new Error('密码最少为六位')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const validatePhoneno = (rule, value, callback) => { |
||||
|
if( !value || value.length !=11 ){ |
||||
|
callback(new Error('手机号码必须为11位号码')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const validateSmsCode = (rule, value, callback) => { |
||||
|
if( !value || value.length !=6 ){ |
||||
|
callback(new Error('请输入6位短信验证码')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
const validateUsername = (rule, value, callback) => { |
||||
|
if( !value || value.length <2 ){ |
||||
|
callback(new Error('请输入用户名称')) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
return { |
||||
|
loginForm: { |
||||
|
username:'', |
||||
|
displayUserid: '', |
||||
|
password: '', |
||||
|
authType:'password_display_userid',//password/sms/password_display_userid 分别为账户密码、短信验证码快捷登录 |
||||
|
phoneno:'',//手机号码 |
||||
|
smsCode:'',//短信验证码 |
||||
|
}, |
||||
|
loginRules: { |
||||
|
|
||||
|
username: [{ required: true, trigger: 'blur', validator: validateUsername }], |
||||
|
displayUserid: [{ required: true, trigger: 'blur', validator: validateDisplayUserid }], |
||||
|
password: [{ required: true, trigger: 'blur', validator: validatePassword }], |
||||
|
phoneno: [{ required: true, trigger: 'blur', validator: validatePhoneno }], |
||||
|
smsCode: [{ required: true, trigger: 'blur', validator: validateSmsCode }], |
||||
|
}, |
||||
|
passwordType: 'password', |
||||
|
|
||||
|
loading: false, |
||||
|
showTpLoginDialog: false, //显示第三方登陆对话框 |
||||
|
deptSelectVisible:false,//显示选择部门对话框 |
||||
|
userDeptid:'',//选中的部门编号 |
||||
|
addBranchFormVisible:false, //显示添加机构对话框 |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
showPwd() { |
||||
|
if (this.passwordType === 'password') { |
||||
|
this.passwordType = '' |
||||
|
} else { |
||||
|
this.passwordType = 'password' |
||||
|
} |
||||
|
}, |
||||
|
sendPhonenoSmsCode(){ |
||||
|
if(!this.loginForm.phoneno){ |
||||
|
this.$message.error("手机号码不能为空"); |
||||
|
return; |
||||
|
} |
||||
|
if(this.loginForm.phoneno.length !=11 ){ |
||||
|
this.$message.error("手机号码必须为11位"); |
||||
|
return; |
||||
|
} |
||||
|
var params={ |
||||
|
phoneno:this.loginForm.phoneno, |
||||
|
scene:"register" |
||||
|
} |
||||
|
checkPhoneno(this.loginForm.phoneno).then(res0=>{ |
||||
|
if(res0.data.tips.isOk){ |
||||
|
sendSmsCode(params).then(res=>{ |
||||
|
if(res.data.tips.isOk){ |
||||
|
this.$message.success(res.data.tips.msg); |
||||
|
}else{ |
||||
|
this.$message.error(res.data.tips.msg); |
||||
|
} |
||||
|
}) |
||||
|
}else{ |
||||
|
this.$message.error("手机号码已存在，不允许注册，请直接登录"); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
checkDisplayUserid(){ |
||||
|
if(!this.loginForm.displayUserid){ |
||||
|
this.$message.error("账号不能为空"); |
||||
|
return; |
||||
|
} |
||||
|
checkDisplayUserid(this.loginForm.displayUserid).then(res0=>{ |
||||
|
if(res0.data.tips.isOk){ |
||||
|
this.$message.success("该账户可以注册"); |
||||
|
}else{ |
||||
|
this.$message.error("该账户已存在，不允许再注册！"); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
handleRegister() { |
||||
|
this.loading = true |
||||
|
this.$refs.loginForm.validate(valid => { |
||||
|
if (valid) { |
||||
|
let params={ |
||||
|
displayUserid:this.loginForm.displayUserid, |
||||
|
password:md5(this.loginForm.password), |
||||
|
deptid:this.userDeptid, |
||||
|
phoneno:this.loginForm.phoneno, |
||||
|
smsCode:this.loginForm.smsCode, |
||||
|
username:this.loginForm.username, |
||||
|
} |
||||
|
doRegister(params).then(res=>{ |
||||
|
this.loading = false |
||||
|
if(res.data.tips.isOk){ |
||||
|
this.$message.success(res.data.tips.msg); |
||||
|
}else{ |
||||
|
this.$message.error(res.data.tips.msg); |
||||
|
} |
||||
|
}) |
||||
|
} else { |
||||
|
this.loading = false |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
deptChecked() { |
||||
|
if( !this.userDeptid){ |
||||
|
this.$message.error("请选择登陆的部门") |
||||
|
return |
||||
|
} |
||||
|
|
||||
|
let depts=this.myDepts.filter(d=>d.deptid==this.userDeptid) |
||||
|
if(this.$store.state.user.userInfo.deptid!=this.userDeptid){ |
||||
|
this.handleLogin(); |
||||
|
return; |
||||
|
}else{ |
||||
|
this.rolesChecked(); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
//角色身份验证 |
||||
|
rolesChecked(){ |
||||
|
if(this.userInfo.isSuperAdmin){ |
||||
|
this.$router.push({ path: '/' }); |
||||
|
this.$message.info("欢迎登陆，超级管理员"); |
||||
|
}else if(this.userInfo.isPlatformAdmin){ |
||||
|
this.$router.push({ path: '/' }); |
||||
|
this.$message.info("欢迎登陆，平台管理员"); |
||||
|
}else{ |
||||
|
this.$router.push({ path: '/' }); |
||||
|
this.$message.info("欢迎登陆"); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
afterAddBranchSubmit(branch){ |
||||
|
this.addBranchFormVisible=false; |
||||
|
this.loading=true |
||||
|
this.$store.dispatch('GetUserInfo').then((res)=>{ |
||||
|
this.userDeptid=res.data.userInfo.deptid |
||||
|
this.loading = false; |
||||
|
//角色身份验证 |
||||
|
this.rolesChecked(); |
||||
|
}); |
||||
|
}, |
||||
|
afterQRScan() { |
||||
|
// const hash = window.location.hash.slice(1) |
||||
|
// const hashObj = getQueryObject(hash) |
||||
|
// const originUrl = window.location.origin |
||||
|
// history.replaceState({}, '', originUrl) |
||||
|
// const codeMap = { |
||||
|
// wechat: 'code', |
||||
|
// tencent: 'code' |
||||
|
// } |
||||
|
// const codeName = hashObj[codeMap[this.auth_type]] |
||||
|
// if (!codeName) { |
||||
|
// alert('第三方登录失败') |
||||
|
// } else { |
||||
|
// this.$store.dispatch('LoginByThirdparty', codeName).then(() => { |
||||
|
// this.$router.push({ path: '/' }) |
||||
|
// }) |
||||
|
// } |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// window.addEventListener('hashchange', this.afterQRScan) |
||||
|
}, |
||||
|
destroyed() { |
||||
|
// window.removeEventListener('hashchange', this.afterQRScan) |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'myBranchs','myDepts','userInfo','roles' |
||||
|
]), |
||||
|
|
||||
|
screenWidth:function(){ |
||||
|
return screen.width; |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import '../index.scss'; |
||||
|
</style> |
||||
@ -0,0 +1,151 @@ |
|||||
|
.login_container { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
background-image: linear-gradient(rgb(28,166,251), rgb(78,90,242)); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.login_content { |
||||
|
width: 1200px; |
||||
|
height: 600px; |
||||
|
background: #FCFCFE; |
||||
|
border-radius: 30px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.left { |
||||
|
flex: 1; |
||||
|
background-image: url('@/assets/image/login_bg.png'); |
||||
|
background-position: -68px -58px; |
||||
|
background-size: 1200px 650px; |
||||
|
background-repeat: no-repeat; |
||||
|
} |
||||
|
.right { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
position: relative; |
||||
|
.logo { |
||||
|
position: absolute; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
top: 6px; |
||||
|
right: 60px; |
||||
|
font-size: 30px; |
||||
|
color: #1D1D1D; |
||||
|
font-weight: bold; |
||||
|
img { |
||||
|
width: 64px; |
||||
|
height: 64px; |
||||
|
} |
||||
|
} |
||||
|
.login_box { |
||||
|
width: 418px; |
||||
|
height: 482px; |
||||
|
border: 1px solid #F1F1F1; |
||||
|
box-shadow: 1px 7px 25px 2px rgba(22, 22, 93, 0.04); |
||||
|
border-radius: 5px 5px 5px 5px; |
||||
|
margin-top: 10px; |
||||
|
.login_box_content { |
||||
|
padding: 28px 30px 16px 30px; |
||||
|
.top { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
h2 { |
||||
|
color: #40485B; |
||||
|
font-size: 35px; |
||||
|
} |
||||
|
span { |
||||
|
margin-top: 10px; |
||||
|
color: #40485B;; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.login_form { |
||||
|
margin-top: 28px; |
||||
|
.inp { |
||||
|
/deep/.el-form-item { |
||||
|
margin-bottom: 0px !important; |
||||
|
} |
||||
|
/deep/.el-input__inner { |
||||
|
height: 44px; |
||||
|
border-radius: 0px; |
||||
|
} |
||||
|
} |
||||
|
.smsCode { |
||||
|
width: 60%; |
||||
|
} |
||||
|
.sendCode { |
||||
|
height: 44px; |
||||
|
width: 125px; |
||||
|
margin-left: 10px; |
||||
|
border-radius: 0px; |
||||
|
background-color: #FE9A00; |
||||
|
.text { |
||||
|
color: #FFFFFF; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
.oper { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
color: #40485B; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.login { |
||||
|
margin-top: 50px; |
||||
|
width: 100%; |
||||
|
background-color: #FE9A00; |
||||
|
height: 42px; |
||||
|
border-radius: 0px; |
||||
|
.text { |
||||
|
color: #FFFFFF; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
.register { |
||||
|
margin-top: 10px; |
||||
|
width: 100%; |
||||
|
background-color: #FE9A00; |
||||
|
height: 42px; |
||||
|
border-radius: 0px; |
||||
|
.text { |
||||
|
color: #FFFFFF; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
margin-top: 30px; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
/deep/.el-divider__text { |
||||
|
color: #BEC0C4; |
||||
|
} |
||||
|
.other { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
cursor: pointer; |
||||
|
img { |
||||
|
width: 28px; |
||||
|
height: 28px; |
||||
|
} |
||||
|
img:nth-child(1) { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,62 @@ |
|||||
|
<template> |
||||
|
<div class="login_container"> |
||||
|
<div class="login_content"> |
||||
|
<div class="left"> |
||||
|
</div> |
||||
|
<div class="right"> |
||||
|
<div class="logo"> |
||||
|
<img src="@/assets/image/logo1.png"> |
||||
|
<span>唛盟</span> |
||||
|
</div> |
||||
|
<div class="login_box"> |
||||
|
<div class="login_box_content"> |
||||
|
<div class="top"> |
||||
|
<h2>平台{{status == 'register' ? '注册' : '登录' }}</h2> |
||||
|
<span v-if="status == 'login'" >没有账号？<a style="color:#409EFF;" @click="status = 'register' ">点此注册</a> </span> |
||||
|
<span v-else>已有账号？<a style="color:#409EFF;" @click="status = 'login' ">点此登录</a> </span> |
||||
|
</div> |
||||
|
<login-form v-if="status == 'login'"></login-form> |
||||
|
<register-form v-else></register-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import loginForm from './components/login'; |
||||
|
import registerForm from './components/register'; |
||||
|
|
||||
|
export default { |
||||
|
name: 'login', |
||||
|
components: {loginForm, registerForm}, |
||||
|
data() { |
||||
|
return { |
||||
|
status: "login", |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
created() { |
||||
|
}, |
||||
|
destroyed() { |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,282 @@ |
|||||
|
.full_continer { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
.banner { |
||||
|
margin-top: 35px; |
||||
|
height: 32px; |
||||
|
text-align: center; |
||||
|
border-bottom: 32px solid; |
||||
|
border-image: -webkit-linear-gradient(-180deg, rgba(255,255,255,0.00) 0%,#D8E0F5 40%, rgba(255,255,255,0.00) 99%) 2 2 2 2; |
||||
|
p { |
||||
|
line-height: 32px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
h2 { |
||||
|
font-size: 24px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #303030; |
||||
|
} |
||||
|
|
||||
|
.flux_continer { |
||||
|
width: 80%; |
||||
|
height: 100%; |
||||
|
margin: 0 auto; |
||||
|
.content { |
||||
|
.top_desc { |
||||
|
h2 { |
||||
|
margin-top: 60px; |
||||
|
} |
||||
|
p { |
||||
|
margin-top: 34px; |
||||
|
color: #7D7D7D; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.version { |
||||
|
margin-top: 38px; |
||||
|
.version_item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.oItem:nth-child(2) { |
||||
|
background-color: #F8F6F4; |
||||
|
} |
||||
|
.oItem { |
||||
|
position: relative; |
||||
|
margin-top: 24px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
width: 172px; |
||||
|
height: 86px; |
||||
|
margin-right: 20px; |
||||
|
border-radius: 5px; |
||||
|
background-color: #F4F5F8; |
||||
|
cursor: pointer; |
||||
|
img { |
||||
|
width: 80px; |
||||
|
height: 80px; |
||||
|
} |
||||
|
.desc { |
||||
|
margin-left: 10px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
p:nth-child(2) { |
||||
|
margin-top: 8px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.select { |
||||
|
position: absolute; |
||||
|
right: 5px; |
||||
|
top: 10px; |
||||
|
color: #409EFF; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sys_type { |
||||
|
margin-top: 52px; |
||||
|
.sys_desc { |
||||
|
display: flex; |
||||
|
height: 46px; |
||||
|
line-height: 46px; |
||||
|
h2 { |
||||
|
margin-right: 44px; |
||||
|
} |
||||
|
span { |
||||
|
margin-right: 60px; |
||||
|
cursor: pointer; |
||||
|
font-size: 18px; |
||||
|
font-weight: bold; |
||||
|
color: #606060; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sys_modules { |
||||
|
margin-top: 30px; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.module { |
||||
|
width: 161px; |
||||
|
height: 189px; |
||||
|
border-radius: 8px; |
||||
|
margin-right: 20px; |
||||
|
border: 2px solid #E3E4E6; |
||||
|
cursor: pointer; |
||||
|
.module_top { |
||||
|
height: 120px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
img { |
||||
|
width: 73px; |
||||
|
height: 73px; |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
span { |
||||
|
margin-top: 20px; |
||||
|
font-size: 14px; |
||||
|
color: #606060; |
||||
|
} |
||||
|
} |
||||
|
.module_bottom { |
||||
|
height: 30px; |
||||
|
text-align: center; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.buy_count { |
||||
|
margin-top: 40px; |
||||
|
h2 { |
||||
|
span { |
||||
|
font-size: 12px; |
||||
|
margin-left: 5px; |
||||
|
color: #C7C7C7; |
||||
|
} |
||||
|
} |
||||
|
.buy_count_items { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
margin-top: 30px; |
||||
|
.oItem { |
||||
|
margin-right: 12px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 204px; |
||||
|
height: 110px; |
||||
|
border: 3px solid rgb(245, 246, 246); |
||||
|
justify-content: center; |
||||
|
border-radius: 6px; |
||||
|
.item_header { |
||||
|
height: 40px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 30px; |
||||
|
color: #606060; |
||||
|
border-bottom: 2px solid rgb(245, 246, 246); |
||||
|
} |
||||
|
.item_bottom { |
||||
|
height: 50px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 60px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.buy_date { |
||||
|
margin-top: 50px; |
||||
|
h2 { |
||||
|
margin-bottom: 30px; |
||||
|
} |
||||
|
.buy_date_items { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
.oItem { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 209px; |
||||
|
height: 157px; |
||||
|
border-radius: 8px; |
||||
|
margin-right: 30px; |
||||
|
border: 2px solid #E3E4E6; |
||||
|
cursor: pointer; |
||||
|
.header { |
||||
|
position: relative; |
||||
|
height: 60px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
line-height: 60px; |
||||
|
color: #424141; |
||||
|
border-bottom: 2px solid #E3E4E6; |
||||
|
.select { |
||||
|
position: absolute; |
||||
|
right: 10px; |
||||
|
top: 10px; |
||||
|
} |
||||
|
} |
||||
|
.bottom { |
||||
|
height: 80px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
img { |
||||
|
width: 113px; |
||||
|
height: 40px; |
||||
|
} |
||||
|
p { |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
.normal { |
||||
|
margin-top: 57px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pay_way { |
||||
|
margin-top: 50px; |
||||
|
h2 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.pay_way_items { |
||||
|
display: flex; |
||||
|
.oItem { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
width: 209px; |
||||
|
height: 70px; |
||||
|
margin-right: 20px; |
||||
|
border: 2px solid #E3E4E6; |
||||
|
border-radius: 8px; |
||||
|
margin-top: 5px; |
||||
|
img { |
||||
|
width: 45px; |
||||
|
height: 37px; |
||||
|
margin: 13px 18px 13px 40px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.phone { |
||||
|
margin-top: 10px !important; |
||||
|
width: 440px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.pay_allAmount { |
||||
|
margin-top: 30px; |
||||
|
h2 { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.allAmount { |
||||
|
font-size: 24px; |
||||
|
font-weight: bold; |
||||
|
color: #FA5A55; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.submit { |
||||
|
margin-top: 35px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,210 @@ |
|||||
|
<template> |
||||
|
<div class="full_continer"> |
||||
|
<div class="banner"> |
||||
|
<p>购买流程: 1.选择模块 》 2.确认订单 》 3.支付 》 4.完成</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flux_continer"> |
||||
|
<div class="content"> |
||||
|
<div class="top_desc"> |
||||
|
<h2>购买订单</h2> |
||||
|
<p>团队名: 擎勤科技</p> |
||||
|
</div> |
||||
|
|
||||
|
<div class="version"> |
||||
|
<h2>选择版本</h2> |
||||
|
<div class="version_item"> |
||||
|
<div class="oItem"> |
||||
|
<img src="@/assets/image/module/mo_enterprise.png" alt=""> |
||||
|
<div class="desc"> |
||||
|
<p>企业版</p> |
||||
|
<p>(10人起购)</p> |
||||
|
</div> |
||||
|
<i class="select el-icon-success"></i> |
||||
|
</div> |
||||
|
<div class="oItem"> |
||||
|
<img src="@/assets/image/module/mo_flagship.png" alt=""> |
||||
|
<div class="desc"> |
||||
|
<p>旗舰版</p> |
||||
|
<p>(50人起购)</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="sys_type"> |
||||
|
<div class="sys_desc"> |
||||
|
<h2>选择产品</h2> |
||||
|
<span>项目管理系统</span> |
||||
|
<span>协同办公系统</span> |
||||
|
<span>电商定制系统</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="sys_modules"> |
||||
|
<div class="module"> |
||||
|
<div class="module_top"> |
||||
|
<img :src="xmgl" alt=""> |
||||
|
<span>督办管理</span> |
||||
|
</div> |
||||
|
<div class="module_bottom"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="module"> |
||||
|
<div class="module_top"> |
||||
|
<img :src="xmgl" alt=""> |
||||
|
<span>资产管理</span> |
||||
|
</div> |
||||
|
<div class="module_bottom"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="module"> |
||||
|
<div class="module_top"> |
||||
|
<img :src="csgl" alt=""> |
||||
|
<span>会议管理</span> |
||||
|
</div> |
||||
|
<div class="module_bottom"> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="module"> |
||||
|
<div class="module_top"> |
||||
|
<img :src="csgl" alt=""> |
||||
|
<span>会议管理</span> |
||||
|
</div> |
||||
|
<div class="module_bottom"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buy_count"> |
||||
|
<h2> |
||||
|
购买数量 |
||||
|
<span>(购买账号不能少于10人)</span> |
||||
|
</h2> |
||||
|
|
||||
|
<div class="buy_count_items"> |
||||
|
<div class="oItem"> |
||||
|
<div class="item_header"> |
||||
|
<p>项目管理系统</p> |
||||
|
</div> |
||||
|
<div class="item_bottom"> |
||||
|
<span>10</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="oItem"> |
||||
|
<div class="item_header"> |
||||
|
<p>智慧协同办公系统</p> |
||||
|
</div> |
||||
|
<div class="item_bottom"> |
||||
|
<span>10</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="buy_date"> |
||||
|
<h2>期限选择</h2> |
||||
|
<div class="buy_date_items"> |
||||
|
<div class="oItem"> |
||||
|
<div class="header"> |
||||
|
1年 |
||||
|
<i class="select el-icon-success"></i> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<img src="@/assets/image/module/hot.png" alt=""> |
||||
|
<p>￥138.33/人月</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="oItem"> |
||||
|
<div class="header"> |
||||
|
6个月 |
||||
|
<i></i> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<p class="normal">￥138.33/人月</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="oItem"> |
||||
|
<div class="header"> |
||||
|
3个月 |
||||
|
<i></i> |
||||
|
</div> |
||||
|
<div class="bottom"> |
||||
|
<p class="normal">￥138.33/人月</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="pay_way"> |
||||
|
<h2>支付方式</h2> |
||||
|
<div class="pay_way_items"> |
||||
|
<div class="oItem"> |
||||
|
<img src="@/assets/image/module/alipay.png" alt=""> |
||||
|
<span>支付宝</span> |
||||
|
<i></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="oItem"> |
||||
|
<img src="@/assets/image/module/weixin.png" alt=""> |
||||
|
<span>微信</span> |
||||
|
<i></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-input class="phone" placeholder="输入手机号"></el-input> |
||||
|
</div> |
||||
|
|
||||
|
<div class="pay_allAmount"> |
||||
|
<h2>订单总额</h2> |
||||
|
<p class="allAmount">￥<b>299</b>.00/年</p> |
||||
|
<el-checkbox v-model="checked">同意<a>《服务协议》</a></el-checkbox> |
||||
|
</div> |
||||
|
|
||||
|
<el-button size="larget" class="submit" type="primary">提交订单</el-button> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import xmgl from '@/assets/image/module/xm/xm_project management.png' |
||||
|
import csgl from '@/assets/image/module/xm/xm_test.png' |
||||
|
import cpgh from '@/assets/image/module/xm/xm_product management.png' |
||||
|
import xngl from '@/assets/image/module/xm/xm_Efficiency management.png' |
||||
|
import lsx from '@/assets/image/module/xm/xm_flow line.png' |
||||
|
import zzjg from '@/assets/image/module/xm/mo_org.png' |
||||
|
import zb from '@/assets/image/module/xm/xm_crowd-sourcing.png' |
||||
|
import kfpt from '@/assets/image/module/xm/xm_development.png' |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
xmgl: xmgl, |
||||
|
csgl: csgl, |
||||
|
cpgh: cpgh, |
||||
|
xngl: xngl, |
||||
|
lsx: lsx, |
||||
|
zzjg: zzjg, |
||||
|
zb: zb, |
||||
|
kfpt: kfpt, |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import './index.scss'; |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue