完成智慧充值模块
This commit is contained in:
186
pageRecharge/components/choose-coupon.vue
Normal file
186
pageRecharge/components/choose-coupon.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view class="">
|
||||
<up-popup :show="show" mode="bottom">
|
||||
<view class="">
|
||||
<view class="top u-flex u-row-between">
|
||||
<text class="font-bold u-font-32 color-333">{{ title }}</text>
|
||||
<up-icon size="18" name="close" @click="show = false"></up-icon>
|
||||
</view>
|
||||
<scroll-view ref="couponScroll" :scroll-y="true" style="max-height: 50vh" @scroll="scroll" :scroll-top="scrollTop">
|
||||
<view v-for="(item, index) in list" :key="index" class="item" @click="itemClick(item)" :class="[selGoods && selGoods.id == item.id ? 'selected' : '']">
|
||||
<view class="u-flex u-row-between">
|
||||
<view class="u-flex gap-20">
|
||||
<!-- <view class="u-flex" @click.stop="preview(item)">
|
||||
<up-image
|
||||
:src="item.coverImg"
|
||||
width="80rpx"
|
||||
height="80rpx"
|
||||
></up-image>
|
||||
</view> -->
|
||||
|
||||
<text class="u-font-32 color-333">{{ item.title }}</text>
|
||||
</view>
|
||||
<text class="u-font-32 color-red u-p-l-30"></text>
|
||||
</view>
|
||||
</view>
|
||||
<up-empty v-if="list.length == 0" class="u-p-30" text="暂无数据"></up-empty>
|
||||
</scroll-view>
|
||||
<view class="bottom">
|
||||
<view class="btn cancel" @click="close">{{ cancelText }}</view>
|
||||
<view class="btn success" @click="confirm">{{ confirmText }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
const modelValue = defineModel({
|
||||
type: String,
|
||||
default: ''
|
||||
});
|
||||
const show = defineModel('show', {
|
||||
type: Boolean,
|
||||
default: ''
|
||||
});
|
||||
const couponName = defineModel('couponName', {
|
||||
type: String,
|
||||
default: ''
|
||||
});
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '选择优惠券'
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确认'
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
const selGoods = ref('');
|
||||
function itemClick(item) {
|
||||
if (selGoods.value && selGoods.value.id == item.id) {
|
||||
selGoods.value = '';
|
||||
return;
|
||||
}
|
||||
selGoods.value = item;
|
||||
}
|
||||
|
||||
const scrollTop = ref(0);
|
||||
function scroll(e) {
|
||||
scrollTop.value = e.detail.scrollTop;
|
||||
}
|
||||
function preview(item) {
|
||||
uni.previewImage({
|
||||
urls: item.images || [item.coverImg]
|
||||
});
|
||||
}
|
||||
watch(
|
||||
() => modelValue.value,
|
||||
(newVal, oldVal) => {
|
||||
console.log(newVal, oldVal);
|
||||
selGoods.value = props.list.find((item) => item.id == newVal);
|
||||
console.log(selGoods.value);
|
||||
if (selGoods.value) {
|
||||
couponName.value = selGoods.value.title;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.list.length,
|
||||
(newVal, oldVal) => {
|
||||
selGoods.value = props.list.find((item) => item.id == modelValue.value);
|
||||
console.log(selGoods.value);
|
||||
if (selGoods.value) {
|
||||
modelValue.value = selGoods.value.id;
|
||||
couponName.value = selGoods.value.title;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
function close() {
|
||||
show.value = false;
|
||||
}
|
||||
|
||||
const emit = defineEmits(['confirm']);
|
||||
function confirm() {
|
||||
if (!selGoods.value) {
|
||||
uni.showToast({
|
||||
title: '请选择优惠券',
|
||||
icon: 'none'
|
||||
});
|
||||
return;
|
||||
}
|
||||
modelValue.value = selGoods.value.id;
|
||||
show.value = false;
|
||||
emit('confirm', selGoods.value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.popup-content {
|
||||
background: #fff;
|
||||
width: 640rpx;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
.top {
|
||||
padding: 40rpx 48rpx;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
.bottom {
|
||||
padding: 48rpx 52rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
gap: 50rpx;
|
||||
.btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 18rpx 60rpx;
|
||||
border-radius: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border: 2rpx solid transparent;
|
||||
&.success {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
&.cancel {
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: 0 4rpx 0 0 #00000005;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
padding: 10rpx 30rpx;
|
||||
border: 1px solid #d9d9d9;
|
||||
margin: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 0 10px transparent;
|
||||
&.selected {
|
||||
border-color: $my-main-color;
|
||||
box-shadow: 0 0 10px $my-main-color;
|
||||
}
|
||||
}
|
||||
.choose-goods {
|
||||
display: flex;
|
||||
padding: 24rpx;
|
||||
align-items: center;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
background: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
89
pageRecharge/components/coupon-list.vue
Normal file
89
pageRecharge/components/coupon-list.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-flex u-row-between u-m-b-24" style="gap: 40rpx" v-for="(item, index) in modelValue" :key="index">
|
||||
<view class="choose-coupon u-flex-1 u-flex u-row-between" @click="showCoupon(item, index)">
|
||||
<template v-if="item.title">
|
||||
<text>{{ item.title }}</text>
|
||||
<view class="u-flex" @click.stop="item.title = ''">
|
||||
<up-icon name="close" size="14"></up-icon>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<text class="color-999">选择赠送券</text>
|
||||
<up-icon name="arrow-down" size="14"></up-icon>
|
||||
</template>
|
||||
</view>
|
||||
<view class="u-flex-1 u-flex">
|
||||
<view class="u-flex-1 choose-coupon u-flex">
|
||||
<input class="u-flex-1" placeholder="" type="number" v-model="item.num" placeholder-class="color-999 u-font-28" @input="numInput($event, item)" />
|
||||
<text class="no-wrap color-999">{{ tips }}</text>
|
||||
</view>
|
||||
<view class="u-m-l-20">
|
||||
<up-icon name="minus-circle-fill" color="#EB4F4F" size="18" @click="removeCoupon(index)"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<chooseCoupon v-model="chooseCouponData.couponId" v-model:show="chooseCouponData.show" @confirm="confirmCoupon" :list="couponList"></chooseCoupon>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import chooseCoupon from './choose-coupon.vue';
|
||||
import { couponPage } from '@/http/api/market/index.js';
|
||||
import { filterNumberInput } from '@/utils/index.js';
|
||||
|
||||
const props = defineProps({
|
||||
tips: {
|
||||
type: String,
|
||||
default: '张/1个码'
|
||||
}
|
||||
});
|
||||
|
||||
const chooseCouponData = reactive({
|
||||
couponId: '',
|
||||
show: false,
|
||||
index: -1,
|
||||
item: null
|
||||
});
|
||||
const modelValue = defineModel({
|
||||
type: Array,
|
||||
default: () => []
|
||||
});
|
||||
const couponList = ref([]);
|
||||
function showCoupon(item, index) {
|
||||
chooseCouponData.couponId = item ? item.id : '';
|
||||
chooseCouponData.show = true;
|
||||
chooseCouponData.index = index;
|
||||
chooseCouponData.item = item;
|
||||
}
|
||||
function confirmCoupon(e) {
|
||||
modelValue.value[chooseCouponData.index].id = e.id;
|
||||
modelValue.value[chooseCouponData.index].title = e.title;
|
||||
}
|
||||
function removeCoupon(index) {
|
||||
modelValue.value.splice(index, 1);
|
||||
}
|
||||
|
||||
function numInput(e, item) {
|
||||
console.log('e', e);
|
||||
console.log('item', item);
|
||||
setTimeout(() => {
|
||||
item.num = filterNumberInput(e.detail.value, 1);
|
||||
}, 50);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
console.log('coupon-list', modelValue.value);
|
||||
couponPage({ size: 999 }).then((res) => {
|
||||
couponList.value = res.records;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.choose-coupon {
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
</style>
|
||||
108
pageRecharge/components/date-time-picker.vue
Normal file
108
pageRecharge/components/date-time-picker.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<view @click="open">
|
||||
<slot v-if="$slots.default"> </slot>
|
||||
<view v-else class="choose-goods u-flex u-row-between">
|
||||
<text class="color-999" v-if="!startTime && !endTime"
|
||||
>请选择日期范围</text
|
||||
>
|
||||
<text class="color-333 u-font-24 u-m-r-32 " v-else
|
||||
>{{ startTime }} - {{ endTime }}</text
|
||||
>
|
||||
<view class="u-flex" v-if="startTime&&endTime" @click.stop="clear">
|
||||
<up-icon name="close" size="14"></up-icon>
|
||||
</view>
|
||||
<up-icon size="14" name="arrow-right" v-else ></up-icon>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<my-date-pickerview
|
||||
@confirm="datePickerConfirm"
|
||||
mode="all"
|
||||
ref="datePicker"
|
||||
></my-date-pickerview>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const datePicker = ref(null);
|
||||
const startTime = defineModel("startTime", {
|
||||
default: () => "",
|
||||
type: String,
|
||||
});
|
||||
const endTime = defineModel("endTime", {
|
||||
default: () => "",
|
||||
type: String,
|
||||
});
|
||||
|
||||
function clear(){
|
||||
startTime.value = "";
|
||||
endTime.value = "";
|
||||
}
|
||||
function open() {
|
||||
datePicker.value.toggle();
|
||||
}
|
||||
function datePickerConfirm(e) {
|
||||
startTime.value = e.start;
|
||||
endTime.value = e.end;
|
||||
console.log(e);
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.popup-content {
|
||||
background: #fff;
|
||||
width: 640rpx;
|
||||
border-radius: 18rpx;
|
||||
}
|
||||
.top {
|
||||
padding: 40rpx 48rpx;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
.bottom {
|
||||
padding: 48rpx 52rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
gap: 50rpx;
|
||||
.btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 18rpx 60rpx;
|
||||
border-radius: 100rpx;
|
||||
font-size: 32rpx;
|
||||
border: 2rpx solid transparent;
|
||||
&.success {
|
||||
background-color: $my-main-color;
|
||||
color: #fff;
|
||||
}
|
||||
&.cancel {
|
||||
border-color: #d9d9d9;
|
||||
box-shadow: 0 4rpx 0 0 #00000005;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item {
|
||||
padding: 10rpx 30rpx;
|
||||
border: 1px solid #d9d9d9;
|
||||
margin: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
transition: all 0.3s ease-in-out;
|
||||
box-shadow: 0 0 10px transparent;
|
||||
&.selected {
|
||||
border-color: $my-main-color;
|
||||
box-shadow: 0 0 10px $my-main-color;
|
||||
}
|
||||
}
|
||||
.choose-goods {
|
||||
display: flex;
|
||||
padding: 24rpx;
|
||||
align-items: center;
|
||||
border-radius: 8rpx;
|
||||
border: 2rpx solid #d9d9d9;
|
||||
background: #fff;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
min-height: 90rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -1,79 +1,98 @@
|
||||
<template>
|
||||
<view class=" item">
|
||||
<view class="u-flex ">
|
||||
<view class="color-333 u-flex font-bold ">
|
||||
<view class="u-font-40">{{to2(props.data.price) }}</view>
|
||||
<view class="item">
|
||||
<view class="u-flex">
|
||||
<view class="color-333 u-flex font-bold">
|
||||
<view class="u-font-40">{{ to2(data.amount) }}</view>
|
||||
<view>元</view>
|
||||
</view>
|
||||
<view class="u-font-24 u-m-l-20 color-999 id">
|
||||
id:{{props.data.id}}
|
||||
</view>
|
||||
<view class="u-font-24 u-m-l-20 color-999 id">ID:{{ data.id }}</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-32 u-p-22 desc">
|
||||
<view class="u-m-t-32 u-p-22 desc" v-if="returnSendStr.length">
|
||||
<text class="color-999">充值赠送</text>
|
||||
<text class="u-m-l-16 color-333">{{props.data.desc}}</text>
|
||||
<text class="u-m-l-16 color-333">
|
||||
{{ returnSendStr.join('、') }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-right u-m-t-32 gap-20">
|
||||
<view class="" style="width: 140rpx;">
|
||||
<view class="" style="width: 140rpx">
|
||||
<my-button plain height="56" type="cancel" shape="circle" @tap="del">删除</my-button>
|
||||
</view>
|
||||
<view class="" style="width: 140rpx;">
|
||||
<view class="" style="width: 140rpx">
|
||||
<my-button height="56" shape="circle" @tap="toEdit">编辑</my-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myButton from '@/components/my-components/my-button.vue'
|
||||
const props = defineProps({
|
||||
index:{
|
||||
type:Number,
|
||||
default:-1
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
import { computed } from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myButton from '@/components/my-components/my-button.vue';
|
||||
const props = defineProps({
|
||||
index: {
|
||||
type: Number,
|
||||
default: -1
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
})
|
||||
const emits=defineEmits(['del'])
|
||||
function del(){
|
||||
emits('del',{
|
||||
index:props.index,
|
||||
data:props.data
|
||||
})
|
||||
}
|
||||
function toEdit(){
|
||||
go.to('PAGES_RECHARGE_ADD_RECHARGE',{...props.data})
|
||||
});
|
||||
const emits = defineEmits(['del']);
|
||||
function del() {
|
||||
emits('del', {
|
||||
index: props.index,
|
||||
data: props.data
|
||||
});
|
||||
}
|
||||
function toEdit() {
|
||||
uni.setStorageSync('rechargeCouponInfoListDetail', props.data);
|
||||
go.to('PAGES_RECHARGE_ADD_RECHARGE');
|
||||
}
|
||||
function to2(n) {
|
||||
return Number(n).toFixed(2);
|
||||
}
|
||||
|
||||
// 返回赠送优惠券总数
|
||||
function returnCouponCount() {
|
||||
let num = 0;
|
||||
props.data.couponInfoList.map((item) => {
|
||||
num += item.num;
|
||||
});
|
||||
return num;
|
||||
}
|
||||
|
||||
const returnSendStr = computed(() => {
|
||||
let arr = [];
|
||||
if (props.data.rewardAmount > 0) {
|
||||
arr.push(`${props.data.rewardAmount}元`);
|
||||
}
|
||||
function to2(n) {
|
||||
return Number(n).toFixed(2)
|
||||
if (props.data.couponInfoList.length > 0) {
|
||||
arr.push(`${returnCouponCount()}张券`);
|
||||
}
|
||||
return arr;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
padding: 32rpx 24rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
overflow: hidden;
|
||||
.item {
|
||||
padding: 32rpx 24rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 18rpx 18rpx 18rpx 18rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.desc {
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
background-color: #F9F9F9;
|
||||
}
|
||||
|
||||
.id {
|
||||
background: #F7F7FA;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
padding: 4prx 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.desc {
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
.id {
|
||||
background: #f7f7fa;
|
||||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||||
padding: 4prx 10rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
271
pageRecharge/components/rechargeRerord.vue
Normal file
271
pageRecharge/components/rechargeRerord.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<!-- 充值记录 -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="query-wrap">
|
||||
<view class="ipt">
|
||||
<DateTimePicker v-model:startTime="form.startTime" v-model:endTime="form.endTime" style="width: 100%"></DateTimePicker>
|
||||
</view>
|
||||
<view class="ipt">
|
||||
<view class="ipt" @click="showSheet = true">
|
||||
<u-input readonly placeholder="请选择充值类型" v-model="form.bizCodeText" suffix-icon="arrow-right" :suffixIconStyle="{ fontSize: '14px' }"></u-input>
|
||||
</view>
|
||||
<view class="btn-wrap">
|
||||
<view class="btn">
|
||||
<u-button type="primary" @click="searchHandle">搜索</u-button>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<u-button @click="resetHandle">重置</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="total-info">
|
||||
<view class="card">
|
||||
<view class="header">
|
||||
<text class="t">数据统计</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in tableData.list" :key="item.id">
|
||||
<view class="header">
|
||||
<text class="name">{{ item.shopName }}</text>
|
||||
<text class="time">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="left">
|
||||
<view class="top">
|
||||
<text class="t">{{ item.nickName }}</text>
|
||||
</view>
|
||||
<view class="btm">
|
||||
<text class="t">备注:{{ item.remark }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num-wrap">
|
||||
<text class="num">{{ item.amount }}</text>
|
||||
<text class="t">订单消费</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="tableData.status"></u-loadmore>
|
||||
</view>
|
||||
<u-action-sheet
|
||||
:actions="bizCodeList"
|
||||
title="充值类型"
|
||||
:round="20"
|
||||
cancelText="取消"
|
||||
:show="showSheet"
|
||||
@close="showSheet = false"
|
||||
@select="bizCodeSelectHandle"
|
||||
></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted } from 'vue';
|
||||
import DateTimePicker from './date-time-picker.vue';
|
||||
import { shopUserFlow } from '@/http/api/market/index.js';
|
||||
import { onReachBottom } from '@dcloudio/uni-app';
|
||||
|
||||
const showSheet = ref(false);
|
||||
const bizCodeList = [
|
||||
{
|
||||
value: 'cashIn',
|
||||
name: '现金充值'
|
||||
},
|
||||
{
|
||||
value: 'wechatIn',
|
||||
name: '微信小程序充值'
|
||||
},
|
||||
{
|
||||
value: 'alipayIn',
|
||||
name: '支付宝小程序充值'
|
||||
},
|
||||
{
|
||||
value: 'awardIn',
|
||||
name: '充值奖励'
|
||||
},
|
||||
{
|
||||
value: 'rechargeRefund',
|
||||
name: '充值退款'
|
||||
},
|
||||
{
|
||||
value: 'orderPay',
|
||||
name: '订单消费'
|
||||
},
|
||||
{
|
||||
value: 'orderRefund',
|
||||
name: '订单退款'
|
||||
},
|
||||
{
|
||||
value: 'adminIn',
|
||||
name: '管理员充值'
|
||||
},
|
||||
{
|
||||
value: 'adminOut',
|
||||
name: '管理员消费'
|
||||
}
|
||||
];
|
||||
|
||||
const form = ref({
|
||||
bizCode: '',
|
||||
bizCodeText: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
});
|
||||
|
||||
function bizCodeSelectHandle(e) {
|
||||
console.log(e);
|
||||
form.value.bizCode = e.value;
|
||||
form.value.bizCodeText = e.name;
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function searchHandle() {
|
||||
tableData.status = 'loading';
|
||||
tableData.page = 1;
|
||||
shopUserFlowAjax();
|
||||
}
|
||||
|
||||
// 重置
|
||||
function resetHandle() {
|
||||
form.value.bizCode = '';
|
||||
form.value.bizCodeText = '';
|
||||
form.value.startTime = '';
|
||||
form.value.endTime = '';
|
||||
searchHandle();
|
||||
}
|
||||
|
||||
const tableData = reactive({
|
||||
status: 'loading',
|
||||
page: 1,
|
||||
size: 10,
|
||||
list: []
|
||||
});
|
||||
|
||||
// 获取店铺充值记录
|
||||
async function shopUserFlowAjax() {
|
||||
try {
|
||||
if (tableData.page == 1) {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
}
|
||||
|
||||
const res = await shopUserFlow({
|
||||
...form.value,
|
||||
page: tableData.page,
|
||||
size: tableData.size
|
||||
});
|
||||
|
||||
if (tableData.page == 1) {
|
||||
tableData.list = res.records;
|
||||
} else {
|
||||
tableData.list.push(...res.records);
|
||||
}
|
||||
if (res.pageNumber >= res.totalPage) {
|
||||
tableData.status = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
if (tableData.page == 1) {
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
if (tableData.status != 'nomore') {
|
||||
tableData.page++;
|
||||
shopUserFlowAjax();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
shopUserFlowAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.query-wrap {
|
||||
background-color: #fff;
|
||||
padding: 0 28upx 28upx;
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
flex-direction: column;
|
||||
.ipt {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
}
|
||||
.btn-wrap {
|
||||
display: flex;
|
||||
gap: 28upx;
|
||||
}
|
||||
}
|
||||
.total-info {
|
||||
padding: 28upx;
|
||||
.card {
|
||||
background-color: #4a9dff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding: 28upx;
|
||||
.item {
|
||||
background-color: #fff;
|
||||
border-radius: 20upx;
|
||||
padding: 28upx;
|
||||
margin-bottom: 28upx;
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.name {
|
||||
font-size: 28upx;
|
||||
}
|
||||
.time {
|
||||
font-size: 28upx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
padding-top: 28upx;
|
||||
.left {
|
||||
flex: 1;
|
||||
.top {
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.btm {
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
.num-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.num {
|
||||
font-size: 32upx;
|
||||
color: #333;
|
||||
}
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user