Skip to content

A
Athena
Commit 82e30d26 authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

update

parent 64b7193e
Show whitespace changes
Inline Side-by-side
Showing with 765 additions and 0 deletions
src/components/newPersonalCenter/block/model/OrderInfoModel/NewTKtable.vue 0 → 100644
View file @ 82e30d26
<style>
.orderTable{
width: 100%;
border: solid 1px #EDEDED;
border-collapse: collapse;
}
.orderTable thead tr {
}
.orderTable thead tr th{
padding: 15px 0;
font-size: 12px;
color: #666666;
font-weight: initial;
}
.orderTable thead tr th:nth-child(1){
text-align: left;
padding-left: 10px;
}
.orderTable tbody tr td{
border: solid 1px #EDEDED;
}
.orderTable tbody .top td{
padding: 7px 20px;
font-size: 14px;
border: 1px solid #EDEDED;
}
.orderTable tbody .top td .time{
color: #999999;
padding-right: 20px;
}
.orderTable tbody .top td .num{
color: #666666;
padding-right: 20px;
}
.orderTable tbody .top td .num span{
color: #999999;
}
.orderTable tbody .top td .contacts{
color: #333333;
}
.orderTable tbody .top td .contacts .iconfont{
color: #5290FF;
padding-right: 10px;
}
.orderTable tbody .info td{
padding: 20px 15px;
box-sizing: border-box;
}
.orderTable tbody .info .tc_info{
display: flex;
}
.orderTable tbody .info .tc_info ._left{
width:64px;
height:64px;
background-color: gray;
margin-right: 10px;
}
.orderTable tbody .info .tc_info ._right{
color: #666666;
font-size: 12px;
}
.color333{
color: #333333;
}
.color666{
color: #666666;
}
.font-size14{
font-size: 14px
}
.font-size12{
font-size: 12px
}
.orderTable tbody .info .tc_info ._right p:nth-child(2){
margin: 8px 0;
}
.orderTable tbody .info .name_list{
font-size: 12px;
text-align: center;
}
.orderTable tbody .info .name_list .__cp:hover{
color: #2299EE;
}
.orderTable tbody .info .name_list p{
margin-bottom: 5px;
}
.orderTable tbody .info .money{
font-size: 12px;
text-align: center;
}
.orderTable tbody .info .money p{
margin-bottom: 4px
}
.orderTable tbody .info .money .pay_ok{
color: #52BF7D;
padding-bottom: 2px;
}
.orderTable tbody .info .money .pay_no{
color: #FF8800 !important;
}
.orderTable tbody .info .money .pay_ok .iconfont{
color: #333333
}
.orderTable tbody .info .money .pay_list{
border-top: 1px solid #E6E6E6;
padding-top: 5px;
color: #666666;
/* height: 0;
overflow: hidden;
transition: all linear .5s; */
}
.orderTable tbody .info .money .pay_list.height_aotu{
height: 66px;
}
.shang{
transform: rotate(180deg);
display: inline-block;
}
.hover_bg{
background: rgba(255,240,240,1);
}
.list_details ul{
margin-top: 0px;
padding-top: 15px;
border-top: 1px solid #E6E6E6;
}
.list_details .__item{
display: flex;
font-size: 12px;
margin-bottom: 15px;
}
.list_details .__item .img{
height: 54px;
width: 72px;
background-color: gray;
margin-right: 10px;
}
.list_details .__item .img{
height: 54px;
width: 72px;
}
.list_details .__item .__name .iconfont{
color: #3EABFF
}
.list_details .__item .__name .icon-shiliangzhinengduixiang1{
color: #FF5151
}
.TicketOrder .ticketDes{
width: 100%;
background: #EBEBEB;
padding: 20px;
box-sizing: border-box;
transition: all 0.2s linear;
}
.TicketOrder .ticketDes .orderDiv{
color: #333333;
background: #fff;
padding: 15px 0;
/* box-shadow:0px 4px 8px 0px rgba(107,107,107,0.18); */
}
.TicketOrder .pfR{
font-family: "PingFangR"
}
.TicketOrder .Green{
display: inline-block;
width:30px;
height:30px;
background:rgba(73,192,161,1);
font-size: 12px;
color: #fff;
text-align: center;
line-height: 30px;
}
.TicketOrder .ticketDes .grey{
background: #F5F5F5;
font-size: 12px;
padding: 12px 10px;
position: relative;
box-sizing: border-box;
width: 280px;
}
.TicketOrder .ticketDes .imgTop{
align-items: center;
display: flex;
font-size: 12px;
margin-top:15px;
}
.TicketOrder .ticketDes .imgTop span{
margin-left: 8px;
}
.TicketOrder .ticketDes .grey span:nth-child(1){
display: inline-block;
width: 105px;
border-right: 1px solid #999999;
}
.TicketOrder .ticketDes .grey .air{
margin-left: 10px;
}
.TicketOrder .ticketDes .grey .circle{
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #333333;
position: relative;
left: -3px;
top: -3px;
}
.TicketOrder .ticketDes .grey .bg_back{
display: inline-block;
border-right: 1px dashed #999999;
height: 70px;
position: absolute;
left: 115px;
z-index: 100;
top:22px;
}
.TicketOrder .ticketDes .threeDiv{
border-left: 1px dashed #AAAAAA;
font-size: 12px;
padding-left: 20px;
box-sizing: border-box;
height: 185px;
position: relative;
}
.TicketOrder .ticketDes .threeDiv .otherinfo span:nth-child(1){
color:#8590A0;
display: inline-block;
width: 65px
}
.TicketOrder .ticketDes .threeDiv .otherinfo span:nth-child(2){
color:#666666;
}
.TicketOrder .ticketDes .threeDiv .otherinfo p{
padding-top: 10px;
}
.TicketOrder .ticketDes .threeDiv .firstCircle{
position: absolute;
width: 30px;
height: 15px;
background-color: #EBEBEB;
border-radius: 30px 30px 0 0;
bottom:-18px;
left: -15px;
}
.TicketOrder .ticketDes .threeDiv .SecondCircle{
position: absolute;
width: 30px;
height: 15px;
background-color: #EBEBEB;
border-radius: 0 0 30px 30px;
top:-18px;
left: -15px;
}
.TicketOrder .icon-xiangzuo-copy{
cursor: pointer;
color: #EE4454;
display: inline-block;
}
.TicketOrder .rotate{
transform: rotateX(180deg);
}
</style>
<template>
<el-row>
<table class="orderTable TicketOrder" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th width="85px">
<div class="__cp _drop">
<el-dropdown trigger="click" @command="handleCommandTwo">
<span class="el-dropdown-link">
{{dropTitTwo}}
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<template v-for="(item,index) in dayList">
<el-dropdown-item :key="index+100" :command="item">{{item.Day}}</el-dropdown-item>
</template>
</el-dropdown-menu>
</el-dropdown>
</div>
</th>
<th width="400px"></th>
<th width="100px">
订单详情
</th>
<th width="220px">
金额
</th>
<th width="150">
订单状态
</th>
<th width="159px">
操作
</th>
</tr>
</thead>
<tbody>
<template v-for="(item, index) in tableData">
<tr class="top" :key="index" :class="{hover_bg: activeRow === index}" @mouseenter="enter(index)" @mouseleave="enter()">
<td colspan="6">
<span class="time">{{item.startDate}}</span>
<span class="num">订单号：<span>{{item.orderId}}</span></span>
<span class="contacts"><i class="iconfont icon-dianhua"></i> <span>{{item.serviceName}} {{item.servicePhone}}</span></span>
</td>
</tr>
<tr :key="index+1000" class="info" @mouseenter="enter(index)" @mouseleave="enter()" :class="{hover_bg: activeRow === index}">
<td width="20">
<i :class="tab==index?'rotate':''" @click="ShowDes(index)" class="iconfont icon-xiangzuo-copy"></i>
</td>
<td>
<div class="tc_info">
<div class="_left"></div>
<div class="_right">
<p class="color333 font-size14">系列名称系列名称系列名称...</p>
<p>系列名称系列名称系列名称...</p>
<p>团号：123456</p>
</div>
</div>
</td>
<td width="400" class="name_list">
<p>成人：5 [ <span class="__cp">上传名单</span> ]</p>
<p>儿童：5
<el-popover
popper-class='list_details'
placement="bottom"
title="名单详情"
width="200"
trigger="click">
<ul>
<li class="__item">
<div class="img">
</div>
<div class="__info">
<p class="__name color333">李健国 <i class="iconfont icon-nan"></i></p>
<p class="color666">13880879660</p>
<p class="color666">房号：403 单人间</p>
</div>
</li>
<li class="__item">
<div class="img">
</div>
<div class="__info">
<p class="__name color333">李健国 <i class="iconfont icon-shiliangzhinengduixiang1"></i></p>
<p class="color666">13880879660</p>
<p class="color666">房号：403 单人间</p>
</div>
</li>
<li class="__item">
<div class="img">
</div>
<div class="__info">
<p class="__name color333">李健国 <i class="iconfont icon-nan"></i></p>
<p class="color666">13880879660</p>
<p class="color666">房号：403 单人间</p>
</div>
</li>
</ul>
<span slot="reference">[ <span class="__cp">名单详情</span> ]</span>
</el-popover>
</p>
<p>婴儿：0</p>
</td>
<td class="money">
<p>总额 ¥{{item.preferPrice | priceFormat}}</p>
<p class="__cp pay_no" v-if="!item.payShow" @click="item.payShow = true">已付总额 ¥8680.00 <i class="iconfont icon-xia"></i></p>
<p class="__cp pay_no" v-if="item.payShow" @click="item.payShow = false">已付总额 ¥8680.00 <i class="iconfont icon-xia shang"></i></p>
<!-- :class="{height_aotu: item.payShow}" -->
<div class="pay_list" v-if="item.payShow">
<p>04-18 ¥8680.00 支付宝</p>
<p>04-18 ¥8680.00 支付宝</p>
<p>04-18 ¥8680.00 支付宝</p>
</div>
</td>
<td class="color333 font-size14">
<span v-if="item.orderState === 1">待付定金</span>
<span v-else-if="item.orderState === 2">待付尾款</span>
<span v-else-if="item.orderState === 3">待发团</span>
<span v-else-if="item.orderState === 4">交易完成</span>
<span v-else-if="item.orderState === 0">取消</span>
</td>
<td>
<payurlItem
v-if="item.orderState !== 0 && item.orderState !== 4"
@b2b_get_GetWaitDealOrderPageList="b2b_get_GetWaitDealOrderPageList"
:item="item"
></payurlItem>
</td>
</tr>
<tr v-show="tab==index" :key="index+2000">
<td colspan="6">
<div class="ticketDes">
<el-row class="orderDiv">
<el-col :span="9" style="padding-left:20px">
<p>
<span class="Green">去程</span>
<span class="pfR" style="margin-left:10px">2019-02-19</span>
<span class="pfR">成都-泰国</span>
</p>
<div style="margin-top:10px">
<p class="imgTop">
<img style="width:24px;height:24px;" src="../../../../../assets/img/ps/jifencha.png" alt="">
<span>中国航空</span>
</p>
<p class="grey">
<span>02月19日 15:30</span>
<span class="circle"></span>
<span class="bg_back"></span>
<span class="air">成都 CTU 双流国际机场</span>
</p>
<p class="imgTop">
<img style="width:24px;height:24px;" src="../../../../../assets/img/ps/jifencha.png" alt="">
<span>中国航空</span>
</p>
<p class="grey">
<span>02月19日 15:30</span>
<span class="circle"></span>
<span class="air">成都 CTU 双流国际机场</span>
</p>
</div>
</el-col>
<el-col :span="9" style="padding-left:20px">
<p>
<span class="Green">去程</span>
<span class="pfR" style="margin-left:10px">2019-02-19</span>
<span class="pfR">成都-泰国</span>
</p>
<div style="margin-top:10px">
<p class="imgTop">
<img style="width:24px;height:24px;" src="../../../../../assets/img/ps/jifencha.png" alt="">
<span>中国航空</span>
</p>
<p class="grey">
<span>02月19日 15:30</span>
<span class="circle"></span>
<span class="bg_back"></span>
<span class="air">成都 CTU 双流国际机场</span>
</p>
<p class="imgTop">
<img style="width:24px;height:24px;" src="../../../../../assets/img/ps/jifencha.png" alt="">
<span>中国航空</span>
</p>
<p class="grey">
<span>02月19日 15:30</span>
<span class="circle"></span>
<span class="air">成都 CTU 双流国际机场</span>
</p>
</div>
</el-col>
<el-col class="threeDiv" :span="6">
<p class="pfR" style="font-size:14px">其他信息</p>
<div class="otherinfo">
<p>
<span>团号</span>
<span>256</span>
</p>
<p>
<span>销售名称</span>
<span>256</span>
</p>
<p>
<span>销售电话</span>
<span>256</span>
</p>
<p>
<span>已收金额</span>
<span>¥5680.00</span>
</p>
<p>
<span>出团公司</span>
<span>四川何平</span>
</p>
<p>
<span>报入时间</span>
<span>2019-4-12 13:15:30</span>
</p>
</div>
<div class="firstCircle"></div>
<div class="SecondCircle"></div>
</el-col>
</el-row>
</div>
</td>
</tr>
</template>
</tbody>
</table>
</el-row>
</template>
<script>
import payURL from "../../../../global/pay.vue";
export default {
components: {
payurlItem: payURL,
},
props:["tableData"],
data() {
return {
activeRow: '',
activeNames: ['1'],
dropTitTwo: "10天内",
dataList:[],
// tableData: [
// {
// title: '111',
// payShow: false,
// orderState: 1
// },{
// title: '222',
// payShow: false,
// orderState: 0
// },
// {
// title: '333',
// payShow: false,
// orderState: 2
// },
// {
// title: '444',
// payShow: false,
// orderState: 3
// }
// ],
dayList: [
{
Day: "10天",
Number: 10,
ID: 1
},
{
Day: "30天",
Number: 30,
ID: 1
},
{
Day: "60天",
Number: 60,
ID: 1
}
],
tab:-1,
};
},
mounted() {
console.log("机票122",this.tableData)
},
methods: {
ShowDes(index){
if(this.tab==index){
this.tab=-1;
}else{
this.tab=index;
}
},
enter: function (t) {
if (t+1) {
this.activeRow = t
} else {
this.activeRow = ''
}
},
handleCommandTwo(command) {
this.dropTitTwo = command.Day;
// this.getOrderMsg.queryDays = command.Number;
// this.gerOrderList();
},
b2b_get_GetWaitDealOrderPageList() {
//获取待处理订单
let msg = {
pageIndex: 1,
pageSize: 100
};
this.apipost(
"b2b_get_GetWaitDealOrderPageList",
msg,
r => {
if (r.data.resultCode == 1) {
this.WaitDealOrderPageList = r.data.data.pageData;
} else {
this.$message.error(r.data.message);
}
},
null
);
},
}
};
</script>
src/components/newPersonalCenter/block/model/TQOrder.vue 0 → 100644
View file @ 82e30d26
<style>
/* 定制游订单 */
@import "../../../../assets/css/newPersonalCenter/block/OrderCenter.css";
</style>
<template>
<el-row class="OrderCenter">
<!-- 条件 -->
<ul class="clearfix">
<template v-for="item in TitList">
<li :key="item.ID"
class="__cp"
@click="handleClick(item)"
:class="{_active: activeName === item.ID}"
>{{item.Type}}</li>
</template>
</ul>
<!-- 表格 -->
<TCTable :tableData="tableData"/>
<div class="empty-data" v-if="tableData.length<1">
<i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
<!-- 分页 -->
<el-row class="_pagination" v-if="totalCount > 1 && tableData.length>0">
<el-pagination
:current-page.sync="currentPage"
:page-size="getOrderMsg.pageSize"
layout="total, prev, pager, next"
:total="Count"
@current-change="handleCurrentChange"
></el-pagination>
</el-row>
</el-row>
</template>
<script>
import TCTable from "./OrderInfoModel/TCTable";
export default {
components: {
TCTable: TCTable
},
data() {
return {
activeName: -1,
currentPage: 1,
rderLoading: false,
totalCount: 1,
Count: 1,
WaitDealOrderPageList: "",
getOrderMsg: {
pageIndex: 1,
pageSize: 10,
orderType: 5,
queryDays: 0,
orderState: -1,
CustomerId: ""
},
TitList: [
{
Type: "全部",
ID: -1
},
{
Type: "待付定金",
ID: 1
},
{
Type: "待付尾款",
ID: 2
},
{
Type: "待发团",
ID: 3
},
{
Type: "交易完成",
ID: 4
},
{
Type: "取消",
ID: 5
}
// {
// val: 6,
// lable: '等待商家确认'
// },
// {
// val: 7,
// lable: '退款中'
// },
// {
// val: 8,
// lable: '退款成功'
// },
// {
// val: 9,
// lable: '交易完成'
// },
],
tableData: []
};
},
computed: {},
created() {
},
mounted() {
let userInfo = localStorage.userInfo
? JSON.parse(localStorage.userInfo)
: "";
this.getOrderMsg.CustomerId = userInfo.customerId;
this.gerOrderList();
this.b2b_get_GetWaitDealOrderPageList();
},
methods: {
b2b_get_GetWaitDealOrderPageList() {
//获取待处理订单
let msg = {
pageIndex: 1,
pageSize: 100
};
this.apipost(
"b2b_get_GetWaitDealOrderPageList",
msg,
r => {
if (r.data.resultCode == 1) {
this.WaitDealOrderPageList = r.data.data.pageData;
} else {
this.$message.error(r.data.message);
}
},
null
);
},
gerOrderList: function() {
this.orderLoading = true;
this.apiJavaPost(
"/api/b2b/user/getrecentorder",
this.getOrderMsg,
res => {
// console.log("sss",res)
if (res.data.resultCode == 1) {
this.tableData = res.data.data;
console.log("签证订单",this.tableData)
this.totalCount = res.data.data.pageCount;
this.Count = res.data.data.count;
this.orderLoading = false;
} else {
this.Error(res.data.message);
this.orderLoading = false;
}
},
null
);
},
handleClick(item) {
this.activeName = item.ID;
this.getOrderMsg.orderState = item.ID;
this.gerOrderList();
},
handleCurrentChange(val) {
// 翻页
this.getOrderMsg.pageIndex = parseInt(val);
this.gerOrderList();
}
}
};
</script>
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