Skip to content

O
offical_web
Commit 49a63db6 by Administrator
Options

Merge branch 'hxh' into 'dev' 

Hxh

See merge request !13
parents 93a266c5 201573a4
Showing with 421 additions and 134 deletions
package-lock.json
...@@ -2269,87 +2269,6 @@ ...@@ -2269,87 +2269,6 @@
"webpack-chain": "^6.4.0", "webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
} }
}, },
"@vue/cli-shared-utils": { "@vue/cli-shared-utils": {
...@@ -13264,6 +13183,87 @@ ...@@ -13264,6 +13183,87 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-navigation": { "vue-navigation": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz", "resolved": "https://registry.npmjs.org/vue-navigation/-/vue-navigation-1.1.4.tgz",
......
src/components/head.vue
<template> <template>
<header class="header" :class="{ 'no-shadow': !shadow }"> <header class="header" :class="{ 'no-shadow': !shadow }">
<headerNavMobile v-if="$isMobile" :nav="navbar"></headerNavMobile> <headerNavMobile v-if="$isMobile" :nav="navbar" :userInfo="userInfo"></headerNavMobile>
<div class="container" v-else> <div class="container" v-else>
<div class="logo"> <div class="logo">
<span class="logo_text"> <span class="logo_text">
...@@ -15,27 +15,26 @@ ...@@ -15,27 +15,26 @@
v-for="item in navbar" v-for="item in navbar"
@click="changePath" @click="changePath"
:key="item.path"> :key="item.path">
<router-link :to="item.path">{{ item.name }}</router-link> <a :href="item.path">{{ item.name }}</a>
</li> </li>
</ul> </ul>
</nav> </nav>
<!-- <div class="user-info" v-if="userInfo">
<div class="user-msg">
<span class="user-name">{{ '小溪' }}</span>
<span>欢迎您</span>
</div>
<div class="logout" title="退出登录" @click="logout">
<img src="../assets/images/logout.png"/>
</div>
</div> -->
<div class="right_btn"> <div class="right_btn">
<!-- <el-button type="primary" size="mini" @click="login">登录</el-button> <!-- <el-button type="primary" size="mini" @click="login">登录</el-button>
<el-button size="mini" @click="register">注册</el-button> --> <el-button size="mini" @click="register">注册</el-button> -->
<div class="user-operate"> <div class="user-operate" v-if="!userInfo">
<span class="login-btn" @click="login">登录</span> <span class="login-btn" @click="login">登录</span>
<span class="reg-btn" @click="register">注册</span> <span class="reg-btn" @click="register">注册</span>
</div> </div>
<div class="user-info" v-else>
<div class="user-msg">
<span class="user-name">{{ userInfo.companyName }}</span>
<span>欢迎您</span>
</div>
<div class="logout" title="退出登录" @click="logout">
<img src="../assets/images/logout.png" />
</div>
</div>
<el-button type="primary" @click="freeTrial">免费试用</el-button> <el-button type="primary" @click="freeTrial">免费试用</el-button>
</div> </div>
</div> </div>
...@@ -43,7 +42,7 @@ ...@@ -43,7 +42,7 @@
</template> </template>
<script> <script>
import { mapMutations, mapState } from 'vuex' import { mapMutations } from 'vuex'
import headerNavMobile from './headerNavMobile.vue' import headerNavMobile from './headerNavMobile.vue'
export default { export default {
...@@ -61,21 +60,31 @@ export default { ...@@ -61,21 +60,31 @@ export default {
navbar: [ navbar: [
{ name: '首页', path: '/home' }, { name: '首页', path: '/home' },
{ name: '核心功能', path: '/function' }, { name: '核心功能', path: '/function' },
{ name: '价格', path: '/price' }, // { name: '价格', path: '/price' },
{ name: '需求痛点', path: '/demand_pain_point' }, { name: '需求痛点', path: '/demand_pain_point' },
{ name: '关于我们', path: '/about_us' }, { name: '关于我们', path: '/about_us' },
{ name: '帮助', path: '/help'}, { name: '一键定制', path: 'https://jomalls.com/custom/' },
{ name: '帮助', path: '/help' },
], ],
userInfo:JSON.parse(localStorage.getItem('userInfo'))
} }
}, },
computed: { computed: {
...mapState(['userInfo']), // ...mapState(['shopifyObj']),
active() { active() {
return this.$route.path return this.$route.path
}, },
}, },
mounted() {
if(this.$route.query.shopKey){
localStorage.setItem('shopifyObj', JSON.stringify(this.$route.query))
}
if(this.userInfo && this.$route.query.shopKey){
this.$router.push('/contact')
}
},
methods: { methods: {
...mapMutations(['setUserInfo']), ...mapMutations(['setUserInfo','setShopKey']),
changePath() { changePath() {
this.scrollParent().scrollTo({ this.scrollParent().scrollTo({
behavior: 'smooth', behavior: 'smooth',
...@@ -83,6 +92,9 @@ export default { ...@@ -83,6 +92,9 @@ export default {
}) })
}, },
login() { login() {
if(this.$route.query&&this.$route.query.shopKey){
this.setShopKey(this.$route.query.shopKey)
}
this.$router.push('/login') this.$router.push('/login')
}, },
register() { register() {
...@@ -108,6 +120,19 @@ export default { ...@@ -108,6 +120,19 @@ export default {
right: 0; right: 0;
left: 0; left: 0;
} }
.user-name {
margin-right: 10px;
}
.user-msg {
color: #fff;
}
.logout {
margin-right: 30px;
}
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.header { .header {
position: sticky; position: sticky;
...@@ -156,10 +181,6 @@ export default { ...@@ -156,10 +181,6 @@ export default {
margin-right: 50px; margin-right: 50px;
} }
.user-name {
margin-right: 10px;
}
.logout img { .logout img {
width: 20px; width: 20px;
vertical-align: middle; vertical-align: middle;
......
src/components/headerNavMobile.vue
...@@ -6,11 +6,21 @@ ...@@ -6,11 +6,21 @@
<div class="header-nav-mobile_logo"> <div class="header-nav-mobile_logo">
<img src="../assets/logo.png" height="40px" /> <img src="../assets/logo.png" height="40px" />
</div> </div>
<div class="header-nav-mobile_login"> <div class="header-nav-mobile_login" v-if="!userInfo">
<span @click="login">登录</span> <span @click="login">登录</span>
<span style="margin: 0 5px">|</span> <span style="margin: 0 5px">|</span>
<span @click="register">注册</span> <span @click="register">注册</span>
</div> </div>
<div class="header-nav-mobile_user" v-else>
<span class="user-name">{{ userInfo.companyName }}</span>
<span style="margin: 0 10px">欢迎您</span>
<span style="margin: 0 5px">|</span>
<span style="margin-left: 10px;cursor: pointer;" @click="logout">
<img
style="width: 16px; height: 16px; vertical-align: middle"
src="../assets/images/logout.png" />
</span>
</div>
<transition name="header-nav-mobile"> <transition name="header-nav-mobile">
<div <div
v-show="showing" v-show="showing"
...@@ -35,6 +45,7 @@ ...@@ -35,6 +45,7 @@
</div> </div>
</template> </template>
<script> <script>
import { mapMutations } from 'vuex'
export default { export default {
name: 'headerNavMobile', name: 'headerNavMobile',
data() { data() {
...@@ -46,8 +57,14 @@ export default { ...@@ -46,8 +57,14 @@ export default {
nav: { nav: {
type: Array, type: Array,
}, },
userInfo: {
type: Object,
},
},
computed: {
}, },
methods: { methods: {
...mapMutations(['setUserInfo']),
toggleShow() { toggleShow() {
this.showing = !this.showing this.showing = !this.showing
}, },
...@@ -61,6 +78,11 @@ export default { ...@@ -61,6 +78,11 @@ export default {
register() { register() {
this.$router.push('/register') this.$router.push('/register')
}, },
logout() {
localStorage.removeItem('userInfo')
this.setUserInfo(undefined)
this.$router.push('/login')
},
}, },
} }
</script> </script>
...@@ -94,6 +116,14 @@ export default { ...@@ -94,6 +116,14 @@ export default {
justify-content: flex-end; justify-content: flex-end;
} }
.header-nav-mobile_user {
flex: 1;
display: flex;
font-size: 12px;
margin-right: 10px;
justify-content: flex-end;
}
.header-nav-mobile_trigger { .header-nav-mobile_trigger {
flex: 1; flex: 1;
} }
......
src/plugins/element.js
...@@ -57,6 +57,7 @@ import { ...@@ -57,6 +57,7 @@ import {
CascaderPanel, CascaderPanel,
Tag, Tag,
Scrollbar, Scrollbar,
RadioButton,
} from 'element-ui' } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'mini' } Vue.prototype.$ELEMENT = { size: 'mini' }
...@@ -91,7 +92,7 @@ Vue.use(Container) ...@@ -91,7 +92,7 @@ Vue.use(Container)
Vue.use(ButtonGroup) Vue.use(ButtonGroup)
Vue.use(Tag) Vue.use(Tag)
Vue.use(Scrollbar) Vue.use(Scrollbar)
Vue.use(RadioButton)
Vue.use(Cascader) Vue.use(Cascader)
Vue.prototype.$alert = MessageBox.alert Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$message = (message) => Vue.prototype.$message = (message) =>
......
src/router/index.js
...@@ -70,10 +70,15 @@ const routes = [ ...@@ -70,10 +70,15 @@ const routes = [
component: (resolve) => require(['../views/authorization-failed'], resolve), component: (resolve) => require(['../views/authorization-failed'], resolve),
}, },
{ {
path: '/protocol', path: '/protocol/:type',
name: 'protocol', name: 'protocol',
component: (resolve) => require(['../views/protocol'], resolve), component: (resolve) => require(['../views/protocol'], resolve),
}, },
{
path: '/message',
name: 'message',
component: (resolve) => require(['../views/message'], resolve),
}
] ]
const router = new VueRouter({ const router = new VueRouter({
......
src/store/index.js
...@@ -7,10 +7,14 @@ export default new Vuex.Store({ ...@@ -7,10 +7,14 @@ export default new Vuex.Store({
}, },
state: { state: {
userInfo: JSON.parse(JSON.stringify(localStorage.getItem('userInfo'))) || undefined, userInfo: JSON.parse(JSON.stringify(localStorage.getItem('userInfo'))) || undefined,
shopifyObj:{}
}, },
mutations: { mutations: {
setUserInfo(state, profile) { setUserInfo(state, profile) {
state.userInfo = profile state.userInfo = profile
},
setShopKey(state,data){
state.shopifyObj = data
} }
}, },
actions: { actions: {
......
src/views/contact.vue
...@@ -2,49 +2,69 @@ ...@@ -2,49 +2,69 @@
<div class="login_bg"> <div class="login_bg">
<div class="contact-header"> <div class="contact-header">
<div class="header-image"> <div class="header-image">
<img src="../assets/logo.png" height="40px"/> <img src="../assets/logo.png" height="40px" />
</div> </div>
<!-- <div class="user-info"> <div class="user-info">
<div class="user-msg"> <!-- <div class="user-msg">
<span class="user-name">{{ '小溪' }}</span> <span class="user-name">{{ '小溪' }}</span>
<span>欢迎您</span> <span>欢迎您</span>
</div> </div> -->
<div class="logout" title="退出登录" @click="logout"> <div class="logout" title="退出登录" @click="logout">
<img src="../assets/images/logout.png" /> <img src="../assets/images/logout.png" />
</div> </div>
</div> --> </div>
</div> </div>
<div class="login_content"> <div class="login_content">
<div class="no-authority"> <div class="no-authority">
<div <div
style=" style="
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 50px; font-size: 50px;
line-height: 100px; line-height: 100px;
font-family: '微软雅黑'; font-family: '微软雅黑';
" v-if="userInfo.erpKey"> "
<a :href="userInfo.erpKey+'.jomalls.com'" target="_blank" style="text-decoration: none"> {{userInfo.erpKey+'.jomalls.com'}}</a> v-if="userInfo && userInfo.erpKey">
<a
:href="`https://${userInfo && userInfo.erpKey}.jomalls.com`"
target="_blank"
style="text-decoration: none">
{{ `https://${userInfo && userInfo.erpKey}.jomalls.com` }}
</a>
</div> </div>
<h1 <h1
style=" style="
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 50px; font-size: 50px;
line-height: 100px; line-height: 100px;
font-family: '微软雅黑'; font-family: '微软雅黑';
" v-else> "
v-else>
您尚未开通erp权限,请联系您的商务经理 您尚未开通erp权限,请联系您的商务经理
</h1> </h1>
<h2 style=" <h2
style="
text-align: center; text-align: center;
color: #fff; color: #fff;
font-size: 36px; font-size: 36px;
line-height: 100px; line-height: 100px;
font-family: '微软雅黑'; font-family: '微软雅黑';
">联系电话:15399065167</h2> ">
联系电话:18710915638
</h2>
<h2
style="
text-align: center;
color: #fff;
font-size: 36px;
line-height: 50px;
font-family: '微软雅黑';
">
邮箱:nina@jomalls.com
</h2>
<el-button <el-button
style=" style="
text-align: center; text-align: center;
font-size: 30px; font-size: 30px;
width: 160px; width: 160px;
...@@ -53,8 +73,8 @@ ...@@ -53,8 +73,8 @@
margin-top: 30px; margin-top: 30px;
border-radius: 15px; border-radius: 15px;
" "
type="success" type="success"
@click="goBack"> @click="goBack">
返回首页 返回首页
</el-button> </el-button>
</div> </div>
...@@ -64,27 +84,48 @@ ...@@ -64,27 +84,48 @@
</template> </template>
<script> <script>
import {mapState} from 'vuex' import { mapMutations, mapState } from 'vuex'
import { post } from '../utils/axios'
export default { export default {
name: 'contact', name: 'contact',
components: {}, components: {},
data() { data() {
return {} return {
userInfo: JSON.parse(localStorage.getItem('userInfo')),
shopifyObj: JSON.parse(localStorage.getItem('shopifyObj'))
}
}, },
computed: { computed: {
...mapState(['userInfo']), ...mapState(['shopifyObj']),
}, },
mounted() { mounted() {
console.log(this.userInfo,123) console.log(this.shopifyObj);
if (this.userInfo && this.shopifyObj) {
this.getShopifyInfo()
}
}, },
methods: { methods: {
...mapMutations(['setUserInfo']),
goBack() { goBack() {
this.$router.push('/') this.$router.push('/')
}, },
getShopifyInfo() {
console.log(this.shopifyObj)
if (!this.shopifyObj.shopKey || !this.userInfo.erpKey) return
post('business/shop/bind', {
shopKey: this.shopifyObj.shopKey,
platform: this.shopifyObj.platform,
companyCode: this.userInfo.erpKey,
}).then((res) => {
console.log(res)
})
},
logout() { logout() {
localStorage.removeItem('userInfo')
this.setUserInfo(undefined)
this.$router.push('/login')
}, },
}, },
} }
</script> </script>
......
src/views/message.vue 0 → 100644
<template>
<div class="message">
<div>
<h1 class="code" v-if="code === '200'" style="color: green;font-weight: bold;"><span>{{ msg }}</span></h1>
<h1 class="code" v-if="code === '500'" style="color: red;font-weight: bold;"><span>{{ msg }}</span></h1>
</div>
</div>
</template>
<script>
export default {
name: 'message',
data() {
return {
code: '',
msg: '',
}
},
mounted() {
const { code, msg } = this.$route.query
if (code) {
this.code = code
}
if (msg) {
this.msg = msg
}
},
}
</script>
<style scoped>
.message {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
</style>
src/views/price/pricePage.vue
...@@ -67,6 +67,10 @@ export default { ...@@ -67,6 +67,10 @@ export default {
valueClass: 'fs-20 fw-b', valueClass: 'fs-20 fw-b',
}, },
{ {
label: '适用范围',
value: 'radius'
},
{
label: '收费方式', label: '收费方式',
value: (d) => { value: (d) => {
d = d.chargeType d = d.chargeType
...@@ -111,12 +115,34 @@ export default { ...@@ -111,12 +115,34 @@ export default {
prices: [ prices: [
{ {
name: 'shopify版',
chargeType: '一次性收费',
price: '10$',
radius: 'shopify',
accountsCount: '不限',
deploymentType: 'SaaS',
rechargeAmount: '0',//充值金额
featureCustomization: false, // 功能定制
permissionManage: true, // 权限管理
financialManage: true, // 财务管理
statisticalReport: true, // 统计报表
orderManage: true, // 订单管理
logisticsManage: true, // 物流管理
orderStorage: '180天', // 订单数据存储
logsRetainDays: '90天', // 操作日志查看天数
shopCount: 50, // 店铺数量
imageStorage: '4G', // 图片空间
trainingType: '线上培训', // 培训方式
exclusivePM: true, // 专属产品经理
},
{
name: '试用版', name: '试用版',
chargeType: ['免费3个月', '或3000单'], // 收费方式 chargeType: ['免费3个月', '或3000单'], // 收费方式
price: 0, // 价格 price: 0, // 价格
radius: 'other',
accountsCount: 10, // 账号数量 accountsCount: 10, // 账号数量
rechargeAmount: '赠送', // 充值金额 rechargeAmount: '0', // 充值金额
deploymentType: 'SaaS', // 部署方式 deploymentType: 'SaaS', // 部署方式
featureCustomization: false, // 功能定制 featureCustomization: false, // 功能定制
permissionManage: true, // 权限管理 permissionManage: true, // 权限管理
...@@ -136,6 +162,7 @@ export default { ...@@ -136,6 +162,7 @@ export default {
chargeType: '按单收费', // 收费方式 chargeType: '按单收费', // 收费方式
price: '0.2元/单', // 价格 price: '0.2元/单', // 价格
radius: 'other',
accountsCount: 100, // 账号数量 accountsCount: 100, // 账号数量
rechargeAmount: '首充10000元', // 充值金额 rechargeAmount: '首充10000元', // 充值金额
deploymentType: 'SaaS', // 部署方式 deploymentType: 'SaaS', // 部署方式
...@@ -158,6 +185,7 @@ export default { ...@@ -158,6 +185,7 @@ export default {
chargeType: '按单收费', // 收费方式 chargeType: '按单收费', // 收费方式
price: '0.16元/单', // 价格 price: '0.16元/单', // 价格
radius: 'other',
accountsCount: '不限', // 账号数量 accountsCount: '不限', // 账号数量
rechargeAmount: '首充30000元', // 充值金额 rechargeAmount: '首充30000元', // 充值金额
deploymentType: 'SaaS', // 部署方式 deploymentType: 'SaaS', // 部署方式
...@@ -180,6 +208,7 @@ export default { ...@@ -180,6 +208,7 @@ export default {
chargeType: '按月收费', // 收费方式 chargeType: '按月收费', // 收费方式
price: 9800, // 价格 price: 9800, // 价格
radius: 'other',
accountsCount: '不限', // 账号数量 accountsCount: '不限', // 账号数量
rechargeAmount: '季付', // 充值金额 rechargeAmount: '季付', // 充值金额
deploymentType: 'SaaS', // 部署方式 deploymentType: 'SaaS', // 部署方式
...@@ -202,6 +231,7 @@ export default { ...@@ -202,6 +231,7 @@ export default {
chargeType: '按月收费', // 收费方式 chargeType: '按月收费', // 收费方式
price: 29800, // 价格 price: 29800, // 价格
radius: 'other',
accountsCount: '不限', // 账号数量 accountsCount: '不限', // 账号数量
rechargeAmount: '季付', // 充值金额 rechargeAmount: '季付', // 充值金额
deploymentType: 'SaaS或阿里云独立部署', // 部署方式 deploymentType: 'SaaS或阿里云独立部署', // 部署方式
......
src/views/register.vue
...@@ -13,25 +13,29 @@ ...@@ -13,25 +13,29 @@
<h2 style="text-align: center; font-weight: 400; color: #4a4c6d"> <h2 style="text-align: center; font-weight: 400; color: #4a4c6d">
用户注册 用户注册
</h2> </h2>
<el-radio-group v-model="labelPosition" class="radioGroup" size="small" @change="clickChange">
<el-radio-button label="mailbox">邮箱注册</el-radio-button>
<el-radio-button label="phone">手机号注册</el-radio-button>
</el-radio-group>
<el-form <el-form
size="medium" size="medium"
:model="registerForm" :model="registerForm"
:rules="rules" :rules="rules"
ref="registerForm" ref="registerForm"
class="login_form"> class="login_form">
<el-form-item prop="email" label=""> <el-form-item v-if="labelPosition==='mailbox'" prop="email" label="">
<el-input <el-input
v-model="registerForm.email" v-model="registerForm.email"
prefix-icon="el-icon-postcard" prefix-icon="el-icon-postcard"
placeholder="请输入邮箱"></el-input> placeholder="请输入邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="code" label=""> <el-form-item v-if="labelPosition==='mailbox'" prop="code" label="">
<div style="display: flex; gap: 20px"> <div style="display: flex; gap: 20px">
<div style="flex: 1"> <div style="flex: 1">
<el-input <el-input
v-model="registerForm.code" v-model="registerForm.code"
prefix-icon="el-icon-message" prefix-icon="el-icon-message"
placeholder="请输入验证码"></el-input> placeholder="请输入邮箱验证码"></el-input>
</div> </div>
<div> <div>
<el-button <el-button
...@@ -47,6 +51,51 @@ ...@@ -47,6 +51,51 @@
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item v-if="labelPosition==='phone'" prop="phone" label="">
<el-input
v-model="registerForm.phone"
prefix-icon="el-icon-phone"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item v-if="labelPosition==='phone'" prop="verifyKey" label="">
<div style="display: flex; gap: 20px; margin-bottom: -10px;">
<div style="flex: 1">
<el-input
v-model="registerForm.verifyKey"
prefix-icon="el-icon-postcard"
placeholder="请输入验证码,区分大小写">
</el-input>
</div>
<div @click="getVerifycode">
<img
style="width: 100px; height: 80%"
:src="VerifyUrl">
</img>
</div>
</div>
</el-form-item>
<el-form-item v-if="labelPosition==='phone'" prop="code" label="">
<div style="display: flex; gap: 20px">
<div style="flex: 1">
<el-input
v-model="registerForm.code"
prefix-icon="el-icon-message"
placeholder="请输入短信验证码"></el-input>
</div>
<div>
<el-button
class="get-code-button"
style="width: 112px"
:disabled="getCodeDisabled"
:class="getCodeDisabled ? 'disabled' : 'code-btn'"
@click="verPhonecode">
{{
codeCountDown === 0 ? '获取验证码' : `${codeCountDown}秒`
}}
</el-button>
</div>
</div>
</el-form-item>
<el-form-item prop="password" label=""> <el-form-item prop="password" label="">
<el-input <el-input
type="password" type="password"
...@@ -80,8 +129,12 @@ ...@@ -80,8 +129,12 @@
<el-checkbox v-model="isRead" label="" :indeterminate="false" /> <el-checkbox v-model="isRead" label="" :indeterminate="false" />
<span class="tos-link"> <span class="tos-link">
阅读并同意 阅读并同意
<a class="link" href="/protocol" target="_blank"> <a class="link" href="/protocol/term" target="_blank">
九猫ERP条款与协议 《九猫ERP条款与协议》
</a>
<span>和</span>
<a class="link" href="/protocol/privacy" target="_blank">
《隐私协议》
</a> </a>
</span> </span>
</div> </div>
...@@ -102,6 +155,7 @@ ...@@ -102,6 +155,7 @@
<script> <script>
import { get, post } from '../utils/axios' import { get, post } from '../utils/axios'
import md5 from 'js-md5' import md5 from 'js-md5'
import {mapState} from "vuex";
export default { export default {
name: 'register', name: 'register',
components: {}, components: {},
...@@ -116,6 +170,9 @@ export default { ...@@ -116,6 +170,9 @@ export default {
} }
} }
return { return {
VerifyUrl:'',
verifyKeyTime:'',
labelPosition: 'mailbox',
registerForm: {}, registerForm: {},
isRead: false, isRead: false,
agreeAnimate: false, agreeAnimate: false,
...@@ -129,7 +186,16 @@ export default { ...@@ -129,7 +186,16 @@ export default {
trigger: ['blur', 'change'], trigger: ['blur', 'change'],
}, },
], ],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{
pattern: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
message: "请输入正确手机号码",
trigger: ['blur', 'change'],
}
],
code: [{ required: true, message: '请输入验证码', trigger: 'blur' }], code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
verifyKey: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
checkPass: [ checkPass: [
{ required: true, message: '请再次输入密码', trigger: 'blur' }, { required: true, message: '请再次输入密码', trigger: 'blur' },
...@@ -148,6 +214,9 @@ export default { ...@@ -148,6 +214,9 @@ export default {
return this.codeCountDown > 0 return this.codeCountDown > 0
}, },
}, },
mounted(){
this.getVerifycode()
},
methods: { methods: {
async verCode() { async verCode() {
try { try {
...@@ -161,7 +230,35 @@ export default { ...@@ -161,7 +230,35 @@ export default {
} }
try { try {
const res = await get('business/user/emailcode', { const res = await get('business/user/emailcode', {
email: this.registerForm.email, email: this.registerForm.email
})
this.codeCountDown = 60
this.timer = setInterval(() => {
this.codeCountDown--
if (this.codeCountDown <= 0) {
clearInterval(this.timer)
}
}, 1000)
this.$message.success(res.message)
} catch (e) {
console.error(e)
}
},
async verPhonecode(){
try {
await new Promise((resolve, reject) => {
this.$refs.registerForm.validateField('phone', (m) => {
m ? reject() : resolve()
})
})
} catch {
return
}
try {
const res = await post('business/user/phonecode', {
account: this.registerForm.phone,
verifyKey: this.verifyKeyTime,
verifyCode: this.registerForm.verifyKey
}) })
this.codeCountDown = 60 this.codeCountDown = 60
this.timer = setInterval(() => { this.timer = setInterval(() => {
...@@ -172,6 +269,7 @@ export default { ...@@ -172,6 +269,7 @@ export default {
}, 1000) }, 1000)
this.$message.success(res.message) this.$message.success(res.message)
} catch (e) { } catch (e) {
this.getVerifycode()
console.error(e) console.error(e)
} }
}, },
...@@ -185,7 +283,7 @@ export default { ...@@ -185,7 +283,7 @@ export default {
}, 700) }, 700)
return return
} }
const { code, companyName, email, job, password } = this.registerForm const { code, companyName, email, job, password, phone, verifyKey } = this.registerForm
const hash = md5.create() const hash = md5.create()
hash.update(password) hash.update(password)
...@@ -196,6 +294,7 @@ export default { ...@@ -196,6 +294,7 @@ export default {
email: email, email: email,
job: job, job: job,
password: passwordHash, password: passwordHash,
account: email ? email : phone
}).then((res) => { }).then((res) => {
this.$message.success(res.message) this.$message.success(res.message)
if (res.code === 200) { if (res.code === 200) {
...@@ -206,6 +305,19 @@ export default { ...@@ -206,6 +305,19 @@ export default {
} }
}) })
}, },
getVerifycode(){
this.verifyKeyTime = new Date().getTime();
get('business/user/verifycode',{
verifyKey: this.verifyKeyTime
}).then((res)=>{
if(res.code === 200){
this.VerifyUrl = res.message
}
})
},
clickChange(lab){
this.registerForm = {}
}
}, },
} }
</script> </script>
...@@ -308,6 +420,12 @@ export default { ...@@ -308,6 +420,12 @@ export default {
top: 7%; top: 7%;
left: 8%; left: 8%;
} }
.radioGroup{
display: flex;
justify-content: center;
align-items: center;
margin-top: 10px;
}
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.login_bg { .login_bg {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment