|
|
<template>
|
|
|
<view>
|
|
|
<view class="u-skeleton">
|
|
|
<view class="service-show u-skeleton-rect">
|
|
|
<video v-if="showFlag === 0" :src="detail.video_file" play-btn-position="center"></video>
|
|
|
<swiper class="service-show-swiper" :indicator-dots="true" v-if="showFlag === 1">
|
|
|
<swiper-item v-for="(img,index) in detail.picture" :key="index">
|
|
|
<u-image height="100%" width="100%" :src="img.picture" mode="aspectFit"
|
|
|
@load="$u.debounce(init,100)">
|
|
|
</u-image>
|
|
|
</swiper-item>
|
|
|
</swiper>
|
|
|
|
|
|
<view class="service-show-btn">
|
|
|
<view class="service-show-btn-img" @click="clickFlag(1)">
|
|
|
<image src="../../static/pic.png">
|
|
|
</image>
|
|
|
<view class="service-show-btn-img__num">{{detail.picture.length}}</view>
|
|
|
</view>
|
|
|
<view class="service-show-btn-video" v-if="detail.video_file" @click="clickFlag(0)">
|
|
|
<image src="../../static/video.png">
|
|
|
</image>
|
|
|
<view class="service-show-btn-img__num">1</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-baseinfo">
|
|
|
<view class="service-baseinfo-top">
|
|
|
<view class="service-baseinfo-top-left u-skeleton-circle">
|
|
|
<u-image :src="detail.cover_picture" height="122rpx" width="122rpx" shape="circle"
|
|
|
@load="$u.debounce(init,100)">
|
|
|
</u-image>
|
|
|
</view>
|
|
|
<view class="service-baseinfo-top-right">
|
|
|
<view class="service-baseinfo-top-right__name u-skeleton-fillet">{{detail.name}}</view>
|
|
|
<view class="service-baseinfo-top-right__sub u-skeleton-fillet" v-if="detail.subheading">
|
|
|
{{detail.subheading}}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-baseinfo-center">
|
|
|
<view class="service-baseinfo-center-label">
|
|
|
<view class="service-baseinfo-center-label__item"
|
|
|
v-for="(item1,index) in featuredLabelSplit(detail.featured_label)" :key="index">
|
|
|
{{item1}}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-baseinfo-center-address" @click="toMap">
|
|
|
<view class="service-baseinfo-center-address__img">
|
|
|
<u-image src="/packages/packageCarecenter/static/position.png" height="26rpx" width="21rpx">
|
|
|
</u-image>
|
|
|
</view>
|
|
|
<view class="service-baseinfo-center-address__text u-skeleton-rect">
|
|
|
{{detail.address || '无'}}
|
|
|
</view>
|
|
|
<view class="service-baseinfo-center-address__icon">
|
|
|
<u-icon name="arrow-right" size="26" color="#9C9C9C"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-baseinfo-center-time">
|
|
|
<view class="service-baseinfo-center-time__img">
|
|
|
<u-image src="/packages/packageCarecenter/static/clock.png" height="23rpx" width="23rpx">
|
|
|
</u-image>
|
|
|
</view>
|
|
|
<view class="service-baseinfo-center-time__text u-skeleton-rect">
|
|
|
{{detail.work_time || '无'}}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-baseinfo-center-service u-skeleton-fillet" @click="showqr"
|
|
|
style="position: relative;">
|
|
|
<view class="service-baseinfo-center-service__pic">
|
|
|
<u-image src="/packages/packageCarecenter/static/wechat.png" height="43rpx" width="50rpx">
|
|
|
</u-image>
|
|
|
</view>
|
|
|
<view class="service-baseinfo-center-service__text">
|
|
|
1V1咨询帮忙砍价
|
|
|
</view>
|
|
|
<view class="service-baseinfo-center-service__icon">
|
|
|
<u-icon name="arrow-right" size="26" color="#fff" label="联系优孕月子福利官" label-pos="left"
|
|
|
label-color="#fff"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-baseinfo-center-store u-skeleton-fillet">
|
|
|
|
|
|
<video :src="detail.video_file" v-if="detail.video_file" style="width: 100%;"
|
|
|
play-btn-position="center"></video>
|
|
|
<u-image :src="detail.cover_picture" v-else mode="aspectFill" height="397" width="100%"
|
|
|
border-radius="30" @load="$u.debounce(init,100)">
|
|
|
</u-image>
|
|
|
|
|
|
<view class="service-baseinfo-center-store-tag">
|
|
|
<image src="/packages/packageCarecenter/static/huangguan.png"></image>
|
|
|
<view class="service-baseinfo-center-store-tag-text">
|
|
|
孕育邦探店
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view v-show="!barFixed">
|
|
|
<view class="service-bar">
|
|
|
<view v-for="(item,index) in bar" :key="index" class="service-bar-item"
|
|
|
:class="{'service-bar-item-active':index === barIndex}" @click="barClick(item,index)">
|
|
|
{{item.label}}
|
|
|
<u-image :lazy-load="false" class="service-bar-item-icon"
|
|
|
src="/packages/packageCarecenter/static/img_qiehuan.png" width="68" height="24"
|
|
|
v-show="index === barIndex"></u-image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-show="barFixed">
|
|
|
<view class="service-bar service-bar-fixed">
|
|
|
<view v-for="(item,index) in bar" :key="index" class="service-bar-item"
|
|
|
:class="{'service-bar-item-active':index === barIndex}" @click="barClick(item,index)">
|
|
|
{{item.label}}
|
|
|
<u-image :lazy-load="false" class="service-bar-item-icon"
|
|
|
src="/packages/packageCarecenter/static/img_qiehuan.png" width="68" height="24"
|
|
|
v-show="index === barIndex"></u-image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-product">
|
|
|
<view class="service-product-title">
|
|
|
<text>本店商品</text>
|
|
|
<view class="service-product-title-more">
|
|
|
<text>更多</text>
|
|
|
<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-product-detail">
|
|
|
<view v-for="(item,index) in detail.product" :key="index"
|
|
|
class="service-product-detail-item" @click="toProduct(item.id)">
|
|
|
<u-image :src="item.cover_picture" width="330" height="360" border-radius="20rpx 20rpx 0 0 "
|
|
|
@load="$u.debounce(init,500)">
|
|
|
</u-image>
|
|
|
|
|
|
<view class="service-product-detail-item-name">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
|
|
|
<view class="service-product-detail-item-label">
|
|
|
<view class="service-product-detail-item-label-item"
|
|
|
v-for="(label,index1) in featuredLabelSplit(item.featured_label)" :key="index1">
|
|
|
{{label}}
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-product-detail-item-price">
|
|
|
<span>￥</span>
|
|
|
<span>{{item.price}}</span>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<!-- <view class="service-activity">
|
|
|
<view class="service-activity-title">
|
|
|
<text>本店活动</text>
|
|
|
<view class="service-activity-title-more">
|
|
|
<text>更多</text>
|
|
|
<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view style="display: flex;justify-content: center;">
|
|
|
<u-image src="/packages/packageCarecenter/static/banner.png" width="660" height="300"
|
|
|
border-radius="30"></u-image>
|
|
|
</view>
|
|
|
</view> -->
|
|
|
<view class="service-info">
|
|
|
<view v-if="detail.online_customer_service" class="onlineService">
|
|
|
<view style="font-size: 36rpx;padding: 20rpx 0;">长按识别二维码</view>
|
|
|
|
|
|
|
|
|
<u-image width="100%" height="1300rpx" :src="detail.online_customer_service.wechat_code"
|
|
|
v-if="detail.online_customer_service.wechat_code"></u-image>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
<u-popup v-model="showQR" mode="center" width="90%">
|
|
|
<view style="padding: 10px;">
|
|
|
<u-image width="100%" height="600rpx" :src="detail.online_customer_service.company_wechat_code"
|
|
|
v-if="detail.online_customer_service.company_wechat_code"></u-image>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
|
<view class="service-info">
|
|
|
<view class="service-info-title">
|
|
|
<text>商户简介</text>
|
|
|
<view class="service-info-title-more">
|
|
|
<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-info-content">
|
|
|
<view v-for="(item,index) in detail.merchant_item" :key="index"
|
|
|
class="service-info-content-item">
|
|
|
<view class="service-info-content-item-name">{{item.name}}</view>
|
|
|
<view class="service-info-content-item-content">{{item.content}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="service-imageinfo">
|
|
|
<u-parse :html="detail.content"></u-parse>
|
|
|
</view>
|
|
|
|
|
|
<view class="bottom-btn">
|
|
|
<u-button :custom-style="btnStyle" @click="showqr" shape="circle">联系优孕月子福利官</u-button>
|
|
|
</view>
|
|
|
<view class="footer">
|
|
|
<view class="menuLink">
|
|
|
<navigator url="../../../../pages/home/home" open-type="switchTab">
|
|
|
<view class="menuCol">
|
|
|
<text class="iconfont icon-home"></text>
|
|
|
<text>首页</text>
|
|
|
</view>
|
|
|
</navigator>
|
|
|
<view class="menuCol" @click="shareOpen">
|
|
|
<text class="iconfont icon-Share"></text>
|
|
|
<text>分享</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="buyBtn" @click="showqr" >联系优孕月子福利官</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
|
|
|
<uni-popup ref="shareCode" :mask-click="true" type="bottom" class="shareBox">
|
|
|
<view class="codeOuter">
|
|
|
<view class="shareCon" @click="shareClose">
|
|
|
<canvas style="width:80%;margin-left:10%;position: absolute;"
|
|
|
:style="{ height:(shareHeight*scare) + 'px', marginTop:(cropperH-(shareHeight*scare))/2+'rpx'}"
|
|
|
canvas-id="firstCanvas" id="firstCanvas"></canvas>
|
|
|
<!-- <image class="shareBg" mode="widthFix" src="../../static/bg_haibao@2x.png"></image> -->
|
|
|
<!-- <image class="code" src="../../static/300_qr.png"></image> -->
|
|
|
</view>
|
|
|
<view class="shareBott" :style="{display: shareBtnDisplay}">
|
|
|
<button class="shareCol" @click="shareClose" open-type="share"
|
|
|
style="border-radius:0;flex:1;">发给朋友</button>
|
|
|
<button class="shareCol" @click="save" style="border-radius:0;flex:1;">保存相册</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
let sysInfo = uni.getSystemInfoSync();
|
|
|
let SCREEN_WIDTH = sysInfo.screenWidth
|
|
|
let SCREEN_HEIGHT = sysInfo.screenHeight;
|
|
|
let WindowHeight = sysInfo.windowHeight;
|
|
|
let windowWidth = sysInfo.windowWidth;
|
|
|
import {
|
|
|
weixin
|
|
|
} from '@/utils/weixin.js'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
promotion_id:"",
|
|
|
// 分享的参数
|
|
|
cropperW: SCREEN_WIDTH,
|
|
|
cropperH: SCREEN_HEIGHT,
|
|
|
packages: [],
|
|
|
sharePath: "",
|
|
|
scare: 1,
|
|
|
shareHeight: 500,
|
|
|
imgAvatar: "",
|
|
|
poster: "",
|
|
|
|
|
|
loading: true,
|
|
|
showQR: false,
|
|
|
showFlag: 1,
|
|
|
barIndex: 0,
|
|
|
barTop: 667,
|
|
|
barFixed: false,
|
|
|
bar: [{
|
|
|
label: '本店商品',
|
|
|
height: 0,
|
|
|
class: '.service-product'
|
|
|
},
|
|
|
// {
|
|
|
// label: '本店活动',
|
|
|
// height: 0,
|
|
|
// class: '.service-activity'
|
|
|
// },
|
|
|
{
|
|
|
label: '商户简介',
|
|
|
height: 0,
|
|
|
class: '.service-info'
|
|
|
}, {
|
|
|
label: '图文详情',
|
|
|
height: 0,
|
|
|
class: '.service-imageinfo'
|
|
|
}
|
|
|
],
|
|
|
barHeight: 0,
|
|
|
detail: {},
|
|
|
btnStyle: {
|
|
|
width: '100%',
|
|
|
color: '#fff',
|
|
|
background: '#FF578A',
|
|
|
},
|
|
|
user_info: {}
|
|
|
}
|
|
|
},
|
|
|
onShareAppMessage() {
|
|
|
return {
|
|
|
title: this.detail.name,
|
|
|
path: "packages/packageCarecenter/pages/commonService/serviceDetail?id=" + this.detail.id + "&promotion_id=" +
|
|
|
this
|
|
|
.user_info.id,
|
|
|
imageUrl: this.img
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
init() {
|
|
|
let barHeight;
|
|
|
const query = uni.createSelectorQuery().in(this);
|
|
|
query.select(".service-bar").boundingClientRect(res => {
|
|
|
this.barTop = res.top
|
|
|
barHeight = res.height
|
|
|
}).exec();
|
|
|
for (let i = 0; i < this.bar.length; i++) {
|
|
|
query.select(this.bar[i].class).boundingClientRect(res => {
|
|
|
this.bar[i].height = res.top - (barHeight - 20)
|
|
|
}).exec();
|
|
|
}
|
|
|
},
|
|
|
showqr(){
|
|
|
this.showQR = true
|
|
|
},
|
|
|
toMap() {
|
|
|
this.$u.throttle(() => {
|
|
|
uni.openLocation({
|
|
|
latitude: Number(this.detail.latitude),
|
|
|
longitude: Number(this.detail.longitude),
|
|
|
name: this.detail.name
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
toProduct(id) {
|
|
|
this.$u.throttle(() => {
|
|
|
uni.navigateTo({
|
|
|
url: `/packages/packageCarecenter/pages/commonService/productDetail?id=${id}`
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
barClick(item, index) {
|
|
|
this.barIndex = index
|
|
|
|
|
|
uni.pageScrollTo({
|
|
|
scrollTop: item.height
|
|
|
})
|
|
|
},
|
|
|
clickFlag(type){
|
|
|
this.showFlag = type
|
|
|
},
|
|
|
featuredLabelSplit(res) {
|
|
|
if (res) {
|
|
|
return res.split(",")
|
|
|
}
|
|
|
return []
|
|
|
},
|
|
|
|
|
|
getServiceDetail(id) {
|
|
|
weixin.request({
|
|
|
newUrl: true,
|
|
|
api: '/api/member/get-common-service-item',
|
|
|
data: {
|
|
|
id
|
|
|
},
|
|
|
utilSuccess: (res) => {
|
|
|
this.detail = res
|
|
|
this.loading = false
|
|
|
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
getPoster: function() {
|
|
|
var that = this;
|
|
|
uni.getImageInfo({
|
|
|
src: that.detail.cover_picture, // 头像
|
|
|
success: res => {
|
|
|
that.poster = res.path;
|
|
|
that.getAvatar();
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
getAvatar: function() {
|
|
|
let userProfile = uni.getStorageSync('user_profile');
|
|
|
|
|
|
if (!weixin.isNull(userProfile)) {
|
|
|
console.log(userProfile.avatarUrl)
|
|
|
console.log(this.imgAvatar)
|
|
|
uni.getImageInfo({
|
|
|
src: userProfile.avatarUrl, // 头像
|
|
|
success: rlogo => {
|
|
|
this.imgAvatar = rlogo.path;
|
|
|
console.log(this.imgAvatar)
|
|
|
this.draw();
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
this.imgAvatar = "../../static/avatar.jpg";
|
|
|
console.log(this.imgAvatar)
|
|
|
this.draw();
|
|
|
}
|
|
|
},
|
|
|
shareOpen() {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
});
|
|
|
var that = this;
|
|
|
this.$refs.shareCode.open();
|
|
|
this.getPoster();
|
|
|
},
|
|
|
draw: function() {
|
|
|
var that = this;
|
|
|
uni.request({
|
|
|
url: this.baseUrl + '/api/member/get-wxa-qrcode',
|
|
|
method: 'GET',
|
|
|
data: {
|
|
|
path: 'packages/packageCarecenter/pages/commonService/serviceDetail',
|
|
|
scene: 'id=' + this.detail.id + '&promotion_id=' + this.user_info.id
|
|
|
},
|
|
|
success: r => {
|
|
|
if (r.data.status === 1) {
|
|
|
uni.getImageInfo({
|
|
|
src: this.baseUrl + r.data.data, // 二维码
|
|
|
success: res => {
|
|
|
var ctx = uni.createCanvasContext('firstCanvas')
|
|
|
|
|
|
|
|
|
var w = SCREEN_WIDTH * 0.8;
|
|
|
var h = this.shareHeight * this.scare;
|
|
|
// ctx.fillStyle = '#fff';
|
|
|
// ctx.fillRect(0, 0, 214, 342);
|
|
|
console.log(1)
|
|
|
ctx.drawImage('../../static/bg_haibao@2x.jpg', 0, 0,
|
|
|
w, h
|
|
|
); //(SCREEN_HEIGHT - 50 - SCREEN_WIDTH * 0.8 * 1.65) /2, SCREEN_WIDTH * 0.8, SCREEN_WIDTH * 0.8 * 1.5);
|
|
|
|
|
|
ctx.drawImage('../../static/bg_haibao1.png', 20, 30 + 40,
|
|
|
w -
|
|
|
40, h - 100);
|
|
|
/* SCREEN_WIDTH *
|
|
|
0.15, (SCREEN_HEIGHT - SCREEN_WIDTH * 0.6 * 1.65) /
|
|
|
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.6 * 1.5); */
|
|
|
|
|
|
ctx.drawImage(this.poster, 20, 30 + 40,
|
|
|
w -
|
|
|
40, (h - 60 - 60) * 0.5);
|
|
|
/* SCREEN_WIDTH * 0.15, (SCREEN_HEIGHT - SCREEN_WIDTH *
|
|
|
0.6 * 1.65) /
|
|
|
2, SCREEN_WIDTH * 0.695, SCREEN_WIDTH * 0.695 / 1.6); */
|
|
|
|
|
|
ctx.font = "22rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#fff";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
ctx.fillText("优孕课堂福利专享", 20, 50);
|
|
|
|
|
|
ctx.font = "16rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#000";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
ctx.fillText("专享福利", 40, (h + 50) * 0.5 + 20);
|
|
|
|
|
|
ctx.font = "14rpx bold";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#3377b7";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
|
|
|
let detail = this.detail
|
|
|
ctx.fillText(detail.name, 40, (h + 50) * 0.5 + 20 + 30);
|
|
|
|
|
|
|
|
|
let user_info = uni.getStorageSync("user_info_yunyubang");
|
|
|
|
|
|
let userProfile = uni.getStorageSync('user_profile');
|
|
|
var img = this.imgAvatar;
|
|
|
uni.getImageInfo({
|
|
|
src: userProfile.avatarUrl, // 头像
|
|
|
success: rlogo => {
|
|
|
img = rlogo.path;
|
|
|
|
|
|
}
|
|
|
});
|
|
|
that.circleImg(ctx,
|
|
|
img,
|
|
|
40, h - 60 - w * 0.15,
|
|
|
w * 0.15 / 2);
|
|
|
|
|
|
ctx.font = "12rpx normal";
|
|
|
// 设置颜色
|
|
|
ctx.fillStyle = "#000";
|
|
|
// 绘制文字（参数：要写的字，x坐标，y坐标）
|
|
|
if (!weixin.isNull(user_info.name))
|
|
|
ctx.fillText(user_info.name,
|
|
|
40, h - 40);
|
|
|
else
|
|
|
ctx.fillText("",
|
|
|
40, h - 40);
|
|
|
|
|
|
|
|
|
this.circleImg(ctx, res.path, w - 40 - w * 0.2, h - 40 -
|
|
|
w *
|
|
|
0.2, w * 0.2 / 2);
|
|
|
|
|
|
console.log(2)
|
|
|
ctx.draw(),
|
|
|
// r: 半径
|
|
|
setTimeout(() => {
|
|
|
uni.canvasToTempFilePath({
|
|
|
canvasId: 'firstCanvas',
|
|
|
fileType: 'jpg',
|
|
|
success: (res) => {
|
|
|
|
|
|
|
|
|
this.shareBtnDisplay =
|
|
|
'flex'
|
|
|
uni.hideLoading();
|
|
|
this.img = this.detail.cover_picture;
|
|
|
this.sharePath = res
|
|
|
.tempFilePath;
|
|
|
console.log(3)
|
|
|
},
|
|
|
})
|
|
|
}, 100)
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
uni.hideLoading()
|
|
|
this.$refs.shareCode.close()
|
|
|
this.alert(r.data.msg)
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
circleImg: function(ctx, img, x, y, r) {
|
|
|
ctx.save()
|
|
|
var d = 2 * r;
|
|
|
var cx = x + r;
|
|
|
var cy = y + r;
|
|
|
ctx.arc(cx, cy, r, 0, 2 * Math.PI);
|
|
|
|
|
|
ctx.clip();
|
|
|
ctx.drawImage(img, x, y, d, d);
|
|
|
ctx.restore();
|
|
|
},
|
|
|
shareClose() {
|
|
|
this.$refs.shareCode.close()
|
|
|
},
|
|
|
open() {
|
|
|
this.$refs.popup.open('top')
|
|
|
|
|
|
},
|
|
|
close() {
|
|
|
this.$refs.popup.close()
|
|
|
},
|
|
|
//保存图片时，h5端不能直接保存，只能通过预览长按保存
|
|
|
save() {
|
|
|
|
|
|
let _this = this;
|
|
|
// #ifdef H5
|
|
|
uni.previewImage({
|
|
|
urls: [_this.sharePath]
|
|
|
})
|
|
|
// #endif
|
|
|
// #ifdef APP-PLUS||MP-WEIXIN
|
|
|
uni.saveImageToPhotosAlbum({
|
|
|
filePath: _this.sharePath,
|
|
|
success: function() {
|
|
|
_this.$refs.shareCode.close()
|
|
|
_this.alert('保存成功')
|
|
|
}
|
|
|
});
|
|
|
// #endif
|
|
|
},
|
|
|
},
|
|
|
computed: {
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
this.init()
|
|
|
})
|
|
|
},
|
|
|
onShow() {
|
|
|
|
|
|
var that = this;
|
|
|
weixin.getOpenidInfo(info => {
|
|
|
that.user_info = info.user_info;
|
|
|
|
|
|
|
|
|
|
|
|
}, true);
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
let id = options.id;
|
|
|
const scene = decodeURIComponent(options.scene);
|
|
|
console.log(scene)
|
|
|
if (!weixin.isNull(scene)) {
|
|
|
id = weixin.getParam(scene, "id");
|
|
|
this.promotion_id = weixin.getParam(scene, "promotion_id");
|
|
|
}
|
|
|
this.getServiceDetail(options.id)
|
|
|
},
|
|
|
onPageScroll(e) {
|
|
|
this.$u.throttle(() => {
|
|
|
if (e.scrollTop > this.barTop) {
|
|
|
this.barFixed = true
|
|
|
} else {
|
|
|
this.barFixed = false
|
|
|
}
|
|
|
}, 50)
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.shareBox {
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
}
|
|
|
|
|
|
.codeOuter {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
// padding-top: 13vh;
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.shareCon {
|
|
|
// width: 500rpx;
|
|
|
// margin: 0 auto;
|
|
|
//position: absolute;
|
|
|
//top: 45%;
|
|
|
//left: 50%;
|
|
|
// transform: translate(-50%, -50%);
|
|
|
|
|
|
.code {
|
|
|
width: 300rpx;
|
|
|
height: 300rpx;
|
|
|
display: block;
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
margin-left: -150rpx;
|
|
|
top: 50%;
|
|
|
margin-top: -150rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.shareBott {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
|
|
|
.shareCol {
|
|
|
width: 50%;
|
|
|
height: 100rpx;
|
|
|
text-align: center;
|
|
|
line-height: 100rpx;
|
|
|
font-size: 30rpx;
|
|
|
background: #FF578A;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
.shareCol:first-child {
|
|
|
background: #e8e8e8;
|
|
|
color: #666;
|
|
|
}
|
|
|
}
|
|
|
.onlineService {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 0 28rpx 10rpx 28rpx;
|
|
|
|
|
|
&>image {
|
|
|
width: 100%;
|
|
|
height: 1300rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-show {
|
|
|
width: 100%;
|
|
|
height: 360rpx;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
&>video {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
&-swiper {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
&-btn {
|
|
|
display: flex;
|
|
|
|
|
|
z-index: 3;
|
|
|
position: absolute;
|
|
|
bottom: 30rpx;
|
|
|
right: 33rpx;
|
|
|
|
|
|
&-img {
|
|
|
color: #fff;
|
|
|
height: 47rpx;
|
|
|
background: #252526;
|
|
|
border-radius: 16rpx;
|
|
|
opacity: 0.3;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
margin-right: 14rpx;
|
|
|
|
|
|
&>image {
|
|
|
width: 24rpx;
|
|
|
height: 21rpx;
|
|
|
|
|
|
padding-left: 20rpx;
|
|
|
padding-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
&__num {
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFF0;
|
|
|
font-weight: 400;
|
|
|
|
|
|
padding-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-video {
|
|
|
color: #fff;
|
|
|
height: 47rpx;
|
|
|
background: #252526;
|
|
|
border-radius: 16rpx;
|
|
|
opacity: 0.3;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
&>image {
|
|
|
width: 24rpx;
|
|
|
height: 21rpx;
|
|
|
|
|
|
padding-left: 20rpx;
|
|
|
padding-right: 10rpx;
|
|
|
}
|
|
|
|
|
|
&__num {
|
|
|
font-size: 24rpx;
|
|
|
color: #FFFFF0;
|
|
|
font-weight: 400;
|
|
|
|
|
|
padding-right: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-baseinfo {
|
|
|
width: 100%;
|
|
|
background: linear-gradient(90deg, #555455 0%, #1F1D1D 100%);
|
|
|
|
|
|
padding-bottom: 38rpx;
|
|
|
|
|
|
&-top {
|
|
|
display: flex;
|
|
|
|
|
|
padding-top: 38rpx;
|
|
|
|
|
|
&-left {
|
|
|
width: 122rpx;
|
|
|
height: 122rpx;
|
|
|
border-radius: 100%;
|
|
|
|
|
|
margin-left: 31rpx;
|
|
|
}
|
|
|
|
|
|
&-right {
|
|
|
|
|
|
margin-left: 21rpx;
|
|
|
|
|
|
&__name {
|
|
|
font-size: 30rpx;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
font-weight: 400;
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
padding-top: 17rpx;
|
|
|
}
|
|
|
|
|
|
&__sub {
|
|
|
display: inline-block;
|
|
|
background: #FF578A;
|
|
|
border-radius: 12rpx;
|
|
|
color: #fff;
|
|
|
|
|
|
padding: 6rpx 11rpx;
|
|
|
margin-top: 9rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-center {
|
|
|
|
|
|
margin-top: 28rpx;
|
|
|
|
|
|
&-label {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
align-items: center;
|
|
|
align-content: center;
|
|
|
|
|
|
margin-left: 22rpx;
|
|
|
|
|
|
&__item {
|
|
|
color: #fff;
|
|
|
counter-reset: #fff;
|
|
|
border-radius: 12rpx;
|
|
|
border: 2rpx solid #FF578A;
|
|
|
|
|
|
padding: 10rpx 20rpx;
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-address {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 34rpx;
|
|
|
padding: 0 36rpx;
|
|
|
|
|
|
&__img {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
}
|
|
|
|
|
|
&__text {
|
|
|
flex: 1;
|
|
|
color: #fff;
|
|
|
|
|
|
margin: 0 16rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
&-time {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 15rpx;
|
|
|
padding: 0 36rpx;
|
|
|
|
|
|
&__img {
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
&__text {
|
|
|
flex: 1;
|
|
|
color: #fff;
|
|
|
|
|
|
margin: 0 16rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-service {
|
|
|
background: #FF578A;
|
|
|
border-radius: 23rpx;
|
|
|
display: flex;
|
|
|
|
|
|
padding: 26rpx 15rpx 26rpx 30rpx;
|
|
|
margin: 24rpx 33rpx 0 33rpx;
|
|
|
|
|
|
&__text {
|
|
|
font-weight: 400;
|
|
|
color: #FFFFFF;
|
|
|
flex: 1;
|
|
|
|
|
|
margin-left: 10rpx;
|
|
|
}
|
|
|
|
|
|
&__icon {}
|
|
|
}
|
|
|
|
|
|
&-store {
|
|
|
|
|
|
position: relative;
|
|
|
margin-top: 30rpx;
|
|
|
padding: 0 33rpx;
|
|
|
|
|
|
&-tag {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
background: linear-gradient(90deg, #FFFFFF 0%, #FFF0F0 100%);
|
|
|
border-bottom-left-radius: 20rpx;
|
|
|
border-bottom-right-radius: 20rpx;
|
|
|
|
|
|
padding: 9rpx 18rpx;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 76rpx;
|
|
|
|
|
|
&>image {
|
|
|
width: 25rpx;
|
|
|
height: 25rpx;
|
|
|
}
|
|
|
|
|
|
&-text {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #FF578A;
|
|
|
|
|
|
padding-left: 11rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-bar {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-evenly;
|
|
|
border-top-left-radius: 20rpx;
|
|
|
border-top-right-radius: 20rpx;
|
|
|
background: #fff;
|
|
|
|
|
|
margin-top: -20rpx;
|
|
|
|
|
|
&-fixed {
|
|
|
border-bottom: 1rpx solid rgba(180, 180, 180, 0.4);
|
|
|
|
|
|
z-index: 4;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
}
|
|
|
|
|
|
&-item {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 400;
|
|
|
color: #999999;
|
|
|
|
|
|
padding: 40rpx 0 23rpx 0;
|
|
|
position: relative;
|
|
|
|
|
|
&-active {
|
|
|
|
|
|
color: #333333;
|
|
|
}
|
|
|
|
|
|
&-icon {
|
|
|
|
|
|
transform: translateX(-50%);
|
|
|
position: absolute;
|
|
|
top: 72rpx;
|
|
|
left: 50%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.btnKefu {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
background-color: #ffffff00;
|
|
|
}
|
|
|
|
|
|
.service-product {
|
|
|
|
|
|
&-title {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
|
|
|
padding-top: 37rpx;
|
|
|
|
|
|
&>text {
|
|
|
color: #333333;
|
|
|
font-size: 34rpx;
|
|
|
|
|
|
padding-left: 32rpx;
|
|
|
}
|
|
|
|
|
|
&-more {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
color: #333333;
|
|
|
|
|
|
padding-right: 47rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-detail {
|
|
|
flex-shrink: 0;
|
|
|
flex-basis: 330rpx;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-top: 36rpx;
|
|
|
padding: 0 32rpx;
|
|
|
|
|
|
&-item {
|
|
|
border-radius: 20rpx;
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
padding-bottom: 21rpx;
|
|
|
margin-bottom:20rpx;
|
|
|
width:330rpx;
|
|
|
|
|
|
&-name {
|
|
|
color: #333333;
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
padding: 0 24rpx;
|
|
|
padding-top: 21rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
&-label {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
padding: 0 24rpx;
|
|
|
margin-top: 13rpx;
|
|
|
|
|
|
|
|
|
&-item {
|
|
|
background: rgba(255, 87, 138, 0.1);
|
|
|
border-radius: 12rpx;
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #FF578A;
|
|
|
|
|
|
margin-right: 10rpx;
|
|
|
padding: 6rpx 15rpx;
|
|
|
margin-bottom:5rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-price {
|
|
|
font-weight: 400;
|
|
|
color: #FF578A;
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
padding: 0 24rpx;
|
|
|
padding-top: 13rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-activity {
|
|
|
background: #fff;
|
|
|
|
|
|
margin-top: 34rpx;
|
|
|
padding-bottom: 83rpx;
|
|
|
|
|
|
&-title {
|
|
|
@extend .service-product-title;
|
|
|
padding-bottom: 33rpx;
|
|
|
|
|
|
&-more {
|
|
|
@extend .service-product-title-more;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-info {
|
|
|
background-color: #fff;
|
|
|
|
|
|
margin-top: 30rpx;
|
|
|
|
|
|
&-title {
|
|
|
@extend .service-product-title;
|
|
|
padding-bottom: 29rpx;
|
|
|
|
|
|
&-more {
|
|
|
@extend .service-product-title-more;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
|
|
|
padding: 0 34rpx 20rpx 40rpx;
|
|
|
|
|
|
&-item {
|
|
|
display: flex;
|
|
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
|
|
&-name {
|
|
|
font-size: 24rpx;
|
|
|
font-weight: 400;
|
|
|
color: #999999;
|
|
|
flex-basis: 120rpx;
|
|
|
}
|
|
|
|
|
|
&-content {
|
|
|
flex: 1;
|
|
|
font-weight: 400;
|
|
|
color: #333333;
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
margin-left: 18rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.service-imageinfo {
|
|
|
width: 100%;
|
|
|
background: #fff;
|
|
|
|
|
|
padding: 0 28rpx 10rpx 28rpx;
|
|
|
}
|
|
|
|
|
|
.bottom-btn {
|
|
|
height: 100rpx;
|
|
|
background: #fff;
|
|
|
border-top: 1rpx solid rgba(180, 180, 180, 0.4);
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
}
|
|
|
|
|
|
::v-deep .u-image__image {
|
|
|
display: block !important;
|
|
|
}
|
|
|
.footer {
|
|
|
width: 100%;
|
|
|
height: 112rpx;
|
|
|
background: #FFFFFF;
|
|
|
box-shadow: 0px -1rpx 0px 0px #DEDEDE;
|
|
|
padding: 0 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
|
|
|
.menuLink {
|
|
|
display: flex;
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
color: #333;
|
|
|
|
|
|
.menuCol {
|
|
|
margin: 0 30rpx;
|
|
|
font-size: 20rpx;
|
|
|
|
|
|
text {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.iconfont {
|
|
|
font-size: 36rpx;
|
|
|
margin-bottom: 6rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.buyBtn {
|
|
|
//width: 220rpx;
|
|
|
padding: 0px 40rpx;
|
|
|
height: 72rpx;
|
|
|
background: linear-gradient(90deg, #FF7E95 0%, #FF447B 100%);
|
|
|
border-radius: 36rpx;
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 500;
|
|
|
text-align: center;
|
|
|
line-height: 72rpx;
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</style>
|
