<!--
|
* @Author: 小明丶
|
* @Date: 2019-12-26 10:37:53
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-13 17:07:22
|
* @Description:
|
-->
|
<template>
|
<div class="order-hb-box h-100-g">
|
<van-nav-bar title="运营商消费">
|
<i class="iconfont iconzuojiantou" slot="left" style="font-size:18px;color:#fff;font-weight:blod" @click="goFrom"></i>
|
</van-nav-bar>
|
<div class="top-back">
|
<div class="big-cri">
|
|
</div>
|
<div class="small-cri">
|
|
</div>
|
<!-- <div class="btn-grounp">
|
<span class="btn-hb" ref="hb" @click="showHb">花呗分期</span>
|
<span class="btn-cx" ref="cx" @click="showCx">储蓄卡分期</span>
|
<span class="squer" ref="sqe"></span>
|
</div> -->
|
</div>
|
<div v-if="list.length > 0" class="list-box">
|
<MyList :defScroll="10" :finished="finished" :loading="loading" @scroll="init">
|
<div class="list-div" v-for="(item,i) in list" :key="i" @click="goHandle(item)">
|
<p class="list-top">
|
<i class="iconfont iconshanghuzhuce"></i>
|
<span>{{item.mblNo}}</span>
|
<span v-if="item.creTime">{{item.creTime | timeformat('yyyy-MM-dd HH:mm:ss')}}</span>
|
</p>
|
<div class="list-left">
|
<p>{{item.prodAmt}}</p>
|
<p>结算金额（元）</p>
|
</div>
|
<div class="list-right">
|
<p>{{item.term}}</p>
|
<p>分期期数（月）</p>
|
</div>
|
</div>
|
</MyList>
|
</div>
|
<div v-else class="nothing-div">
|
<img class="nothing-pic" src="../../../../assets/img/xygpic.png" alt="暂无信用购数据">
|
<p class="nothing-text">暂无订单</p>
|
</div>
|
<van-popup v-model="show" closeable :style="{ width: '280px' }">
|
<template>
|
<div class="pro-div">
|
<p>录入营业员编码</p>
|
<p>该编号为营业员的移动工号，请确保准确无误，否则将无法为用户办理信用购业务。</p>
|
<input type="text" placeholder="请输入营业员编码" v-model="iptObj.empCode">
|
<input type="text" placeholder="请输入营业厅编码" v-model="iptObj.orgBizCode">
|
<button @click="bindInfo">确定</button>
|
</div>
|
</template>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import Vue from 'vue';
|
import MyList from "../../../../components/common/h-list"
|
import {
|
mapState,
|
mapGetters
|
} from 'vuex';
|
import {
|
getParams
|
} from '@/utils/index';
|
import { Popup } from 'vant';
|
import { Toast } from 'vant';
|
|
Vue.use(Toast);
|
Vue.use(Popup);
|
export default {
|
components:{
|
MyList
|
},
|
data() {
|
return {
|
iptObj:{
|
empCode: "",
|
orgBizCode: ""
|
},//弹出层输入框值
|
getWhichList:30000012,//判断获取花呗还是储蓄卡列表
|
show:false,//弹出层控制
|
goIdList:[],//判断跳转页面
|
lastId:'',//分页最后一笔订单ID
|
loading: false,
|
finished: false,
|
list: [],
|
typeId:'',
|
prodId:'',
|
mblNo:'',
|
prodAmt:"",
|
seq:"",
|
prodName:'',
|
monthlyFees:'',
|
}
|
},
|
created(){
|
this.typeId = this.$route.query.typeId
|
this.getCkeck()
|
//this.init()
|
},
|
methods:{
|
bindInfo(){
|
this.$api.xygOrderBindInfo(this.iptObj).then(res=>{
|
this.show = false
|
this.init()
|
})
|
},//绑定信息
|
|
getCkeck(){
|
this.$api.xygOrderCheckInfo().then(res=>{
|
if(res.body.isbind == 1){
|
this.init()
|
}else{
|
this.show = true
|
}
|
})
|
},//初始化获取 是否有绑定信息 有显示列表，没有显示绑定信息的弹出层
|
|
showCx(){
|
this.$refs.sqe.style["transform"] = `translateX(100%)`
|
this.$refs.sqe.style["transition"] = `0.5s`
|
this.$refs.hb.style['color'] = `#fff`
|
this.$refs.cx.style['color'] = `#5C4CD0`
|
this.getWhichList = 30000011
|
this.list=[]
|
this.init()
|
},//tab切换储蓄卡
|
|
showHb(){
|
this.$refs.sqe.style["transform"] = `translateX(0%)`
|
this.$refs.sqe.style["transition"] = `0.5s`
|
this.$refs.hb.style['color'] = `#5C4CD0`
|
this.$refs.cx.style['color'] = `#fff`
|
this.getWhichList = 30000012
|
this.list=[]
|
this.init()
|
},//tab切换花呗分期
|
|
// 返回上一页
|
goFrom(){
|
this.$router.go(-1)
|
},
|
// 跳转办单
|
goHandle(item){
|
this.prodId = item.prodId
|
this.mblNo = item.mblNo
|
this.prodAmt = item.prodAmt
|
this.seq = item.seq
|
this.prodName = item.prodName
|
if(item.hasCont == 0){
|
Toast('您暂不具有该合约,请分配以后重试');
|
return
|
}
|
|
var path
|
if(this.getWhichList==30000011 && item.isUse == 1){
|
path = '/xyg/createcode'
|
}else if(this.getWhichList==30000011 && item.isUse == 0){
|
Toast('暂未开通');
|
return
|
}
|
|
if(this.getWhichList==30000012 && item.isUse == 1){
|
path = '/xyg/xygHb'
|
}else if(this.getWhichList==30000012 && item.isUse == 0){
|
Toast('暂未开通');
|
return
|
}
|
|
console.log(path)
|
this.$router.push({
|
path:path,
|
query:{
|
// contId:item.contId,
|
prodId:this.prodId,
|
mblNo:this.mblNo,
|
prodAmt:this.prodAmt,
|
seq: this.seq,
|
prodName:this.prodName,
|
term:item.term,
|
typeId:this.typeId,
|
monthlyFees:item.monthlyFees,
|
totalPayments:item.totalPayments,
|
retFee:item.retFee,
|
packagePrices:item.packagePrices,
|
platRate:item.platRate,
|
zfbRate:item.zfbRate,
|
zfbVersion: this.$route.query.zfbVersion
|
}
|
})
|
},
|
//获取订单列表
|
init() {
|
if(this.list.length>0){
|
this.lastId = this.list[this.list.length-1].id
|
}
|
this.$api.getunhandingList({
|
prodId:this.getWhichList,
|
id:this.lastId
|
}).then(res=>{
|
this.goIdList = res.body.prodIds
|
if(res.body.orderItemInfos.length<10){
|
this.loading = false
|
this.finished = true
|
this.list = [...this.list,...res.body.orderItemInfos]
|
}else{
|
this.loading = false
|
this.finished = false
|
this.list = [...this.list,...res.body.orderItemInfos]
|
}
|
}).catch((err) => {
|
this.finished = true;
|
this.loading = false;
|
});
|
},
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
|
.order-hb-box {
|
background-color:#fff;
|
position: relative;
|
}
|
.van-hairline--bottom::after {
|
border: 0;
|
}
|
.van-nav-bar {
|
background-color: rgba(255,255,255,0);
|
}
|
.van-nav-bar__title {
|
max-width: 60%;
|
margin: 0 auto;
|
color: #fff;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.pro-div{
|
&{
|
padding: 30px 20px 16px 20px;
|
text-align: center;
|
}
|
p:nth-of-type(1){
|
font-size:16px;
|
font-family:PingFang SC;
|
font-weight:500;
|
color:rgba(0,0,0,1);
|
text-align: center;
|
margin-bottom: 12px;
|
}
|
p:nth-of-type(2){
|
font-size:12px;
|
font-family:PingFang SC;
|
font-weight:500;
|
color:rgba(153,153,153,1);
|
margin-bottom: 23px;
|
}
|
input{
|
width:244px;
|
height:36px;
|
background:rgba(255,255,255,1);
|
border:1px solid rgba(230,230,230,1);
|
border-radius:18px;
|
padding-left: 21px;
|
box-sizing: border-box;
|
margin-bottom: 31px;
|
}
|
button{
|
width:175px;
|
height:36px;
|
background:rgba(137,110,219,1);
|
border-radius:18px;
|
color:#fff;
|
border: 0;
|
outline: none;
|
}
|
}
|
.top-back{
|
width:100%;
|
height:130px;
|
background:linear-gradient(180deg,rgba(137,110,219,1),rgba(90,74,207,1));
|
position: relative;
|
overflow: hidden;
|
top: -46px;
|
.big-cri{
|
width:92px;
|
height:92px;
|
background:rgba(255,255,255,1);
|
opacity:0.1;
|
border-radius:50%;
|
position: absolute;
|
top: -13px;
|
right: -46px;
|
}
|
.small-cri{
|
width:55px;
|
height:55px;
|
background:rgba(255,255,255,1);
|
opacity:0.05;
|
border-radius:50%;
|
position: absolute;
|
top: 49px;
|
left: 7px;
|
}
|
.btn-grounp{
|
width:94%;
|
margin-left: 3%;
|
margin-top: 55px;
|
height:36px;
|
background:rgba(138,117,220,1);
|
border-radius:18px;
|
position: relative;
|
text-align: center;
|
line-height: 36px;
|
.squer{
|
display: inline-block;
|
width:50%;
|
height:36px;
|
background:rgba(255,255,255,1);
|
border-radius:18px;
|
position: absolute;
|
top: 0;
|
left: 0;
|
}
|
.btn-hb{
|
position: relative;
|
z-index: 100;
|
display: inline-block;
|
outline: none;
|
border: 0;
|
color:#5C4CD0;
|
width:49%;
|
height:36px;
|
border-radius:18px;
|
}
|
.btn-cx{
|
position: relative;
|
z-index: 100;
|
display: inline-block;
|
outline: none;
|
border: 0;
|
color:#fff;
|
width:49%;
|
height:36px;
|
border-radius:18px;
|
}
|
}
|
}
|
.list-box{
|
height: 83vh;
|
width: 100%;
|
overflow: scroll;
|
position: absolute;
|
top: 105px;
|
.list-div{
|
width:94%;
|
height:130px;
|
background:rgba(255,255,255,1);
|
box-shadow:0px 1px 19px 0px rgba(91,55,201,0.16);
|
border-radius:3px;
|
margin-left: 3%;
|
margin-bottom: 15px;
|
box-sizing: border-box;
|
padding: 18px 8px 0 8px;
|
position: relative;
|
.list-top{
|
border-bottom:1px solid #E5E5E5;
|
padding-bottom: 13px;
|
i{
|
font-size: 18px;
|
color: #8365E1;
|
display: inline-block;
|
vertical-align: middle;
|
}
|
span:nth-of-type(1){
|
font-size:16px;
|
font-weight:bold;
|
color:rgba(51,51,51,1);
|
display: inline-block;
|
vertical-align: middle;
|
width: 40%;
|
}
|
span:nth-of-type(2){
|
font-size: 12px;
|
color: #666666;
|
display: inline-block;
|
vertical-align: middle;
|
width: 50%;
|
text-align: right;
|
}
|
}
|
.list-left::after{
|
content: '';
|
width:1px;
|
height:32px;
|
background:rgba(230,230,230,1);
|
position: absolute;
|
top: 73px;
|
left: 49%;
|
}
|
.list-left,.list-right{
|
display: inline-block;
|
width: 49%;
|
padding-top: 19px;
|
text-align: center;
|
p:nth-of-type(1){
|
font-size:18px;
|
font-family:PingFang SC;
|
font-weight:bold;
|
margin-bottom: 7px;
|
color:rgba(51,51,51,1);
|
}
|
p:nth-of-type(2){
|
font-size:12px;
|
font-family:PingFang SC;
|
font-weight:500;
|
color:rgba(153,153,153,1);
|
}
|
}
|
}
|
}
|
.nothing-div{
|
text-align: center;
|
margin-top: 15vh;
|
.nothing-pic{
|
width: 165px;
|
height: 94px;
|
}
|
.nothing-text{
|
font-size:14px;
|
font-family:PingFang SC;
|
font-weight:500;
|
color:rgba(51,51,51,1);
|
margin-top: 16px;
|
}
|
}
|
.list-box::-webkit-scrollbar,.withdrawals-box::-webkit-scrollbar {
|
display: none;
|
}
|
.order-list {
|
padding: 0 8px 30px;
|
|
.info {
|
margin-bottom: 20px;
|
}
|
}
|
.popup-content{
|
height: 150px;
|
width: 280px;
|
border-radius: 3px;
|
.icon-box{
|
z-index: 99999;
|
height: 64px;
|
width: 64px;
|
position: absolute;
|
left: 50%;
|
background:rgba(66,61,93,0.1);
|
border-radius: 50%;
|
transform: translate(-50%,-50%);
|
|
.child{
|
height: 55px;
|
width: 55px;
|
background:rgba(66,61,93,0.8);
|
border-radius: 50%;
|
}
|
}
|
.text{
|
width: 210px;
|
text-align: center;
|
margin: 0 auto;
|
padding-top: 50px;
|
line-height: 18px;
|
.top{
|
color: @c-text-666;
|
}
|
}
|
.btn-submit{
|
.lh(44px);
|
position: absolute;
|
width: 100%;
|
bottom: 0;
|
color: @c-text-default;
|
}
|
}
|
// .xyg-list-box{
|
// min-height: 100vh;
|
// background-color: #F5F5F7;
|
// .order-list {
|
// padding: 0 8px 30px;
|
// .list-item {
|
// width: 98%;
|
// background: #fff;
|
// padding:20px 8px 10px 8px;
|
// box-sizing: border-box;
|
// margin: 10px 1%;
|
// }
|
// .amt-term{
|
// position: relative;
|
// .box::after{
|
// content: "";
|
// position: absolute;
|
// height: 36px;
|
// color: #EBEBEB;
|
// top: 0;
|
// right: 50%;
|
// border-right:1px solid #EBEBEB;
|
// }
|
// div{
|
// display: inline-block;
|
// width: 49%;
|
// text-align: center;
|
// p{
|
// margin-bottom:7px;
|
// }
|
// p:nth-of-type(1){
|
// color: #2B2B2B;
|
// font-size: 18px;
|
// font-weight: bold;
|
// }
|
// p:nth-of-type(2){
|
// color: #989898;
|
// font-size: 12px;
|
// }
|
// }
|
// }
|
// .tel-time{
|
// background-color: #F7F5FB;
|
// height: 40px;
|
// box-sizing: border-box;
|
// padding: 0 5px;
|
// margin-top:10px;
|
// span{
|
// display: inline-block;
|
// line-height: 40px;
|
// width: 49%;
|
// }
|
// span:nth-of-type(1){
|
// font-size: 14px;
|
// color: #848485;
|
// }
|
// span:nth-of-type(2){
|
// text-align: right;
|
// font-size: 12px;
|
// color: #979796;
|
// }
|
// }
|
// }
|
// }
|
</style>
|
