Skip to content

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

个人中心页功能开发

parent 59bd7dfd
Show whitespace changes
Inline Side-by-side
Showing with 248 additions and 180 deletions
src/App.vue
View file @ 7bff68e2
...@@ -10,7 +10,7 @@ export default { ...@@ -10,7 +10,7 @@ export default {
}; };
</script> </script>
<style> <style>
@import url("//at.alicdn.com/t/c/font_1890699_sm7qminrp2.css"); @import url("//at.alicdn.com/t/c/font_1890699_yrr2mh5n7ln.css");
@font-face { @font-face {
font-family: "oswald"; font-family: "oswald";
src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf"); src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");
......
src/css/app.scss
View file @ 7bff68e2
...@@ -142,3 +142,6 @@ ...@@ -142,3 +142,6 @@
margin:0 20px; margin:0 20px;
cursor: pointer; cursor: pointer;
} }
.border-b {
border-bottom: 1px solid #eee;
}
\ No newline at end of file
src/pages/usercenter/components/navs.vue
View file @ 7bff68e2
...@@ -12,11 +12,10 @@ ...@@ -12,11 +12,10 @@
display: block; display: block;
} }
.nav-item { .nav-item {
margin: 10px 20px; margin: 10px 28px;
padding: 10px; padding: 10px;
} }
.select { .select {
width: 184px;
height: 41px; height: 41px;
background: #F43849; background: #F43849;
border-radius: 8px; border-radius: 8px;
......
src/pages/usercenter/coupon.vue
View file @ 7bff68e2
...@@ -142,6 +142,7 @@ ...@@ -142,6 +142,7 @@
<div class="flex flex-center q-mt-lg"> <div class="flex flex-center q-mt-lg">
<q-btn :disable="CouponTimeStatus !== 1" <q-btn :disable="CouponTimeStatus !== 1"
color="primary" color="primary"
@click="useCoupon(item)"
unelevated unelevated
outline outline
label="立即使用" label="立即使用"
...@@ -208,6 +209,15 @@ export default { ...@@ -208,6 +209,15 @@ export default {
this.getCouponList(); this.getCouponList();
}, },
methods: { methods: {
useCoupon(coupon) {
console.log('useCoupon', coupon)
const id = coupon.couponsType - 1
if(id) {
this.CommonJump('/search', {categoryId: id})
} else {
this.CommonJump('/index')
}
},
pageChange(value) { pageChange(value) {
this.current = value; this.current = value;
this.getCouponList(); this.getCouponList();
......
src/pages/usercenter/order.vue
View file @ 7bff68e2
...@@ -13,9 +13,9 @@ ...@@ -13,9 +13,9 @@
} }
.card { .card {
margin: 10px; margin: 10px;
background: #FFFFFF; background: #ffffff;
border: 1px solid #EEEEEE; border: 1px solid #eeeeee;
border-radius: 8px; border-radius: 8px;
} }
.card-title { .card-title {
height: 37px; height: 37px;
...@@ -49,19 +49,27 @@ border-radius: 8px; ...@@ -49,19 +49,27 @@ border-radius: 8px;
margin-left: 100px; margin-left: 100px;
} }
.name { .name {
width: 300px;
padding: 10px; padding: 10px;
max-width: 400px;
} }
.user-name { .user-name {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px; width: 120px;
} }
.pay-info { .pay-info {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px; width: 120px;
} }
.order-info { .order-info {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px; width: 120px;
} }
.order-action { .order-action {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px; width: 120px;
} }
.nav-item { .nav-item {
...@@ -76,124 +84,153 @@ border-radius: 8px; ...@@ -76,124 +84,153 @@ border-radius: 8px;
background-color: $primary; background-color: $primary;
margin: -8px auto 0 auto; margin: -8px auto 0 auto;
} }
.product-img {
width: 64px;
height: 64px;
}
</style> </style>
<template> <template>
<div class="content q-ma-lg bg-white"> <div class="content q-ma-lg bg-white">
<div class="flex justify-between"> <div class="flex justify-between">
<div> <div>
<q-input <q-input
ref="lastName"
class="form-item" class="form-item"
placeholder="名字（需與旅遊證件一致）" placeholder="輸入商品名稱/訂單號"
v-model="form.lastName" v-model="GoodsName"
clearable
outlined outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input> ></q-input>
</div> </div>
</div> </div>
<div class="tips flex"> <div class="tips flex">
<div <div
@click="changeCouponType(item)" @click="changeOrderType(item)"
class="nav-item cursor-pointer" class="nav-item cursor-pointer"
v-for="item in ['全部', '待付款', '待出行', '已完成', '已取消']" v-for="item in orderEnums"
:key="item" :key="item.ID"
> >
{{ item }} {{ item.Name }}
<div :class="orderStatus === item ? 'border-bottom' : ''"></div> <div :class="orderStatus === item.ID ? 'border-bottom' : ''"></div>
</div> </div>
</div> </div>
<div> <div>
<div class="card" v-for="item in orderList" :key="item.id"> <div class="card" v-for="item in orderList" :key="item.id">
<div class="flex card-title justify-between"> <div class="flex card-title justify-between">
<div class="flex"> <div class="flex">
<span>订单号:{{item.orderNo}}</span> <span><span class="text-grey-6">订单号:</span>{{ item.orderNo }}</span>
<span class="phone">联系客服</span> <span class="phone text-grey-6">
<i class="iconfont iconmessage"></i>
联系客服
</span>
</div>
<span class="text-grey-6">{{ item.createTimeStr }}</span>
</div>
<div class="flex justify-between">
<div class="name flex no-wrap">
<img class="product-img mr" :src="item.goodsPic" />
<div style="max-width: 300px">
<div class="ellipsis-2">{{ item.goodsName }}</div>
<div>x1</div>
</div> </div>
<span>{{item.createTimeStr}}</span>
</div> </div>
<div class="flex q-py-sm"> <div class="flex">
<img :src="item.goodsPic" /> <div class="user-name text-center">
<div class="name"> <i class="iconfont iconpeople1"></i>{{ item.surName
<div>{{item.goodsName}}</div> }} {{ item.name }}
<div>xl</div>
</div> </div>
<div class="user-name">{{item.surName}}{{item.name}}</div> <div class="pay-info text-center">
<div class="pay-info"> <div class=" text-grey-6">CNY{{ item.totalPrice }}</div>
<div>CNY{{item.totalPrice}}</div> <div>{{ item.payTypeStr }}</div>
<div>{{item.payType}}</div>
</div> </div>
<div class="order-info"> <div class="order-info text-center">
<div>等待收貨</div> <div class="primary">{{item.orderStatusStr}}</div>
<div>订单详情</div> <div class="q-mt-sm cursor-pointer">订单详情</div>
</div> </div>
<div class="order-action"> <div class="order-action text-center">
<div>确认收货</div> <q-btn
<div>取消订单</div> color="primary"
@click="cancalOrder(item)"
unelevated
outline
size="sm"
label="取消订单">
</q-btn>
<div>查看發票</div> <div>查看發票</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<noneData v-show="!orderList.length"></noneData>
</div>
</div> </div>
</template> </template>
<script> <script>
import noneData from '../../components/noneData.vue' import noneData from "../../components/noneData.vue";
export default { export default {
components: { components: {
noneData noneData,
}, },
data() { data() {
return { return {
form: {}, orderEnums: [],
GoodsName: '',
orderList: [], orderList: [],
current: 1, current: 1,
pageCount: 0, pageCount: 0,
couponsType: 1, // 优惠券类型 1：抵用券，2：折扣卷 orderStatus: "",
orderStatus: 1, // 优惠券状态（b2b）1-可使用，2-已使用，3-已过期
CouponsUseScope: 1, // 平台1:全场通用,2:团队,3:签证,4:机票,5:门票,6:车辆,7:自由行,8:当地游
useScopeMap: {
1: "全场通用",
2: "团队",
3: "签证",
4: "机票",
5: "门票",
6: "车辆",
7: "自由行",
8: "当地游",
},
statusMap: [{key: 1, label: "可使用", },{key: 2, label: "已使用",},{key: 3, label: "已过期"}],
colorMap: {
1: "bg-blue",
2: "bg-blue",
3: "bg-red",
4: "bg-yellow",
5: "bg-green",
6: "bg-green",
7: "bg-red",
8: "bg-yellow",
}
}; };
}, },
mounted() { mounted() {
this.getOrderEnums();
this.getOrderList(); this.getOrderList();
}, },
methods: { methods: {
cancalOrder() {},
pageChange(value) { pageChange(value) {
this.current = value; this.current = value;
this.getOrderList(); this.getOrderList();
}, },
changeCouponType(item) { changeOrderType(item) {
this.orderStatus = item.key; if (this.orderStatus === item.ID) {
this.current = 1 this.orderStatus = "";
this.pageCount = 0 } else {
this.orderList = [] this.orderStatus = item.ID;
this.getOrderList() }
this.current = 1;
this.pageCount = 0;
this.orderList = [];
this.getOrderList();
},
getOrderEnums() {
this.apipost(
"GetDirectOrderStatusEnum_post",
{},
(res) => {
if (res.data.resultCode == 1) {
this.orderEnums = res.data.data;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
}, },
getOrderList() { getOrderList() {
this.apipost( this.apipost(
"GetMyDirectOrderPageList_post", "GetMyDirectOrderPageList_post",
{ pageIndex: this.current, pageSize: 10, orderStatus: this.orderStatus }, {
pageIndex: this.current,
pageSize: 10,
orderStatus: this.orderStatus,
GoodsName: this.GoodsName,
},
(res) => { (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
const { count, pageData, pageCount } = res.data.data; const { count, pageData, pageCount } = res.data.data;
......
src/pages/usercenter/setUsersList.vue
View file @ 7bff68e2
...@@ -75,10 +75,10 @@ ...@@ -75,10 +75,10 @@
margin: -8px auto 0 auto; margin: -8px auto 0 auto;
} }
.card-info { .card-info {
height: 20px; height: 20px;
padding: 0 4px; padding: 0 4px;
background: #DDDDDD; background: #dddddd;
border-radius: 8px; border-radius: 8px;
} }
</style> </style>
<template> <template>
...@@ -87,33 +87,45 @@ border-radius: 8px; ...@@ -87,33 +87,45 @@ border-radius: 8px;
<div class="card" v-for="item in pageData" :key="item.id"> <div class="card" v-for="item in pageData" :key="item.id">
<div class="flex card-title justify-between"> <div class="flex card-title justify-between">
<div class="flex"> <div class="flex">
<span>{{item.Name}}</span> <span>{{ item.Name }}</span>
<span class="phone">手機號：{{item.Mobile}}</span> <span class="phone">手機號：{{ item.Mobile }}</span>
</div> </div>
<span> <span>
<span class="user-edit" @click="editUser(item)">编辑</span> <span class="user-edit" @click="editUser(item)">编辑</span>
<span class="text-grey-6 cursor-pointer" @click="deleteUser(item)">删除</span> <span class="text-grey-6 cursor-pointer" @click="deleteUser(item)"
>删除</span
>
</span> </span>
</div> </div>
<div class="flex q-py-sm"> <div class="q-pa-sm">
<div class="row q-pa-lg" v-for="(item, index) in item.CardList" :key="index"> <div class="q-pa-sm full-width"
<div class="col">中國內地身份證：510181********0920</div> :class="{ 'border-b': index < item.CardList.length - 1 }"
<div class="col">中國內地身份證：510181********0920</div> v-for="(el, index) in item.CardList"
:key="index"
>
<div class="row">
<div class="col-6">{{ el.TypeName }}</div>
<div class="col-6">{{ el.CardNo }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="q-pa-sm full-width"> <div class="q-pa-sm full-width">
<q-btn
<q-btn class="full-width" class="full-width"
color="primary" color="primary"
unelevated unelevated
outline outline
@click="addUser" @click="addUser"
><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/add.png" />添加出行人</q-btn> ><img
class="q-mr-sm"
style="width: 28px"
src="../../assets/img/add.png"
/>添加出行人</q-btn
>
</div> </div>
<div class="mt flex justify-end"> <div class="mt flex justify-end">
<q-pagination <q-pagination
v-model="current" v-model="current"
:max="pageCount" :max="pageCount"
...@@ -125,10 +137,9 @@ border-radius: 8px; ...@@ -125,10 +137,9 @@ border-radius: 8px;
/> />
</div> </div>
<q-dialog content-style="width: 900px" v-model="isShowDialog"> <q-dialog content-style="width: 900px" v-model="isShowDialog">
<div class="bg-white dialog-box" style="width: 800px; padding: 20px"> <div class="bg-white dialog-box" style="width: 800px; padding: 20px">
<div class="f22 bold">{{form.Id ? '编辑': '新增'}}出行人信息</div> <div class="f22 bold">{{ form.Id ? "编辑" : "新增" }}出行人信息</div>
<form @submit.prevent.stop="submit" class="q-gutter-md"> <form @submit.prevent.stop="submit" class="q-gutter-md">
<div> <div>
<div class="row"> <div class="row">
...@@ -210,19 +221,19 @@ border-radius: 8px; ...@@ -210,19 +221,19 @@ border-radius: 8px;
></q-input> ></q-input>
</div> </div>
</div> </div>
<div <div v-for="(item, index) in form.CardList" :key="item.id">
v-for="(item, index) in form.CardList" <div
:key="item.id"> class="flex justify-between ml mr q-mt-lg"
<div class="flex justify-between ml mr q-mt-lg" style="margin-bottom: -10px"><span class="card-info">证件信息#{{index+ 1}}</span> style="margin-bottom: -10px"
>
<span class="card-info">证件信息#{{ index + 1 }}</span>
<div v-if="index > 0" @click="deleteCardItem(item)"> <div v-if="index > 0" @click="deleteCardItem(item)">
<!-- <i class="iconfont iconline"></i> <!-- <i class="iconfont iconline"></i>
<i class="iconfont icondelete"></i> --> <i class="iconfont icondelete"></i> -->
<img style="width: 15px" src="../../assets/img/delete.png" /> <img style="width: 15px" src="../../assets/img/delete.png" />
</div> </div>
</div> </div>
<div <div class="row">
class="row"
>
<div class="col"> <div class="col">
<div class="title">证件类型</div> <div class="title">证件类型</div>
<q-select <q-select
...@@ -252,13 +263,20 @@ border-radius: 8px; ...@@ -252,13 +263,20 @@ border-radius: 8px;
:rules="[(val) => !!val || '请输入证件号码']" :rules="[(val) => !!val || '请输入证件号码']"
></q-input> ></q-input>
</div> </div>
</div></div> </div>
<q-btn class="ml" </div>
<q-btn
class="ml"
color="primary" color="primary"
@click="addCard" @click="addCard"
unelevated unelevated
outline outline
><img class="q-mr-sm" style="width: 28px;" src="../../assets/img/add.png" />新增证件</q-btn> ><img
class="q-mr-sm"
style="width: 28px"
src="../../assets/img/add.png"
/>新增证件</q-btn
>
<div class="mt flex flex-center"> <div class="mt flex flex-center">
<q-btn color="primary" type="submit" unelevated label="保存" /> <q-btn color="primary" type="submit" unelevated label="保存" />
</div> </div>
...@@ -302,20 +320,21 @@ export default { ...@@ -302,20 +320,21 @@ export default {
}, },
methods: { methods: {
pageChange(value) { pageChange(value) {
console.log('pageChange', value) console.log("pageChange", value);
this.current = value this.current = value;
this.getUsersList() this.getUsersList();
}, },
addUser() { addUser() {
this.isShowDialog = true this.isShowDialog = true;
this.form = { this.form = {
SurName: "", SurName: "",
Name: "", Name: "",
EnName: "", EnName: "",
EnSurName: "", EnSurName: "",
Mobile: "", Mobile: "",
CardList: [],} CardList: [],
this.addCard() };
this.addCard();
}, },
getCardTypeList() { getCardTypeList() {
this.apipost( this.apipost(
...@@ -324,8 +343,8 @@ export default { ...@@ -324,8 +343,8 @@ export default {
(res) => { (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.cardList = res.data.data; this.cardList = res.data.data;
this.cardList.forEach(item => item.Id = Number(item.Id)); this.cardList.forEach((item) => (item.Id = Number(item.Id)));
console.log('this.cardList', this.cardList) console.log("this.cardList", this.cardList);
} else { } else {
// this.$notify(res.data.message); // this.$notify(res.data.message);
this.$q.notify({ this.$q.notify({
...@@ -347,7 +366,7 @@ export default { ...@@ -347,7 +366,7 @@ export default {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
const { phoneCountList, countList } = res.data.data; const { phoneCountList, countList } = res.data.data;
this.countList = countList; this.countList = countList;
this.phoneCountList = phoneCountList this.phoneCountList = phoneCountList;
} else { } else {
// this.$notify(res.data.message); // this.$notify(res.data.message);
this.$q.notify({ this.$q.notify({
...@@ -368,12 +387,12 @@ export default { ...@@ -368,12 +387,12 @@ export default {
this.id++; this.id++;
this.form.CardList.push({ this.form.CardList.push({
id: this.id, id: this.id,
Type: '', Type: "",
}); });
}, },
deleteCardItem(card) { deleteCardItem(card) {
const index = this.form.CardList.findIndex(item => item.id === card.id) const index = this.form.CardList.findIndex((item) => item.id === card.id);
this.form.CardList.splice(index, 1) this.form.CardList.splice(index, 1);
}, },
submit() { submit() {
this.formHasError = false; this.formHasError = false;
...@@ -401,17 +420,17 @@ export default { ...@@ -401,17 +420,17 @@ export default {
return; return;
} }
for(let i = 0; i < this.form.CardList.length; i++) { for (let i = 0; i < this.form.CardList.length; i++) {
let item = this.form.CardList[i] let item = this.form.CardList[i];
if(!item.Type || !item.CardNo) { if (!item.Type || !item.CardNo) {
// this.$notify(res.data.message); // this.$notify(res.data.message);
this.$q.notify({ this.$q.notify({
type: "negative", type: "negative",
message: '证件信息不完善,请补充', message: "证件信息不完善,请补充",
position: "top", position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时 timeout: 2000, // 以毫秒为单位; 0意味着没有超时
}); });
return return;
} }
} }
this.submitUserInfo(); this.submitUserInfo();
...@@ -419,12 +438,12 @@ export default { ...@@ -419,12 +438,12 @@ export default {
getUsersList() { getUsersList() {
this.apipost( this.apipost(
"b2c_post_GetTripGuestPageList", "b2c_post_GetTripGuestPageList",
{pageIndex: this.current, pageSize: 10}, { pageIndex: this.current, pageSize: 10 },
(res) => { (res) => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
const { count, pageData, pageCount } = res.data.data; const { count, pageData, pageCount } = res.data.data;
this.count = count; this.count = count;
this.pageCount = pageCount this.pageCount = pageCount;
this.pageData = pageData; this.pageData = pageData;
} else { } else {
// this.$notify(res.data.message); // this.$notify(res.data.message);
...@@ -440,10 +459,10 @@ export default { ...@@ -440,10 +459,10 @@ export default {
); );
}, },
editUser(item) { editUser(item) {
console.log('editUser', item) console.log("editUser", item);
this.form = {...item} this.form = { ...item };
this.form.AreaCode = Number(this.form.AreaCode) this.form.AreaCode = Number(this.form.AreaCode);
this.isShowDialog = true this.isShowDialog = true;
}, },
deleteUser(item) { deleteUser(item) {
this.apipost( this.apipost(
...@@ -459,7 +478,7 @@ export default { ...@@ -459,7 +478,7 @@ export default {
position: "top", position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时 timeout: 2000, // 以毫秒为单位; 0意味着没有超时
}); });
this.current = 1 this.current = 1;
this.getUsersList(); this.getUsersList();
} else { } else {
// this.$notify(res.data.message); // this.$notify(res.data.message);
...@@ -491,7 +510,7 @@ export default { ...@@ -491,7 +510,7 @@ export default {
timeout: 2000, // 以毫秒为单位; 0意味着没有超时 timeout: 2000, // 以毫秒为单位; 0意味着没有超时
}); });
this.isShowDialog = false; this.isShowDialog = false;
this.getUsersList() this.getUsersList();
} else { } else {
// this.$notify(res.data.message); // this.$notify(res.data.message);
this.$q.notify({ this.$q.notify({
......
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