Skip to content

G
groupPurchase-miniapp
Commit f784e5e8 authored by 彭佳妮（贵阳日报）'s avatar 彭佳妮（贵阳日报）
Browse files
Options

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

parents 86625dd9 f41c1d02
Hide whitespace changes
Inline Side-by-side
Showing with 495 additions and 151 deletions
src/App.vue
View file @ f784e5e8
......@@ -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 @ f784e5e8
<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 @ f784e5e8
......@@ -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 @ f784e5e8
......@@ -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/api/packageDetail.js
View file @ f784e5e8
......@@ -7,3 +7,11 @@ export function getProdDetail(data) {
method: 'GET',
});
}
// 套餐详情
export function getCollect(data) {
return request({
url: `/sgyrdd/shop/collect?shopId=${data}`,
method: 'GET',
});
}
src/assets/iconfont/iconfont.css
View file @ f784e5e8
@font-face {
font-family: "iconfont"; /* Project id 4633414 */
src: url('//at.alicdn.com/t/c/font_4633414_3k0ybwfc2l1.woff2?t=1722483682262') format('woff2'),
url('//at.alicdn.com/t/c/font_4633414_3k0ybwfc2l1.woff?t=1722483682262') format('woff'),
url('//at.alicdn.com/t/c/font_4633414_3k0ybwfc2l1.ttf?t=1722483682262') format('truetype');
src: url('//at.alicdn.com/t/c/font_4633414_jxzjjul419.woff2?t=1722502888587') format('woff2'),
url('//at.alicdn.com/t/c/font_4633414_jxzjjul419.woff?t=1722502888587') format('woff'),
url('//at.alicdn.com/t/c/font_4633414_jxzjjul419.ttf?t=1722502888587') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-shuangxiajiantou:before {
content: "\e660";
}
.icon-dianzan:before {
content: "\e602";
}
......
src/pages/index/index.vue
View file @ f784e5e8
......@@ -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/pages/packageDetails/packageDetails.vue
View file @ f784e5e8
......@@ -63,14 +63,33 @@
<!-- card-end -->
<view class="rich-text-card">
<text class="title">商品详情</text>
<rich-text :nodes="'nodes'"></rich-text>
<rich-text :nodes="prodInfo.content"></rich-text>
</view>
<view class="rich-text-card">
<text class="title">购买须知</text>
<rich-text :nodes="'nodes'"></rich-text>
<view class="rich-more-btn">
收起
<image src="@/static/shop/more.png"></image>
<!-- <rich-text :nodes="'nodes'"></rich-text> -->
<view class="purchase-information" v-if="showRlue">
<view class="purchase-box">
<text class="title">开始时间</text>
<text class="content">{{ prodRlue.createTime }}</text>
</view>
<view class="purchase-box">
<text class="title">结束时间</text>
<text class="content">{{ prodRlue.endTime }}</text>
</view>
<view class="purchase-box">
<text class="title">标签</text>
<text class="content">{{ prodRlue.labelNames }}</text>
</view>
<view class="purchase-box">
<text class="title">规则</text>
<text class="content">{{ prodRlue.rule }}</text>
</view>
</view>
<view class="rich-more-btn" @click="showRlueFn">
{{ showRlue ? '收起' : '展开' }}
<i v-if="showRlue" class="iconfont icon-shuangshangjiantou-"></i>
<i v-else class="iconfont xia icon-shuangxiajiantou"></i>
</view>
</view>
<!-- 使用方法-start -->
......@@ -102,21 +121,21 @@
<!-- 适用门店 -->
<view class="applicable-stores-card">
<text class="title">适用门店</text>
<text class="goods-name">川心美蛙鱼头火锅(中环广场店)</text>
<text class="goods-name">{{ shopInfo.shopName }}</text>
<view class="goods-pf-rs">
<text class="goods-fs">4.3分</text>
<text class="goods-fs">{{ shopInfo.grade }}分</text>
<text class="goods-type">火锅</text>
<text class="goods-rs">36/人</text>
<!-- <text class="goods-rs">36/人</text> -->
</view>
<text class="distance">距你129m</text>
<text class="address">后巢乡花果园中环广场3号(M区4栋)3层114号</text>
<text class="distance">距你{{ distance }}</text>
<text class="address">{{ shopInfo.shopAddress }}</text>
</view>
<!-- 适用门店-end -->
<!-- 底部 -->
<view class="bottom-operation-bar">
<view class="start">
<view class="start" @click="collectionFn">
<image src="@/static/shop/start.png"></image>
241
{{ shopInfo.privateIntFcount }}
</view>
<view class="start">
<image src="@/static/shop/share.png"></image>
......@@ -129,45 +148,101 @@
</template>
<script setup>
import { getProdDetail } from '@/api/packageDetail';
const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
]);
import { getProdDetail, getCollect } from '@/api/packageDetail';
import { getStoreInformation } from '@/api/shop';
const prodInfo = ref({});
const prodRlue = ref({});
const myProdId = ref('');
const current = ref(0);
const showRlue = ref(true);
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const shopInfo = ref({});
const currentLatitudeAndLongitude = ref({});
const shopId = ref('');
onLoad((options) => {
const { prodId } = options;
myProdId.value = prodId;
getProdDetailFn(prodId);
getProdDetailFn(prodId).then((shopId) => {
getStoreInformationFn(shopId);
});
});
onShow(() => {
// 获取位置
getLocationFn();
});
/**
* 获取套餐详情
* @param {String} prodId
*/
function getProdDetailFn(prodId) {
getProdDetail(prodId).then((res) => {
if (res.code === 0) {
console.log('res', res);
res.data.data.prod.imgs = res.data.data.prod.imgs.split(',');
res.data.data.prod.imgs.push(res.data.data.prod.pic);
res.data.data.prod.imgs = res.data.data.prod.imgs
.map((item) => {
if (item !== '') {
item = imgUrl + item;
}
return item;
})
.filter((item) => {
return item !== '';
});
prodInfo.value = res.data.data.prod;
}
return new Promise((resolve, reject) => {
getProdDetail(prodId).then((res) => {
if (res.code === 0) {
res.data.data.prod.imgs = res.data.data.prod.imgs.split(',');
res.data.data.prod.imgs.push(res.data.data.prod.pic);
res.data.data.prod.imgs = res.data.data.prod.imgs
.map((item) => {
if (item !== '') {
item = imgUrl + item;
}
return item;
})
.filter((item) => {
return item !== '';
});
prodInfo.value = res.data.data.prod;
prodRlue.value = res.data.data.groupPurchasePackageRule;
shopId.value = res.data.data.prod.shopId;
resolve(res.data.data.prod.shopId);
}
});
});
}
/**
* 获取收藏
*/
function getCollectFn(shopId) {
if (shopInfo.value.isCollect === 0) {
shopInfo.value.privateIntFcount++;
shopInfo.value.isCollect = 1;
} else {
shopInfo.value.privateIntFcount--;
shopInfo.value.isCollect = 0;
}
shopInfo.value.console.log('111');
// getCollect(shopId).then((res) => {
// if (res.code === 0) {
// if (shopInfo.value.isCollect === 0) {
// shopInfo.value.privateIntFcount++;
// shopInfo.value.isCollect = 1;
// } else {
// shopInfo.value.privateIntFcount--;
// shopInfo.value.isCollect = 0;
// }
// shopInfo.value.console.log('111');
// }
// });
}
function collectionFn() {
getCollectFn(shopId.value);
}
function getLocationFn() {
xma.getLocation({
type: 'wgs84',
success: function (res) {
const myLatitude = currentLatitudeAndLongitude.value.latitude;
const myLongitude = currentLatitudeAndLongitude.value.longitude;
const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
shopInfo.value.distance = distance;
},
fail: function (err) {
return err;
},
});
}
const showRlueFn = () => {
showRlue.value = !showRlue.value;
};
const handleClick = (e) => {
const { index } = e;
const imgSrc = prodInfo.value.imgs[index];
......@@ -183,6 +258,20 @@ function previewImage(imgSrc) {
urls: [imgSrc], // 需要预览的图片链接列表
});
}
// 获取店铺信息
const getStoreInformationFn = (id) => {
return new Promise((resolve, reject) => {
getStoreInformation(id).then((res) => {
if (res.code === 0) {
shopInfo.value = res.data.shop;
shopInfo.value.tagList = res.data.shop.labels.split(',');
currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat;
currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon;
resolve();
}
});
});
};
</script>
<style lang="scss" scoped>
......@@ -332,11 +421,37 @@ page {
margin-top: 10rpx;
border-radius: 8 * 2rpx;
box-shadow: 0 -8rpx 22 * 2rpx 0 rgba(255, 255, 255, 0.6);
.purchase-information {
display: flex;
flex-direction: column;
align-content: flex-start;
.purchase-box {
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
.title {
font-size: 11 * 2rpx;
color: #767676;
}
.content {
font-size: 11 * 2rpx;
margin-left: 32rpx;
color: #3d3d3d;
}
}
}
.title {
font-size: 13 * 2rpx;
color: #151515;
font-weight: 500;
}
img {
width: 100%;
height: auto;
}
p {
font-size: 22rpx;
}
.rich-more-btn {
width: 315 * 2rpx;
display: flex;
......@@ -348,6 +463,10 @@ page {
box-sizing: border-box;
padding: 20rpx 0 0 0;
margin-top: 20rpx;
.xia {
font-size: 20rpx;
margin-left: 10rpx;
}
image {
width: 18rpx;
height: 18rpx;
......@@ -415,7 +534,7 @@ page {
}
}
.bottom-operation-bar {
width: 100%;
width: 750rpx;
background: #fff;
border-radius: 16rpx 16rpx 0 0;
display: flex;
......
src/pages/shop/shop.vue
View file @ f784e5e8
......@@ -247,8 +247,8 @@
<!-- <text class="goods-rs">36/人</text> -->
</view>
<view class="tag-list">
<view class="tag" v-for="item in tagList2" :key="item.id">
{{ item.name }}
<view class="tag" v-for="(el, i) in item.labels" :key="i">
{{ el }}
</view>
</view>
</view>
......@@ -302,12 +302,6 @@ const isLoadReachBottom = ref(null);
const commentList = ref([]);
// 评论总数
const commentTotal = ref(0);
const tagList = ref([
{ name: '美食', id: 1 },
{ name: '休闲娱乐', id: 2 },
{ name: '景点', id: 3 },
{ name: '生活服务', id: 4 },
]);
// 周边推荐类型列表
const recommendedTypesOfPeripherals = ref([]);
// 商户id
......@@ -366,8 +360,17 @@ function sgyrddShopPageFn(categoryIds) {
};
sgyrddShopPage(params).then((res) => {
if (res.code === 0) {
res.data.content = res.data.content
.map((el) => {
if (el.labels && el.labels !== '') {
el.labels = el.labels.split(',');
}
return el;
})
.filter((item) => {
return item !== '';
});
recommendedListOfPeripherals.value = res.data.content;
console.log('res', res);
}
});
}
......@@ -377,7 +380,7 @@ function getLocationFn() {
success: function (res) {
const myLatitude = currentLatitudeAndLongitude.value.latitude;
const myLongitude = currentLatitudeAndLongitude.value.longitude;
const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude);
const distance = getDistance(res.latitude, res.longitude, myLatitude, myLongitude, 1);
shopInfo.value.distance = distance;
},
fail: function (err) {
......@@ -1223,7 +1226,7 @@ page {
box-sizing: border-box;
padding: 6rpx;
font-size: 8 * 2rpx;
margin-right: 20rpx;
margin-right: 10rpx;
}
}
}
......
src/utils/tool.js 0 → 100644
View file @ f784e5e8
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