You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
574 lines
23 KiB
574 lines
23 KiB
<template>
|
|
<gui-page v-if="!isLoading">
|
|
<view slot="gBody">
|
|
<view style="position: fixed;top:0;z-index: 99;height: 80rpx;overflow: hidden;width: 100%;">
|
|
<view
|
|
style="position: fixed;z-index: 98;width: 100%;background-color: #fff;padding: 10rpx 0;"
|
|
:style="{opacity : !headerClass? 0 : 1}">
|
|
<gui-switch-navigation
|
|
:items="[{id:1,name:'商品'},{id:2,name:'购买须知'},{id:4,name:'详情'},{id:5,name:'推荐'}]"
|
|
@change="navchange" :currentIndex="navIndex" textAlign="center" :isCenter="true"
|
|
activeLineBg="linear-gradient(to right, #9E1A91, #4D0868)" activeDirection="center" :size="0"
|
|
:margin="10" padding="30rpx"
|
|
:activeLineClass="['gui-nav-scale','gui-gtbg-zhuse']"></gui-switch-navigation>
|
|
</view>
|
|
</view>
|
|
<view style="position: relative;background-color: #fff;">
|
|
<!-- 页面主体区域 01 -->
|
|
<view class="mainitems">
|
|
<view style="position: relative;">
|
|
<view class="a" style="width: 750rpx;height: 562rpx; background-color: #fff; z-index: 1;"
|
|
id="slide">
|
|
<SlideImage :video="goods.video" :videoCover="goods.videoCover"
|
|
:images="goods.goods_images"/>
|
|
|
|
<button @click="onShowShareSheet()"
|
|
style="z-index: 998;position: absolute;top: 20rpx;right: 20rpx;padding: 10rpx 20rpx;background:linear-gradient(to right, #9E1A91, #4D0868);font-size: 23rpx;color: #fff;border-radius: 30rpx; line-height: 30rpx;">
|
|
分享
|
|
</button>
|
|
</view>
|
|
|
|
<view class="b boxbb"
|
|
style="position: absolute; top: 580rpx; left: 0; width: 100%; z-index: 1;padding: 0 20rpx;min-height: 140rpx;">
|
|
<view style="background-color: #fff;padding: 20rpx;border-radius: 10rpx;" id="goodsWrap">
|
|
<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
|
|
<view>
|
|
<text
|
|
style="font-size: 32rpx;font-weight: bold;color: #b53190;">
|
|
￥{{ goods.goods_price_min }}
|
|
</text>
|
|
<text v-if="goods.line_price_min > 0" class="original-price"
|
|
style="margin-left: 10rpx;">￥{{ goods.line_price_min }}
|
|
</text>
|
|
</view>
|
|
<view style="color: #9e9e9e;font-size: 23rpx;">已售{{ goods.goods_sales }}件</view>
|
|
</view>
|
|
<view style="font-size: 20rpx;">
|
|
<text></text>
|
|
未预约未核销随时退
|
|
</view>
|
|
<view style="margin: 10rpx 0;font-weight: bold;">
|
|
{{ goods.goods_name }}
|
|
</view>
|
|
</view>
|
|
|
|
<view style="margin-top: 20rpx;" v-if="goods.shop" id="shopWrap">
|
|
<view style="background-color: #fff;padding: 20rpx;border-radius: 10rpx;"
|
|
@click="handleTargetExtract(goods.shop.shop_id)">
|
|
<view class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
|
|
<view style="font-size: 28rpx;font-weight: bold;">适用门店</view>
|
|
<view style="color: #9e9e9e;font-size: 24rpx;font-weight: bold;">联系商家</view>
|
|
</view>
|
|
<view style="margin:20rpx 0;display: flex;font-size: 24rpx;">
|
|
<view>
|
|
<image :src="goods.shop.logo_url"
|
|
style="width: 80rpx;height: 80rpx;border-radius: 50%;margin-right:20rpx;">
|
|
</image>
|
|
</view>
|
|
<view style="line-height: 40rpx;">
|
|
<view>{{ goods.shop.shop_name }}</view>
|
|
<view style="color: #9e9e9e;">
|
|
<text class="gui-icons "
|
|
style="margin-right: 10rpx;">
|
|
</text>
|
|
营业时间
|
|
{{ goods.shop.shop_hours }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="color: #9e9e9e;">
|
|
|
|
<u-icon name="map"></u-icon>
|
|
<text>{{ goods.shop.full_address }}</text>
|
|
<u-icon name="arrow-right"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view class="mainitems" style="margin-top: 20rpx;">
|
|
<view style="padding: 20rpx;border-radius: 10rpx;background-color: #fff;">
|
|
<view id="notice"
|
|
class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between">
|
|
<view style="font-size: 30rpx;font-weight: bold;padding-bottom: 30rpx;">购买须知
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="xz-item">
|
|
<view style="font-weight: bold;">抢购日期</view>
|
|
<view class="xz-content">即日 至 {{ goods.become_time }}</view>
|
|
</view>
|
|
<view class="xz-item">
|
|
<view style="font-weight: bold;">使用日期</view>
|
|
<view class="xz-content">即日 至 {{ goods.use_time }}</view>
|
|
</view>
|
|
<view class="xz-item">
|
|
<view style="font-weight: bold;">可用时间</view>
|
|
<view class="xz-content">{{ goods.times.name }}</view>
|
|
</view>
|
|
<view class="xz-item">
|
|
<view style="font-weight: bold;">使用方式</view>
|
|
<view class="xz-content">{{ goods.uses.name }}</view>
|
|
</view>
|
|
|
|
<view class="xz-item">
|
|
<view style="font-weight: bold;">使用说明</view>
|
|
<mp-html :content="goods.contents"/>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<view style="height: 20rpx;"></view>
|
|
</view>
|
|
<view class="mainitems">
|
|
<view style="border-radius: 10rpx;background-color: #fff;">
|
|
<Comment v-if="!isLoading" :goods-id="goodsId" :limit="2"/>
|
|
</view>
|
|
<view style="height: 20rpx;"></view>
|
|
</view>
|
|
<view class="mainitems">
|
|
<view style="padding: 20rpx;border-radius: 10rpx;background-color: #fff;">
|
|
<view id="detail"
|
|
class="gui-flex gui-row gui-nowrap gui-align-items-center gui-space-between"
|
|
style="margin-bottom: 20rpx;">
|
|
<view style="font-size: 30rpx;font-weight: bold;">图文详情</view>
|
|
</view>
|
|
<mp-html :content="goods.content"/>
|
|
<view style="margin-top: 20rpx;text-align: center;line-height: 50rpx;"
|
|
v-if="store && store.wxh">
|
|
<view style="color: #A51480 ;font-weight: bold;">
|
|
吉媒集团客服微信号：{{ store.wxh }}
|
|
</view>
|
|
<view v-if="store.wxmc" style="font-weight: bold;">{{ store.wxmc }}</view>
|
|
<view v-if="store.gzsj">工作时间：{{ store.gzsj }}</view>
|
|
<view>更多订单详情咨询</view>
|
|
<view>可添加吉媒婚恋专属客服微信</view>
|
|
</view>
|
|
</view>
|
|
<view style="height: 20rpx;"></view>
|
|
</view>
|
|
<view class="mainitems" id="recommended">
|
|
<recommended/>
|
|
<view style="height: 120rpx;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 分享菜单 -->
|
|
<share-sheet v-model="showShareSheet" :shareTitle="goods.goods_name" :shareImageUrl="goods.goods_image"
|
|
:posterApiCall="posterApiCall" :posterApiParam="{ goodsId }"/>
|
|
<view style="height: 130rpx;"></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>
|
|
<!-- 客服 (仅微信小程序端显示) -->
|
|
<!-- <button class="btn-normal" @click="zaixiankefu">
|
|
<view class="fast-item" style="width: 160rpx;">
|
|
<view class="fast-icon">
|
|
<text class="iconfont icon-kefu1"></text>
|
|
</view>
|
|
<view class="fast-text">
|
|
<text>在线客服助手</text>
|
|
</view>
|
|
</view>
|
|
</button> -->
|
|
<button class="btn-normal" @click="open1">
|
|
<view class="fast-item" style="width: 160rpx;">
|
|
<view class="fast-icon">
|
|
<text class="iconfont icon-kefu1"></text>
|
|
</view>
|
|
<view class="fast-text">
|
|
<text>专属客服通道</text>
|
|
</view>
|
|
</view>
|
|
</button>
|
|
</view>
|
|
<!-- 操作按钮 -->
|
|
<view class="foo-item-btn">
|
|
<view class="btn-wrapper">
|
|
<view class="btn-item" @click="onShowSkuPopup(3)"
|
|
style="background: linear-gradient(to bottom, #90178b, #590b6e);color: #fff;">
|
|
<text>立即抢购</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<gui-popup ref="guipopup1">
|
|
<view class="gui-relative gui-box-shadow gui-img-in">
|
|
<gui-image :src="goods.service" :width="580"></gui-image>
|
|
<!-- 关闭按钮 -->
|
|
<text class="gui-block-text demo-close gui-icons gui-color-white gui-absolute-rt"
|
|
@tap.stop="close1">
|
|
</text>
|
|
</view>
|
|
</gui-popup>
|
|
<!-- 商品SKU弹窗 -->
|
|
<SkuPopup v-if="!isLoading" v-model="showSkuPopup" :skuMode="skuMode" :goods="goods" @addCart="onAddCart"/>
|
|
</view>
|
|
<shortcut bottom="120rpx"/>
|
|
</gui-page>
|
|
</template>
|
|
<script>
|
|
var graceJS = require('@/GraceUI5/js/grace.js');
|
|
import {
|
|
getSceneData
|
|
} from '@/core/app'
|
|
import * as SettingApi from '@/api/setting'
|
|
import * as GoodsApi from '@/api/goods'
|
|
import * as CartApi from '@/api/cart'
|
|
import Recommended from '@/components/recommended'
|
|
import ShareSheet from '@/components/share-sheet'
|
|
import SlideImage from './components/SlideImage'
|
|
import SkuPopup from './components/SkuPopup'
|
|
import Comment from './components/Comment'
|
|
import Service from './components/Service'
|
|
|
|
export default {
|
|
components: {
|
|
Recommended,
|
|
ShareSheet,
|
|
SlideImage,
|
|
SkuPopup,
|
|
Comment,
|
|
Service
|
|
},
|
|
data() {
|
|
return {
|
|
// 正在加载
|
|
isLoading: true,
|
|
// 当前商品ID
|
|
goodsId: null,
|
|
// 商品详情
|
|
goods: {},
|
|
// 购物车总数量
|
|
cartTotal: 0,
|
|
// 显示/隐藏SKU弹窗
|
|
showSkuPopup: false,
|
|
// 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
|
skuMode: 1,
|
|
// 显示/隐藏分享菜单
|
|
showShareSheet: false,
|
|
// 获取商品海报图api方法
|
|
posterApiCall: GoodsApi.poster,
|
|
// 导航元素
|
|
navItems: [{
|
|
id: 1,
|
|
name: '导航标签 1'
|
|
}, {
|
|
id: 2,
|
|
name: '导航标签 2'
|
|
}, {
|
|
id: 3,
|
|
name: '导航标签 3'
|
|
}, {
|
|
id: 4,
|
|
name: '导航标签 4'
|
|
}],
|
|
// 激活导航的索引
|
|
navIndex: 0,
|
|
// 页面滚动延迟 timer
|
|
timer: null,
|
|
// 窗口高度
|
|
winHeight: 100,
|
|
// 滚动条位置
|
|
pageScrollTop: 0,
|
|
// 是否为点击滚动
|
|
isTapScroll: false,
|
|
headerClass: false,
|
|
store: '',
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
// 记录query参数
|
|
this.onRecordQuery(options)
|
|
// 加载页面数据
|
|
this.onRefreshPage()
|
|
this.getSetting()
|
|
},
|
|
|
|
onPageScroll: function (e) {
|
|
this.pageScrollTop = e.scrollTop;
|
|
// 页面滚动时检查页面元素滚动位置
|
|
// 从而决定对应激活的导航
|
|
if (e.scrollTop > 10) {
|
|
// 此处 custom-header-bg 来自 custom.scss
|
|
this.headerClass = true;
|
|
} else {
|
|
this.headerClass = false;
|
|
}
|
|
if (this.isTapScroll) {
|
|
return;
|
|
}
|
|
if (this.timer != null) {
|
|
clearTimeout(this.timer);
|
|
}
|
|
graceJS.selectAll('.mainitems', (items) => {
|
|
for (let i = 0; i < items.length; i++) {
|
|
if (items[i].top >= -50 && items[i].top <= 50) {
|
|
this.navIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
zaixiankefu() {
|
|
window.location.href = 'https://work.weixin.qq.com/kfid/kfc6206617a5de54b2d'; // 跳转到相对路径下的网页
|
|
},
|
|
open1: function () {
|
|
|
|
if (this.goods.service) {
|
|
this.$refs.guipopup1.open();
|
|
}
|
|
},
|
|
close1: function () {
|
|
this.$refs.guipopup1.close();
|
|
},
|
|
getSetting() {
|
|
let _this = this
|
|
SettingApi.data()
|
|
.then(result => {
|
|
_this.store = result.data.setting.store
|
|
})
|
|
},
|
|
handleTargetExtract(shopId) {
|
|
this.$navTo('pages/shop/detail', {
|
|
shopId
|
|
})
|
|
},
|
|
fanhui() {
|
|
uni.navigateBack()
|
|
},
|
|
navchange(index) {
|
|
this.navIndex = index;
|
|
// 调整滚动条
|
|
this.isTapScroll = true;
|
|
var needTop = 0;
|
|
// graceJS.selectAll('.mainitems',async (items) => {
|
|
// for (let i = 0; i < this.navIndex; i++) {
|
|
// console.log(items[i])
|
|
// if (i > 0) needTop += items[i].height;
|
|
// }
|
|
// if (this.navIndex > 0) {
|
|
// needTop += uni.upx2px(562)
|
|
// needTop += await this.getWrapHeight('goodsWrap')
|
|
// needTop += await this.getWrapHeight('shopWrap')
|
|
// }
|
|
// needTop -= this.pageScrollTop
|
|
// uni.pageScrollTo({
|
|
// scrollTop: needTop,
|
|
// duration: 300
|
|
// });
|
|
// setTimeout(() => {
|
|
// this.isTapScroll = false;
|
|
// }, 300);
|
|
// });
|
|
let which = 'slide'
|
|
switch (index) {
|
|
case 1 : {
|
|
which = 'notice'
|
|
}
|
|
break;
|
|
case 2 : {
|
|
which = 'detail'
|
|
}
|
|
break;
|
|
case 3 : {
|
|
which = 'recommended'
|
|
}
|
|
break;
|
|
}
|
|
let id = "#" + which
|
|
graceJS.select(id, item => {
|
|
uni.pageScrollTo({
|
|
scrollTop: item.top + this.pageScrollTop - uni.upx2px(80) - 20,
|
|
duration: 300
|
|
});
|
|
})
|
|
// document.querySelector(id).scrollIntoView({
|
|
// behavior: "smooth", // 定义过渡动画 instant立刻跳过去 smooth平滑过渡过去
|
|
// block: "start", // 定义垂直滚动方向的对齐 start顶部（尽可能） center中间（尽可能） end（底部）
|
|
// inline: "center",
|
|
// offset: {top: uni.upx2px(200)}
|
|
// });
|
|
},
|
|
|
|
// 记录query参数
|
|
onRecordQuery(query) {
|
|
const scene = getSceneData(query)
|
|
this.goodsId = query.goodsId ? parseInt(query.goodsId) : parseInt(scene.gid)
|
|
},
|
|
|
|
// 刷新页面数据
|
|
onRefreshPage() {
|
|
const app = this
|
|
app.isLoading = true
|
|
Promise.all([app.getGoodsDetail(), app.getCartTotal()])
|
|
.finally(() => app.isLoading = false)
|
|
},
|
|
|
|
// 获取商品信息
|
|
getGoodsDetail() {
|
|
const app = this
|
|
return new Promise((resolve, reject) => {
|
|
GoodsApi.detail(app.goodsId)
|
|
.then(result => {
|
|
app.goods = result.data.detail
|
|
|
|
|
|
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)
|
|
})
|
|
},
|
|
|
|
// 更新购物车数量
|
|
onAddCart(total) {
|
|
this.cartTotal = total
|
|
},
|
|
|
|
/**
|
|
* 显示/隐藏SKU弹窗
|
|
* @param {skuMode} 模式 1:都显示 2:只显示购物车 3:只显示立即购买
|
|
*/
|
|
onShowSkuPopup(skuMode = 1) {
|
|
this.skuMode = skuMode
|
|
this.showSkuPopup = !this.showSkuPopup
|
|
},
|
|
|
|
// 显示隐藏分享菜单
|
|
onShowShareSheet() {
|
|
this.showShareSheet = !this.showShareSheet
|
|
},
|
|
|
|
// 跳转到首页
|
|
onTargetHome(e) {
|
|
uni.reLaunch({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
|
|
// 跳转到购物车页
|
|
onTargetCart() {
|
|
this.$navTo('pages/cart/index')
|
|
},
|
|
getWrapHeight(id) {
|
|
return new Promise(resolve => {
|
|
graceJS.select(`#${id}`, item => {
|
|
resolve(item.height)
|
|
})
|
|
})
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 分享当前页面
|
|
*/
|
|
onShareAppMessage() {
|
|
const app = this
|
|
// 构建页面参数
|
|
const params = app.$getShareUrlParams({
|
|
goodsId: app.goodsId,
|
|
})
|
|
return {
|
|
title: app.goods.goods_name,
|
|
path: `/pages/goods/detail?${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({
|
|
goodsId: app.goodsId,
|
|
})
|
|
return {
|
|
title: app.goods.goods_name,
|
|
path: `/pages/goods/detail?${params}`
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f4f4f4;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.xz-item {
|
|
padding-top: 10rpx;
|
|
}
|
|
|
|
.xz-content {
|
|
font-size: 24rpx;
|
|
color: #c8c8c8;
|
|
padding: 10rpx 0;
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.demo-close {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
opacity: 0.88;
|
|
text-align: center;
|
|
font-size: 58rpx;
|
|
}
|
|
|
|
.demo-lr {
|
|
flex: 1;
|
|
height: 200rpx;
|
|
}
|
|
|
|
.demo-lr-items {
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@import "./detail.scss";
|
|
</style>
|