scenicProduct.vue

<template>
	<view>
		<view class="banner" v-if="detailData">
			<u-swiper :list="detailData.imgList" @change="e => currentNum = e.current" indicatorStyle="right: 20px;bottom:25px" height="400" circular>
				<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ currentNum + 1 }}/{{detailData.imgList.length}}</text>
				</view>
			</u-swiper>
		</view>
		<view class="middle">
			<view class="middle-introduce" v-if="detailData">
				<view class="introduce-one" @click="showDetail()">
					<view class="merchantname">
						{{detailData.name}}
					</view>
					<view class="businesstime">
						<view style="font-size: 24rpx;">
							<text style="color: #3688ff;margin-right: 20rpx;">{{tagStatus}}</text>
							<text style="color: #999;">
							{{detailData.businessStart?detailData.businessStart.substr(0,5):""}}~{{detailData.businessStart?detailData.businessEnd.substr(0,5):""}}
							</text>
						</view>
						<view style="display: flex;">
							<text>详情</text>
							<u-icon name='arrow-right'></u-icon>
						</view>
					</view>
				</view>
				<view class='introduce-two'>
					<text>
						{{detailData.score||4.9}}分
					</text>
					<text>
						{{detailData.comments.length>0?detailData.comments.length:'100+'}}条好评
					</text>
				</view>
				
				<view class="introduce-three">
					<view style="flex: 1;margin-right: 20rpx;">
					{{detailData.address}}
					</view>
					<view class="introduce-icon">
						<u-icon name='map-fill' color='#3688ff' size='44' @click="navigation()"></u-icon>
						<text></text>
						<u-icon name='phone-fill' color='#3688ff' size='44' @click="makePhone()"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="middle-product">
				<view class="product-title">
					<view>
						景区门票
					</view>
					<view class="title-tag">
						<text v-for="(item,index) of tagArr" :key='index'>
						  {{item}}
						  <text class="tag-line" v-if="index != tagArr.length-1">|</text>
						</text>
					</view>
				</view>
				
				<view class="product-list" @click="goOrder(item)" v-for="(item,index) of ticketList" :key="index">
					<view class="list-left">
						<view>{{item.name}}</view>
						<view class="list-buyknow" @click.stop="showBuyKnow(item.id)">
							购票须知
							<u-icon name="arrow-right" size='26' color='#B4B4B4'></u-icon>
						</view>
					</view>
					
					<view class="list-right">
						<view>
							<text class="small-price">
								¥{{parseFloat(parseFloat(item.originalPrice).toFixed(2))}}
							</text>
							<text class="big-price">
								<text style="font-size: 28rpx;">¥</text>
								{{parseFloat(parseFloat(item.sellingPrice).toFixed(2))}}
							</text>
						</view>
						<view style="margin-top: 15rpx;">
							<text class="btn">购买</text>
						</view>
					</view>
					<view v-if="item.status==2" class="sellout">
						已售罄
					</view>
				</view>
				<view class="nomore" v-if="ticketList.length>0">
					没有更多了
				</view>
				
				<view style="padding: 30rpx;" v-else>
					<u-empty iconSize='180' textSize='28'>
						
					</u-empty>
				</view>
				
			</view>
		</view>
		<!-- 购买须知 -->
		<buyKnow :buyKnowData="buyKnowData" ref="buyKnow"></buyKnow>
		<!-- 商户详情 -->
		<merchantDetail :detailData='detailData' ref='merchantDetail'></merchantDetail>
	</view>
</template>

<script>
import buyKnow from '@/components/buyKnow.vue' //购买须知
import merchantDetail from '@/components/merchantDetail' //详情弹窗
export default {
  components: {
	  buyKnow,
	  merchantDetail
  },
  data() {
    return {
      ticketList:[],//门票列表
      detailData:'',//详情数据
      currentNum:0,//轮播图下标
      tagArr:[],//标签数组
      tagStatus:'',//标签状态,开园或者闭园
      buyKnowData:'',//购票须知数据
      companyId:'',//公司Id
      openid:uni.getStorageSync('openid')||'',//openid
    }
  },
  onLoad(option) {
    this.nowTime=parseInt(new Date().Format('hhmm'))
    this.companyId=this.$commonjs.getCompanyId(option)||''
    this.merchantId = this.$commonjs.getKey(option,'merchantId')|| ''
    this.channelType = this.$commonjs.getKey(option,'channelType')|| 0
    this.initProduct()
    this.initDetail()
  },
  methods: {
    //---展示详情
    showDetail(){
      this.$refs.merchantDetail.showPop=true
    },
    //---导航
    navigation(){
		  uni.openLocation({
		    latitude:this.detailData.latitude,
		    longitude:this.detailData.longitude,
		    name:this.detailData.name,
		    address:this.detailData.address,
		    success: function () {
		      
		    }
		  })
    },
    //---拨打电话
    makePhone() {
		  uni.makePhoneCall({
		    phoneNumber:this.detailData.phone
		  })
    },
    //---跳转订单页面
    goOrder(item){
		  if(item.status!='2'){//未售罄
		    let data={
		      chooseGroupGoodList:[{
		        productId:item.id,
		        merchantCode:item.merchantCode,
		        extendContent:'{"openid":'+'"'+this.openid+'"'+'}'
		      }],
		      companyId:this.companyId,
		    }
		    this.$request('scenic/groupGood/checkProductChangeList',data).then((res)=>{
		      if(res.code=='00'){
		        let jumpType=''
		        if(res.data.length>0){
		          jumpType=res.data[0].jumpType
		        }
            let productId=''
            if(jumpType===0){//变产品id
						  productId=res.data[0].afterProductId||item.id
            }else{//不变
						  productId=item.id
            }
		        if(item.ticketType==2){//景区联票
		          let query=`?merchantId=${this.merchantId}&productId=${productId}`
		          uni.navigateTo({
		            url: '/pages/scenic/scenicJointOrder/scenicJointOrder'+ query
		          })
		        }
		        if(item.ticketType!=2){//景区单票
		          let query=`?merchantId=${this.merchantId}&productId=${productId}`
              uni.navigateTo({
							  url: '/pages/scenic/scenicSingleOrder/scenicSingleOrder'+ query
              })
		        }
		      }else{
		        uni.showToast({
		          title: res.message,
		          icon: 'none'
		        })
		      }
		    })
		  }
    },
    //---展示购买须知
    showBuyKnow(id) {
      let data={id}
      this.$request('scenic/groupGood/loadProduct',data).then((res)=>{
        if(res.code=='00'){
          this.buyKnowData = res.data
          this.$refs.buyKnow.showPop = true
        }else{
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
    },
    //---产品加载
    initProduct(){
      this.ticketList=[]
      let data={
        merchantId:this.merchantId,//商户id
        type:1,//类型：1景区、2酒店、3餐饮
        channelType:this.channelType,//渠道Id
      }
      this.$request('scenic/user/product/findProductList',data).then((res)=>{
        if(res.code=='00'){
          let list=res.data.list||[]
          list.forEach((item,index)=>{
            //营业时间重新组成
            if(item.businessTime){
              item.businessTime=item.businessTime.split(';')
            }
            //等于7为特价
            if(item.channelType!=7){
              this.ticketList.push(item)
            }
          })
        }else{
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
    },
    //---详情加载
    initDetail(){
      let data={
        userId:uni.getStorageSync('userId')||'',
        openid:this.openid,
        id:this.merchantId,//商户id
        isDetail:1,//商户详情
      }
      this.$request('scenic/user/merchant/findDetailInfo',data).then((res)=>{
        if(res.code=='00'){
          this.detailData=res.data
          //解决详情里面图片太宽超出屏幕宽度出现滚动条的问题
          if(this.detailData.introduce){
					  this.detailData.introduce=this.detailData.introduce.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
          }
          if(this.detailData.tag){
            this.tagArr=this.detailData.tag.split(',')
          }
          let start=''
          let end=''
          if(this.detailData.businessStart){
            start=parseInt(this.$commonjs.changeTime(this.detailData.businessStart.substr(0,5)))
          }
          if(this.detailData.businessEnd){
            end=parseInt(this.$commonjs.changeTime(this.detailData.businessEnd.substr(0,5)))
          }
          if(start<this.nowTime<end){
            this.tagStatus='开园中'
          }else{
            this.tagStatus='闭园中'
          }
        }else{
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
    
      })
    },
  }
}
</script>

<style scoped lang="scss">
.middle{
	position: relative;
	top: -40rpx;
}
.middle-introduce{
	background: #FFFFFF;
	padding: 30rpx 20rpx 0 20rpx;
	border-radius: 24rpx 24rpx 0 0;
}
.introduce-one{
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 20rpx;
}
.merchantname{
	font-size:30rpx;
	font-weight: bold;
}
.businesstime{
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.introduce-two{
	border-bottom: 1px solid #e5e5e5;
	padding: 20rpx 0;
	font-size: 24rpx;
}
.introduce-two text:first-child{
	color:$red;
	font-weight: bold
}
.introduce-two text:first-child::after{
	display: inline-block;
	width: 2rpx;
	height: 20rpx;
	background: #999999;
	content: '';
	margin: 0 10rpx;
}
.introduce-two text:last-child{
	color:#999999;
}
.introduce-three{
	display: flex;
	justify-content: space-between;
	padding: 20rpx 0;
	color: #666666;
	font-size: 24rpx;
	align-items: center;
}
.introduce-icon{
	display: flex;
	align-items: center;
}
.introduce-icon text{
	display: inline-block;
	margin: 0 12rpx;
	width: 1px;
	background: #e5e5e5;
	height: 30rpx;
}
.middle-list{
	background: #FFFFFF;
	margin-top: 20rpx;
}
.middle-product{
	background: #FFFFFF;
	margin-top: 20rpx;
}
.product-title{
	padding: 24rpx 20rpx;
	font-size:30rpx;
	font-weight: bold;
	border-bottom: 1rpx solid #e6e6e6;
}
.title-tag{
	font-size: 24rpx;
	color: #999;
	font-weight: 400;
	margin-top: 10rpx;
}
.title-tag>text:first-child{
	color: #f9690e;
}
.tag-line{
	color: #e5e5e5;
	margin: 0 10rpx;
}
.product-list{
	display: flex;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #e6e6e6;
	align-items: center;
	position: relative;
}
.sellout{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: $red;
	font-weight: bold;
}
.list-left{
	flex: 1;
	padding-right: 20rpx;
}
.list-buyknow{
	display: flex;
	margin-top:25rpx;
	align-items: center;
	width: 160rpx;
}
.list-right{
	text-align: right;
}
.small-price{
	font-size: 24rpx;
	color: $grey;
	text-decoration: line-through;
}
.big-price{
	font-size: 32rpx;
	color: $red;
	font-weight: bold;
	margin-left: 10rpx;
}
.btn{
	width: 120rpx;
	height: 60rpx;
	line-height: 60rpx;
}
.nomore{
	padding: 30rpx;
	text-align: center;
	color: $red;
}
</style>