<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>充值档次:{{item.grade}}</text> <text>日期:{{item.stringCreateTime}}</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; height: 100vh; 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: 34rpx 12rpx; background: #fff; margin-top: 20rpx; display: flex; justify-content: space-between; font-size: 30rpx; } } } </style>