Skip to content

G
groupPurchase-miniapp
Commit f41c1d02 authored by 石建新（贵阳日报）'s avatar 石建新（贵阳日报）
Browse files
Options

Merge branch 'master' of http://gitlab.platform.xinhuaapp.com/pengjiani/groupPurchase-miniapp

parents 3cb3ddb0 6f8cab2a
Hide whitespace changes
Inline Side-by-side
Showing with 310 additions and 100 deletions
src/App.vue
View file @ f41c1d02
......@@ -18,7 +18,9 @@ onHide(() => {
const signIn = () => {
getTokenUser(testJson).then((res) => {
const token = res.data.access_token;
const userInfo = res.data.user_info;
xma.setStorageSync('Authorization', token);
xma.setStorageSync('userInfo', userInfo);
console.log('登录...');
});
};
......
src/Components/index/FoodDetails.vue
View file @ f41c1d02
<template>
<view class="card" v-for="(item, index) in cardData" :key="index">
<image class="img" src="../../static/index/test1.png" mode="widthFix" />
<image class="img" :src="item.shopLogo" mode="aspectFill" />
<view class="right">
<text class="text">王将速食超市（可店内用餐）</text>
<text class="text">{{ item.shopName }}</text>
<view class="twoBxo">
<text class="one-text">5.0推荐</text>
<text class="two-text">￥30/人</text>
<text class="three-text">销量1265</text>
<text class="one-text">{{ item.grade }}推荐</text>
<!-- <text class="two-text">￥30/人</text> -->
<text class="three-text">销量{{ item.monthSoldNum }}</text>
<text class="four-text">1.2km</text>
</view>
<view class="threeBox">
<image class="img2" src="../../static/index/test2.png" mode="widthFix" />
<text class="one-text">“味道浓郁，食材新鲜，童年的老味道”</text>
<image class="img2" :src="item.evaluationVos[0].avatar" mode="aspectFill" />
<text class="one-text">“{{ item.evaluationVos[0].evaluation }}”</text>
</view>
<view class="labelBox">
<view>卤味爱好者最佳选择</view>
......@@ -59,6 +59,8 @@ const props = defineProps({
box-sizing: border-box;
.img {
width: 144rpx;
height: 144rpx;
border-radius: 16rpx;
}
.right {
margin-left: 20rpx;
......@@ -102,6 +104,8 @@ const props = defineProps({
align-items: center;
.img2 {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
.one-text {
font-size: 22rpx;
......
src/Components/index/Position.vue
View file @ f41c1d02
......@@ -7,33 +7,34 @@
<view class="right-details" v-show="light2 === 0">
<text class="nearby-title">我的附近</text>
<view class="nearby-card">
<view @tap="choice2(0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
<view @tap="choice2(1)" class="label" :class="light3 === 1 ? 'light3' : ''">500m</view>
<view @tap="choice2(2)" class="label" :class="light3 === 2 ? 'light3' : ''">1km</view>
<view @tap="choice2(3)" class="label" :class="light3 === 3 ? 'light3' : ''">3km</view>
<view @tap="choice2(4)" class="label" :class="light3 === 4 ? 'light3' : ''">5km</view>
<view @tap="choice2(5)" class="label" :class="light3 === 5 ? 'light3' : ''">10km</view>
<view @tap="choice2(0, 0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
<view @tap="choice2(1, 0.5)" class="label" :class="light3 === 1 ? 'light3' : ''">500m</view>
<view @tap="choice2(2, 1)" class="label" :class="light3 === 2 ? 'light3' : ''">1km</view>
<view @tap="choice2(3, 3)" class="label" :class="light3 === 3 ? 'light3' : ''">3km</view>
<view @tap="choice2(4, 5)" class="label" :class="light3 === 4 ? 'light3' : ''">5km</view>
<view @tap="choice2(5, 10)" class="label" :class="light3 === 5 ? 'light3' : ''">10km</view>
</view>
<text class="nearby-title margin">热门地点</text>
<ul class="ul">
<li>花果园购物中心</li>
<li>世纪金源购物中心</li>
<li>鸿通城</li>
<li>花果园中环广场</li>
<li>万科大都会</li>
<li>喷水池</li>
<li>喷水池</li>
<li
v-for="(item, index) in items"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index, item)"
>
{{ item }}
</li>
</ul>
</view>
<view class="right-details2" v-show="light2 === 1">
<ul class="ul">
<li
v-for="(item, index) in items"
v-for="(item, index) in items1"
:key="index"
:class="{ active: selectedItem === index }"
@tap="selectItem(index)"
:class="{ active: selectedItem1 === index }"
@tap="selectItem1(index)"
>
{{ item }}
{{ item.name }}
</li>
</ul>
<ul class="ul">
......@@ -41,9 +42,9 @@
v-for="(item, index) in items2"
:key="index"
:class="{ active: selectedItem2 === index }"
@tap="selectItem2(index)"
@tap="selectItem2(index, item.name)"
>
{{ item }}
{{ item.name }}
</li>
</ul>
</view>
......@@ -52,16 +53,19 @@
<script setup>
import { defineProps } from 'vue';
import { getRegion, administration } from '@/api/index';
const props = defineProps({
width: {
type: String,
default: '100%',
},
});
const emit = defineEmits(['nearby', 'popular', 'region']);
const light2 = ref(0);
const light3 = ref(0);
const items = reactive(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
const items2 = reactive([
const items = ref(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
const items1 = ref(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
const items2 = ref([
'全部',
'百花新城',
'人民广场',
......@@ -72,19 +76,45 @@ const items2 = reactive([
]);
const selectedItem = ref(null);
const selectedItem1 = ref(0);
const selectedItem2 = ref(null);
onMounted(() => {
getPlace();
getAdministration();
});
// 热门地点
const getPlace = () => {
getRegion({ city: '贵阳' }).then((res) => {
items.value = res.data;
});
};
// 行政区
const getAdministration = () => {
administration({ parentId: '52' }).then((res) => {
items1.value = res.data;
items2.value = items1.value[0].children;
});
};
const choice = (index) => {
light2.value = index;
};
const choice2 = (index) => {
const choice2 = (index, distance) => {
light3.value = index;
emit('nearby', distance);
};
const selectItem = (selectItem) => {
selectedItem.value = selectItem;
const selectItem = (index, communityName) => {
selectedItem.value = index;
selectedItem2.value = null;
emit('popular', communityName);
};
const selectItem2 = (selectItem) => {
selectedItem2.value = selectItem;
const selectItem1 = (index) => {
selectedItem1.value = index;
items2.value = items1.value[index].children;
};
const selectItem2 = (index, area) => {
selectedItem2.value = index;
selectedItem.value = null;
emit('region', area);
};
</script>
......@@ -93,7 +123,7 @@ const selectItem2 = (selectItem) => {
position: absolute;
top: 100%;
// width: 710rpx;
height: 780rpx;
min-height: 780rpx;
border-radius: 0rpx 0rpx 16rpx 16rpx;
background: #ffffff;
box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
......@@ -103,7 +133,7 @@ const selectItem2 = (selectItem) => {
.left-classification {
width: 176rpx;
background: #f1f1f1;
height: 100%;
min-height: 780rpx;
.option {
text-align: center;
width: 100%;
......@@ -164,6 +194,9 @@ const selectItem2 = (selectItem) => {
color: #3d3d3d;
margin-top: 20rpx;
}
.active {
color: #fa5151;
}
}
}
.right-details2 {
......
src/api/index.js
View file @ f41c1d02
......@@ -41,3 +41,38 @@ export function popularityPage(data) {
data,
});
}
// 团购主页推荐分类
export function getRecommList() {
return request({
url: `/sgyrdd/category/getRecommList`,
method: 'GET',
});
}
// 附近筛选-热门地点
export function getRegion(data) {
return request({
url: `/sgyrdd/area/hotArea`,
method: 'GET',
data,
});
}
// 附近筛选-行政区
export function administration(data) {
return request({
url: `/sgyrdd/area/tree`,
method: 'GET',
data,
});
}
// 商家列表分页-搜索列表
export function merchantList(data) {
return request({
url: `/sgyrdd/shop/page`,
method: 'POST',
data,
});
}
src/pages/index/index.vue
View file @ f41c1d02
......@@ -69,26 +69,35 @@
</view>
</view>
<view class="nearby-bootom">
<view class="contentBox" v-for="(item, index) in 3" :key="index">
<image class="img" src="../../static/index/eatFood.png" mode="widthFix" />
<text class="one">颜悦养生汤锅...</text>
<view class="contentBox" v-for="(item, index) in foodNearbyData" :key="index">
<!-- <image class="img" src="../../static/index/eatFood.png" mode="widthFix" /> -->
<image class="img" :src="item.shopLogo" mode="aspectFill" />
<text class="one">{{ item.shopName }}</text>
<view class="price">
<text class="two">4.2推荐</text>
<text class="three">￥36/人</text>
<text class="two">{{ item.grade }}推荐</text>
<!-- <text class="three">￥36/人</text> -->
</view>
<text class="four">36分钟前有人购买</text>
<text class="four" v-show="item.lastBuyTime <= 86400000">
{{ timeConversion(item.lastBuyTime) }}前有人购买
</text>
</view>
</view>
</view>
<!-- 推荐 -->
<view class="recommend">
<view class="tabs">
<text @tap="choice(0)" class="text" :class="light === 0 ? 'light' : ''">推荐</text>
<text @tap="choice(1)" class="text" :class="light === 1 ? 'light' : ''">特色小吃</text>
<text @tap="choice(2)" class="text" :class="light === 2 ? 'light' : ''">贵阳老字号</text>
<text @tap="choice(3)" class="text" :class="light === 3 ? 'light' : ''">火锅</text>
<text @tap="choice(4)" class="text" :class="light === 4 ? 'light' : ''">奶茶</text>
</view>
<!-- <view class="tabs"> -->
<scroll-view class="tabs" scroll-x="true">
<text
@tap="choice(index, item.categoryId)"
v-for="(item, index) in tabsData"
:key="index"
class="text"
:class="light === index ? 'light' : ''"
>
{{ item.categoryName }}
</text>
</scroll-view>
<!-- </view> -->
<view class="recommend-bottom">
<view class="box" @tap="locationFiltering">
<text class="text">位置距离</text>
......@@ -105,18 +114,18 @@
</view>
</view>
<!-- 位置定位 -->
<Position v-show="rotate" />
<Position v-show="rotate" @nearby="nearby" @popular="popular" @region="region" />
</view>
<!-- 美食卡片 -->
<FoodDetails :cardData="cardData" />
<!-- 店铺卡片推荐 -->
<ShopCard />
<!-- 美食卡片 -->
<FoodDetails :cardData="cardData" />
<FoodDetails :cardData="cardData1" />
<!-- 营销模块 -->
<Marketing />
<!-- 美食卡片 -->
<FoodDetails :cardData="cardData" />
<FoodDetails :cardData="cardData2" />
</view>
</template>
......@@ -128,30 +137,70 @@ import FoodDetails from '../../components/index/FoodDetails.vue';
import ShopCard from '../../components/index/ShopCard.vue';
import Marketing from '../../components/index/Marketing.vue';
import Position from '../../components/index/Position.vue';
import { groupBuyList, groupImgList, popularityPage } from '../../api/index';
import {
groupBuyList,
groupImgList,
popularityPage,
getRecommList,
merchantList,
} from '../../api/index';
import { timeConversion } from '../../utils/tool';
const nowTime = ref(new Date().getTime());
// import testJson from '../../static/json/test.json';
// import { getToken } from '../../utils/auth';
const title = ref('小程序平台');
const { countInfo, addCount } = useCountStore();
// 附近美食
const foodNearbyData = ref([]);
const tabsData = ref([]);
const light = ref(0);
const rotate = ref(false);
const classificationT = ref([
{ img: 'hotPot', text: '火锅' },
{ img: 'barbecue', text: '烧烤烤肉' },
{ img: 'stirFriedDishes', text: '地方菜系' },
{ img: 'hamburg', text: '小吃快餐' },
]);
const classificationB = ref([
{ img: 'seafood', text: '鱼鲜海鲜' },
{ img: 'foreignLand', text: '异域风味' },
{ img: 'selfHelp', text: '自助餐' },
{ img: 'drink', text: '饮品店' },
{ img: 'bread', text: '面包蛋糕' },
]);
const cardData = ref([]);
const cardData1 = ref([]);
const cardData2 = ref([]);
const current = ref(0);
const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/guiyang.png']);
const listParams = {
current: 1,
size: 10,
lon: 106.68650025025502,
lat: 26.567192352601154,
};
// 轮播图数据
let lunboData;
onMounted(() => {
getClassification();
rotatingBroadcast();
nearbyFood();
recommendedClassification();
getMerchantList();
// test(testJson).then((res) => {
// console.log('打印', res);
// });
// console.log('testJson', testJson);
});
// 登录
const signIn = () => {
getTokenUser(testJson).then((res) => {
const token = res.data.access_token;
xma.setStorageSync('Authorization', token);
console.log('登录...');
});
};
// const signIn = () => {
// getTokenUser(testJson).then((res) => {
// const token = res.data.access_token;
// xma.setStorageSync('Authorization', token);
// console.log('登录...');
// });
// };
// 获取分类
const getClassification = () => {
groupBuyList().then((res) => {
......@@ -165,15 +214,28 @@ const getClassification = () => {
};
// 附近人气美食分页
const nearbyFood = () => {
console.log('位置名称：');
xma.getLocation({
isHighAccuracy: true,
success: function (res) {
console.log('位置名称：', res);
},
fail: function (err) {
console.log('获取位置失败：', err);
},
// xma.getLocation({
// isHighAccuracy: true,
// success: function (res) {
// console.log('经度', res.longitude);
// console.log('维度', res.latitude);
// },
// fail: function (err) {
// console.log('获取位置失败：', err);
// },
// });
const data = {
current: 1,
size: 3,
lon: 106.68650025025502,
lat: 26.567192352601154,
};
popularityPage(data).then((res) => {
res.data.content.forEach((item) => {
item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
item.lastBuyTime = new Date().getTime() - new Date(item.lastBuyTime).getTime();
});
foodNearbyData.value = res.data.content;
});
};
// 轮播图
......@@ -189,36 +251,71 @@ const rotatingBroadcast = () => {
});
});
};
const light = ref(0);
const rotate = ref(false);
const classificationT = ref([
{ img: 'hotPot', text: '火锅' },
{ img: 'barbecue', text: '烧烤烤肉' },
{ img: 'stirFriedDishes', text: '地方菜系' },
{ img: 'hamburg', text: '小吃快餐' },
]);
const classificationB = ref([
{ img: 'seafood', text: '鱼鲜海鲜' },
{ img: 'foreignLand', text: '异域风味' },
{ img: 'selfHelp', text: '自助餐' },
{ img: 'drink', text: '饮品店' },
{ img: 'bread', text: '面包蛋糕' },
]);
const cardData = reactive([
{
text: '测试',
},
{
text: '测试',
},
{
text: '测试',
},
]);
const current = ref(0);
const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/guiyang.png']);
const choice = (index) => {
// 团购主页推荐分类
const recommendedClassification = () => {
getRecommList().then((res) => {
tabsData.value = res.data;
tabsData.value.unshift({ categoryName: '推荐' });
});
};
// 商家列表分页-搜索列表
const getMerchantList = () => {
// const data = {
// current: 1,
// size: 10,
// lon: 106.68650025025502,
// lat: 26.567192352601154,
// };
merchantList(listParams).then((res) => {
console.log('商家列表', res);
res.data.content.forEach((item) => {
item.shopLogo = import.meta.env.VITE_APP_IMG_URL + item.shopLogo;
if (item.evaluationVos.length > 0) {
item.evaluationVos[0].avatar =
import.meta.env.VITE_APP_IMG_URL + item.evaluationVos[0].avatar;
}
});
cardData.value = res.data.content.slice(0, 2);
cardData1.value = res.data.content.slice(2, 4);
cardData2.value = res.data.content.slice(4);
});
};
// distance参数来源
const nearby = (distance) => {
console.log('distance', distance);
if (distance === 0) {
delete listParams.distance;
} else {
listParams.distance = distance;
}
getMerchantList();
};
// communityName参数来源
const popular = (communityName) => {
console.log('communityName', communityName);
listParams.communityName = communityName;
if (listParams.area) {
delete listParams.area;
}
getMerchantList();
};
// area参数来源
const region = (area) => {
console.log('area', area);
listParams.area = area;
if (listParams.communityName) {
delete listParams.communityName;
}
getMerchantList();
};
// tabs
const choice = (index, categoryId) => {
light.value = index;
listParams.categoryIds = [categoryId];
if (index === 0) {
delete listParams.categoryIds;
}
getMerchantList();
};
// 金刚区分类选择
const jingang = (id) => {
......@@ -457,12 +554,18 @@ page {
flex-direction: column;
align-items: flex-start;
.img {
height: 160rpx;
width: 220rpx;
border-radius: 16rpx;
}
.one {
font-size: 28rpx;
font-weight: bold;
color: #3d3d3d;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.price {
.two {
......@@ -492,13 +595,28 @@ page {
margin: 0 auto;
margin-top: 10rpx;
position: relative;
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}
.tabs {
padding-top: 20rpx;
white-space: nowrap;
height: 60rpx;
.text {
font-size: 24rpx;
color: #d8d8d8;
margin-left: 40rpx;
margin: 0 20rpx;
font-weight: bold;
display: inline-block;
}
.text:nth-child(1) {
margin-left: 40rpx;
}
.light {
background: linear-gradient(241deg, #ff8f1f -7%, #fa5151 93%);
......@@ -526,7 +644,7 @@ page {
box-sizing: border-box;
justify-content: space-between;
align-items: center;
margin-top: 40rpx;
margin-top: 20rpx;
.box {
display: flex;
align-items: center;
......
src/utils/tool.js 0 → 100644
View file @ f41c1d02
export function timeConversion(diffInMilliseconds) {
// 计算总秒数
const totalSeconds = Math.abs(Math.floor(diffInMilliseconds / 1000));
// 计算天数、小时数和分钟数
const days = Math.floor(totalSeconds / (24 * 60 * 60));
const hours = Math.floor((totalSeconds % (24 * 60 * 60)) / (60 * 60));
const minutes = Math.floor((totalSeconds % (60 * 60)) / 60);
// 返回包含天数、小时数和分钟数的对象
if (hours === 0) {
return `${minutes}分钟`;
} else if (days === 0) {
return `${hours}小时${minutes}分钟`;
} else {
return `${days}天${hours}小时${minutes}分钟`;
}
}
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