end7less
/
program_xm_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge remote-tracking branch 'origin/master'

master
陈裕财 4 years ago
parent
12e260c47b c17073104b
commit
92aa09ba5d
9 changed files with 1399 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/router/index.js
  2. 30
      src/router/routes_order.js
  3. 383
      src/views/login/components/login.vue
  4. 276
      src/views/login/components/register.vue
  5. 151
      src/views/login/index.scss
  6. 3
      src/views/login/index.vue
  7. 62
      src/views/login/index2.vue
  8. 282
      src/views/order/index.scss
  9. 210
      src/views/order/index.vue

6
src/router/index.js
View File

@ -15,7 +15,7 @@ import routesDatavXm from './routes_datav_xm'
import routesArc from './routes_arc'
import routesIm from './routes_im'
import routesMyWork from './routes_my_work'
import routesOrder from './routes_order'
export { Layout }
@ -38,7 +38,7 @@ export { Layout }
}
**/
export const constantRouterMap = [
{ path: '/login', component: _import('login/index'), hidden: true },
{ path: '/login', component: _import('login/index2'), hidden: true },
{ path: '/404', component: _import('errorPage/404'), hidden: true },
{ path: '/401', component: _import('errorPage/401'), hidden: true },
{
@ -81,4 +81,6 @@ allRoutes=allRoutes.concat(routesDatavXm.routes);
allRoutes=allRoutes.concat(routesWorkflow.routes).concat(routesForm.routes)
allRoutes=allRoutes.concat(routesArc.routes);
allRoutes=allRoutes.concat(routesIm.routes);
allRoutes=allRoutes.concat(routesOrder.routes);
export const asyncRouterMap = allRoutes

30
src/router/routes_order.js
View File

@ -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'
}
}
]
},
]
}

383
src/views/login/components/login.vue
View File

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

276
src/views/login/components/register.vue
View File

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

151
src/views/login/index.scss
View File

@ -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;
}
}
}
}
}
}

3
src/views/login/index.vue
View File

@ -1,7 +1,6 @@
<template>
<div class="login-container">
<el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
<div class="title-container">
<div class="logo">
<img src="../../assets/image/logo1.png" alt="" />
@ -129,7 +128,7 @@ import { mapGetters } from 'vuex';
import md5 from 'js-md5';
export default {
components: { LangSelect, SocialSign, BranchAdd,Register,ResetPassword},
components: { LangSelect, SocialSign, BranchAdd, Register,ResetPassword},
name: 'login',
data() {
const validateDisplayUserid = (rule, value, callback) => {

62
src/views/login/index2.vue
View File

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

282
src/views/order/index.scss
View File

@ -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;
}
}
}

210
src/views/order/index.vue
View File

@ -0,0 +1,210 @@
<template>
<div class="full_continer">
<div class="banner">
<p>购买流程:&nbsp;&nbsp;&nbsp;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