jufubao-base 1.0.243-beta2 → 1.0.243-beta202

package/src/components/JfbBaseAfterSalesList/Attr.js

@@ -0,0 +1,130 @@
+'use strict';
+
+/**
+ * @description 当表单组件中有联动操作时候，使用方法进行返回
+ */
+export default {
+  style: [],
+  content: (data) => {
+    return [
+      {
+        label: "背景颜色:",
+        ele: "xd-color",
+        valueKey: "bodyBgColor",
+        value: data.bodyBgColor || "",
+        groupKey: "style",
+      },
+      {
+        label: 'tab文字颜色设置:',
+        ele: 'xd-text-and-bgc',
+        groupKey:'style',
+        valueKey: 'menuTabColor',
+        value: data['menuTabColor'] || null,
+        setting: {
+          fontSize: false, //字体大小选择
+          color: true, //文字颜色选项
+          bgColor: false, //背景选项
+          weight: false, //文字粗细
+        },
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_font_size'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+              data.cb([])
+            });
+        },
+      },
+      {
+        label: "内容配置设置",
+        ele: "title",
+        groupKey: "style",
+        size: "small"
+      },
+      {
+        label: "背景颜色:",
+        ele: "xd-color",
+        valueKey: "cardItemBgColor",
+        value: data.cardItemBgColor || "#FFFFFF",
+        groupKey: "style",
+        labelInline: true,
+      },
+      {
+        label: "间距设置:",
+        ele: "el-input",
+        valueKey: "cardItemSpace",
+        value: data.cardItemSpace || "20",
+        placeholder: '请输入间距',
+        groupKey: "style",
+        className: "input80",
+        labelInline: true,
+        inline: false,
+        notice: '设置间距，<span style="color: red">单位：像素</span>。默认值：<span style="color:red">20</span>像素',
+      },
+      {
+        label: '投影设置:',
+        ele: 'xd-shadow',
+        groupKey:'style',
+        labelInline: true,
+        valueKey: 'cardItemShadow',
+        value: data['cardItemShadow'] || '',
+        setting: {
+          selected: 'N',
+        },
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+              data.cb([])
+            });
+        },
+      },
+      {
+        label: '边框设置:',
+        ele: 'xd-border',
+        groupKey:'style',
+        labelInline: true,
+        valueKey: 'cardItemBorder',
+        value: data['cardItemBorder'] || '',
+        setting: {
+          selected:'N'
+        },
+      },
+      {
+        label: "圆角设置：",
+        groupKey: 'style',
+        ele: 'xd-slider',
+        valueKey: "cardItemRadius",
+        value: data['cardItemRadius'] === undefined?16:data['cardItemRadius'] ,
+        className: "input80",
+        labelInline: true,
+        setting:{
+          min: 0,//最小值
+          max: 60, //最小值
+          step:1, //步长
+          showStops:false,//显示间断点
+          showInput:false,//显示输入框
+        }
+      },
+      {
+        label: '服务详情跳转路径:',
+        ele: 'xd-select-pages-path',
+        valueKey: 'afterSalesDetailPath',
+        placeholder: '请选择服务详情跳转路径',
+        groupKey:'advanced',
+        className: 'input100',
+        value: data['afterSalesDetailPath'] || null,
+        setting: {
+          router: XdBus.getParentApi('getPagesTree'),
+        },
+        inline: false,
+      },
+    ].filter(i=>i)
+  },
+  advanced: [],
+};

package/src/components/JfbBaseAfterSalesList/JfbBaseAfterSalesList.vue

@@ -0,0 +1,488 @@
+<template>
+  <view
+    class="jfb-base-after-sales-list"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-after-sales-list__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-after-sales-list__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-after-sales-list__body" :style="[bodyBoxStyle]">
+      <view class="fixed_header" :style="{
+          top: layoutInfo.top + 'rpx',
+        }">
+        <view class="filter_tab" :style="[menuTabStyle]">
+          <view v-for="item in statusTabs" :key="item.value" class="filter_item"
+            :class="{active: item.value===status}"
+            @click="selectStatusTab(item.value)"
+          >{{ item.label }}</view>
+        </view>
+        <view class="search_bar" :style="{
+          backgroundColor: bodyBgColor
+        }">
+          <view class="search_box">
+            <xd-font-icon style="margin: 0 32rpx;" icon="iconsousuo_mian" size="32" color="#BBBBBB"></xd-font-icon>
+            <input type="text"
+              v-model="keyword"
+              style="width: 100%;"
+              confirm-type="search"
+              placeholder="请输入商品名称/订单编号"
+              @confirm="handleSearch"/>
+            <xd-font-icon v-if="keyword" style="margin: 0 32rpx;" icon="iconshanchu" size="32" color="#BBBBBB" @click.stop="handleClearKeyword"></xd-font-icon>
+          </view>
+          
+        </view>
+      </view>
+      
+      <view style="height: 220rpx"></view>
+
+      <view v-if="loaded" class="service_list_wrap">
+        <view v-if="orderList.length" class="service_list">
+          <view v-for="item in orderList"
+            :key="item.service_order_id"
+            class="service_item"
+            :style="[cardItemBoxStyle]"
+            @click="handleToLink(item)">
+            <view class="service_header">
+              <view class="biz_name">
+                <xd-font-icon
+                  v-if="item.business_icon"
+                  class="biz_icon"
+                  :icon="item.business_icon"
+                  :size="28"
+                ></xd-font-icon>
+                {{item.business_name}}</view>
+              <view class="service_type" :style="getMethodTypeStyle(item.after_sale_method)">{{ item.after_sale_method_name }}</view>
+            </view>
+            <view class="service_body">
+              <view class="service_number">服务单号：{{ item.service_order_id }}</view>
+              <view v-for="prod in item.product_list" :key="prod.product_id" class="prod_item">
+                <view class="prod_img">
+                  <image :src="prod.thumb" mode="aspectFit"></image>
+                </view>
+                <view class="prod_info">
+                  <view class="prod_title"> {{ prod.product_name }} </view>
+                  <view class="prod_number">申请数量：×{{ prod.after_count }}</view>
+                </view>
+              </view>
+            </view>
+            <view class="service_foot">
+              <view v-if="item.is_show_cancel_btn === 'Y'" class="opt_btn default" @click.stop="handleCancel(item)">取消申请</view>
+              <view v-if="item.is_show_delete_btn === 'Y'" class="opt_btn" @click.stop="handleDel(item)">删除</view>
+            </view>
+          </view>
+        </view>
+        <view v-else>
+          <xd-no-data></xd-no-data>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdNoData from "@/components/XdNoData/XdNoData.vue"
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseAfterSalesListMixin from "./JfbBaseAfterSalesListMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from "@/common/getServiceUrl";
+  export default {
+    name: "JfbBaseAfterSalesList",
+    components: {
+      XdFontIcon,
+      XdNoData
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseAfterSalesListMixin
+    ],
+    data() {
+      return {
+        orderList: [],
+
+        loaded: false,
+        status: "2",  //状态 0:全部 1：待处理，2：处理中 3:已完成
+        keyword: "",
+        page_size: 10,
+        page_token: 1,
+        hasNext: true,
+        next_page_token: "",
+        // showStatusFilter: "",
+
+        statusTabs: [
+          // { label: '全部', value: '0'},
+          // { label: '待处理', value: '1'},
+          { label: '处理中', value: '2'},
+          { label: '已完成', value: '3'},
+        ],
+
+        bodyBgColor: "",
+        
+        cardItemBgColor: "",
+        cardItemSpace: 20,
+        cardItemShadow: "",
+        cardItemBorder: "",
+        cardItemRadius: 16,
+
+        afterSalesDetailPath: "",
+        menuTabColor: {},
+
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+    },
+    computed: {
+      bodyBoxStyle(){
+        return {
+          backgroundColor: this.bodyBgColor,
+          minHeight: this.layoutInfo.bodyMinHeight,
+          '--main-color': this.mainColor,
+        }
+      },
+      cardItemBoxStyle(){
+        return {
+          backgroundColor: this.cardItemBgColor,
+          marginBottom: this.cardItemSpace + 'rpx',
+          boxShadow: this.cardItemShadow,
+          border: this.cardItemBorder,
+          borderRadius: this.cardItemRadius + 'rpx',
+        }
+      },
+      menuTabStyle(){
+        return {
+          '--tab-color': this.menuTabColor['color'] || '#333333',
+          '--active-tab-color': this.menuTabColor['actColor'] || this.mainColor,
+        }
+      }
+    },
+    created() {
+      this.init(this.container);
+
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+        this.getList();
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        // this.showStatusFilter = getContainerPropsValue(container, "content.showStatusFilter", "");
+        this.bodyBgColor = getContainerPropsValue(container, "content.bodyBgColor", "#EEEEEE");
+        
+        this.cardItemBgColor = getContainerPropsValue(container, 'content.cardItemBgColor', "#FFFFFF");
+        this.cardItemSpace = getContainerPropsValue(container, 'content.cardItemSpace', 20);
+        this.cardItemShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.cardItemShadow', {}))
+        this.cardItemBorder = this.getXdBorder({width:2,color:'rgba(0,0,0,0)'},getContainerPropsValue(container, 'content.cardItemBorder', {}));
+        this.cardItemRadius = getContainerPropsValue(container, 'content.cardItemRadius', 16);
+        this.menuTabColor = getContainerPropsValue(container, "content.menuTabColor", {});
+
+        this.afterSalesDetailPath = getContainerPropsValue(container, "content.afterSalesDetailPath", { value: "" }).value;
+      },
+      getMethodTypeStyle(method){
+        switch (method) {
+          case "refund_and_good":
+            return { color: "#FF5733" };
+          case "refund":
+            return { color: "#FF5733" };
+          case "exchange":
+            return { color: "#2A82E4" };
+          case "again":
+            return { color: "#43CF7C" };
+          case "good":
+            return { color: "#FF8D1A" };
+          default:
+            return {};
+        }
+      },
+      handleSearch(e){
+        console.log("handleSearch",e)
+        this.page_token = 1;
+        this.getList();
+      },
+      selectStatusTab(status){
+        this.status = status;
+        this.page_token = 1;
+        uni.pageScrollTo({
+          scrollTop: 0,
+          duration: 0
+        });
+        this.getList();
+      },
+      handleCancel(item){
+        this.handleConfirm(() => {
+          jfbRootExec("cancelAfterServiceOrder", {
+            vm: this,
+            data:{
+              service_order_id: item.service_order_id
+            }
+          }).then(res => {
+            this.page_token = 1;
+            this.getList();
+          })
+        })
+      },
+      handleDel(item){
+        this.handleConfirm(() => {
+          jfbRootExec("delAfterServiceOrder", {
+            vm: this,
+            data:{
+              service_order_id: item.service_order_id
+            }
+          }).then(res => {
+            this.page_token = 1;
+            this.getList();
+          })
+        })
+      },
+      getList() {
+        this.$xdShowLoading({});
+        jfbRootExec("getAfterServiceOrderList", {
+          vm: this,
+          data: {
+            page_size: this.page_size,
+            page_token: this.page_token,
+            status: this.status,
+            keyword: this.keyword,
+          },
+        })
+          .then((res) => {
+            this.loaded = true;
+            this.$xdHideLoading();
+            let list = res.list.map(item => {
+              // item.thumb = getServiceUrl(item.thumb, 'size2');
+              item.product_list = item.product_list.map(prod => {
+                prod.thumb = getServiceUrl(prod.thumb);
+                return prod;
+              })
+              return item;
+            });
+            if (this.page_token === 1) {
+              this.orderList = list;
+            } else {
+              this.orderList = this.orderList.concat(list);
+            }
+            this.hasNext = res.next_page_token !== "";
+            this.next_page_token = res.next_page_token;
+          })
+          .catch((err) => {
+            this.$xdHideLoading();
+          });
+      },
+      handleToLink(item) {
+        this.$xdUniHelper.navigateTo({
+          url: `${this.afterSalesDetailPath}?service_order_id=${item.service_order_id}`,
+        });
+      },
+      handleConfirm(cb){
+        this.$xdConfirm({
+          styles: this.styles,
+          title: "提示",
+          width: '90%',
+          content: '确定删除当前工单吗？',
+          confirmText: '确认',
+          isHtml: true,
+          cancelText: '取消',
+          showClose: false,
+          success: (res) => {
+            if (res.confirm) {
+              cb && cb();
+            }
+            else{}
+          }
+        })
+      },
+      handleClearKeyword(){
+        this.keyword = "";
+        this.page_token = 1;
+        this.getList();
+      },
+      onJfbScroll(options) {
+        // console.log("event.onJfbScroll", options);
+      },
+      onJfbReachBottom(options) {
+        if (this.hasNext) {
+          this.page_token = this.next_page_token;
+          this.getList();
+        }
+      },
+      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 "./JfbBaseAfterSalesListLess.less";
+
+  .jfb-base-after-sales-list {
+    &__body{
+      padding: 24rpx;
+      box-sizing: border-box;
+      .fixed_header{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 111;
+      }
+      .filter_tab{
+        display: flex;
+        align-items: center;
+        background-color: #FFFFFF;
+        justify-content: center;
+        height: 100rpx;
+        line-height: 100rpx;
+        border-bottom: 1px solid #DDD;
+        
+        .filter_item{
+          margin: 0 40rpx;
+          font-size: 28rpx;
+          color: var(--tab-color);
+          &.active{
+            border-bottom: 1px solid var(--active-tab-color);
+            color: var(--active-tab-color);
+          }
+        }
+      }
+      .search_bar{
+        padding: 24rpx;
+        
+        .search_box{
+          height: 80rpx;
+          display: flex;
+          align-items: center;
+          background-color: #FFFFFF;
+          border-radius: 80rpx;
+          ::v-deep .input-placeholder{
+            color: #BBBBBB;
+          }
+        }
+      }
+      .service_list_wrap{
+        
+      }
+      .service_list{
+        
+      }
+      .service_item{
+        padding: 32rpx;
+        .service_header{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-bottom: 24rpx;
+          border-bottom: 1px solid #F2F2F2;
+          font-size: 28rpx;
+          font-weight: 500;
+          color: #333333;
+          .biz_name{
+            display: flex;
+            align-items: center;
+            .biz_icon{
+              margin-right: 16rpx;
+            }
+          }
+        }
+        .service_body{
+          .service_number{
+            font-size: 24rpx;
+            font-weight: 500;
+            color: #333333;
+            margin: 24rpx 0;
+          }
+          .prod_item{
+            display: flex;
+            align-items: center;
+            margin: 24rpx 0;
+            .prod_img{
+              width: 140rpx;
+              height: 140rpx;
+              border-radius: 16rpx;
+              background-color: #EEE;
+              image{
+                width: 100%;
+                height: 100%;
+              }
+            }
+            .prod_info{
+              margin-left: 20rpx;
+              flex: 1;
+              align-self: stretch;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              .prod_title{
+                margin-bottom: 10rpx;
+                font-size: 28rpx;
+                color: #333333;
+              }
+              .prod_number{
+                color: #999999;
+                font-size: 24rpx;
+              }
+            }
+          }
+        }
+        .service_foot{
+          text-align: right;
+          margin-top: 24rpx;
+          .opt_btn{
+            width: 120rpx;
+            height: 60rpx;
+            background: #FFFFFF;
+            color: #999999;
+            border: 1px solid #999999;
+            font-size: 24rpx;
+            text-align: center;
+            line-height: 60rpx;
+            border-radius: 60rpx;
+            display: inline-block;
+            & + .opt_btn{
+              margin-left: 20rpx;
+            }
+            &.default{
+              background: #EFEFEF;
+              border-color: #EFEFEF;
+              color: #999999;
+              width: 140rpx;
+            }
+            &.primary{
+              background: var(--main-color);
+              border-color: var(--main-color);
+              color: #FFFFFF;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/JfbBaseAfterSalesList/JfbBaseAfterSalesListLess.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-after-sales-list {
+  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-after-sales-list {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/