xusfood_client/xushuo/about.vue

<template>
	<view class="pages">
		<u-navbar
			:title="navbarTitle"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar>
		<view class="page-wrap">
			<u-subsection 
			class="subsection"
			:customStyle="{height: '66rpx'}"
			:list="typeList" 
			mode="subsection" 
			activeColor="#00A447"
			@change="sectionChange"
			:current="curNow"></u-subsection>
			<view class="content">
				<view class="" v-if="curNow==0">
					<!-- <view class="name">贵州旭烁食品有限公司简介</view> -->
					<view class="u-content" style="margin-top: 40rpx;">
						<u-parse :content="pageData.xsIntro"></u-parse>
					</view>
					<view class="contact">
						<view class="item">联系电话：{{pageData.xsMobile}}</view>
						<view class="item">营业世间：{{pageData.xsServiceTime}}</view>
						<view class="item">旭烁地址：{{pageData.xsAddress}}</view>
					</view>
				</view>
				<view class="" v-if="curNow==1">
					<view class="u-content" style="margin-top: 40rpx;">
						<u-parse :content="pageData.shopIntro"></u-parse>
					</view>
					<view class="contact">
						<view class="item">联系电话：{{pageData.shopMobile}}</view>
						<view class="item">营业世间：{{pageData.shopServiceTime}}</view>
						<view class="item">商行地址：{{pageData.shopAddress}}</view>
					</view>
				</view>
				<!-- <img :src="pageData.uxImg" style="width: 100%;" alt=""> -->
				<view class="map-wrap">
					<map style="width: 100%; height: 340rpx;" 
						@tap="mapClick"
						:latitude="curNow==0?xsLatitude:shopLatitude" 
						:longitude="curNow==0?xsLongitude:shopLongitude" :markers="covers">
					</map>
					<u-button text="导航"  @click="mapClick"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
			
		},
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				shopLatitude: 30.659462,
				shopLongitude: 104.065735,
				xsLatitude: 30.659462,
				xsLongitude: 104.065735,
				covers: [], //存放标记点数组
				navbarTitle:'',
				typeList:['旭烁简介','商行简介'],
				curNow:0,
				pageData:{}
			}
		},
		watch:{
			curNow: {
				handler(newVal, oldVal){
					console.log('newVal',newVal);
					this.navbarTitle = this.typeList[newVal];
					this.getIntro();
				},
				immediate: true
			}
		},
		onLoad() {
			
		},
		methods: {
			sectionChange(index){
				this.curNow = index;
			},
			getIntro(){
				let type = this.curNow + 1;
				this.$u.api.xsGetIntro({type:type}).then(res=>{
					this.pageData = res.data;
					this.shopLatitude = res.data.shopLatitude;
					this.shopLongitude = res.data.shopLongitude;
					this.xsLatitude = res.data.xsLatitude;
					this.xsLongitude = res.data.xsLongitude;
					if(this.curNow==0){
						this.setCovers(this.xsLatitude,this.xsLongitude);
					}else{
						this.setCovers(this.shopLatitude,this.shopLongitude);
					}
					
					// console.log('res',res);
				}).catch(err=>{
					console.log('xsGetIntro',err.data);
				})
			},
			//设置点位
			setCovers(latitude, longitude) {
				let location = {
					id: 0,
					latitude: Number(latitude),
					longitude: Number(longitude),
					width: uni.upx2px(50),
					height: uni.upx2px(55),
					iconPath:this.$commonConfig.staticUrl+ '/img/mapicon.png'
					// iconPath: './../../static/location.png'
				}
				this.covers = [location]
			},
			mapClick(){
				if(this.curNow==0){
					uni.openLocation({
					  latitude:this.xsLatitude,	//维度
					  longitude: this.xsLongitude, //经度
					  name: "旭烁地址",	//目的地定位名称
					  scale: 15,	//缩放比例
					  address: this.pageData.xsAddress	//导航详细地址
					})
				}else{
					uni.openLocation({
					  latitude:this.shopLatitude,	//维度
					  longitude: this.shopLongitude, //经度
					  name: "商行地址",	//目的地定位名称
					  scale: 15,	//缩放比例
					  address: this.pageData.shopAddress	//导航详细地址
					})
				}
			}
		}
	}
</script>
<style>
page{
	background-color: #F9F9F9;
}
</style>
<style lang="scss" scoped>
.content{
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
	line-height: 44rpx;
	.name{
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		line-height: 45rpx;
		text-align: center;
		margin-top: 34rpx;
		margin-bottom: 30rpx;
	}
	.title{
		font-size: 30rpx;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
		margin: 30rpx auto 15rpx;
	}
	.xsIntro{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		margin: 20rpx auto 50rpx;
	}
	.contact{
		margin: 30rpx 0;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 50rpx;
		.item{
			margin-bottom: 10rpx;
		}
		
	}
}
.map-wrap{
	margin: 20rpx 0;
	
}
</style>