mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 02:47:25 +08:00
94e846af6c
- 在 api/trade.js 中新增 selectGiftCard 函数以支持礼品卡选择 - 更新多个组件以集成礼品卡功能，包括购物车和订单页面 - 优化商品页面和订单详情展示，支持礼品卡抵扣信息 - 调整相关逻辑以确保礼品卡与其他促销活动的兼容性
828 lines
27 KiB
Vue
828 lines
27 KiB
Vue
<template>
|
||
<div class="main-page">
|
||
<!-- #ifdef APP-PLUS -->
|
||
<view class="status_bar"></view>
|
||
<!-- #endif -->
|
||
<!-- 仅h5有效 打开App -->
|
||
|
||
<!-- 分享 -->
|
||
<shares v-if="enableShare && goodsDetail.id" :skuId="routerVal.id" :goodsId="routerVal.goodsId" :link="
|
||
'/pages/product/goods?id=' +
|
||
routerVal.id +
|
||
'&goodsId=' +
|
||
routerVal.goodsId
|
||
" :thumbnail="goodsDetail.thumbnail" :goodsName="goodsDetail.goodsName" type="goods"
|
||
@close="enableShare = false" />
|
||
<popups v-model="popupsSwitch" @tapPopup="handleNavbarList" :popData="navbarListData" :x="navbarListX"
|
||
:y="navbarListY" placement="top-start" />
|
||
<view class="index">
|
||
<!-- topBar -->
|
||
<u-navbar
|
||
:fixed="true"
|
||
:placeholder="false"
|
||
:safe-area-inset-top="true"
|
||
:border="false"
|
||
:bg-color="navbar.background"
|
||
:auto-back="false"
|
||
:class="headerFlag ? 'header' : 'header bg-none scroll-hide'"
|
||
>
|
||
<template #left>
|
||
<view class="backs" @tap.stop>
|
||
<view class="nav-action" @tap.stop="back()">
|
||
<u-icon name="arrow-left" class="icon-back"></u-icon>
|
||
</view>
|
||
<view class="nav-action" @tap.stop="popupsSwitch = !popupsSwitch">
|
||
<u-icon name="list" class="icon-list"></u-icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template #center>
|
||
<view class="headerList" :class="headerFlag ? 'tab-bar' : 'tab-bar scroll-hide'">
|
||
<view class="headerRow headerRow--tabs">
|
||
<view
|
||
class="nav-item"
|
||
v-for="header in headerList"
|
||
:key="header.id"
|
||
:class="{ cur: scrollId === header.id }"
|
||
@tap.stop="headerTab(header.id)"
|
||
>
|
||
{{ header.text }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</u-navbar>
|
||
|
||
<u-navbar
|
||
:border="false"
|
||
v-show="!headerFlag"
|
||
:fixed="true"
|
||
:placeholder="false"
|
||
:safe-area-inset-top="true"
|
||
class="header-only-back"
|
||
:bg-color="navbarOnlyBack.background"
|
||
:auto-back="false"
|
||
>
|
||
<template #left>
|
||
<view class="bg-back" @tap.stop>
|
||
<view class="nav-action" @tap.stop="back()">
|
||
<u-icon size="20" name="arrow-left" class="icon-back"></u-icon>
|
||
</view>
|
||
<view class="nav-action" @tap.stop="popupsSwitch = !popupsSwitch">
|
||
<u-icon size="20" name="list" class="icon-list"></u-icon>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</u-navbar>
|
||
</view>
|
||
|
||
<view class="product-container" id="productRef">
|
||
<scroll-view
|
||
enableBackToTop="true"
|
||
scroll-with-animation
|
||
scroll-y
|
||
class="scroll-page"
|
||
:scroll-top="tabScrollTop"
|
||
@scroll="pageScroll"
|
||
>
|
||
<view class="scroll-inner">
|
||
<!-- 轮播图 -->
|
||
|
||
<GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />
|
||
|
||
<!-- 促销活动条（秒杀/限时直降/拼团等，M-02 含 E_COUPON） -->
|
||
<PromotionAssembleLayout v-if="PromotionList" :detail="goodsDetail" :res="PromotionList" />
|
||
|
||
<view class="card-box top-radius-0" id="main2">
|
||
<!-- 活动不显示价钱 -->
|
||
<view v-if="isSeckill || isGroup" class="desc-bold -goods-msg">
|
||
<view class="-goods-flex">
|
||
<view class="desc-bold">
|
||
{{ goodsDetail.goodsName || "" }}
|
||
</view>
|
||
<view class="favorite" @click="clickFavorite(goodsDetail.id)">
|
||
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'" :name="favorite ? 'heart-fill' : 'heart'">
|
||
</u-icon>
|
||
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{
|
||
favorite? "已收藏": "收藏"
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 商品描述 -->
|
||
<view class="-goods-desc">
|
||
{{ goodsDetail.sellingPoint || "" }}
|
||
</view>
|
||
</view>
|
||
<view v-else class="-goods-msg">
|
||
<!-- 没有拼团，秒杀等活动的情况下 -->
|
||
<view>
|
||
<view class="-goods-flex">
|
||
<!-- 如果有积分显示积分 -->
|
||
<view class="-goods-price" v-if="goodsDetail.price != undefined">
|
||
|
||
<span>
|
||
<span v-if="wholesaleList.length">
|
||
<span>¥</span><span class="price">{{
|
||
goodsFormatPrice(wholesaleList[wholesaleList.length - 1].price)[0]
|
||
}}</span>.{{
|
||
goodsFormatPrice(wholesaleList[wholesaleList.length - 1].price)[1]
|
||
}}
|
||
~
|
||
<span>¥</span><span class="price">{{
|
||
goodsFormatPrice(wholesaleList[0].price)[0]
|
||
}}</span>.{{
|
||
goodsFormatPrice(wholesaleList[0].price)[1]
|
||
}}
|
||
</span>
|
||
<span v-else>
|
||
<span>¥</span><span class="price">{{
|
||
goodsFormatPrice(goodsDetail.price)[0]
|
||
}}</span>.{{ goodsFormatPrice(goodsDetail.price)[1] }}
|
||
</span>
|
||
</span>
|
||
</view>
|
||
<view class="-goods-price" v-else>
|
||
<div v-if="takeDownFromSale" class="price down-goods">
|
||
暂无报价
|
||
</div>
|
||
<span v-else>
|
||
¥<span class="price">0 </span>.00
|
||
</span>
|
||
</view>
|
||
|
||
<view class="icons share" @click="shareChange()">
|
||
<u-icon size="30" name="share-fill"></u-icon>
|
||
<view>分享</view>
|
||
</view>
|
||
<view class="icons" @click="clickFavorite(goodsDetail.id)">
|
||
<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
|
||
:name="favorite ? 'heart-fill' : 'heart'"></u-icon>
|
||
<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{
|
||
favorite? "已收藏": "收藏"
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="-goods-name desc-bold">
|
||
{{ goodsDetail.goodsName || "" }}
|
||
</view>
|
||
<view class="-goods-desc">
|
||
{{ goodsDetail.sellingPoint || "" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 促销/领券入口 -->
|
||
<view class="card-box">
|
||
<view class="card-flex" @click="shutMask(1)">
|
||
<view class="card-title"> 促销 </view>
|
||
<view class="card-content">
|
||
<span v-if="PromotionList && emptyPromotion()">暂无促销信息</span>
|
||
<PromotionLayout v-else @shutMasks="shutMask" :res="PromotionList" />
|
||
</view>
|
||
<view class="card-bottom">
|
||
<u-icon name="more-dot-fill"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 拼团用户列表 -->
|
||
<PromotionAssembleListLayout v-if="isGroup" @to-assemble-buy-now="toAssembleBuyNow" :res="PromotionList" />
|
||
|
||
<!-- 实物配送地址；E_COUPON / VIRTUAL_GOODS 均不展示 -->
|
||
<view class="card-box" v-if="!isNonPhysicalGoodsType">
|
||
<view class="card-flex" @click="shutMask(4)">
|
||
<view class="card-title"> 已选 </view>
|
||
<view class="card-content">
|
||
<span v-if="selectedGoods.spec">{{ selectedGoods.spec.specName }}-{{
|
||
selectedGoods.spec.specValue
|
||
}}</span>
|
||
<span v-else>默认</span>
|
||
</view>
|
||
<view class="card-bottom">
|
||
<u-icon name="more-dot-fill"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="card-flex" @click="shutMask(3)">
|
||
<view class="card-title"> 送至</view>
|
||
<view class="card-content">
|
||
<span v-if="delivery">{{clearStrComma(delivery.consigneeAddressPath)
|
||
}}</span>
|
||
<span v-else>暂无地址信息</span>
|
||
</view>
|
||
<view class="card-bottom">
|
||
<u-icon name="more-dot-fill"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评价 -->
|
||
<Evaluation id="main5" :goodsDetail="goodsDetail" />
|
||
|
||
<!-- 店铺推荐 -->
|
||
<storeLayout id="main7" :storeDetail="storeDetail" :goodsDetail="goodsDetail" :res="recommendList" />
|
||
|
||
<!-- 宝贝详情 -->
|
||
<GoodsIntro
|
||
id="main9"
|
||
:res="goodsDetail"
|
||
:goodsParams="goodsParams"
|
||
:goodsId="goodsDetail.goodsId"
|
||
v-if="goodsDetail.id && (goodsDetail.mobileIntro || (goodsParams && goodsParams.length))"
|
||
/>
|
||
|
||
<!-- 宝贝推荐 -->
|
||
<GoodsRecommend id="main11" v-if="likeGoodsList.length" :res="likeGoodsList" />
|
||
</view>
|
||
</scroll-view>
|
||
|
||
|
||
<view class="page-bottom mp-iphonex-bottom" id="pageBottom">
|
||
<view class="icon-btn">
|
||
<view class="icon-btn-item" @click="navigateToStore(goodsDetail.storeId)">
|
||
<u-icon size="22" class="red" name="home-fill"></u-icon>
|
||
<view class="red icon-btn-name">店铺</view>
|
||
</view>
|
||
<view class="icon-btn-item" @click="linkMsgDetail()">
|
||
<u-icon size="22" name="kefu-ermai"></u-icon>
|
||
<view class="icon-btn-name">客服</view>
|
||
</view>
|
||
<view class="icon-btn-item" @click="reluchToCart()">
|
||
<u-icon size="22" name="shopping-cart"></u-icon>
|
||
<view class="icon-btn-name">购物车</view>
|
||
<view v-if="nums && nums > 0" class="num-icon">{{ nums }}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 下架展示 -->
|
||
<div class="detail-btn" v-if="takeDownFromSale">
|
||
<view class="to-store-car to-store-btn" @click="reStartTakeDownSale">
|
||
查看类似商品</view>
|
||
</div>
|
||
<!-- 正常结算页面 -->
|
||
<view class="detail-btn" v-if="!isGroup && !takeDownFromSale">
|
||
<view class="to-store-car to-store-btn" v-if="showAddToCart" @click="shutMask(4)">
|
||
加入购物车</view>
|
||
<view class="to-buy to-store-btn" @click="shutMask(4, 'buy')">立即购买</view>
|
||
<view class="to-store-car to-store-btn" v-if="startTimer">暂未开始</view>
|
||
</view>
|
||
<!-- 拼团结算 -->
|
||
<view class="detail-btn" v-else-if="isGroup">
|
||
<view class="to-store-car pt-buy to-store-btn" @click="shutMask(4, 'buy')">
|
||
<view>￥{{unitPrice(goodsDetail.price)}}</view>
|
||
<view>单独购买</view>
|
||
</view>
|
||
<view class="to-buy pt-buy to-store-btn" @click="toAssembleBuyNow">
|
||
<view>￥{{unitPrice(goodsDetail.promotionPrice)}}</view>
|
||
<view>拼团价格</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 规格-模态层弹窗 -->
|
||
<view class="spec">
|
||
<!-- 促销弹窗 -->
|
||
<u-popup v-model:show="promotionShow" :height="setup.height" :mode="setup.mode" :border-radius="setup.radius"
|
||
@close="promotionShow = false" :mask-close-able="setup.close" closeable>
|
||
<view class="header-title">优惠</view>
|
||
<view class="cuxiao">
|
||
<scroll-view class="scroll_mask" :scroll-y="true">
|
||
<view class="con-cuxiao">
|
||
<view class="cuxiao-title">促销活动</view>
|
||
<PromotionDetailsLayout :res="PromotionList" />
|
||
</view>
|
||
<view class="con-cuxiao coupons">
|
||
<view class="cuxiao-title">可领优惠券</view>
|
||
<PromotionCoupon @getCoupon="getCoupon" :res="PromotionList" />
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 配送地址弹窗 -->
|
||
<popupAddress @closeAddress="closePopupAddress" @deliveryData="deliveryFun" v-if="goodsDetail.id"
|
||
:goodsId="goodsDetail.id" :addressFlag="addressFlag" />
|
||
|
||
<!-- 商品规格 商品详情，以及默认参与活动的id-->
|
||
<popupGoods :addr="delivery" ref="popupGoodsRef" @changed="changedGoods" @closeBuy="closePopupBuy"
|
||
@queryCart="cartCount()" :goodsDetail="goodsDetail" :goodsSpec="goodsSpec" :isGroup="isGroup" :id="productId"
|
||
v-if="goodsDetail.id" :pointDetail="pointDetail" :wholesaleList="wholesaleList" @handleClickSku="selectSku"
|
||
:buyMask="buyMask" />
|
||
|
||
<!-- 下架框 -->
|
||
<takeDownFormSaleGoods ref="takeDownSaleRef" v-if="takeDownFromSale" />
|
||
</view>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
/************接口API***************/
|
||
import { ref, reactive, computed, watch, nextTick, getCurrentInstance } from 'vue'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
import { getGoods, getGoodsList, getMpScene, getGoodsDistribution } from '@/api/goods.js'
|
||
import * as API_trade from '@/api/trade.js'
|
||
import * as API_Members from '@/api/members.js'
|
||
import * as API_store from '@/api/store.js'
|
||
import { getIMDetail } from '@/api/common'
|
||
import { modelNavigateTo } from '@/pages/tabbar/home/template/tpl.js'
|
||
/************请求存储***************/
|
||
import storage from '@/utils/storage.js'
|
||
/************工具函数***************/
|
||
import { useStore } from '@/store'
|
||
import { unitPrice, goodsFormatPrice, isLogin, parseGoodsImageUrl, clearStrComma, talkIm } from '@/utils/filters.js'
|
||
import { isNonPhysicalGoods } from '@/utils/goodsType.js'
|
||
|
||
/************组件***************/
|
||
import PromotionLayout from './product/promotion/-promotion'
|
||
import PromotionDetailsLayout from './product/promotion/-promotion-details'
|
||
import PromotionAssembleLayout from './product/promotion/-promotion-assemble-promotions'
|
||
import PromotionAssembleListLayout from './product/promotion/-promotion-assemble-list'
|
||
import PromotionCoupon from './product/promotion/-promotion-coupon'
|
||
import GoodsIntro from './product/goods/-goods-intro'
|
||
import GoodsRecommend from './product/goods/-goods-recommend'
|
||
import storeLayout from './product/shop/-shop'
|
||
import Evaluation from './product/evaluation/-evaluation'
|
||
import GoodsSwiper from './product/goods/-goods-swiper'
|
||
import popupGoods from '@/components/m-buy/goods'
|
||
import popupAddress from './product/popup/address'
|
||
import shares from '@/components/m-share/index'
|
||
import popups from '@/components/popups/popups'
|
||
import takeDownFormSaleGoods from '@/components/m-take-down-sale-goods/index'
|
||
import setup from './product/popup/popup'
|
||
|
||
const store = useStore()
|
||
const instance = getCurrentInstance()
|
||
const popupGoodsRef = ref()
|
||
const takeDownSaleRef = ref()
|
||
|
||
// 响应式数据
|
||
const promotionShow = ref(false)
|
||
let navbarListX: any
|
||
let navbarListY: any
|
||
// #ifdef H5
|
||
navbarListX = ref(110)
|
||
navbarListY = ref(80)
|
||
// #endif
|
||
// #ifdef MP-WEIXIN || APP-PLUS
|
||
// #ifndef H5
|
||
navbarListX = ref(120)
|
||
navbarListY = ref(170)
|
||
// #endif
|
||
// #endif
|
||
const navbarListData = [
|
||
{ title: "首页", icon: "home-fill", ___type: "other" },
|
||
{ title: "购物车", icon: "bag-fill", ___type: "other" },
|
||
{ title: "搜索", icon: "search", ___type: "category" },
|
||
{ title: "个人中心", icon: "account-fill", ___type: "other" },
|
||
]
|
||
const popupsSwitch = ref(false)
|
||
const enableShare = ref(false)
|
||
const selectedGoods = ref<any>("")
|
||
const isGroup = ref(false)
|
||
const isSeckill = ref(false)
|
||
const pointDetail = ref<any>("")
|
||
const assemble = ref<any>("")
|
||
const navbarOnlyBack = reactive({ background: "transparent" })
|
||
const navbar = reactive({ background: "#fff" })
|
||
const header = reactive({ top: 0, height: 50 })
|
||
const goodsParams = ref<any[]>([])
|
||
const headerFlag = ref(false)
|
||
const headerList = [
|
||
{ text: "商品", id: "1" },
|
||
{ text: "评价", id: "2" },
|
||
{ text: "详情", id: "3" },
|
||
{ text: "推荐", id: "4" },
|
||
]
|
||
const tabScrollTop = ref<any>(null)
|
||
const scrollArr = ref<number[]>([])
|
||
const scrollId = ref("1")
|
||
const scrollFlag = ref(true)
|
||
const current = ref("1")
|
||
const goodsDetail = ref<any>({})
|
||
const goodsSpec = ref<any>("")
|
||
const imgList = ref<any[]>([])
|
||
const favorite = ref(false)
|
||
const recommendList = ref<any[]>([])
|
||
const addressFlag = ref(false)
|
||
const buyMask = ref(false)
|
||
const num = ref(1)
|
||
const skuId = ref<any>("")
|
||
const storeDetail = ref<any>("")
|
||
const storeParams = reactive({
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
})
|
||
const likeGoodsList = ref<any[]>([])
|
||
const PromotionList = ref<any>("")
|
||
const specList = ref<any[]>([])
|
||
const selectedSpec = ref<any[]>([])
|
||
const nums = ref(0)
|
||
const delivery = ref<any>("")
|
||
const exchange = ref<any>({})
|
||
const productId = ref(0)
|
||
const startTimer = ref(false)
|
||
const routerVal = ref<any>("")
|
||
const IMLink = ref("")
|
||
const wholesaleList = ref<any[]>([])
|
||
const takeDownFromSale = ref(false)
|
||
|
||
// computed
|
||
const IM = computed(() => {
|
||
return IMLink.value + storeDetail.value.merchantEuid
|
||
})
|
||
|
||
// E_COUPON：禁加购、免地址；促销展示与 VIRTUAL 对齐（M-02）
|
||
const isNonPhysicalGoodsType = computed(() => isNonPhysicalGoods(goodsDetail.value?.goodsType))
|
||
const showAddToCart = computed(() => {
|
||
return !isNonPhysicalGoodsType.value
|
||
})
|
||
|
||
// watch
|
||
watch(isGroup, (val) => {
|
||
if (val) {
|
||
let timer = setInterval(() => {
|
||
if (popupGoodsRef.value) {
|
||
(popupGoodsRef.value as any).buyType = "PINTUAN"
|
||
}
|
||
clearInterval(timer)
|
||
}, 100)
|
||
} else {
|
||
if (popupGoodsRef.value) {
|
||
(popupGoodsRef.value as any).buyType = ""
|
||
}
|
||
}
|
||
})
|
||
|
||
// 生命周期
|
||
onLoad((options: any) => {
|
||
routerVal.value = options
|
||
// #ifdef MP-WEIXIN
|
||
uni.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ["shareAppMessage", "shareTimeline"],
|
||
})
|
||
// #endif
|
||
})
|
||
|
||
onShow(async () => {
|
||
goodsDetail.value = {}
|
||
if (routerVal.value.scene) {
|
||
const res = await getMpScene(routerVal.value.scene)
|
||
if (res.data.success) {
|
||
let data = res.data.result.split(",")
|
||
init(data[0], data[1], data[2])
|
||
}
|
||
} else {
|
||
init(routerVal.value.id, routerVal.value.goodsId, routerVal.value.distributionId)
|
||
}
|
||
})
|
||
|
||
// 方法
|
||
function reStartTakeDownSale() {
|
||
if (takeDownSaleRef.value) {
|
||
(takeDownSaleRef.value as any).show = true
|
||
}
|
||
}
|
||
|
||
function share() {
|
||
return `/pages/product/goods?id=${routerVal.value.id}&goodsId=${routerVal.value.goodsId}`
|
||
}
|
||
|
||
function handleNavbarList(val: any) {
|
||
modelNavigateTo({ url: val })
|
||
}
|
||
|
||
function emptyPromotion(): boolean {
|
||
if (PromotionList.value == "" || PromotionList.value == null || PromotionList.value == []) {
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
|
||
function selectSku(idObj: any) {
|
||
init(idObj.skuId, idObj.goodsId)
|
||
}
|
||
|
||
async function init(id: any, goodsId: any, distributionId = "") {
|
||
isGroup.value = false
|
||
productId.value = id
|
||
|
||
let response = await getGoods(id || 'undefined', goodsId)
|
||
|
||
if (!response?.data?.success) {
|
||
if (response?.data?.code == 11001) {
|
||
takeDownFromSale.value = true
|
||
}
|
||
uni.showToast({
|
||
title: response?.data?.message || '商品加载失败',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
if ((distributionId || store.state.distributionId) && isLogin("auth")) {
|
||
let disResult = await getGoodsDistribution(distributionId)
|
||
if (!disResult?.data?.success || disResult.statusCode == 403) {
|
||
store.state.distributionId = distributionId
|
||
}
|
||
}
|
||
|
||
const resultData = response.data.result?.data
|
||
if (!resultData) {
|
||
uni.showToast({
|
||
title: '商品数据异常',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
goodsDetail.value = resultData
|
||
if (goodsDetail.value) {
|
||
goodsDetail.value.thumbnail = parseGoodsImageUrl(goodsDetail.value.thumbnail)
|
||
}
|
||
wholesaleList.value = response.data.result.wholesaleList || []
|
||
goodsSpec.value = response.data.result.specs || ""
|
||
PromotionList.value = response.data.result.promotionMap || ""
|
||
goodsParams.value = response.data.result.goodsParamsDTOList || []
|
||
|
||
PromotionList.value &&
|
||
Object.keys(PromotionList.value).forEach((item: string) => {
|
||
if (item.indexOf("PINTUAN") == 0) {
|
||
isGroup.value = true
|
||
}
|
||
if (item.indexOf("SECKILL") == 0) {
|
||
isSeckill.value = true
|
||
}
|
||
})
|
||
|
||
const gallery = (goodsDetail.value.goodsGalleryList || [])
|
||
.map((i: any) => parseGoodsImageUrl(i, ""))
|
||
.filter(Boolean)
|
||
imgList.value = [...new Set(gallery)]
|
||
|
||
getStoreBaseInfoFun(goodsDetail.value.storeId)
|
||
cartCount()
|
||
getStoreRecommend()
|
||
getOtherLikeGoods()
|
||
|
||
if (isLogin("auth")) {
|
||
getGoodsCollectionFun(goodsDetail.value.id)
|
||
}
|
||
}
|
||
|
||
async function getIMDetailMethods() {
|
||
let res = await getIMDetail()
|
||
if (res.data.success) {
|
||
IMLink.value = res.data.result
|
||
}
|
||
}
|
||
|
||
function linkMsgDetail() {
|
||
talkIm(goodsDetail.value.storeId, routerVal.value.goodsId, routerVal.value.id)
|
||
}
|
||
|
||
function changedGoods(val: any) {
|
||
selectedGoods.value = val
|
||
}
|
||
|
||
function deliveryFun(val: any) {
|
||
delivery.value = val
|
||
}
|
||
|
||
function closePopupAddress(val: any) {
|
||
addressFlag.value = val
|
||
}
|
||
|
||
function closePopupBuy(val: any) {
|
||
buyMask.value = val
|
||
}
|
||
|
||
function toAssembleBuyNow(order: any) {
|
||
shutMask(4, "PINTUAN", order)
|
||
}
|
||
|
||
function reluchToCart() {
|
||
let obj = {
|
||
from: "product",
|
||
id: productId.value,
|
||
}
|
||
storage.setCartBackbtn(obj)
|
||
uni.switchTab({
|
||
url: "/pages/tabbar/cart/cartList",
|
||
})
|
||
}
|
||
|
||
function cartCount() {
|
||
if (storage.getHasLogin()) {
|
||
API_trade.getCartNum().then((res: any) => {
|
||
nums.value = res.data.result
|
||
})
|
||
}
|
||
}
|
||
|
||
function back() {
|
||
if (getCurrentPages().length == 1) {
|
||
uni.switchTab({
|
||
url: "/pages/tabbar/home/index",
|
||
})
|
||
} else {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
|
||
function getStoreBaseInfoFun(id: any) {
|
||
API_store.getStoreBaseInfo(id).then((res: any) => {
|
||
if (res.data.success) {
|
||
storeDetail.value = res.data.result
|
||
if (storeDetail.value) {
|
||
storeDetail.value.storeLogo = parseGoodsImageUrl(storeDetail.value.storeLogo)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
function deleteGoodsCollectionFun(id: any) {
|
||
API_Members.deleteGoodsCollection(id).then((res: any) => {
|
||
if (res.statusCode == 200) {
|
||
uni.showToast({
|
||
title: "商品已取消收藏!",
|
||
icon: "none",
|
||
})
|
||
favorite.value = !favorite.value
|
||
}
|
||
})
|
||
}
|
||
|
||
function getGoodsCollectionFun(goodsId: any) {
|
||
if (storage.getHasLogin()) {
|
||
API_Members.getGoodsIsCollect("GOODS", goodsId).then((res: any) => {
|
||
favorite.value = res.data.result
|
||
})
|
||
}
|
||
}
|
||
|
||
function getStoreRecommend() {
|
||
getGoodsList({
|
||
pageNumber: 1,
|
||
pageSize: 6,
|
||
storeId: goodsDetail.value.storeId,
|
||
recommend: true,
|
||
}).then((res: any) => {
|
||
recommendList.value = (res.data.result.records || []).map((item: any) => ({
|
||
...item,
|
||
thumbnail: parseGoodsImageUrl(item.thumbnail),
|
||
}))
|
||
})
|
||
}
|
||
|
||
function getOtherLikeGoods() {
|
||
getGoodsList({
|
||
pageNumber: 1,
|
||
pageSize: 10,
|
||
currentGoodsId: goodsDetail.value.id,
|
||
keyword: goodsDetail.value.name
|
||
}).then((res: any) => {
|
||
likeGoodsList.value = (res.data.result.records || []).map((item: any) => ({
|
||
...item,
|
||
thumbnail: parseGoodsImageUrl(item.thumbnail),
|
||
}))
|
||
})
|
||
}
|
||
|
||
function receiveCouponsFun(id: any) {
|
||
API_Members.receiveCoupons(id).then((res: any) => {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: "none",
|
||
})
|
||
})
|
||
}
|
||
|
||
function navigateToStore(store_id: any) {
|
||
uni.navigateTo({
|
||
url: `/pages/product/shopPage?id=` + store_id,
|
||
})
|
||
}
|
||
|
||
function getCoupon(item: any) {
|
||
receiveCouponsFun(item.id)
|
||
}
|
||
|
||
function shutMask(flag: any, buyFlag?: any, type?: any) {
|
||
promotionShow.value = false
|
||
buyMask.value = false
|
||
addressFlag.value = false
|
||
if (flag) {
|
||
switch (flag) {
|
||
case 1:
|
||
promotionShow.value = true
|
||
break
|
||
case 3:
|
||
addressFlag.value = true
|
||
break
|
||
case 4:
|
||
buyMask.value = true
|
||
if (buyFlag == "PINTUAN") {
|
||
if (type.orderSn && popupGoodsRef.value) {
|
||
(popupGoodsRef.value as any).parentOrder = type
|
||
}
|
||
if (popupGoodsRef.value) {
|
||
(popupGoodsRef.value as any).buyType = "PINTUAN"
|
||
}
|
||
}
|
||
if (buyFlag == "buy") {
|
||
if (popupGoodsRef.value) {
|
||
(popupGoodsRef.value as any).buyType = ""
|
||
}
|
||
}
|
||
break
|
||
}
|
||
}
|
||
}
|
||
|
||
function clickFavorite(id: any) {
|
||
if (favorite.value) {
|
||
deleteGoodsCollectionFun(id)
|
||
return false
|
||
}
|
||
API_Members.collectionGoods("GOODS", id).then((res: any) => {
|
||
if (res.data.success) {
|
||
uni.showToast({
|
||
title: "收藏成功!",
|
||
icon: "none",
|
||
})
|
||
}
|
||
})
|
||
favorite.value = !favorite.value
|
||
}
|
||
|
||
function pageScroll(e: any) {
|
||
if (scrollFlag.value) {
|
||
calcSize()
|
||
}
|
||
if (e.detail.scrollTop > 200) {
|
||
headerFlag.value = true
|
||
} else {
|
||
headerFlag.value = false
|
||
}
|
||
if (e.detail.scrollTop < scrollArr.value[0] - 10) {
|
||
scrollId.value = "1"
|
||
}
|
||
if (e.detail.scrollTop > scrollArr.value[1] - 10) {
|
||
scrollId.value = "2"
|
||
}
|
||
if (e.detail.scrollTop > scrollArr.value[2] - 10) {
|
||
scrollId.value = "3"
|
||
}
|
||
if (e.detail.scrollTop > scrollArr.value[3] - 10) {
|
||
scrollId.value = "4"
|
||
}
|
||
}
|
||
|
||
function calcSize() {
|
||
scrollArr.value = []
|
||
let h = 0
|
||
const arr = [
|
||
"main1", "main2", "main3", "main4", "main5",
|
||
"main6", "main7", "main8", "main9", "main10", "main11",
|
||
]
|
||
arr.forEach((item: string) => {
|
||
uni.createSelectorQuery()
|
||
.in(instance?.proxy)
|
||
.select("#" + item)
|
||
.fields({ size: true }, (data: any) => {
|
||
if (item === "main1" || item === "main5" || item === "main9" || item === "main11") {
|
||
scrollArr.value.push(h)
|
||
}
|
||
if (data && data.height) {
|
||
h += data.height
|
||
}
|
||
})
|
||
.exec()
|
||
})
|
||
scrollFlag.value = false
|
||
}
|
||
|
||
function headerTab(id: string) {
|
||
if (scrollFlag.value) {
|
||
calcSize()
|
||
}
|
||
scrollId.value = id
|
||
nextTick(() => {
|
||
tabScrollTop.value = scrollArr.value[parseInt(id) - 1]
|
||
})
|
||
}
|
||
|
||
async function shareChange() {
|
||
enableShare.value = true
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// #ifdef MP-WEIXIN
|
||
@import "./product/mp-goods.scss";
|
||
// #endif
|
||
|
||
@import "./product/style.scss";
|
||
@import "./product/product.scss";
|
||
</style>
|