完成优惠券页面
This commit is contained in:
311
pageMarket/exchangeCoupon/getDetail.vue
Normal file
311
pageMarket/exchangeCoupon/getDetail.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="search-header-wrap">
|
||||
<view class="search-header">
|
||||
<div class="row">
|
||||
<view class="ipt" @click="showStatusSheet = true">
|
||||
<u-input suffix-icon="arrow-down" readonly placeholder="全部" :customStyle="inputStyle" v-model="statusValue"></u-input>
|
||||
</view>
|
||||
<view class="ipt" style="flex: 1.5" @click="showTime = true">
|
||||
<u-input suffix-icon="arrow-right" readonly placeholder="请选择日期" :customStyle="inputStyle" v-model="timeVlaue"></u-input>
|
||||
</view>
|
||||
</div>
|
||||
<div class="row" style="margin-top: 10px">
|
||||
<view class="ipt">
|
||||
<u-input prefix-icon="search" shape="circle" placeholder="用户昵称/用户ID" :customStyle="inputStyle"></u-input>
|
||||
</view>
|
||||
<div class="btn" style="width: 80px">
|
||||
<u-button shape="circle" type="primary" :customStyle="inputStyle" @click="resetGetTabdleData">搜索</u-button>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item" v-for="item in tableData.list" :key="item.id">
|
||||
<view class="header">
|
||||
<view class="user-info">
|
||||
<u-image :src="item.headImg" width="40px" height="40px"></u-image>
|
||||
<view class="info">
|
||||
<view class="id">
|
||||
<text class="t">ID:{{ item.id }}</text>
|
||||
</view>
|
||||
<view class="name">
|
||||
<text class="t">{{ item.nickName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="status">
|
||||
<u-tag :type="getStatus(item.status).type">{{ getStatus(item.status).label }}</u-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="row">
|
||||
<text class="title">领取时间</text>
|
||||
<text class="b">领取时间</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="title">使用时间</text>
|
||||
<text class="b">-</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="title">获得来源</text>
|
||||
<text class="b">-</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="title">使用门店</text>
|
||||
<text class="b">-</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="title">优惠金额</text>
|
||||
<text class="b">-</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="footer-wrap">
|
||||
<view class="btn">
|
||||
<u-button shape="circle">删除</u-button>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<u-loadmore :status="tableData.listStatus"></u-loadmore>
|
||||
</view>
|
||||
<u-action-sheet
|
||||
title="领取状态"
|
||||
:show="showStatusSheet"
|
||||
:actions="statusSheetList"
|
||||
closeOnClickOverlay
|
||||
@close="showStatusSheet = false"
|
||||
:round="20"
|
||||
safeAreaInsetBottom
|
||||
cancelText="取消"
|
||||
@select="selectStatus"
|
||||
></u-action-sheet>
|
||||
<u-datetime-picker
|
||||
title="开始时间"
|
||||
:round="20"
|
||||
:show="showTime"
|
||||
:minDate="minDate"
|
||||
:maxDate="maxDate"
|
||||
mode="date"
|
||||
closeOnClickOverlay
|
||||
@cancel="showTime = false"
|
||||
@close="showTime = false"
|
||||
@confirm="selectTime"
|
||||
></u-datetime-picker>
|
||||
<u-datetime-picker
|
||||
title="结束时间"
|
||||
:round="20"
|
||||
:show="showTime2"
|
||||
:minDate="dayjs(tableData.startTime || new Date()).valueOf()"
|
||||
:maxDate="maxDate"
|
||||
mode="date"
|
||||
closeOnClickOverlay
|
||||
@cancel="showTime2 = false"
|
||||
@close="showTime2 = false"
|
||||
@confirm="selectTime2"
|
||||
></u-datetime-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { couponGetRecord } from '@/http/api/market/index.js';
|
||||
|
||||
const inputStyle = {
|
||||
height: '35px'
|
||||
};
|
||||
|
||||
const shopInfo = ref({});
|
||||
|
||||
const statusValue = ref('');
|
||||
const showStatusSheet = ref(false);
|
||||
const statusSheetList = ref([
|
||||
{
|
||||
value: '',
|
||||
name: '全部'
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '未使用',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
name: '已使用',
|
||||
type: 'primary'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: '已过期',
|
||||
type: 'error'
|
||||
}
|
||||
]);
|
||||
|
||||
// 获取状态参数
|
||||
function getStatus(val) {
|
||||
let obj = statusSheetList.value.find(val.value == val);
|
||||
if (obj) {
|
||||
return obj;
|
||||
} else {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
|
||||
// 选择状态
|
||||
function selectStatus(e) {
|
||||
console.log(e);
|
||||
if (e.value === '') {
|
||||
statusValue.value = '';
|
||||
} else {
|
||||
statusValue.value = e.name;
|
||||
}
|
||||
tableData.status = e.value;
|
||||
resetGetTabdleData();
|
||||
}
|
||||
|
||||
const showTime = ref(false);
|
||||
const minDate = ref(dayjs().add(-3, 'year').valueOf());
|
||||
const maxDate = ref(dayjs().valueOf());
|
||||
|
||||
// 选择日期范围
|
||||
const timeVlaue = ref('');
|
||||
function selectTime(e) {
|
||||
tableData.startTime = dayjs(e.value).format('YYYY-MM-DD 00:00:00');
|
||||
showTime.value = false;
|
||||
showTime2.value = true;
|
||||
}
|
||||
|
||||
const showTime2 = ref(false);
|
||||
function selectTime2(e) {
|
||||
tableData.endTime = dayjs(e.value).format('YYYY-MM-DD 23:59:59');
|
||||
showTime2.value = false;
|
||||
timeVlaue.value = `${tableData.startTime} - ${tableData.endTime}`;
|
||||
resetGetTabdleData();
|
||||
}
|
||||
|
||||
// 重置获取列表数据
|
||||
function resetGetTabdleData() {
|
||||
tableData.page = 1;
|
||||
tableData.listStatus = 'loading';
|
||||
couponGetRecordAjax();
|
||||
}
|
||||
|
||||
const tableData = reactive({
|
||||
couponId: '',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
status: '',
|
||||
listStatus: 'loading',
|
||||
page: 1,
|
||||
size: 10,
|
||||
list: []
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (tableData.listStatus != 'nomore') {
|
||||
tableData.page++;
|
||||
couponGetRecordAjax();
|
||||
}
|
||||
});
|
||||
|
||||
// 获取已领取优惠券详情列表
|
||||
async function couponGetRecordAjax() {
|
||||
try {
|
||||
const res = await couponGetRecord({
|
||||
startTime: tableData.startTime,
|
||||
endTime: tableData.endTime,
|
||||
shopId: shopInfo.value.id,
|
||||
userId: '',
|
||||
couponId: tableData.couponId,
|
||||
source: '',
|
||||
status: tableData.status,
|
||||
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.listStatus = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((options) => {
|
||||
shopInfo.value = uni.getStorageSync('shopInfo');
|
||||
tableData.couponId = options.couponId;
|
||||
couponGetRecordAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.search-header-wrap {
|
||||
$height: 100px;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
.search-header {
|
||||
width: 100%;
|
||||
height: $height;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
background-color: #fff;
|
||||
padding: 10px 14px;
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
}
|
||||
.ipt {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
padding: 28upx;
|
||||
.item {
|
||||
padding: 28upx;
|
||||
border-radius: 20upx;
|
||||
background-color: #fff;
|
||||
&:not(:first-child) {
|
||||
margin-top: 28upx;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.user-info {
|
||||
display: flex;
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 28upx;
|
||||
.row {
|
||||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
.btn {
|
||||
width: 200upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user