H5_module/template/store_options/store_options.vue

<template>
<view>
<!--components/store_options/store_options.wxml-->
<template name="store_options">
	<view :class="'top' + (skinNotColor?' not-color' : '')">
		<block v-if="!skinNotColor">
		<image :src="about.CONFIG_MERCHANT_BG" class="top-bg" v-if="about.CONFIG_MERCHANT_BG"></image>
		<image :src="picUrlss+'top_bg.png'" class="top-bg" v-else></image>
		</block>
		<view class="topcon ddflex pdlr20"  v-if="storeTemplate&&storeTemplate.state==0">
			<image :src="merchant.logo ? merchant.logo : about.CONFIG_INDEX_LOGO" mode="aspectFit" class="logo r50 bgfff mr20"></image>
			<view class="area fflex" @tap="cloud=='default'?'':merchantFun()">
				<view class="areas f28 ddflex">
					{{merchant.title ? merchant.title : '请选择门店'}}
					<view class="change ddflex" @tap="merchantFun()" v-if="cloud!='default'&&about.User_Limit_Store!=1&&about.Many_Store!=0">切换<image src="../../static/pages/images/change.png"></image></view>
					<!-- <image src="/static/pages/images/sanjiao.png" v-if="cloud!='default'&&about.User_Limit_Store!=1&&about.Many_Store!=0"></image> -->
				</view>
				<view class="cont dflex" v-if="cloud=='default'||about.User_Limit_Store==1">
					<view v-for="(item, index) in guarantee" :key="index" class="dflex li" v-if="index<3">
						<image src="/static/pages/images/guarantee.png"></image>{{item}}
					</view>
				</view> 
				<view class="recent dflex" v-else>
					<text class="scolor bgfff">最近门店</text>
					<block v-if="merchant.range!=50000">
						{{merchant.range ? merchant.mDistance < 1000 ? merchant.mDistance+'m' : merchant.range+'km' : ''}}</block>
				</view>
			</view>
			<button open-type="share" class="m-share"><image src="../../static/pages/images/share1.png"></image>分享</button>
			<!-- <view class="renqi">{{merchant.person}}<text>人气</text></view> -->
		</view>
		<view class="top-nav" v-if="categoryList.length>0 && typeDistrictTemplate && typeDistrictTemplate.state==0">
			<scroll-view scroll-x="true">
				<block v-for="(item, index) in categoryList" :key="index">
				<navigator :url="'/product/list/list?id=' + item.id + '&title=' + item.title  + '' + web" hover-class="none" class="li">{{item.title}}</navigator>
				</block>
			</scroll-view>
			<navigator url="/pages/sort/sort" open-type="switchTab" hover-class="none" class="column dflex"><image src="../../static/pages/images/nav.png"></image></navigator>
		</view>
		<view class="box1 pdlr30 ddflex">
			<view v-if="sousuoTemplate&&sousuoTemplate.state==0" class="search ddflex fflex">
				<view class="dflex flex" @tap="search">
					<image src="/static/pages/images/ssico.png" class="ssico"></image>
					<view class="flex">搜索你想要的商品</view>
				</view>
				<!-- #ifndef H5 -->
				<!-- <image src="/static/pages/images/sao.png" @tap="saoma" class="sao"></image> -->
				<!-- #endif -->
			</view>
			<button open-type="contact" class="idx-top-contact"><image :src="picUrlss+'meizhihua/idx_top_contact.png'"></image></button>
		</view>
	</view>
	<!-- <view class="box1 bgfff pdlr20"
		style="margin-top: {{merchant.id&&storeTemplate&&storeTemplate.state==0? '-52rpx' : 0}}">
		<view wx:if="{{sousuoTemplate&&sousuoTemplate.state==0}}" class="search dflex">
			<view class="dflex flex" bindtap="search">
				<image src="/pages/images/ssico.png" class="ssico"></image>
				<view class="flex">搜索你想要的商品</view>
			</view>
			<image src="/pages/images/sao.png" bindtap="saoma" class="sao"></image>
		</view>
	</view> -->
	<!-- <view class="box1 bgfff pdlr20" style="{{souShow?'margin-top: -28px':''}}" wx:if="{{souShow}}">
	</view> -->
</template>
</view>
</template>

<script>
	// components/store_options/store_options.js
	// 门店选择
	const app = getApp();
	const req = require("../../utils/request.js");
	const api = require("../../utils/api.js");
	const route = require("../../utils/route.js");

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				skinNotColor: req.public.skinNotColor,
				categoryList: []
			};
		},

		components: {},
		props: {
			storeTemplate: Object,  //门店配置
			merchant: Object, //门店
			about: Object, //参数配置
			// timelyTemplate: Object,
			guarantee: Array, //配置商城服务保障
			sousuoTemplate: Object, //搜索配置
			cloud:String, //荣康的是否默认门店
			web:String, //路由跳转
			url:String ,//路由跳转
			typeDistrictTemplate: Object //分类导航
		},
		watch: {

		},

		beforeMount() {},

		mounted() { // this.init()
			this.getCategory();
		// console.log(this.merchant,this.cloud,this.guarantee,this.storeTemplate,this.sousuoTemplate,this.timelyTemplate)
		},

		onPageShow() {},

		methods: {

			search() {
				// app.openPage('pages/search/search')
				app.globalData.openPage('pages/search/search'+this.url)
			},
			merchantFun() {
				if(this.about.User_Limit_Store==1||this.about.Many_Store==0){
					
				}else{
				app.globalData.openPage('merchant/nearby/nearby')	
				}
				
			},
			saoma() {
				var _this = this;
				// #ifndef H5
				// 允许从相机和相册扫码
				uni.scanCode({
					success: (res) => {
						uni.navigateTo({
							url: '/' + res.path,
						})
						// this.scene = '1290926887903780865';
						this.loadCodeParams();
					}
				})
				// #endif 
			},
			loadCodeParams() {
				let _ts = this;

				return new Promise((resolve, reject) => {
					if (!_ts.scene) {
						resolve();
						return false;
					}

					req.getRequest('/api/code/params', {
						scene: _ts.scene
					}, data => {
						req.setStorage('pidCode', data.userId);
						resolve();
					});
				});
			},
			getCategory() {
				//产品分类
				let that = this;
				route.getCategory({
					pid: 0
				}, res => {
					this.categoryList = res;
				});
			},
		}
	};
</script>
<style>
	@import "./store_options.css";
</style>