H5_module/pages/merchant/index.vue

<template>
	<view v-if="isShowPage">
		<view class="banner">
			<image :src="merchant.mainGraph ? merchant.mainGraph : picUrlss+'scrm/md_default.jpg'"></image>
		</view>
		<view class="con">
			<view class="info">
				<view class="title ddflex">
					<view class="name fflex">{{merchant.title}}</view>
					<navigator url="/merchant/nearby/nearby" hover-class="none" class="change ddflex">切换门店<image
							src="../../static/pages/images/rico.png"></image>
					</navigator>
				</view>
				<view class="mai">{{merchant.buyPerson}}位朋友买过 ·
					{{merchant.range ? merchant.mDistance < 1000 ? merchant.mDistance+'m' : merchant.range+'km' : ''}}
				</view>
				<view class="time ddflex">
					<image :src="picUrlss+'scrm/md_yysj.png'" class="info-img"></image>营业中 · {{merchant.businessTime}}
				</view>
				<view class="ddflex">
					<view class="addr ddflex fflex">
						<image :src="picUrlss+'scrm/md_dz.png'" class="info-img"></image>
						<view class="fflex">{{merchant.address}}</view>
					</view>
					<view class="tel" @click="callPhone()">
						<image :src="picUrlss+'scrm/md_dh.png'">
					</view>
				</view>
			</view>
			<view class="opt ddflex">
				<view class="li ddflex" @click="jumpUrl('/payment/payment/payment?merchantId='+merchant.id)">
					<image :src="picUrlss+'scrm/md_md.png'"></image>买单
				</view>
				<view class="li ddflex" @click="jumpUrl('/product/coupon/coupon')">
					<image :src="picUrlss+'scrm/md_yhq.png'"></image>优惠券
				</view>
				<view class="li ddflex" @click="jumpUrl('/mine/vip/vip')">
					<image :src="picUrlss+'scrm/md_hy.png'"></image>会员
				</view>
			</view>
		</view>
		<block v-if="recommendProduct.length>0">
			<navigator url="/product/list/list?attr=Recommend&title=推荐产品" hover-class="none" class="tits ddflex">推荐产品
				<image src="../../static/pages/images/more.png" class="rico"></image>
			</navigator>
			<view class="pro ddflex">
				<view class="li" v-for="(item,index) in recommendProduct" :key="index"
					@click="jumpUrl('/product/detail/detail?id=' + item.id)">
					<image :src="item.pic" mode="aspectFill" class="pro-img"></image>
					<view class="pro-info">
						<view class="pro-tit tover">{{item.title}}</view>
						<view class="money"><text>￥</text>{{item.salePrice}}</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="serviceList.length>0">
			<navigator url="/product/list/list?productForm=2&title=服务项目" hover-class="none" class="tits ddflex">服务项目
				<image src="../../static/pages/images/more.png" class="rico"></image>
			</navigator>
			<view class="pro ddflex">
				<view class="li" v-for="(item,index) in serviceList" :key="index"
					@click="jumpUrl('/product/detail/detail?id=' + item.id)" v-if="index < 3">
					<image :src="item.pic" mode="aspectFill" class="pro-img"></image>
					<view class="pro-info">
						<view class="pro-tit tover">{{item.title}}</view>
						<view class="money"><text>￥</text>{{item.salePrice}}</view>
					</view>
				</view>
			</view>
		</block>
		<footer-copyright></footer-copyright>
		<foot channel="merchant" :isUpdate="isUpdate"></foot>
		<!-- #ifdef H5 -->
		<wx-share ref="wxshare" />
		<!-- #endif -->
	</view>
</template>

<script>
	//index.js
	//获取应用实例
	const app = getApp();
	const req = require('../../utils/request.js');
	const api = require('../../utils/api.js');
	const utils = require('../../utils/util.js');
	const mes = require('../../utils/requestmessage.js');
	const route = require('../../utils/route');
	const QQMapWX = require("../../utils/qqmap.js");
	import foot from '../../components/nav-bar/index';
	import footerCopyright from '../../components/footer-copyright/footer-copyright';
	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				query: '',
				isShowPage: false,
				isUpdate: false, // 是否更新消息
				systems: {},
				about: '',
				merchant: '',
				recommendProduct: [],
				serviceList: []
			};
		},

		components: {
			foot,
			footerCopyright,
		},
		props: {},
		onLoad: async function(options) {
			if (options.appId) req.setStorage('appId', options.appId);
			QQMapWX.initMap(req.public.mapLBSKEY);
			req.getLocation(res => {
				const to = {
					latitude: res.latitude,
					longitude: res.longitude
				};
				QQMapWX.reverseGeocoder(to, resp => {});
			});
		},

		async onShow() {
			let _ts = this;
			await this.getConfig().then(res => {
				// console.log("debug1", res);
				_ts.getMerchant();
			});
			await this.getProduct()
			await this.getService()
		},

		onUnload() {},

		onHide() {},
		onShareAppMessage: function() {
			return this.onShareMessage();

		},


		onShareTimeline() {
			return {
				title: this.getShareTitle(),
				query: this.getSharePath()
			};
		},

		onReachBottom() {},

		onReady() {
			// #ifdef H5
			var that = this;
			//初始化分享内容
			setTimeout(function() {
				var shareContent = that.onShareMessage();
				if (shareContent) {
					shareContent.path = window.location.origin + shareContent.path;
				}
				console.log('分享内容》》》》》', shareContent);
				that.$refs.wxshare.init(shareContent);
			}, 4 * 1000);
			// #endif
		},

		methods: {
			onShareMessage() {
				return {
					title: this.getShareTitle(),
					path: this.getSharePath()
				};
			},

			getSharePath() {
				let path = '';
				let isSolution = '';
				// #ifndef H5
				isSolution = req.env[req.env.NODE_ENV].isSolution;
				// #endif
				// #ifdef H5
				isSolution = false;
				// #endif
				let userInfo = req.getStorage('userInfo');
				if (isSolution) {
					path = '/share/home/index?appId=' + req.getStorage('appId') + '&userId=' + userInfo.id;
				} else {
					path = '/pages/merchant/index?isShare=' + true + '&appId=' + req.getStorage('appId');
					if (userInfo) {
						path += '&userId=' + userInfo.id;
					}
					if (req.getStorage('MERCHANT') && req.getStorage('MERCHANT').id != null) {
						path += '&merchantId=' + req.getStorage('MERCHANT').id;

						if (req.getStorage('smallShop') && req.getStorage('MERCHANT').id != null) {
							path += '&shopId=' + req.getStorage('smallShop').id;
						}
					}
				}
				return path;
			},

			getShareTitle() {
				let title = '';
				if (this.merchant && this.merchant.title && this.merchant.title != '默认门店') {
					title = this.merchant.title;
				} else {
					title = this.about.CONFIG_PROJECT_TITLE;
				}
				return (req.excludeSpecial(req.getStorage('userInfo').nickName) ? req.excludeSpecial(req.getStorage(
					'userInfo').nickName) : '') + '为你推荐' + title;
			},
			getConfig() {
				var _this = this;
				return new Promise((res, rej) => {
					req.g('/api/config', data => {
						req.setStorage('configRes', JSON.stringify(data));
						this.about = data;
						req.setStorage('appName', data['CONFIG_PROJECT_TITLE']);
						req.setStorage('productDiy', data['Product_Foot-Diy']);
						res(data);
					}, true);
				});
			},
			getMerchant() {
				let _ts = this;
				return new Promise((resolve, reject) => {
					api.getMerchant(_ts.query, req, data => {
						console.log('===', data)
						if (data == 1) {
							uni.showModal({
								title: '温馨提示',
								content: '获取定位失败，请前往设置打开定位权限',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										// console.log('用户点击确定');
										uni.openSetting({
											success(res) {
												console.log(res
												.authSetting); // res.authSetting = {
											}
										});
									}
								}
							});
						} else {
							// _ts.merchant = data;
							req.getRequest('/api/merchant/detail', {
								id: data.id
							}, res => {
								_ts.merchant = res
							})
							_ts.isShowPage = true;
						}
						resolve();
					});
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.merchant.phone
				})
			},
			getProduct() {
				let form = {
					page: 1,
					limit: 3,
					merchantId: this.merchant.id,
					attr: 'Recommend'
				}
				return new Promise((resolve, reject) => {
					req.getRequest('/api/product/list', form, data => {
						this.recommendProduct = data;
						resolve();
					})
				})
			},
			getService() {
				let form = {
					page: 1,
					limit: 3,
					merchantId: this.merchant.id,
					productForm: 2
				}
				return new Promise((resolve, reject) => {
					req.getRequest('/api/product/list', form, data => {
						this.serviceList = data;
						resolve();
					})
				})
			},
			jumpUrl(url) {
				if (req.isLogin(true)) {
					uni.navigateTo({
						url: url
					})
				}
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
	};
</script>
<style>
	@import './index.css';
</style>