jufubao-base 1.0.256-beta2 → 1.0.257-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.256-beta2",
+  "version": "1.0.257-beta1",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseOrderDetail/Attr.js

@@ -506,6 +506,19 @@ export default {
         },
         inline: false,
       },
+      {
+        label: '查看服务进度路径:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'serviceStepPath',
+        groupKey:'advanced',
+        placeholder: '查看服务进度路径',
+        value: data['serviceStepPath'] || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
+
 
       // 废弃 - 隐藏
       {

package/src/components/JfbBaseOrderDetail/JfbBaseOrderDetail.vue

@@ -889,6 +889,7 @@ export default {
       codeSrc: "",
       packageListPath: "", //包裹列表路径
       payPath: "", //支付路径
+      serviceStepPath: "", //服务进度路径
       // logisticsPath: "", //物流详情路径
       webViewPath: "", //容器路径
       viewStatus: "", //业务类型预览
@@ -1250,7 +1251,7 @@ export default {
       this.brandPath = getContainerPropsValue(container, "content.brandPath", {value: "",}).value;
       this.payPath = getContainerPropsValue(container, "content.payPath", {value: "",}).value;
 
-
+      this.serviceStepPath = getContainerPropsValue(container, "content.serviceStepPath", { value: "" }).value;
       this.packageListPath = getContainerPropsValue(container, "content.packageListPath", { value: "" }).value;
       this.webViewPath = getContainerPropsValue(container, "content.webViewPath", {value: "",}).value;
       this.margin = getContainerPropsValue(container, "content.margin", {top: 0, left: 0, right: 0, bottom: 0,});
@@ -1436,6 +1437,11 @@ export default {
           },
         });
       }
+      else if(item.action === 'service_process_list'){
+        this.$xdUniHelper.navigateTo({
+          url: `${this.serviceStepPath}?main_order_id=${this.main_order_id}`,
+        });
+      }
       else {
         console.error(`item.action=${item.action}, 此action不可用`)
       }

package/src/components/JfbBaseOrderServiceStep/Api.js

@@ -0,0 +1,19 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Order
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getServiceProcess',
+    title: '获取服务单进度',
+    path: '/order/v1/service-process',
+    isRule: false,
+    params: {
+      main_order_id: ['main_order_id', 'String', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbBaseOrderServiceStep/Attr.js

@@ -0,0 +1,14 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseOrderServiceStep/JfbBaseOrderServiceStep.vue

@@ -0,0 +1,153 @@
+<template>
+  <view
+    class="jfb-base-order-service-step"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-order-service-step__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-order-service-step__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-order-service-step__body" :style=[bodyWrapStyle]>
+      <view class="steps_box">
+        <view class="order_id">渠道订单号：1231561561321321</view>
+        <view class="service_box">
+          <view class="mtb40">服务进度</view>
+          <uni-steps :options="list" active-color="#007AFF" :active="active" direction="column" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import UniSteps from "./uni-steps.vue"
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseOrderServiceStepMixin from "./JfbBaseOrderServiceStepMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  export default {
+    name: "JfbBaseOrderServiceStep",
+    components: {
+      XdFontIcon,
+      UniSteps
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseOrderServiceStepMixin
+    ],
+    data() {
+      return {
+        main_order_id: "",
+        active: 2,
+        list: []
+        //todo
+      }
+    },
+    computed: {
+      bodyWrapStyle(){
+        return {
+          minHeight: this.layoutInfo.bodyMinHeightRpx + 'rpx',
+        }
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    created() {
+      this.init(this.container);
+
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+        this.main_order_id = options.main_order_id;
+        this.p_getServiceProcess();
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+        //this.height = getContainerPropsValue(container, 'content.height', 10);
+      },
+      p_getServiceProcess(){
+        jfbRootExec("getServiceProcess", {
+          vm: this,
+          data: {
+            main_order_id: this.main_order_id
+          }
+        }).then(res => {
+          this.list = res.list.map(item => {
+            item.title = item.process_desc;
+            item.desc = item.process_desc;
+            item.time = this.$xdUniHelper.getDate(
+              item.process_time * 1000
+            ).fullTime;
+            return item;
+          });
+          this.active = res.list.length - 1;
+        })
+      },
+      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(options) {
+        console.log('event.onJfbReachBottom', options)
+      },
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseOrderServiceStepLess.less";
+
+  .jfb-base-order-service-step {
+    &__body{
+      padding: 40rpx;
+      .steps_box{
+        border: 1px solid #E5E5E5;
+        border-radius: 16rpx;
+        padding: 40rpx;
+        background: #FFFFFF;
+
+        .order_id{
+          font-size: 36rpx;
+          color: #777777;
+        }
+      
+        .mtb40{
+          margin-top: 60rpx;
+          margin-bottom: 60rpx;
+        }
+
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseOrderServiceStep/JfbBaseOrderServiceStepLess.less

@@ -0,0 +1,79 @@
+/**
+* @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-base-order-service-step {
+  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: 4;
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-order-service-step {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseOrderServiceStep/JfbBaseOrderServiceStepMixin.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-base-order-service-step'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseOrderServiceStep/Mock.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  getServiceProcess: {"total_size":1,"next_page_token":"","list":[{"id":1,"process_desc":"洗护服务单-配送中","process_time":1749541227}],"channel_order_id":"20250610154015710702","request_id":"98b5a154fd1c60c1"}
+}

package/src/components/JfbBaseOrderServiceStep/uni-steps.vue

@@ -0,0 +1,285 @@
+<template>
+	<view class="uni-steps">
+		<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
+			<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
+				<view v-for="(item,index) in options" :key="index"
+					:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
+					<text :style="{
+            color:index < active?activeColor:(index == active ? '#333' :deactiveColor)
+          }"
+						:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
+					<text :style="{
+            color:index < active?activeColor:(index == active ? '#333' :deactiveColor)
+          }"
+						:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
+          <text class="uni-steps__column-time">{{ item.time }}</text>
+				</view>
+			</view>
+			<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
+				<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
+					v-for="(item,index) in options" :key="index">
+					<view
+						:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
+						:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
+					</view>
+					<view :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-check']"
+						v-if="index === active">
+						{{ index + 1}}
+					</view>
+					<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
+						:style="{
+              borderColor: index<active?activeColor:deactiveColor,
+              color: index<active?activeColor:deactiveColor
+            }">{{ index + 1}}</view>
+					<view
+						:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
+						:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}">
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * Steps 步骤条
+	 * @description 评分组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=34
+	 * @property {Number} active 当前步骤
+	 * @property {String} direction = [row|column] 当前步骤
+	 * 	@value row 横向
+	 * 	@value column 纵向
+	 * @property {String} activeColor 选中状态的颜色
+	 * @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
+	 */
+
+	export default {
+		name: 'UniSteps',
+		props: {
+			direction: {
+				// 排列方向 row column
+				type: String,
+				default: 'row'
+			},
+			activeColor: {
+				// 激活状态颜色
+				type: String,
+				default: '#2979FF'
+			},
+			deactiveColor: {
+				// 未激活状态颜色
+				type: String,
+				default: '#B7BDC6'
+			},
+			active: {
+				// 当前步骤
+				type: Number,
+				default: 0
+			},
+			activeIcon: {
+				// 当前步骤
+				type: String,
+				default: 'checkbox-filled'
+			},
+			options: {
+				type: Array,
+				default () {
+					return []
+				}
+			} // 数据
+		},
+		data() {
+			return {}
+		}
+	}
+</script>
+
+<style lang="scss">
+	$uni-primary: #2979ff !default;
+	$uni-border-color:#EDEDED;
+	.uni-steps {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		width: 100%;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		flex: 1;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__column {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row-reverse;
+	}
+
+	.uni-steps__row-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: flex-end;
+		margin-bottom: 8px;
+	}
+
+	.uni-steps__column-text-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+    margin-left: 12rpx;
+	}
+
+	.uni-steps__row-text {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+	}
+
+	.uni-steps__column-text {
+		padding: 6px 0px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+
+	.uni-steps__row-title {
+		font-size: 14px;
+		line-height: 16px;
+		text-align: center;
+	}
+
+	.uni-steps__column-title {
+		font-size: 14px;
+		text-align: left;
+		line-height: 18px;
+    color: #333;
+	}
+
+	.uni-steps__row-desc {
+		font-size: 12px;
+		line-height: 14px;
+		text-align: center;
+	}
+
+	.uni-steps__column-desc {
+		font-size: 12px;
+		text-align: left;
+		line-height: 18px;
+    margin-top: 10rpx;
+	}
+  .uni-steps__column-time{
+    font-size: 26rpx;
+    color: #999;
+  }
+
+	.uni-steps__row-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+	}
+
+	.uni-steps__column-container {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		width: 30px;
+		flex-direction: column;
+	}
+
+	.uni-steps__row-line-item {
+		/* #ifndef APP-NVUE */
+		display: inline-flex;
+		/* #endif */
+		flex-direction: row;
+		flex: 1;
+		height: 14px;
+		line-height: 14px;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__column-line-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.uni-steps__row-line {
+		flex: 1;
+		height: 1px;
+		background-color: #B7BDC6;
+	}
+
+	.uni-steps__column-line {
+		width: 1px;
+		background-color: #B7BDC6;
+	}
+
+	.uni-steps__row-line--after {
+		transform: translateX(1px);
+	}
+
+	.uni-steps__column-line--after {
+		flex: 1;
+		transform: translate(0px, 1px);
+	}
+
+	.uni-steps__row-line--before {
+		transform: translateX(-1px);
+	}
+
+	.uni-steps__column-line--before {
+		height: 6px;
+		transform: translate(0px, -13px);
+	}
+
+	.uni-steps__row-circle {
+		width: 5px;
+		height: 5px;
+		border-radius: 50%;
+		background-color: #B7BDC6;
+		margin: 0px 3px;
+	}
+
+	.uni-steps__column-circle {
+		width: 40rpx;
+		height: 40rpx;
+    font-size: 24rpx;
+		border-radius: 50%;
+		margin: 0px 0px 5px 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #333333;
+	}
+
+	.uni-steps__row-check {
+		margin: 0px 6px;
+	}
+
+	.uni-steps__column-check {
+		height: 14px;
+		line-height: 14px;
+		margin: 2px 0px;
+	}
+</style>