cte-share/pages/shanpinxungou/shangjia/gengduozhixun.nvue

<template>
	<view>
		<view class="">
			<image class="imageV" :src="shangjiaImage" mode="scaleToFill"></image>
			<view class="actimgeCT">
				<view class="buyBTact">
					<image class="actimge" src="/static/images/fanhuiy@3x.png" mode="aspectFit" @click="fanhui"></image>
					<view style="margin-left: auto;">
						<!-- <image class="actimge" style="margin-right: 20rpx;" src="/static/images/fenxiang@3x.png" mode="aspectFit" @click="shareToggle"></image> -->
						<!-- <image class="actimge" :src="shouchangIcon" mode="aspectFit" @click="shouchang"></image> -->
					</view>
				</view>
			</view>
		</view>
		<weizhimap class="mapview" height="500" :covers="covers"></weizhimap>
		<view class="contentVv">
			<view style="display: flex;flex-direction: column;">
				<text class="posname">{{posName}}</text>
				<text class="drktext">{{i18n('mend.jyxkzheng')}}: {{mendianMs.hygienePermit}}</text>
			</view>
			<view class="viewinrow" style="padding-top: 16rpx;">
				<image style="width: 36rpx;" src="/static/images/time@3x.png" mode="widthFix"></image>
				<text style="font-size: 30rpx;color: black;padding-left: 6rpx;">{{i18n('mend.yingyeshijan')}}</text>
			</view>
			<view style="display: flex;flex-direction: column;padding-top: 16rpx;">
				<view class="contentColumn" v-for="(Ytime,index) in yingyeTime">
					<view class="contentInRowL">
						<text class="drktext">{{Ytime.startTime}}</text>
						<text class="drktext"> — </text>
						<text class="drktext">{{Ytime.endTime}}</text>
					</view>
				</view>
			</view>
			<view class="viewinrow" style="margin-top: 16rpx;">
				<image style="width: 46rpx;" src="/static/images/Rdizhil60@3x.png" mode="widthFix"></image>
				<text class="addrText">{{mendianMs.address}}</text>
			</view>
		</view>
		
		
	<view>
	<!-- 分享示例 -->
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<uni-popup-share v-on:select="fenxiang"></uni-popup-share>
		</uni-popup>
	</view>
	</view>
</template>

<script>
	import api from "@/pages/api/api.js";
	export default {
		data() {
			return {
				mendid:'',
				userid:0,
				mendianMs:[],
				posName:'',
				shangjiaImage:'',
				isShouchang:0,
				shouchangIcon:'/static/images/faver@3x.png',
				option: {},
				covers: '',
				latitude:'',
				longitude:'',
				yingyeTime:[]
			}
		},
		onLoad(option) {
			this.mendid = option.mendid;
		},
		onShow() {
			this.getmendianDetail(this.mendid);
		},
		methods: {
			i18n(str){
				return getApp().globalData.$t(str);
			},
			fanhui(){
				uni.navigateBack();
			},
			shareToggle() {
				this.$refs.share.open()
			},
			fenxiang(item,index){
				this.option={
					//绘制海报内容
					//codeUrl: 'https://pic1.zhimg.com/80/v2-2714df42147132464a71af391ed04be4_720w.jpg', //小程序太阳码
					codeUrl: '/static/defimages/erweim.png', //小程序太阳码
					coverUrl: '/static/defimages/ddd.png', //题库图片
					headUrl: '/static/logo.png', //头像
					//bgUrl: 'https://pic3.zhimg.com/v2-8fbde0f9ac6a19a23aa839e73394618a_b.jpg', //图片背景填充，和 fillStyle 只能传一个，bgUrl 优先级高于 fillStyle
					fillStyle: '#00A6FF', //纯色背景填充颜色
					nickName: '跑腿王', //授权登录的用户名
					miniName: '不出门吃遍全世界', //小程序名称
					tkName:this.mendianMs.posName, //题库名称
					tkAuthor:'门店介绍', //题库作者
					tkType: '外送', //题库类型
					cost: '自取', //是否需要收费   免费/付费
					isPub: '堂食' //公开 还是 私有
				};
				this.$refs.draw.share_qrcode(this.option);
			},
			shouchang(){
				if(this.isShouchang==0){
					this.isShouchang=1;
					this.shouchangIcon='/static/images/faverr@3x.png'
				}
				else{
					this.isShouchang=0;
					this.shouchangIcon='/static/images/faver@3x.png'
				}
			},
			getmendianDetail(id){
				
				api('getmendianDetail',{
					id:id
				},r=>{
					console.log('getmendianDetail:',r);
					this.mendianMs=r.data.data;
					this.shangjiaImage= getApp().globalData.baseImagurl + this.mendianMs.image;
					this.userid=this.mendianMs.userId;
					this.posName=this.mendianMs.posName;
					
					this.covers=[{
						latitude: this.mendianMs.latitude,
						longitude: this.mendianMs.longitude,
						iconPath: '/static/images/Rdizhil100@3x.png'
					}];
					this.latitude=this.mendianMs.latitude;
					this.longitude=this.mendianMs.longitude;
					this.getYingyeshijian(id);
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
			//营业时间====================
			getYingyeshijian(mid){//查询
				api('getHours',{
					mdId:mid,
				},res=>{
					console.log('getHours',res)
					if(res.data.code==200){
						this.yingyeTime=res.data.data;
					}
				},failc=>{
					//console.log('getadvertis----',failc)
				})
			},
		}
	}
</script>

<style>
	/* page{
		background-color: #F2F3F7;
	} */
	.contentVv{
		width: 700upx;
		margin-left:25upx;
		flex-direction: column;
		height:400rpx;
	}
	.viewinrow{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 740upx;
	}
	
	.imageV{
		width: 750upx;
		height: 400rpx;
		background-color:floralwhite;
		border-width: 1rpx;
		border-color: lightgray;
	}
	.actimgeCT{
		position: fixed;
		width: 740upx;
		left: 5upx;
		top: 100rpx;
		z-index: 999;
	}
	.buyBTact{
		display:flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
		width: 740upx;
	}
	.actimge{
		width: 60rpx;
		height: 60rpx;
	}
	
	.posname{
		font-size: 32rpx;
		color: black;
	}
	
	.drktext{
		font-size: 28rpx;
		color: darkgray;
	}
	.mapview{
		display: flex;
		width: 750upx;
		height: 500rpx;
	}
	
	.addrText{
		font-size: 26rpx;
		color: black;
		padding-left: 6rpx;
		width: 630upx;
	}
	

</style>