281 lines
7.6 KiB
Vue
281 lines
7.6 KiB
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>
|