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-modal :show="serviceShow" @confirm="confirm" @cancel="serviceShow = false" title="申请退款" show-cancel-button
      confirm-text="确认退款" cancel-text="取消退款">
      <view class="slot-content">
        <u--form :model="form" ref="uForm" :rules="rules" label-width="120">
          <u-form-item label="退款类型" prop="refundName" @click="show = true;">
            <u--input v-model="form.refundName" disabled disabledColor="#ffffff" placeholder='请选择退款类型'></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item label="退款理由" prop="memberReason"><u--textarea v-model="form.memberReason" maxlength="100"
              placeholder='请输入退款理由' count autoHeight /></u-form-item>
        </u--form>
      </view>
    </u-modal>
    <u-empty v-show="!memberData.length" text="暂无数据" mode="list"></u-empty>
    <u-navbar autoBack title="购买记录"></u-navbar>
    <u-action-sheet :show="show" :actions="actionSheetList" title="请选择退款类型" @close="show = false"
      @select="handleSelect">
    </u-action-sheet>
  </view>
</template>

<script>
  import {
    memberOrderInfo,
    memberApplyRefund,
    memberOrderInfoByPhone
  } from '@/api/member.js';
  import {
    Debounce
  } from '@/utils/validate.js'
  export default {
    name: "member_record",
    data() {
      return {
        rules: {
          refundName: [{
            required: true,
            message: '请选择退款类型',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur'],
          }],
          refundType: [{
            required: true,
            message: '请选择退款类型',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur'],
          }],
          memberReason: [{
            required: true,
            message: '请输入退款理由',
            trigger: ['change', 'blur'],
          }]
        },
        show: false,
        serviceShow: false,
        keyword: '',
        memberData: [],
        form: {
          refundName: '',
          refundType: '',
          memberReason:''
        },
        list: ['未退款', '退款申请中', '已退款', '退款中'],
        actionSheetList: [{
            name: '对活动理解有误',
            value: 1,
          },
          {
            name: '同一充值账户',
            value: 2
          },
          {
            name: '改套餐/转网/销户',
            value: 3
          },
          {
            name: '下单信息有误',
            value: 4
          },
          {
            name: '业绩归属错误',
            value: 5
          },
          {
            name: '重复订单',
            value: 6
          },
          {
            name: '号码充值失败',
            value: 7
          },
          {
            name: '等待时间过长',
            value: 8
          },
          {
            name: '其它原因',
            value: 9
          }
        ],
      };
    },
    async onLoad() {
      await this.getList()
    },
    watch: {
      keyword: Debounce(async function() {
        if (this.keyword == '') {
          await this.getList()
        } else {
          await this.searchList()
        }
      }, 1000)
    },
    methods: {
      handleSelect(e) {
        this.form.refundType = e.value
        this.form.refundName = e.name
      },
      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 confirm() {
        this.$refs.uForm.validate().then(async res => {
          await memberApplyRefund(this.form)
          this.$util.Tips({
            title: '申请成功'
          });
          this.serviceShow = false
          await this.getList()
        }).catch(errors => {
          uni.$u.toast('校验失败')
        })
      },
      async handleService(item) {
        this.serviceShow = true
        this.form = {
          orderId: item.id,
          type: 3
        }
      }
    }
  };
</script>

<style lang="scss" scoped>
  ::v-deep .u-textarea__count{
      bottom: -26rpx;
  }
  .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>