Commit 81365a06 authored by 彭佳妮(贵阳日报)'s avatar 彭佳妮(贵阳日报)
parents 3ccf415b fdbfb1a4
<template>
<view @tap="toShop(item.shopId)" class="card" v-for="(item, index) in cardData" :key="index">
<view @tap="toShop(item.shopId)" class="card" v-for="item in cardData" :key="item.shopId">
<image class="img" :src="item.shopLogo" mode="aspectFill" />
<view class="right">
<text class="text">{{ item.shopName }}</text>
......
<template>
<div class="container">
<div class="container" style="padding-bottom: 10rpx">
<view class="bg-img"></view>
<view class="top">
<!-- 搜索 -->
......@@ -9,7 +9,10 @@
<!-- 类别选择 -->
<scroll-view class="scroll-x" scroll-x="true" @scroll="scroll">
<view class="foodCard" v-for="(item, index) in topDiscountedProducts" :key="index">
<image class="test5" src="../../static/index/test5.png" mode="widthFix" />
<view class="test5">
<image class="img1" :src="imgUrl + item.pic" />
<image class="img2" src="../../static/index/icon-tab.png" />
</view>
<view class="content">
<text class="title">{{ item.prodName }}</text>
<view class="labelBox">
......@@ -26,8 +29,8 @@
<text class="text2">{{ item.oriPrice }}</text>
<view class="btn">
<!-- <text class="text3">仅剩余5张</text> -->
<text class="text3"></text>
<image class="qiang" src="../../static/index/qiang.png" mode="widthFix" />
<text class="text3">立即抢购</text>
<!-- <image class="qiang" src="../../static/index/qiang.png" mode="widthFix" /> -->
</view>
</view>
</view>
......@@ -65,7 +68,7 @@
</view>
</view>
<view class="bootom-bottom">
<view
<!-- <view
@tap="choice(index)"
class="item"
:class="{ light: active === index }"
......@@ -73,21 +76,26 @@
:key="index"
>
{{ item }}
</view>
</view> -->
</view>
<!-- 美食类别 -->
<Classification v-show="rotate" :category="categoryData" @foodCategory="foodCategory" />
<!-- 附近筛选 -->
<Position v-show="rotate2" />
<Position v-show="rotate2" @nearby="nearby" @popular="popular" @region="region" />
<!-- 排序筛选 -->
<Sort v-show="rotate3" />
</view>
<FoodDetails :cardData="cardData" />
<view
style="width: 100%; text-align: center; font-size: 24rpx; margin-top: 10rpx"
v-if="params.isEnd"
>
没有更多啦~
</view>
</div>
</template>
<script setup>
import {} from 'vue';
import FoodDetails from '../../components/index/FoodDetails.vue';
import Search from '../../components/index/Search.vue';
import Classification from '../../components/index/Classification.vue';
......@@ -95,6 +103,8 @@ import Position from '../../components/index/Position.vue';
import Sort from '../../components/index/Sort.vue';
import { getByParentId, merchantList, prodSpecial } from '../../api/index';
const isLoadReachBottom = ref(null);
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
const active = ref(null);
const categoryData = ref([]);
......@@ -103,32 +113,92 @@ const rotate2 = ref(false);
const rotate3 = ref(false);
const categoryId = ref(null);
const topDiscountedProducts = ref([]);
const params = ref({
current: 1,
size: 15,
// lon,
// lat,
lon: 106.68650025025502,
lat: 26.567192352601154,
isEnd: false,
});
const pics = ref(null);
const paramsId = {
parentId: null,
};
onLoad((option) => {
const { parentId, pic } = option;
categoryId.value = parentId;
pics.value = pic;
query(parentId);
prodSpecialFn();
getByParentIdData();
});
onMounted(() => {
getMerchantList();
getLocationFn().then((res) => {
const { lat, lon } = res;
getMerchantList(lat, lon);
});
});
// 根据父级分类id查询子分类列表
const getByParentIdData = () => {
getByParentId(paramsId).then((res) => {
categoryData.value = res.data;
// distance参数来源
const nearby = (distance) => {
console.log('distance', distance);
if (distance === 0) {
delete params.value.distance;
} else {
params.value.distance = distance;
}
refresh().then(() => {
getMerchantList();
});
};
// communityName参数来源
const popular = (communityName) => {
params.value.communityName = communityName;
if (params.value.area) {
delete params.value.area;
}
refresh().then(() => {
getMerchantList();
});
};
// area参数来源
const region = (area) => {
console.log('area', area);
params.value.area = area;
if (params.value.communityName) {
delete params.value.communityName;
}
refresh().then(() => {
getMerchantList();
});
};
onReachBottom(() => {
console.log('到底了');
if (isLoadReachBottom.value === true) return;
isLoadReachBottom.value = true;
getMerchantList().then(() => {
isLoadReachBottom.value = false;
});
});
// categoryId参数来源
const foodCategory = (categoryId) => {
params.value.categoryIds = [categoryId];
refresh().then(() => {
getMerchantList();
});
};
/**
* @description: 刷新
*/
function refresh() {
return new Promise((resolve, reject) => {
cardData.value = [];
params.value.current = 1;
params.value.isEnd = false;
resolve();
});
}
// 根据父级分类id查询子分类列表
const query = (parentId) => {
getByParentId(parentId).then((res) => {
console.log('打印res', res);
categoryData.value = res.data;
});
};
const prodSpecialFn = () => {
......@@ -142,25 +212,10 @@ const prodSpecialFn = () => {
topDiscountedProducts.value = res.data.data;
});
};
// onLoad(option) {
// //option为object类型,会序列化上个页面传递的参数
// console.log(option.id); //打印出上个页面传递的参数。
// console.log(option.name); //打印出上个页面传递的参数。
// },
const choice = (index) => {
active.value = index;
};
const cardData = ref([
{
text: '测试',
},
{
text: '测试',
},
{
text: '测试',
},
]);
const cardData = ref([]);
const locationFiltering = (index) => {
switch (index) {
......@@ -183,14 +238,19 @@ const locationFiltering = (index) => {
};
// 商家列表分页-搜索列表
const getMerchantList = () => {
const data = {
current: 1,
size: 10,
lon: 106.68650025025502,
lat: 26.567192352601154,
};
merchantList(data).then((res) => {
console.log('商家列表', res);
if (params.value.isEnd === true)
return new Promise((resolve) => {
resolve();
});
xma.showLoading({
title: '加载中...',
mask: false,
});
return merchantList(params.value).then((res) => {
if (res.data.content.length < params.value.size) {
params.value.isEnd = true;
}
params.value.current += 1;
res.data.content.forEach((item) => {
item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
if (item.evaluationVos.length > 0) {
......@@ -201,9 +261,30 @@ const getMerchantList = () => {
item.labels = item.labels.split(',');
}
});
cardData.value = res.data.content;
return new Promise((resolve) => {
cardData.value = cardData.value.concat(res.data.content);
xma.hideLoading();
setTimeout(() => {
resolve();
}, 500);
});
});
};
function getLocationFn() {
return new Promise((resolve, reject) => {
xma.getLocation({
type: 'wgs84',
isHighAccuracy: true,
success: function (res) {
// 经纬度
resolve({ lat: res.latitude, lon: res.longitude });
},
fail: function (err) {
return err;
},
});
});
}
</script>
<style lang="scss" scoped>
......@@ -244,6 +325,22 @@ page {
overflow: hidden;
.test5 {
width: 100%;
height: 168 * 2rpx;
position: relative;
.img1 {
width: 100%;
height: 168 * 2rpx;
position: absolute;
top: 0;
left: 0;
}
.img2 {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
height: 56rpx;
}
}
.content {
display: flex;
......@@ -307,7 +404,8 @@ page {
border-radius: 10rpx;
background: #fcdbdb;
box-sizing: border-box;
margin-left: 66rpx;
margin-left: auto;
margin-right: 20rpx;
.text3 {
font-size: 20rpx;
color: #fa5151;
......
......@@ -186,11 +186,15 @@ onShow(() => {
case '1':
xma.showToast({
title: '支付失败',
icon: 'success',
icon: 'error',
duration: 2000,
});
break;
case '2' || '3':
case '2':
xma.redirectTo({
url: `/pages/shop/paymentSuccessful?outTradeNos=${outTradeNos.value}`,
});
case '3':
xma.redirectTo({
url: `/pages/shop/paymentSuccessful?outTradeNos=${outTradeNos.value}`,
});
......
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