Skip to content

M
million
Commit ca982498 authored by 罗超's avatar 罗超
Browse files
Options

修改登录+新增订单详情

parent 50729d6c
Hide whitespace changes
Inline Side-by-side
Showing with 416 additions and 228 deletions
src/components/auth/verifyCode.vue 0 → 100644
View file @ ca982498
<template>
<form
autocorrect="off"
autocapitalize="off"
autocomplete="off"
spellcheck="false"
>
<div class="row justify-between q-my-md">
<div
v-for="(x, i) in cols"
:key="i"
class="override-verfity-ipt col"
:class="{ 'q-ml-sm': i > 0 }"
>
<q-input
standout
v-model="cols[i]"
@focus="codeFocus($event)"
ref="codes"
@keyup="changFocus($event, i)"
maxlength="1"
mask="#"
dense
/>
</div>
</div>
<div class="q-mt-sm text-negative f12" v-if="hasError">{{ errorMsg }}</div>
</form>
</template>
<script>
export default {
props: {
/**
* @description 请传入能够被12整除的整数
*/
digit: Number,
/**
* @description 提示语
*/
hint: String,
/**
* @description 绑定值
*/
value: [String, Number],
},
data() {
return {
cols: [],
hasError: false,
errorMsg: "",
colStyle: "",
};
},
created() {
this.initColHandler();
},
methods: {
initColHandler() {
for (let i = 0; i < this.digit; i++) {
this.cols.push("");
}
this.colStyle = `col-${12 / this.digit}`;
},
changFocus(event, index) {
if (event.key == "Backspace") {
if (index != 0) {
this.$refs.codes[index - 1].focus();
}
} else if (index < this.digit-1) {
if (this.cols[index] != "") {
this.$refs.codes[index + 1].focus();
}
}
this.updateValue();
},
updateValue() {
let tempValue = "";
this.cols.forEach((x) => {
tempValue += x;
});
this.$emit("input", tempValue);
},
codeFocus(e) {
e.target.select();
},
validate() {
if (this.value.length != this.cols.length) {
this.errorMsg = "请输入正确的验证码";
this.hasError = true;
} else {
this.errorMsg = "";
this.hasError = false;
}
return !this.hasError
},
},
};
</script>
<style>
.override-verfity-ipt .q-field--dense .q-field__control,
.override-verfity-ipt .q-field--dense .q-field__marginal {
height: 60px !important;
text-align: center;
font-family: din;
font-size: 32px;
}
.override-verfity-ipt .q-field--dense .q-field__control input,
.override-verfity-ipt .q-field--dense .q-field__marginal input {
text-align: center;
}
</style>
src/components/label_background_article/center.vue
View file @ ca982498
<template>
<!--背景圖 - 文中-->
<div class="q-mt-lg">
<div>
<section class="about3" :style="{backgroundImage:`url('${plugData.ImageUrl}')`}">
<div class="section-block">
<div class="about-main">
......
src/components/navs/hor-btm.vue
View file @ ca982498
......@@ -382,9 +382,7 @@ cursor: pointer;
<div v-for="item in dataList.BottomList" :key="item.Id">
<div class="text-subtitle1 text-weight-bold text-white">{{ item.NavTitle }}</div>
<div class="q-mt-xl row" style="width:210px">
<div class="bg-white rounded-borders q-pa-xs overflow-hidden q-mb-md q-mr-md" @click="navigateTo(item2)" v-for="item2 in item.SubList" :key="item2.Id" style="width:40px;height:34px;">
<img style="width:100%" :src="item2.Icon" :title="item2.NavTitle" />
</div>
<img v-for="item2 in item.SubList" :key="item2.Id" style="width:40px;border-radius: 2px;" class="q-mb-md q-mr-md bg-white" :src="item2.Icon" :title="item2.NavTitle" />
</div>
</div>
</div>
......
src/pages/line/orderPreview.vue
View file @ ca982498
......@@ -594,16 +594,16 @@ export default {
TCID: 0,
OrderId: 0,
VisaPlanId: 0,
SurName: "羅",
Name: "超",
PassportNo: "D56465465",
ESurName: "LUO",
EName: "CHAO",
SurName: "",
Name: "",
PassportNo: "",
ESurName: "",
EName: "",
GuestType: 0,
EnableSignRoom: false,
PassportExpiry: "2035-12-31",
PassportExpiry: "",
FormatTypeName: "",
MobilePhone: "17308037817",
MobilePhone: "",
RoomType: 0,
IsSignRoom: false,
Sex: 1,
......@@ -619,7 +619,7 @@ export default {
IsDepartureRecord: 2,
IsHightSchool: 2,
IsB2B: 1,
Birthday: "1990-12-26",
Birthday: "",
},
guests: [],
disableSign: false,
......
src/pages/login.vue
View file @ ca982498
......@@ -89,17 +89,24 @@
}
</style>
<template>
<div :class="$q.platform.is.desktop ? 'login': 'full-width'">
<div class="login-box" :class="$q.platform.is.desktop ? 'login-box-pc': ''">
<div :class="$q.platform.is.desktop ? 'login' : 'full-width'">
<div
class="login-box"
:class="$q.platform.is.desktop ? 'login-box-pc' : ''"
>
<!-- <img :src="logo" class="tw_logo" /> -->
<!-- <p class="tip-text">
還沒有帳號嗎？立即<a style="cursor:pointer;" @click="CommonJump('/register',{})">免費加入</a>
</p> -->
<div v-if="loginType !== 'wechat'">
<div class="flex items-end justify-between">
<div class="f34 bold">{{loginType === 'bindEmail' ? '立即绑定' : (isLogin ? "登錄" : "註冊") }}</div>
<q-form ref="loginForm" v-if="loginType !== 'wechat'">
<div class="row items-center justify-between">
<div class="f34 bold">
{{
loginType === "bindEmail" ? "立即绑定" : isLogin ? "登錄" : "註冊"
}}
</div>
<div
class="f16 bold cursor-pointer"
class="text-subtitle2 cursor-pointer"
v-if="loginType !== 'bindEmail'"
@click="loginToRegister"
>
......@@ -107,80 +114,85 @@
</div>
</div>
<div class="login_row">
<div class="form-group">
<div class="login_labelName">輸入郵箱</div>
<q-input outlined v-model="loginMsg.Mailbox" />
<div class="primary q-mt-sm" v-show="tips">邮箱格式有误,请核实</div>
</div>
<div v-if="loginType === 'MailCode' || loginType === 'bindEmail'">
<q-btn
v-if="!isSend"
class="q-mb-lg"
unelevated
color="grey-3"
style="
width: 100%;
color: #8b8b8b !important;
height: 50px;
margin-top: 20px;
"
filled
label="发送验证码"
@click="sendVerify"
/>
<div v-else class="mt q-mb-sm">
<q-input outlined v-model="loginMsg.MailCode" type="text" />
<div
class="q-mt-sm"
:class="cutDown ? 'text-grey-6' : ''"
@click="reSend"
>
{{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
</div>
</div>
<q-input
filled
v-model="loginMsg.Mailbox"
class="q-mt-xl"
label="輸入郵箱"
style="ime-mode: disabled"
aria-autocomplete="off"
:rules="[
(val) =>
/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
val
) || '請輸入正確的郵箱地址',
]"
>
<template
v-if="loginType === 'MailCode' || loginType === 'bindEmail'"
v-slot:after
>
<q-btn
unelevated
color="text-white bg-secondary"
:disable="
!/^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/.test(
loginMsg.Mailbox
) || cutDown > 0
"
style="height: 46px; margin-top: -10px"
filled
:loading="inSending"
:label="
!isSend
? '发送验证码'
: cutDown > 0
? cutDown + '秒'
: '重新發送'
"
@click="sendVerify"
/>
</template>
</q-input>
<div
class="q-mt-md"
v-if="loginType === 'MailCode' || loginType === 'bindEmail'"
>
<verify-code
:digit="6"
hint="請輸入正確的驗證碼"
ref="verify"
v-model="loginMsg.MailCode"
></verify-code>
</div>
<div v-if="loginType === 'PassWord' || (!isLogin && loginType !== 'bindEmail')" class="form-group">
<div class="login_labelName flex justify-between items-center">
密碼<span
class="text-grey-6 cursor-pointer"
<div
v-if="
loginType === 'PassWord' ||
(!isLogin && loginType !== 'bindEmail')
"
class="q-mt-md"
>
<div class="text-right">
<span
class="text-grey-6 f12 cursor-pointer"
v-if="loginType === 'PassWord'"
@click="resetPassword"
>忘記密碼</span
>
</div>
<q-input
v-if="flag == 1"
outlined
v-model="loginMsg.PassWord"
type="text"
ref="pwd"
/>
<q-input
v-if="flag == 2"
outlined
standout
v-model="loginMsg.PassWord"
type="PassWord"
autocomplete="off"
:rules="[(val) => !!val || '請輸入密碼']"
ref="pwd"
/>
<i
class="iconfont iconyanjing_xianshi"
v-if="flag == 1"
@click="flag = 2"
></i>
<i
class="iconfont iconbiyan"
v-if="flag == 2"
@click="flag = 1"
></i>
</div>
<div
class="text-right f16 text-grey-6 cursor-pointer"
v-if="isLogin"
@click="changeLoginType"
>
{{
<div class="text-right f12 text-dark" v-if="isLogin">
<span class="cursor-pointer" @click="changeLoginType">{{
loginType === "PassWord" ? "使用郵箱驗證登陸" : "使用賬號密碼登陸"
}}
}}</span>
</div>
<div class="q-mb-xl">
<q-btn
......@@ -189,6 +201,7 @@
style="width: 100%; height: 50px; margin-top: 20px"
filled
:label="mylabel"
:loading="loading"
@click="login"
/>
</div>
......@@ -214,12 +227,21 @@
<div class="flex items-start no-wrap">
<div><q-checkbox v-model="isAgree"></q-checkbox></div>
<span
>在使用印象的产品和服务前，我已阅读
理解并同意印象的<a>《隐私政策》</a>和<a>《使用条款》</a></span
>在使用印象的产品和服务前，我已阅读 理解并同意印象的<a
href="http://www.oytour.com/#/customer/15"
target="_blank"
class="text-primary"
>《隐私政策》</a
>和<a
href="http://www.oytour.com/#/customer/13"
target="_blank"
class="text-primary"
>《使用条款》</a
></span
>
</div>
</div>
</div>
</q-form>
<!-- 微信扫码页面 -->
<div v-show="loginType === 'wechat'">
<div class="bold f34">微信登錄</div>
......@@ -232,10 +254,12 @@
<script>
import QrcodeVue from "qrcode.vue";
import verifyCode from "src/components/auth/verifyCode.vue";
export default {
name: "Login",
components: {
QrcodeVue,
verifyCode,
},
data() {
return {
......@@ -256,13 +280,15 @@ export default {
logo: "",
flag: 2,
mylabel: "登入",
loading: false,
inSending:false
};
},
created() {},
mounted() {
console.log("login", this.$route.query);
const { code, state, path } = this.$route.query;
this.path = path
this.path = path;
if (code) {
this.fetchLoginInfo(code, state);
this.isLogin = false;
......@@ -277,7 +303,7 @@ export default {
var jObj = JSON.parse(window.localStorage.getItem("baseifo"));
this.logo = jObj.Config.Logo;
}
this.isLogin=!this.$route.query.t || this.$route.query.t!=1
this.isLogin = !this.$route.query.t || this.$route.query.t != 1;
},
watch: {
loginType: function () {
......@@ -285,6 +311,11 @@ export default {
},
},
methods: {
async formValidateHandler(formName) {
let temp = this.$refs[formName];
let formObj = temp instanceof Array ? temp[0] : temp;
return formObj.validate();
},
fetchLoginInfo(code, state) {
this.apipost(
"getWXToken_post",
......@@ -304,12 +335,7 @@ export default {
this.userId = unoinid;
}
} else {
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
this.$message.error(res.data.message);
}
},
(err) => {}
......@@ -323,12 +349,7 @@ export default {
if (r.data.resultCode == 1) {
this.openInfo = r.data.data;
} else {
this.$q.notify({
type: "negative",
message: r.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
this.$message.error(res.data.message);
}
},
null
......@@ -366,51 +387,40 @@ export default {
sendVerify() {
if (this.inSending) return;
this.inSending = true;
if (this.verifyEmail()) {
if(!this.userId && this.loginType === 'bindEmail') {
this.$q.notify({
type: "negative",
message: '微信登录出错,请重新登录',
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
// this.useWechatLogin()
return
}
let SendType = this.userId ? 3 : this.isLogin ? 1 : 0;
this.apipost(
"directCustomer_post_SendMail",
{
Mailbox: this.loginMsg.Mailbox,
SendType: SendType,
Id: this.userId,
},
(res) => {
this.inSending = false;
if (res.data.resultCode == 1) {
this.isSend = true;
this.cutDown = 60;
this.startCutDown();
} else {
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
} else {
this.inSending = false;
if (!this.userId && this.loginType === "bindEmail") {
this.$message.error("微信登录出错,请重新登录");
return;
}
let SendType = this.userId ? 3 : this.isLogin ? 1 : 0;
this.apipost(
"directCustomer_post_SendMail",
{
Mailbox: this.loginMsg.Mailbox,
SendType: SendType,
Id: this.userId,
},
(res) => {
this.inSending = false;
if (res.data.resultCode == 1) {
this.isSend = true;
this.cutDown = 60;
this.startCutDown();
} else {
this.$message.error(res.data.message);
}
},
null
);
},
startCutDown() {
this.timer = setTimeout(() => {
this.cutDown--;
if (this.cutDown) {
if (this.cutDown > 0) {
this.startCutDown();
} else {
clearTimeout(this.timer);
this.timer = null;
}
}, 1000);
},
......@@ -428,16 +438,6 @@ export default {
}
this.cutDown = 0;
},
verifyEmail() {
if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.loginMsg.Mailbox)) {
this.tips = false;
return true;
} else {
// 提示用户邮箱格式有误
this.tips = true;
return false;
}
},
changeLoginType() {
if (this.loginType === "PassWord") {
this.loginType = "MailCode";
......@@ -450,92 +450,64 @@ export default {
// this.setWechatCode()
const { AppID, State, OpenRedirectUri } = this.openInfo;
let redirect_uri = OpenRedirectUri;
const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${AppID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=${State}&wechat_redirect=${redirect_uri}`;
const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${AppID}&redirect_uri=${encodeURIComponent('http://www.oytour.com/#/login')}&response_type=code&scope=snsapi_login&state=${State}&wechat_redirect=${redirect_uri}`;
// this.windowObjectReference = window.open(url, 'wechat', 'left: 20,top: 20,width:200,height:200,')
// console.log('windowObjectReference', this.windowObjectReference)
// setTimeout(() => {console.log(this.windowObjectReference.close())}, 1000)
window.location.href = url;
},
login() {
if (this.mylabel === "提交中...") {
return;
}
if (!this.isAgree) {
this.$q.notify({
type: "negative",
message: "请先同意平台使用协议",
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
return;
}
if (this.loginMsg.Mailbox == "") {
this.$q.notify({
type: "negative",
message: "请输入账号",
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
async login() {
if (this.loading) {
return;
}
if (this.loginMsg.PassWord == "" && this.loginType === "PassWord") {
this.$q.notify({
type: "negative",
message: "请输入密码",
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
return;
}
if (
this.loginMsg.MailCode == "" &&
(this.loginType === "MailCode" || this.loginType === "bindEmail")
) {
this.$q.notify({
type: "negative",
message: "请输入邮箱验证码",
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
return;
}
let params = { ...this.loginMsg };
let url = "MailboxPwdLogin_post"; // 密码登录
if (!this.isLogin) {
url = "directCustomer_post_MailRegister";
} else if (this.loginType === "MailBox") {
ulr = "MailboxLogin_post";
}
if (this.loginType === "bindEmail") {
url = "BindMailByOpenId_post";
params.Unoinid = this.userId;
}
this.mylabel = "提交中...";
this.apipost(
url,
params,
(res) => {
this.mylabel = "登入";
if (res.data.resultCode == 1) {
var jsonData = JSON.stringify(res.data.data);
window.localStorage.setItem("b2bUser", jsonData);
console.log("userInfo", jsonData, res.data.data);
if(this.path) {
this.CommonJump(this.path, {});
if (await this.formValidateHandler("loginForm")) {
if (this.loginType === "MailCode" || this.loginType === "bindEmail") {
if (!this.isSend) {
this.$message.error("請發送驗證碼");
return;
}
if (!this.$refs.verify.validate()) return;
}
if (!this.isAgree) {
this.$message.warn("请先同意平台使用协议");
return;
}
let params = { ...this.loginMsg };
let url = "MailboxPwdLogin_post"; // 密码登录
if (!this.isLogin) {
url = "directCustomer_post_MailRegister";
} else if (this.loginType === "MailCode") {
url = "MailboxLogin_post";
}
if (this.loginType === "bindEmail") {
url = "BindMailByOpenId_post";
params.Unoinid = this.userId;
}
this.loading = true;
this.apipost(
url,
params,
(res) => {
if (res.data.resultCode == 1) {
window.localStorage.setItem(
"b2bUser",
JSON.stringify(res.data.data)
);
if (this.path) {
this.CommonJump(this.path, {});
} else {
this.CommonJump("/index", {});
}
} else {
this.CommonJump("/index", {});
this.$message.error(res.data.message);
}
} else {
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
this.loading = false;
},
(err) => {
this.loading = false;
}
},
(err) => {}
);
);
}
},
resetPassword() {
this.CommonJump("/resetPassword", {});
......
src/pages/usercenter/order/orderDetail.vue 0 → 100644
View file @ ca982498
<template>
<div class="content-page order-preview">
<q-card class="rounded-borders q-pa-md q-mt-md" flat>
<div class="text-subtitle1 text-weight-bolder">訂單狀態</div>
<div class="q-mt-lg row">
<div class="col">
<div class="row items-center">
<q-icon name="iconfont icontishi" size="32px" color="warning" />
<div class="q-ml-md text-h6 text-orange text-weight-bold">待支付</div>
</div>
<div class="q-mt-md f12 text-grey-6">請在您下單成功後30分鐘內完成支付，否則訂單會被系統自動取消</div>
</div>
<div class="">
<div class="f12 text-grey-6">訂單編號：#D2022325159852</div>
<div class="f12 text-grey-6 q-mt-md">下單日期：2023年3月14日 19:02</div>
</div>
</div>
<q-separator color="grey-2" class="q-my-md" />
<div class="row">
<div class="text-subtitle1 col">
<span>應付金額：</span>
<span class="text-subtitle2">CNY</span>
<span class="q-ml-sm text-weight-bolder">{{ moneyFormat('3580.00',2) }}</span>
</div>
<div class="">
<q-btn color="primary" outline dense label="取消訂單" class="q-mr-md q-px-md"/>
<q-btn color="primary" unelevated dense label="前往付款" class="q-px-md"/>
</div>
</div>
</q-card>
<q-card class="rounded-borders q-pa-md q-mt-md" flat>
<div class="text-subtitle1 text-weight-bolder">商品訊息</div>
<div class="row q-mt-md">
<q-img
src="http://imgfile.oytour.com/Upload/DMC/202302280651141800000000003.jpg"
class="rounded-borders q-mr-md"
spinner-color="grey-2"
style="width: 150px"
/>
<div class="col">
<div class="text-body1 ellipsis">忠清北道私人包車一日遊｜玉笋峰悬索桥 & 单轨列车登飞凤山(滑翔伞) & 朴达岭 & 国弓体验</div>
<div class="q-mt-sm text-grey-6">2023-03-15從成都出發 成人x2; </div>
<div class="q-mt-sm text-dark">
出行日期：2023年3月30日（本地时间）
</div>
<div class="q-mt-sm text-grey-6">
商品類型：包車
</div>
</div>
</div>
</q-card>
<q-card class="rounded-borders q-pa-md q-mt-md" flat>
<div class="text-subtitle1 text-weight-bolder">訂購人訊息</div>
<div class="f12 q-mt-sm text-grey-6">如你的预订有任何变动，我们将及时通知你</div>
<div class="row q-col-gutter-md q-mt-md">
<div class="col-6">
<div class="f12 text-grey-6">姓氏</div>
<div class="q-mt-sm text-body1">羅</div>
</div>
<div class="col-6">
<div class="f12 text-grey-6">名字</div>
<div class="q-mt-sm text-body1">超</div>
</div>
<div class="col-6">
<div class="f12 text-grey-6">手機號碼</div>
<div class="q-mt-sm text-body1">86-17308037817</div>
</div>
<div class="col-6">
<div class="f12 text-grey-6">邮箱 (用于接收订单确认邮件)</div>
<div class="q-mt-sm text-body1">alex9012@vip.qq.com</div>
</div>
</div>
<div>
<q-separator color="grey-2" class="q-my-md" />
<div class="text-subtitle1 text-weight-bolder">用戶備註</div>
<div class="rounded-borders bg-orange-1 col q-mt-md q-pa-md text-orange">
凍死了防控就是大陸飛科技阿斯蒂芬盧卡斯經費達拉斯
</div>
</div>
</q-card>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
src/router/routes.js
View file @ ca982498
......@@ -94,12 +94,12 @@ const routes = [{
component: () =>
import ('pages/usercenter/orderlist.vue')
},
{
path: '/orderinfo/:id', //订单详情
meta: { isUserCenter: true, needLogin: true, title: '订单详情' },
component: () =>
import ('pages/usercenter/orderinfo.vue')
},
// {
// path: '/orderinfo/:id', //订单详情
// meta: { isUserCenter: true, needLogin: true, title: '订单详情' },
// component: () =>
// import ('pages/usercenter/orderinfo.vue')
// },
{
path: '/passengerList/:id', //旅客名单
meta: { isUserCenter: true, needLogin: true, title: '旅客名单' },
......@@ -190,12 +190,18 @@ const routes = [{
component: () =>
import ('pages/pay/paysuccess.vue')
},
{
path: '/orderinfo/:orderno', //訂單詳情
meta: { title: '訂單詳情', isUserCenter: false, needLogin: true, },
component: () =>
import ('pages/usercenter/order/orderDetail.vue')
},
]
},
{
path: '/userCenter', //移动端个人中心
meta: { isUserCenter: true, needLogin: true,title: '个人中心' },
meta: { isUserCenter: true, needLogin: true, title: '个人中心' },
component: () =>
import ('pages/usercenter/mobileUserCenter.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