308 lines
7.3 KiB
Vue
308 lines
7.3 KiB
Vue
<template>
|
|
<view class="pages-home rel" v-if="detail.id">
|
|
<!-- #ifdef H5 -->
|
|
<view @tap="$util.goUrl({url:`/pages/service`,openType:`reLaunch`})" class="abs"
|
|
:class="[{'back-user-ios': configInfo.isIos},{'back-user-android': !configInfo.isIos}]"
|
|
style="margin-top:25rpx;z-index: 1;" v-if="options.pid">
|
|
<view class="iconshouye iconfont"></view>
|
|
<view class="back-user_text">回到首页</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
<banner :list="detail.imgs" :margin="0" :autoplay="true" :height="562" :indicatorActiveColor="primaryColor">
|
|
</banner>
|
|
<view class="fill-base pd-lg">
|
|
<view class="f-sm-title c-title text-bold">{{detail.title}}</view>
|
|
<view class="f-caption c-caption mt-sm" v-if="detail.material_price*1>0">物料费 ¥{{detail.material_price}}
|
|
</view>
|
|
<view class="flex-y-baseline f-desc c-caption mt-sm">
|
|
<view class="flex-y-baseline flex-1">
|
|
<view class="flex-y-baseline f-icontext c-orange text-bold mr-sm">
|
|
<b class="f-paragraph c-orange">￥</b>
|
|
<view class="f-big-title">
|
|
{{detail.price}}
|
|
</view>
|
|
</view>
|
|
<view class="text-delete mr-md" v-if="detail.init_price">¥{{detail.init_price}}</view>
|
|
<view class="flex-y-baseline flex-1">
|
|
<i class="iconfont icon-shijian mr-sm" :style="{ color: primaryColor }"></i>
|
|
{{detail.time_long}}分钟
|
|
</view>
|
|
<view>超{{detail.total_sale}}人选择</view>
|
|
</view>
|
|
</view>
|
|
<view class="time-label flex-y-center f-paragraph mt-lg">
|
|
<view class="near-time flex-center c-base pl-lg pr-lg pt-md pb-md rel" >
|
|
<view class="bg abs" :style="{background:primaryColor}"></view>
|
|
<image mode="aspectFill" class="tp-img mr-lg" src="/static/img/axg.png"></image>
|
|
<view @tap.stop="toJump('ftList')" v-for="(item) in ftList" class="ft">
|
|
<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
|
|
<span class="c-title ml-sm">{{ item.text }}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="space-md"></view>
|
|
<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
|
|
width="33.3%" height="100rpx"></tab>
|
|
<view class="space-md"></view>
|
|
<view class="fill-base pd-lg f-paragraph c-desc">
|
|
<view class="c-title text-bold mb-md">{{tabList[activeIndex].title}}</view>
|
|
<parser :html="detail[rule[activeIndex]]" @linkpress="linkpress" show-with-animation lazy-load>加载中...
|
|
</parser>
|
|
</view>
|
|
|
|
<view class="space-max-footer"></view>
|
|
<fix-bottom-button
|
|
@confirm="$util.goUrl({url:`/user/pages/choose-technician?id=${options.id}&store_id=${options.store_id}`})"
|
|
:text="[{type:'confirm',text:'选择'+ $t('action.attendantName'),isAuth:true}]" bgColor="#fff">
|
|
</fix-bottom-button>
|
|
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view @tap.stop="toAppShare"
|
|
class="common-share-btn detail fix flex-center flex-column c-base box-shadow radius"
|
|
:style="{background:primaryColor}" v-if="userInfo.id">
|
|
<i class="iconfont iconweixin"></i>
|
|
<view class="f-icontext">分享</view>
|
|
</view>
|
|
<view class="space-max-footer"></view>
|
|
<!-- #endif -->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
mapMutations
|
|
} from "vuex"
|
|
import siteInfo from '@/siteinfo.js';
|
|
import parser from "@/components/jyf-Parser/index"
|
|
export default {
|
|
components: {
|
|
parser
|
|
},
|
|
data() {
|
|
return {
|
|
options: {},
|
|
activeIndex: 0,
|
|
tabList: [{
|
|
title: '项目介绍',
|
|
id: 0
|
|
}, {
|
|
title: '禁忌说明',
|
|
id: 1,
|
|
}, {
|
|
title: '下单须知',
|
|
id: 2
|
|
}],
|
|
ftList: [{
|
|
icon: 'icon-kzj',
|
|
text: '实名认证'
|
|
}, {
|
|
icon: 'icon-kpk',
|
|
text: '爽约包赔'
|
|
}, {
|
|
icon: 'icon-kzz',
|
|
text: '资质证书'
|
|
}],
|
|
rule: {
|
|
0: 'introduce',
|
|
1: 'explain',
|
|
2: 'notice'
|
|
},
|
|
detail: {},
|
|
}
|
|
},
|
|
computed: mapState({
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
userInfo: state => state.user.userInfo,
|
|
isGzhLogin: state => state.user.isGzhLogin,
|
|
}),
|
|
onLoad(options) {
|
|
this.$util.showLoading()
|
|
this.options = options
|
|
this.initIndex()
|
|
},
|
|
onPullDownRefresh() {
|
|
// #ifndef APP-PLUS
|
|
uni.showNavigationBarLoading()
|
|
// #endif
|
|
this.initRefresh();
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onShareAppMessage(e) {
|
|
let {
|
|
id: pid = 0
|
|
} = this.userInfo
|
|
let {
|
|
id,
|
|
title,
|
|
cover: imageUrl
|
|
} = this.detail
|
|
let path = `/user/pages/detail?pid=${pid}&id=${id}`
|
|
this.$util.log(path)
|
|
return {
|
|
title,
|
|
imageUrl,
|
|
path,
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['getConfigInfo', 'getUserInfo']),
|
|
...mapMutations([]),
|
|
async initIndex(refresh = false) {
|
|
let {
|
|
pid = 0
|
|
} = this.options
|
|
let {
|
|
isGzhLogin
|
|
} = this
|
|
let {
|
|
id: uid = 0
|
|
} = this.userInfo
|
|
if (pid && !uid) {
|
|
// #ifdef H5
|
|
if (isGzhLogin) {
|
|
setTimeout(() => {
|
|
this.getUserInfo()
|
|
}, 1000)
|
|
} else {
|
|
this.getUserInfo()
|
|
}
|
|
// #endif
|
|
// #ifndef H5
|
|
await this.getUserInfo()
|
|
// #endif
|
|
}
|
|
if (!this.configInfo.id || refresh) {
|
|
await this.getConfigInfo()
|
|
}
|
|
await this.getDetail()
|
|
// #ifdef H5
|
|
if (!refresh && this.$jweixin.isWechat()) {
|
|
await this.$jweixin.initJssdk();
|
|
setTimeout(() => {
|
|
this.toAppShare()
|
|
}, 1200)
|
|
}
|
|
// #endif
|
|
this.$util.setNavigationBarColor({
|
|
bg: this.primaryColor
|
|
})
|
|
},
|
|
initRefresh() {
|
|
this.initIndex(true)
|
|
},
|
|
toAppShare() {
|
|
let {
|
|
id: pid = 0
|
|
} = this.userInfo
|
|
let {
|
|
id,
|
|
title,
|
|
cover: imageUrl
|
|
} = this.detail
|
|
let summary = ''
|
|
|
|
let {
|
|
siteroot
|
|
} = siteInfo
|
|
let url = siteroot.split('/index.php')[0]
|
|
let href = `${url}/h5/#/user/pages/detail?id=${id}&pid=${pid}`
|
|
|
|
// #ifdef H5
|
|
this.$jweixin.wxReady(() => {
|
|
this.$jweixin.showOptionMenu()
|
|
this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
|
|
this.$jweixin.shareTimelineMessage(title, href, imageUrl)
|
|
})
|
|
// #endif
|
|
// #ifdef APP-PLUS
|
|
uni.share({
|
|
provider: "weixin",
|
|
scene: 'WXSceneSession',
|
|
type: 0,
|
|
href,
|
|
title,
|
|
summary,
|
|
imageUrl,
|
|
success: function(res) {
|
|
console.log("success:" + JSON.stringify(res));
|
|
},
|
|
fail: function(err) {
|
|
console.log("fail:" + JSON.stringify(err));
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
async getDetail() {
|
|
let {
|
|
id
|
|
} = this.options
|
|
this.detail = await this.$api.service.serviceInfo({
|
|
id
|
|
});
|
|
this.$util.hideAll()
|
|
},
|
|
handerTabChange(index) {
|
|
this.activeIndex = index;
|
|
},
|
|
linkpress(res) {
|
|
// #ifdef APP-PLUS
|
|
this.$util.goUrl({
|
|
url: res.href,
|
|
openType: 'web'
|
|
})
|
|
// #endif
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
.pages-home {
|
|
.list-item {
|
|
.item-btn {
|
|
width: 129rpx;
|
|
height: 54rpx;
|
|
}
|
|
}
|
|
|
|
.time-label {
|
|
.near-text {
|
|
width: 100%;
|
|
height: 33rpx;
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
.near-time {
|
|
width: 100%;
|
|
height: 86rpx;
|
|
|
|
.bg {
|
|
opacity: 0.1;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.ft{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.tp-img{
|
|
width: 183px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
}
|
|
</style> |