Commit 993c8aaf authored by 黄奎's avatar 黄奎

新增页面

parent 4d9cc018
<style> <style>
.q-ml-lg .block{ .q-ml-lg .block {
margin-right:12px; margin-right: 12px;
} }
</style> </style>
<template> <template>
<q-header <q-header reveal elevated :style="{background:baseData.nav.bg,color:baseData.nav.color}" height-hint="98" to="/index">
reveal
elevated
:style="{background:baseData.nav.bg,color:baseData.nav.color}"
height-hint="98"
to="/index"
>
<q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg"> <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
<img :src="baseData.logo" style="height:45px; cursor:pointer;" class="q-mr-lg" @click="CommonJump('/index',{})" /> <img :src="baseData.logo" style="height:45px; cursor:pointer;" class="q-mr-lg" @click="CommonJump('/index',{})" />
<q-tabs align="center" style="margin:0 auto;" shrink v-if="!$q.screen.xs"> <q-tabs align="center" style="margin:0 auto;" shrink v-if="!$q.screen.xs">
<template v-for="(x, i) in baseData.nav.navs"> <template v-for="(x, i) in baseData.nav.navs">
<q-btn :key="i" stretch flat :label="x.title" @click="OpenNewUrl(x.url)" /> <q-btn :key="i" stretch flat :label="x.title"
type="a" :href="x.url" target="_blank" :no-wrap="true"
/>
<!-- <q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" exact /> <!-- <q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" exact />
<q-route-tab :key="i" :to="x.url" :label="x.title" v-else exact /> --> <q-route-tab :key="i" :to="x.url" :label="x.title" v-else exact /> -->
</template> </template>
</q-tabs> </q-tabs>
<q-btn <q-btn flat dense round icon="menu" aria-label="Menu" v-if="$q.screen.xs" style="margin-left:auto;">
flat
dense
round
icon="menu"
aria-label="Menu"
v-if="$q.screen.xs"
style="margin-left:auto;"
>
<q-menu> <q-menu>
<q-tabs align="left" vertical shrink> <q-tabs align="left" vertical shrink>
<template v-for="(x, i) in baseData.nav.navs"> <template v-for="(x, i) in baseData.nav.navs">
...@@ -39,27 +28,66 @@ ...@@ -39,27 +28,66 @@
</q-tabs> </q-tabs>
</q-menu> </q-menu>
</q-btn> </q-btn>
<q-btn <template v-if="LoginUser.accountId>0">
flat <q-btn-dropdown style="color: #444;font-weight:bold;" class="q-ml-lg desktop-only"
style="color: #444;font-weight:bold;" icon="iconfont iconicon-unlogin" :label="LoginUser.name" unelevated>
class="q-ml-lg desktop-only" <div class="row no-wrap q-pa-md">
:label="$t('login')" <div class="column">
icon="iconfont iconicon-unlogin" <q-list>
to="/login/index" <q-item clickable v-close-popup to="/account">
/> <q-item-section avatar>
<q-btn <q-avatar icon="folder" color="primary" text-color="white" />
flat </q-item-section>
style="color: #444;font-weight:bold;" <q-item-section>
class="mobile-only" <q-item-label>帳號設定</q-item-label>
icon="iconfont iconicon-unlogin" </q-item-section>
to="/login/index" </q-item>
/> <q-item clickable v-close-popup to="/orderlist">
<q-item-section avatar>
<q-avatar icon="assignment" color="secondary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>我的訂單</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup to="/demandlist">
<q-item-section avatar>
<q-avatar icon="assignment" color="secondary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>我的需求單</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
<q-separator vertical inset class="q-mx-lg" />
<div class="column items-center">
<q-avatar size="72px">
<img v-if="LoginUser.photo" :src="LoginUser.photo" />
<img v-else src="https://cdn.quasar.dev/img/boy-avatar.png">
</q-avatar>
<div class="text-subtitle1 q-mt-md q-mb-xs">{{LoginUser.name}}</div>
<q-btn color="primary" label="登出" @click="loginOut" push size="sm" v-close-popup />
</div>
</div>
</q-btn-dropdown>
</template>
<template v-else>
<q-btn flat style="color: #444;font-weight:bold;" class="q-ml-lg desktop-only" :label="$t('login')"
icon="iconfont iconicon-unlogin" to="/login" />
<q-btn flat style="color: #444;font-weight:bold;" class="mobile-only" icon="iconfont iconicon-unlogin"
to="/login" />
</template>
</q-toolbar> </q-toolbar>
</q-header> </q-header>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
baseData: { baseData: {
type: Object, type: Object,
...@@ -72,25 +100,33 @@ export default { ...@@ -72,25 +100,33 @@ export default {
}, },
data() { data() {
return { return {
subTitle: "" subTitle: "",
LoginUser: {},
}; };
}, },
watch: { watch: {
title: function(val, oldval) { title: function (val, oldval) {
this.subTitle = val; this.subTitle = val;
} }
}, },
meta() { meta() {
return { return {
title: title: this.subTitle != "" ? `${this.subTitle} - ${this.baseData.name}` : this.baseData.name
this.subTitle != ""
? `${this.subTitle} - ${this.baseData.name}`
: this.baseData.name
}; };
}, },
mounted() { mounted() {
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem('b2bUser'));
}
},
methods: {
loginOut() {
localStorage.removeItem("b2bUser");
this.LoginUser = {};
} }
}; }
};
</script> </script>
<style> <style>
......
<template> <template>
<q-header <q-header reveal elevated :style="{background:baseData.nav.bg,color:baseData.nav.color}" height-hint="98" to="/index">
reveal
elevated
:style="{background:baseData.nav.bg,color:baseData.nav.color}"
height-hint="98"
to="/index"
>
<q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg"> <q-toolbar style="height:60px;" class="q-pr-lg q-pl-lg">
<img :src="baseData.logo" style="height:45px; cursor:pointer;" class="q-mr-lg mobile-only" @click="CommonJump('/index',{})" /> <img :src="baseData.logo" style="height:45px; cursor:pointer;" class="q-mr-lg mobile-only"
@click="CommonJump('/index',{})" />
<q-tabs align="left" style="margin:0 auto;" class="desktop-only" shrink> <q-tabs align="left" style="margin:0 auto;" class="desktop-only" shrink>
<img :src="baseData.logo" style="height:45px; cursor:pointer;margin-right:100px;" class="q-mr-lg" @click="CommonJump('/index',{})" /> <img :src="baseData.logo" style="height:45px; cursor:pointer;margin-right:100px;" class="q-mr-lg"
@click="CommonJump('/index',{})" />
<template v-for="(x, i) in baseData.nav.navs"> <template v-for="(x, i) in baseData.nav.navs">
<q-btn :key="i" stretch flat :label="x.title" @click="OpenNewUrl(x.url)" />
<q-btn :key="i" stretch flat :label="x.title"
type="a" :href="x.url" target="_blank" :no-wrap="true"
/>
<!-- <q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" exact /> <!-- <q-route-tab :key="i" :to="x.url" :label="x.title" :icon="x.icon" v-if="x.icon!=''" exact />
<q-route-tab :key="i" :to="x.url" :label="x.title" v-else exact /> --> <q-route-tab :key="i" :to="x.url" :label="x.title" v-else exact /> -->
</template> </template>
</q-tabs> </q-tabs>
<q-btn <q-btn flat dense round icon="menu" aria-label="Menu" class="mobile-only" label="選單" style="margin-left:auto;">
flat
dense
round
icon="menu"
aria-label="Menu"
class="mobile-only"
label="選單"
style="margin-left:auto;"
>
<q-menu> <q-menu>
<q-tabs align="left" vertical shrink> <q-tabs align="left" vertical shrink>
<template v-for="(x, i) in baseData.nav.navs"> <template v-for="(x, i) in baseData.nav.navs">
...@@ -36,27 +27,66 @@ ...@@ -36,27 +27,66 @@
</q-tabs> </q-tabs>
</q-menu> </q-menu>
</q-btn> </q-btn>
<q-btn
flat
style="color: #fff;font-weight:bold;" <template v-if="LoginUser.accountId>0">
class="q-ml-lg desktop-only"
:label="$t('login')" <q-btn-dropdown style="color: #444;font-weight:bold;" class="q-ml-lg desktop-only"
icon="iconfont iconicon-unlogin" icon="iconfont iconicon-unlogin" :label="LoginUser.name" unelevated>
to="/login" <div class="row no-wrap q-pa-md">
/> <div class="column">
<q-btn <q-list>
flat <q-item clickable v-close-popup to="/account">
style="color: #fff;font-weight:bold;" <q-item-section avatar>
class="mobile-only" <q-avatar icon="folder" color="primary" text-color="white" />
icon="iconfont iconicon-unlogin" </q-item-section>
to="/login" <q-item-section>
/> <q-item-label>帳號設定</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup to="/orderlist">
<q-item-section avatar>
<q-avatar icon="assignment" color="secondary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>我的訂單</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup to="/demandlist">
<q-item-section avatar>
<q-avatar icon="assignment" color="secondary" text-color="white" />
</q-item-section>
<q-item-section>
<q-item-label>我的需求單</q-item-label>
</q-item-section>
</q-item>
</q-list>
</div>
<q-separator vertical inset class="q-mx-lg" />
<div class="column items-center">
<q-avatar size="72px">
<img v-if="LoginUser.photo" :src="LoginUser.photo" />
<img v-else src="https://cdn.quasar.dev/img/boy-avatar.png">
</q-avatar>
<div class="text-subtitle1 q-mt-md q-mb-xs">{{LoginUser.name}}</div>
<q-btn color="primary" label="登出" @click="loginOut" push size="sm" v-close-popup />
</div>
</div>
</q-btn-dropdown>
</template>
<template v-else>
<q-btn flat style="color: #444;font-weight:bold;" class="q-ml-lg desktop-only" :label="$t('login')"
icon="iconfont iconicon-unlogin" to="/login" />
<q-btn flat style="color: #444;font-weight:bold;" class="mobile-only" icon="iconfont iconicon-unlogin"
to="/login" />
</template>
</q-toolbar> </q-toolbar>
</q-header> </q-header>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
baseData: { baseData: {
type: Object, type: Object,
...@@ -69,26 +99,35 @@ export default { ...@@ -69,26 +99,35 @@ export default {
}, },
data() { data() {
return { return {
subTitle: "" subTitle: "",
LoginUser: {},
}; };
}, },
watch: { watch: {
title: function(val, oldval) { title: function (val, oldval) {
this.subTitle = val; this.subTitle = val;
} }
}, },
meta() { meta() {
return { return {
title: title: this.subTitle != "" ?
this.subTitle != "" `${this.subTitle} - ${this.baseData.name}` : this.baseData.name
? `${this.subTitle} - ${this.baseData.name}`
: this.baseData.name
}; };
}, },
mounted() { mounted() {
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem('b2bUser'));
console.log("this.LoginUser", this.LoginUser);
} }
}; },
</script> methods: {
loginOut() {
localStorage.removeItem("b2bUser");
this.LoginUser = {};
}
}
};
</script>
<style> <style>
</style> </style>
<template>
<div class="login">
用户登录
<table>
<tr>
<td>
用户名
</td>
<td>
<q-input filled name="Account" v-model="loginMsg.account" class="bg-grey-1" label="账号" />
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<q-input filled name="Pwd" v-model="loginMsg.password" class="bg-grey-1" label="密码" />
</td>
</tr>
<tr>
<td colspan="2">
<q-btn color="primary" unelevated style="width:100%" filled label="登录" @click="login" />
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "Login",
components: {
},
data() {
return {
loginMsg: {
RB_Group_Id: 0,
account: "15286963456",
password: "123456"
},
};
},
created() {
},
mounted() {
var jObj = JSON.parse(localStorage.getItem('groupinfo'));
this.loginMsg.RB_Group_Id = jObj.GroupId;
},
methods: {
login() {
this.apipost(
"b2b_post_Login", this.loginMsg,
res => {
if (res.data.resultCode == 1) {
var jsonData = JSON.stringify(res.data.data);
window.localStorage.setItem("b2bUser", jsonData);
this.CommonJump('/index',{})
}
},
err => {}
);
}
},
};
</script>
<template>
<q-page>
<div class="account">
账号信息 帳戶設定 ( 1006186972@qq.com )
<table>
<tr>
<td>
個人資訊
</td>
</tr>
<tr>
<td>
姓氏:
<q-input filled name="name1" v-model="B2BUser.name" class="bg-grey-1" label="姓氏" />
</td>
<td>
名字:
<q-input filled name="name2" v-model="B2BUser.name" class="bg-grey-1" label="名字" />
</td>
</tr>
<tr>
<td>
性別:
<q-input filled name="name13" v-model="B2BUser.name" class="bg-grey-1" label="姓氏" />
</td>
<td>
名字:
<q-input filled name="name23" v-model="B2BUser.name" class="bg-grey-1" label="名字" />
</td>
</tr>
</table>
</div>
</q-page>
</template>
<script>
export default {
props: [],
data() {
return {
B2BUser: {}
};
},
created() {
},
mounted() {
if (localStorage.b2bUser) {
this.B2BUser = JSON.parse(window.localStorage.getItem('b2bUser'));
}
},
methods: {
getContract() {
}
},
};
</script>
<template>
<q-page>
<div class="demandlist">
需求单列表
</div>
</q-page>
</template>
<script>
export default {
props: [],
data() {
return {
};
},
created() {
},
mounted() {
},
methods: {
getContract() {
}
},
};
</script>
<template>
<q-page>
<div class="orderlist">
订单列表
</div>
</q-page>
</template>
<script>
export default {
props: [],
data() {
return {
};
},
created() {
},
mounted() {
},
methods: {
getContract() {
}
},
};
</script>
const routes = [{ const routes = [{
path: '/', path: '/',
component: () => component: () =>
import ('layouts/HomeLayout.vue'), import('layouts/HomeLayout.vue'),
children: [{ children: [{
path: '', path: '',
component: () => component: () =>
import ('pages/Index.vue') import('pages/Index.vue')
}, },
{ {
path: '/Index', path: '/Index',
component: () => component: () =>
import ('pages/Index.vue') import('pages/Index.vue')
}, },
{ {
path: '/About', //关于我们 path: '/About', //关于我们
component: () => component: () =>
import ('pages/About.vue') import('pages/About.vue')
}, { }, {
path: '/contract', //契约管理 path: '/contract', //契约管理
component: () => component: () =>
import ('pages/contract.vue') import('pages/contract.vue')
}, { }, {
path: '/tour_visa', //签证护照管理 path: '/tour_visa', //签证护照管理
component: () => component: () =>
import ('pages/tour_visa.vue') import('pages/tour_visa.vue')
}, { //行程 }, { //行程
path: '/details/:id/:tcid', path: '/details/:id/:tcid',
component: () => component: () =>
import ('pages/details.vue') import('pages/details.vue')
}, { }, {
path: '/search', //签证护照管理 path: '/search', //签证护照管理
component: () => component: () =>
import ('pages/search.vue') import('pages/search.vue')
} },
{
path: '/account', //用户信息
component: () =>
import('pages/usercenter/account.vue')
},
{
path: '/demandlist', //需求单列表
component: () =>
import('pages/usercenter/demandlist.vue')
},
{
path: '/orderlist', //订单列表
component: () =>
import('pages/usercenter/orderlist.vue')
},
] ]
}, },
{
path: '/login',
component: () =>
import('pages/login.vue'),
children: [{
path: '/login',
component: () =>
import('pages/login.vue')
}]
}
] ]
...@@ -43,7 +69,7 @@ if (process.env.MODE !== 'ssr') { ...@@ -43,7 +69,7 @@ if (process.env.MODE !== 'ssr') {
routes.push({ routes.push({
path: '*', path: '*',
component: () => component: () =>
import ('pages/Error404.vue') import('pages/Error404.vue')
}) })
} }
......
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