Skip to content

M
million
Commit fe5dcf0f authored by 沈良进's avatar 沈良进
Browse files
Options

个人中心出行人管理功能开发

parent 0c41724d
Hide whitespace changes
Inline Side-by-side
Showing with 418 additions and 113 deletions
src/pages/usercenter/setUserInfo.vue
View file @ fe5dcf0f
......@@ -326,9 +326,6 @@ export default {
console.log('this.$refs[item]', this, item, this.$refs[item])
this.$refs[item].validate();
});
// this.$refs.Surname.validate();
// this.$refs.Name.validate();
// this.$refs.BirthDate.validate();
verifyArr.forEach((item) => {
console.log('item', item)
if (this.$refs[item].hasError) {
......
src/pages/usercenter/setUsersList.vue
View file @ fe5dcf0f
......@@ -5,7 +5,25 @@
margin: 10px;
}
.content {
max-width: 940px;
width: 900px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.card {
margin: 10px;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 8px;
}
.card-title {
height: 37px;
height: 37px;
padding: 0 20px;
line-height: 37px;
background: #f5f5f5;
border-radius: 8px 8px 0px 0px;
}
.tips {
height: 42px;
......@@ -17,149 +35,401 @@
::v-deep .q-field__control {
height: 40px;
}
::v-deep .q-field--auto-height .q-field__control {
min-height: 40px;
}
::v-deep .q-field__marginal {
height: 40px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
}
.phone {
margin-left: 100px;
}
.name {
width: 300px;
}
.user-name {
width: 120px;
}
.pay-info {
width: 120px;
}
.order-info {
width: 120px;
}
.order-action {
width: 120px;
}
.nav-item {
width: 100px;
margin: 0 10px;
text-align: center;
}
.border-bottom {
width: 20px;
height: 4px;
border-radius: 2px;
background-color: $primary;
margin: -8px auto 0 auto;
}
</style>
<template>
<div class="content q-ma-lg bg-white q-pa-lg">
<div class="tips">
出行人<span class="text-grey-6"
>共計 3人，最多新增20人(含本人)</span
>
</div>
<div class="content q-ma-lg bg-white">
<div>
<div>
<div class="row">
<div class="col">
<div class="title">姓</div>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
<div class="card" v-for="item in pageData" :key="item.id">
<div class="flex card-title justify-between">
<div class="flex">
<span>订单号</span>
<span class="phone">联系客服</span>
</div>
<span>
<span>编辑</span>
<span>删除</span>
</span>
</div>
<div class="row">
<div class="col">
<div class="title">姓氏（需與旅遊證件一致）</div>
<q-input
class="form-item"
v-model="form.firstName"
outlined
placeholder="姓氏（需與旅遊證件一致）"
ref="firstName"
:rules="[(val) => val !== '' || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名字（需與旅遊證件一致）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
<div class="flex q-py-sm">
<div class="row">
<div class="col-12">中國內地身份證：510181********0920</div>
<div class="col-12">中國內地身份證：510181********0920</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">居住國家/地區</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
<div class="col">
<div class="title">稱謂</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
</div>
<div class="row">
<div class="col">
<div class="title">國家/地區代碼</div>
<q-select filled v-model="model" :options="options" label="Filled" />
</div>
<div class="col">
<div class="title">電話（首次需驗證）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">出生日期</div><q-date
v-model="date"
minimal
/>
</div>
<div class="col">
<div class="title">電子郵件（接收订单确认邮件）</div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div>
<q-btn color="primary" unelevated label="保存" @click="submit" />
</div>
</div>
</div>
<q-btn
color="primary"
unelevated
outline
@click="isShowDialog = true"
label="添加出行人"
></q-btn>
<q-dialog content-style="width: 900px" v-model="isShowDialog">
<div class="bg-white dialog-box" style="width: 800px; padding: 20px">
<div>添加邮寄地址</div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div>
<div class="row">
<div class="col">
<div class="title">姓</div>
<q-input
class="form-item"
v-model="form.Surname"
outlined
placeholder="姓"
ref="Surname"
:rules="[(val) => !!val || '请输入姓氏']"
></q-input>
</div>
<div class="col">
<div class="title">名</div>
<q-input
ref="Name"
class="form-item"
placeholder="名"
v-model="form.Name"
outlined
:rules="[(val) => !!val || '请输入名字']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">姓氏（需與旅遊證件一致）</div>
<q-input
class="form-item"
v-model="form.EnName"
outlined
placeholder="姓氏（需與旅遊證件一致）"
ref="EnName"
:rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
></q-input>
</div>
<div class="col">
<div class="title">名字（需與旅遊證件一致）</div>
<q-input
ref="EnSurname"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.EnSurname"
outlined
:rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
></q-input>
</div>
</div>
<div class="row">
<div class="col">
<div class="title">國家/地區代碼</div>
<q-select
ref="PhoneCountry"
square
outlined
option-value="ID"
option-label="PhoneCode"
class="form-item"
v-model="form.PhoneCountry"
:options="phoneCountList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div>
<div class="col">
<div class="title">電話（首次需驗證）</div>
<q-input
ref="Moblie"
class="form-item"
placeholder="電話（首次需驗證）"
v-model="form.Moblie"
outlined
:rules="[(val) => !!val || '请输入電話（首次需驗證）']"
></q-input>
</div>
</div>
<div
v-for="(item, index) in form.CardList"
:key="item.id"
class="row"
>
<div class="col">
<div class="title">证件类型</div>
<q-select
ref="card"
square
outlined
option-value="ID"
option-label="Name"
class="form-item"
v-model="item.Type"
:options="cardList"
placeholder="Filled"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div>
<div class="col">
<div class="flex justify-between items-center">
<div class="title">证件号码</div>
<div v-if="index > 0" @click="deleteCardItem(item)">删除</div>
</div>
<q-input
class="form-item"
placeholder="電話（首次需驗證）"
v-model="item.CardNo"
outlined
:rules="[(val) => !!val || '请输入電話（首次需驗證）']"
></q-input>
</div>
</div>
<q-btn
color="primary"
@click="addCard"
unelevated
outline
label="新增证件"
/>
<div>
<q-btn color="primary" type="submit" unelevated label="保存" />
</div>
</div>
</form>
</div>
</q-dialog>
</div>
</template>
<script>
export default {
data() {
return {
isShowDialog: false,
selectedKey: "全部",
form: {
lastName: "",
firstName: "",
Surname: "",
Name: "",
EnName: "",
EnSurname: "",
Moblie: "",
CardList: [],
},
model: '',
date: '',
options: []
model: "",
date: "",
options: [],
cardList: [],
phoneCountList: [],
count: 0,
pageData: [],
};
},
mounted() {
this.id = 0;
this.addCard();
this.getUsersList();
this.getCountryInfo();
this.getCardTypeList();
},
methods: {
getCardTypeList() {
this.apipost(
"b2c_post_GetTripCardEnumList",
{},
(res) => {
if (res.data.resultCode == 1) {
this.cardList = res.data.data;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
getCountryInfo() {
this.apipost(
"GetCountryInfo_post",
{},
(res) => {
if (res.data.resultCode == 1) {
const { phoneCountList, countList } = res.data.data;
this.countList = countList;
this.phoneCountList = phoneCountList;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
changeCouponType(item) {
this.selectedKey = item;
},
addCard() {
this.id++;
this.form.CardList.push({
id: this.id,
});
},
deleteCardItem(card) {
const index = this.form.CardList.findIndex(item => item.id === card.id)
this.form.CardList.splice(index, 1)
},
submit() {
const verifyArr = ['fastName', 'lastName'];
this.formHasError = false;
const verifyArr = [
"Surname",
"Name",
"EnName",
"EnSurname",
"Moblie",
];
verifyArr.forEach((item) => {
console.log("this.$refs[item]", this, item, this.$refs[item]);
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
console.log("item", item);
if (this.$refs[item].hasError) {
console.log("item", item);
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
console.log("this.formHasError", this.formHasError, this.form);
if (this.formHasError) {
return;
}
this.submitUserInfo();
},
getUsersList() {
this.apipost(
"b2c_post_GetTripGuestPageList",
{pageIndex: 1, pageSize: 20},
(res) => {
if (res.data.resultCode == 1) {
const { count, pageData } = res.data.data;
this.count = count;
this.pageData = pageData;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
deleteUser() {
this.apipost(
"b2c_post_DelTripGuestInfo",
{
Id: this.userInfo?.id,
},
(res) => {
if (res.data.resultCode == 1) {
this.$q.notify({
type: "positive",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
this.getUsersList();
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
submitUserInfo() {
let params = { ...this.form };
params.PhoneCountry = params.PhoneCountry.ID;
params.CardList.forEach(item => {
item.Type = item.Type.Id
})
this.apipost(
"b2c_post_SetTripGuestInfo",
params,
(res) => {
if (res.data.resultCode == 1) {
this.$q.notify({
type: "positive",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
},
};
......
yarn.lock
View file @ fe5dcf0f
......@@ -3395,6 +3395,11 @@ dashdash@^1.12.0:
dependencies:
assert-plus "^1.0.0"
dayjs@^1.11.7:
version "1.11.7"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2"
integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==
de-indent@^1.0.2:
version "1.0.2"
resolved "https://registry.npmmirror.com/de-indent/-/de-indent-1.0.2.tgz"
......@@ -3618,6 +3623,13 @@ dom-serializer@^1.0.1:
domhandler "^4.2.0"
entities "^2.0.0"
dom7@^2.1.3:
version "2.1.5"
resolved "https://registry.yarnpkg.com/dom7/-/dom7-2.1.5.tgz#a79411017800b31d8400070cdaebbfc92c1f6377"
integrity sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==
dependencies:
ssr-window "^2.0.0"
domain-browser@^1.1.1:
version "1.2.0"
resolved "https://registry.npmmirror.com/domain-browser/-/domain-browser-1.2.0.tgz"
......@@ -8583,6 +8595,16 @@ sshpk@^1.7.0:
safer-buffer "^2.0.2"
tweetnacl "~0.14.0"
ssr-window@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-1.0.1.tgz#30752a6a4666e7767f0b7e6aa6fc2fdbd0d9b369"
integrity sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg==
ssr-window@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-2.0.0.tgz#98c301aef99523317f8d69618f0010791096efc4"
integrity sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A==
ssri@^6.0.1:
version "6.0.2"
resolved "https://registry.npmmirror.com/ssri/-/ssri-6.0.2.tgz"
......@@ -8894,6 +8916,14 @@ svgo@^1.0.0:
unquote "~1.1.1"
util.promisify "~1.0.0"
swiper@^4.0.7:
version "4.5.1"
resolved "https://registry.yarnpkg.com/swiper/-/swiper-4.5.1.tgz#ed43998e780ceb478610079c8d23fd425eca636f"
integrity sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==
dependencies:
dom7 "^2.1.3"
ssr-window "^1.0.1"
table@5.4.6:
version "5.4.6"
resolved "https://registry.npmmirror.com/table/-/table-5.4.6.tgz"
......@@ -9481,6 +9511,14 @@ vm-browserify@^1.0.1:
resolved "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz"
integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
vue-awesome-swiper@^3.0.4:
version "3.1.3"
resolved "https://registry.yarnpkg.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz#05500b501ffb3fec9bf7eb9985bcf4ae8360ed9e"
integrity sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==
dependencies:
object-assign "^4.1.1"
swiper "^4.0.7"
vue-concise-slider@^4.2.5:
version "4.2.5"
resolved "https://registry.yarnpkg.com/vue-concise-slider/-/vue-concise-slider-4.2.5.tgz#4ff799e91b8148041ede12d1d3d994fdd5f8e354"
......
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