完成优惠券页面
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>
|
||||
@@ -2,8 +2,15 @@
|
||||
<view class="container">
|
||||
<view class="header-wrap">
|
||||
<view class="fixed-header-wrap">
|
||||
<scroll-view scroll-x direction="horizontal" class="tabs-wrap">
|
||||
<view class="item" :class="{ active: couponType == item.value }" v-for="item in emunList.couponTypes" :key="item.value" @click="changeType(item.value)">
|
||||
<scroll-view scroll-x direction="horizontal" class="tabs-wrap" :scroll-left="scrollLeft" scroll-with-animation>
|
||||
<view
|
||||
class="item"
|
||||
:class="{ active: couponType == item.value }"
|
||||
v-for="(item, index) in emunList.couponTypes"
|
||||
:key="index"
|
||||
:data-index="index"
|
||||
@click="changeType(item.value, index)"
|
||||
>
|
||||
<div class="item-flex">
|
||||
<text class="t">{{ item.label }}</text>
|
||||
</div>
|
||||
@@ -95,18 +102,69 @@
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import { couponPage, couponDel } from '@/http/api/market/index.js';
|
||||
import { couponPage, couponDel, getConsumerCouponPage, deleteConsumerCoupon } from '@/http/api/market/index.js';
|
||||
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { getEmunListLabel, emunList } from '../utils/couponUtils.js';
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
const couponType = ref(1); // 当前选中的优惠券类型
|
||||
const scrollLeft = ref(0); // scroll-view的滚动距离
|
||||
|
||||
// 切换类型
|
||||
function changeType(type) {
|
||||
function changeType(type, index) {
|
||||
couponType.value = type;
|
||||
resetGetData();
|
||||
calculateCenterScroll(index);
|
||||
}
|
||||
|
||||
// item居中
|
||||
const calculateCenterScroll = (activeIndex) => {
|
||||
// 1. 查询ScrollView的可视宽度（全局查询，无需ref）
|
||||
uni.createSelectorQuery()
|
||||
.select('.tabs-wrap')
|
||||
.boundingClientRect((scrollViewRect) => {
|
||||
if (!scrollViewRect) return;
|
||||
const viewWidth = scrollViewRect.width; // ScrollView可视宽度（px）
|
||||
const viewHalfWidth = viewWidth / 2; // ScrollView中心位置（px）
|
||||
|
||||
// 2. 查询所有Tab项的DOM信息（计算选中项左侧总宽度）
|
||||
uni.createSelectorQuery()
|
||||
.selectAll('.item')
|
||||
.boundingClientRect((tabItemsRect) => {
|
||||
if (!tabItemsRect || tabItemsRect.length === 0) return;
|
||||
|
||||
// 3. 计算选中项左侧所有Tab的宽度总和
|
||||
let leftTotalWidth = 0;
|
||||
for (let i = 0; i < activeIndex; i++) {
|
||||
leftTotalWidth += tabItemsRect[i].width; // 累加左侧Tab宽度（px）
|
||||
leftTotalWidth += 28 * (uni.getSystemInfoSync().windowWidth / 750); // 累加左侧Tab的margin-left（28rpx转px）
|
||||
}
|
||||
|
||||
// 4. 获取选中项自身的宽度和位置
|
||||
const activeItemRect = tabItemsRect[activeIndex];
|
||||
const itemHalfWidth = activeItemRect.width / 2; // 选中项中心位置（px）
|
||||
|
||||
// 5. 计算最终滚动距离（核心公式）
|
||||
let targetScrollLeft = leftTotalWidth + itemHalfWidth - viewHalfWidth;
|
||||
|
||||
// 6. 边界处理：不小于0，不超过最大滚动距离
|
||||
uni.createSelectorQuery()
|
||||
.select('.tabs-wrap')
|
||||
.scrollOffset((scrollOffset) => {
|
||||
const maxScrollLeft = scrollOffset.scrollWidth - viewWidth; // 最大滚动距离
|
||||
targetScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft));
|
||||
scrollLeft.value = targetScrollLeft; // 赋值滚动距离
|
||||
console.log('最终滚动距离：', targetScrollLeft);
|
||||
})
|
||||
.exec();
|
||||
})
|
||||
.exec();
|
||||
})
|
||||
.exec();
|
||||
};
|
||||
|
||||
// 搜索
|
||||
function searchHandle() {
|
||||
resetGetData();
|
||||
@@ -133,26 +191,32 @@ function deleteHandle(item) {
|
||||
console.log('del', item);
|
||||
uni.showModal({
|
||||
title: '注意',
|
||||
content: `确定要删除${item.title}优惠券吗?`,
|
||||
content: `确定要删除${item.title || '该'}优惠券吗?`,
|
||||
success: async (res) => {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
await couponDel(item.id);
|
||||
uni.showToast({
|
||||
title: '已删除',
|
||||
icon: 'none'
|
||||
});
|
||||
let index = tableData.list.findIndex((val) => val.id == item.id);
|
||||
tableData.list.splice(index, 1);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
if (res.confirm) {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '删除中...',
|
||||
mask: true
|
||||
});
|
||||
if (couponType.value == 5) {
|
||||
await deleteConsumerCoupon(item.id);
|
||||
} else {
|
||||
await couponDel(item.id);
|
||||
}
|
||||
uni.showToast({
|
||||
title: '已删除',
|
||||
icon: 'none'
|
||||
});
|
||||
let index = tableData.list.findIndex((val) => val.id == item.id);
|
||||
tableData.list.splice(index, 1);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 500);
|
||||
}
|
||||
setTimeout(() => {
|
||||
uni.hideLoading();
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -160,14 +224,20 @@ function deleteHandle(item) {
|
||||
// 编辑
|
||||
function editorHandle(item) {
|
||||
console.log('editor', item);
|
||||
go.to('PAGES_ADD_COUPON', {
|
||||
couponType: item.couponType,
|
||||
id: item.id
|
||||
});
|
||||
if (couponType.value == 5) {
|
||||
go.to('PAGES_ADD_CONSUME_COUPON', {
|
||||
couponType: item.couponType,
|
||||
id: item.id
|
||||
});
|
||||
} else {
|
||||
go.to('PAGES_ADD_COUPON', {
|
||||
couponType: item.couponType,
|
||||
id: item.id
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 获取优惠券
|
||||
const couponType = ref(1);
|
||||
const tableData = reactive({
|
||||
query: '',
|
||||
status: 'loading',
|
||||
@@ -178,12 +248,22 @@ const tableData = reactive({
|
||||
async function couponPageAjax() {
|
||||
try {
|
||||
tableData.status = 'loading';
|
||||
const res = await couponPage({
|
||||
let res = null;
|
||||
let params = {
|
||||
couponType: couponType.value,
|
||||
title: tableData.query,
|
||||
page: tableData.page,
|
||||
size: tableData.size
|
||||
});
|
||||
};
|
||||
|
||||
if (couponType.value == 5) {
|
||||
res = await getConsumerCouponPage(params);
|
||||
res.records.map((item) => {
|
||||
item.couponType = 5;
|
||||
});
|
||||
} else {
|
||||
res = await couponPage(params);
|
||||
}
|
||||
|
||||
if (tableData.page == 1) {
|
||||
tableData.list = res.records;
|
||||
@@ -210,7 +290,13 @@ onShow(() => {
|
||||
});
|
||||
|
||||
onLoad((options) => {
|
||||
couponType.value = options.coupon_type;
|
||||
couponType.value = options.couponType;
|
||||
const index = emunList.couponTypes.findIndex((item) => item.value == couponType.value);
|
||||
setTimeout(() => {
|
||||
if (index !== -1) {
|
||||
calculateCenterScroll(index);
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user