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