<template>
|
<!-- 页面主体 -->
|
<view>
|
<u-toast ref="uToast" /><u-no-network></u-no-network>
|
<u-navbar title="服务商品详情" safeAreaInsetTop fixed placeholder>
|
<view class="coreshop-navbar-left-slot" slot="left">
|
<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="home" size="22" @click="goHome"></u-icon>
|
<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
|
<u-icon name="share-fill" size="22" @click="goShare"></u-icon>
|
</view>
|
<view slot="right">
|
</view>
|
</u-navbar>
|
|
<view class="coreshop-full-screen-banner-swiper-box">
|
<u--image width="100%" height="375px" :src="info.thumbnail"></u--image>
|
</view>
|
|
<view class="coreshop-margin-left-16 coreshop-margin-right-16 coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
|
<view class="coreshop-flex coreshop-justify-between coreshop-align-center">
|
<view class="coreshop-text-red coreshop-font-weight-bold">
|
<text class="coreshop-font-16">¥</text>
|
<text class="coreshop-font-24">{{ info.money || '0.00' }}</text>
|
</view>
|
<view class="coreshop-flex-sub coreshop-flex coreshop-text-left coreshop-justify-end coreshop-align-center">
|
<view class="coreshop-text-right coreshop-time-right" v-if="info.openStatus == 1 && info.timestamp > 0">
|
<u-count-down :time="info.timestamp * 1000" :autoStart="true" :millisecond="true" format="DD天HH时mm分ss秒" @change="onChange" @finish="onFinish">
|
<view class="time">
|
<view class="coreshop-font-12">仅剩：</view>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.days }}</text>
|
</view>
|
<text class="time__doc">天</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
|
</view>
|
<text class="time__doc">:</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.minutes }}</text>
|
</view>
|
<text class="time__doc">:</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.seconds }}</text>
|
</view>
|
</view>
|
</u-count-down>
|
</view>
|
<view class="coreshop-text-right coreshop-time-right" v-if="info.openStatus == 2 && info.timestamp > 0">
|
<u-count-down :time="info.timestamp * 1000" :autoStart="true" :millisecond="true" format="DD天HH时mm分ss秒" @change="onChange" @finish="onFinish">
|
<view class="time">
|
<view class="coreshop-font-12">即将开始：</view>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.days }}</text>
|
</view>
|
<text class="time__doc">天</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
|
</view>
|
<text class="time__doc">:</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.minutes }}</text>
|
</view>
|
<text class="time__doc">:</text>
|
<view class="time__custom">
|
<text class="time__custom__item">{{ timeData.seconds }}</text>
|
</view>
|
</view>
|
</u-count-down>
|
</view>
|
<view class="coreshop-font-12" v-if="info.openStatus == 3">已结束</view>
|
</view>
|
</view>
|
<view class="coreshop-margin-top-12 coreshop-multiple-line-clamp">
|
<text class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{ info.title || '' }}</text>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-multiple-line-clamp">
|
<text class="coreshop-font-14 coreshop-text-gray">{{ info.description || '' }}</text>
|
</view>
|
<view class="coreshop-margin-top-16 coreshop-padding-top-16 coreshop-solid-top coreshop-flex coreshop-justify-between coreshop-align-center coreshop-text-gray">
|
<view class="coreshop-font-12">
|
<text>已售：</text>
|
<text class="font-color-orange">{{ goodsInfo.buyCount || '0' }}</text>
|
</view>
|
<view class="coreshop-font-12">
|
<text>单包量：</text>
|
<text>{{ info.ticketNumber }}</text>
|
</view>
|
<view class="coreshop-font-12">
|
<text>剩余：</text>
|
<text>{{info.amount || '0'}}</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="coreshop-margin-left-16 coreshop-margin-right-16 coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
|
<!--服务-->
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row" v-if="info.allowedMemberships.length>0">
|
<view class="coreshop-basis-2">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">会员级别</text>
|
</view>
|
<view class="coreshop-basis-8 coreshop-flex coreshop-align-center">
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-align-center">
|
<view class="coreshop-margin-left-10" v-for="(item, indexChild) in info.allowedMemberships" :key="indexChild">
|
<u-tag :text="item" :plain="true" mode="light" size="mini" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<!--发货-->
|
<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" v-if="info.consumableStores.length>0" />
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-padding-top-10" v-if="info.consumableStores.length>0">
|
<view class="coreshop-basis-2">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">服务网点</text>
|
</view>
|
<view class="coreshop-coreshop-basis-8 coreshop-flex coreshop-align-center">
|
<u-icon name="checkmark-circle" size="14" labelSize="12" color="#e54d42" :label="item" v-for="(item, index) in info.consumableStores" :key="index" class="coreshop-margin-right-10"></u-icon>
|
</view>
|
</view>
|
<!--规格-->
|
<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10">
|
<view class="coreshop-basis-2">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">有效期</text>
|
</view>
|
<view class="coreshop-basis-8 coreshop-flex coreshop-align-center coreshop-font-12">
|
{{info.startTime}} 至 {{info.endTime}}
|
</view>
|
</view>
|
</view>
|
|
<!--参数-->
|
<view class="coreshop-margin-left-16 coreshop-margin-right-16 coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
|
<!--内容区-->
|
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
|
<view class="line-70"></view>
|
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">详情介绍</view>
|
<view class="line-70"></view>
|
</view>
|
<view class="coreshop-margin-top-10 coreshop-bg-white">
|
<u-parse :content="info.contentBody" :selectable="true" v-if="info.contentBody"></u-parse>
|
<!-- 无数据时默认显示 -->
|
<view class="coreshop-emptybox coreshop-padding-10" v-else>
|
<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150" text="详情为空" mode="list"></u-empty>
|
</view>
|
</view>
|
</view>
|
|
<!--常见问题-->
|
<view class="coreshop-margin-left-16 coreshop-margin-right-16 coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
|
<view class="coreshop-margin-bottom-16">
|
<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">常见问题</text>
|
</view>
|
<view class="coreshop-flex coreshop-flex-wrap coreshop-margin-bottom-10 coreshop-flex-direction-row" v-for="(item, index) in serviceDescription.commonQuestion" :key="index">
|
<view class="coreshop-basis-2 coreshop-font-13">
|
{{item.title}}
|
</view>
|
<view class="coreshop-basis-8">
|
<view class="coreshop-font-12">{{item.description}}</view>
|
</view>
|
</view>
|
<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
|
<view class="coreshop-text-center coreshop-text-blue coreshop-padding-top-10 coreshop-font-13" @tap="goArticleList()">查看更多问题</view>
|
</view>
|
|
<!--为您推荐-->
|
<view class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center" v-if="shopRecommendData.length > 0">
|
<view class="line-70"></view>
|
<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
|
<view class="line-70"></view>
|
</view>
|
<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10" v-if="shopRecommendData.length > 0">
|
<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
|
<!-- #ifdef MP-WEIXIN -->
|
<view class="goods" v-for="(item,index) in shopRecommendData" :key="index" slot="slot{{index}}">
|
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
<text class="coreshop-font-14">{{item.name}}</text>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
<view class="coreshop-text-red coreshop-font-weight-bold">
|
<text class="coreshop-font-12">¥</text>
|
<text class="coreshop-font-16">{{item.price}}</text>
|
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
</view>
|
<view>
|
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view>
|
{{ pointShowName}}兑换价:
|
</view>
|
<view class="coreshop-text-red">
|
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
<view>
|
购买赠送:
|
</view>
|
<view class="coreshop-text-red">
|
{{item.points}}{{ pointShowName}}
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- #endif -->
|
<!-- #ifndef MP-WEIXIN -->
|
<template v-slot:default="item">
|
<view class="goods">
|
<view class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
|
<view class="coreshop-title-294 coreshop-multiple-line-clamp">
|
<text class="coreshop-font-14">{{item.name}}</text>
|
</view>
|
<view class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
|
<view class="coreshop-text-red coreshop-font-weight-bold">
|
<text class="coreshop-font-12">¥</text>
|
<text class="coreshop-font-16">{{item.price}}</text>
|
<span class="coreshop-font-xs coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
|
</view>
|
<view>
|
<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top" v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
|
<view>
|
{{ pointShowName}}兑换价:
|
</view>
|
<view class="coreshop-text-red">
|
{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}} 元
|
</view>
|
</view>
|
<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5" v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
|
<view>
|
购买赠送:
|
</view>
|
<view class="coreshop-text-red">
|
{{item.points}}{{ pointShowName}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
<!-- #endif -->
|
</custom-waterfalls-flow>
|
</view>
|
|
<!-- 分享弹窗 -->
|
<view class="coreshop-padding-0">
|
<u-popup mode="bottom" :show="shareBox" ref="share">
|
<!-- #ifdef MP-WEIXIN -->
|
<coreshop-share-wx :shareType='$globalConstVars.shareType.serviceGoods' :objectId="info.id" :shareImg="info.thumbnail" :shareTitle="info.title" :shareContent="info.description" :shareHref="shareHref" @close="closeShare()"></coreshop-share-wx>
|
<!-- #endif -->
|
<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
|
<coreshop-share-app :shareType='$globalConstVars.shareType.serviceGoods' :objectId="info.id" :shareImg="info.thumbnail" :shareTitle="info.title" :shareContent="info.description" :shareHref="shareHref" @close="closeShare()"></coreshop-share-app>
|
<!-- #endif -->
|
</u-popup>
|
<div id="qrCode" ref="qrCodeDiv"></div>
|
</view>
|
|
<!--占位底部距离-->
|
<view class="coreshop-tabbar-height" />
|
<!--底部操作-->
|
<view class="coreshop-good-footer-fixed">
|
<view class="tabbar">
|
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-basis-4">
|
<!-- 客服按钮 -->
|
<!-- #ifdef APP-PLUS-NVUE || APP-PLUS -->
|
<view class="action" @click="showChat()">
|
<button class="noButtonStyle">
|
<u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom"></u-icon>
|
</button>
|
</view>
|
<!-- #endif -->
|
<!-- #ifdef MP-WEIXIN -->
|
<view class="action">
|
<button open-type="contact" bindcontact="showChat" class="noButtonStyle" :send-message-title="goodsInfo.name" :send-message-path="'/pages/goods/goodDetails/goodDetails?id='+goodsInfo.id" :send-message-img="goodsInfo.image" show-message-card="true">
|
<u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom"></u-icon>
|
</button>
|
</view>
|
<!-- #endif -->
|
</view>
|
<view class="btn-group coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-basis-4">
|
<u-button type="success" size="normal" @click="toAddOrder" :disabled="disabled">立刻购买</u-button>
|
</view>
|
</view>
|
</view>
|
|
<!-- 登录提示 -->
|
<coreshop-login-modal></coreshop-login-modal>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex';
|
export default {
|
data() {
|
return {
|
id: 0,
|
info: {},
|
orderType: this.$globalConstVars.paymentType.serviceOrder, // 订单类型
|
shopRecommendData: [], // 其他数据
|
timeData: {},
|
shareUrl: this.$globalConstVars.shareUrl,
|
shareBox: false,
|
serviceDescription: {
|
commonQuestion: [],
|
delivery: [],
|
service: [],
|
},
|
disabled: false,
|
}
|
},
|
onLoad(e) {
|
this.id = e.id;
|
//获取服务商品数据
|
this.getDetail();
|
//获取推荐商品数据
|
this.getGoodsRecommendList();
|
//获取服务说明
|
this.getServiceDescription();
|
},
|
computed: {
|
...mapState({
|
hasLogin: state => state.hasLogin,
|
userInfo: state => state.userInfo,
|
}),
|
hasLogin: {
|
get() {
|
return this.$store.state.hasLogin;
|
},
|
set(val) {
|
this.$store.commit('hasLogin', val);
|
}
|
},
|
userInfo: {
|
get() {
|
return this.$store.state.userInfo;
|
},
|
set(val) {
|
this.$store.commit('userInfo', val);
|
}
|
},
|
pointSwitch() { return this.$store.state.config.pointSwitch },
|
pointShowExchangePrice() { return this.$store.state.config.pointShowExchangePrice },
|
pointDiscountedProportion() { return this.$store.state.config.pointDiscountedProportion },
|
pointExchangeModel() { return this.$store.state.config.pointExchangeModel },
|
pointShowName() { return this.$store.state.config.pointShowName },
|
pointGetModel() { return this.$store.state.config.pointGetModel },
|
pointShowPoint() { return this.$store.state.config.pointShowPoint },
|
},
|
methods: {
|
wapperClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
imageClick(item) {
|
this.goGoodsDetail(item.id)
|
},
|
onChange(e) {
|
this.timeData = e
|
},
|
onFinish(e) {
|
if (this.info.openStatus == 2) {
|
this.info.openStatus == 1
|
this.disabled = false;
|
} else if (this.info.openStatus == 1) {
|
this.info.openStatus == 3
|
this.disabled = true;
|
}
|
},
|
getDetail() {
|
let data = {
|
id: this.id
|
};
|
this.$u.api.getServiceDetail(data).then(res => {
|
if (res.status) {
|
this.info = res.data;
|
if (res.data.openStatus == 3) {
|
this.disabled = true;
|
} else if (res.data.openStatus == 2) {
|
this.disabled = true;
|
}
|
} else {
|
this.$u.toast(res.msg);
|
}
|
});
|
},
|
// 获取推荐商品信息
|
getGoodsRecommendList() {
|
let _this = this;
|
let data = {
|
id: 10
|
}
|
_this.$u.api.getGoodsRecommendList(data).then(res => {
|
if (res.status) {
|
_this.shopRecommendData = _this.$u.randomArray(res.data);
|
} else {
|
_this.$u.toast(res.msg)
|
}
|
});
|
},
|
//获取服务项
|
getServiceDescription() {
|
let _this = this;
|
this.$u.api.getServiceDescription().then(res => {
|
if (res.status == true) {
|
_this.serviceDescription.commonQuestion = res.data.commonQuestion;
|
_this.serviceDescription.delivery = res.data.delivery;
|
_this.serviceDescription.service = res.data.service;
|
|
} else {
|
_this.$refs.uToast.show({
|
message: res.msg, type: 'error', complete: function () {
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
}
|
})
|
},
|
toAddOrder() {
|
//创建一个服务订单并跳转到支付
|
let data = {
|
id: this.id
|
};
|
this.$u.api.addServiceOrder(data).then(res => {
|
if (res.status) {
|
this.$u.route('/pages/payment/pay/pay?orderId=' + res.data + '&type=' + this.orderType + '&serviceId=' + this.id)
|
} else {
|
this.$u.toast(res.msg);
|
}
|
});
|
},
|
// 跳转到h5分享页面
|
goShare() {
|
this.shareBox = true;
|
},
|
closeShare() {
|
this.shareBox = false;
|
},
|
//获取分享URL
|
getShareUrl() {
|
let data = {
|
client: this.$globalConstVars.shareClient.wxMiNiProgram,
|
url: this.$globalConstVars.shareUrl,
|
type: this.$globalConstVars.shareModel.url,
|
page: this.$globalConstVars.shareType.serviceGoods,
|
params: {
|
serviceGoodsId: this.info.id,
|
}
|
};
|
let userToken = this.$db.get('userToken');
|
if (userToken && userToken != '') {
|
data.token = userToken
|
}
|
this.$u.api.share(data).then(res => {
|
this.shareUrl = res.data
|
});
|
},
|
},
|
watch: {
|
info: {
|
handler() {
|
this.getShareUrl();
|
},
|
deep: true
|
}
|
},
|
//分享
|
onShareAppMessage(res) {
|
return {
|
title: this.info.title,
|
imageUrl: this.info.thumbnail,
|
path: this.shareUrl
|
}
|
},
|
onShareTimeline(res) {
|
return {
|
title: this.info.title,
|
imageUrl: this.info.thumbnail,
|
path: this.shareUrl
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import "details.scss";
|
</style>
|
