<template> <view v-show="!isLoading" class="container" :style="appThemeStyle"> <!-- 商品图片轮播 --> <SlideImage v-if="!isLoading" :video="goods.video" :videoCover="goods.videoCover" :images="goods.goods_images" /> <!-- 商品信息 --> <view v-if="!isLoading" class="goods-info m-top20"> <!-- 价格、销量 --> <view class="info-item info-item__top dis-flex flex-x-between flex-y-end"> <view class="block-left dis-flex flex-y-center"> <view class="active-tag"> <text>限时秒杀</text> </view> <!-- 秒杀价 --> <text class="floor-price__samll">¥</text> <text class="floor-price">{{ goods.seckill_price }}</text> <!-- 商品原价 --> <text class="original-price">¥{{ goods.original_price }}</text> </view> <view class="block-right dis-flex"> <!-- 销量 --> <view class="goods-sales"> <text>已抢{{ active.sales_actual }}件</text> </view> </view> </view> <!-- 标题、分享 --> <view class="info-item info-item__name dis-flex flex-y-center"> <view class="goods-name flex-box"> <text class="twoline-hide">{{ goods.goods_name }}</text> </view> <view class="goods-share__line"></view> <view class="goods-share"> <button class="share-btn dis-flex flex-dir-column" @click="onShowShareSheet()"> <text class="share__icon iconfont icon-fenxiang"></text> <text class="f-24">分享</text> </button> </view> </view> <!-- 商品卖点 --> <view v-if="goods.selling_point" class="info-item info-item_selling-point"> <text>{{ goods.selling_point }}</text> </view> <!-- 活动倒计时 --> <view v-if="active.active_status != GoodsStatusEnum.STATE_END.value" class="info-item info-item_status info-item_countdown dis-flex flex-y-center"> <text class="countdown-icon iconfont icon-naozhong"></text> <text>距离秒杀{{ active.active_status == GoodsStatusEnum.STATE_SOON.value ? '开始' : '结束' }}</text> <text class="m-r-10">还剩</text> <count-down :date="active.count_down_time" separator="zh" theme="text" /> </view> <!-- 活动已结束 --> <view v-else class="info-item info-item_status info-item_end"> <text class="countdown-icon iconfont icon-naozhong"></text> <text>秒杀活动已结束,下次记得早点来哦~</text> </view> </view> <!-- 选择商品规格 --> <view v-if="goods.spec_type == 20" class="goods-choice m-top20 b-f" @click="onShowSkuPopup()"> <view class="spec-list"> <view class="flex-box"> <text class="col-8">选择:</text> <text class="spec-name" v-for="(item, index) in goods.specList" :key="index">{{ item.spec_name }}</text> </view> <view class="f-26 col-9 t-r"> <text class="iconfont icon-arrow-right"></text> </view> </view> </view> <!-- 商品服务 --> <!-- <Service v-if="!isLoading" :goods-id="goods.goods_id" /> --> <!-- 商品SKU弹窗 --> <SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :active="active" :goods="goods" :noStockText="noStockText" /> <!-- 商品评价 --> <Comment v-if="!isLoading" :goods-id="goods.goods_id" :limit="2" /> <!-- 商品描述 --> <view v-if="!isLoading" class="goods-content m-top20"> <view class="item-title b-f"> <text>商品描述</text> </view> <view v-if="goods.content != ''" class="goods-content__detail b-f"> <mp-html :content="goods.content" /> </view> </view> <!-- 底部选项卡 --> <view class="footer-fixed"> <view class="footer-container"> <!-- 导航图标 --> <view class="foo-item-fast"> <!-- 首页 --> <view class="fast-item fast-item--home" @click="onTargetHome"> <view class="fast-icon"> <text class="iconfont icon-shouye"></text> </view> <view class="fast-text"> <text>首页</text> </view> </view> <!-- 客服 --> <customer-btn v-if="isShowCustomerBtn"> <view class="fast-item"> <view class="fast-icon"> <text class="iconfont icon-kefu1"></text> </view> <view class="fast-text"> <text>客服</text> </view> </view> </customer-btn> <!-- 购物车 (客服按钮不显示时) --> <view v-if="!isShowCustomerBtn" class="fast-item fast-item--cart" @click="onTargetCart"> <view v-if="cartTotal > 0" class="fast-badge fast-badge--fixed">{{ cartTotal > 99 ? '99+' : cartTotal }} </view> <view class="fast-icon"> <text class="iconfont icon-gouwuche"></text> </view> <view class="fast-text"> <text>购物车</text> </view> </view> </view> <!-- 操作按钮 --> <view class="foo-item-btn"> <view class="btn-wrapper"> <view v-if="active.active_status == GoodsStatusEnum.STATE_BEGIN.value" class="btn-item btn--main" @click="onShowSkuPopup()"> <text>立即购买</text> </view> <button v-else class="btn-item btn--gray"> <text>{{ active.active_status == GoodsStatusEnum.STATE_SOON.value ? '活动未开始' : '活动已结束' }}</text> </button> </view> </view> </view> </view> <!-- 分享菜单 --> <share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image" :posterApiCall="posterApiCall" :posterApiParam="{ activeTimeId, sharpGoodsId }" /> </view> </template> <script> import WxofficialMixin from '@/core/mixins/wxofficial' import { getSceneData } from '@/core/app' import ShareSheet from '@/components/share-sheet' import CustomerBtn from '@/components/customer-btn' import SkuPopup from './components/SkuPopup' import SlideImage from '../../goods/components/SlideImage' import Comment from '../../goods/components/Comment' // import Service from '../../goods/components/Service' import CountDown from '@/components/countdown' import * as SharpGoodsApi from '@/api/sharp/goods' import * as CartApi from '@/api/cart' import SettingModel from '@/common/model/Setting' import { ActiveStatusEnum, GoodsStatusEnum } from '@/common/enum/sharp' export default { components: { ShareSheet, CustomerBtn, // Shortcut, SlideImage, SkuPopup, Comment, // Service, CountDown }, mixins: [WxofficialMixin], data() { return { // 正在加载 isLoading: true, // 枚举类 ActiveStatusEnum, GoodsStatusEnum, // 显示/隐藏SKU弹窗 showSkuPopup: false, // 模式 1:都显示 2:只显示购物车 3:只显示立即购买 skuMode: 3, // 活动未开始时的文字 noStockText: '该商品已抢完', // 显示/隐藏分享菜单 showShareSheet: false, // 获取商品海报图api方法 posterApiCall: SharpGoodsApi.poster, // 当前秒杀场次ID activeTimeId: null, // 当前秒杀商品ID sharpGoodsId: null, // 秒杀活动详情 active: {}, // 秒杀商品详情 goods: {}, // 购物车总数量 cartTotal: 0, // 是否显示在线客服按钮 isShowCustomerBtn: false } }, /** * 生命周期函数--监听页面加载 */ async onLoad(options) { // 记录query参数 this.onRecordQuery(options) // 加载页面数据 this.onRefreshPage() // 是否显示在线客服按钮 this.isShowCustomerBtn = await SettingModel.isShowCustomerBtn() }, methods: { // 记录query参数 onRecordQuery(query) { const scene = getSceneData(query) this.activeTimeId = query.activeTimeId ? parseInt(query.activeTimeId) : parseInt(scene.aid) this.sharpGoodsId = query.sharpGoodsId ? parseInt(query.sharpGoodsId) : parseInt(scene.gid) }, // 刷新页面数据 onRefreshPage() { const app = this app.isLoading = true Promise.all([app.getActiveDetail(), app.getCartTotal()]) .then(() => { // 设置活动状态 const activeStatus = app.active.active_status if (activeStatus != GoodsStatusEnum.STATE_BEGIN.value) { app.skuMode = 4 app.noStockText = activeStatus == GoodsStatusEnum.STATE_SOON.value ? '活动未开始' : '活动已结束' } // 设置微信公众号链接分享卡片内容 app.setWxofficialShareData() }) .finally(() => app.isLoading = false) }, // 获取秒杀活动详情 getActiveDetail() { const app = this return new Promise((resolve, reject) => { SharpGoodsApi.detail(app.activeTimeId, app.sharpGoodsId) .then(result => { app.active = result.data.active app.goods = result.data.goods resolve(result) }) .catch(reject) }) }, // 获取购物车总数量 getCartTotal() { const app = this return new Promise((resolve, reject) => { CartApi.total() .then(result => { app.cartTotal = result.data.cartTotal resolve(result) }) .catch(reject) }) }, /** * 显示/隐藏SKU弹窗 */ onShowSkuPopup() { this.showSkuPopup = !this.showSkuPopup }, // 显示隐藏分享菜单 onShowShareSheet() { this.showShareSheet = !this.showShareSheet }, // 跳转到首页 onTargetHome(e) { this.$navTo('pages/index/index') }, // 跳转到购物车页 onTargetCart() { this.$navTo('pages/cart/index') }, // 设置微信公众号链接分享卡片内容 setWxofficialShareData() { const { goods } = this this.updateShareCardData({ title: goods.goods_name, desc: goods.selling_point, imgUrl: goods.goods_image }) }, }, /** * 分享当前页面 */ onShareAppMessage() { // 构建页面参数 const app = this const params = app.$getShareUrlParams({ activeTimeId: app.activeTimeId, sharpGoodsId: app.sharpGoodsId }) return { title: app.goods.goods_name, path: `/pages/sharp/goods/index?${params}` } }, /** * 分享到朋友圈 * 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta) * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html */ onShareTimeline() { // 构建页面参数 const app = this const params = app.$getShareUrlParams({ activeTimeId: app.activeTimeId, sharpGoodsId: app.sharpGoodsId }) return { title: app.goods.goods_name, path: `/pages/sharp/goods/index?${params}` } }, } </script> <style> page { background: #fafafa; } </style> <style lang="scss" scoped> @import "./style.scss"; </style>