Skip to content

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

个人中心页面功能开发

parent cbe70c63
Hide whitespace changes
Inline Side-by-side
Showing with 310 additions and 122 deletions
src/components/noneData.vue 0 → 100644
View file @ 6349bb0b
<template>
<div class="flex flex-center">
<div>
<img class="img" src="../assets/img/none.png">
<div class="text">{{text}}</div>
</div>
</div>
</template>
<style scoped>
.img {
width: 267px;
height: 150px;
}
.text {
text-align: center;
}
</style>
<script>
export default {
props: {
text: {
default: '暂无数据'
}
},
data() {
return {
inputSelect: false
}
},
}
</script>
\ No newline at end of file
src/pages/usercenter/components/navs.vue
View file @ 6349bb0b
......@@ -12,7 +12,15 @@
display: block;
}
.nav-item {
padding: 10px 30px;
margin: 10px 20px;
padding: 10px;
}
.select {
width: 184px;
height: 41px;
background: #F43849;
border-radius: 8px;
color: #ffffff;
}
</style>
<template>
......@@ -29,12 +37,13 @@
@click="navigateTo(item.key)"
v-for="item in menuList"
:key="item.key"
:class="{'select': selectKey === item.key}"
>
<div class="flex items-center">
<i class="iconfont icontime"></i>
<i class="iconfont" :class="item.icon"></i>
<span class="q-ml-lg">{{ item.label }}</span>
</div>
<span class="text-primary">{{ item.label }}</span>
<!-- <span class="text-primary">{{ item.label }}</span> -->
</div>
</div>
</div>
......@@ -44,9 +53,10 @@
@click="navigateTo(item.key)"
v-for="item in menuList2"
:key="item.key"
:class="{'select': selectKey === item.key}"
>
<div class="flex items-center">
<i class="iconfont icontime"></i>
<i class="iconfont" :class="item.icon"></i>
<span class="q-ml-lg">{{ item.label }}</span>
</div>
<!-- <span class="text-primary">{{item.label}}</span> -->
......@@ -58,28 +68,29 @@
export default {
data() {
return {
selectKey: '',
LoginUser: {},
menuList: [
{
icon: "",
icon: "iconqianbao",
key: "/coupon",
label: "可用優惠券",
number: "",
},
{
icon: "",
icon: "iconorder",
key: "/order",
label: "訂單",
number: "",
},
{
icon: "",
icon: "iconmessage",
key: "",
label: "我的评价",
number: "",
},
{
icon: "",
icon: "iconmoney-credit-card",
key: "/payInfo",
label: "支付管理",
number: "",
......@@ -87,25 +98,25 @@ export default {
],
menuList2: [
{
icon: "",
icon: "iconpeople1",
key: "/setUsersList",
label: "出行人信息管理",
number: "",
},
{
icon: "",
icon: "iconemail",
key: "/setAddress",
label: "管理邮寄地址",
number: "",
},
{
icon: "",
icon: "iconcomputer",
key: "/loginInfo",
label: "登录方式管理",
number: "",
},
{
icon: "",
icon: "iconset",
key: "/setInfo",
label: "账户设置",
number: "",
......@@ -114,13 +125,14 @@ export default {
};
},
mounted() {
this.selectKey = this.$route.path
if (localStorage.b2bUser) {
this.LoginUser = JSON.parse(window.localStorage.getItem("b2bUser"));
}
},
methods: {
navigateTo(route) {
console.log("usercenter navigateTo", route);
this.selectKey= route
this.CommonJump(route, {});
},
},
......
src/pages/usercenter/coupon.vue
View file @ 6349bb0b
......@@ -15,6 +15,13 @@
padding: 0 35px;
line-height: 42px;
}
.bg-grey {
background: #aaa;
border-radius: 8px 8px 0 0;
.use {
color: #fff !important;
}
}
.bg-blue {
background: #70b1fa;
border-radius: 8px 8px 0 0;
......@@ -26,21 +33,21 @@
background: #ee727d;
border-radius: 8px 8px 0 0;
.use {
color: #6F242B;
color: #6f242b;
}
}
.bg-yellow {
background: #f2c16b;
border-radius: 8px 8px 0 0;
.use {
color: #8A5D10;
color: #8a5d10;
}
}
.bg-green {
background: #67cac2;
border-radius: 8px 8px 0 0;
.use {
color: #195954 ;
color: #195954;
}
}
.card {
......@@ -64,8 +71,32 @@
}
.img {
width: 201px;
margin-bottom: -6px;
margin-bottom: -6px;
}
.deadline {
width: 68px;
height: 68px;
background: #ffea01;
border-radius: 8px 0 0 0;
clip-path: polygon(0 0, 0% 100%, 100% 0);
.text {
transform: translate(-5px, 10px) rotate(315deg);
}
}
.circle {
width: 24px;
height: 10px;
left: 88px;
border-radius: 0 0 14px 14px;
background: #f9f9f9;
}
// .circle:after {
// content: '.';
// display: block;
// height: 0;
// clear: both;
// visibility: hidden;
// }
</style>
<template>
<div class="content q-ma-lg bg-white">
......@@ -74,73 +105,142 @@
<div
@click="changeCouponType(item)"
class="nav-item cursor-pointer"
v-for="item in ['可使用', '已使用', '已过期']"
:key="item"
v-for="item in statusMap"
:key="item.key"
>
{{ item }}
<div :class="selectedKey === item ? 'border-bottom' : ''"></div>
{{ item.label }}
<div :class="CouponTimeStatus === item.key ? 'border-bottom' : ''"></div>
</div>
</div>
<div class="flex flex-wrap">
<div class="card" v-for="item in 10" :key="item">
<div class="bg-blue">
<div class="white text-center f16 q-pt-sm">CYN</div>
<div class="white text-center f26">10</div>
<div class="card" v-for="item in couponList" :key="item.id">
<div class="bg-blue relative" :class="[colorMap[item.couponsUseScope], {'bg-grey': CouponTimeStatus !== 1}]">
<div v-if="item.IsEnd" class="absolute deadline">
<div class="text f12">即將過期</div>
</div>
<div class="absolute circle"></div>
<div class="white text-center f16 q-pt-lg">CYN</div>
<div class="white text-center f26">{{ item.denomination }}</div>
<div class="white text-center">
<span>限用品類：</span><span>滿2000可用</span>
<span>满{{ item.useCondition }}可用</span>
</div>
<div class="use text-center q-pb-sm">
<span>限用品類：</span><span>滿2000可用</span>
<div class="use text-center q-pt-sm">
<span>{{ item.effectDate }}</span
>-<span>{{ item.expirationDate }}</span>
</div>
<img class="img" src="../../assets/img/coupon.png">
<img class="img" src="../../assets/img/coupon.png" />
</div>
<div class="q-pa-sm">
<div class="q-my-sm">
<span class="text-grey-6">限用品類：</span><span>滿2000可用</span>
<span class="text-grey-6">限用品類：</span
><span>{{ useScopeMap[item.couponsUseScope] }}</span>
</div>
<div class="q-my-sm">
<span class="text-grey-6">限用品類：</span><span>滿2000可用</span>
<span class="text-grey-6">券碼編號：</span
><span>{{ item.activateCode }}</span>
</div>
<div class="flex flex-center q-mt-xl">
<q-btn color="primary" unelevated outline label="立即使用"></q-btn>
<div class="flex flex-center q-mt-lg">
<q-btn :disable="CouponTimeStatus !== 1"
color="primary"
unelevated
outline
label="立即使用"
></q-btn>
</div>
</div>
</div>
</div>
<div v-if="!couponList.length ">
<none-data></none-data>
</div>
</div>
<div v-show="pageCount" 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>
</div>
</template>
<script>
import noneData from '../../components/noneData.vue'
export default {
components: {
noneData
},
data() {
return {
selectedKey: "可使用",
form: {
lastName: "",
firstName: "",
couponList: [],
current: 1,
pageCount: 0,
couponsType: 1, // 优惠券类型 1：抵用券，2：折扣卷
CouponTimeStatus: 1, // 优惠券状态（b2b）1-可使用，2-已使用，3-已过期
CouponsUseScope: 1, // 平台1:全场通用,2:团队,3:签证,4:机票,5:门票,6:车辆,7:自由行,8:当地游
useScopeMap: {
1: "全场通用",
2: "团队",
3: "签证",
4: "机票",
5: "门票",
6: "车辆",
7: "自由行",
8: "当地游",
},
model: "",
date: "",
options: [],
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() {
this.getCouponList();
},
methods: {
pageChange(value) {
this.current = value;
this.getCouponList();
},
changeCouponType(item) {
this.selectedKey = item;
this.CouponTimeStatus = item.key;
this.current = 1
this.pageCount = 0
this.couponList = []
this.getCouponList()
},
submit() {
const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => {
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
return;
}
getCouponList() {
this.apipost(
"GetMyCouponPageList_post",
{ pageIndex: this.current, pageSize: 10, CouponTimeStatus: this.CouponTimeStatus },
(res) => {
if (res.data.resultCode == 1) {
const { count, pageData, pageCount } = res.data.data;
this.count = count;
this.pageCount = pageCount;
this.couponList = pageData;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
},
};
......
src/pages/usercenter/order.vue
View file @ 6349bb0b
......@@ -50,6 +50,7 @@ border-radius: 8px;
}
.name {
width: 300px;
padding: 10px;
}
.user-name {
width: 120px;
......@@ -89,16 +90,6 @@ border-radius: 8px;
:rules="[(val) => val !== '' || '请输入名字']"
></q-input>
</div>
<div>
<q-select
square
outlined
class="form-item"
v-model="model"
:options="options"
placeholder="Filled"
></q-select>
</div>
</div>
<div class="tips flex">
<div
......@@ -108,31 +99,28 @@ border-radius: 8px;
:key="item"
>
{{ item }}
<div :class="selectedKey === item ? 'border-bottom' : ''"></div>
<div :class="orderStatus === item ? 'border-bottom' : ''"></div>
</div>
</div>
<div>
<div class="card">
<div class="card" v-for="item in orderList" :key="item.id">
<div class="flex card-title justify-between">
<div class="flex">
<span>订单号</span>
<span>订单号:{{item.orderNo}}</span>
<span class="phone">联系客服</span>
</div>
<span>2023-02-23 14:31:52</span>
<span>{{item.createTimeStr}}</span>
</div>
<div class="flex q-py-sm">
<img src="../../assets/img/avatar.png" />
<img :src="item.goodsPic" />
<div class="name">
<div>
【限量300张·售完即止】2023客路春季踏青
卡（春季特惠不约可退+广东省内周边9大路
</div>
<div>{{item.goodsName}}</div>
<div>xl</div>
</div>
<div class="user-name">王然</div>
<div class="user-name">{{item.surName}}{{item.name}}</div>
<div class="pay-info">
<div>CNY1188.00</div>
<div>在線支付</div>
<div>CNY{{item.totalPrice}}</div>
<div>{{item.payType}}</div>
</div>
<div class="order-info">
<div>等待收貨</div>
......@@ -148,37 +136,82 @@ border-radius: 8px;
</div>
</div>
</template>
<script>
import noneData from '../../components/noneData.vue'
export default {
components: {
noneData
},
data() {
return {
selectedKey: "全部",
form: {
lastName: "",
firstName: "",
form: {},
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: "当地游",
},
model: "",
date: "",
options: [],
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() {
this.getOrderList();
},
methods: {
pageChange(value) {
this.current = value;
this.getOrderList();
},
changeCouponType(item) {
this.selectedKey = item;
this.orderStatus = item.key;
this.current = 1
this.pageCount = 0
this.orderList = []
this.getOrderList()
},
submit() {
const verifyArr = ["fastName", "lastName"];
verifyArr.forEach((item) => {
this.$refs[item].validate();
});
verifyArr.forEach((item) => {
if (item.$refs[item].hasError) {
this.formHasError = true;
}
});
if ((this.formHasError = true)) {
return;
}
getOrderList() {
this.apipost(
"GetMyDirectOrderPageList_post",
{ pageIndex: this.current, pageSize: 10, orderStatus: this.orderStatus },
(res) => {
if (res.data.resultCode == 1) {
const { count, pageData, pageCount } = res.data.data;
this.count = count;
this.pageCount = pageCount;
this.orderList = pageData;
} else {
// this.$notify(res.data.message);
this.$q.notify({
type: "negative",
message: res.data.message,
position: "top",
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
});
}
},
null
);
},
},
};
......
src/pages/usercenter/setUserInfo.vue
View file @ 6349bb0b
......@@ -103,7 +103,7 @@
class="form-item"
v-model="form.Country"
:options="countList"
placeholder="Filled"
placeholder="请选择居住國家/地區"
:rules="[(val) => Boolean(val) || '请选择居住國家/地區']"
/>
</div>
......@@ -120,7 +120,7 @@
option-label="Name"
v-model="form.Appellation"
:options="AppellationList"
placeholder="Filled"
placeholder="请选择稱謂"
:rules="[(val) => Boolean(val) || '请选择稱謂']"
/>
</div>
......@@ -140,7 +140,7 @@
class="form-item"
v-model="form.PhoneCountry"
:options="phoneCountList"
placeholder="Filled"
placeholder="请选择國家/地區代碼"
:rules="[(val) => Boolean(val) || '请选择國家/地區代碼']"
/>
</div>
......@@ -298,9 +298,9 @@ export default {
},
submitUserInfo() {
let params = {...this.form}
params.Appellation = params.Appellation.ID
params.Country = params.Country.ID
params.PhoneCountry = params.PhoneCountry.ID
// params.Appellation = params.Appellation.ID
// params.Country = params.Country.ID
// params.PhoneCountry = params.PhoneCountry.ID
this.apipost(
"UpdateUserInfo_post",
params,
......
src/pages/usercenter/setUsersList.vue
View file @ 6349bb0b
......@@ -215,8 +215,9 @@ border-radius: 8px;
: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>
<!-- <i class="iconfont iconline"></i>
<i class="iconfont icondelete"></i> -->
<img style="width: 15px" src="../../assets/img/delete.png" />
</div>
</div>
<div
......
src/router/index.js
View file @ 6349bb0b
......@@ -2,7 +2,6 @@ import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const routerPush = VueRouter.prototype.push
......@@ -30,6 +29,18 @@ export default function (/* { store, ssrContext } */) {
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE
})
Router.beforeEach((to, from, next) => {
let user = undefined
if(typeof window === 'object') {
user = JSON.parse(window.localStorage.getItem('b2bUser'))
if(to.meta.needLogin && !user) {
next({path: '/login'})
} else {
next()
}
}else {
next()
}
})
return Router
}
src/router/routes.js
View file @ 6349bb0b
......@@ -51,91 +51,91 @@ const routes = [{
},
{
path: '/account', //用户信息
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/account.vue')
},
{
path: '/demandlist', //需求单列表
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/demandlist.vue')
},
{
path: '/demandinfo/:id', //需求单详情
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/demandinfo.vue')
},
{
path: '/orderlist', //订单列表
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/orderlist.vue')
},
{
path: '/orderinfo/:id', //订单详情
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/orderinfo.vue')
},
{
path: '/passengerList/:id', //旅客名单
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/passengerList.vue')
},
{
path: '/register', //用户注册
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/register.vue')
},
{
path: '/loginInfo', //账户设置
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/loginInfo.vue')
},
{
path: '/setAddress', //地址管理
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/setAddress.vue')
},
{
path: '/setInfo', //账户设置
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/setInfo.vue')
},
{
path: '/setUserInfo', //用户信息
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/setUserInfo.vue')
},
{
path: '/coupon', //优惠券
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/coupon.vue')
},
{
path: '/order', //用户订单
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/order.vue')
},
{
path: '/setUsersList', //用户订单
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/setUsersList.vue')
},
{
path: '/payInfo', //支付管理
meta: { isUserCenter: true },
meta: { isUserCenter: true, needLogin: true },
component: () =>
import ('pages/usercenter/payInfo.vue')
},
......
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