jufubao-third 1.0.21 → 1.0.22-beta10

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

@@ -0,0 +1,27 @@
+'use strict';
+import { dataVal } from "@/utils/AttrTools";
+
+export default (data, gValue, gColor, oldData) => {
+  return [
+    //内容
+    {
+      label: "业务线",
+      ele: "xd-choose-namespace",
+      valueKey: "xnamespace",
+      value: dataVal({data, key:'xnamespace', dValue:"", gValue}),
+      groupKey:'content',
+      className: 'input80',
+      labelInline:true,
+      placeholder: '请选择业务线',
+      notice: '空继承上级业务线',
+      inline: false,
+      handleCustom: (cb) => {
+        XdBus.getParentApi('getOptionsNamespaces')()
+          .then(res => {
+            cb(res.list)
+          })
+          .catch();
+      }
+    },
+  ].filter(i=>i)
+}

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

@@ -0,0 +1,7 @@
+'use strict';
+
+export default (data, gValue, gColor, oldData) => {
+  return [
+    //风格
+  ].filter(i=>i)
+}

package/src/components/JfbThirdRideStartEnd/Api.js

@@ -0,0 +1,20 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Ride
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    //设置方法名字当别忘记加上【模块名字】：Ride
+    mapFnName: 'searchRidePlaces',
+    title: '打车 - 搜索地点',
+    path: '/thirdmall-pb/v1/:channel_code/ride/search-places',
+    isRule: false,
+    data: {
+      channel_code: ['渠道编码', 'String', '必选','amapcar'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbThirdRideStartEnd/Attr.js

@@ -0,0 +1,17 @@
+'use strict';
+
+import style from "./cusAttr/style";
+import advanced from "./cusAttr/advanced";
+import content from "./cusAttr/content";
+
+export default {
+  style: [],
+  advanced: [],
+  content: (data, gValue, gColor, oldData={})=>{
+    return [
+      ...content(data, gValue, gColor, oldData),
+      ...style(data, gValue, gColor, oldData),
+      ...advanced(data, gValue, gColor, oldData),
+    ].filter(i=>i)
+  },
+}

package/src/components/JfbThirdRideStartEnd/JfbThirdRideStartEnd.vue

@@ -0,0 +1,382 @@
+<template>
+  <view
+    class="jfb-third-ride-start-end"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-third-ride-start-end__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-third-ride-start-end__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-start-end__body">
+      <!-- 定位失败页面 -->
+      <view v-if="locateFailed" class="jfb-third-ride-start-end__locate-fail">
+        <view class="jfb-third-ride-start-end__locate-fail-icon">
+          <xd-font-icon icon="iconmingchengtubiao" color="#e53a2f" size="40"></xd-font-icon>
+        </view>
+        <view class="jfb-third-ride-start-end__locate-fail-title">定位失败</view>
+        <view class="jfb-third-ride-start-end__locate-fail-desc">无法获取当前位置，请检查定位权限后重试</view>
+        <view class="jfb-third-ride-start-end__locate-fail-btn" @click="handleRetryLocation">
+          <xd-font-icon icon="iconmian-loading" color="#ffffff" size="30" style="margin-right: 10rpx"></xd-font-icon>
+          重试
+        </view>
+      </view>
+
+      <!-- 搜索列表 -->
+      <view v-else class="jfb-third-ride-start-end__list">
+        <view
+          class="jfb-third-ride-start-end__item"
+          v-for="(item, index) in placeList"
+          :key="index"
+          @click="handleSelect(item)"
+        >
+          <view class="jfb-third-ride-start-end__item-icon">
+            <xd-font-icon icon="icondingweixiao" color="#e53a2f" size="30"></xd-font-icon>
+          </view>
+          <view class="jfb-third-ride-start-end__item-info">
+            <view class="jfb-third-ride-start-end__item-name">{{ item.name }}</view>
+            <view class="jfb-third-ride-start-end__item-address">{{ item.address }}</view>
+          </view>
+          <!-- <view class="jfb-third-ride-start-end__item-delete" @click.stop="handleDeleteItem(index)">
+            <xd-font-icon icon="iconguanbi_xian" color="#c8c9cc" size="24"></xd-font-icon>
+          </view> -->
+        </view>
+        <!-- 接口返回值为空 -->
+        <!-- <view v-if="!placeList.length" class="jfb-third-ride-start-end__empty">暂无数据</view> -->
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbThirdRideStartEndMixin from "./JfbThirdRideStartEndMixin";
+  import { gCPVal } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import getCoordinatesMixins from "@/mixins/getCoordinatesMixins";
+  import storage from "@/common/storage"
+  //选择地址后暂存结果供上一页回显(string: 传address.storage key)(选择后立即删除)
+  const RIDE_ADDRESS_KEY = 'jfb_third_ride_address';
+  export default {
+    name: "JfbThirdRideStartEnd",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbThirdRideStartEndMixin, getCoordinatesMixins
+    ],
+    data() {
+      return {
+        //业务线
+        xnamespace: '',
+        //搜索关键词
+        keyword: '',
+        //搜索结果列表(由searchRidePlaces接口返回填充)
+        placeList: [],
+        //当前位置坐标
+        currentCoords: {},
+        //定位是否失败(失败时显示失败页且不请求搜索接口)
+        locateFailed: false,
+        //当前选择的是起点(start)还是终点(end)，来自上一页href type参数
+        addressType: '',
+
+        //todo
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+        this.init(this.container);
+        this.initPlaces();
+
+        //todo
+      },
+    methods: {
+      onJfbLoad(options) {
+        //解析上一页跳转传参 type(起点start/终点end)
+        this.addressType = (options && options.type) || '';
+        console.log('onJfbLoad addressType', this.addressType);
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        //业务线
+        this.xnamespace = gCPVal(container, 'xnamespace', '');
+        // this.selectToLocationPath = gCPVal(container, 'content.selectToLocationPath', {value: ""}).value;
+      },
+      /**
+       * @description 初始化地点列表：预览模式不请求定位、不判断定位失败，默认展示接口mock数据；非预览模式按定位逻辑
+       */
+      initPlaces(){
+        //预览模式：跳过定位，直接通过jfbRootExec加载mock列表(底层自动命中Mock.js数据)
+        if (this.$configProject['isPreview']) {
+          this.locateFailed = false;
+          this.getList();
+          return;
+        }
+        //非预览模式：请求定位
+        this.getCoordinatesData();
+      },
+      /**
+       * @description 获取定位信息：成功则进入正常页面，失败则显示失败页
+       */
+      getCoordinatesData(){
+        this.locateFailed = false;
+        //获取当前位置坐标信息
+        this.getCoordinates().then(coords => {
+          this.currentCoords = coords;
+          this.locateFailed = false;
+          console.log('getCoordinates result', coords);
+        }).catch(err => {
+          //定位失败：显示失败页，禁止搜索请求
+          this.locateFailed = true;
+          console.warn('getCoordinates error', err);
+        });
+      },
+      /**
+       * @description 重试定位
+       */
+      handleRetryLocation(){
+        this.getCoordinatesData();
+      },
+      /**
+       * @description 根据关键词搜索地点(预览模式下底层自动使用Mock.js数据，无需keyword与定位)
+       */
+      getList(){
+        const isPreview = this.$configProject['isPreview'];
+        //预览模式无需keyword；非预览模式必须有关键词，且定位失败时禁止搜索
+        if (!isPreview) {
+          if (!this.keyword) return;
+          if (this.locateFailed) {
+            console.warn('定位失败，禁止搜索');
+            return;
+          }
+        }
+        //坐标兼容：mixin返回longitude/latitude，此处映射为接口所需的lng/lat
+        const coords = this.currentCoords || {};
+        const lng = coords.lng !== undefined ? coords.lng : coords.longitude;
+        const lat = coords.lat !== undefined ? coords.lat : coords.latitude;
+        //统一调用jfbRootExec：预览模式底层自动命中Mock.js数据
+        jfbRootExec("searchRidePlaces", {
+          vm: this,
+          data: {
+            channel_code: "amapcar",
+            keyword: this.keyword,
+            lng: lng !== undefined ? String(lng) : "",
+            lat: lat !== undefined ? String(lat) : "",
+          }
+        }).then(res => {
+          this.placeList = (res && res.list) || [];
+          this.locateFailed = false;
+        }).catch(err => {
+          console.warn('searchRidePlaces error', err);
+        });
+      },
+      /**
+       * @description 选择某个地址：暂存结果并返回上一页(JfbThirdRideHome)回显
+       * @param item {object} 选中的地址项
+       */
+      handleSelect(item) {
+        console.log('select address', item);
+        if (!this.addressType) {
+          console.warn('未获取到地址类型 addressType');
+        }
+        //暂存选中结果：按起点/终点分区保存，供上一页回显与下单估算(由上一页读取后移除)
+        const saved = storage.get(RIDE_ADDRESS_KEY) || {};
+        const type = this.addressType === 'start' ? 'start' : 'end';
+        saved[type] = item;
+        storage.set(RIDE_ADDRESS_KEY, saved);
+        //返回上一页(JfbThirdRideHome)，由其onJfbShow读取回显
+        this.$xdUniHelper.navigateBack();
+      },
+      /**
+       * @description 删除单个地点记录
+       * @param index {number} 索引
+       */
+      handleDeleteItem(index) {
+        this.placeList.splice(index, 1);
+      },
+      /**
+       * @description 清空地点列表
+       */
+      handleClearHistory() {
+        this.placeList = [];
+      },
+      onJfbScroll(options) {
+        console.log('event.onJfbScroll', options)
+      },
+      onJfbReachBottom(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+      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({action, data}){
+        if(action === 'baseHeader@search'){
+          console.log('onJfbCustomEvent',action, data);
+          uni.pageScrollTo({
+            scrollTop: 0,
+            duration: 0
+          });
+          this.keyword = data;
+          this.getList();
+        }
+      }
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbThirdRideStartEndLess.less";
+
+  .jfb-third-ride-start-end {
+    &__body {
+      background-color: #ffffff;
+    }
+
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 24rpx;
+    }
+
+    &__header-title {
+      font-size: unit(32, rpx);
+      font-weight: bold;
+      color: #333333;
+    }
+
+    &__header-clear {
+      font-size: unit(28, rpx);
+      color: #999999;
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      padding: 32rpx 24rpx;
+    }
+
+    //暂无数据
+    &__empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 120rpx 0;
+      font-size: unit(28, rpx);
+      color: #999999;
+    }
+
+    &__item {
+      display: flex;
+      align-items: center;
+      padding: 24rpx 0;
+    }
+
+    &__item-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 64rpx;
+      height: 64rpx;
+      margin-right: 20rpx;
+      background: #fdeaea;
+      border-radius: 16rpx;
+    }
+
+    &__item-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    &__item-name {
+      font-size: unit(30, rpx);
+      color: #333333;
+    }
+
+    &__item-address {
+      font-size: unit(26, rpx);
+      color: #999999;
+      margin-top: 8rpx;
+    }
+
+    &__item-delete {
+      display: flex;
+      align-items: center;
+      padding: 10rpx;
+    }
+
+    //定位失败页
+    &__locate-fail {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 200rpx;
+
+      &-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 112rpx;
+        height: 112rpx;
+        background: #fdeaea;
+        border-radius: 50%;
+        margin-bottom: 32rpx;
+      }
+
+      &-title {
+        font-size: unit(34, rpx);
+        font-weight: bold;
+        color: #333333;
+        margin-bottom: 16rpx;
+      }
+
+      &-desc {
+        font-size: unit(26, rpx);
+        color: #999999;
+        margin-bottom: 48rpx;
+      }
+
+      &-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 180rpx;
+        height: 72rpx;
+        padding: 0 40rpx;
+        background: #e53a2f;
+        border-radius: 36rpx;
+        color: #ffffff;
+        font-size: unit(28, rpx);
+      }
+    }
+  }
+</style>

package/src/components/JfbThirdRideStartEnd/JfbThirdRideStartEndLess.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-start-end {
+  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-start-end {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbThirdRideStartEnd/JfbThirdRideStartEndMixin.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-start-end'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbThirdRideStartEnd/Mock.js

@@ -0,0 +1,17 @@
+'use strict';
+
+module.exports = {
+  
+  searchRidePlaces:{
+    "list": [
+        {
+            "name": "故宫",
+            "address": "北京市故宫路",
+            "lng": "116.397428",
+            "lat": "39.90923",
+            "distance": 0
+        }
+    ]
+},
+  
+}

package/src/components/JfbThirdRideStartEnd/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: 'selectToLocationPath',
+    //   placeholder: '请选择跳转地址路径',
+    //   labelInline: true,
+    //   inline: false,
+    //   value: data['selectToLocationPath'] || null,
+    //   setting: {
+    //     mode:'new',
+    //     router: XdBus.getParentApi('getPagesTree')
+    //   },
+    // },
+  ].filter(i=>i)
+}

package/src/components/JfbThirdRideStartEnd/cusAttr/content.js

@@ -0,0 +1,27 @@
+'use strict';
+import { dataVal } from "@/utils/AttrTools";
+
+export default (data, gValue, gColor, oldData) => {
+  return [
+    //内容
+    {
+      label: "业务线",
+      ele: "xd-choose-namespace",
+      valueKey: "xnamespace",
+      value: dataVal({data, key:'xnamespace', dValue:"", gValue}),
+      groupKey:'content',
+      className: 'input80',
+      labelInline:true,
+      placeholder: '请选择业务线',
+      notice: '空继承上级业务线',
+      inline: false,
+      handleCustom: (cb) => {
+        XdBus.getParentApi('getOptionsNamespaces')()
+          .then(res => {
+            cb(res.list)
+          })
+          .catch();
+      }
+    },
+  ].filter(i=>i)
+}

package/src/components/JfbThirdRideStartEnd/cusAttr/style.js

@@ -0,0 +1,7 @@
+'use strict';
+
+export default (data, gValue, gColor, oldData) => {
+  return [
+    //风格
+  ].filter(i=>i)
+}