<style>
.page_VisaSummary .query-box ul li {
margin-right: 0px;
}
.page_VisaSummary ._VisaS_list {
padding: 20px 0;
}
.page_VisaSummary ._VisaS_list ._vsl_item {
float: left;
margin-right: 40px;
width: 300px;
height: 270px;
border-radius: 4px;
overflow: hidden;
}
.page_VisaSummary ._vsl_item_top {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
}
.page_VisaSummary ._vsl_item_top img.no_grayscale {
width: 100%;
height: 100%;
filter: blur(15px);
}
.page_VisaSummary ._content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.page_VisaSummary ._content p {
text-align: center;
color: #ffffff;
font-size: 14px;
padding-top: 10px;
}
.page_VisaSummary ._content p span {
text-decoration: underline;
cursor: pointer;
}
.page_VisaSummary ._content ._content_radius {
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.4);
background-color: #ffffff;
margin: 16px auto;
}
.page_VisaSummary ._content ._content_radius p {
color: #e95252 !important;
padding-top: 5px;
font-size: 12px;
}
.page_VisaSummary ._content ._content_radius p._content_radius_n {
font-size: 36px;
font-weight: bold;
padding: 0;
}
.page_VisaSummary ._content_info {
width: 94%;
padding: 0 3%;
height: 36px;
background: rgba(23, 21, 26, 0.2);
position: absolute;
bottom: 0;
left: 0;
display: flex;
font-size: 12px;
align-items: center;
justify-content: space-between;
}
.page_VisaSummary ._content_info > li {
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
}
.page_VisaSummary ._content_info > li ._content_info_radius_b {
display: inline-block;
height: 4px;
width: 4px;
background-color: #ffffff;
border-radius: 50%;
margin-right: 4px;
}
.page_VisaSummary ._VisaS_list ._vsl_item:hover {
box-shadow: 0px 0px 20px rgba(191, 191, 191, 1);
transition: all linear 0.5s;
}
._vsl_item_bt {
text-align: center;
padding-top: 25px;
}
._vsl_item_bt button.normalBtn {
font-size: 12px;
}
.scenicSpotTeamPlan_info .hl_flight {
padding-top: 20px;
}
.scenicSpotTeamPlan_info .hl_flight li {
display: flex;
align-items: center;
}
.scenicSpotTeamPlan_info ._go {
display: inline-block;
height: 20px;
width: 20px;
background-color: #ff7862;
color: white;
font-size: 14px;
text-align: center;
line-height: 20px;
border-radius: 4px;
margin-right: 10px;
}
.scenicSpotTeamPlan_info ._textB14 {
color: #333333;
font-size: 14px;
}
.scenicSpotTeamPlan_info ._timeCity {
margin: 15px 49px;
}
.scenicSpotTeamPlan_info ._time {
color: #666666;
font-size: 18px;
font-weight: 700;
}
.scenicSpotTeamPlan_info ._city {
color: #ff7862;
font-size: 14px;
text-align: center;
}
.scenicSpotTeamPlan_info ._line {
display: flex;
align-items: center;
}
.scenicSpotTeamPlan_info ._line span {
display: inline-block;
width: 50px;
height: 2px;
background-color: #ff7862;
}
.scenicSpotTeamPlan_info ._line span._lr {
width: 8px;
height: 8px;
border-radius: 50%;
border: solid 2px #ff7862;
background-color: white;
}
.scenicSpotTeamPlan_info ._flight_num,
._flight_name {
color: #999999;
font-size: 14px;
font-weight: 700;
margin-left: 15px;
}
.scenicSpotTeamPlan_info ._flight_name {
font-weight: lighter;
}
.scenicSpotTeamPlan_info ._margintop30 {
margin-top: 30px;
}
.scenicSpotTeamPlan_info ._details {
margin-left: 20px;
padding-top: 20px;
}
.scenicSpotTeamPlan_info ._details > li {
border-left: 1px solid #e9e9e9;
position: relative;
padding-bottom: 15px;
padding-left: 40px;
padding-top: 15px;
}
.scenicSpotTeamPlan_info ._d_radius {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-block;
position: absolute;
left: -20px;
top: 0px;
background-color: #e95252;
text-align: center;
line-height: 40px;
font-size: 18px;
color: white;
font-weight: 700;
}
.scenicSpotTeamPlan_info ._Itinerary {
color: #333333;
font-size: 18px;
display: flex;
align-items: center;
}
.scenicSpotTeamPlan_info ._Itinerary .iconfont {
color: #666666;
}
.scenicSpotTeamPlan_info ._d_city,
._d_time {
display: inline-block;
padding: 0 20px;
}
.scenicSpotTeamPlan_info ._d_time {
padding: 0 10px 0 0;
}
.scenicSpotTeamPlan_info ._d_info {
color: #666666;
font-size: 14px;
line-height: 22px;
padding-top: 16px;
}
.scenicSpotTeamPlan_info ._food_hotel {
padding-top: 25px;
}
.scenicSpotTeamPlan_info ._food_hotel ._food,
._hotel {
float: left;
width: 50%;
}
.scenicSpotTeamPlan_info ._food_hotel .iconfont::before {
font-size: 18px;
color: #07a767;
}
.scenicSpotTeamPlan_info ._food_hotel ._hotel .iconfont::before {
color: #2595ee;
}
.scenicSpotTeamPlan_info ._fh_tit {
font-size: 16px;
}
.scenicSpotTeamPlan_info ._fist {
padding-bottom: 10px;
}
.scenicSpotTeamPlan_info ._meidonfxi {
text-align: center;
padding: 25px 0;
}
.scenicSpotTeamPlan_info ._meidonfxi .iconfont {
display: block;
font-size: 50px;
color: #d6d6d6;
}
.scenicSpotTeamPlan_info ._meidonfxi p {
color: #999999;
font-size: 14px;
}
.scenicSpotTeamPlan_info .el-dialog__header .el-dialog__title {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-width: 80%;
margin: 0 auto;
}
.scenicSpotTeamPlan_info .leaderName {
position: relative;
top: -10px;
left: 5px;
}
.scenicSpotTeamPlan_info .headerImg {
width: 34px;
height: 34px;
border-radius: 34px;
display: inline-block;
}
.scenicSpotTeamPlan_info .headerImg img {
width: 100%;
}
.scenicSpotTeamPlan_info .grayLi img {
-webkit-filter: grayscale(1) blur(10px) !important;
}
.scenicSpotTeamPlan_info .flightTitle {
padding: 3px 10px;
background-color: #e3e3e3;
border-radius: 4px;
display: inline-block;
position: relative;
margin: 30px 0 10px 20px;
font-size: 14px;
color: #333333;
line-height: 44px;
text-align: center;
}
.scenicSpotTeamPlan_info .cityName {
font-size: 20px;
font-family: PingFangSC-Semibold, sans-serif;
}
.scenicSpotTeamPlan_info .icon-img_plane {
font-size: 12px;
color: #2aaef2;
position: absolute;
left: 158px;
top: -8px;
-webkit-transform: scale(0.8);
}
.scenicSpotTeamPlan_info .flightLine {
color: #b7b7b7;
display: inline-block;
padding: 0 10px;
}
.scenicSpotTeamPlan_info .fLine {
float: left;
}
.scenicSpotTeamPlan_info .planeTwo {
left: 85px;
}
.scenicSpotTeamPlan_info .stName {
display: inline-block;
width: 60px;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
float: left;
}
.page_VisaSummary .query-box ul .el-input {
width: 150px;
}
.page_VisaSummary ._vsl_item_top img.no_grayscale._grayscale {
filter: grayscale(100%) blur(15px);
}
</style>
<template>
<div class="flexOne page_VisaSummary">
<div class="query-box">
<ul>
<li>
<span>
<em>{{$t('scen.sc_cp')}}</em>
<el-select v-model="msg.RB_Branch_Id" clearable class="w150" filterable :placeholder="$t('pub.pleaseSel')">
<el-option key="-1" :label="$t('pub.unlimitedSel')" value="-1"></el-option>
<el-option v-for='item in companyList'
:key="item.Id"
:label="item.BName"
:value="item.Id">
</el-option>
</el-select>
</span>
</li>
<li>
<span class="hotel_name">
<em>{{$t('scen.sc_temID')}}</em><el-input maxlength="50" v-model="msg.TCNUM" class="w150"></el-input>
</span>
</li>
<li>
<span>
<em>{{$t('scen.sc_temStatu')}}</em>
<el-select v-model="msg.TCState" clearable class="w150" filterable :placeholder="$t('pub.pleaseSel')">
<el-option v-for='item in TeamSaleStateList'
:key="item.Id"
:label="item.Name"
:value="item.Id">
</el-option>
</el-select>
</span>
</li>
<li>
<span>
<em>{{$t('scen.sc_ftTime')}}</em>
<el-date-picker clearable class="w150"
@change="dataDui()"
v-model="msg.StartDate"
type="date"
value-format="yyyy-MM-dd"
:placeholder="$t('admin.admin_choDate')">
</el-date-picker><span class="_ln">-</span><el-date-picker clearable class="w150"
v-model="msg.EndDate"
type="date"
@change="dataDui()"
value-format="yyyy-MM-dd"
:placeholder="$t('admin.admin_choDate')">
</el-date-picker>
</span>
</li>
<li>
<span>
<em>{{$t('visa.v_qianzhengst')}}</em>
<el-select v-model="msg.Status" clearable class="w150" filterable :placeholder="$t('pub.pleaseSel')">
<el-option v-for='item in StatusList'
:key="item.Id"
:label="item.Name"
:value="item.Id">
</el-option>
</el-select>
</span>
</li>
<li class="_btn_group">
<button class="normalBtn" type="button" @click="getData()">{{$t('pub.searchBtn')}}</button>
</li>
</ul>
</div>
<ul class="_VisaS_list clearfix">
<li class="_vsl_item" v-for="(item,index) in dataList">
<div class="_vsl_item_top">
<img class="no_grayscale" :class="item.TotalNumber==item.FinishedNumber?'_grayscale':''" src="../../assets/img/shoppingstore.jpg" alt="">
<div class="_content">
<p class="_content_text"><span @click="getJourney(item.TCID)">{{item.TCNUM}}</span></p>
<div class="_content_radius">
<p>{{$t('hotel.hotel_haveSignUp')}}</p>
<p class="_content_radius_n PingFangSC">{{item.FinishedNumber}}</p>
</div>
<ul class="_content_info">
<li> <span class="_content_info_radius_b"></span> {{item.TCStateStr}}</li>
<li> <span class="_content_info_radius_b"></span> {{$t('hotel.hotel_expect')}}{{item.TotalNumber}}人</li>
<li> <span class="_content_info_radius_b"></span> {{item.StartDate}}{{$t('hotel.hotel_StartTeam')}}</li>
</ul>
</div>
</div>
<div class="_vsl_item_bt">
<button class="normalBtn" type="button" v-if="item.Status==1" @click="goUrl('VisaApplicationDetails',item.TCID,item.TCNUM)">{{$t('visa.v_banliqianzheng')}}</button>
<button class="normalBtn" type="button" v-if="item.Status==2" @click="goUrl('VisaApplicationDetails',item.TCID,item.TCNUM)">{{$t('visa.v_chakanjindu')}}</button>
<button class="normalBtn" type="button" v-if="item.Status==3" @click="goUrl('VisaApplicationDetails',item.TCID,item.TCNUM)">{{$t('visa.v_chakanjieguo')}}</button>
</div>
</li>
<!-- <li class="_vsl_item" >
<div class="_vsl_item_top">
<img class="no_grayscale _grayscale" src="../../assets/img/shoppingstore.jpg" alt="">
<div class="_content">
<p class="_content_text"><span @click="getJourney()">.TCNUM}}</span></p>
<div class="_content_radius">
<p>已报名</p>
<p class="_content_radius_n PingFangSC">.FinishedNumber}}</p>
</div>
<ul class="_content_info">
<li> <span class="_content_info_radius_b"></span> .TCStateStr}}</li>
<li> <span class="_content_info_radius_b"></span> 预计.TotalNumber}}人</li>
<li> <span class="_content_info_radius_b"></span> .StartDate}}发团</li>
</ul>
</div>
</div>
<div class="_vsl_item_bt">
<button class="normalBtn" type="button" @click="goUrl('')">办理签证</button>
</div>
</li> -->
</ul>
<div class="noData" v-show="noData">
{{$t('system.content_noData')}}
</div>
<el-pagination
background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size=msg.pageSize
:total=total>
</el-pagination>
<el-dialog custom-class='scenicSpotTeamPlan_info_box w780' :title="tripTitle" :visible.sync="outerVisible" center >
<div class="scenicSpotTeamPlan_info">
<p class="hl_info">{{$t('visaT.finformation')}} <span></span></p>
<ul class="hl_flight">
<li v-for="(item,index) in TripList.FlightList">
<span class="_go">{{$t('visaT.go')}}</span>
<span class="_textB14">{{$t('tips.di')}}{{item.JourneyDay}}{{$t('hotel.hotel_day')}}（{{item.startTime}}）</span>
<div class="_timeCity">
<p class="_time">{{item.sStartDate}}</p>
<p class="_city">{{item.sStartAddress}}</p>
</div>
<div class="_line">
<span class="_lr"> </span>
<span></span>
<span class="_lr"> </span>
</div>
<div class="_timeCity">
<p class="_time">{{item.sEndDate}}</p>
<p class="_city">{{item.sEndAddress}}</p>
</div>
<p class="_flight_num">{{item.FlightNum}}</p>
<p class="_flight_name">{{item.FlightName}}</p>
</li>
</ul>
<p class="hl_info _margintop30">{{$t('visaT.Scheduling')}}</p>
<ul class="_details">
<li v-for="(item,index) in TripList.JourneyList">
<span class="_d_radius">{{index+1}}</span>
<div class="_Itinerary">
<span class="_d_time">{{item.sJourneyDate}}</span>
<span class="_d_city">{{item.sStartAddress}}</span>
<span class="iconfont icon-hangkonggongsi"></span>
<span class="_d_city">{{item.sEndAddress}}</span>
</div>
<p class="_d_info">
{{item.sDescribe}}
</p>
<div class="_food_hotel clearfix">
<ul class="_food">
<li class="_fist">
<span class="iconfont icon-jingqu"></span><span class="_fh_tit"> {{$t('visaT.jdname')}}</span>
</li>
<li>{{item.CouponsName}}</li>
</ul>
<ul class="_hotel">
<li class="_fist">
<span class="iconfont icon-ticket"></span><span class="_fh_tit"> {{$t('visaT.doorname')}}</span>
</li>
<li>{{item.TicketName}}</li>
</ul>
</div>
</li>
</ul>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {},
data() {
return {
msg: {
pageIndex: 1,
pageSize: 10,
RB_Branch_Id: "-1",
Status: "-1",
TCState: 3,
TCNUM: "",
StartDate: "",
EndDate: ""
},
getCompanyMsg: {
RB_Group_Id: "",
Status: 0,
is_show: 0
},
dataList: [],
companyList: [],
TeamSaleStateList: [],
TripList: [],
StatusList: [
{
Id: "-1",
Name: this.$t('pub.unlimitedSel')
},
{
Id: "1",
Name: this.$t('visaT.Nothandled')
},
{
Id: "2",
Name: this.$t('visaT.Inhandling')
},
{
Id: "3",
Name: this.$t('visaT.Alreadyprocessed')
}
],
total: 0,
currentPage: 1,
noData: false,
outerVisible: false,
tripTitle: ""
};
},
watch: {},
computed: {},
methods: {
getJourney(id, title) {
//根据ID 获取行程内容
this.tripTitle = title;
//根据ID 获取行程内容
this.apipost(
"travel_get_GetTrip",
{ ID: id },
res => {
if (res.data.data.FlightList.length > 0) {
res.data.data.FlightList.forEach((x, index) => {
x.startTime = new Date(x.sStartDate).Format("yyyy-MM-dd");
x.sStartDate = new Date(x.sStartDate).Format("hh:mm");
x.sEndDate = new Date(x.sEndDate).Format("hh:mm");
});
}
this.TripList = res.data.data;
this.tripTitle = this.TripList.Title;
},
err => {}
);
this.outerVisible = true;
},
getTeamSaleStateList() {
//获取销售状态列表
this.apipost(
"travel_get_GetTeamSaleStateList",
{},
res => {
this.TeamSaleStateList = res.data.data;
},
err => {}
);
},
getCompany() {
// 获取公司
this.apipost(
"admin_get_BranchGetList",
this.getCompanyMsg,
res => {
if (res.data.resultCode == 1) {
this.companyList = res.data.data;
} else {
}
},
err => {}
);
},
getData() {
// 查询数据
this.apipost(
"dmc_get_GetTravelControlPageList",
this.msg,
res => {
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
if (res.data.data.pageData.length == 0) {
this.noData = true;
this.dataList = [];
} else {
this.dataList = res.data.data.pageData;
this.noData = false;
}
} else {
}
},
err => {}
);
},
dataDui() {
// 日期
if (this.msg.StartDate > this.msg.EndDate && this.msg.EndDate!== '') {
this.$message.error(this.$t('visaT.titleT'));
this.msg.EndDate = "";
}
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getData();
},
goUrl(path, id, num) {
this.$router.push({ name: path, query: { id: id, num: num } });
}
},
mounted() {
let userInfo = this.getLocalStorage();
this.getCompanyMsg.RB_Group_Id = userInfo.RB_Group_id;
this.getCompany();
this.getTeamSaleStateList();
this.getData();
}
};
</script>