uniapp-hainan/pages/goodsDetail/index.vue

<template>
	<view>
		<skeleton :loading="skeletonLoading" :row="12" :showAvatar="false" :showTitle="true">
			<block v-if="isRight(goods_detail)">
				<!-- 商品图片轮播 -->
				<swiper :current="current" :autoplay="false" :interval="2500" :indicator-dots="goods_detail.pictures.length > 1 ? true : false" :circular="true" class="swiper-box" indicator-active-color="#1998FE">
					<swiper-item v-for="(item, index) in goods_detail.pictures" :key="index">
						<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)"></image>
					</swiper-item>
				</swiper>
				<!-- 商品主要信息 -->
				<view class="head-info">
					<view class="lf-font-32 lf-color-333 lf-font-bold">{{ goods_detail.title }}</view>
					<view class="lf-row-between lf-font-24 lf-m-t-30 lf-p-b-20">
						<view class="lf-flex price">
							<lf-price :price="goods_detail.price"></lf-price>
							<view class="lf-m-l-20">¥{{ goods_detail.original_price }}</view>
							<view v-if="goods_detail.cost">{{ goods_detail.cost }}折</view>
						</view>
						<view class="lf-font-24 lf-text-right">
							<view class="lf-color-gray">已售 {{ goods_detail.sale }}</view>
							<view class="lf-color-gray">库存 {{ goods_detail.stock }}</view>
							<!-- <view class="lf-color-primary">{{ goods_detail.specs[0].stock_text }}</view> -->
						</view>
					</view>
					<view class="label-box" v-if="goods_detail.coupon && goods_detail.coupon.length">
						<view class="label-item" v-for="(item, index) in goods_detail.coupon" :key="index">{{ item.tag }}</view>
					</view>
				</view>
				<view class="lf-row-between list-item lf-m-t-20" @click="changePop(goods_detail.product.type)">
					<view class="lf-row-center">
						<text class="lf-font-28 lf-color-gray">操作</text>
						<text class="lf-text-vertical lf-m-l-40 lf-font-28 lf-color-black">套餐/类型</text>
					</view>
					<view>
						<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical"></text>
					</view>
				</view>
				<!-- 景区类型 -->
				<view v-if="goods_detail.product.extends && goods_detail.product && goods_detail.product.type == 2">
					<view class="goods-detail" v-if="goods_detail.product.extends.field_2_name && goods_detail.product.extends.field_2_address" @click="openMap(goods_detail.product.extends.field_2_address,goods_detail.product.extends.field_2_latitude,goods_detail.product.extends.field_2_longitude)">
						<view class="lf-font-32 lf-font-bold lf-m-b-20">{{goods_detail.product.extends.field_2_name}}</view>
						<view class="lf-row-between">
							<view class="lf-line-2 lf-font-28 lf-color-333">{{goods_detail.product.extends.field_2_address}}</view>
							<view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view>
						</view>
					</view> 
					<view class="goods-detail" v-if="goods_detail.product.extends.field_2_open_time">
						<view class="lf-font-32 lf-font-bold lf-m-b-20">景区开放时间</view>
						<view>
							<u-table>
								<u-tr v-for="(item,index) in goods_detail.product.extends.field_2_open_time" :key="index">
									<u-th>{{item.node}}</u-th>
									<u-th>{{item.summer}}</u-th>
									<u-th>{{item.winter}}</u-th>
								</u-tr>
							</u-table>
						</view>
					</view>
					<view class="goods-detail" v-if="goods_detail.product.extends.field_2_project">
						<view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view>
						<view class="lf-flex-column">
							<!-- <view class="lf-row-between lf-m-b-20">
								<view class="lf-color-gray lf-font-28">项目名称</view>
								<view class="lf-color-gray lf-font-28">数量</view>
								<view class="lf-color-gray lf-font-28">额外费用</view>
							</view> -->
							<view v-for="(item,index) in goods_detail.product.extends.field_2_project" :key="index" class="lf-row-between child-tag">
								<view class="lf-font-28 lf-color-black lf-flex-1">{{item.name}}</view>
								<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: center;">{{item.num}}</view>
								<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: right;">{{item.price}}</view>
							</view>
						</view>
					</view> 
				</view>
				<!-- 景区类型弹窗 -->
				<u-calendar v-model="show" mode="date" zIndex="100000" :monthPrice="goods_detail.spec[type_index].list" :min-date='goods_detail.spec[type_index].date_start' :max-date="goods_detail.spec[type_index].date_end" @change="change" z-index="9999"></u-calendar>
				<u-popup class="pop-self" v-model="scenic_spot" mode="bottom" :closeable="true" border-radius="20">
					<view class="lf-p-32">
						<view class="price lf-flex">
							<lf-price :price="choose_date_price || goods_detail.spec[type_index].price"></lf-price>
							<view class="pop-price lf-m-l-20 lf-font-24">¥{{ choose_date_orangilprice || goods_detail.spec[type_index].original_price }}</view>
						</view>
						<view class="lf-font-24 lf-m-t-20 lf-color-555">
							使用时间：{{ go_date }}
						</view>
						<view style="margin-top: 60rpx;">
							<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
							<view class="lf-m-t-30 choose-father">
								<view class="choose-span" :class="type_index==index?'choose-active':''" v-for="(item,index) of goods_detail.spec" :key="index" @click="chooseType(index)">{{item.name}}</view>
							</view>
						</view>
						<view class="lf-m-t-30">
							<text class="lf-font-32 lf-font-bold" style="color: #131315;">使用时间</text>
							<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
								<view class="lf-row-center">
									<text class="lf-font-28 lf-color-gray"  @click="show = true">使用时间</text>
								</view>
								<view class="lf-flex">
									<!-- <picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="go_date" @change="goChange">
										<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ go_date }}</view>
									</picker> -->
									<text  @click="show = true">{{go_date}}</text>
									<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
								</view>
							</view>
						</view>
						<view style="margin-top: 60rpx;">
							<button class="choose_btn" @click="toAddOrder()">立即购买</button>
						</view>
					</view>
				</u-popup>
				
				<!-- 餐厅类型 -->
				<view v-if="goods_detail.product.extends && goods_detail.product && goods_detail.product.type == 3">
					<view class="goods-detail" @click="openMap(goods_detail.product.extends.field_3_address,goods_detail.product.extends.field_3_latitude,goods_detail.product.extends.field_3_longitude)">
						<view class="lf-font-32 lf-font-bold lf-m-b-20">{{goods_detail.product.extends.field_3_name}}</view>
						<view class="lf-row-between">
							<view class="lf-line-2 lf-font-28 lf-color-333">{{goods_detail.product.extends.field_3_address}}</view>
							<view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view>
						</view>
					</view> 
					<view class="goods-detail">
						<view class="lf-font-32 lf-font-bold lf-m-b-20">餐厅开放时间</view>
						<view >
							<u-table>
								<u-tr v-for="(item,index) in goods_detail.product.extends.field_3_open_time" :key="index">
									<u-th>{{item.section}}</u-th>
									<u-th>{{item.time}}</u-th>
									<u-th>{{item.week}}</u-th>
								</u-tr>
							</u-table>
						</view>
					</view>
					<view class="goods-detail">
						<view class="lf-font-32 lf-font-bold lf-m-b-20">包含套餐</view>
						<view class="lf-flex-column">
							<view class="lf-row-between child-tag" v-for="(item,index) in goods_detail.product.extends.field_3_package" :key="index">
								<view class="lf-color-333 lf-font-28">{{item.name}} {{item.num}}</view>
								<view class="lf-color-333 lf-font-28">{{item.price}}</view>
							</view>
						</view>
					</view> 
				</view>
				
				<!-- 酒店类型 -->
				<view v-if="goods_detail.product && goods_detail.product.extends && goods_detail.product.type == 1">
					<view class="goods-detail" v-if="goods_detail.product.extends.field_1_name" @click="openMap(goods_detail.product.extends.field_1_address,goods_detail.product.extends.field_1_latitude,goods_detail.product.extends.field_1_longitude)">
						<view class="lf-font-32 lf-font-bold lf-m-b-20" v-if="goods_detail.product.extends.field_1_name">{{goods_detail.product.extends.field_1_name}}</view>
						<view class="lf-row-between" v-if="goods_detail.product.extends.field_1_address">
							<view class="lf-line-2 lf-font-28 lf-color-333">{{goods_detail.product.extends.field_1_address}}</view>
							<view class="lf-iconfont lf-icon-dizhi lf-color-blue"></view>
						</view>
					</view>
					<!-- <zwyCalendar class="lf-m-t-20" type="sign" :startTime="'2021-10-01'" :endTime="'2021-11-01'"/> -->
					<view class="goods-detail" style="padding-bottom: 0;">
						<view class="lf-font-32 lf-font-bold lf-m-b-20">酒店设施</view>
						<view>
							<view class="label-box1">
								<view class="label-item" v-for="(item,index) in goods_detail.product.extends.field_1_tags" :key="index">
									{{item.tag}}
								</view>
							</view>
						</view>
					</view> 
				</view>
				<!-- 酒店类型弹窗 -->
				<u-popup v-model="hotel" mode="bottom" :closeable="true" border-radius="20">
					<view class="lf-p-32">
						<view class="price lf-flex">
							<lf-price :price="total_hotel_price || goods_detail.spec[type_index].price"></lf-price>
							<view class="pop-price lf-m-l-20 lf-font-24">¥{{ total_hotel_orginalprice || goods_detail.spec[type_index].original_price }}</view>
						</view>
						<view class="lf-font-24 lf-m-t-20 lf-color-555">
							酒店住房日期：{{live_date}}~{{leave_date}}
						</view>
						<view style="margin-top: 60rpx;">
							<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
							<view class="lf-m-t-30 choose-father">
								<view class="choose-span" :class="type_index==index?'choose-active':''"  v-for="(item,index) of goods_detail.spec" :key="index" @click="chooseTypehotel(index)">{{item.name}}</view>
							</view>
						</view>
						<view class="lf-m-t-30">
							<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
								<view class="lf-row-center">
									<text class="lf-font-28 lf-color-gray">入住时间</text>
								</view>
								<view class="lf-flex">
									<picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="live_date" @change="liveChange">
										<!-- <view class="lf-color-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
										<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ live_date }}</view>
									</picker>
									<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
								</view>
							</view>
							<view class="lf-row-between list-item" style="padding: 0!important;">
								<view class="lf-row-center">
									<text class="lf-font-28 lf-color-gray">离店时间</text>
								</view>
								<view class="lf-flex">
									<picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="leave_date" @change="leaveChange">
										<!-- <view class="lf-color-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
										<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ leave_date }}</view>
									</picker>
									<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
								</view>
							</view>
							<view class="lf-row-between list-item" style="padding: 0!important;">
								<view class="lf-row-center">
									<text class="lf-font-28 lf-color-gray">到店日期</text>
								</view>
								<view class="lf-flex">
									<picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="arrive_date" @change="arriveChange">
										<!-- <view class="lf-color-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
										<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ arrive_date }}</view>
									</picker>
									<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
								</view>
							</view>
							<view class="lf-row-between list-item" style="padding: 0!important;">
								<view class="lf-row-center">
									<text class="lf-font-28 lf-color-gray">到店时间</text>
								</view>
								<view class="lf-flex">
									<picker mode="time" :value="arrive_time" @change="arriveTimeChange">
										<!-- <view class="lf-color-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
										<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ arrive_time }}</view>
									</picker>
									<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
								</view>
							</view>
						</view>
						<view style="margin-top: 60rpx;">
							<button class="choose_btn" @click="toAddOrder()">立即购买</button>
						</view>
					</view>
				</u-popup>
				<!-- 旅游路线类型 -->
				<view v-if="goods_detail.product && goods_detail.product.type == 0 && goods_detail.product.extends.field_0_project">
					<view class="goods-detail">
						<view class="lf-font-32 lf-font-bold lf-m-b-20">包含项目</view>
						<view class="lf-flex-column">
							<!-- <view class="lf-row-between lf-m-b-20">
								<view class="lf-color-gray lf-font-28">项目名称</view>
								<view class="lf-color-gray lf-font-28">数量</view>
								<view class="lf-color-gray lf-font-28">额外费用</view>
							</view> -->
							<view class="lf-row-between child-tag" v-for="(item,index) in goods_detail.product.extends.field_0_project" :key="index" >
								<view class="lf-font-28 lf-color-black lf-flex-1">{{item.name}}</view>
								<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: center;">{{item.num}}</view>
								<view class="lf-font-28 lf-color-black lf-flex-1" style="text-align: right;">{{item.price}}</view>
							</view>
						</view>
					</view> 
					<view class="goods-detail" v-if="goods_detail.product.extends.field_0_date.end && goods_detail.product.extends.field_0_date.start">
						<view class="lf-row-between">
							<view class="lf-font-32 lf-font-bold">
								行程时间
							</view>
							<view class="lf-font-28 lf-color-black">
								<view>{{goods_detail.product.extends.field_0_date.start}}~{{goods_detail.product.extends.field_0_date.end}}</view>
							</view>
						</view>
						<!-- <zwyCalendar class="lf-m-t-20" type="sign" :startTime="'2021-10-01'" :endTime="'2021-11-01'"/> -->
					</view> 
				</view>
				<!-- 旅游路线类型弹窗 -->
				<u-popup v-model="travel_route" mode="bottom" :closeable="true" border-radius="20">
					<view class="lf-p-32">
						<view class="price lf-flex">
							<lf-price :price="choose_date_price || goods_detail.spec[type_index].price"></lf-price>
							<view class="pop-price lf-m-l-20 lf-font-24">¥{{ choose_date_orangilprice || goods_detail.spec[type_index].original_price }}</view>
						</view>
						<view class="lf-font-24 lf-m-t-20 lf-color-555">
							套餐类型：{{goods_detail.spec[type_index].name}}
						</view>
						<view style="margin-top: 60rpx;">
							<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
							<view class="lf-m-t-30 choose-father">
								<view class="choose-span" :class="type_index==index?'choose-active':''" v-for="(item,index) of goods_detail.spec" @click="chooseType(index)" :key="index">{{item.name}}</view>
							</view>
						</view>
						<view class="lf-m-t-30">
							<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
								<view class="lf-row-center">
									<text class="lf-font-28 lf-color-gray">使用时间</text>
								</view>
								<view class="lf-flex">
									<picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="go_date" @change="goChange">
										<!-- <view class="lf-color-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
										<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ go_date }}</view>
									</picker>
									<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
								</view>
							</view>
						</view>
						<view style="margin-top: 60rpx;">
							<button class="choose_btn" @click="toAddOrder()">立即购买</button>
						</view>
					</view>
				</u-popup>
				<!-- 车队 -->
				<u-popup v-model="car" mode="bottom" :closeable="true" border-radius="20">
					<view class="lf-p-32">
						<view class="price lf-flex">
							<lf-price :price="choose_date_price || goods_detail.spec[type_index].price"></lf-price>
							<view class="pop-price lf-m-l-20 lf-font-24">¥{{ choose_date_orangilprice || goods_detail.spec[type_index].original_price }}</view>
						</view>
						<view class="lf-font-24 lf-m-t-20 lf-color-555">
							套餐类型：{{goods_detail.spec[type_index].name}}
						</view>
						<view style="margin-top: 60rpx;">
							<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
							<view class="lf-m-t-30 choose-father">
								<view class="choose-span" :class="type_index==index?'choose-active':''" v-for="(item,index) of goods_detail.spec" @click="chooseType(index)" :key="index">{{item.name}}</view>
							</view>
						</view>
						<view class="lf-m-t-30">
							<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
								<view class="lf-row-center">
									<text class="lf-font-28 lf-color-gray">使用时间</text>
								</view>
								<view class="lf-flex">
									<picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="go_date" @change="goChange">
										<!-- <view class="lf-color-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
										<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ go_date }}</view>
									</picker>
									<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
								</view>
							</view>
						</view>
						<view style="margin-top: 60rpx;">
							<button class="choose_btn" @click="toAddOrder()">立即购买</button>
						</view>
					</view>
				</u-popup>
				<!-- 单项 -->
				<u-popup v-model="single" mode="bottom" :closeable="true" border-radius="20">
					<view class="lf-p-32">
						<view class="price lf-flex">
							<lf-price :price="choose_date_price || goods_detail.spec[type_index].price"></lf-price>
							<view class="pop-price lf-m-l-20 lf-font-24">¥{{ choose_date_orangilprice || goods_detail.spec[type_index].original_price }}</view>
						</view>
						<view class="lf-font-24 lf-m-t-20 lf-color-555">
							套餐类型：{{goods_detail.spec[type_index].name}}
						</view>
						<view style="margin-top: 60rpx;">
							<text class="lf-font-32 lf-font-bold" style="color: #131315;">套餐类型</text>
							<view class="lf-m-t-30 choose-father">
								<view class="choose-span" :class="type_index==index?'choose-active':''" v-for="(item,index) of goods_detail.spec" @click="chooseType(index)" :key="index">{{item.name}}</view>
							</view>
						</view>
						<view class="lf-m-t-30">
							<view class="lf-row-between">
								<text class="lf-font-32 lf-font-bold" style="color: #131315;">出行日期</text>
							</view>
							<view class="lf-row-between list-item lf-m-t-20" style="padding: 0!important;">
								<view class="lf-row-center">
									<text class="lf-font-28 lf-color-gray">使用时间</text>
								</view>
								<view class="lf-flex">
									<picker mode="date" :end="goods_detail.spec[type_index].date_end" :start="goods_detail.spec[type_index].date_start" :value="go_date" @change="goChange">
										<!-- <view class="lf-color-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
										<view class="lf-color-333 lf-text-right lf-font-28" style="width: 400rpx;">{{ go_date }}</view>
									</picker>
									<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
								</view>
							</view>
						</view>
						<view style="margin-top: 60rpx;">
							<button class="choose_btn" @click="toAddOrder()">立即购买</button>
						</view>
					</view>
				</u-popup>
				<!-- 公共部分 -->
				<!-- 商品详情 -->
				<view class="goods-detail" v-if="goods_detail.know">
					<view class="lf-font-32 lf-font-bold lf-m-b-20">购买须知</view>
					<rich-text :nodes="formatRichText(goods_detail.know)"></rich-text>
				</view> 
				<view class="goods-detail" v-if="goods_detail.content">
					<view class="lf-font-32 lf-font-bold lf-m-b-20">商品详情</view>
					<rich-text :nodes="formatRichText(goods_detail.content)"></rich-text>
				</view> 
				<!-- 修饰专用 -->
				<view class="extra"></view>
				<!-- 吸底操作按钮 -->
				<view class="lf-row-between fixed-bottom">
					<view class="lf-flex lf-p-t-10 lf-p-b-10">
						<view class="lf-flex-column lf-row-center icon-item" @click="$url('/pages/index/index', {type: 'switch'})">
							<image class="icon-img" src="../../static/tabbar/home1.png"></image>
							<view class="lf-m-t-1">首页</view>
						</view>
						<button class="lf-flex-column lf-row-center icon-item" open-type="contact">
							<image class="icon-img" src="../../static/center/service.png"></image>
							<view class="lf-m-t-1">客服</view>
						</button>
						<view class="lf-flex-column lf-row-center icon-item" @click="switchCollect">
							<image class="icon-img" src="../../static/center/collect-active.png" v-if="is_collect"></image>
							<image class="icon-img" src="../../static/center/collect.png" v-else></image>
							<view class="lf-m-t-1">{{ is_collect ? '已收藏' : '收藏' }}</view>
						</view>
						<button class="lf-flex-column lf-row-center icon-item" open-type="share">
							<image class="icon-img" src="../../static/center/share.png"></image>
							<view class="lf-m-t-1">分享</view>
						</button>
					</view>
					<button class="btn" @click="changePop(goods_detail.product.type)">立即购买</button>
				</view>
				<!-- 回到顶部 -->
				<!-- <u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}" :icon-style="{color: '#ffffff'}"></u-back-top> -->
				<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}"></u-back-top>
			</block>
		</skeleton>
	</view>
</template>

<script>
	import zwyCalendar from '@/components/zwy-calendar/zwy-calendar.vue'
	export default {
		data(){
			return {
				year: new Date().getFullYear(), // 当前年
				month: new Date().getMonth() + 1, // 当前月
				now_time: '',
				current: 0, // 轮播下标
				goods_id: 0,
				goods_detail: {},
				is_collect: false, // 1为当前收藏商品了，0为否
				skeletonLoading: true,
				//景区类型相关
				scenic_spot: false,
				type_index: 0,
				choose_date: '请选择使用时间',
				//酒店相关
				hotel: false,
				live_date: '请选择入住日期',
				leave_date: '请选择离店日期',
				arrive_date: '请选择到店日期',
				arrive_time: '请选择到店时间',
				totalLive: '',//住宿时间
				//旅游路线相关
				travel_route: false,
				go_date: '请选择使用时间',
				back_date: '请选择回程日期',
				//餐厅
				canteen: false,
				car: false,
				single:false,
				choose_date_price: '',
				choose_date_orangilprice: '',
				choose_date_specid: '',
				//酒店
				total_hotel_price: 0,
				total_hotel_orginalprice: 0,
				live_index: 0,
				leave_index: 0,
				hotel_specid: [],
				//uview picker
				show: false,
			}
		},
		components: {zwyCalendar},
		onLoad(options){
			this.goods_id = options.goods_id || options.id;
			
			console.log('商品',this.goods_id)
			this.getGoodsDetail();
		},
		computed: {
			isRight() {
				return function(val) {
					return this.$shared.isRight(val);
				}
			}
		},
		methods: {
			change(e) {
				console.log(e);
				this.go_date = e.result
			},
			compareDate(val) {
				var nowTime = new Date(new Date().toLocaleDateString()).getTime();
				let oldTime = new Date(new Date(val).toLocaleDateString()).getTime();
				if(nowTime>oldTime) {
					return false;
				}else {
					return true;
				}
			},
			pickerChange(e) {
				var nowTime = new Date(new Date().toLocaleDateString()).getTime();
				let oldTime = new Date(new Date(e.detail.value).toLocaleDateString()).getTime();
				if(oldTime<nowTime) {
					this.$msg('请选择正确的使用时间!');
					var date1 = new Date();
					var date2 = new Date(date1);
					date2.setDate(date1.getDate());
					this.choose_date = this.$shared.recordTime(date2, '-', 'date')
					let differrentList = this.goods_detail.spec[this.type_index].list;
					console.log(differrentList)
					differrentList.forEach((item,index) => {
						if(item.date == this.choose_date) {
							this.choose_date_price = this.goods_detail.spec[this.type_index].list[index].price;
							this.choose_date_orangilprice = this.goods_detail.spec[this.type_index].list[index].original_price;
							this.choose_date_specid = this.goods_detail.spec[this.type_index].list[index].id;
						}
					})
					return
				}else {
					this.choose_date = e.detail.value;
					let differrentList = this.goods_detail.spec[this.type_index].list;
					console.log(differrentList)
					differrentList.forEach((item,index) => {
						if(item.date == this.choose_date) {
							this.choose_date_price = this.goods_detail.spec[this.type_index].list[index].price;
							this.choose_date_orangilprice = this.goods_detail.spec[this.type_index].list[index].original_price;
							this.choose_date_specid = this.goods_detail.spec[this.type_index].list[index].id;
						}
					})
				}
			},
			arriveChange(e) {
				let live_date = new Date(new Date(this.live_date).toLocaleDateString()).getTime();
				let leave_date = new Date(new Date(this.leave_date).toLocaleDateString()).getTime();
				let arrive_date = new Date(new Date(e.detail.value).toLocaleDateString()).getTime();
				if(arrive_date>=live_date && arrive_date<=leave_date) {
					this.arrive_date = e.detail.value;
				}else {
					this.$msg('请选择正确的到店日期!');
					this.arrive_date = this.live_date;
					return
				}
			},
			arriveTimeChange(e) {
				this.arrive_time = e.detail.value;
			},
			goChange(e) {
				var nowTime = new Date(new Date().toLocaleDateString()).getTime();
				let oldTime = new Date(new Date(e.detail.value).toLocaleDateString()).getTime();
				if(oldTime<nowTime) {
					this.$msg('请选择正确的使用时间!');
					var date1 = new Date();
					var date2 = new Date(date1);
					date2.setDate(date1.getDate());
					this.go_date = this.$shared.recordTime(date2, '-', 'date')
					let differrentList = this.goods_detail.spec[this.type_index].list;
					console.log(differrentList)
					differrentList.forEach((item,index) => {
						if(item.date == this.go_date) {
							this.choose_date_price = this.goods_detail.spec[this.type_index].list[index].price;
							this.choose_date_orangilprice = this.goods_detail.spec[this.type_index].list[index].original_price;
							this.choose_date_specid = this.goods_detail.spec[this.type_index].list[index].id;
						}
					})
					return
				}else {
					this.go_date = e.detail.value;
					let differrentList = this.goods_detail.spec[this.type_index].list;
					console.log(differrentList)
					differrentList.forEach((item,index) => {
						if(item.date == this.go_date) {
							this.choose_date_price = this.goods_detail.spec[this.type_index].list[index].price;
							this.choose_date_orangilprice = this.goods_detail.spec[this.type_index].list[index].original_price;
							this.choose_date_specid = this.goods_detail.spec[this.type_index].list[index].id;
						}
					})
				}
			},
			backChange(e) {
				this.back_date = e.detail.value;
			},
			liveChange(e) {
				this.total_hotel_price = 0;
				this.total_hotel_orginalprice = 0;
				let compateDate = this.compareDate(e.detail.value);
				let live_date_compare = new Date(new Date(e.detail.value).toLocaleDateString()).getTime();
				let leave_date_compare = new Date(new Date(this.leave_date).toLocaleDateString()).getTime();
				if(live_date_compare>leave_date_compare) {
					this.$msg('入住时间要早于离店时间!')
					var date1 = new Date();
					var date2 = new Date(date1);
					date2.setDate(date1.getDate());
					this.live_date = this.$shared.recordTime(date2, '-', 'date')
					let differrentList = this.goods_detail.spec[this.type_index].list;
					differrentList.forEach((item,index) => {
						if(item.date == this.live_date) {
							this.live_index = index;
						}else if(item.date == this.leave_date) {
							this.leave_index = index;
						}
					})
					let total_date = differrentList.slice(this.live_index,this.leave_index);
					this.hotel_specid = [];
					total_date.reduce((list, item)=>{
					    this.total_hotel_price += parseInt(item.price);
						this.total_hotel_orginalprice += parseInt(item.original_price);
						this.hotel_specid.push(item.id);
						console.log(this.hotel_specid);
					}, []);
					return
				}
				if(compateDate) {
					this.live_date = e.detail.value;
					let live_date = new Date(new Date(e.detail.value).toLocaleDateString()).getTime();
					let leave_date = new Date(new Date(this.leave_date).toLocaleDateString()).getTime();
					this.totalLive = parseInt(Math.abs(leave_date - live_date) / 1000 / 60 / 60 / 24);
				}else {
					this.$msg('入住时间要大于当前时间!');
				}
				
				let differrentList = this.goods_detail.spec[this.type_index].list;
				differrentList.forEach((item,index) => {
					if(item.date == e.detail.value) {
						this.live_index = index;
					}else if(item.date == this.leave_date) {
						this.leave_index = index;
					}
				})
				let total_date = differrentList.slice(this.live_index,this.leave_index);
				this.hotel_specid = [];
				total_date.reduce((list, item)=>{
				    this.total_hotel_price += parseInt(item.price);
					this.total_hotel_orginalprice += parseInt(item.original_price);
					this.hotel_specid.push(item.id);
					console.log(this.hotel_specid);
				}, []);
				 
			},
			leaveChange(e) {
				this.total_hotel_price = 0;
				this.total_hotel_orginalprice = 0;
				let live_date = new Date(new Date(this.live_date).toLocaleDateString()).getTime();
				let leave_date = new Date(new Date(e.detail.value).toLocaleDateString()).getTime();
				if(leave_date>live_date || leave_date==live_date) {
					this.leave_date = e.detail.value;
				}else {
					this.$msg('离店日期要大于入住日期!');
					var date1 = new Date();
					var date2 = new Date(date1);
					date2.setDate(date1.getDate() + 1);
					this.leave_date = this.$shared.recordTime(date2, '-', 'date')
					return
				}
				this.totalLive = parseInt(Math.abs(leave_date - live_date) / 1000 / 60 / 60 / 24); 
				
				let differrentList = this.goods_detail.spec[this.type_index].list;
				console.log(differrentList)
				differrentList.forEach((item,index) => {
					if(item.date == this.live_date) {
						this.live_index = index;
					}else if(item.date == e.detail.value) {
						this.leave_index = index;
					}
				})
				let total_date = differrentList.slice(this.live_index,this.leave_index);
				this.hotel_specid = [];
				total_date.reduce((list, item)=>{
				    this.total_hotel_price += parseInt(item.price);
					this.total_hotel_orginalprice += parseInt(item.original_price);
					this.hotel_specid.push(item.id);
					console.log(this.hotel_specid);
				}, []);
			},
			chooseType(index) {
				this.type_index = index;
				this.choose_date_price = 0;
				this.choose_date_orangilprice = 0;
				let differrentList = this.goods_detail.spec[this.type_index].list;
				differrentList.forEach((item,index) => {
					if(item.date == this.go_date) {
						this.choose_date_price = this.goods_detail.spec[this.type_index].list[index].price;
						this.choose_date_orangilprice = this.goods_detail.spec[this.type_index].list[index].original_price;
						this.choose_date_specid = this.goods_detail.spec[this.type_index].list[index].id;
					}
				})
			},
			chooseTypehotel(index) {
				this.type_index = index;
				this.total_hotel_price = 0;
				this.total_hotel_orginalprice = 0;
				let differrentList = this.goods_detail.spec[this.type_index].list;
				console.log(differrentList)
				differrentList.forEach((item,index) => {
					if(item.date == this.live_date) {
						this.live_index = index;
					}else if(item.date == this.leave_date) {
						this.leave_index = index;
					}
				})
				let total_date = differrentList.slice(this.live_index,this.leave_index);
				this.hotel_specid = [];
				total_date.reduce((list, item)=>{
				    this.total_hotel_price += parseInt(item.price);
					this.total_hotel_orginalprice += parseInt(item.original_price);
					this.hotel_specid.push(item.id);
					console.log(this.hotel_specid);
				}, []);
			},
			changePop(type) {
				if(type == 2) {
					//景区
					this.scenic_spot = true;
				}else if(type == 1) {
					//酒店
					this.hotel = true;
				}else if(type == 0) {
					//旅游路线
					this.travel_route = true;
				}else if(type == 3) {
					//餐厅
					this.canteen = true;
				}else if(type == 4) {
					//车队
					this.car = true;
				}else if(type == 5) {
					//单项
					this.single = true;
				}
				
			},
			// 打开地图
			openMap(address,lat,lng){
				// let { address, lat, lng } = this.goods_detail?.store || {};
				uni.openLocation({
				  longitude: Number(lng),
				  latitude: Number(lat),
				  scale: 20,
				  name: address
			   });
			},
			getGoodsDetail(){
				this.$http(this.API.API_ADVICEDETAILS, {id: this.goods_id}).then(res => {
					this.skeletonLoading = false;
					this.goods_detail = res.data;
					this.is_collect = Boolean(res.data.is_collect) || false;
				}).catch(err => {
					this.skeletonLoading = false;
					setTimeout(() => {
						this.$toBack();
					}, 1000);
				})
			},
			// 切换商品收藏
			switchCollect(){
				let userInfo = uni.getStorageSync('userinfo') || {};
				if(!userInfo.id || !userInfo.nickname || !userInfo.avatar){
					this.$url('/pages/login/index?type=userinfo');
					return;
				}
				
				if(this.is_collect) {
					this.$http(this.API.API_DELCOLLECT, {agent_product_id:this.goods_id}).then(res => {
						this.$msg('取消收藏成功!')
						this.is_collect = false
						console.log(res)
					})
				}else {
					this.$http(this.API.API_ADDCOLLECT, {agent_product_id:this.goods_id}).then(res => {
						this.$msg('添加收藏成功!')
						this.is_collect = true
						console.log(res)
					})
				}
			},
			// 拨打电话
			makePhoneCall(phoneStr){
				uni.makePhoneCall({
					phoneNumber: String(phoneStr)
				})
			},
			// 跳转到确认下单页面
			toAddOrder(){
				//0旅游路线1酒店2景区3餐厅
				if(this.goods_detail.product.type == 2) {
					//景区
					if(this.go_date != '请选择使用时间') {
						let date_compare = this.compareDate(this.go_date);
						console.log(date_compare)
						if(date_compare){
							let goods_id = this.goods_detail.id;
							let godds_type = this.goods_detail.product.type;
							let enter_time = this.go_date;
							let spec_id = this.choose_date_specid;
							let type_text = this.goods_detail.spec[this.type_index].name;
							this.$url('/pages/order/confirm_order?goods_id='+ goods_id+ '&spec_id='+ spec_id +'&goods_type='+godds_type+'&departure_time='+enter_time+'&goods_typetext='+type_text);
						}else {
							this.$msg('请选择正确的使用时间!');
						}
					}else {
						this.$msg('请选择使用时间!');
					}
				}else if(this.goods_detail.product.type == 1) {
					let date1 = false;
					let date2 = false;
					let date3 = false;
					if(this.live_date != '请选择入住日期') {
						let date_compare = this.compareDate(this.live_date);
						if(date_compare){
							date1 = true;
						}else {
							this.$msg('请选择正确的入住日期!');
							return
						}
					}else {
						this.$msg('请选择入住日期!');
						return
					}
					if(this.leave_date != '请选择离店日期') {
						let date_compare = this.compareDate(this.leave_date);
						if(date_compare){
							date2 = true;
						}else {
							this.$msg('请选择正确的离店日期!');
							return
						}
					}else {
						this.$msg('请选择离店日期!');
						return
					}
					if(this.arrive_date != '请选择到店日期') {
						let date_compare = this.compareDate(this.arrive_date);
						if(date_compare){
							date3 = true;
						}else {
							this.$msg('请选择正确的到店日期!');
							return
						}
					}else {
						this.$msg('请选择到店日期!');
						return
					}
					if(this.arrive_time == '请选择到店时间') {
						this.$msg('请选择到店时间!');
						return
					}
					if(date1&&date2&&date3) {
						let arrival_timedate = this.arrive_date + ' ' + this.arrive_time
						console.log(arrival_time)
						let goods_id = this.goods_detail.id;
						let godds_type = this.goods_detail.product.type;
						let spec_id = this.hotel_specid;
						let type_text = this.goods_detail.spec[this.type_index].name;
						//酒店
						let check_in_time = this.live_date;
						let check_out_time = this.leave_date;
						let totalLive = this.totalLive;
						let arrival_time = arrival_timedate;
						this.$url('/pages/order/confirm_order?goods_id='+ goods_id+ '&spec_id='+ spec_id +'&goods_type='+godds_type+'&check_in_time='+check_in_time+'&goods_typetext='+type_text+'&check_out_time='+check_out_time+'&arrival_time='+arrival_time+'&totalLive='+totalLive);
					}
				}else if(this.goods_detail.product.type == 0 || this.goods_detail.product.type == 4 || this.goods_detail.product.type == 5) {
					if(this.go_date != '请选择使用时间') {
						let date_compare = this.compareDate(this.go_date);
						console.log(date_compare)
						if(date_compare){
							let goods_id = this.goods_detail.id;
							let godds_type = this.goods_detail.product.type;
							let departure_time = this.go_date;
							let spec_id = this.choose_date_specid;
							let type_text = this.goods_detail.spec[this.type_index].name;
							this.$url('/pages/order/confirm_order?goods_id='+ goods_id+ '&spec_id='+ spec_id +'&goods_type='+godds_type+'&departure_time='+departure_time+'&goods_typetext='+type_text);
						}else {
							this.$msg('请选择正确的使用时间!');
						}
					}else {
						this.$msg('请选择使用时间!');
					}
				}
			},
			// 预览图片
			lookImg(index){
				this.$u.throttle(() => {
					let goods_banner = this.goods_detail.banners || [];
					let banners = goods_banner.map(item => item.cover);
					uni.previewImage({
						urls: banners,
						current: index
					})
				}, 200);
			},
			// 富文本处理
			formatRichText(richText){
			  if(richText != null){
					let newRichText= richText.replace(/<img[^>]*>/gi, function(match, capture){
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newRichText = newRichText.replace(/style="[^"]+"/gi,function(match, capture){
						match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
						return match;
					});
					newRichText = newRichText.replace(/<br[^>]*\/>/gi, '');
					newRichText = newRichText.replace(/\<img/gi, '<img style="width:100%;height:auto;display:block;margin:10px 0;"');
					return newRichText;
				}else{
					return null;
				}
			}
		},
		onShareAppMessage(){
			let goods = this.goods_detail;
			let title = goods.title;
			let imageUrl = goods.pictures[0] || goods.picture;
			let path = '/pages/route/index?route=goods_detail&id='+ goods.id;
			console.log("path", path);
			return {
				title,
				path,
				imageUrl
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
		overflow-x: hidden;
	}
</style>
<style lang="scss" scoped="scoped">
	/deep/.pop-self .u-drawer .u-mask{
		z-index: 99!important;
	}
	.choose_btn {
		width: 686rpx;
		height: 100rpx;
		background: #1998FE;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.choose-father {
		display: flex;
		width: 700rpx;
		flex-wrap: wrap;
	}
	.choose-active {
		background: #1998FE!important;
		font-size: 24rpx;
		color: white!important;
	}
	.choose-span {
		width: max-content;
		margin: 0 30rpx 30rpx 0;
		height: 64rpx;
		background: #F5F5F5;
		border-radius: 32rpx;
		font-size: 24rpx;
		color: #333333;
		padding: 0 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.pop-price {
		text-decoration: line-through;
		color: #777777;
		margin-right: 22rpx;
	}
	.list-item{
		height: 80rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 32rpx;
		position: relative;
		.feedback-btn{
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
			background: transparent;
		}
	}
	.child-tag {
		margin-bottom: 20rpx;
		&:last-child {
			margin-bottom: 0;
		}
	}
	.swiper-box{
		width: 750rpx;
		height: 490rpx;
		background-color: #FFFFFF;
	}
	
	.head-info{
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		padding: 0 32rpx;
		padding-top: 20rpx;
		background-color: #FFFFFF;
		// .price>view:nth-of-type(1){
		// 	color: #FF0000;
		// 	margin-right: 22rpx;
		// 	font-weight: bold;
		// }
		.price>view:nth-of-type(1){
			text-decoration: line-through;
			color: #777777;
			margin-right: 22rpx;
		}
		.price>view:nth-of-type(2){
			width: max-content;
			padding: 0 18rpx;
			height: 46rpx;
			background-color: #1998FE;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
		}
	}
	.label-box{
		min-height: 130rpx;
		width: 100%;
		border-top: 1rpx solid #E5E5E5;
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 0 10rpx 0;
		.label-item{
			width: max-content;
			padding: 20rpx;
			height: 70rpx;
			border-radius: 10rpx;
			border: 2rpx solid #1998FE;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #1998FE;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.label-box1{
		min-height: 130rpx;
		width: 100%;
		border-top: 1rpx solid #E5E5E5;
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx 0 10rpx 0;
		.label-item{
			width: max-content;
			padding: 0 10rpx;
			height: 54rpx;
			border-radius: 10rpx;
			border: 2rpx solid #1998FE;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #1998FE;
			background: rgba(25, 152, 254, 0.05);
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
	
	.address-box{
		width: 750rpx;
		height: auto;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 32rpx;
		margin-top: 20rpx;
		.shop-img{
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
		}
	}
	
	.goods-detail{
		width: 750rpx;
		height: auto;
		background-color: #FFFFFF;
		padding: 32rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.goods-img{
			width: 100%;
		}
	}
	
	.extra{
		width: 100%;
		height: 120rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	
	.fixed-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		width: 100%;
		height: auto;
		padding: 0 32rpx;
		border-top: 1rpx solid #e5e5e5;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.icon-item{
			margin-right: 16rpx;
			background-color: transparent;
			margin: 0;
			line-height: initial;
			font-size: 28rpx;
			font-weight: inherit;
			margin-right: 10rpx;
			padding: 0;
			width: 88rpx;
			position: relative;
			&:first-child{
				padding-left: 0;
			}
			.icon-img{
				height: 50rpx;
				width: 50rpx;
			}
		}
		.btn{
			margin: 0;
			padding: 0;
			width: 208rpx;
			height: 80rpx;
			background-color: #1998FE;
			color: #FFFFFF;
			line-height: 80rpx;
			font-size: 32rpx;
			border-radius: 42rpx;
		}
	}
</style>