Skip to content

G
groupPurchase-miniapp
Commit 64e50e43 authored by 陈宗胤（贵阳日报）'s avatar 陈宗胤（贵阳日报）
Browse files
Options

接口接入

parent 899f29d4
Show whitespace changes
Inline Side-by-side
Showing with 330 additions and 39 deletions
src/Components/index/Classification.vue
View file @ 64e50e43
......@@ -38,7 +38,7 @@ const selectItem = (index, categoryId) => {
position: absolute;
top: 100%;
// width: 100%;
// height: 212rpx;
max-height: 780rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
......@@ -47,6 +47,7 @@ const selectItem = (index, categoryId) => {
display: flex;
padding-bottom: 20rpx;
box-sizing: border-box;
overflow-y: scroll;
.ul {
padding-left: 60rpx;
li {
......
src/Components/index/Position.vue
View file @ 64e50e43
......@@ -123,7 +123,7 @@ const selectItem2 = (index, area) => {
position: absolute;
top: 100%;
// width: 710rpx;
min-height: 780rpx;
height: 780rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
......@@ -188,6 +188,8 @@ const selectItem2 = (index, area) => {
}
.ul {
padding-left: 60rpx;
overflow-y: scroll;
height: 65%;
li {
list-style-type: none;
font-size: 22rpx;
......
src/api/index.js
View file @ 64e50e43
......@@ -94,3 +94,29 @@ export function receiveCoupon(data) {
data,
});
}
// 领券中心-分类列表
export function getCoupon() {
return request({
url: `/sgyrdd/dict/key/coupon_classify`,
method: 'GET',
});
}
// 领券中心-店铺商品列表分页
export function getShopAndProdPage(data) {
return request({
url: `/sgyrdd/couponShop/shopAndProdPage`,
method: 'GET',
data,
});
}
// 获取指定类型轮播图
export function getByType(data) {
return request({
url: `/sgyrdd/carousel/getByType`,
method: 'GET',
data,
});
}
src/pages.json
View file @ 64e50e43
......@@ -5,7 +5,7 @@
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
}
},
"pages": [ // pages 数组中第一项表示应用启动页
"pages": [
{
"path": "pages/index/index",
"style": {
......@@ -96,7 +96,8 @@
{
"path": "pages/index/coupon",
"style": {
"navigationBarTitleText": "优惠券详情"
"navigationBarTitleText": "优惠券详情",
"enablePullDownRefresh": true
}
}
],
......
src/pages/index/coupon.vue
View file @ 64e50e43
<template>
<view class="container">
<scroll-view class="tabs" scroll-x="true" @scroll="scroll">
<text class="tab" v-for="(item, index) in tabs" :key="index">{{ item }}</text>
<text
@tap="choice(index, item.value)"
class="tab"
:class="{ light: active === index }"
v-for="(item, index) in tabs"
:key="index"
>
{{ item.label }}
</text>
</scroll-view>
<view class="itemBox">
<view class="item"></view>
<view class="item" v-for="(item, index) in listData" :key="index">
<image class="commodity" :src="item.shopLogo" mode="aspectFill" />
<view class="describe">
<text class="title">{{ item.shopName }}</text>
<view class="oneBox">
<text class="price">￥{{ item.price }}</text>
<view class="afterTheCoupon">
<text class="afterTheCoupon1">券后￥</text>
<text class="afterTheCoupon2">{{ item.price - item.reduceAmount }}</text>
</view>
</view>
<view class="twoBox">
<text class="coupon">商家券</text>
<text class="discounted">已优惠￥{{ item.reduceAmount }}元</text>
</view>
<view class="threeBox">
<text class="fullReduction">{{ item.couponName }}</text>
<view class="receive">领劵</view>
</view>
</view>
</view>
<view
style="width: 100%; text-align: center; font-size: 24rpx; margin: 10rpx 0; color: #888989"
v-if="show"
>
没有更多啦~
</view>
</view>
</view>
</template>
<script setup>
import {} from 'vue';
import { getCoupon, getShopAndProdPage } from '../../api/index';
const tabs = ref(['推荐', '附近美食', '果蔬生鲜', '数码商城', '小吃快餐', '数码商城', '餐饮券']);
const params = {
current: 1,
size: 6,
lng: 106.68650025025502,
lat: 26.567192352601154,
};
let total;
const active = ref(0);
const listData = ref([]);
const show = ref(false);
// 获取优惠券
onMounted(() => {
getCoupons();
getShop();
});
// 数据重置
const reset = () => {
params.current = 1;
params.size = 6;
listData.value = [];
show.value = false;
};
const choice = (index, value) => {
reset();
active.value = index;
if (value === '999') {
delete params.classification;
} else {
params.classification = value;
}
getShop();
// emit('nearby', distance);
};
// 领券中心-分类列表
const getCoupons = () => {
getCoupon().then((res) => {
res.data.unshift({ label: '推荐', value: '999' });
tabs.value = res.data;
console.log('优惠券', res);
});
};
// 领券中心-店铺商品列表分页
const getShop = () => {
xma.showLoading({
title: '加载中',
});
getShopAndProdPage(params).then((res) => {
xma.hideLoading();
total = res.data.total;
res.data.records.forEach((item) => {
item.pic = import.meta.env.VITE_APP_IMG_URL + item.pic;
item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
});
console.log('优惠券', res);
listData.value = [...listData.value, ...res.data.records];
});
};
onPullDownRefresh(() => {
getCoupons();
getShop();
});
onReachBottom(() => {
if (listData.value.length < total) {
params.current++;
getShop();
return;
}
show.value = true;
});
</script>
<style lang="scss" scoped>
......@@ -29,19 +136,126 @@ page {
color: #333333;
font-weight: bold;
background: white;
position: sticky;
top: 0;
z-index: 99;
.tab {
display: inline-block;
margin-right: 40rpx;
}
.light {
color: #f12a2a;
}
}
.itemBox {
padding: 0 23rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.item {
width: 341rpx;
height: 674rpx;
// height: 674rpx;
background: #ffffff;
border-radius: 16rpx 16rpx 16rpx 16rpx;
margin-bottom: 18rpx;
box-sizing: border-box;
padding-bottom: 20rpx;
.commodity {
width: 341rpx;
height: 401rpx;
border-radius: 16rpx 16rpx 16rpx 16rpx;
}
.describe {
padding: 0 12rpx;
box-sizing: border-box;
.title {
font-weight: bold;
color: #333333;
font-size: 26rpx;
font-family:
PingFang SC,
PingFang SC;
}
.oneBox {
display: flex;
align-items: end;
margin: 20rpx 0;
.price {
font-weight: bold;
color: #f12a2a;
font-size: 28rpx;
}
.afterTheCoupon {
border-radius: 21rpx 21rpx 21rpx 21rpx;
// height: 41rpx;
text-align: center;
padding: 0 10rpx;
background: #f12a2a;
margin-left: 20rpx;
display: flex;
align-items: center;
.afterTheCoupon1 {
color: #ffffff;
font-size: 20rpx;
}
.afterTheCoupon2 {
color: #ffffff;
font-size: 36rpx;
}
}
}
.twoBox {
display: flex;
align-items: center;
.coupon {
text-align: center;
height: 32rpx;
font-size: 22rpx;
line-height: 32rpx;
min-width: 73rpx;
color: #ffffff;
border-radius: 6rpx 6rpx 6rpx 6rpx;
background: linear-gradient(90deg, #ff4d33 0%, #ff1d2e 100%);
}
.discounted {
font-size: 20rpx;
min-width: 136rpx;
height: 28rpx;
color: #f12a2a;
font-weight: 400;
background: #feebf0;
border-radius: 6rpx 6rpx 6rpx 6rpx;
line-height: 28rpx;
text-align: center;
}
}
.threeBox {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 13rpx;
.fullReduction {
font-size: 20rpx;
font-family:
PingFang SC,
PingFang SC;
font-weight: 400;
color: #f12a2a;
}
.receive {
background: linear-gradient(90deg, #ff4d33 0%, #ff1d2e 100%);
border-radius: 20rpx 20rpx 20rpx 20rpx;
height: 35rpx;
width: 81rpx;
text-align: center;
line-height: 35rpx;
color: #ffffff;
font-size: 24rpx;
}
}
}
}
}
}
......
src/pages/index/index.vue
View file @ 64e50e43
......@@ -133,6 +133,12 @@
<Marketing />
<!-- 美食卡片 -->
<FoodDetails :cardData="cardData2" />
<view
style="width: 100%; text-align: center; font-size: 24rpx; margin: 10rpx 0; color: #888989"
v-if="show"
>
没有更多啦~
</view>
</view>
</template>
......@@ -162,7 +168,7 @@ const { countInfo, addCount } = useCountStore();
// 附近美食
const foodNearbyData = ref([]);
const tabsData = ref([]);
const show = ref(false);
const light = ref(0);
const rotate = ref(false);
const classificationT = ref([
......@@ -191,6 +197,7 @@ const listParams = {
lat: 26.567192352601154,
};
const coupon = ref([]);
let total;
// 轮播图数据
let lunboData;
onMounted(() => {
......@@ -296,16 +303,58 @@ const recommendedClassification = () => {
tabsData.value.unshift({ categoryName: '推荐' });
});
};
// 重置数据
const reset = () => {
listParams.current = 1;
shopCardData.value = {};
cardData.value = [];
cardData1.value = [];
cardData2.value = [];
show.value = false;
};
// 商家列表分页-搜索列表
const getMerchantList = () => {
xma.showLoading({
title: '加载中',
});
merchantList(listParams).then((res) => {
xma.hideLoading();
total = res.data.totalElements;
res.data.content.forEach((item) => {
item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
if (item.evaluationVos.length > 0) {
item.simpleProds.forEach((item) => {
item.avatar = import.meta.env.VITE_APP_IMG_URL + item.avatar;
});
}
if (item.simpleProds.length > 0) {
item.simpleProds.forEach((item) => {
item.pic = import.meta.env.VITE_APP_IMG_URL + item.pic;
});
}
if (item.labels) {
item.labels = item.labels.split(',');
}
});
shopCardData.value = res.data.content[0];
cardData.value = res.data.content.slice(1, 3);
cardData1.value = res.data.content.slice(3, 5);
cardData2.value = res.data.content.slice(5);
});
};
// 商家列表分页-搜索列表(分页)
const getMerchantListPaging = () => {
// const data = {
// current: 1,
// size: 10,
// lon: 106.68650025025502,
// lat: 26.567192352601154,
// };
xma.showLoading({
title: '加载中',
});
merchantList(listParams).then((res) => {
console.log('商家列表', res);
xma.hideLoading();
res.data.content.forEach((item) => {
item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
if (item.evaluationVos.length > 0) {
......@@ -322,15 +371,13 @@ const getMerchantList = () => {
item.labels = item.labels.split(',');
}
});
shopCardData.value = res.data.content[0];
cardData.value = res.data.content.slice(1, 3);
cardData1.value = res.data.content.slice(3, 5);
cardData2.value = res.data.content.slice(5);
cardData2.value = [...cardData2.value, ...res.data.content];
});
};
// distance参数来源
const nearby = (distance) => {
console.log('distance', distance);
reset();
if (distance === 0) {
delete listParams.distance;
} else {
......@@ -341,6 +388,7 @@ const nearby = (distance) => {
// communityName参数来源
const popular = (communityName) => {
console.log('communityName', communityName);
reset();
listParams.communityName = communityName;
if (listParams.area) {
delete listParams.area;
......@@ -350,6 +398,7 @@ const popular = (communityName) => {
// area参数来源
const region = (area) => {
console.log('area', area);
reset();
listParams.area = area;
if (listParams.communityName) {
delete listParams.communityName;
......@@ -358,6 +407,7 @@ const region = (area) => {
};
// tabs
const choice = (index, categoryId) => {
reset();
light.value = index;
listParams.categoryIds = [categoryId];
if (index === 0) {
......@@ -388,22 +438,22 @@ const locationFiltering = () => {
};
const handleClick = (e) => {
const index = e.index;
if (index === 0) {
xma.navigateTo({
url: '/pages/index/listFood?type=1',
url: lunboData[index].link,
});
}
};
const onChange = (e) => {
// console.log(e);
};
// function toUIComponentsDoc() {
// window.open('https://wot-design-uni.netlify.app/component/button.html');
// }
// function onHandleClick() {
// addCount();
// }
// 触底加载
onReachBottom(() => {
if (cardData2.value.length + 5 < total) {
listParams.current++;
getMerchantListPaging();
return;
}
show.value = true;
});
</script>
<style lang="scss" scoped>
......@@ -655,7 +705,9 @@ page {
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
margin: 0 auto;
margin-top: 10rpx;
position: relative;
position: sticky;
top: 0;
z-index: 99;
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
display: none;
......
src/pages/index/listFood.vue
View file @ 64e50e43
......@@ -64,7 +64,7 @@ import FoodDetails from '../../components/index/FoodDetails.vue';
import Classification from '../../components/index/Classification.vue';
import Position from '../../components/index/Position.vue';
import Sort from '../../components/index/Sort.vue';
import { merchantList, getByParentId } from '../../api/index';
import { merchantList, getByParentId, getByType } from '../../api/index';
const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
const active = ref(null);
......@@ -87,19 +87,12 @@ onMounted(() => {
});
onLoad((options) => {
const { type } = options;
switch (type) {
case '1':
topBg.value = 'url(../../static/index/taste.png)';
paramsId.parentId = '3262';
const { categoryId, place } = options;
paramsId.parentId = categoryId;
getByParentIdData();
break;
case '2':
topBg.value = 'url(../../static/index/foodBg.png)';
paramsId.parentId = '3263';
getByParentIdData();
break;
}
getByType({ place }).then((res) => {
topBg.value = `url(${import.meta.env.VITE_APP_IMG_URL + res.data[0].imgUrl})`;
});
});
// distance参数来源
const nearby = (distance) => {
......@@ -212,7 +205,8 @@ page {
}
.head {
width: 100%;
height: 480rpx;
margin-bottom: 10rpx;
// height: 480rpx;
.top {
height: 356rpx;
// background: url('../../static/index/taste.png');
......@@ -225,7 +219,8 @@ page {
}
}
.bootom {
height: 124rpx;
// height: 124rpx;
height: 80rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment