XEH-miniProgram/pages/index/product/index.vue

<template>
	<view class="page-wrap">
		<swiper class="swiper-panel" circular indicator-dots indicator-color="#fff" indicator-active-color="#00bcd2">
			<swiper-item>
				<image class="img" src="@/static/img_banner_1.jpg" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="img" src="@/static/img_banner_2.jpg" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="product-panel">
			<view class="name">{{ productInfo.name }}</view>
			<view class="desc">{{ productInfo.title }}</view>
			<view class="tags">
				<view class="tag" v-for="(tag, tagIndex) in tags" :key="tagIndex">{{ filterDict(tag, tagList) }}</view>
			</view>
			<view class="price">{{ productInfo.salePrice }}</view>
		</view>
		<view class="nav-panel">
			<view class="item" @click="handleOpenLocation">
				<view class="label">{{ productInfo.address }}</view>
				<view class="text">导航</view>
				<image class="icon" src="@/static/icon_pointer.png"></image>
			</view>
			<view class="item" @click="handleCallPhone">
				<view class="label">24小时服务电话</view>
				<view class="text">电话</view>
				<image class="icon" src="@/static/icon_tel.png"></image>
			</view>
		</view>
		<view :class="{ 'info-panel': true, collapse: isCollapseExplain }">
			<view class="title">服务说明</view>
			<view class="content">
				<image class="explain-img" src="@/static/img_product_detail.jpg"></image>
			</view>
			<view class="collapse-btn" @click="isCollapseExplain = !isCollapseExplain"></view>
		</view>
		<view :class="{ 'info-panel': true, collapse: isCollapseTips }">
			<view class="title">温馨提示</view>
			<view class="content">
				<view class="p">
					我们的每款产品都是一次性收费，保证无二次收费。标注的产品价格，可能会因更新不及时，与实际价格有差异，具体请参见
					<text class="b">《鑫恩华价格发布规范》</text>
					。
				</view>
				<view class="p">如果您有不同需求，请在下单之前联系客服，再次衷心感谢新老客户们一直以来对我集团的支持，我们将竭诚为您服务，您的满意是我们最大的追求！</view>
			</view>
			<view class="collapse-btn" @click="isCollapseTips = !isCollapseTips"></view>
		</view>
		<view class="info-panel">
			<view class="title">相关推荐</view>
			<view class="content">
				<scroll-view class="recommend-scorll" scroll-x>
					<view class="recommend-list">
						<view class="item" v-for="(item, index) in [1, 2, 3, 4, 5, 6]" :key="index">
							<image class="img" src="@/static/img_banner_1.jpg" mode="aspectFill"></image>
							<view class="name">公章刻印</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="foot-panel">
			<view class="foot-wrap">
				<button class="share-btn" open-type="share">
					<image class="icon" src="@/static/svg/user_nav_4.svg"></image>
					分享海报
				</button>
				<button class="btn btn-1" @click="handleCallPhone">电话咨询</button>
				<button class="btn">下单购买</button>
			</view>
		</view>
	</view>
</template>

<script>
import productService from '@/api/product.js';
import systemService from '@/api/system.js';
import { filterDict } from '@/utils/util.js';
export default {
	data() {
		return {
			productId: '',
			productInfo: '',
			tags: [],
			tagList: '',
			isCollapseExplain: true,
			isCollapseTips: true
		};
	},
	onLoad(option) {
		this.productId = option.id;
		this.getProductDetail();
		this.getTagConfig();
	},
	onShareAppMessage() {
		return {
			title: this.productInfo.name,
			path: '/pages/index/product/index?id=' + this.productId
		};
	},
	methods: {
		// 获取商品详情
		async getProductDetail() {
			const { data } = await productService.getProductDetail(this.productId);
			this.productInfo = data;
			this.tags = data.label ? data.label.split(',') : [];
		},
		// 获取标签配置
		async getTagConfig() {
			const { rows } = await systemService.getDict('fin_product_tag');
			this.tagList = rows;
		},
		handleCallPhone() {
			if (!this.productInfo.telephone) return;
			uni.makePhoneCall({
				phoneNumber: this.productInfo.telephone
			});
		},
		handleOpenLocation() {
			let { coordinate, address } = this.productInfo;
			if (!coordinate) return;
			coordinate = coordinate.split(',');
			console.log(coordinate);
			uni.openLocation({
				latitude: +coordinate[0],
				longitude: +coordinate[1],
				address
			});
		},
		filterDict
	}
};
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>