点餐页增加轮播图点击图片进入具体页面,点击分享正常分享,在对应的页面增加分享弹窗组件

This commit is contained in:
2026-01-28 18:09:47 +08:00
parent 93d3f9196c
commit 37fe706d6a
19 changed files with 1913 additions and 1227 deletions

View File

@@ -130,6 +130,7 @@
<!-- <CouponModal></CouponModal> -->
<!-- 页面加载动画 -->
<pageLoading v-if="showPageLoading" />
</view>
</template>

View File

@@ -90,7 +90,7 @@
</view>
<view class="item" @click="toFenxiao">
<image :src="imgs.share" class="img"></image>
<view class="title">股东共享</view>
<view class="title">全民股东</view>
<view class="desc">邀请好友获得佣金</view>
</view>
</view>
@@ -116,6 +116,8 @@
</u-popup>
<!-- 私域引流弹窗 -->
<attractPopup type="home" ref="attractPopupRef" />
<ymf-share-popup ></ymf-share-popup>
</view>
</template>

View File

@@ -192,6 +192,29 @@
</scroll-view>
</view>
<view class="main">
<view class="u-p-r-32">
<up-swiper indicator indicatorMode="line" height="188rpx" :list="carouselList"
keyName="imageUrl">
<template #default="scope">
<view class="relative">
<image :src="scope.item.imageUrl" mode="aspectFill"
style="width:600rpx;height: 188rpx;"></image>
<view class="absolute swiper-mask" @click.stop="swiperClick(scope.item)">
<view class="share-btn-box" v-if="showShare(scope.item)">
<ymf-share
@shareClick="shareBtnClick(scope.item)"
>
<view class="share-btn">分享</view>
</ymf-share>
</view>
</view>
</view>
</template>
</up-swiper>
</view>
<view>
<view class="item main-item" v-for="(item, index) in shopProductList.productInfo" :key="index"
:id="'item-' + index">
@@ -616,6 +639,8 @@
</view>
</view>
</u-popup>
<ymf-share-popup ></ymf-share-popup>
</view>
</template>
@@ -649,6 +674,11 @@
import {
APIproductqueryShop
} from '@/common/api/member.js';
import {
carousel
} from '@/common/api/market/share.js'
/**
* api合集 end
*/
@@ -990,6 +1020,79 @@
uni.$u.debounce(mainScroll(res), 500);
});
/*商品区域轮播图 start*/
const shareSwiperItem=ref(null)
function swiperClick(item) {
console.log('swiperClick',item);
shareSwiperItem.value=item
const pTag=returnPageTags(item.jumpPagePath)
if(pTag==='pp-list'){
return uni.navigateTo({
url:item.jumpPagePath+'&shopId='+uni.cache.get('shopId')
})
}
if(pTag==='pp-detail'){
const url=item.jumpPagePath+'&shopId='+uni.cache.get('shopId')+'&'+item.extendParam
return uni.navigateTo({
url:url.replace('goodsId','id')
})
}
if(pTag==='gb-list'){
return uni.navigateTo({
url:item.jumpPagePath+'&shopId='+uni.cache.get('shopId')
})
}
if(pTag==='gb-detail'){
const url=item.jumpPagePath+'&shopId='+uni.cache.get('shopId')+'&'+item.extendParam
return uni.navigateTo({
url:url.replace('goodsId','wareId')
})
}
if(pTag==='dis'){
return uni.navigateTo({
url:item.jumpPagePath+'&shopId='+uni.cache.get('shopId')
})
}
if(pTag==='index'){
return uni.switchTab({
url:item.jumpPagePath+'&shopId='+uni.cache.get('shopId')
})
}
if(pTag==='eat'){
if (item.extendParam) {
const id=item.extendParam.split('=')[1]
const item = allGoodsArr.value.find(v => v.id == id)
if (item) {
clickspecifications(item)
}
}
}
if(pTag==='point'){
return uni.navigateTo({
url:item.jumpPagePath+'&shopId='+uni.cache.get('shopId')
})
}
if(pTag==='point-detail'){
const url=item.jumpPagePath+'&shopId='+uni.cache.get('shopId')+'&'+item.extendParam
return uni.navigateTo({
url:url.replace('goodsId','id')
})
}
}
function showShare(item){
if(item.isShareable&&item.isEnabled){
return true
}
return false
}
/*商品区域轮播图 end*/
// 点击详情
const showShopsku = ref(false);
@@ -1450,6 +1553,9 @@
};
// 判断商品是否在可售时间内
const isProductAvailable = async (sellDaysStr, startTimeStr, endTimeStr) => {
if(!sellDaysStr){
return false
}
// 将后端返回的字符串转换为数组
const sellDays = sellDaysStr.split(',');
const now = dayjs();
@@ -2456,7 +2562,7 @@
handleMixinOnLoad,
returnQuery,
jsonToUrl,
wxShare,
wxShare,returnPageTags,
returnCommonQuery
} from '@/utils/share.js'
// defineOptions({
@@ -2469,9 +2575,47 @@
function shareClick() {
isGoodsShare.value = true
}
function getPage(pageStr){
}
function shareBtnClick(item){
console.log('shareBtnClick',item);
shareSwiperItem.value=item
}
function swiperShare(queryJson){
console.log('shareSwiperItem',shareSwiperItem.value);
const pTag=returnPageTags(shareSwiperItem.value.jumpPagePath)
let query = jsonToUrl(queryJson)
query +=('&'+shareSwiperItem.value.extendParam)
const json={
imageUrl:shareSwiperItem.value.imageUrl,
path: shareSwiperItem.value.jumpPagePath+'&'+query,
title:shareSwiperItem.value.name,
}
if(pTag==='pp-detail'){
json.path=json.path.replace('goodsId','id')
}
if(pTag==='gb-detail'){
json.path=json.path.replace('goodsId','wareId')
}
if(pTag==='point-detail'){
json.path=json.path.replace('goodsId','id')
}
if(pTag.includes('eat')){
if(shareSwiperItem.value.extendParam){
json.path=json.path.replace('goodsId','showGoodsId')
}
}
return wxShare(json)
}
async function onShare() {
const queryJson = await returnCommonQuery()
if(shareSwiperItem.value){
return swiperShare(queryJson)
}
let query = jsonToUrl(queryJson)
query += '&type=beforehand'
let json = {}
@@ -2486,11 +2630,7 @@
json.title = shopName
json.imageUrl = uni.cache.get('shopInfo').logo || ''
}
console.log('onShareAppMessage', {
query,
...json,
path: '/pages/product/index' + '?' + query
});
return wxShare({
query,
...json,
@@ -2503,6 +2643,8 @@
onShareTimeline(onShare)
const pageOptions = reactive({})
const carouselList = ref([])
onLoad(async (e) => {
Object.assign(pageOptions, e)
if (e.type) {
@@ -2513,9 +2655,10 @@
...e,
shopId: e.shopId || uni.cache.get('shopId')
})
if(userStore.shopUserInfo.shopExtendList){
shopExtend.value=userStore.shopUserInfo.shopExtendList.find(v=>v.autoKey=='shopinfo_bg')||''
if (userStore.shopUserInfo.shopExtendList) {
shopExtend.value = userStore.shopUserInfo.shopExtendList.find(v => v.autoKey == 'shopinfo_bg') ||
''
}
// //获取用户信息
@@ -2566,6 +2709,13 @@
// 满减活动
getDiscountActivity();
//分享轮播
carousel({
shopId: uni.cache.get('shopId')
}).then(res => {
carouselList.value = res
})
let res = await APIhistoryOrder({
tableCode: uni.cache.get('tableCode')
});
@@ -2671,6 +2821,7 @@
}
onHide(() => {
isGoodsShare.value = false
shareSwiperItem.value=null
closeSocket();
});
onUnload(() => {
@@ -3911,4 +4062,26 @@
}
}
}
.swiper-mask {
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 32rpx 28rpx;
}
.share-btn-box{
position: absolute;
right: 8rpx;
bottom: 14rpx;
}
.share-btn {
padding: 10rpx 32rpx;
border-radius: 50rpx;
background: #E3AD7F;
font-size: 24rpx;
color: #ffffff;
}
</style>