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.
533 lines
15 KiB
533 lines
15 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%;padding-left: 30rpx;background-color: #fff;padding: 10rpx 0;"
|
|
:style="{opacity : !headerClass? 0 : 1}">
|
|
<gui-switch-navigation
|
|
:items="[{id:1,name:'商品'},{id:2,name:'购买须知'},{id:3,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;">
|
|
<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;">
|
|
<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}}{{goods.goods_name.length}}
|
|
</view>
|
|
</view>
|
|
|
|
<view style="margin-top: 20rpx;" v-if="goods.shop">
|
|
<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
|
|
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
|
|
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">
|
|
<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) {
|
|
// 页面滚动时检查页面元素滚动位置
|
|
// 从而决定对应激活的导航
|
|
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);
|
|
}
|
|
this.timer = setTimeout(() => {
|
|
graceJS.selectAll('.mainitems', (items) => {
|
|
for (let i = 0; i < items.length; i++) {
|
|
if (items[i].top >= 0) {
|
|
this.navIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}, 200);
|
|
},
|
|
|
|
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: function(index) {
|
|
this.navIndex = index;
|
|
// 调整滚动条
|
|
this.isTapScroll = true;
|
|
var needTop = 0;
|
|
graceJS.selectAll('.mainitems', (items) => {
|
|
for (let i = 0; i < this.navIndex + 1; i++) {
|
|
if (i > 0) {
|
|
needTop += items[i].height;
|
|
}
|
|
}
|
|
uni.pageScrollTo({
|
|
scrollTop: needTop,
|
|
duration: 300
|
|
});
|
|
setTimeout(() => {
|
|
this.isTapScroll = false;
|
|
}, 300);
|
|
});
|
|
},
|
|
|
|
// 记录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')
|
|
},
|
|
|
|
},
|
|
|
|
/**
|
|
* 分享当前页面
|
|
*/
|
|
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>
|