cyywl_server/yudao-ui-app/pages/member_record/index.vue

<template>
  <view class="box">
    <view class="box-seach">
      <u-search placeholder="按手机号搜索查询" v-model="keyword" border-color="#F94B78" height="70" margin="0 0 35rpx 0" placeholder-color="#9C9C9C" bg-color="#fff" :show-action="false"></u-search>
    </view>
    <view class="list-item" v-for="(item,index) in memberData" :key="index" @click.stop="handleBack(item)">
      <view class="item-title">
        <view class="item-phone">
          <view></view>
          <text>充值号码：{{item.userPhone}}</text>
        </view>
        <button v-show="item.bool && item.refundStatus == 0" @click.stop="handleService(item)">申请退款</button>
        <view v-show="item.refundStatus != 0">{{list[item.refundStatus]}}</view>
      </view>
        <view class="item-text">
        <text>日期：{{$util.timestampToTime(item.stringCreateTime)}}</text>
        <text>充值档次：{{item.grade}}</text>
        </view>
  </view>
  <u-empty v-show="!memberData.length" text="暂无数据" mode="list"></u-empty>
  <u-navbar autoBack  title="购买记录"></u-navbar>
  </view>
</template>

<script>
  import {
  	memberOrderInfo,memberApplyRefund,memberOrderInfoByPhone
  } from '@/api/member.js';
  import { Debounce } from '@/utils/validate.js'
  export default {
    name: "member_record",
    data() {
      return {
        keyword:'',
        memberData:[],
        list:['未退款','退款申请中','已退款','退款中']
      };
    },
    async onLoad() {
      await this.getList()
    },
    watch:{
      keyword :Debounce (async function (){
        if(this.keyword == ''){
         await this.getList()
        }else{
         await this.searchList()
        }
      },1000)
      },
    methods: {
      handleBack(item){
        uni.navigateTo({
          url:`/pages/member_back/index?userPhone=${item.userPhone}&grade=${item.grade}`
        })
      },
      async searchList(){
        let milliseconds = 2 * 3600 * 1000  // 7200000 毫秒
         let timestamp = new Date().getTime()
           const res = await memberOrderInfoByPhone(this.keyword)
          if(res.data){
            const arr = res.data.map((item) => {
               return {
                 ...item,
                 bool:item.createTime+milliseconds>timestamp
               }
             })
             this.memberData = arr
          }else{
            this.memberData = []
          }
      },
      async getList(){
        let milliseconds = 2 * 3600 * 1000  // 7200000 毫秒
         let timestamp = new Date().getTime()
         const res = await memberOrderInfo()
        if(res.data){
          const arr = res.data.map((item) => {
             return {
               ...item,
               bool:item.createTime+milliseconds>timestamp
             }
           })
           this.memberData = arr
        }else{
          this.memberData = []
        }
      },
     async handleService(item){
       await memberApplyRefund({orderId:item.id,type:3})
       this.$util.Tips({
       	title: '申请成功'
       });
       await this.getList()
      }
    }
  };
</script>

<style lang="scss" scoped>
  .box {
    margin-top: 10%;
      padding: 20% 40rpx;
      background: url(../../static/images/memberBg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      .u-empty{
        margin-top: 20% !important;
        ::v-deep .u-icon__icon{
          font-size: 140rpx !important;
        }
       ::v-deep .u-empty__text{
          font-size: 30rpx !important;
        }
      }

      .box-seach{
        z-index: 999;
        padding: 0 40rpx;
        width: 100%;
        position: fixed;
        top:  8%;
        left: 0;
      }
      .list-item{
        margin-bottom: 26rpx;
        padding: 30rpx 16rpx 25rpx 16rpx;
        background: #FDF0F1;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .item-title{
          display: flex;
          justify-content: space-between;
          .item-phone{
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: #E91D51;
            view{
              border-radius: 3rpx;
              margin-right: 10rpx;
              width: 5rpx;
              height: 12rpx;
              background: #E91D51;
            }
          }
          button{
            padding: 6rpx ;
            font-size: 26rpx;
            background: rgb(22,155,213);
            color: #fff;
          }
        }

        .item-text{
          padding: 20rpx 12rpx;
          background: #fff;
          margin-top: 20rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 30rpx;
        }
      }
  }
</style>