Skip to content

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

个人中心页面开发

parent f53c40bd
Hide whitespace changes
Inline Side-by-side
Showing with 126 additions and 41 deletions
src/components/base-switch.vue
View file @ 0074de44
......@@ -33,7 +33,7 @@
left:0px;
}
.wrapper input:checked + label {
background:green;
background:#66D344;
}
.wrapper input:checked + label::before {
left: calc(100%);
......
src/components/navs/hor-big-one.vue
View file @ 0074de44
......@@ -266,7 +266,7 @@ color: #EE4454;
</q-btn>
<q-btn label="帮助中心" flat></q-btn>
<q-btn v-if="LoginUser.id <= 0" label="注册" flat></q-btn>
<template v-if="LoginUser.id > 0">
<template v-if="LoginUser.token">
<q-btn-dropdown
style="color: #444; font-weight: bold"
class="q-ml-lg"
......
src/css/app.scss
View file @ 0074de44
......@@ -99,6 +99,9 @@
.f20 {
font-size: 20px;
}
.f22 {
font-size: 22px;
}
.f26 {
font-size: 26px;
}
......
src/pages/usercenter/setAddress.vue
View file @ 0074de44
......@@ -98,14 +98,13 @@
color="blue"
unelevated
outline
@click="isShowDialog = true"
label="添加郵寄地址"
></q-btn>
@click="addAddress"
><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/address-add.png" />添加郵寄地址</q-btn>
</div>
</div>
<q-dialog content-style="width: 900px" v-model="isShowDialog">
<div class="bg-white dialog-box" style="width: 800px; padding: 20px">
<div>添加邮寄地址</div>
<div class="f22 bold">{{form.Id ? '编辑': '添加'}}邮寄地址</div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div>
<div class="row">
......@@ -126,6 +125,8 @@
<div class="title">選擇手機區號</div>
<q-select
ref="AreaCode"
emit-value
map-options
square
outlined
option-value="ID"
......@@ -154,6 +155,8 @@
<div class="col">
<div class="title">國家/地區</div>
<q-select
emit-value
map-options
ref="CountryId"
square
outlined
......@@ -244,6 +247,12 @@ export default {
this.getCountryInfo();
},
methods: {
addAddress() {
this.isShowDialog = true
this.form = {
Name: "",
Mobile: "",}
},
getCountryInfo() {
this.apipost(
"GetCountryInfo_post",
......@@ -322,6 +331,7 @@ export default {
editUser(item) {
console.log("editUser", item);
this.form = {...item};
this.form.AreaCode = Number(this.form.AreaCode)
this.form.IsDefault = this.form.IsDefault === 1
this.isShowDialog = true;
},
......@@ -355,8 +365,8 @@ export default {
},
submitUserInfo() {
let params = { ...this.form };
params.AreaCode = params.AreaCode.ID;
params.CountryId = params.CountryId.ID;
// params.AreaCode = params.AreaCode.ID;
// params.CountryId = params.CountryId.ID;
params.IsDefault = params.IsDefault ? 1 : 2;
this.apipost(
"b2c_post_SetMailingAddressInfo",
......
src/pages/usercenter/setUserInfo.vue
View file @ 0074de44
......@@ -93,6 +93,8 @@
<div class="col">
<div class="title">居住國家/地區</div>
<q-select
emit-value
map-options
ref="Country"
square
outlined
......@@ -108,6 +110,8 @@
<div class="col">
<div class="title">稱謂</div>
<q-select
emit-value
map-options
ref="Appellation"
square
outlined
......@@ -126,6 +130,8 @@
<div class="col">
<div class="title">國家/地區代碼</div>
<q-select
emit-value
map-options
ref="PhoneCountry"
square
outlined
......
src/pages/usercenter/setUsersList.vue
View file @ 0074de44
......@@ -8,8 +8,7 @@
width: 900px;
}
.title {
margin-top: 20px;
margin-bottom: 10px;
margin: 20px 10px 10px 10px;
}
.card {
margin: 10px;
......@@ -75,6 +74,12 @@
background-color: $primary;
margin: -8px auto 0 auto;
}
.card-info {
height: 20px;
padding: 0 4px;
background: #DDDDDD;
border-radius: 8px;
}
</style>
<template>
<div class="content q-ma-lg bg-white">
......@@ -98,17 +103,32 @@
</div>
</div>
</div>
<q-btn
<div class="q-pa-sm full-width">
<q-btn class="full-width"
color="primary"
unelevated
outline
@click="isShowDialog = true"
label="添加出行人"
></q-btn>
@click="addUser"
><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/add.png" />添加出行人</q-btn>
</div>
<div class="mt flex justify-end">
<q-pagination
v-model="current"
:max="pageCount"
direction-links
color="primary"
active-color="primary"
:max-pages="5"
@input="pageChange"
/>
</div>
<q-dialog content-style="width: 900px" v-model="isShowDialog">
<div class="bg-white dialog-box" style="width: 800px; padding: 20px">
<div>添加邮寄地址</div>
<div class="f22 bold">{{form.Id ? '编辑': '新增'}}出行人信息</div>
<form @submit.prevent.stop="submit" class="q-gutter-md">
<div>
<div class="row">
......@@ -164,43 +184,53 @@
<div class="col">
<div class="title">國家/地區代碼</div>
<q-select
ref="PhoneCountry"
emit-value
map-options
ref="AreaCode"
square
outlined
option-value="ID"
option-label="PhoneCode"
class="form-item"
v-model="form.PhoneCountry"
v-model="form.AreaCode"
:options="phoneCountList"
placeholder="Filled"
placeholder="请选择國家/地區代碼"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div>
<div class="col">
<div class="title">電話（首次需驗證）</div>
<div class="title">手機號</div>
<q-input
ref="Mobile"
class="form-item"
placeholder="電話（首次需驗證）"
placeholder="手機號"
v-model="form.Mobile"
outlined
:rules="[(val) => !!val || '请输入電話（首次需驗證）']"
:rules="[(val) => !!val || '请输入手機號']"
></q-input>
</div>
</div>
<div
<div
v-for="(item, index) in form.CardList"
:key="item.id"
:key="item.id">
<div class="flex justify-between ml mr q-mt-lg" style="margin-bottom: -10px"><span class="card-info">证件信息#{{index+ 1}}</span>
<div v-if="index > 0" @click="deleteCardItem(item)">
<i class="iconfont iconline"></i>
<i class="iconfont icondelete"></i>
</div>
</div>
<div
class="row"
>
<div class="col">
<div class="title">证件类型</div>
<q-select
emit-value
map-options
ref="card"
square
outlined
option-value="ID"
option-value="Id"
option-label="Name"
class="form-item"
v-model="item.Type"
......@@ -212,25 +242,23 @@
<div class="col">
<div class="title flex justify-between items-center">
<div>证件号码</div>
<div v-if="index > 0" @click="deleteCardItem(item)">删除</div>
</div>
<q-input
class="form-item"
placeholder="電話（首次需驗證）"
placeholder="证件号码"
v-model="item.CardNo"
outlined
:rules="[(val) => !!val || '请输入電話（首次需驗證）']"
:rules="[(val) => !!val || '请输入证件号码']"
></q-input>
</div>
</div>
<q-btn
</div></div>
<q-btn class="ml"
color="primary"
@click="addCard"
unelevated
outline
label="新增证件"
/>
<div>
><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/add.png" />新增证件</q-btn>
<div class="mt flex flex-center">
<q-btn color="primary" type="submit" unelevated label="保存" />
</div>
</div>
......@@ -243,6 +271,8 @@
export default {
data() {
return {
current: 1,
pageCount: 0,
isShowDialog: false,
selectedKey: "全部",
form: {
......@@ -270,6 +300,22 @@ export default {
this.getCardTypeList();
},
methods: {
pageChange(value) {
console.log('pageChange', value)
this.current = value
this.getUsersList()
},
addUser() {
this.isShowDialog = true
this.form = {
SurName: "",
Name: "",
EnName: "",
EnSurName: "",
Mobile: "",
CardList: [],}
this.addCard()
},
getCardTypeList() {
this.apipost(
"b2c_post_GetTripCardEnumList",
......@@ -277,6 +323,8 @@ export default {
(res) => {
if (res.data.resultCode == 1) {
this.cardList = res.data.data;
this.cardList.forEach(item => item.Id = Number(item.Id));
console.log('this.cardList', this.cardList)
} else {
// this.$notify(res.data.message);
this.$q.notify({
......@@ -298,7 +346,7 @@ export default {
if (res.data.resultCode == 1) {
const { phoneCountList, countList } = res.data.data;
this.countList = countList;
this.phoneCountList = phoneCountList;
this.phoneCountList = phoneCountList
} else {
// this.$notify(res.data.message);
this.$q.notify({
......@@ -319,6 +367,7 @@ export default {
this.id++;
this.form.CardList.push({
id: this.id,
Type: '',
});
},
deleteCardItem(card) {
......@@ -333,6 +382,7 @@ export default {
"EnName",
"EnSurName",
"Mobile",
"AreaCode",
];
verifyArr.forEach((item) => {
console.log("this.$refs[item]", this, item, this.$refs[item]);
......@@ -349,16 +399,31 @@ export default {
if (this.formHasError) {
return;
}
for(let i = 0; i < this.form.CardList.length; i++) {
let item = this.form.CardList[i]
if(!item.Type || !item.CardNo) {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: '证件信息不完善,请补充',
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
return
}
}
this.submitUserInfo();
},
getUsersList() {
this.apipost(
"b2c_post_GetTripGuestPageList",
{pageIndex: 1, pageSize: 20},
{pageIndex: this.current, pageSize: 10},
(res) => {
if (res.data.resultCode == 1) {
const { count, pageData } = res.data.data;
const { count, pageData, pageCount } = res.data.data;
this.count = count;
this.pageCount = pageCount
this.pageData = pageData;
} else {
// this.$notify(res.data.message);
......@@ -375,7 +440,8 @@ export default {
},
editUser(item) {
console.log('editUser', item)
this.form = item
this.form = {...item}
this.form.AreaCode = Number(this.form.AreaCode)
this.isShowDialog = true
},
deleteUser(item) {
......@@ -392,6 +458,7 @@ export default {
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
this.current = 1
this.getUsersList();
} else {
// this.$notify(res.data.message);
......@@ -408,10 +475,9 @@ export default {
},
submitUserInfo() {
let params = { ...this.form };
params.PhoneCountry = params.PhoneCountry.ID;
params.CardList.forEach(item => {
item.Type = item.Type.Id
})
// params.CardList.forEach(item => {
// item.Type = item.Type.Id
// })
this.apipost(
"b2c_post_SetTripGuestInfo",
params,
......
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