jufubao-mall 2.0.82 → 2.0.83-beta2

package/.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git checkout *)",
+      "Bash(npx lessc *)"
+    ]
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-mall",
-  "version": "2.0.82",
+  "version": "2.0.83-beta2",
   "private": false,
   "description": "聚福宝商城业务组件插件包",
   "main": "index.js",

package/src/components/JfbMallCategoryAll/Api.js

@@ -0,0 +1,40 @@
+'use strict';
+
+/**
+ * @description API模型
+ * 建议：Ffff=>模块  Xxxx=>自定义名字
+ * 获取单记录(getByIdFfffXxxx)
+ * 获取列表记录(getByListFfffXxxx)
+ * 添加列表记录(addFfffXxxxx)
+ * 删除列表记录(removeFfffXxxxx|deleteFfffXxxx)
+ * 更新列表记录(updateFfffXxxxx)
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: 'getMallCategoryTree',
+    title: '分类 - 树列表',
+    path: '/product/v1/:xnamespace/category/index',
+    isRule: false,
+    params: {
+      xnamespace: ['xnamespace', 'String', '必选'],
+      group_id: ['分组ID', 'Number', '必选'],
+      need_tag: ['分类', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+  {
+    mapFnName: 'getMallCategoryChildren',
+    title: '分类 - 获取子级',
+    path: '/product/v1/:xnamespace/category/children',
+    isRule: false,
+    params: {
+      xnamespace: ['xnamespace', 'String', '必选'],
+      group_id: ['分组ID', 'Number', '必选'],
+      parent_id: ['父级ID 0时只获取第一级', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: true,
+  },
+];

package/src/components/JfbMallCategoryAll/Attr.js

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

package/src/components/JfbMallCategoryAll/JfbMallCategoryAll.vue

@@ -0,0 +1,383 @@
+<template>
+  <view
+    class="jfb-mall-category-all"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-mall-category-all__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-mall-category-all__edit-icon" @click.stop="delEdit">
+        <xd-font-icon icon="iconshanchu-01" color="#fff" size="30"></xd-font-icon>
+      </view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-mall-category-all__body">
+      <view v-if="loadingList" class="skeleton-wrap">
+        <view class="type-left">
+          <view v-for="i in 10" :key="i">
+            <view class="cate-item"></view>
+          </view>
+        </view>
+        <view class="type-right">
+          <view v-for="i in 10" :key="i">
+            <view class="type_title"><view></view></view>
+            <view class="type_list">
+              <view v-for="ii in 3" :key="ii" class="type_item">
+                <view></view>
+                <view></view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <xd-store-product-type
+        :key="navKey"
+        v-if="onLoadStatus"
+        :layout-info="layoutInfo"
+        :color="mainColor"
+        :default-index="0"
+        :style-config="styleConfig"
+        :layout-style="layoutStyle"
+        @onNavList="handleNavList"
+        @onToDetail="handleToDetail"
+      ></xd-store-product-type>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdStoreProductType from "./XdStoreProductType";
+  import {jfbRootExec} from "@/utils/xd.event";
+  import JfbMallCategoryAllMixin from "./JfbMallCategoryAllMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import { getContainerPropsValue, gCPVal } from "@/utils/xd.base";
+  import getServiceUrl from "@/common/getServiceUrl";
+  import Color from "color";
+
+  export default {
+    name: "JfbMallCategoryAll",
+    components: {
+      XdFontIcon,
+      XdStoreProductType
+    },
+    mixins: [componentsMixins, extsMixins, JfbMallCategoryAllMixin],
+    data() {
+      return {
+        closeMask: true,
+        isPreview: false,
+        allNavList: [],
+        loadingList: true,
+        xnamespace: "",
+        listPath: "",
+        selfMask: true,
+        onLoadStatus: false,
+        need_tag: null,
+        navKey: "navKey",
+
+        // content 属性
+        showRecommend: 'Y',
+        categoryParentType: 'child',
+        categoryParent: '',
+        recommendName: '',
+        layoutStyle: '1',
+
+        // 左侧导航样式
+        leftNavName: {},
+        leftNavItemSpacing: 0,
+        leftNavBgColor: '#F7F7F7',
+        leftNavBorder: '',
+        leftNavRadius: '0',
+        leftNavShadow: '',
+        leftNavPadding: {top:0, bottom:0, left:0, right:0},
+        // 右侧导航样式
+        rightNavMargin: [0],
+        rightNavPadding: {top:0, bottom:0, left:0, right:0},
+        rightNavBgColor: '#fff',
+        rightNavIconSize: 120,
+        rightNavIconPadding: 0,
+        rightNavIconTextColor: '#666',
+        rightNavIconTextSize: '12',
+        rightNavIconRadius: 'small',
+        rightNavIconBorder: '',
+        rightNavIconShadow: '',
+        rightNavIconBgColor: '',
+        rightNavIconTextGap: 0,
+      }
+    },
+    computed: {
+      styleConfig() {
+        return {
+          // content
+          xnamespace: this.xnamespace,
+          showRecommend: this.showRecommend,
+          need_tag: this.need_tag,
+          categoryParentType: this.categoryParentType,
+          categoryParent: this.categoryParent,
+          recommendName: this.recommendName,
+          layoutStyle: this.layoutStyle,
+          listPath: this.listPath,
+          // 左侧导航
+          leftNavName: this.leftNavName,
+          leftNavItemSpacing: this.leftNavItemSpacing,
+          leftNavBgColor: this.leftNavBgColor,
+          leftNavBorder: this.leftNavBorder,
+          leftNavRadius: this.leftNavRadius,
+          leftNavShadow: this.leftNavShadow,
+          leftNavPadding: this.getMarginAndPadding(this.leftNavPadding, 0),
+          // 右侧导航
+          rightNavMargin: this.getMarginAndPadding(this.rightNavMargin, 0),
+          rightNavPadding: this.getMarginAndPadding(this.rightNavPadding, 0),
+          rightNavBgColor: this.rightNavBgColor,
+          rightNavIconSize: this.rightNavIconSize,
+          rightNavIconPadding: this.rightNavIconPadding,
+          rightNavIconTextColor: this.rightNavIconTextColor,
+          rightNavIconTextSize: this.rightNavIconTextSize,
+          rightNavIconRadius: this.rightNavIconRadius,
+          rightNavIconBorder: this.rightNavIconBorder,
+          rightNavIconShadow: this.rightNavIconShadow,
+          rightNavIconBgColor: this.rightNavIconBgColor,
+          rightNavIconTextGap: this.rightNavIconTextGap,
+        }
+      }
+    },
+    watch: {
+      container(value, oldValue) {
+        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+        if (this.$configProject['isPreview']) this.init(value)
+      },
+      need_tag: {
+        deep: true,
+        handler(n, o) {
+          this.navKey = new Date().getTime()
+        }
+      },
+      recommendName: {
+        handler(n) {
+          if(this.isPreview && n && this.allNavList.length > 0) {
+            this.allNavList[0].category_name = n
+          }
+        }
+      },
+    },
+    created() {
+      this.init(this.container);
+      this.isPreview = this.$configProject.isPreview;
+    },
+    methods: {
+      onJfbLoad(options) {
+        this.setNameSpace(options);
+        this.onLoadStatus = true;
+      },
+      init(container) {
+        this.listPath = getContainerPropsValue(container, 'content.listPath', {value: ""}).value;
+        this.xnamespace = getContainerPropsValue(container, 'content.xnamespace', this.projectAttr.business_code);
+        this.showRecommend = gCPVal(container, 'showRecommend', 'Y');
+        this.need_tag = getContainerPropsValue(container, 'content.need_tag', null);
+        this.categoryParentType = gCPVal(container, 'categoryParentType', 'child');
+        this.categoryParent = gCPVal(container, 'categoryParent', '');
+        this.recommendName = gCPVal(container, 'recommendName', '推荐');
+        this.layoutStyle = gCPVal(container, 'layoutStyle', '1');
+
+        // ===== 左侧导航样式 =====
+        this.leftNavName = gCPVal(container, 'leftNavName', {
+          color: '#333',
+          actColor: this.mainColor,
+          fontSize: '24rpx',
+          actFontSize: '24rpx',
+          fontWeight: 'normal',
+          bgColor: '',
+          borderStyle: 'solid'
+        });
+        this.leftNavItemSpacing = gCPVal(container, 'leftNavItemSpacing', 0);
+        this.leftNavBgColor = gCPVal(container, 'leftNavBgColor', '#FFFFFF');
+        this.leftNavBorder = gCPVal(container, 'leftNavBorder', 'none', {isBorder: true});
+        this.leftNavRadius = gCPVal(container, 'leftNavRadius', '0', {sKey: "leftNavRadiusStatus"}) || 0;
+        this.leftNavShadow = gCPVal(container, 'leftNavShadow', {width:20, color:'rgba(0,0,0,0)'}, {isShadow: true});
+        this.leftNavPadding = gCPVal(container, 'leftNavPadding', {top:0, bottom:0, left:0, right:0}, {isPM: true, isCPM: true});
+
+        // ===== 右侧导航样式 =====
+        this.rightNavMargin = gCPVal(container, 'rightNavMargin', {top:24, bottom:24, left:24, right:24}, {sKey: "rightNavMarginStatus", isPMR: true});
+        this.rightNavPadding = gCPVal(container, 'rightNavPadding', {top:0, bottom:0, left:0, right:0}, {isPM: true, isCPM: true});
+        this.rightNavBgColor = gCPVal(container, 'rightNavBgColor', '#f8f8f8');
+        this.rightNavIconSize = gCPVal(container, 'rightNavIconSize', 120, {sKey: "rightNavIconSizeStatus"});
+        this.rightNavIconPadding = gCPVal(container, 'rightNavIconPadding', [12], {sKey: "rightNavIconPaddingStatus"});
+        this.rightNavIconTextColor = gCPVal(container, 'rightNavIconTextColor', '#666');
+        this.rightNavIconTextSize = gCPVal(container, 'rightNavIconTextSize', '24');
+        this.rightNavIconRadius = gCPVal(container, 'rightNavIconRadius', '16', {sKey: "rightNavIconRadiusStatus"});
+        this.rightNavIconBorder = gCPVal(container, 'rightNavIconBorder', {}, {isBorder: true});
+        this.rightNavIconShadow = gCPVal(container, 'rightNavIconShadow', [{color: 'rgba(0,0,0,.15)', width: '10'},'none'], { isShadow: true});
+        this.rightNavIconBgColor = gCPVal(container, 'rightNavIconBgColor', '');
+        this.rightNavIconTextGap = gCPVal(container, 'rightNavIconTextGap', 10);
+        console.log('rightNavIconShadow', this.rightNavIconShadow)
+      },
+      handleNavList(resolve) {
+        try {
+          jfbRootExec("getMallCategoryTree", {
+            vm: this,
+            data: {
+              xnamespace: this.xnamespace,
+              need_tag: this.need_tag,
+              group_id: 'default',
+              root_category_id: this.categoryParent || 0,
+            }
+          }).then(res => {
+            this.loadingList = false;
+            if(this.isPreview && !this.need_tag) {
+              this.allNavList = this.allNavList.filter(item => {
+                return item.category_id !== 5555
+              })
+            }
+            if(this.isPreview && this.need_tag) {
+              res.items.unshift({
+                category_name: this.recommendName,
+                category_id: 5555,
+                category_icon: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/uploads/20230317/43cc2cb3c71edb6415ec8cb662693471.webp.jpg',
+                parent_id: 2,
+                tag: 'rec',
+                children: [
+                  {
+                    category_name: '儿童车安全椅',
+                    category_id: 4337,
+                    category_icon: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/uploads/20230317/7a93387dedfc29f61745da6fc51517f4.jpg',
+                    parent_id: 4360,
+                    tag: 'rec',
+                    children: []
+                  },
+                  {
+                    category_name: '纸尿裤拉拉裤',
+                    category_id: 4338,
+                    category_icon: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/uploads/20230317/e3dc107d6c5fe5cce55a36f3631386da.png',
+                    parent_id: 4360,
+                    tag: '',
+                    children: []
+                  },
+                  {
+                    category_name: '营养辅食奶粉',
+                    category_id: 4339,
+                    category_icon: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/uploads/20230317/6a2edc1bf28f44671bdac27b73a0e0a5.jpg',
+                    parent_id: 4360,
+                    tag: '',
+                    children: []
+                  },
+                  {
+                    category_name: '孕产妇用品',
+                    category_id: 4340,
+                    category_icon: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/uploads/20230317/20c4d05eff9cb34757b42de770536c26.webp.jpg',
+                    parent_id: 4360,
+                    tag: '',
+                    children: []
+                  },
+                  {
+                    category_name: '婴童用品',
+                    category_id: 4342,
+                    category_icon: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/uploads/20230317/b8ec88d8b68a2cb50537a792820c6960.webp.jpg',
+                    parent_id: 4360,
+                    tag: '',
+                    children: []
+                  }
+                ]
+              })
+            }
+            let items = res.items.map(item => {
+              //category_id === 0 时，认为是推荐分类
+              if(item.category_id === 0) item.category_name = this.recommendName;
+              item['category_icon'] = getServiceUrl(item['category_icon'], 'size3');
+              item.children = item.children.map(child => {
+                child['category_icon'] = getServiceUrl(child['category_icon'], 'size3');
+                return child;
+              });
+              return item;
+            });
+            this.allNavList = items;
+            resolve(items)
+          }).catch(err => {
+            this.$xdLog.catch(err);
+            resolve([])
+          })
+        } catch (error) {
+          this.$xdLog.catch(error);
+        }
+      },
+      handleToDetail(item) {
+        let params = `pid=${item.pid}&need_tag=${this.need_tag}`;
+        if (item.cateId) {
+          params += `&cateId=${item.cateId}`;
+        }
+        this.$xdUniHelper.navigateTo({
+          url: `${this.listPath}?${params}`
+        })
+      },
+      onJfbBack(options) {
+        this.$xdUniHelper.navigateBack()
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  @import "./JfbMallCategoryAllLess.less";
+
+  .jfb-mall-category-all {
+    &__body {
+      position: relative;
+      overflow: hidden;
+      z-index: 2;
+
+      .skeleton-wrap {
+        display: flex;
+        .type-left {
+          width: 200rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          & > view {
+            height: 110rpx;
+            display: flex;
+            align-items: center;
+          }
+          .cate-item {
+            .skeleton-item(100rpx);
+          }
+        }
+        .type-right {
+          flex: 1;
+          width: 100%;
+          padding: 20rpx;
+          .type_title {
+            height: 100rpx;
+            display: flex;
+            align-items: center;
+            & > view {
+              .skeleton-item(150rpx);
+            }
+            margin-bottom: 20rpx;
+          }
+          .type_list {
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 60rpx;
+            .type_item {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              & > view:first-child {
+                .skeleton-item(120rpx, 120rpx, 50%);
+              }
+              & > view:last-child {
+                .skeleton-item(100rpx, 24rpx);
+                margin-top: 10rpx;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

package/src/components/JfbMallCategoryAll/JfbMallCategoryAllLess.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-mall-category-all {
+  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-mall-category-all {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbMallCategoryAll/JfbMallCategoryAllMixin.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-mall-category-all'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}