jufubao-base 1.0.238-beta71 → 1.0.239-beta1

package/src/components/JfbBaseSavingDetail/components/echarts.vue

@@ -0,0 +1,254 @@
+<template>
+	<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
+	<canvas type="2d" class="echarts" :canvas-id="canvasId" :id="canvasId" @touchstart="touchStart"
+		@touchmove="touchMove" @touchend="touchEnd" />
+	<!-- #endif -->
+	<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
+	<canvas :key="canvasId" style="border-radius: 20rpx;" class="echarts" :canvas-id="canvasId" :id="canvasId" @touchstart="touchStart" @touchmove="touchMove"
+		@touchend="touchEnd" />
+	<!-- #endif -->
+
+</template>
+<script>
+	
+	/**
+	 * echartsForUniApp echart兼容uni-app
+	 * @description echart兼容uni-app
+	 * @property {Object} option 图表数据
+	 * @property {String} canvasId 画布id
+	 * @example <echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
+	 */
+	import WxCanvas from './wx-canvas.js';
+	import * as echarts from './echarts.min.js';	
+	
+	var chartList = {}
+	export default {
+		props: {
+			canvasId: {
+				type: String,
+				default: 'echarts'
+			},
+			option: {
+				type: Object,
+				default: () => {
+					return {}
+				}
+			},
+		},
+		watch: {
+			option(newValue, oldValue) {
+				if(newValue.series){
+					this.initChart(newValue)
+				}
+			}
+		},
+		data() {
+			return {
+				ctx:null
+			}
+		},
+		
+		mounted() {
+			// Disable prograssive because drawImage doesn't support DOM as parameter
+			// See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
+			console.log(echarts,'echartsechartsecharts');
+			
+			echarts.registerPreprocessor(option => {
+				console.log(option,'optionoptionoption');
+				
+				if (option && option.series) {
+					if (option.series.length > 0) {
+						option.series.forEach(series => {
+							series.progressive = 0;
+						});
+					} else if (typeof option.series === 'object') {
+						option.series.progressive = 0;
+					}
+				}
+			});
+
+		},
+
+		methods: {
+			getCanvasAttr2d() {
+				return new Promise((resolve, reject) => {
+					const query = uni.createSelectorQuery().in(this)
+					query
+						.select('#' + this.canvasId)
+						.fields({
+							node: true,
+							size: true
+						})
+						.exec(res => {
+							const canvasNode = res[0].node
+							this.canvasNode = canvasNode
+							const canvasDpr = uni.getSystemInfoSync().pixelRatio
+							const canvasWidth = res[0].width
+							const canvasHeight = res[0].height
+							const canvasRadius = res[0].borderRadius
+							this.ctx = canvasNode.getContext('2d')
+			
+							const canvas = new WxCanvas(this.ctx, this.canvasId, true, canvasNode)
+							echarts.setCanvasCreator(() => {
+								return canvas
+							})
+							resolve({
+								canvas,
+								canvasWidth,
+								canvasHeight,
+								canvasDpr,
+								canvasRadius
+							})
+						})
+				});
+			},
+			getCanvasAttr() {
+				return new Promise((resolve, reject) => {
+					this.ctx = uni.createCanvasContext(this.canvasId, this);
+					var canvas = new WxCanvas(this.ctx, this.canvasId, false);
+					echarts.setCanvasCreator(() => {
+						return canvas;
+					});
+					const canvasDpr = 1
+					var query = uni.createSelectorQuery()
+						// #ifndef MP-ALIPAY
+						.in(this)
+					// #endif
+					query.select('#' + this.canvasId).boundingClientRect(res => {
+						const canvasWidth = res.width
+						const canvasHeight = res.height
+						const canvasRadius = res.borderRadius
+						resolve({
+							canvas,
+							canvasWidth,
+							canvasHeight,
+							canvasDpr,
+							canvasRadius
+						})
+					}).exec();
+				});
+			},
+			// #ifdef H5
+			//H5绘制图表
+			initChart(option) {
+				this.ctx = uni.createCanvasContext(this.canvasId, this);				
+				chartList[this.canvasId] = echarts.init(document.getElementById(this.canvasId));
+				chartList[this.canvasId].setOption(option?option:this.option);
+				console.log(chartList[this.canvasId],this.canvasId,'canvasIdcanvasId');
+			},
+			//H5生成图片
+			canvasToTempFilePath(opt) {
+				const base64 = chartList[this.canvasId].getDataURL()
+				opt.success && opt.success({tempFilePath:base64})
+			},
+			// #endif
+			// #ifndef H5
+			//绘制图表
+			async initChart(option) {
+				// #ifdef MP-WEIXIN || MP-TOUTIAO 
+				const canvasAttr = await this.getCanvasAttr2d();
+				// #endif
+				// #ifndef MP-WEIXIN || MP-TOUTIAO
+				const canvasAttr = await this.getCanvasAttr();
+				// #endif
+				const {
+					canvas,
+					canvasWidth,
+					canvasHeight,
+					canvasDpr,
+					canvasRadius
+				} = canvasAttr
+				chartList[this.canvasId] = echarts.init(canvas, null, {
+					width: canvasWidth,
+					height: canvasHeight,
+					devicePixelRatio: canvasDpr, // new
+					borderRadius: canvasRadius
+				});
+				canvas.setChart(chartList[this.canvasId]);
+				chartList[this.canvasId].setOption(option?option:this.option);
+			},
+			//生成图片
+			canvasToTempFilePath(opt) {
+				// #ifdef MP-WEIXIN || MP-TOUTIAO
+				var query = uni.createSelectorQuery()
+				// #ifndef MP-ALIPAY
+					.in(this)
+				// #endif
+				query.select('#' + this.canvasId).fields({ node: true, size: true }).exec(res => {
+					const canvasNode = res[0].node
+					opt.canvas = canvasNode
+					uni.canvasToTempFilePath(opt, this)
+				})
+				// #endif
+				// #ifndef MP-WEIXIN || MP-TOUTIAO
+				if (!opt.canvasId) {
+					opt.canvasId = this.canvasId;
+				}
+				this.ctx.draw(true, () => {
+					uni.canvasToTempFilePath(opt, this);
+				});
+				// #endif
+			},
+			// #endif
+			
+			touchStart(e) {
+				if (chartList[this.canvasId] && e.touches.length > 0) {
+					var touch = e.touches[0];
+					var handler = chartList[this.canvasId].getZr().handler;
+					handler.dispatch('mousedown', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.dispatch('mousemove', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.processGesture(wrapTouch(e), 'start');
+				}
+			},
+			touchMove(e) {
+				if (chartList[this.canvasId] && e.touches.length > 0) {
+					var touch = e.touches[0];
+					var handler = chartList[this.canvasId].getZr().handler;
+					handler.dispatch('mousemove', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.processGesture(wrapTouch(e), 'change');
+				}
+			},
+
+			touchEnd(e) {
+				if (chartList[this.canvasId]) {
+					const touch = e.changedTouches ? e.changedTouches[0] : {};
+					var handler = chartList[this.canvasId].getZr().handler;
+					handler.dispatch('mouseup', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.dispatch('click', {
+						zrX: touch.x,
+						zrY: touch.y
+					});
+					handler.processGesture(wrapTouch(e), 'end');
+				}
+			}
+		}
+	}
+
+	function wrapTouch(event) {
+		for (let i = 0; i < event.touches.length; ++i) {
+			const touch = event.touches[i];
+			touch.offsetX = touch.x;
+			touch.offsetY = touch.y;
+		}
+		return event;
+	}
+</script>
+<style lang="scss" scoped>
+	.echarts {
+		width: 100%;
+		height: 100%;
+		border-radius: 40rpx;
+	}
+</style>

package/src/components/JfbBaseSavingDetail/components/wx-canvas.js

@@ -0,0 +1,105 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId, isNew, canvasNode) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+    this.isNew = isNew
+    if (isNew) {
+      this.canvasNode = canvasNode;
+    }
+    else {
+      this._initStyle(ctx);
+    }
+
+    // this._initCanvas(zrender, ctx);
+
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent() {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart.getZr().handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+
+  set width(w) {
+    if (this.canvasNode) this.canvasNode.width = w
+  }
+  set height(h) {
+    if (this.canvasNode) this.canvasNode.height = h
+  }
+
+  get width() {
+    if (this.canvasNode)
+      return this.canvasNode.width
+    return 0
+  }
+  get height() {
+    if (this.canvasNode)
+      return this.canvasNode.height
+    return 0
+  }
+}

package/src/components/JfbBaseShare/Api.js

@@ -0,0 +1,20 @@
+'use strict';
+/**
+ * @description  接口配置，
+ * 在设置方法名字当时候，别忘记加上【模块名字】：Share
+ * @type {*[]}
+ */
+module.exports = [
+  {
+    mapFnName: "getInviteCardList",
+    title: "获取邀请卡列表",
+    path: "/dist/v1/invitation_card",
+    isRule: false,
+    params: {
+      page_token: ['当前页', 'Number', '必选'],
+      page_size: ['每页数量', 'Number', '必选'],
+    },
+    isConsole: true,
+    disabled: false,
+  },
+];

package/src/components/JfbBaseShare/Attr.js

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

package/src/components/JfbBaseShare/JfbBaseShare.vue

@@ -0,0 +1,273 @@
+<template>
+  <view
+    class="jfb-base-share"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-share__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-share__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-share__body">
+      <view class="card_wrap">
+        <swiper class="card_swiper" next-margin="50rpx" previous-margin="50rpx" :current="shareIndex" @change="handleSwitch">
+          <swiper-item class="swiper_item" v-for="(item,i) in shareList" :key="i">
+            <view class="swiper_item-inner">
+              <image :src="item.share_image_url" mode="aspectFill"></image>
+              <!-- <view class="swiper_item-logo"></view>
+              <view class="swiper_item-title">邀请好友领福利</view>
+              <view class="swiper_item-qrcode"></view>
+              <view class="swiper_item-visit">邀请码<br/>LWNXK7H</view> -->
+            </view>
+            <!-- <image style="width: 600rpx;height: 900rpx;"
+              src="https://sandbox-img.jufubao.cn/uploads/20250410/34559f90dd5a01e7368c02bf33f1b484.png?ver=1744249748881&x-oss-process=style/size5"></image> -->
+          </swiper-item>
+        </swiper>
+      </view>
+      
+      <view v-if="showShare" class="share_wrap">
+        <view class="share_btn" @click="toSendWx">
+          <image src="https://sandbox-img.jufubao.cn/uploads/20250410/57bc093618bc51a85dc8bb68825d2b97.png?x-oss-process=style/size8" mode="widthFix"></image>
+        </view>
+        <view class="share_btn" @click="toSaveImg">
+          <image src="https://sandbox-img1.jufubao.cn/uploads/20250410/faeb136bfd684ab6fa4608208ad26294.png?x-oss-process=style/size8" mode="widthFix"></image>
+        </view>
+      </view>
+
+      <view class="visit_tip">
+        好友使用你的邀请码成功注册后<br/>Ta将成为你的邀请用户
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBaseShareMixin from "./JfbBaseShareMixin";
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins";
+  import getServiceUrl from "@/common/getServiceUrl";
+  import { mapState, mapMutations } from "vuex";
+  export default {
+    name: "JfbBaseShare",
+    components: {
+      XdFontIcon
+    },
+    mixins: [
+      componentsMixins, extsMixins, JfbBaseShareMixin
+    ],
+    data() {
+      return {
+        closeMask: true,
+        shareIndex: 0,
+        shareList: [],
+        isPreview: false,
+        //todo
+      }
+    },
+    computed: {
+      ...mapState(["shareInfo"]),
+      ...mapMutations(["setShareInfo"]),
+      showShare(){
+        if(this.isPreview) return true;
+        // #ifdef MP-WEIXIN
+        return true;
+        // #endif
+        // #ifdef H5
+        return false;
+        // #endif
+      }
+    },
+    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.isPreview = this.$configProject['isPreview'];
+      //todo
+    },
+    methods: {
+      onJfbLoad(options) {
+
+        this.p_getInviteCardList();
+      },
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+
+      },
+      p_getInviteCardList(){
+        jfbRootExec("getInviteCardList", {
+          vm: this,
+          data: {
+            page_token: '1'
+          }
+        }).then(res => {
+          this.shareList = res.list.map(item => {
+            let urlSearch = item.share_image_url.split('?')[1];
+            let newImgUrl = getServiceUrl(item.share_image_url);
+            item.share_image_url = newImgUrl.split('?')[0] + '?' + urlSearch;
+            return item;
+          });
+        })
+      },
+      handleSwitch(e){
+        this.shareIndex = e.detail.current;
+      },
+      toSendWx(){
+        let shareIndex = this.shareIndex;
+        let curShare = this.shareList[shareIndex];
+        this.setShareInfo({
+          title: "您的好友邀请您使用PLUS会员",
+          imageUrl: curShare.share_image_url,
+          path: `${curShare.jump_url}`,
+        });
+      },
+      toSaveImg(){
+        let shareIndex = this.shareIndex;
+        let curShare = this.shareList[shareIndex];
+        uni.getImageInfo({
+          src: curShare.share_image_url,
+          success: (res) => {
+            uni.saveImageToPhotosAlbum({
+              filePath: res.path,
+              success: () => {
+                uni.showToast({
+                  title: '保存成功',
+                  icon: "success"
+                })
+              }
+            })
+          }
+        })
+
+      },
+      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 "./JfbBaseShareLess.less";
+
+  .jfb-base-share {
+    &__body{
+      padding: 60rpx 0;
+      box-sizing: border-box;
+      .card_wrap{
+        height: 960rpx;
+        box-sizing: border-box;
+        .card_swiper{
+          height: 100%;
+          width: 100%;
+          .swiper_item{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &-inner{
+              width: 100%;
+              height: 100%;
+              // background: url('https://sandbox-img.jufubao.cn/uploads/20250410/2d9f5ec31efb5cddece747d8b8da51f0.png?x-oss-process=style/size8') no-repeat;
+              // background-size: auto 100%;
+              box-sizing: border-box;
+              // display: flex;
+              // flex-direction: column;
+              // align-items: center;
+              image{
+                width: 100%;
+                height: 100%;
+              }
+            }
+            &-logo{
+              height: 96rpx;
+              width: 96rpx;
+              background-color: #FFFFFF;
+            }
+            &-title{
+              margin-top: 24rpx;
+              color: #B35300;
+              font-size: 40rpx;
+              font-weight: 500;
+            }
+            &-qrcode{
+              width: 400rpx;
+              height: 400rpx;
+              background-color: #FFFFFF;
+              margin-top: 60rpx;
+              border-radius: 24rpx;
+            }
+            &-visit{
+              width: 400rpx;
+              height: 120rpx;
+              background: linear-gradient(180deg, #FEFEF5 0%, #FDFDCB 100%);
+              margin-top: 36rpx;
+              border-radius: 24rpx;
+              font-size: 32rpx;
+              font-weight: 500;
+              color: #965720;
+              text-align: center;
+              padding-top: 20rpx;
+              box-sizing: border-box;
+            }
+          }
+        }
+      }
+      .share_wrap{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .share_btn{
+          margin-top: 60rpx;
+          width: 300rpx;
+          image{
+            width: 100%;
+          }
+
+          & + .share_btn{
+            margin-left: 32rpx;
+          }
+        }
+      }
+      .visit_tip{
+        color: #965720;
+        font-size: 26rpx;
+        margin-top: 32rpx;
+        text-align: center;
+      }
+    }
+  }
+</style>