增加新版优惠券列表
This commit is contained in:
@@ -6,7 +6,7 @@
|
||||
<view class="icon left">
|
||||
<u-icon name="search" size="26"></u-icon>
|
||||
</view>
|
||||
<input v-model="querForm.searchValue" class="ipt left" type="text" placeholder="搜索" />
|
||||
<input v-model="querForm.searchValue" class="ipt left" type="text" placeholder="搜索" @confirm="searchHandle" />
|
||||
</view>
|
||||
<view class="input-wrap" @click="show = true">
|
||||
<view class="icon right">
|
||||
@@ -16,13 +16,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<view class="status-wrap">
|
||||
<view
|
||||
class="item"
|
||||
:class="{ active: querForm.statusActiveIndex == index }"
|
||||
v-for="(item, index) in statusList"
|
||||
:key="item.value"
|
||||
@click="querForm.statusActiveIndex = index"
|
||||
>
|
||||
<view class="item" :class="{ active: querForm.statusActiveIndex == index }" v-for="(item, index) in statusList" :key="item.value" @click="tabChange(index)">
|
||||
<text class="t">{{ item.label }}</text>
|
||||
</view>
|
||||
<view class="icon-wrap" :style="{ width: `${100 / statusList.length}%`, left: `${(100 / statusList.length) * querForm.statusActiveIndex}%` }">
|
||||
@@ -39,10 +33,10 @@
|
||||
<view class="icon"></view>
|
||||
<view class="info">
|
||||
<view class="view name">
|
||||
<text class="t">{{ item.title }}</text>
|
||||
<text class="t">{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="view time">
|
||||
<text class="t">有效期至：{{ item.startTime }}-{{ item.endTime }}</text>
|
||||
<text class="t">{{ dayjs(item.effectStartTime).format('YYYY.MM.DD') }} - {{ dayjs(item.effectEndTime).format('YYYY.MM.DD') }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
@@ -51,9 +45,9 @@
|
||||
</view>
|
||||
<view class="btm">
|
||||
<view class="left">
|
||||
<text class="t">{{ item.remark }}</text>
|
||||
<text class="t">1、可适用门店：{{ item.useShops }} 2、可适用商品：{{ item.foods }}3、可使用类型：{{ convertValuesToLabels(item.useType) }}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="right" @click="showDetailHandle(item)">
|
||||
<text class="t">查看详情</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -82,10 +76,35 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="showDetail" round="20" closeable @close="showDetail = false">
|
||||
<view class="shoplist-popup">
|
||||
<view class="title">
|
||||
<text class="t">详情说明</text>
|
||||
</view>
|
||||
<scroll-view class="popup-list" direction="vertical">
|
||||
<view class="ul">
|
||||
<view class="li">1、可适用门店：{{ selectListItem.useShops }}</view>
|
||||
<view class="li">2、可适用商品：{{ selectListItem.foods }}</view>
|
||||
<view class="li" v-if="selectListItem.useType">3、可使用类型：{{ convertValuesToLabels(selectListItem.useType) }}</view>
|
||||
<view class="li">
|
||||
4、可用时间段：
|
||||
<text class="t" v-if="selectListItem.useTimeType == 'all'">全段时间可用</text>
|
||||
<text class="t" v-else>
|
||||
{{ selectListItem.useStartTime - selectListItem.useEndTime }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="li">5、限量规则：{{ selectListItem.getLimit == -10086 ? '无限' : `${selectListItem.getLimit}张` }}</view>
|
||||
<view class="li">6、同享规则：{{ selectListItem.vipPriceShare ? '与限时折扣同享、与会员价同享' : '不与限时折扣同享、与会员价同享' }}</view>
|
||||
<view class="li">7、其它说明：{{ selectListItem.ruleDetails || '无' }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from 'dayjs';
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { onLoad, onReady, onShow, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { APIcouponfindByUserId, APIfindCoupon } from '@/common/api/member.js';
|
||||
@@ -101,19 +120,19 @@ const querForm = ref({
|
||||
// 状态
|
||||
const statusList = ref([
|
||||
{
|
||||
value: 1,
|
||||
value: 0,
|
||||
label: '未使用',
|
||||
bg: '#333333',
|
||||
color: '#ffffff'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
value: 1,
|
||||
label: '已使用',
|
||||
bg: '#F8F8F8',
|
||||
color: '#999999'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
value: 2,
|
||||
label: '已失效',
|
||||
bg: '#F8F8F8',
|
||||
color: '#999999'
|
||||
@@ -124,18 +143,123 @@ const list = reactive({
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'nomore',
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
type: 2,
|
||||
fullAmount: 200,
|
||||
discountAmount: 15,
|
||||
title: '超值满减券',
|
||||
startTime: '2002.1.22',
|
||||
endTime: '2022.1.22',
|
||||
remark: '1、可适用门店：全部门店2、可适用商品：部分商品3、可使用类型：堂食4、可用时间段：全时段可用5、限量规则：每人限领3张，每日可最多使用3张6、同享规则：与限时折扣同享、与会员价同享7、其它说明：这里是后台配置内容'
|
||||
data: []
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
console.log('到底了');
|
||||
list.page++;
|
||||
getCouponList();
|
||||
});
|
||||
|
||||
const showDetail = ref(false);
|
||||
const selectListItem = ref('');
|
||||
function showDetailHandle(item) {
|
||||
showDetail.value = true;
|
||||
selectListItem.value = item;
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function searchHandle() {
|
||||
list.page = 1;
|
||||
getCouponList();
|
||||
}
|
||||
|
||||
// 切换类型
|
||||
function tabChange(index) {
|
||||
querForm.value.statusActiveIndex = index;
|
||||
list.page = 1;
|
||||
getCouponList();
|
||||
}
|
||||
|
||||
// 获取优惠券列表
|
||||
async function getCouponList() {
|
||||
try {
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
const res = await APIcouponfindByUserId({
|
||||
userId: uni.cache.get('userInfo').id,
|
||||
name: querForm.value.searchValue,
|
||||
status: statusList.value[querForm.value.statusActiveIndex].value,
|
||||
shopId: querForm.value.shopId ? querForm.value.shopId : uni.cache.get('shopId'),
|
||||
page: list.page,
|
||||
size: list.size
|
||||
});
|
||||
if (list.page == 1) {
|
||||
list.data = res.records;
|
||||
} else {
|
||||
list.data.push(...res.records);
|
||||
}
|
||||
]
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
uni.hideLoading();
|
||||
}
|
||||
|
||||
/**
|
||||
* 将value数组字符串转换为对应的label拼接字符串
|
||||
* @param {Array} options - 包含value和label的选项数组，格式如[{value: 'xxx', label: 'xxx'}, ...]
|
||||
* @param {string} valueStr - 包含value的数组字符串，格式如'["dine","pickup"]'
|
||||
* @param {string} separator - 标签拼接分隔符，默认值为'、'
|
||||
* @returns {string} 拼接后的label字符串，如"堂食、自取"
|
||||
*/
|
||||
function convertValuesToLabels(valueStr, options, separator = '、') {
|
||||
try {
|
||||
options = [
|
||||
{
|
||||
value: 'dine',
|
||||
label: '堂食'
|
||||
},
|
||||
{
|
||||
value: 'pickup',
|
||||
label: '自取'
|
||||
},
|
||||
{
|
||||
value: 'deliv',
|
||||
label: '配送'
|
||||
},
|
||||
{
|
||||
value: 'express',
|
||||
label: '快递'
|
||||
}
|
||||
];
|
||||
// 验证输入参数
|
||||
if (!Array.isArray(options)) {
|
||||
throw new Error('options必须是数组');
|
||||
}
|
||||
if (typeof valueStr !== 'string') {
|
||||
throw new Error('valueStr必须是字符串');
|
||||
}
|
||||
|
||||
// 解析value数组字符串
|
||||
const values = JSON.parse(valueStr);
|
||||
if (!Array.isArray(values)) {
|
||||
throw new Error('解析后的valueStr必须是数组');
|
||||
}
|
||||
|
||||
// 构建value到label的映射表
|
||||
const valueLabelMap = new Map();
|
||||
options.forEach((item) => {
|
||||
if (item && typeof item.value !== 'undefined' && typeof item.label !== 'undefined') {
|
||||
valueLabelMap.set(item.value, item.label);
|
||||
}
|
||||
});
|
||||
|
||||
// 匹配并收集label
|
||||
const labels = values.map((value) => valueLabelMap.get(value)).filter(Boolean); // 过滤未匹配到的项
|
||||
|
||||
// 拼接结果
|
||||
return labels.join(separator);
|
||||
} catch (error) {
|
||||
console.error('转换失败:', error.message);
|
||||
return ''; // 出错时返回空字符串
|
||||
}
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
getCouponList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -235,6 +359,9 @@ page {
|
||||
border-radius: 18upx;
|
||||
background-color: #fff;
|
||||
padding: 28upx;
|
||||
&:not(:first-child) {
|
||||
margin-top: 28upx;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -322,7 +449,7 @@ page {
|
||||
}
|
||||
}
|
||||
.popup-list {
|
||||
height: 50vh;
|
||||
max-height: 50vh;
|
||||
.item {
|
||||
height: 100upx;
|
||||
border-radius: 12upx;
|
||||
@@ -336,6 +463,17 @@ page {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
.ul {
|
||||
.li {
|
||||
color: #999;
|
||||
font-size: 28upx;
|
||||
padding: 8upx 0;
|
||||
.t {
|
||||
color: #999;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user