1、积分商城的优惠券的下拉刷新和加载更多

2、招租列表的加载更多的列表数据获取
3、我的优惠券的静态页面
This commit is contained in:
wangzimeng 2025-07-29 14:58:03 +08:00
parent c621ff0ff4
commit bb30e2332f
4 changed files with 387 additions and 258 deletions

View File

@ -20,43 +20,49 @@
</view> </view>
<!-- 可兑换券列表 --> <!-- 可兑换券列表 -->
<view class="exChangeBox" v-if="currentTab == 0"> <scroll-view @scrolltolower="onScrolltolower" :refresher-enabled="true" :refresher-triggered="homrS"
<view class="couponsList"> @refresherrefresh="onS" scroll-y="true" class="flex align-items"
<view class="list-item" v-for="(item, index) in couponList" :key="index" @click="openCouponPro(item)"> style="height: 1250rpx;box-sizing: border-box;">
<image style="width: 330rpx;height: 200rpx;" src="https://jiangxiaoxian.0rui.cn/fullCoupon.png"> <!-- 满减券 -->
</image> <view class="exChangeBox" v-if="currentTab == 0">
<view class="item-text"> <view class="couponsList">
<view class="fs30 c3" style="margin: 0 auto;text-align: center;">{{item.name}}</view> <view class="list-item" v-for="(item, index) in couponList" :key="index" @click="openCouponPro(item)">
<view class="exchangeBtn"> <image style="width: 330rpx;height: 200rpx;" src="https://jiangxiaoxian.0rui.cn/fullCoupon.png">
{{item.score}}积分兑换 </image>
<view class="item-text">
<view class="fs30 c3" style="margin: 0 auto;text-align: center;">{{item.name}}</view>
<view class="exchangeBtn">
{{item.score}}积分兑换
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 次数券 -->
</view> <view class="exChangeBox" v-if="currentTab == 1">
<!-- 次数券 --> <view class="couponsList">
<view class="exChangeBox" v-if="currentTab == 1"> <view class="list-item" v-for="(item, index) in couponList" :key="index" @click="openCouponPro(item)">
<view class="couponsList"> <image style="width: 330rpx;height: 200rpx;"
<view class="list-item" v-for="(item, index) in couponList" :key="index" @click="openCouponPro(item)"> src="https://jiangxiaoxian.0rui.cn/scoreNumCoupon.png"></image>
<image style="width: 330rpx;height: 200rpx;" <view class="item-text">
src="https://jiangxiaoxian.0rui.cn/scoreNumCoupon.png"></image> <view class="fs30 c3" style="margin: 0 auto;text-align: center;">{{ item.name }}</view>
<view class="item-text"> <view class="exchangeBtn">
<view class="fs30 c3" style="margin: 0 auto;text-align: center;">{{ item.name }}</view> {{item.score}}积分兑换
<view class="exchangeBtn"> </view>
{{item.score}}积分兑换
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view>
</scroll-view>
<!-- 无数据展示 --> <!-- 无数据展示 -->
<view class="flex flex-column flex-start align-items" <view class="flex flex-column flex-start align-items"
v-if="couponList.length == 0" style="margin-top: 300rpx;"> v-if="couponCount == 0" style="margin-top: 300rpx;">
<image src="https://jiangxiaoxian.0rui.cn/noneList.png" mode="" style="width: 180rpx;height: 180rpx;"> <image src="https://jiangxiaoxian.0rui.cn/noneList.png" mode="" style="width: 180rpx;height: 180rpx;">
</image> </image>
<view style="margin-top: 30rpx;font-size: 28rpx;color: #323232;">暂无数据信息</view> <view style="margin-top: 30rpx;font-size: 28rpx;color: #323232;">暂无数据信息</view>
@ -118,6 +124,12 @@
currentTab.value = e.index currentTab.value = e.index
console.log('切换tabs', currentTab.value); console.log('切换tabs', currentTab.value);
listQuery.value.status = e.value listQuery.value.status = e.value
couponList.value = []
if(currentTab.value == 0) {
}else {
}
getCouponList(); getCouponList();
} }
@ -132,6 +144,7 @@
// //
const couponList = ref([]) const couponList = ref([])
const couponCount = ref(0) const couponCount = ref(0)
const homrS = ref(false)
async function getCouponList() { async function getCouponList() {
const res = await sheep.$api.app.scoreShop.fullList({ const res = await sheep.$api.app.scoreShop.fullList({
page: listQuery.value.page, page: listQuery.value.page,
@ -140,7 +153,7 @@
order: 'normal' order: 'normal'
}); });
if (res.code === 1) { if (res.code === 1) {
couponList.value = res.data.list; couponList.value = [...couponList.value,...res.data.list];
couponCount.value = res.data.count; couponCount.value = res.data.count;
score.value = res.data.score score.value = res.data.score
} else { } else {
@ -150,6 +163,33 @@
}) })
} }
} }
//
function onScrolltolower() {
if (couponList.value.length < couponCount.value) {
listQuery.value.page += 1;
getCouponList();
}
}
//
function onS() {
homrS.value = true
listQuery.value.keywords = ''
uni.showLoading({
title: '加载中...'
});
resetLists();
setTimeout(() => {
homrS.value = false;
uni.hideLoading();
uni.stopPullDownRefresh();
}, 2000)
}
//
function resetLists() {
listQuery.value.page = 1;
couponList.value = [];
getCouponList();
}
const showCouponPro = ref(false) const showCouponPro = ref(false)
const couponName = ref('') const couponName = ref('')

View File

@ -242,7 +242,8 @@
console.log('getList', res); console.log('getList', res);
if (res.data && res.data.list) { if (res.data && res.data.list) {
rentList.value = res.data.list; // rentList.value = res.data.list;
rentList.value =[...rentList.value,...res.data.list];
rentCount.value = res.data.count; rentCount.value = res.data.count;
// Safely process each item // Safely process each item
rentList.value = rentList.value.map(item => { rentList.value = rentList.value.map(item => {
@ -284,7 +285,7 @@
title: '加载中...' title: '加载中...'
}); });
resetLists(); resetLists();
getList()
setTimeout(() => { setTimeout(() => {
homrS.value = false; homrS.value = false;
uni.hideLoading(); uni.hideLoading();
@ -295,7 +296,7 @@
function resetLists() { function resetLists() {
listQuery.value.page = 1; listQuery.value.page = 1;
rentList.value = []; rentList.value = [];
// loadStatus.value = "loading"; getList();
} }
function toDetail(e){ function toDetail(e){

View File

@ -1,239 +1,327 @@
<!-- 优惠券中心 --> <!-- 优惠券中心 -->
<template> <template>
<s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }"> <s-layout title="优惠券" :bgStyle="{ color: '#f2f2f2' }">
<su-sticky bgColor="#fff"> <view class="container">
<su-tabs <!-- tabs页签 -->
:list="tabMaps" <view class="tabs-box">
:scrollable="false" <su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="currentTab"></su-tabs>
@change="onTabsChange" </view>
:current="state.currentTab"
></su-tabs> <!-- 可兑换券列表 -->
</su-sticky> <scroll-view @scrolltolower="onScrolltolower" :refresher-enabled="true" :refresher-triggered="homrS"
<s-empty @refresherrefresh="onS" scroll-y="true" class="flex align-items"
v-if="state.pagination.total === 0" style="height: 700rpx auto;box-sizing: border-box;margin-top: 30rpx;">
icon="/static/coupon-empty.png" <!-- 满减券 -->
text="暂无优惠券" <view class="exChangeBox" v-if="currentTab == 0">
></s-empty> <view class="couponsList">
<template v-if="state.currentTab == '0'"> <view class="list-item">
<view v-for="item in state.pagination.data" :key="item.id"> <view class="itemLeft">
<s-coupon-list <view class="fslh60 c3 bold">50</view>
:data="item" <view class="fslh28 c3 regular" style="margin-top: 15rpx;">满减券</view>
@tap=" </view>
sheep.$router.go('/pages/coupon/detail', { <view class="itemRight">
id: item.id, <view class="item-RightLeft">
}) <view class="fs32 c3D bold" style="line-height: 36rpx;">满100减50</view>
" <view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限原料商城可用</view>
> </view>
<template #default> <view class="item-btn">去使用</view>
<button </view>
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" </view>
:class="item.get_status != 'can_get' ? 'border-btn' : ''" </view>
@click.stop="getBuy(item.id)"
:disabled="item.get_status != 'can_get'" </view>
> <!-- 次数券 -->
{{ item.get_status_text }} <view class="exChangeBox" v-if="currentTab == 1">
</button> <view class="couponsList">
</template> <view class="list-item" v-for="(item, index) in couponList" :key="index"
</s-coupon-list> @click="openCouponPro(item)">
</view> <view class="itemLeft">
</template> <view class="fslh60 c3 bold">1</view>
<template v-else> <view class="fslh28 c3 regular" style="margin-top: 15rpx;">次数券</view>
<view v-for="item in state.pagination.data" :key="item.id"> </view>
<s-coupon-list <view class="itemRight">
:data="item" <view class="item-RightLeft">
type="user" <view class="fs32 c3D bold" style="line-height: 36rpx;">增加拨打次数</view>
@tap=" <view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限增加拨打次数使用</view>
sheep.$router.go('/pages/coupon/detail', { </view>
id: item.coupon_id, <view class="item-btn">去使用</view>
user_coupon_id: item.id, </view>
})
" </view>
> </view>
<template #default> </view>
<button
class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center" <!-- 无数据展示 -->
:class=" <view class="grid flex-column justify-center align-center" v-if="couponList.length == 0" style="margin: 0 auto;margin-top: 300rpx;">
item.status == 'can_get' || item.status == 'can_use' <image src="https://jiangxiaoxian.0rui.cn/noneList.png" mode="" style="width: 520rpx;height: 259rpx;">
? '' </image>
: item.status == 'used' || item.status == 'expired' <view style="margin-top: 30rpx;font-size: 28rpx;color: #323232;text-align: center;width: 100%;">暂无数据信息</view>
? 'disabled-btn' </view>
: 'border-btn'
" </scroll-view>
:disabled="item.status != 'can_get' && item.status != 'can_use'"
@click.stop="
sheep.$router.go('/pages/coupon/detail', { </view>
id: item.coupon_id,
user_coupon_id: item.id, </s-layout>
})
"
>
{{ item.status_text }}
</button>
</template>
</s-coupon-list>
</view>
</template>
<uni-load-more
v-if="state.pagination.total > 0"
:status="state.loadStatus"
:content-text="{
contentdown: '上拉加载更多',
}"
@tap="loadmore"
/>
</s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import {
import { computed, reactive } from 'vue'; onLoad,
import _ from 'lodash'; onShow,
onReachBottom
} from '@dcloudio/uni-app';
import {
ref,
reactive
} from 'vue';
import _ from 'lodash';
// const listQuery = ref({
const pagination = { page: 1,
data: [], limit: 10,
current_page: 1, list_rows: 10,
total: 1, status: 1,
last_page: 1, })
}; const tabMaps = [{
name: '优惠券',
value: '1',
},
{
name: '次数券',
value: '2',
},
];
const currentTab = ref(0)
const score = ref(0)
//tabs
function onChange(e) {
console.log('onChange', e);
currentTab.value = e.index
console.log('切换tabs', currentTab.value);
listQuery.value.status = e.value
couponList.value = []
getCouponList();
}
const state = reactive({ //
currentTab: 0, const toPage = (e) => {
pagination: { uni.navigateTo({
data: [], url: e
current_page: 1, })
total: 1,
last_page: 1,
},
loadStatus: '',
type: '',
});
const tabMaps = [ }
{
name: '领券中心',
value: 'all',
},
{
name: '已领取',
value: 'geted',
},
{
name: '已使用',
value: 'used',
},
{
name: '已失效',
value: 'expired',
},
];
function onTabsChange(e) {
state.pagination = pagination;
state.currentTab = e.index;
state.type = e.value;
if (state.currentTab == 0) {
getData();
} else {
getCoupon();
}
}
async function getData(page = 1, list_rows = 5) {
state.loadStatus = 'loading';
const res = await sheep.$api.coupon.list({ list_rows, page });
if (res.code === 1) {
let couponlist = _.concat(state.pagination.data, res.data.data);
state.pagination = {
...res.data,
data: couponlist,
};
if (state.pagination.current_page < state.pagination.last_page) {
state.loadStatus = 'more';
} else {
state.loadStatus = 'noMore';
}
}
}
async function getCoupon(page = 1, list_rows = 5) { //
state.loadStatus = 'loading'; const couponList = ref([])
let res = await sheep.$api.coupon.userCoupon({ const couponCount = ref(0)
type: state.type, const homrS = ref(false)
list_rows, async function getCouponList() {
page, const res = await sheep.$api.app.scoreShop.fullList({
}); page: listQuery.value.page,
if (res.code === 1) { limit: listQuery.value.limit,
let couponlist = _.concat(state.pagination.data, res.data.data); status: listQuery.value.status,
state.pagination = { order: 'normal'
...res.data, });
data: couponlist, if (res.code === 1) {
}; couponList.value = [...couponList.value, ...res.data.list];
if (state.pagination.current_page < state.pagination.last_page) { couponCount.value = res.data.count;
state.loadStatus = 'more'; score.value = res.data.score
} else { } else {
state.loadStatus = 'noMore'; uni.showToast({
} title: res.msg,
} icon: 'none'
} })
async function getBuy(id) { }
const { code, msg } = await sheep.$api.coupon.get(id); }
if (code === 1) { //
uni.showToast({ function onScrolltolower() {
title: msg, if (couponList.value.length < couponCount.value) {
}); listQuery.value.page += 1;
setTimeout(() => { getCouponList();
state.pagination = pagination; }
getData(); }
}, 1000); //
} function onS() {
} homrS.value = true
listQuery.value.keywords = ''
// uni.showLoading({
function loadmore() { title: '加载中...'
if (state.loadStatus !== 'noMore') { });
if (state.currentTab == 0) { resetLists();
getData(state.pagination.current_page + 1); setTimeout(() => {
} else { homrS.value = false;
getCoupon(state.pagination.current_page + 1); uni.hideLoading();
} uni.stopPullDownRefresh();
} }, 2000)
} }
onLoad((Option) => { //
if (Option.type === 'all' || !Option.type) { function resetLists() {
getData(); listQuery.value.page = 1;
} else { couponList.value = [];
state.type = Option.type; getCouponList();
Option.type === 'geted' }
? (state.currentTab = 1)
: Option.type === 'used' onLoad(() => {
? (state.currentTab = 2) getCouponList();
: (state.currentTab = 3); });
getCoupon();
}
});
onReachBottom(() => {
loadmore();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.card-btn { .fslh60 {
// width: 144rpx; font-size: 60rpx;
padding: 0 16rpx; line-height: 60rpx;
height: 50rpx; }
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); .fslh28 {
color: #ffffff; font-size: 28rpx;
font-size: 24rpx; line-height: 28rpx;
font-weight: 400; }
}
.border-btn { .fs32 {
background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light)); font-size: 32rpx;
color: #fff !important; }
}
.disabled-btn { .justify-center {
background: #cccccc; justify-content: center;
background-color: #cccccc !important; }
color: #fff !important;
} .align-center {
</style> align-items: center;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.fs60 {
font-size: 60rpx;
}
.fs24 {
font-size: 24rpx;
}
.bold {
font-weight: bold;
}
.regular {
font-weight: 400;
}
.c3 {
color: #333333;
}
.c3D {
color: #3d3d3d;
}
.c9 {
color: #999999;
}
.container {
background-color: #f7f7f7;
height: 100vh;
.exChangeBox {
// background-color: #f7f7f7;
width: 690rpx;
margin-top: 30rpx;
.couponsList {
width: 100%;
padding: 0 30rpx;
display: grid;
grid-template-columns: repeat(2, 1fr);
;
grid-gap: 20px;
// display: flex;
// justify-content: center;
// align-items: center;
.list-item {
width: 690rpx;
background-image: url('https://jiangxiaoxian.0rui.cn/couponItemBack.png');
background-size: 100%;
display: flex;
justify-content: space-between;
.itemLeft {
width: 84rpx;
height: 103rpx;
padding: 40rpx 50rpx;
display: block;
justify-content: center;
align-items: center;
}
.itemRight {
width: 446rpx;
height: 103rpx;
padding: 40rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
.item-RightLeft {
// width: 84rpx;
// height: 103rpx;
// padding: 40rpx 50rpx;
display: block;
justify-content: flex-start;
align-items: center;
}
.item-btn {
width: 160rpx;
height: 70rpx;
background: linear-gradient(to right, #FCCA58, #FFBD25);
border-radius: 106rpx;
align-items: center;
justify-content: center;
display: flex;
font-size: 28rpx;
line-height: 36rpx;
font-weight: bold;
color: #333333;
}
}
.item-text {
padding: 30rpx;
.exchangeBtn {
background-color: #fcc74e;
height: 70rpx;
width: 270rpx;
margin-top: 30rpx;
border-radius: 223rpx;
align-items: center;
justify-content: center;
display: flex;
font-size: 28rpx;
line-height: 30rpx;
font-weight: 400;
}
}
}
}
}
}
</style>

View File

@ -37,7 +37,7 @@
<view class="title" style="">平台学院</view> <view class="title" style="">平台学院</view>
<view class="intro" style="color: #05b0b0;margin-top: 20rpx;">学知赋能成长</view> <view class="intro" style="color: #05b0b0;margin-top: 20rpx;">学知赋能成长</view>
</view> </view>
<view class="navRight2"> <view class="navRight2" @click="toPage('/pages/index/category')">
<view class="title" style="">原料商城</view> <view class="title" style="">原料商城</view>
<view class="intro" style="color: #f58f3d;margin-top: 20rpx;">优材好料直供</view> <view class="intro" style="color: #f58f3d;margin-top: 20rpx;">优材好料直供</view>
</view> </view>