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 {
};
</script>
<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-family: "oswald";
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 @@
margin:0 20px;
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 @@
display: block;
}
.nav-item {
margin: 10px 20px;
margin: 10px 28px;
padding: 10px;
}
.select {
width: 184px;
height: 41px;
background: #F43849;
border-radius: 8px;
......
src/pages/usercenter/coupon.vue
View file @ 7bff68e2
......@@ -142,6 +142,7 @@
<div class="flex flex-center q-mt-lg">
<q-btn :disable="CouponTimeStatus !== 1"
color="primary"
@click="useCoupon(item)"
unelevated
outline
label="立即使用"
......@@ -208,6 +209,15 @@ export default {
this.getCouponList();
},
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) {
this.current = value;
this.getCouponList();
......
src/pages/usercenter/order.vue
View file @ 7bff68e2
......@@ -13,9 +13,9 @@
}
.card {
margin: 10px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
border-radius: 8px;
background: #ffffff;
border: 1px solid #eeeeee;
border-radius: 8px;
}
.card-title {
height: 37px;
......@@ -49,19 +49,27 @@ border-radius: 8px;
margin-left: 100px;
}
.name {
width: 300px;
padding: 10px;
max-width: 400px;
}
.user-name {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px;
}
.pay-info {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px;
}
.order-info {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px;
}
.order-action {
padding-top: 10px;
border-left: 1px solid #eee;
width: 120px;
}
.nav-item {
......@@ -76,124 +84,153 @@ border-radius: 8px;
background-color: $primary;
margin: -8px auto 0 auto;
}
.product-img {
width: 64px;
height: 64px;
}
</style>
<template>
<div class="content q-ma-lg bg-white">
<div class="flex justify-between">
<div>
<q-input
ref="lastName"
class="form-item"
placeholder="名字（需與旅遊證件一致）"
v-model="form.lastName"
placeholder="輸入商品名稱/訂單號"
v-model="GoodsName"
clearable
outlined
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
</div>
<div class="tips flex">
<div
@click="changeCouponType(item)"
@click="changeOrderType(item)"
class="nav-item cursor-pointer"
v-for="item in ['全部', '待付款', '待出行', '已完成', '已取消']"
:key="item"
v-for="item in orderEnums"
:key="item.ID"
>
{{ item }}
<div :class="orderStatus === item ? 'border-bottom' : ''"></div>
{{ item.Name }}
<div :class="orderStatus === item.ID ? 'border-bottom' : ''"></div>
</div>
</div>
<div>
<div class="card" v-for="item in orderList" :key="item.id">
<div class="flex card-title justify-between">
<div class="flex">
<span>订单号:{{item.orderNo}}</span>
<span class="phone">联系客服</span>
<span><span class="text-grey-6">订单号:</span>{{ item.orderNo }}</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>
<span>{{item.createTimeStr}}</span>
</div>
<div class="flex q-py-sm">
<img :src="item.goodsPic" />
<div class="name">
<div>{{item.goodsName}}</div>
<div>xl</div>
<div class="flex">
<div class="user-name text-center">
<i class="iconfont iconpeople1"></i>{{ item.surName
}} {{ item.name }}
</div>
<div class="user-name">{{item.surName}}{{item.name}}</div>
<div class="pay-info">
<div>CNY{{item.totalPrice}}</div>
<div>{{item.payType}}</div>
<div class="pay-info text-center">
<div class=" text-grey-6">CNY{{ item.totalPrice }}</div>
<div>{{ item.payTypeStr }}</div>
</div>
<div class="order-info">
<div>等待收貨</div>
<div>订单详情</div>
<div class="order-info text-center">
<div class="primary">{{item.orderStatusStr}}</div>
<div class="q-mt-sm cursor-pointer">订单详情</div>
</div>
<div class="order-action">
<div>确认收货</div>
<div>取消订单</div>
<div class="order-action text-center">
<q-btn
color="primary"
@click="cancalOrder(item)"
unelevated
outline
size="sm"
label="取消订单">
</q-btn>
<div>查看發票</div>
</div>
</div>
</div>
</div>
<noneData v-show="!orderList.length"></noneData>
</div>
</div>
</template>
<script>
import noneData from '../../components/noneData.vue'
import noneData from "../../components/noneData.vue";
export default {
components: {
noneData
noneData,
},
data() {
return {
form: {},
orderEnums: [],
GoodsName: '',
orderList: [],
current: 1,
pageCount: 0,
couponsType: 1, // 优惠券类型 1：抵用券，2：折扣卷
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",
}
orderStatus: "",
};
},
mounted() {
this.getOrderEnums();
this.getOrderList();
},
methods: {
cancalOrder() {},
pageChange(value) {
this.current = value;
this.getOrderList();
},
changeCouponType(item) {
this.orderStatus = item.key;
this.current = 1
this.pageCount = 0
this.orderList = []
this.getOrderList()
changeOrderType(item) {
if (this.orderStatus === item.ID) {
this.orderStatus = "";
} else {
this.orderStatus = item.ID;
}
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() {
this.apipost(
"GetMyDirectOrderPageList_post",
{ pageIndex: this.current, pageSize: 10, orderStatus: this.orderStatus },
{
pageIndex: this.current,
pageSize: 10,
orderStatus: this.orderStatus,
GoodsName: this.GoodsName,
},
(res) => {
if (res.data.resultCode == 1) {
const { count, pageData, pageCount } = res.data.data;
......
src/pages/usercenter/setUsersList.vue
View file @ 7bff68e2
......@@ -75,10 +75,10 @@
margin: -8px auto 0 auto;
}
.card-info {
height: 20px;
padding: 0 4px;
background: #DDDDDD;
border-radius: 8px;
height: 20px;
padding: 0 4px;
background: #dddddd;
border-radius: 8px;
}
</style>
<template>
......@@ -87,33 +87,45 @@ border-radius: 8px;
<div class="card" v-for="item in pageData" :key="item.id">
<div class="flex card-title justify-between">
<div class="flex">
<span>{{item.Name}}</span>
<span class="phone">手機號：{{item.Mobile}}</span>
<span>{{ item.Name }}</span>
<span class="phone">手機號：{{ item.Mobile }}</span>
</div>
<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>
</div>
<div class="flex q-py-sm">
<div class="row q-pa-lg" v-for="(item, index) in item.CardList" :key="index">
<div class="col">中國內地身份證：510181********0920</div>
<div class="col">中國內地身份證：510181********0920</div>
<div class="q-pa-sm">
<div class="q-pa-sm full-width"
:class="{ 'border-b': index < item.CardList.length - 1 }"
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 class="q-pa-sm full-width">
<q-btn class="full-width"
<q-btn
class="full-width"
color="primary"
unelevated
outline
@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 class="mt flex justify-end">
<q-pagination
v-model="current"
:max="pageCount"
......@@ -125,10 +137,9 @@ border-radius: 8px;
/>
</div>
<q-dialog content-style="width: 900px" v-model="isShowDialog">
<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">
<div>
<div class="row">
......@@ -210,19 +221,19 @@ border-radius: 8px;
></q-input>
</div>
</div>
<div
v-for="(item, index) in form.CardList"
: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-for="(item, index) in form.CardList" :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> -->
<img style="width: 15px" src="../../assets/img/delete.png" />
</div>
</div>
<div
class="row"
>
<div class="row">
<div class="col">
<div class="title">证件类型</div>
<q-select
......@@ -252,13 +263,20 @@ border-radius: 8px;
:rules="[(val) => !!val || '请输入证件号码']"
></q-input>
</div>
</div></div>
<q-btn class="ml"
</div>
</div>
<q-btn
class="ml"
color="primary"
@click="addCard"
unelevated
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">
<q-btn color="primary" type="submit" unelevated label="保存" />
</div>
......@@ -302,20 +320,21 @@ export default {
},
methods: {
pageChange(value) {
console.log('pageChange', value)
this.current = value
this.getUsersList()
console.log("pageChange", value);
this.current = value;
this.getUsersList();
},
addUser() {
this.isShowDialog = true
this.isShowDialog = true;
this.form = {
SurName: "",
Name: "",
EnName: "",
EnSurName: "",
Mobile: "",
CardList: [],}
this.addCard()
CardList: [],
};
this.addCard();
},
getCardTypeList() {
this.apipost(
......@@ -324,8 +343,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)
this.cardList.forEach((item) => (item.Id = Number(item.Id)));
console.log("this.cardList", this.cardList);
} else {
// this.$notify(res.data.message);
this.$q.notify({
......@@ -347,7 +366,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({
......@@ -368,12 +387,12 @@ export default {
this.id++;
this.form.CardList.push({
id: this.id,
Type: '',
Type: "",
});
},
deleteCardItem(card) {
const index = this.form.CardList.findIndex(item => item.id === card.id)
this.form.CardList.splice(index, 1)
const index = this.form.CardList.findIndex((item) => item.id === card.id);
this.form.CardList.splice(index, 1);
},
submit() {
this.formHasError = false;
......@@ -401,17 +420,17 @@ export default {
return;
}
for(let i = 0; i < this.form.CardList.length; i++) {
let item = this.form.CardList[i]
if(!item.Type || !item.CardNo) {
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: '证件信息不完善,请补充',
message: "证件信息不完善,请补充",
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
return
return;
}
}
this.submitUserInfo();
......@@ -419,12 +438,12 @@ export default {
getUsersList() {
this.apipost(
"b2c_post_GetTripGuestPageList",
{pageIndex: this.current, pageSize: 10},
{ pageIndex: this.current, pageSize: 10 },
(res) => {
if (res.data.resultCode == 1) {
const { count, pageData, pageCount } = res.data.data;
this.count = count;
this.pageCount = pageCount
this.pageCount = pageCount;
this.pageData = pageData;
} else {
// this.$notify(res.data.message);
......@@ -440,10 +459,10 @@ export default {
);
},
editUser(item) {
console.log('editUser', item)
this.form = {...item}
this.form.AreaCode = Number(this.form.AreaCode)
this.isShowDialog = true
console.log("editUser", item);
this.form = { ...item };
this.form.AreaCode = Number(this.form.AreaCode);
this.isShowDialog = true;
},
deleteUser(item) {
this.apipost(
......@@ -459,7 +478,7 @@ export default {
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
this.current = 1
this.current = 1;
this.getUsersList();
} else {
// this.$notify(res.data.message);
......@@ -491,7 +510,7 @@ export default {
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
this.isShowDialog = false;
this.getUsersList()
this.getUsersList();
} else {
// this.$notify(res.data.message);
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