Skip to content

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

接口

parent 571bbf6c
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 57 deletions
src/api/shop.js
View file @ c84bb4bb
import { request } from '../utils/request';
// 分类
// 店铺信息
export function getStoreInformation(data) {
return request({
url: `/sgyrdd/shop/getById?shopId=${data}`,
method: 'GET',
});
}
// 店铺信息
export function groupBuyList(data) {
return request({
url: `/sgyrdd/prod/groupBuyList?shopId=${data}`,
method: 'GET',
});
}
// 商家评论列表分页
export function getEvaluationPage(data) {
return request({
url: `/sgyrdd/evaluation/page`,
method: 'GET',
data,
});
}
// 获取商家优惠券
export function couponShopList(data) {
return request({
url: `/sgyrdd/coupon/couponShopList/${data}`,
method: 'GET',
});
}
src/pages/shop/shop.vue
View file @ c84bb4bb
......@@ -60,17 +60,21 @@
</view>
</view>
<view class="shop-business-hours">
<texe>营业时间: 11:00-22:30</texe>
<texe>营业时间: {{ shopInfo.transactionStart }}-{{ shopInfo.transactionEnd }}</texe>
</view>
</view>
</view>
<view class="shop-info-bottom">
<view class="shop-address">
<text class="shop-distance">距您＜150米 {{ shopInfo.area }}</text>
<text class="shop-address-detail">{{ shopInfo.shopAddress }}(M区3栋)一层104 号</text>
<text class="shop-distance">距您{{ shopInfo.distance }} {{ shopInfo.area }}</text>
<text class="shop-address-detail">{{ shopInfo.shopAddress }}</text>
</view>
<view class="shop-map-phone">
<image class="img1" src="@/static/shop/map.png"></image>
<image
@tap="callShopPhone(shopInfo.phone)"
class="img1"
src="@/static/shop/map.png"
></image>
<image src="@/static/shop/phone.png"></image>
</view>
</view>
......@@ -81,16 +85,16 @@
<view class="subsidy-content">
<view class="subsidy">
<image src="@/static/shop/subsidy.png" />
<text>立减10元</text>
<text>{{ merchantCoupons.activityName }}</text>
</view>
<view class="more">
<view class="more" @tap="jumpTocouponPage">
<text>更多</text>
<wd-icon name="arrow-right" size="24rpx"></wd-icon>
</view>
</view>
<!-- 补贴-end -->
<!-- 商品下单列表 -->
<view class="goods-list">
<!-- <view class="goods-list">
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
<view :id="i" class="scroll-view-item_H" v-for="i in 10" :key="i">
<view class="item-box">
......@@ -104,7 +108,7 @@
<text>立即下单 到店秒提</text>
（共45个商品）
</wd-button>
</view>
</view> -->
<!-- 商品下单列表-end -->
<!-- 团购优惠-start -->
<view class="group-buying-discounts">
......@@ -113,24 +117,28 @@
<text>团购优惠</text>
</view>
<view class="group-buying-list">
<view class="group-buying-item" v-for="i in 3" :key="i">
<image class="goods-picture" src="@/static/shop/ice.png"></image>
<view
class="group-buying-item"
v-for="(item, index) in listOfGroupBuyingProducts"
:key="index"
>
<image class="goods-picture" :src="item.pic"></image>
<view class="goods-info-detail">
<text class="goods-title multi-line">双人田蛙尝鲜餐</text>
<text class="yh-fl multi-line">蔬菜免费，米饭免费</text>
<text class="yh-time multi-line">周一至周日 11:00-23:00 可用</text>
<text class="goods-title multi-line">{{ item.prodName }}</text>
<text class="yh-fl multi-line">{{ item.brief }}</text>
<text class="yh-time multi-line">{{ item.rule }}</text>
<view class="tag-list">
<view class="tag">过期退</view>
<view class="tag">随时退</view>
<view class="tag">{{ item.labelNames }}</view>
<!-- <view class="tag">随时退</view> -->
</view>
<view class="price">
<text class="num0">到手</text>
<text class="num">￥88</text>
<text class="num1">￥128</text>
<text class="num">￥{{ item.price }}</text>
<text class="num1">￥{{ item.oriPrice }}</text>
</view>
</view>
<view class="pay">
<text class="sold-shares">已售36份</text>
<text class="sold-shares">已售{{ item.soldNum }}份</text>
<view class="my-button-qg">抢购</view>
</view>
</view>
......@@ -145,13 +153,13 @@
</view>
<!-- 评价列表 -->
<view class="reviews-list">
<view class="reviews-item" v-for="i in 2" :key="i">
<view class="reviews-item" v-for="(item, index) in commentList" :key="index">
<view class="user-info-box">
<view class="u-info-detail">
<!-- 头像 -->
<image src="@/static/shop/ice.png" class="user-tx"></image>
<image :src="item.avatar" class="user-tx"></image>
<view class="u-name">
<text>多多团购真好用</text>
<text>{{ item.nickName }}</text>
<view class="u-pf">
<text>5分</text>
<wd-rate
......@@ -165,10 +173,10 @@
</view>
</view>
</view>
<text class="u-time">2024-07-14发表 南明区中环广场</text>
<text class="u-time">{{ item.createTime }}发表 南明区中环广场</text>
</view>
<view class="user-evaluate">
不得不说，味道非常好，很多配菜，份量很足，非常适合几个人聚 一起吃。
{{ item.evaluation }}
</view>
<view class="evaluate-img">
<image v-for="i in 2" :key="i" src="@/static/shop/ice.png"></image>
......@@ -241,14 +249,31 @@
</template>
<script setup>
import { getStoreInformation } from '@/api/shop';
import { getStoreInformation, groupBuyList, getEvaluationPage, couponShopList } from '@/api/shop';
import { getDistance } from '@/utils/common';
const imgUrl = import.meta.env.VITE_APP_IMG_URL;
const current = ref(0);
const old = reactive({ scrollTop: 0 });
const activeId = ref(1);
// 店铺信息
const shopInfo = ref({});
// 店铺轮播图
const shopSwiperList = ref([]);
// 当前位置的经纬度
const currentLatitudeAndLongitude = ref({ latitude: 0, longitude: 0 });
// 团购商品列表
const listOfGroupBuyingProducts = ref([]);
// 商家优惠券
const merchantCoupons = ref({});
// 评论分页
const params = ref({
current: 1,
size: 50,
shopId: '1626126617850544129',
isEnd: false,
});
// 评价列表
const commentList = ref([]);
const tagList = ref([
{ name: '美食', id: 1 },
{ name: '休闲娱乐', id: 2 },
......@@ -264,46 +289,34 @@ const swiperList = ref([
onLoad((options) => {
getStoreInformationFn('1626126617850544129');
groupBuyListFn('1626126617850544129');
couponShopListFn('1626126617850544129');
getEvaluationPageFn();
});
onShow(() => {
// 获取位置
getLocationFn();
});
const value = ref(5);
const handleClick = (e) => {
console.log(e);
};
const onChange = (e) => {
console.log(e);
};
const handleClick = (e) => {};
const onChange = (e) => {};
function scroll(e) {
console.log(e);
old.scrollTop = e.detail.scrollTop;
}
function getLocationFn() {
// xma.getLocation({
// type: 'wgs84',
// success: function (res) {
// console.log('经度：' + res.longitude);
// console.log('纬度：' + res.latitude);
// },
// fail: function (err) {
// console.error('获取位置失败：', err);
// },
// });
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
console.log('经度123：' + position.coords.longitude);
console.log('纬度：' + position.coords.latitude);
},
function (error) {
console.error('获取位置失败：', error);
},
);
} else {
console.error('浏览器不支持Geolocation API');
}
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);
shopInfo.value.distance = distance;
},
fail: function (err) {
return err;
},
});
}
// 获取店铺信息
......@@ -313,12 +326,87 @@ const getStoreInformationFn = (id) => {
shopInfo.value = res.data.shop;
shopSwiperList.value = res.data.imgList.map((item) => imgUrl + item.imgUrl);
shopInfo.value.tagList = res.data.shop.labels.split(',');
currentLatitudeAndLongitude.value.latitude = res.data.shop.location.lat;
currentLatitudeAndLongitude.value.longitude = res.data.shop.location.lon;
}
});
};
/**
* 获取团购列表
* @param {*} id
*/
const groupBuyListFn = (shopId) => {
groupBuyList(shopId).then((res) => {
if (res.code === 0) {
listOfGroupBuyingProducts.value = res.data.map((item) => {
item.pic = imgUrl + item.pic;
return item;
});
console.log('result', listOfGroupBuyingProducts);
}
});
};
/**
* 获取商家优惠券
*/
const couponShopListFn = (shopId) => {
couponShopList(shopId).then((res) => {
if (res.code === 0) {
console.log('res', res);
merchantCoupons.value = res.data[0];
}
});
};
/**
* 获取评价列表
*/
const getEvaluationPageFn = () => {
if (params.value.isEnd === true)
return new Promise((resolve) => {
resolve();
});
xma.showLoading({
title: '加载中...',
mask: true,
});
return getEvaluationPage({
current: params.value.current,
size: params.value.size,
shopId: params.value.shopId,
}).then((res) => {
if (res.code === 0) {
if (res.data.records.length < params.value.size) {
params.value.isEnd = true;
}
params.value.size += 1;
return new Promise((resolve) => {
commentList.value = commentList.value.concat(res.data.records);
xma.hideLoading();
});
}
});
};
/**
* 跳转优惠券页面
*/
const jumpTocouponPage() =>{
xma.navigateTo({
url:`/pages`
})
}
function changeActie(id) {
activeId.value = id;
}
/**
* 拨打商家电话
* @param {*} phoneNumber
*/
function callShopPhone(phoneNumber) {
xma.makePhoneCall({
phoneNumber, // 仅为示例
});
}
</script>
<style lang="scss">
......@@ -401,6 +489,7 @@ page {
// 商家信息
.shop-info-box {
height: 146 * 2rpx;
height: 116 * 2rpx;
}
.shop-info {
width: 750rpx;
......@@ -654,12 +743,15 @@ page {
.group-buying-list {
width: 100%;
margin-top: 40rpx;
background: #fff;
.group-buying-item {
border-bottom: 2rpx solid #efefef;
display: flex;
align-items: center;
padding-bottom: 40rpx;
padding-top: 20rpx;
width: 100%;
background: #fdfdfd;
image {
width: 60 * 2rpx;
height: 60 * 2rpx;
......@@ -748,7 +840,7 @@ page {
// 用户评价-start
.user-reviews {
width: 100%;
background-color: #fff;
background-color: #fdfdfd;
box-sizing: border-box;
padding: 11 * 2rpx;
margin-top: 10rpx;
......@@ -874,7 +966,7 @@ page {
.surrounding-recommendations {
width: 100%;
border-radius: 8 * 2rpx 8 * 2rpx 0 0;
background: #ffffff;
background: #fdfdfd;
display: flex;
flex-direction: column;
box-sizing: border-box;
......@@ -991,3 +1083,4 @@ page {
}
}
</style>
@/utils/common.js
src/utils/common.js 0 → 100644
View file @ c84bb4bb
// 根据经纬度计算距离，参数分别为第一点的纬度、经度；第二点的纬度、经度
export function getDistance(lat1, lng1, lat2, lng2) {
const R = 6371; // 地球半径，单位为千米
const dLat = deg2rad(lat2 - lat1);
const dLng = deg2rad(lng2 - lng1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLng / 2) * Math.sin(dLng / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c;
if (distance >= 1) {
return distance.toFixed(2) + '千米';
} else {
return (distance * 1000).toFixed(2) + '米';
}
}
// 将角度转换为弧度
function deg2rad(deg) {
return deg * (Math.PI / 180);
}
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