jufubao-third 1.0.21 → 1.0.22-beta10

package/src/components/JfbThirdRideHome/JfbThirdRideHome.vue

@@ -0,0 +1,831 @@
+<template>
+  <view
+    class="jfb-third-ride-home"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-third-ride-home__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-third-ride-home__edit-icon" @click.stop="delEdit">
+        <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
+      </view>
+    </view>
+    <!-- #endif --> 
+    <view class="jfb-third-ride-home__body">
+      <!-- tab切换：现在用车 / 预约用车 -->
+      <view class="jfb-third-ride-home__body-tab">
+        <view class="jfb-third-ride-home__body-tab-inner">
+          <view
+            class="jfb-third-ride-home__tab-item"
+            :class="{ 'jfb-third-ride-home__tab-item--active' : tabIndex === 0 }"
+            @click="handleTabChange(0)"
+          >现在用车</view>
+          <view
+            class="jfb-third-ride-home__tab-item"
+            :class="{ 'jfb-third-ride-home__tab-item--active' : tabIndex === 1 }"
+            @click="handleTabChange(1)"
+          >预约用车</view>
+        </view>
+      </view>
+
+      <!-- 预约区域：出发日期时间 + 起终点地址 + 按钮(白色背景) -->
+      <view class="jfb-third-ride-home__body-panel">
+        <view
+          v-if="tabIndex === 1"
+          class="jfb-third-ride-home__body-date"
+          @click="handleOpenTimePicker"
+        >
+          <view class="jfb-third-ride-home__date-label-row">
+            <view class="jfb-third-ride-home__date-icon">
+              <xd-font-icon icon="iconshijian-01" color="#333" size="28"></xd-font-icon>
+            </view>
+            <view class="jfb-third-ride-home__date-label">出发日期时间</view>
+          </view>
+          <view class="jfb-third-ride-home__date-value">{{ bookDateText }}</view>
+        </view>
+
+        <!-- 起终点输入框，点击跳转选择位置 -->
+        <view class="jfb-third-ride-home__body-address">
+          <view class="jfb-third-ride-home__dot-column">
+            <view class="jfb-third-ride-home__dot jfb-third-ride-home__dot--start"></view>
+            <view class="jfb-third-ride-home__dot-line"></view>
+            <view class="jfb-third-ride-home__dot jfb-third-ride-home__dot--end"></view>
+          </view>
+          <view class="jfb-third-ride-home__address-content">
+            <view class="jfb-third-ride-home__address-item" @click="handleChooseAddress('start')">
+              <input
+                class="jfb-third-ride-home__address-input"
+                v-model="startAddress"
+                placeholder="当前位置"
+                placeholder-class="jfb-third-ride-home__address-placeholder"
+                disabled
+              />
+            </view>
+            <view class="jfb-third-ride-home__address-item" @click="handleChooseAddress('end')">
+              <input
+                class="jfb-third-ride-home__address-input"
+                v-model="endAddress"
+                placeholder="你要去哪里?"
+                placeholder-class="jfb-third-ride-home__address-placeholder"
+                disabled
+              />
+            </view>
+          </view>
+        </view>
+
+        <!-- 操作按钮 -->
+        <view class="jfb-third-ride-home__body-btn">
+          <xd-button
+            width="360rpx"
+            type="primary"
+            radius="50rpx"
+            @click="handleSubmit"
+          >{{ btnText }}</xd-button>
+        </view>
+      </view>
+
+      <!-- 全部出行记录 -->
+      <view class="jfb-third-ride-home__body-record" @click="handleGoRecord">
+        <view class="jfb-third-ride-home__record-left">
+          <view class="jfb-third-ride-home__record-icon">
+            <xd-font-icon icon="iconyuyuejilu" color="#e53a2f" size="32"></xd-font-icon>
+          </view>
+          <view class="jfb-third-ride-home__record-text">全部出行记录</view>
+        </view>
+        <view class="jfb-third-ride-home__record-arrow">
+          <xd-font-icon icon="iconxiangyou_xian" color="#c8c9cc" size="40"></xd-font-icon>
+        </view>
+      </view>
+    </view>
+
+    <!-- 预约时间选择器(uniapp picker-view) -->
+    <view
+      v-if="showTimePicker"
+      class="jfb-third-ride-home__picker-mask"
+      @click="handleCloseTimePicker"
+    >
+      <view class="jfb-third-ride-home__picker" @click.stop>
+        <view class="jfb-third-ride-home__picker-header">
+          <view class="jfb-third-ride-home__picker-btn" @click="handleCloseTimePicker">取消</view>
+          <view class="jfb-third-ride-home__picker-title">选择用车时间</view>
+          <view class="jfb-third-ride-home__picker-btn jfb-third-ride-home__picker-btn--confirm" @click="handleConfirmTimePicker">确定</view>
+        </view>
+        <picker-view
+          class="jfb-third-ride-home__picker-view"
+          :value="pickerValue"
+          @change="handlePickerChange"
+        >
+          <picker-view-column class="jfb-third-ride-home__picker-column">
+            <view
+              class="jfb-third-ride-home__picker-item"
+              v-for="(item, index) in dateList"
+              :key="index"
+            >{{ item }}</view>
+          </picker-view-column>
+          <picker-view-column class="jfb-third-ride-home__picker-column">
+            <view
+              class="jfb-third-ride-home__picker-item"
+              v-for="(item, index) in hourList"
+              :key="index"
+            >{{ item }}</view>
+          </picker-view-column>
+          <picker-view-column class="jfb-third-ride-home__picker-column">
+            <view
+              class="jfb-third-ride-home__picker-item"
+              v-for="(item, index) in minuteList"
+              :key="index"
+            >{{ item }}</view>
+          </picker-view-column>
+        </picker-view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbThirdRideHomeMixin from "./JfbThirdRideHomeMixin";
+  import { gCPVal } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import XdButton from "@/components/XdButton/XdButton"
+  import storage from "@/common/storage"
+  //跨页选择地址时用于暂存结果的storage key(选择完成后立即删除)
+  const RIDE_ADDRESS_KEY = 'jfb_third_ride_address';
+  export default {
+    name: "JfbThirdRideHome",
+    components: {
+      XdFontIcon,
+      XdButton
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbThirdRideHomeMixin
+    ],
+    data() {
+      return {
+        //tab: 0=现在用车 1=预约用车
+        tabIndex: 0,
+        //是否展示预约时间选择器
+        showTimePicker: false,
+        //picker-view 选中索引[日期, 小时, 分钟]
+        pickerValue: [0, 0, 0],
+        //日期列(月日，如 08-25 星期二)
+        dateList: [],
+        //每个日期可预约的起止分钟(当天0点起算)，用于首尾日期限制
+        dayData: [],
+        //小时列(00~23)
+        hourList: [],
+        //分钟列(00~55 每5分钟)
+        minuteList: [],
+        //预约时间展示文案
+        bookDateText: '',
+        //确认后的预约时间(13位毫秒时间戳)，用于提交接口
+        bookTimeStamp: 0,
+        //起点地址
+        startAddress: '',
+        //终点地址
+        endAddress: '',
+        //起点完整地址对象(含name/address/lng/lat)，用于下单估算接口获取坐标与名称
+        startPoint: {},
+        //终点完整地址对象(含name/address/lng/lat)，用于下单估算接口获取坐标与名称
+        endPoint: {},
+
+        //跳转路径配置
+        selectLocationPath: '',
+        rideRecordPath: '',
+        rideConfirmPath: '',
+        //业务线
+        xnamespace: '',
+      }
+    },
+    computed: {
+      //按钮文案：现在用车->立即叫车 预约用车->预约用车
+      btnText() {
+        return this.tabIndex === 0 ? '立即叫车' : '预约用车';
+      },
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.init(this.container);
+    },
+    methods: {
+      onJfbLoad(options) {
+
+        // jfbRootExec('baiduUserLogin', {
+
+        //   vm: this,//   data: {
+
+        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+
+        //   }
+
+        // }).then().catch()
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        //跳转路径配置(参考JfbMallCart使用gCPVal从容器配置读取)
+        this.selectLocationPath = gCPVal(container, 'content.selectLocationPath', {value: ""}).value;
+        console.log('selectLocationPath', this.selectLocationPath)
+        this.rideRecordPath = gCPVal(container, 'content.rideRecordPath', {value: ""}).value;
+        this.rideConfirmPath = gCPVal(container, 'content.rideConfirmPath', {value: ""}).value;
+        //业务线
+        this.xnamespace = gCPVal(container, 'xnamespace', '');
+      },
+      /**
+       * @description 切换tab
+       * @param index {number} 0:现在用车 1:预约用车
+       */
+      handleTabChange(index) {
+        this.tabIndex = index;
+      },
+      /**
+       * @description 补齐两位数
+       * @param n {number}
+       * @returns {string}
+       */
+      formatNum(n) {
+        return n < 10 ? '0' + n : '' + n;
+      },
+      /**
+       * @description 数组索引越界保护
+       * @param index {number}
+       * @param len {number}
+       * @returns {number}
+       */
+      clampIndex(index, len) {
+        if (index >= len) return len - 1;
+        if (index < 0) return 0;
+        return index;
+      },
+      /**
+       * @description 打开预约时间选择器(先请求接口获取最早/最晚可预约时间，再据此生成时间数据)
+       */
+      handleOpenTimePicker() {
+        jfbRootExec("getRideReservationTime", {
+          vm: this,
+          data: {
+            channel_code: 'amapcar',
+          }
+        }).then(res => {
+          this.buildTimePickerData(res && res.start_time, res && res.end_time);
+        }).catch(() => {
+          //接口异常时无数据，不打开选择器
+        });
+      },
+      /**
+       * @description 根据起止时间戳生成三列时间选择数据(月日/时/分)并打开选择器
+       * 规则：中间天00:00~23:55、第一天从start_time开始、最后一天到end_time之前
+       * @param startTime {number} 接口返回的最早可预约时间戳(秒/毫秒)
+       * @param endTime {number} 接口返回的最晚可预约时间戳(秒/毫秒)
+       */
+      buildTimePickerData(startTime, endTime) {
+        //秒级时间戳转毫秒；为空则用当前时间
+        if (startTime) startTime = startTime < 1e10 ? startTime * 1000 : startTime;
+        else startTime = Date.now();
+        if (endTime) endTime = endTime < 1e10 ? endTime * 1000 : endTime;
+        else {
+          //无截止时间时，默认当天23:55
+          const tmp = new Date(startTime);
+          endTime = new Date(tmp.getFullYear(), tmp.getMonth(), tmp.getDate(), 23, 55, 59).getTime();
+        }
+        const sD = new Date(startTime);
+        const eD = new Date(endTime);
+        if (eD < sD) eD = sD;
+        //可预约天数(含首尾)
+        const startDayNoon = new Date(sD.getFullYear(), sD.getMonth(), sD.getDate()).getTime();
+        const endDayNoon = new Date(eD.getFullYear(), eD.getMonth(), eD.getDate()).getTime();
+        const dayCount = Math.round((endDayNoon - startDayNoon) / 86400000) + 1;
+        const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
+        this.dateList = [];
+        this.dayData = [];
+        for (let i = 0; i < dayCount; i++) {
+          const d = new Date(sD.getFullYear(), sD.getMonth(), sD.getDate() + i);
+          //第一天显示"今天"，其余显示"周X"
+          const suffix = i === 0 ? '今天' : `周${weekdays[d.getDay()]}`;
+          this.dateList.push(`${this.formatNum(d.getMonth() + 1)}-${this.formatNum(d.getDate())} ${suffix}`);
+          //当天默认时刻范围 00:00 ~ 23:55
+          let minTotal = 0;
+          let maxTotal = 23 * 60 + 55;
+          if (i === 0) {
+            //第一天：从 start_time 起，向上取整到5分钟
+            minTotal = Math.ceil((sD.getHours() * 60 + sD.getMinutes()) / 5) * 5;
+          }
+          if (i === dayCount - 1) {
+            //最后一天：到 end_time 之前，向下取整到5分钟
+            maxTotal = Math.floor((eD.getHours() * 60 + eD.getMinutes() - 1) / 5) * 5;
+          }
+          if (minTotal > 23 * 60 + 55) minTotal = 23 * 60 + 55;
+          if (maxTotal < minTotal) maxTotal = minTotal;
+          //记录当天0点时间戳，用于确认后转13位毫秒时间戳
+          const dayBase = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+          this.dayData.push({ minTotal, maxTotal, dayBase });
+        }
+        //默认选中第一天最早可预约时刻
+        this.pickerValue = [0, 0, 0];
+        this.refreshDay(0);
+        this.refreshMinute(0, 0);
+        this.bookDateText = this.buildTimeText(0, 0, 0);
+        this.showTimePicker = true;
+      },
+      /**
+       * @description 根据日期索引刷新小时列
+       * @param dateIndex {number}
+       */
+      refreshDay(dateIndex) {
+        const day = this.dayData[dateIndex];
+        if (!day) { this.hourList = []; return; }
+        const startHour = Math.floor(day.minTotal / 60);
+        const endHour = Math.floor(day.maxTotal / 60);
+        const list = [];
+        for (let h = startHour; h <= endHour; h++) {
+          const hStart = h * 60;
+          const hEnd = h * 60 + 55;
+          if (hEnd >= day.minTotal && hStart <= day.maxTotal) list.push(`${this.formatNum(h)}点`);
+        }
+        this.hourList = list;
+      },
+      /**
+       * @description 根据日期索引与小时索引刷新分钟列(每5分钟)
+       * @param dateIndex {number}
+       * @param hourIndex {number}
+       */
+      refreshMinute(dateIndex, hourIndex) {
+        const day = this.dayData[dateIndex];
+        const hour = parseInt(this.hourList[hourIndex]);
+        if (!day || isNaN(hour)) { this.minuteList = []; return; }
+        const list = [];
+        for (let m = 0; m < 60; m += 5) {
+          const total = hour * 60 + m;
+          if (total >= day.minTotal && total <= day.maxTotal) list.push(`${this.formatNum(m)}分`);
+        }
+        this.minuteList = list;
+      },
+      /**
+       * @description 拼接选择时间文案
+       * @param dateIndex {number}
+       * @param hourIndex {number}
+       * @param minuteIndex {number}
+       * @returns {string}
+       */
+      buildTimeText(dateIndex, hourIndex, minuteIndex) {
+        const date = this.dateList[dateIndex] || '';
+        const hour = (this.hourList[hourIndex] || '00点').replace(/点$/, '');
+        const minute = (this.minuteList[minuteIndex] || '00分').replace(/分$/, '');
+        return `${date} ${hour}:${minute}`;
+      },
+      /**
+       * @description 根据三列值生成13位毫秒时间戳
+       * @param dateIndex {number}
+       * @param hourIndex {number}
+       * @param minuteIndex {number}
+       * @returns {number|0} 13位毫秒时间戳，非法时返回0
+       */
+      buildTimeStamp(dateIndex, hourIndex, minuteIndex) {
+        const day = this.dayData[dateIndex];
+        const hour = parseInt(this.hourList[hourIndex]);
+        const minute = parseInt(this.minuteList[minuteIndex]);
+        if (!day || isNaN(hour) || isNaN(minute)) return 0;
+        //当天0点时间戳 + 时、分对应毫秒
+        return day.dayBase + hour * 60 * 60 * 1000 + minute * 60 * 1000;
+      },
+      /**
+       * @description 关闭预约时间选择器
+       */
+      handleCloseTimePicker() {
+        this.showTimePicker = false;
+      },
+      /**
+       * @description picker-view 三列联动滚动
+       * @param e {object} 事件对象
+       */
+      handlePickerChange(e) {
+        const [d, h, m] = e.detail.value;
+        const dateIndex = this.clampIndex(d, this.dateList.length);
+        const hourIndex = this.clampIndex(h, this.hourList.length);
+        const minuteIndex = this.clampIndex(m, this.minuteList.length);
+        if (dateIndex !== this.pickerValue[0]) {
+          //日期变化：重置小时、分钟
+          this.pickerValue = [dateIndex, 0, 0];
+          this.refreshDay(dateIndex);
+          this.refreshMinute(dateIndex, 0);
+        } else if (hourIndex !== this.pickerValue[1]) {
+          //小时变化：重置分钟
+          this.pickerValue = [dateIndex, hourIndex, 0];
+          this.refreshMinute(dateIndex, hourIndex);
+        } else {
+          this.pickerValue = [dateIndex, hourIndex, minuteIndex];
+        }
+      },
+      /**
+       * @description 确认选择预约时间
+       */
+      handleConfirmTimePicker() {
+        const [dateIndex, hourIndex, minuteIndex] = this.pickerValue;
+        this.bookDateText = this.buildTimeText(dateIndex, hourIndex, minuteIndex);
+        //生成13位毫秒时间戳供接口使用
+        this.bookTimeStamp = this.buildTimeStamp(dateIndex, hourIndex, minuteIndex);
+        this.showTimePicker = false;
+      },
+      /**
+       * @description 选择起/终点位置
+       * @param type {string} start:起点 end:终点
+       */
+      handleChooseAddress(type) {
+        // if (!this.selectLocationPath) {
+        //   console.warn('未配置选择位置路径 selectLocationPath');
+        //   return;
+        // }
+        this.$xdUniHelper.navigateTo({ url: `${this.selectLocationPath}?type=${type}` });
+      },
+      /**
+       * @description 从选择地址页返回后，读取暂存地址并回显，随后立即删除避免存储过多
+       */
+      restoreSelectedAddress() {
+        const saved = storage.get(RIDE_ADDRESS_KEY);
+        if (!saved) return;
+        if (saved.start) {
+          this.startPoint = saved.start;
+          this.startAddress = saved.start.name || saved.start.address || '';
+        }
+        if (saved.end) {
+          this.endPoint = saved.end;
+          this.endAddress = saved.end.name || saved.end.address || '';
+        }
+        //及时删除存储信息，避免本地缓存过多(数据已回显到组件状态，提交时直接取组件状态)
+        storage.remove(RIDE_ADDRESS_KEY);
+      },
+      /**
+       * @description 跳转全部出行记录
+       */
+      handleGoRecord() {
+        // if (!this.rideRecordPath) {
+        //   console.warn('未配置出行记录路径 rideRecordPath');
+        //   return;
+        // }
+        this.$xdUniHelper.redirectTo({ url: this.rideRecordPath });
+      },
+      /**
+       * @description 提交叫车/预约
+       */
+      handleSubmit() {
+        // if (!this.rideConfirmPath) {
+        //   console.warn('未配置下单确认路径 rideConfirmPath');
+        //   return;
+        // }
+        //起终点完整地址对象从storage回显到组件状态后读取
+        const start = this.startPoint || {};
+        const end = this.endPoint || {};
+        const data = {
+          xnamespace: this.xnamespace,
+          channel_code: 'amapcar',
+          start_lng: start.lng != null ? String(start.lng) : '',
+          start_lat: start.lat != null ? String(start.lat) : '',
+          end_lng: end.lng != null ? String(end.lng) : '',
+          end_lat: end.lat != null ? String(end.lat) : '',
+          start_name: start.name || '',
+          end_name: end.name || '',
+          start_address: start.address || '',
+          end_address: end.address || '',
+          service_type: this.tabIndex === 0 ? 1 : 2,
+          ride_types: '1,12,3,4',
+        };
+        //仅预约用车才传departure_time(所选时间的13位毫秒时间戳)；现在用车不传
+        if (this.tabIndex !== 0) {
+          data.departure_time = this.bookTimeStamp;
+        }
+        jfbRootExec('getRideEstimatePrice', { vm: this, data })
+          .then(res => {
+            //接口返回 {list:[{name,address,lng,lat,distance}]}
+            console.log('getRideEstimatePrice result', res);
+            this.$xdUniHelper.navigateTo({
+              url: this.rideConfirmPath + `?estimate_id=${res.estimate_id}`
+            })
+          })
+          .catch(err => {
+            console.warn('getRideEstimatePrice error', err);
+          });
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+        //从选择地址页返回，读取暂存的地址并回显
+        this.restoreSelectedAddress();
+      },
+      onJfbHide(options) {
+        console.log('event.onJfbHide', options)
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+      },
+      onJfbUpdate(...data) {
+        console.log('event.onJfbUpdate', data)
+      },
+      onJfbCustomEvent(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style lang="less" scoped>
+  @import "./JfbThirdRideHomeLess.less";
+
+  //start 页面新增样式
+  .jfb-third-ride-home {
+    box-sizing: border-box;
+
+    &__body{
+        position: relative;
+        overflow: hidden;
+        z-index: 2;
+        background: #f8f8f8;
+        border-radius: 20rpx;
+        // padding: 20rpx 24rpx 20rpx;
+        box-sizing: border-box;
+
+        &-tab {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          background: #ffffff;
+          box-sizing: border-box;
+        }
+
+        &-tab-inner {
+          display: flex;
+          align-items: center;
+          flex: 1;
+          background: #f8f8f8;
+          border-radius: 16rpx;
+          margin: 16rpx 24rpx;
+          box-sizing: border-box;
+          border: 2rpx solid #EEEEEE;
+        }
+
+        &-panel {
+          background: #ffffff;
+          margin: 16rpx;
+          padding: 32rpx;
+        }
+
+        &-date {
+          display: flex;
+          flex-direction: column;
+          border: 1rpx solid #ebedf0;
+          border-radius: 16rpx;
+          background: #ffffff;
+          padding: 16rpx;
+        }
+
+        &-address {
+          display: flex;
+          align-items: stretch;
+          margin-top: 32rpx;
+        }
+
+        &-btn {
+          display: flex;
+          justify-content: center;
+          margin-top: 32rpx;
+        }
+
+        &-record {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          background-color: #ffffff;
+          margin: 16rpx 16rpx 0 16rpx;
+          padding: 24rpx;
+          border-radius: 16rpx;
+        }
+    }
+
+    &__tab-item {
+    position: relative;
+    flex: 1;
+    padding: 18rpx 0;
+    font-size: unit(30, rpx);
+    color: #333333;
+    text-align: center;
+    border-radius: 12rpx;
+
+    //两个tab间距为4px
+    & + & {
+      margin-left: 4px;
+    }
+
+    &--active {
+      background: #ffffff;
+      color: #e5010e;
+    }
+  }
+
+    &__date-icon {
+      display: flex;
+      align-items: center;
+      margin-right: 12rpx;
+    }
+
+    &__date-label-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8rpx;
+    }
+
+    &__date-label {
+      font-size: unit(24, rpx);
+      color: #999999;
+    }
+
+    &__date-value {
+      font-size: unit(30, rpx);
+      font-weight: bold;
+      color: #333333;
+    }
+
+    &__date-arrow {
+      display: flex;
+      align-items: center;
+    }
+
+    &__address-item {
+      display: flex;
+      align-items: center;
+      height: 92rpx;
+      padding: 0 20rpx;
+      background: #f7f8fa;
+      border-radius: 16rpx;
+
+      & + & {
+        margin-top: 16rpx;
+      }
+    }
+
+    &__address-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &__dot-column {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-right: 16rpx;
+      padding: 40rpx 0;
+    }
+
+    &__dot {
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 50%;
+
+      &--start {
+        background: #00b578;
+      }
+
+      &--end {
+        background: #ee0a24;
+      }
+    }
+
+    &__dot-line {
+      flex: 1;
+      width: 2rpx;
+      min-height: 20rpx;
+      background: #dcdee0;
+      margin: 4rpx 0;
+    }
+
+    &__address-input {
+      flex: 1;
+      height: 100%;
+      font-size: unit(30, rpx);
+      color: #333333;
+      //H5上disabled的input会拦截点击，穿透到父级view的@click
+      pointer-events: none;
+    }
+
+    &__address-placeholder {
+      color: #999999;
+    }
+
+    &__record-left {
+      display: flex;
+      align-items: center;
+    }
+
+    &__record-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 56rpx;
+      height: 56rpx;
+      margin-right: 16rpx;
+      background: #fdeaea;
+      border-radius: 16rpx;
+    }
+
+    &__record-text {
+      font-size: unit(28, rpx);
+      color: #333333;
+      font-weight: bold;
+    }
+
+    &__record-arrow {
+      display: flex;
+      align-items: center;
+    }
+
+    //预约时间选择器
+    &__picker-mask {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 9999;
+      background: rgba(0, 0, 0, .5);
+    }
+
+    &__picker {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: #ffffff;
+      border-radius: 24rpx 24rpx 0 0;
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+    &__picker-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 88rpx;
+      padding: 0 30rpx;
+    }
+
+    &__picker-title {
+      font-size: unit(30, rpx);
+      font-weight: bold;
+      color: #333333;
+    }
+
+    &__picker-btn {
+      font-size: unit(28, rpx);
+      color: #999999;
+      padding: 10rpx;
+
+      &--confirm {
+        color: #e53a2f;
+      }
+    }
+
+    &__picker-view {
+      width: 100%;
+      height: 400rpx;
+    }
+
+    /deep/ .uni-picker-view-indicator {
+      height: 80rpx;
+      top: 50%;
+      -webkit-transform: translateY(-50%);
+      transform: translateY(-50%);
+    }
+
+    &__picker-column {
+      height: 400rpx;
+    }
+
+    &__picker-item {
+      height: 80rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: unit(30, rpx);
+      color: #333333;
+      text-align: center;
+    }
+  }
+  //end
+</style>