merchantDetail.vue

<template>
	<!-- 商家详情弹窗 -->
	<u-popup v-model="showPop" mode="bottom" border-radius="14" closeable height="85%">
		<view class="son-wrap">
			<view class="head">
				{{detailData.name}}
			</view>
			<view style="padding-top: 100rpx;">
				<u-swiper :list="detailData.imgList" mode="number" height="350" name="url"></u-swiper>
			</view>
			<view class="middle">
				<!-- 景区介绍 -->
				<view class="introduce">
					<view class="middle-title">
						介绍
					</view>
					<view v-html="detailData.introduce">
					</view>
					<view class="middle-title" style="margin-top: 20rpx;">
						用时参考
					</view>
					<view>
						建议游玩时长：{{detailData.timeSpent}}
					</view>
				</view>
				<!-- 开放时间 -->
				<view class="opentime">
					<view class="middle-title">开放时间</view>
					<u-table border-color="#04a7f4" >
						<u-tr v-if="!times">
							<u-td>每天</u-td>
						</u-tr>
						<u-tr v-if="!times">
							<u-td>
								{{detailData.businessStart?detailData.businessStart.substr(0,5):""}}
								~{{detailData.businessEnd?detailData.businessEnd.substr(0,5):""}}
							</u-td>
						</u-tr>
						<u-tr v-if="times">
							<u-td colspan="2">开放时间</u-td>
						</u-tr>
						<u-tr v-for="(item,index) of times" :key="index" v-if="times">
							<u-td v-for="(items,b) of item" :key="b" v-if="items!=''">
								{{items}}
							</u-td>
						</u-tr>
					</u-table>
				</view>
				<!-- 优待政策 -->
				<view class="policy" v-if="policy">
					<view class="middle-title" style="padding-bottom: 4rpx;">
						{{policy.childTitle}}
					</view>
					<view v-for="(item,index) of policy.contentList" :key="index" style="margin-top: 20rpx;">
						{{item.content}}
					</view>
				</view>
				<!--景区设施 -->
				<view class="facilities" v-if="facilities">
					<view class="middle-title" style="padding-bottom: 4rpx;">
						{{facilities.title}}
					</view>
					<view class="fac-content" v-for="(item,a) of facilities.merchantChildTitleData" :key="a">
						<text class="fac-left">
							{{item.childTitle}}
						</text>
				
						<view class="fac-right">
							<text v-for="(items,b) of item.contentList" :key="b">
								{{items.content}}
							</text>
						</view>
					</view>
				</view>
				<!-- 出行贴士 -->
				<view class="travelTips" v-if="travelTips">
					<view class="middle-title" style="padding-bottom: 4rpx;">
						{{travelTips.title}}
					</view>
					<view class="travel-content" v-for="(item,a) of travelTips.merchantChildTitleData" :key="a">
						<text class="travel-left">
							{{item.childTitle}}
						</text>
				
						<view class="travel-right">
							<text v-for="(items,b) of item.contentList" :key="b">
								{{items.content}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
  props: ['detailData'],
  data() {
    return {
      showPop: false, //控制弹窗显示隐藏
      times: '', //时间数组
      policy:'', //优待政策列表
      facilities: '', //景区设施
      travelTips: '' //游玩提示
    }
  },
  watch: {
    detailData: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.times = ''
          this.policy =''
          this.facilities = ''
          this.travelTips = ''
          if (newValue.merchantTitleData && newValue.merchantTitleData.length > 0) {
            let openTime = ''
            newValue.merchantTitleData.forEach((item, index) => {
              if (item.titleCode == 'scenic_base_info') {
                //基本信息
                item.merchantChildTitleData.forEach((items, index) => {
                  if (items.childTitleCode == '101001') {
                    //开放时间
                    openTime = items.contentList
                  }
                  if (items.childTitleCode == '101003') {
                    //优待政策
                    this.policy = items
                  }
                })
              }
              if (item.titleCode == 'scenic_facilities') {
                //景区设施,携程同步的数据没有这个模块
                this.facilities = item
              }
              if (item.titleCode == 'scenic_travel_tips') {
                //游玩贴士,携程同步的数据没有这个模块
                this.travelTips = item
              }
            })
            if (openTime.length > 0) {
              this.times = openTime.map((item, index) => {
                return item.content.split('；')
              })
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {}
}
</script>

<style scoped="scoped" lang="scss">
	.son-wrap{
		position: relative;
	}
.head{
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	padding: 30rpx 0;
	position:fixed;
	top: 0;
	width: 100%;
	background: #fff;
	z-index: 1;
}
.middle{
	padding: 24rpx 24rpx 80rpx 24rpx;
	background: #f5f5f5;
	font-size: 24rpx;
}
.introduce{
	padding: 30rpx 16rpx;
	background: #fff;
}
.middle-title{
	font-size: 30rpx;
	font-weight: bold;
	padding-bottom: 24rpx;
}
.introduce image{
	width: 100%;
}
.opentime{
	padding: 30rpx 16rpx;
	background: #fff;
	margin-top: 24rpx;
}
.policy{
	padding: 30rpx 16rpx;
	background: #fff;
	margin-top: 24rpx;
}
.facilities{
	background: #fff;
	margin-top: 24rpx;
	padding: 30rpx 16rpx;
}
.fac-content{
	display: flex;
	margin-top: 20rpx;
}
.fac-left{
	width: 100rpx;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10rpx;
}
.travelTips{
	background: #fff;
	margin-top: 24rpx;
	padding: 30rpx 16rpx;
}
.travel-content{
	display: flex;
	margin-top: 20rpx;
}
.travel-left{
	width: 100rpx;
	flex-shrink: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10rpx;
}
</style>