|
|
@@ -1,15 +1,270 @@
|
|
|
<template>
|
|
|
<div class="rechargeList">
|
|
|
- 充值列表
|
|
|
+ <div class="user_head">
|
|
|
+ <img src="../../assets/image/payrollback_left@2x.png" class="leftIcon" alt="" @click="$router.replace('/user')">
|
|
|
+ <span>
|
|
|
+ 充值订单
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <el-tabs class="haoyou" @tab-click="handleClick">
|
|
|
+ <el-tab-pane label="待支付">
|
|
|
+ <ul class="list-group list-group-flush" v-if="!cueShow" style="line-heigt:1.5rem">
|
|
|
+ <li class="list-group-item m-2 mb-0" v-for="(item, idx) in list" :key="idx" >
|
|
|
+ <div class="section">
|
|
|
+ <p class="d-flex align-items-center">
|
|
|
+ <span class="leftColor">订单编号</span>
|
|
|
+ <span class="ml-auto rightColor"></span>
|
|
|
+ </p>
|
|
|
+ <p class="d-flex align-items-center">
|
|
|
+ <span class="leftColor">下单时间</span>
|
|
|
+ <span class="ml-auto rightColor"></span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="section">
|
|
|
+ <p class="d-flex align-items-center">
|
|
|
+ <span class="leftColor">办理进度</span>
|
|
|
+ <span class="ml-auto" style="color:#fb2e2e"></span>
|
|
|
+ </p>
|
|
|
+ <p class="d-flex align-items-center">
|
|
|
+ <span class="leftColor">实付金额</span>
|
|
|
+ <span class="ml-auto leftColor">¥</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="footer align-items-center" style="justify-content: space-between;">
|
|
|
+ <button class="btn btn-info" style="background: #4FDCA2;border:1px solid #4FDCA2" @click="open">联系我们</button>
|
|
|
+ <button class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)" @click="cancel">取消订单</button>
|
|
|
+ <a class="btn btn-info" style="background: #fff;color:#666666;border:1px solid rgb(102, 102, 102,.5)">订单详情</a>
|
|
|
+ <button style="background: #F78F7E;border:1px solid #F78F7E" class="btn btn-info" @click="gopay">去付款</button>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="cuewords">
|
|
|
+ <p>您暂时还没有订单</p>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ <div class="more" v-if="moreShow">
|
|
|
+ <a href="javascript:void(0);" class="btn btn-light btn-block m-2 pt-3 pb-3" v-on:click="loadMore"
|
|
|
+ v-if="hasMore">点击加载更多</a>
|
|
|
+ <p class="text-center" style="color:#999" v-if="!hasMore">没有更多了</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Http from "../../extend/Http";
|
|
|
export default {
|
|
|
-
|
|
|
+ name: 'rechargeList',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ status: 0,
|
|
|
+ cueShow: false,
|
|
|
+ cueShow2: false,
|
|
|
+ cueShow3: false,
|
|
|
+ moreShow: false,
|
|
|
+ hasMore: true,
|
|
|
+ page: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getRechargeLists()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getRechargeLists () {
|
|
|
+ let res = await Http.getInstance().getRechargeLists({
|
|
|
+ page: this.page,
|
|
|
+ order_state: this.status
|
|
|
+ });
|
|
|
+ console.log('充值订单', res);
|
|
|
+ if(res.data.length == 0){
|
|
|
+ this.cueShow = true
|
|
|
+ this.cueShow2 = true
|
|
|
+ this.cueShow3 = true
|
|
|
+ this.moreShow = false
|
|
|
+ }else{
|
|
|
+ this.list = res.data
|
|
|
+ this.hasMore = res.data.length >9 ;
|
|
|
+ this.moreShow = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClick(tab,event){
|
|
|
+ if(tab.label == '待支付'){
|
|
|
+ }
|
|
|
+ },
|
|
|
+ open() {
|
|
|
+ // @ts-ignore
|
|
|
+ MessageBox.alert('<a href="tel:' + Http.PHONE + '">' + Http.PHONE + '</a><p>手机号同步微信</p>', '请联系客服', {
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ confirmButtonText: "拨打" ,
|
|
|
+ }).then(action =>{
|
|
|
+ window.location.href = 'tel://' +Http.PHONE;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async loadMore() {
|
|
|
+ let res = await Http.getInstance().getRechargeLists({
|
|
|
+ page: this.page,
|
|
|
+ status: this.status
|
|
|
+ });
|
|
|
+ this.hasMore = res.data.length >9 ;
|
|
|
+ this.list = [].concat(this.list.concat(res.data));
|
|
|
+ this.page++;
|
|
|
+ },
|
|
|
+ // 取消订单
|
|
|
+ cancel() {},
|
|
|
+ // 付款
|
|
|
+ gopay() {}
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+// 顶部导航
|
|
|
+.user_head{
|
|
|
+ text-align: center;
|
|
|
+ font-size: 2rem;
|
|
|
+ // font-family: 'PingFang SC';
|
|
|
+ padding-bottom: 1.667rem;
|
|
|
+ padding-top: 1rem;
|
|
|
+ // font-weight: bold;
|
|
|
+ line-height: 1.5rem;
|
|
|
+ background-color: #fff;
|
|
|
+ .leftIcon{
|
|
|
+ position: absolute;
|
|
|
+ left: 1.667rem;
|
|
|
+ top: 1.4rem;
|
|
|
+ width: 0.667rem;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ vertical-align: middle;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+}
|
|
|
+ .list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ background-color: #EDF0F5;
|
|
|
+}
|
|
|
+// tab栏样式
|
|
|
+.list /deep/.el-tabs__active-bar {
|
|
|
+ background-color: #4FDCA2;
|
|
|
+}
|
|
|
+.list /deep/.el-tabs__item.is-active {
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.list /deep/.el-tabs__item {
|
|
|
+ color: #666;
|
|
|
+ font-size: 1.4rem;
|
|
|
+}
|
|
|
+.list /deep/.el-tabs__nav-wrap {
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.list /deep/.el-tabs__header {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin: 0;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.list /deep/.el-tabs__nav-wrap::after {
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+// 右侧字体颜色
|
|
|
+.rightColor {
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.leftColor {
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.list-wrap {
|
|
|
+}
|
|
|
+.haoyou{
|
|
|
+ .el-tabs__nav-scroll{
|
|
|
+ /*margin-left: 9rem;*/
|
|
|
+ // padding: 0 8rem;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 内边距
|
|
|
+ .list-group {
|
|
|
+ padding: 1rem;
|
|
|
+ }
|
|
|
+ .list .list-group-item {
|
|
|
+ border-radius: 0.833rem;
|
|
|
+ // padding: .5rem;
|
|
|
+ padding: 1rem 1rem 1.5rem 1rem;
|
|
|
+ margin: .5rem;
|
|
|
+ margin-bottom: 0;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
|
|
|
+.footer {
|
|
|
+ color: #ffffff;
|
|
|
+ // float: right;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ padding-top: 1rem;
|
|
|
+ .btn {
|
|
|
+ padding: 0.375rem 0.55rem;
|
|
|
+ }
|
|
|
+ .btn-info{
|
|
|
+ // margin: 0 0.5rem;
|
|
|
+ border: none;
|
|
|
+ // border-radius: 1.5rem;
|
|
|
+ border-radius: 0.5rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+ .btnLeft {
|
|
|
+ margin-right: 1rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+.footer:first-child {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.cuewords{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ p{
|
|
|
+ margin-top: 9rem;
|
|
|
+ color: #999
|
|
|
+ }
|
|
|
+}
|
|
|
+.section{
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.seal-img{
|
|
|
+ position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ // right: 5rem;
|
|
|
+ // width: 5rem;
|
|
|
+ top: -6.5rem;
|
|
|
+ height: 6rem;
|
|
|
+ right: 0rem;
|
|
|
+ width: 6rem;
|
|
|
+ background: url("../../assets/image/seal_03@2px.png") no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ // padding-top: 1.7rem;
|
|
|
+ // padding-left: 0.9rem;
|
|
|
+ padding-top: 2.25rem;
|
|
|
+ padding-left: 1.4rem;
|
|
|
+ span{
|
|
|
+ // color: #ee1e1e;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 1rem;
|
|
|
+ display: inline-block;
|
|
|
+ // transform:rotate(-31deg);
|
|
|
+ transform:rotate(-11deg);
|
|
|
+ font-weight:700 ;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
