1、首页的轮播图的接口对接

This commit is contained in:
wangzimeng 2025-07-29 16:22:14 +08:00
parent bb30e2332f
commit 39ececc902
5 changed files with 175 additions and 104 deletions

View File

@ -6,7 +6,7 @@
<view class="tabs-box"> <view class="tabs-box">
<su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="currentTab"></su-tabs> <su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="currentTab"></su-tabs>
</view> </view>
<!-- 可兑换券列表 --> <!-- 可兑换券列表 -->
<scroll-view @scrolltolower="onScrolltolower" :refresher-enabled="true" :refresher-triggered="homrS" <scroll-view @scrolltolower="onScrolltolower" :refresher-enabled="true" :refresher-triggered="homrS"
@refresherrefresh="onS" scroll-y="true" class="flex align-items" @refresherrefresh="onS" scroll-y="true" class="flex align-items"
@ -14,55 +14,60 @@
<!-- 满减券 --> <!-- 满减券 -->
<view class="exChangeBox" v-if="currentTab == 0"> <view class="exChangeBox" v-if="currentTab == 0">
<view class="couponsList"> <view class="couponsList">
<view class="list-item"> <view class="list-item" v-for="(item, index) in couponFullList" :key="index">
<view class="itemLeft"> <view class="itemLeft">
<view class="fslh60 c3 bold">50</view> <view class="fslh60 c3 bold">{{item.amount}}</view>
<view class="fslh28 c3 regular" style="margin-top: 15rpx;">满减券</view> <view class="fslh28 c3 regular" style="margin-top: 15rpx;">{{item.type_text}}</view>
</view> </view>
<view class="itemRight"> <view class="itemRight">
<view class="item-RightLeft"> <view class="item-RightLeft">
<view class="fs32 c3D bold" style="line-height: 36rpx;">满100减50</view> <view class="fs32 c3D bold" style="line-height: 36rpx;">{{item.name}}</view>
<view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限原料商城可用</view> <view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限原料商城可用
</view>
</view> </view>
<view class="item-btn">去使用</view> <view class="item-btn" @click="toUseFull(item)">去使用</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 次数券 --> <!-- 次数券 -->
<view class="exChangeBox" v-if="currentTab == 1"> <view class="exChangeBox" v-if="currentTab == 1">
<view class="couponsList"> <view class="couponsList">
<view class="list-item" v-for="(item, index) in couponList" :key="index" <view class="list-item" v-for="(e, i) in couponTimesList" :key="i">
@click="openCouponPro(item)">
<view class="itemLeft"> <view class="itemLeft">
<view class="fslh60 c3 bold">1</view> <view class="fslh60 c3 bold" style="text-align: center;">{{e.mobile_number}}</view>
<view class="fslh28 c3 regular" style="margin-top: 15rpx;">次数券</view> <view class="fslh28 c3 regular" style="margin-top: 15rpx;">次数券</view>
</view> </view>
<view class="itemRight"> <view class="itemRight">
<view class="item-RightLeft"> <view class="item-RightLeft">
<view class="fs32 c3D bold" style="line-height: 36rpx;">增加拨打次数</view> <view class="fs32 c3D bold" style="line-height: 36rpx;">{{e.name}}</view>
<view class="fs24 c9 regular" style="margin-top: 20rpx;line-height: 30rpx;">仅限增加拨打次数使用</view> <view class="fs24 c9 regular" style="margin-top: 30rpx;line-height: 30rpx;">
仅限增加拨打次数使用</view>
</view> </view>
<view class="item-btn">去使用</view> <view class="item-btn" @click="toUseTimes(e)">去使用</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<!-- 无数据展示 --> <!-- 无数据展示 -->
<view class="grid flex-column justify-center align-center" v-if="couponList.length == 0" style="margin: 0 auto;margin-top: 300rpx;"> <view class="grid flex-column justify-center align-center"
<image src="https://jiangxiaoxian.0rui.cn/noneList.png" mode="" style="width: 520rpx;height: 259rpx;"> v-if="(currentTab == 0 && couponFullCount == 0) || (currentTab == 1 && couponTimesCount == 0)"
style="margin: 0 auto;margin-top: 300rpx;">
<image src="https://jiangxiaoxian.0rui.cn/noneList.png" mode=""
style="width: 520rpx;height: 259rpx;">
</image> </image>
<view style="margin-top: 30rpx;font-size: 28rpx;color: #323232;text-align: center;width: 100%;">暂无数据信息</view> <view style="margin-top: 30rpx;font-size: 28rpx;color: #323232;text-align: center;width: 100%;">
暂无数据信息</view>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
</s-layout> </s-layout>
</template> </template>
@ -86,7 +91,7 @@
status: 1, status: 1,
}) })
const tabMaps = [{ const tabMaps = [{
name: '优惠券', name: '满减券',
value: '1', value: '1',
}, },
{ {
@ -102,8 +107,16 @@
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 = [] listQuery.value.page = 1;
getCouponList(); listQuery.value.limit = 10;
listQuery.value.list_rows = 10
couponFullList.value = []
couponTimesCount.value = []
if (currentTab.value == 0) {
getCouponFullList();
} else {
getCouponTimesList();
}
} }
// //
@ -114,21 +127,21 @@
} }
// /* 满减券 */
const couponList = ref([]) const couponFullList = ref([])
const couponCount = ref(0) const couponFullCount = ref(0)
const homrS = ref(false) const homrS = ref(false)
async function getCouponList() { async function getCouponFullList() {
const res = await sheep.$api.app.scoreShop.fullList({ const res = await sheep.$api.coupon.userCoupon({
page: listQuery.value.page, page: listQuery.value.page,
limit: listQuery.value.limit, list_rows: listQuery.value.list_rows,
status: listQuery.value.status, add_type: 'reduce',
order: 'normal' type: 'geted'
}); });
if (res.code === 1) { if (res.code === 1) {
couponList.value = [...couponList.value, ...res.data.list]; couponFullList.value = [...couponFullList.value, ...res.data.data];
couponCount.value = res.data.count; couponFullCount.value = res.data.total;
score.value = res.data.score console.log('满减券',couponFullList.value,couponFullList.value[0]);
} else { } else {
uni.showToast({ uni.showToast({
title: res.msg, title: res.msg,
@ -136,6 +149,36 @@
}) })
} }
} }
/* 次数券 */
const couponTimesList = ref([])
const couponTimesCount = ref(0)
async function getCouponTimesList() {
const res = await sheep.$api.coupon.userTimesList({
page: listQuery.value.page,
limit: listQuery.value.limit,
status: 1,
order: 'normal'
});
if (res.code === 1) {
couponTimesList.value = [...couponTimesList.value, ...res.data.list];
couponTimesCount.value = res.data.count;
// score.value = res.data.score
} else {
uni.showToast({
title: res.msg,
icon: 'none'
})
}
}
/* 使用券 */
function toUseFull(item) {
}
function toUseTimes(e) {
}
// //
function onScrolltolower() { function onScrolltolower() {
if (couponList.value.length < couponCount.value) { if (couponList.value.length < couponCount.value) {
@ -163,9 +206,9 @@
couponList.value = []; couponList.value = [];
getCouponList(); getCouponList();
} }
onLoad(() => { onLoad(() => {
getCouponList(); getCouponFullList();
}); });
</script> </script>
@ -175,32 +218,32 @@
font-size: 60rpx; font-size: 60rpx;
line-height: 60rpx; line-height: 60rpx;
} }
.fslh28 { .fslh28 {
font-size: 28rpx; font-size: 28rpx;
line-height: 28rpx; line-height: 28rpx;
} }
.fs32 { .fs32 {
font-size: 32rpx; font-size: 32rpx;
} }
.justify-center { .justify-center {
justify-content: center; justify-content: center;
} }
.align-center { .align-center {
align-items: center; align-items: center;
} }
.flex { .flex {
display: flex; display: flex;
} }
.grid { .grid {
display: grid; display: grid;
} }
.fs60 { .fs60 {
font-size: 60rpx; font-size: 60rpx;
} }
@ -212,7 +255,7 @@
.bold { .bold {
font-weight: bold; font-weight: bold;
} }
.regular { .regular {
font-weight: 400; font-weight: 400;
} }
@ -220,7 +263,7 @@
.c3 { .c3 {
color: #333333; color: #333333;
} }
.c3D { .c3D {
color: #3d3d3d; color: #3d3d3d;
} }
@ -232,11 +275,10 @@
.container { .container {
background-color: #f7f7f7; background-color: #f7f7f7;
height: 100vh; height: 100vh;
.exChangeBox { .exChangeBox {
// background-color: #f7f7f7; // background-color: #f7f7f7;
width: 690rpx; width: 690rpx;
margin-top: 30rpx;
.couponsList { .couponsList {
width: 100%; width: 100%;
@ -256,7 +298,7 @@
background-size: 100%; background-size: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.itemLeft { .itemLeft {
width: 84rpx; width: 84rpx;
height: 103rpx; height: 103rpx;
@ -265,7 +307,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.itemRight { .itemRight {
width: 446rpx; width: 446rpx;
height: 103rpx; height: 103rpx;
@ -273,7 +315,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.item-RightLeft { .item-RightLeft {
// width: 84rpx; // width: 84rpx;
// height: 103rpx; // height: 103rpx;
@ -282,7 +324,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.item-btn { .item-btn {
width: 160rpx; width: 160rpx;
height: 70rpx; height: 70rpx;
@ -296,9 +338,9 @@
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
} }
} }
.item-text { .item-text {
padding: 30rpx; padding: 30rpx;

View File

@ -50,24 +50,24 @@
<view class="swiper_s"> <view class="swiper_s">
<swiper class="swiper_s" :circular="true" :autoplay="true" indicator-active-color="#0DAE11" <swiper class="swiper_s" :circular="true" :autoplay="true" indicator-active-color="#0DAE11"
indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent" indicator-color="#ffffff" :indicator-dots="false" :current="swiperCurrent"
@animationfinish="swiperChange"> @animationfinish="swiperChange" v-for="(item, index) in bannerList" :key="index">
<!-- v-for="(item, index) in swiperList" :key="index" @click="openSwiper(item)"--> <!-- v-for="(item, index) in swiperList" :key="index" @click="openSwiper(item)"-->
<swiper-item style="margin: 0 auto;"> <swiper-item style="margin: 0 auto;" >
<view style="position: relative;width: 100%;height: 100%;"> <view style="position: relative;width: 100%;height: 100%;">
<!--<view class="fnon_tit"></view> <!--<view class="fnon_tit"></view>
<view class="text">{{ item.title ? item.title : '' }}</view> <view class="text">{{ item.title ? item.title : '' }}</view>
@click="click(item.url)" 跳转活动链接 --> @click="click(item.url)" 跳转活动链接 -->
<image class="swiper-image" src="/static/swiper.png" mode="scaleToFill" /> <image class="swiper-image" :src="item.image" mode="scaleToFill" />
</view> </view>
</swiper-item> </swiper-item>
<swiper-item style="margin: 0 auto;"> <!-- <swiper-item style="margin: 0 auto;">
<view style="position: relative;width: 100%;height: 100%"> <view style="position: relative;width: 100%;height: 100%">
<!--<view class="fnon_tit"></view> <!--<view class="fnon_tit"></view>
<view class="text">{{ item.title ? item.title : '' }}</view> <view class="text">{{ item.title ? item.title : '' }}</view>
@click="click(item.url)" 跳转活动链接 --> @click="click(item.url)" 跳转活动链接
<image class="swiper-image" src="/static/cart-empty.png" mode="scaleToFill" /> <image class="swiper-image" src="/static/cart-empty.png" mode="scaleToFill" />
</view> </view>
</swiper-item> </swiper-item> -->
</swiper> </swiper>
</view> </view>
</view> </view>
@ -227,6 +227,7 @@
onLoad((options) => { onLoad((options) => {
getList(); getList();
getBanner();
// #ifdef MP // #ifdef MP
// //
if (options.scene) { if (options.scene) {
@ -260,6 +261,16 @@
}); });
onPageScroll(() => {}); onPageScroll(() => {});
const bannerList = ref([])
async function getBanner() {
const res = await sheep.$api.home.homeBanner({});
console.log('banner',res);
if(res.code == 1) {
bannerList.value = res.data.list
}
}
const toPage = (e) => { const toPage = (e) => {

View File

@ -1,45 +1,51 @@
import request from '@/sheep/request'; import request from '@/sheep/request';
export default { export default {
// 优惠券 // 优惠券
list: (params) => list: (params) =>
request({ request({
url: 'coupon', url: 'coupon',
method: 'GET', method: 'GET',
params, params,
custom: { custom: {
showLoading: false, showLoading: false,
}, },
}), }),
userCoupon: (params) => userCoupon: (params) =>
request({ request({
url: 'user.coupon', url: 'user.coupon',
method: 'GET', method: 'GET',
params, params,
}), }),
detail: (id, user_coupon_id) => userTimesList: (params) =>
request({ request({
url: 'coupon/detail', url: 'meal.score/mobile_list',
method: 'GET', method: 'GET',
params: { params,
id: id, }),
user_coupon_id, detail: (id, user_coupon_id) =>
}, request({
}), url: 'coupon/detail',
get: (id) => method: 'GET',
request({ params: {
url: 'coupon/get', id: id,
method: 'POST', user_coupon_id,
params: { },
id: id, }),
}, get: (id) =>
}), request({
listByGoods: (id) => url: 'coupon/get',
request({ method: 'POST',
url: 'coupon/listByGoods', params: {
method: 'GET', id: id,
params: { },
goods_id: id, }),
}, listByGoods: (id) =>
}), request({
}; url: 'coupon/listByGoods',
method: 'GET',
params: {
goods_id: id,
},
}),
};

10
sheep/api/home.js Normal file
View File

@ -0,0 +1,10 @@
import request from '@/sheep/request';
export default {
homeBanner: (params) =>
request({
url: 'home/homeImages',
method: 'GET',
params,
})
};

View File

@ -14,6 +14,7 @@ import trade from "./trade"
import user from "./user" import user from "./user"
import rent from "./rent" import rent from "./rent"
import school from "./school" import school from "./school"
import home from "./home"
export default { export default {
activity, activity,
@ -32,5 +33,6 @@ export default {
user, user,
rent, rent,
school, school,
home,
} }