Leadfyy.co
/
uniapp-hainan
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

日历选择器优化

master
Enzo 4 years ago
parent
21430867a4
commit
d504f6e8e3
3 changed files with 326 additions and 443 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 540
      pages/goodsDetail/index.vue
  2. 3
      pages/order/confirm_order.vue
  3. 8
      uview-ui/components/u-calendar/u-calendar.vue

540
pages/goodsDetail/index.vue
View File

@ -3,9 +3,12 @@
<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 :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>
<image mode="aspectFill" :src="item" style="width: 100%; height: 100%;" @click="lookImg(index)">
</image>
</swiper-item>
</swiper>
<!-- 商品主要信息 -->
@ -24,7 +27,8 @@
</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 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)">
@ -38,10 +42,14 @@
</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="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-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>
@ -49,7 +57,8 @@
<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-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>
@ -60,26 +69,28 @@
<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 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 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-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 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 }}
@ -87,7 +98,9 @@
<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 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">
@ -113,10 +126,13 @@
<!-- 餐厅类型 -->
<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="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-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>
@ -124,7 +140,8 @@
<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-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>
@ -135,7 +152,8 @@
<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-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>
@ -145,10 +163,14 @@
<!-- 酒店类型 -->
<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="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-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>
@ -157,7 +179,8 @@
<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">
<view class="label-item"
v-for="(item,index) in goods_detail.product.extends.field_1_tags" :key="index">
{{item.tag}}
</view>
</view>
@ -165,11 +188,16 @@
</view>
</view>
<!-- 酒店类型弹窗 -->
<u-calendar v-model="hotel_show_range" mode="range" 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="changeRange()" z-index="9999"></u-calendar>
<u-picker v-model="hotel_show_single" @confirm="changeArrive()" mode="time" :params="params" zIndex="100000"></u-picker>
<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 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}}
@ -177,55 +205,29 @@
<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 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>
<text class="lf-font-28 lf-color-gray" @click="hotel_show_range = 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="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 @click="hotel_show_range = true">{{live_date}}~{{leave_date}}</text>
<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-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>
<text class="lf-font-28 lf-color-gray" @click="hotel_show_single = true">到店时间</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 @click="hotel_show_single = true">{{arrive_date}}</text>
<text class="lf-iconfont lf-icon-xiangyou lf-text-vertical lf-m-l-10"></text>
</view>
</view>
@ -236,29 +238,32 @@
</view>
</u-popup>
<!-- 旅游路线类型 -->
<view v-if="goods_detail.product && goods_detail.product.type == 0 && goods_detail.product.extends.field_0_project">
<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-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 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="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>
{{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'"/> -->
@ -269,7 +274,8 @@
<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 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}}
@ -277,19 +283,21 @@
<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 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>
<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-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
<!-- <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>
</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>
@ -304,7 +312,8 @@
<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 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}}
@ -312,19 +321,21 @@
<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 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>
<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-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
<!-- <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>
</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>
@ -339,7 +350,8 @@
<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 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}}
@ -347,7 +359,9 @@
<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 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">
@ -356,13 +370,13 @@
</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>
<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-555 lf-text-right" style="width: 400rpx;">{{ '请选择收货时间...' }}</view> -->
<!-- <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>
</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>
@ -387,7 +401,8 @@
<!-- 吸底操作按钮 -->
<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'})">
<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>
@ -396,7 +411,8 @@
<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-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>
@ -409,7 +425,8 @@
</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>
<u-back-top :scroll-top="pageScrollTop" :custom-style="{background: 'rgba(51, 51 51, 0.3)'}">
</u-back-top>
</block>
</skeleton>
</view>
@ -420,6 +437,14 @@
export default {
data() {
return {
params: {
year: true,
month: true,
day: true,
hour: true,
minute: true,
second: false
},
year: new Date().getFullYear(), // 当前年
month: new Date().getMonth() + 1, // 当前月
now_time: '',
@ -458,9 +483,13 @@
hotel_specid: [],
//uview picker
show: false,
hotel_show_range: false,
hotel_show_single: false
}
},
components: {zwyCalendar},
components: {
zwyCalendar
},
onLoad(options) {
this.goods_id = options.goods_id || options.id;
@ -475,113 +504,21 @@
}
},
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
changeArrive(e) {
let arrrive_day = e.year+'-'+e.month+'-'+e.day;
this.compareDate(arrrive_day)
if(this.compareDate(arrrive_day)) {
this.arrive_date = e.year+'-'+e.month+'-'+e.day+' '+e.hour+':'+e.minute;
}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;
}
})
this.$msg('不能选择过去的时间!');
}
},
backChange(e) {
this.back_date = e.detail.value;
},
liveChange(e) {
changeRange(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')
this.live_date = e.startDate;
this.leave_date = e.endDate;
let differrentList = this.goods_detail.spec[this.type_index].list;
differrentList.forEach((item, index) => {
if (item.date == this.live_date) {
@ -598,69 +535,29 @@
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('入住时间要大于当前时间!');
}
},
change(e) {
console.log(e);
this.go_date = e.result
let differrentList = this.goods_detail.spec[this.type_index].list;
console.log(differrentList)
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;
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;
}
})
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;
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 {
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;
return true;
}
})
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;
@ -670,7 +567,8 @@
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_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;
}
})
@ -730,7 +628,9 @@
});
},
getGoodsDetail() {
this.$http(this.API.API_ADVICEDETAILS, {id: this.goods_id}).then(res => {
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;
@ -750,13 +650,17 @@
}
if (this.is_collect) {
this.$http(this.API.API_DELCOLLECT, {agent_product_id:this.goods_id}).then(res => {
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.$http(this.API.API_ADDCOLLECT, {
agent_product_id: this.goods_id
}).then(res => {
this.$msg('添加收藏成功!')
this.is_collect = true
console.log(res)
@ -772,71 +676,20 @@
// 跳转到确认下单页面
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('请选择正确的到店日期!');
if(this.goods_detail.product.type == 1) {
if(this.live_date=='请选择入住日期') {
this.$msg('请选择住店日期!')
return
}
}else {
this.$msg('请选择到店日期!');
if(this.leave_date=='请选择离店日期') {
this.$msg('请选择住店日期!')
return
}
if(this.arrive_time == '请选择到店时间') {
this.$msg('请选择到店时间!');
if(this.arrive_date=='请选择到店日期') {
this.$msg('请选择到店日期!')
return
}
if(date1&&date2&&date3) {
let arrival_timedate = this.arrive_date + ' ' + this.arrive_time
console.log(arrival_time)
let arrival_timedate = this.arrive_date;
let goods_id = this.goods_detail.id;
let godds_type = this.goods_detail.product.type;
let spec_id = this.hotel_specid;
@ -845,26 +698,24 @@
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);
let form_type = encodeURIComponent(JSON.stringify(this.goods_detail.product.diy_form));
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_timedate +
'&totalLive=' + totalLive+'&form_type='+form_type);
}else {
if(this.go_date=='请选择使用时间') {
this.$msg('请选择使用时间!')
return
}
}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('请选择使用时间!');
}
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);
}
},
// 预览图片
@ -888,11 +739,13 @@
return match;
});
newRichText = newRichText.replace(/style="[^"]+"/gi, function(match, capture) {
match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
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;"');
newRichText = newRichText.replace(/\<img/gi,
'<img style="width:100%;height:auto;display:block;margin:10px 0;"');
return newRichText;
} else {
return null;
@ -924,6 +777,7 @@
/deep/.pop-self .u-drawer .u-mask {
z-index: 99 !important;
}
.choose_btn {
width: 686rpx;
height: 100rpx;
@ -935,16 +789,19 @@
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;
@ -958,17 +815,20 @@
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%;
@ -977,12 +837,15 @@
background: transparent;
}
}
.child-tag {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
}
.swiper-box {
width: 750rpx;
height: 490rpx;
@ -996,6 +859,7 @@
padding: 0 32rpx;
padding-top: 20rpx;
background-color: #FFFFFF;
// .price>view:nth-of-type(1){
// color: #FF0000;
// margin-right: 22rpx;
@ -1006,6 +870,7 @@
color: #777777;
margin-right: 22rpx;
}
.price>view:nth-of-type(2) {
width: max-content;
padding: 0 18rpx;
@ -1018,6 +883,7 @@
color: #FFFFFF;
}
}
.label-box {
min-height: 130rpx;
width: 100%;
@ -1025,6 +891,7 @@
display: flex;
flex-wrap: wrap;
padding: 30rpx 0 10rpx 0;
.label-item {
width: max-content;
padding: 20rpx;
@ -1048,6 +915,7 @@
display: flex;
flex-wrap: wrap;
padding: 30rpx 0 10rpx 0;
.label-item {
width: max-content;
padding: 0 10rpx;
@ -1072,6 +940,7 @@
background-color: #FFFFFF;
padding: 32rpx;
margin-top: 20rpx;
.shop-img {
width: 60rpx;
height: 60rpx;
@ -1086,6 +955,7 @@
padding: 32rpx;
box-sizing: border-box;
margin-top: 20rpx;
.goods-img {
width: 100%;
}
@ -1110,6 +980,7 @@
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;
@ -1121,14 +992,17 @@
padding: 0;
width: 88rpx;
position: relative;
&:first-child {
padding-left: 0;
}
.icon-img {
height: 50rpx;
width: 50rpx;
}
}
.btn {
margin: 0;
padding: 0;

3
pages/order/confirm_order.vue
View File

@ -271,6 +271,7 @@
//图片上传
hostImg: '',
img_list: [], // 反馈问题图片
form_type: ''
}
},
onLoad(e) {
@ -279,6 +280,8 @@
this.goods_type = e.goods_type;
this.btn_type = e.btn_type;
this.order_id = e.order_id;
this.form_type = JSON.parse(decodeURIComponent(e.form_type));;
console.log('表单格式',this.form_type)
var arr = e.spec_id.split(",")
console.log(arr)
this.hotel_specid = arr

8
uview-ui/components/u-calendar/u-calendar.vue
View File

@ -40,7 +40,8 @@
<view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
<view class="lf-flex-column" style="justify-content: center;align-items: center;">
<text>{{ index + 1 }}</text>
<text class="lf-font-24" v-if="!openDisAbled(year,month,index+1)">￥788</text>
<text class="lf-font-24" v-if="(year+'-'+formatNum(month)+'-'+formatNum((index + 1))) == item2.date && !openDisAbled(year,month,index+1)" v-for="(item2,index2) of monthPrice" :key="index2">￥{{item2.price | filterFloat}}</text>
<!-- <text class="lf-font-24" v-if="(year+'-'+formatNum(month)+'-'+formatNum((index + 1))) == item2.date && !openDisAbled(year,month,index+1)" v-for="(item2,index2) of monthPrice" :key="index2">库:{{item2.stock}}</text> -->
</view>
</view>
<!-- <view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
@ -277,6 +278,11 @@
this.init()
}
},
filters: {
filterFloat(val) {
return parseFloat(val).toString(); // 过滤价格出现.00的情况
}
},
created() {
this.init()
console.log('当前规格的价格',this.monthPrice)

Write Preview
Loading…
Cancel
Save