Skip to content

M
million
Commit a3c752bc authored by youjie's avatar youjie
Browse files
Options

no message

parents 21269e38 73aa2f84
Show whitespace changes
Inline Side-by-side
Showing with 380 additions and 113 deletions
src/pages/usercenter/setUserInfo.vue
View file @ a3c752bc
...@@ -326,9 +326,6 @@ export default { ...@@ -326,9 +326,6 @@ export default {
console.log('this.$refs[item]', this, item, this.$refs[item]) console.log('this.$refs[item]', this, item, this.$refs[item])
this.$refs[item].validate(); this.$refs[item].validate();
}); });
// this.$refs.Surname.validate();
// this.$refs.Name.validate();
// this.$refs.BirthDate.validate();
verifyArr.forEach((item) => { verifyArr.forEach((item) => {
console.log('item', item) console.log('item', item)
if (this.$refs[item].hasError) { if (this.$refs[item].hasError) {
......
src/pages/usercenter/setUsersList.vue
View file @ a3c752bc
...@@ -5,7 +5,25 @@ ...@@ -5,7 +5,25 @@
margin: 10px; margin: 10px;
} }
.content { .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 { .tips {
height: 42px; height: 42px;
...@@ -17,41 +35,103 @@ ...@@ -17,41 +35,103 @@
::v-deep .q-field__control { ::v-deep .q-field__control {
height: 40px; height: 40px;
} }
::v-deep .q-field--auto-height .q-field__control {
min-height: 40px;
}
::v-deep .q-field__marginal {
height: 40px;
}
.title { .title {
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; 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> </style>
<template> <template>
<div class="content q-ma-lg bg-white q-pa-lg"> <div class="content q-ma-lg bg-white">
<div class="tips">
出行人<span class="text-grey-6"
>共計 3人，最多新增20人(含本人)</span
>
</div>
<div> <div>
<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="flex q-py-sm">
<div class="row">
<div class="col-12">中國內地身份證：510181********0920</div>
<div class="col-12">中國內地身份證：510181********0920</div>
</div>
</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>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="title">姓</div> <div class="title">姓</div>
<q-input <q-input
class="form-item" class="form-item"
v-model="form.firstName" v-model="form.Surname"
outlined outlined
placeholder="姓" placeholder="姓"
ref="firstName" ref="Surname"
:rules="[(val) => val !== '' || '请输入姓氏']" :rules="[(val) => !!val || '请输入姓氏']"
></q-input> ></q-input>
</div> </div>
<div class="col"> <div class="col">
<div class="title">名</div> <div class="title">名</div>
<q-input <q-input
ref="lastName" ref="Name"
class="form-item" class="form-item"
placeholder="名" placeholder="名"
v-model="form.lastName" v-model="form.Name"
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']" :rules="[(val) => !!val || '请输入名字']"
></q-input> ></q-input>
</div> </div>
</div> </div>
...@@ -60,106 +140,296 @@ ...@@ -60,106 +140,296 @@
<div class="title">姓氏（需與旅遊證件一致）</div> <div class="title">姓氏（需與旅遊證件一致）</div>
<q-input <q-input
class="form-item" class="form-item"
v-model="form.firstName" v-model="form.EnName"
outlined outlined
placeholder="姓氏（需與旅遊證件一致）" placeholder="姓氏（需與旅遊證件一致）"
ref="firstName" ref="EnName"
:rules="[(val) => val !== '' || '请输入姓氏']" :rules="[(val) => !!val || '请输入姓氏（需與旅遊證件一致）']"
></q-input> ></q-input>
</div> </div>
<div class="col"> <div class="col">
<div class="title">名字（需與旅遊證件一致）</div> <div class="title">名字（需與旅遊證件一致）</div>
<q-input <q-input
ref="lastName" ref="EnSurname"
class="form-item" class="form-item"
placeholder="名字（需與旅遊證件一致）" placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName" v-model="form.EnSurname"
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']" :rules="[(val) => !!val || '请输入名字（需與旅遊證件一致）']"
></q-input> ></q-input>
</div> </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="row">
<div class="col"> <div class="col">
<div class="title">國家/地區代碼</div> <div class="title">國家/地區代碼</div>
<q-select filled v-model="model" :options="options" label="Filled" /> <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>
<div class="col"> <div class="col">
<div class="title">電話（首次需驗證）</div> <div class="title">電話（首次需驗證）</div>
<q-input <q-input
ref="lastName" ref="Moblie"
class="form-item" class="form-item"
placeholder="名字（需與旅遊證件一致）" placeholder="電話（首次需驗證）"
v-model="form.lastName" v-model="form.Moblie"
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']" :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
></q-input> ></q-input>
</div> </div>
</div> </div>
<div class="row">
<div
v-for="(item, index) in form.CardList"
:key="item.id"
class="row"
>
<div class="col"> <div class="col">
<div class="title">出生日期</div><q-date <div class="title">证件类型</div>
v-model="date" <q-select
minimal 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>
<div class="col"> <div class="col">
<div class="title">電子郵件（接收订单确认邮件）</div> <div class="flex justify-between items-center">
<div class="title">证件号码</div>
<div v-if="index > 0" @click="deleteCardItem(item)">删除</div>
</div>
<q-input <q-input
ref="lastName"
class="form-item" class="form-item"
placeholder="名字（需與旅遊證件一致）" placeholder="電話（首次需驗證）"
v-model="form.lastName" v-model="item.CardNo"
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']" :rules="[(val) => !!val || '请输入電話（首次需驗證）']"
></q-input> ></q-input>
</div> </div>
</div> </div>
<q-btn
color="primary"
@click="addCard"
unelevated
outline
label="新增证件"
/>
<div> <div>
<q-btn color="primary" unelevated label="保存" @click="submit" /> <q-btn color="primary" type="submit" unelevated label="保存" />
</div> </div>
</div> </div>
</form>
</div> </div>
</q-dialog>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
isShowDialog: false,
selectedKey: "全部",
form: { form: {
lastName: "", Surname: "",
firstName: "", Name: "",
EnName: "",
EnSurname: "",
Moblie: "",
CardList: [],
}, },
model: '', model: "",
date: '', date: "",
options: [] options: [],
cardList: [],
phoneCountList: [],
count: 0,
pageData: [],
}; };
}, },
mounted() {
this.id = 0;
this.addCard();
this.getUsersList();
this.getCountryInfo();
this.getCardTypeList();
},
methods: { 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() { submit() {
const verifyArr = ['fastName', 'lastName']; this.formHasError = false;
const verifyArr = [
"Surname",
"Name",
"EnName",
"EnSurname",
"Moblie",
];
verifyArr.forEach((item) => { verifyArr.forEach((item) => {
console.log("this.$refs[item]", this, item, this.$refs[item]);
this.$refs[item].validate(); this.$refs[item].validate();
}); });
verifyArr.forEach((item) => { verifyArr.forEach((item) => {
if (item.$refs[item].hasError) { console.log("item", item);
if (this.$refs[item].hasError) {
console.log("item", item);
this.formHasError = true; this.formHasError = true;
} }
}); });
if ((this.formHasError = true)) { console.log("this.formHasError", this.formHasError, this.form);
if (this.formHasError) {
return; 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
);
}, },
}, },
}; };
......
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