daoji_h5/user/pages/detail.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>