jufubao-third 1.0.21 → 1.0.22-beta2

package/src/components/JfbThirdRideRecord/JfbThirdRideRecord.vue

@@ -0,0 +1,517 @@
+<template>
+  <view
+    class="jfb-third-ride-record"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-third-ride-record__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-third-ride-record__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-record__body">
+      <!-- 顶部导航栏 -->
+      <view class="rec-nav">
+        <view class="rec-nav__back" @click="handleBack">
+          <xd-font-icon icon="iconzuojiantou" color="#333" size="36"></xd-font-icon>
+        </view>
+        <text class="rec-nav__title">全部出行记录</text>
+      </view>
+
+      <!-- 记录列表 -->
+      <view class="rec-list">
+        <template v-for="(group, gIdx) in groups">
+          <view :key="gIdx" v-if="group.items.length" class="rec-group">
+            <!-- 分组标题 -->
+            <view class="rec-group__head">
+              <view class="rec-group__dot" :class="'rec-group__dot--' + group.dotColor"></view>
+              <text class="rec-group__label">{{ group.label }}</text>
+              <text class="rec-group__count">{{ group.count }}单</text>
+            </view>
+
+            <!-- 记录卡片 -->
+            <view
+              v-for="item in group.items"
+              :key="item.channel_order_id"
+              class="rec-card"
+              @click="handleCardClick(item)"
+            >
+              <!-- 状态行 -->
+              <view class="rec-card__head">
+                <view class="rec-status" :class="'rec-status--' + item.statusType">
+                  <view class="rec-status__dot"></view>
+                  <text>{{ item.statusText }}</text>
+                </view>
+                <text class="rec-card__time">{{ item.time }}</text>
+              </view>
+
+              <!-- 路线 -->
+              <view class="rec-route">
+                <view class="rec-route__line">
+                  <view class="rec-dot rec-dot--start"></view>
+                  <text class="rec-route__addr">{{ item.from }}</text>
+                </view>
+                <view class="rec-route__line">
+                  <view class="rec-dot rec-dot--end"></view>
+                  <text class="rec-route__addr">{{ item.to }}</text>
+                </view>
+              </view>
+
+              <!-- 底部信息 -->
+              <view class="rec-card__foot">
+                <text class="rec-card__meta">{{ item.meta }}</text>
+                <view class="rec-card__price">
+                  <text class="rec-card__sym">¥</text>
+                  <text class="rec-card__val">{{ item.price }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </template>
+
+        <!-- 空状态 -->
+        <view v-if="!ingList.length && !comList.length && !comLoading" class="rec-empty">
+          <text>暂无出行记录</text>
+        </view>
+
+        <!-- 已完成订单分页提示 -->
+        <view v-if="comList.length" class="rec-list__foot">
+          <text v-if="comLoading">加载中...</text>
+          <text v-else-if="!hasNext">没有更多了</text>
+          <text v-else>上拉加载更多</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbThirdRideRecordMixin from "./JfbThirdRideRecordMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  export default {
+    name: "JfbThirdRideRecord",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbThirdRideRecordMixin
+    ],
+    data() {
+      return {
+        xnamespace: "",
+        orderDetailsPath: "",
+        page_token: "1",      //已完成订单分页参数(字符串)，首页为"1"，后续使用接口返回的 next_page_token
+        page_size: 10,
+        next_page_token: "",  //下一页token
+        hasNext: false,       //是否还有下一页
+        comLoading: false,    //已完成订单加载中
+        ingTotal: 0,          //进行中订单总数
+        comTotal: 0,          //已完成订单总数
+        comList: [],  //已完成订单
+        ingList: [],  //进行中订单
+        //进行中订单 show_status 与状态样式的映射（已完成固定为 finished）
+        statusTypeMap: {
+          1: 'dispatching', //正在派单
+          2: 'waiting',     //待上车
+          3: 'riding'       //行程中
+        }
+      }
+    },
+    computed: {
+      groups() {
+        return [
+          {
+            label: '进行中',
+            count: this.ingTotal,
+            dotColor: 'orange',
+            items: this.ingList.map(item => this.formatItem(item, 'ING'))
+          },
+          {
+            label: '已完成',
+            count: this.comTotal,
+            dotColor: 'gray',
+            items: this.comList.map(item => this.formatItem(item, 'COM'))
+          }
+        ]
+      }
+    },
+    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: {
+      async onJfbLoad(options) {
+        this.setNameSpace(options);
+        //进行中订单：只获取一次，不分页
+        this.getList('ING').then(res => {
+          this.ingList = res.list || [];
+          this.ingTotal = res.total_size || this.ingList.length;
+        })
+        //已完成订单：分页获取
+        this.p_getComList();
+      },
+      getList(type = 'COM', options = {}){
+        return jfbRootExec("rideOrderList", {
+          vm: this,
+          data: {
+            xnamespace: this.xnamespace,
+            order_type: type,
+            ...options
+          }
+        })
+      },
+      p_getComList(){
+        if(this.comLoading) return;
+        this.comLoading = true;
+        let data = {
+          page_token: this.page_token,
+          page_size: this.page_size
+        }
+        this.getList('COM', data).then(res => {
+          let list = res.list || [];
+          if(this.page_token == '1'){
+            this.comList = list;
+          }else{
+            this.comList = this.comList.concat(list);
+          }
+          this.comTotal = res.total_size || this.comList.length;
+          this.next_page_token = res.next_page_token || "";
+          this.hasNext = this.next_page_token !== "";
+          this.comLoading = false;
+        }).catch(() => {
+          this.comLoading = false;
+        })
+      },
+      /**
+       * @description 接口订单数据转换为卡片展示数据
+       * @param item {object} 接口订单数据
+       * @param orderType {string} ING进行中，COM已完成
+       */
+      formatItem(item, orderType){
+        return {
+          ...item,
+          statusType: this.getStatusType(item, orderType),
+          statusText: item.show_status_name,
+          time: this.formatTime(item.depart_time || item.request_time),
+          from: item.start_name,
+          to: item.end_name,
+          meta: this.formatMeta(item),
+          price: this.formatFee(item.total_fee)
+        }
+      },
+      getStatusType(item, orderType){
+        if(orderType === 'COM') return 'finished';
+        return this.statusTypeMap[item.show_status] || 'dispatching';
+      },
+      formatMeta(item){
+        let parts = [];
+        if(item.order_service_type_name) parts.push(item.order_service_type_name);
+        if(item.ride_type_name) parts.push(item.ride_type_name);
+        let mileage = Number(item.mileage || item.estimate_mileage || 0);
+        if(mileage > 0) parts.push((mileage / 1000).toFixed(1) + 'km');
+        return parts.join(' · ');
+      },
+      //金额：分转元
+      formatFee(fee){
+        return (Number(fee || 0) / 100).toFixed(2);
+      },
+      //出发时间：今天/昨天显示相对时间，其余显示 MM/DD HH:mm
+      formatTime(val){
+        if(!val && val !== 0) return '';
+        let date;
+        //纯数字为unix时间戳（兼容秒/毫秒）
+        if(/^\d+$/.test(String(val))){
+          let ts = Number(val);
+          if(String(ts).length <= 10) ts = ts * 1000;
+          date = new Date(ts);
+        }else{
+          date = new Date(String(val).replace(/-/g, '/'));
+        }
+        if(isNaN(date.getTime())) return val;
+        let pad = n => (n < 10 ? '0' + n : '' + n);
+        let hm = pad(date.getHours()) + ':' + pad(date.getMinutes());
+        let now = new Date();
+        if(this.isSameDay(date, now)) return '今天 ' + hm;
+        let yest = new Date(now.getTime());
+        yest.setDate(now.getDate() - 1);
+        if(this.isSameDay(date, yest)) return '昨天 ' + hm;
+        return pad(date.getMonth() + 1) + '/' + pad(date.getDate()) + ' ' + hm;
+      },
+      isSameDay(a, b){
+        return a.getFullYear() === b.getFullYear()
+          && a.getMonth() === b.getMonth()
+          && a.getDate() === b.getDate();
+      },
+      handleBack() {
+        jfbRootExec('navigateBack', { vm: this })
+      },
+      handleCardClick(item) {
+        this.$xdUniHelper.navigateTo({
+          url: this.orderDetailsPath + '?order_id=' + item.channel_order_id
+        })
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.xnamespace = getContainerPropsValue(container, 'content.xnamespace', this.projectAttr.business_code || '');
+        this.orderDetailsPath = getContainerPropsValue(container, 'content.orderDetailsPath', {value: ""}).value;
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        //已完成订单触底加载更多
+        if(this.hasNext && !this.comLoading){
+          this.page_token = this.next_page_token;
+          this.p_getComList();
+        }
+      },
+      onJfbShow(options) {
+        console.log('event.onJfbShow', options)
+      },
+      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 scoped lang="less">
+  @import "./JfbThirdRideRecordLess.less";
+
+  .jfb-third-ride-record {
+    background: #f5f5f5;
+    min-height: 100vh;
+
+    &__body {
+      padding-bottom: 40rpx;
+    }
+  }
+
+  // 导航栏
+  .rec-nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    height: 88rpx;
+    background: #fff;
+
+    &__back {
+      position: absolute;
+      left: 24rpx;
+      display: flex;
+      align-items: center;
+    }
+
+    &__title {
+      font-size: 34rpx;
+      font-weight: 600;
+      color: #333;
+    }
+  }
+
+  // 空状态
+  .rec-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 160rpx 0;
+    color: #999;
+    font-size: 28rpx;
+  }
+
+  // 分页加载提示
+  .rec-list__foot {
+    text-align: center;
+    padding: 24rpx 0;
+    color: #999;
+    font-size: 24rpx;
+  }
+
+  // 分组
+  .rec-group {
+    margin-top: 24rpx;
+
+    &__head {
+      display: flex;
+      align-items: center;
+      padding: 0 30rpx;
+      margin-bottom: 24rpx;
+    }
+
+    &__dot {
+      width: 16rpx;
+      height: 16rpx;
+      border-radius: 50%;
+      margin-right: 16rpx;
+
+      &--orange { background: #FFC870; }
+      &--gray   { background: #CCCCCC; }
+    }
+
+    &__label {
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #333;
+      margin-right: 16rpx;
+    }
+
+    &__count {
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+
+  // 状态标签
+  .rec-status {
+    display: flex;
+    align-items: center;
+    padding: 6rpx 20rpx;
+    border-radius: 24rpx;
+    font-size: 24rpx;
+    font-weight: 500;
+
+    &__dot {
+      width: 12rpx;
+      height: 12rpx;
+      border-radius: 50%;
+      margin-right: 16rpx;
+    }
+
+    //正在派单
+    &--dispatching {
+      background: rgba(255, 141, 26, 0.05);
+      color: rgba(255, 141, 26, 1);
+      .rec-status__dot { background: rgba(255, 141, 26, 1); }
+    }
+
+    //行程中
+    &--riding {
+      background: rgba(85, 75, 230, 0.05);
+      color: rgba(85, 75, 230, 1);
+      .rec-status__dot { background: rgba(85, 75, 230, 1); }
+    }
+
+    //预约待上车
+    &--waiting {
+      background: rgba(7, 182, 212, 0.05);
+      color: rgba(7, 182, 212, 1);
+      .rec-status__dot { background: rgba(7, 182, 212, 1); }
+    }
+
+    //已完成
+    &--finished {
+      background: rgba(18, 185, 129, 0.05);
+      color: rgba(18, 185, 129, 1);
+      .rec-status__dot { background: rgba(18, 185, 129, 1); }
+    }
+  }
+
+  // 路线圆点
+  .rec-dot {
+    width: 16rpx;
+    height: 16rpx;
+    border-radius: 50%;
+    margin-right: 32rpx;
+    flex-shrink: 0;
+
+    &--start { background: #52c41a; }
+    &--end   { background: #f5222d; }
+  }
+
+  // 记录卡片
+  .rec-card {
+    background: #fff;
+    margin: 0 20rpx 16rpx;
+    padding: 24rpx 32rpx;
+    border-radius: 16rpx;
+
+    &__head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24rpx;
+    }
+
+    &__time {
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    &__foot {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 20rpx;
+    }
+
+    &__meta {
+      font-size: 24rpx;
+      color: #999;
+    }
+
+    &__price {
+      display: flex;
+      align-items: baseline;
+    }
+
+    &__sym {
+      font-size: 24rpx;
+      color: #333;
+      font-weight: 600;
+    }
+
+    &__val {
+      font-size: 40rpx;
+      color: #333;
+      font-weight: 700;
+    }
+  }
+
+  // 路线区域
+  .rec-route {
+    &__line {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &__addr {
+      font-size: 28rpx;
+      color: #333;
+      font-weight: 500;
+    }
+  }
+</style>

package/src/components/JfbThirdRideRecord/JfbThirdRideRecordLess.less

@@ -0,0 +1,80 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-third-ride-record {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: var(--preview-z-index);
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(0, rpx);
+    height: unit(50, rpx);
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .4);
+    border-radius: 0 0 0 20rpx;
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+    padding: 0 6rpx 0 6px;
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-third-ride-record {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbThirdRideRecord/JfbThirdRideRecordMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-third-ride-record'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbThirdRideRecord/Mock.js

@@ -0,0 +1,44 @@
+'use strict';
+
+module.exports = {
+  rideOrderList: {
+    "total_size": 1,
+    "next_page_token": "",
+    "list": [
+      {
+        "channel_order_id": "40160320001350016846830466",
+        "user_id": 5000020,
+        "mobile": "",
+        "user_name": "",
+        "start_name": "中国民生银行(北京西客站支行)Mock",
+        "end_name": "清华大学",
+        "ride_type": 1,
+        "ride_type_name": "经济型",
+        "total_fee": 8527,
+        "enterprise_amount": 0,
+        "person_amount": 0,
+        "estimate_price": 10430,
+        "estimate_mileage": 19200,
+        "estimate_time": 2473,
+        "duration": "41",
+        "mileage": "19200",
+        "show_status": 4,
+        "show_status_name": "已完成",
+        "to_order_detail": "N",
+        "order_service_type": 1,
+        "order_service_type_name": "实时单",
+        "driver_name": "亢师傅",
+        "driver_phone": "17677632483",
+        "license_plate": "沪C7***15",
+        "car_type": "起亚K5",
+        "car_color": "金色",
+        "fee_detail": "",
+        "request_time": "2026-08-14 16:48:07",
+        "depart_time": 1786697287,
+        "get_on_time": "",
+        "get_off_time": ""
+      }
+    ],
+    "request_id": "8d5f00c80f8d22ce"
+  }
+}

package/src/components/JfbThirdRideRecord/cusAttr/advanced.js

@@ -0,0 +1,22 @@
+'use strict';
+
+export default (data, gValue, gColor, oldData) => {
+  return [
+    //高级
+    {
+      label: '订单详情',
+      groupKey:'advanced',
+      className: 'input100',
+      ele: 'xd-select-pages-path',
+      valueKey: 'orderDetailsPath',
+      placeholder: '请选择订单详情跳转路径',
+      labelInline: true,
+      inline: false,
+      value: data['orderDetailsPath'] || null,
+      setting: {
+        mode:'new',
+        router: XdBus.getParentApi('getPagesTree')
+      },
+    },
+  ].filter(i=>i)
+}