@cloudbase/weda-ui-mp 0.2.20

package/components/wd-upload-image/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {
+    "wd-form-item": "../wd-form-item/index",
+    "old-image-uploader": "../form/uploader"
+  }
+}

package/components/wd-upload-image/index.wxml

@@ -0,0 +1,45 @@
+<block wx:if="{{visible}}">
+  <wd-form-item
+    id="{{id}}"
+    className="{{className}}"
+    style="{{style}}"
+    label="{{label}}"
+    labelVisible="{{labelVisible}}"
+    labelTips="{{labelTips}}"
+    labelWidth="{{labelWidth}}"
+    labelAlign="{{labelAlign}}"
+    labelWrap="{{labelWrap}}"
+    layout="{{actualLayout}}"
+    extra="{{extra}}"
+    required="{{required}}"
+    requiredFlag="{{requiredFlag}}"
+    validateState="{{validateState}}"
+    validateErrorMsg="{{validateErrorMsg}}"
+    classRoot="{{classRoot}}"
+    size="{{size}}"
+    borderedH5="{{borderedH5}}"
+  >
+    <old-image-uploader
+      labelVisible="{{false}}"
+      acceptTypes="{{acceptTypes}}"
+      defaultValue="{{value}}"
+      maxSize="{{maxSize}}"
+      maxUploadCount="{{maxUploadCount}}"
+      single="{{single}}"
+      tips="{{tips}}"
+      isChooseAvatar="{{isChooseAvatar}}"
+      showShape="{{showShape}}"
+      readOnly="{{readOnly}}"
+      disabled="{{disabled || readOnly}}"
+      isCompressBeforeUpload="{{isCompressBeforeUpload}}"
+      compressQuality="{{compressQuality}}"
+      compressedHeight="{{compressedHeight}}"
+      compressedWidth="{{compressedWidth}}"
+      callbacks="{{callbacks}}"
+      bind:change="handleChange"
+      sourceType="{{sourceType}}"
+      bind:success="handleEvent"
+      bind:error="handleEvent"
+    />
+  </wd-form-item>
+</block>

package/components/web-view/index.js

@@ -0,0 +1,69 @@
+import handleEvents from '../../utils/handleEvents';
+import classNames from '../../utils/classnames';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { WD_PREFIX } from '../../utils/constant';
+Component({
+  options: {
+    virtualHost: true,
+  },
+  behaviors: [commonCompBehavior],
+  properties: {
+    id: {
+      type: String,
+      value: '',
+    },
+    link: {
+      type: String,
+      value: '',
+    },
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+  },
+  data: {},
+  lifetimes: {
+    attached() {
+      this.updateWidgetAPI();
+      this.setData({ id: this.id });
+    },
+  },
+  methods: {
+    updateWidgetAPI() {
+      const { link } = this.properties;
+
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          link,
+        });
+    },
+
+    ...handleEvents([
+      { title: '接收网页消息', name: 'message' },
+      { title: '网页加载成功', name: 'load' },
+      { title: '网页加载失败', name: 'error' },
+    ]),
+  },
+  observers: {
+    className: function (className) {
+      const classPrefix = WD_PREFIX;
+      // 响应式css api
+      const platformCss = `${classPrefix}-mp-web-view`;
+      const classes = {
+        [platformCss]: true,
+      };
+      const cls = classNames({
+        ...classes,
+        [className]: className,
+      });
+      this.setData({ cls });
+    },
+    link: function () {
+      this.updateWidgetAPI();
+    },
+  },
+});

package/components/web-view/index.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "shared",
+  "usingComponents": {}
+}

package/components/web-view/index.wxml

@@ -0,0 +1 @@
+<web-view id="{{id}}" style="{{style}}" class="{{cls}}" src="{{link}}" bindmessage="message" bindload="load" binderror="error"></web-view>

package/components/web-view/index.wxss

@@ -0,0 +1 @@
+@import '../../style/weda-ui.wxss';

package/components/wedaVideo/index.js

@@ -0,0 +1,183 @@
+import { getTempFileURL } from '../../utils/tcb';
+import handleEvents from '../../utils/handleEvents';
+import { commonCompBehavior } from '../../utils/common-behavior';
+import { getWedaAPI } from '../../utils/getWedaApi';
+import { errorHandler } from '../../utils/error';
+// component/videojs.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    videoDataSource: {
+      type: String,
+      value: '',
+    },
+    posterImage: {
+      type: String,
+      value: '',
+    },
+    autoPlay: {
+      type: Boolean,
+      value: false,
+    },
+    loopPlay: {
+      type: Boolean,
+      value: false,
+    },
+    mutePlay: {
+      type: Boolean,
+      value: false,
+    },
+    controlBarStatus: {
+      type: Boolean,
+      value: true,
+    },
+    startTime: {
+      type: Number,
+      value: 0,
+    },
+    endTime: {
+      type: Number,
+      value: 0,
+    },
+    objectFit: {
+      type: String,
+      value: 'contain',
+    },
+    showCenterPlayBtn: {
+      type: Boolean,
+      value: true,
+    },
+  },
+  behaviors: [commonCompBehavior],
+  lifetimes: {
+    attached() {
+      const videoContext = wx.createVideoContext(this.data.videoId, this);
+      this.setReadonlyAttributes &&
+        this.setReadonlyAttributes({
+          videoContext,
+          play: () => videoContext.play(),
+          pause: () => videoContext.pause(),
+          stop: () => videoContext.stop(),
+          seek: ({ position }) => videoContext.seek(position),
+          playbackRate: ({ rate }) => videoContext.playbackRate(rate),
+          requestFullScreen: () => videoContext.requestFullScreen(),
+          exitFullScreen: () => videoContext.exitFullScreen(),
+        });
+    },
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    videoId: `${new Date().getTime()}-${Math.random()}`,
+    videoErrMsg: '',
+    videoErrStatus: false,
+    realSrc: '',
+    realPosterImage: '',
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    ...handleEvents(
+      [
+        {
+          name: 'pause',
+          title: '暂停播放',
+        },
+        {
+          name: 'ended',
+          title: '播放到末尾',
+        },
+        {
+          name: 'fullscreenchange',
+          title: '全屏切换',
+        },
+        {
+          name: 'waiting',
+          title: '视频缓冲',
+        },
+        {
+          name: 'progress',
+          title: '加载进度变化',
+        },
+        {
+          name: 'loadedmetadata',
+          title: '视频元数据加载完成',
+        },
+        {
+          name: 'seekcomplete',
+          title: '跳转到指定位置 seekcomplete',
+        },
+      ],
+      'bind'
+    ),
+    bindtimeupdate(event) {
+      this.triggerEvent('timeupdate', event.detail);
+      const { currentTime } = event.detail;
+      const { endTime, loopPlay } = this.properties;
+      const videoContext = wx.createVideoContext(this.data.videoId, this);
+      if (currentTime >= endTime && endTime) {
+        videoContext.seek(0);
+        loopPlay ? videoContext.play() : videoContext.pause();
+      }
+    },
+    binderror(event) {
+      this.triggerEvent('error', event.detail);
+      const { errMsg } = event.detail;
+      this.setData({
+        videoErrMsg: errMsg,
+        videoErrStatus: true,
+      });
+      console.error('binderror', event.detail);
+    },
+    bindplay(event) {
+      this.triggerEvent('play', event.detail);
+      this.setData({
+        videoErrMsg: '',
+        videoErrStatus: false,
+      });
+    },
+  },
+  observers: {
+    videoDataSource: function () {
+      const { videoDataSource = '' } = this.properties;
+      let { app } = getWedaAPI();
+      if (/^cloud:\/\//.test(videoDataSource)) {
+        app.cloud
+          .getTempFileURL(videoDataSource)
+          .then((res) => {
+            this.setData({ realSrc: res || '' });
+          })
+          .catch((e) => {
+            errorHandler({
+              code: 'WedaVideo.GetVideoDataSourceError',
+              error: e,
+            });
+            this.setData({
+              realSrc: videoDataSource,
+            });
+          });
+      } else {
+        this.setData({
+          realSrc: videoDataSource,
+        });
+      }
+    },
+    posterImage: async function (posterImage) {
+      const realPosterImage = await getTempFileURL(posterImage);
+      this.setData({ realPosterImage });
+    },
+  },
+});

package/components/wedaVideo/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/components/wedaVideo/index.wxml

@@ -0,0 +1,29 @@
+<view style="position: relative">
+  <video
+    class="weda-ui_video-mp {{className}}"
+    style="{{style}}"
+    id="{{videoId}}"
+    src="{{realSrc}}"
+    poster="{{realPosterImage}}"
+    autoplay="{{autoPlay}}"
+    loop="{{loopPlay}}"
+    muted="{{mutePlay}}"
+    controls="{{controlBarStatus}}"
+    initial-time="{{startTime}}"
+    duration="{{endTime}}"
+    show-mute-btn="{{true}}"
+    object-fit="{{objectFit}}"
+    show-center-play-btn="{{showCenterPlayBtn}}"
+    bindplay="bindplay"
+    bindpause="bindpause"
+    bindended="bindended"
+    bindtimeupdate="bindtimeupdate"
+    bindfullscreenchange="bindfullscreenchange"
+    bindwaiting="bindwaiting"
+    binderror="binderror"
+    bindprogress="bindprogress"
+    bindloadedmetadata="bindloadedmetadata"
+    bindseekcomplete="bindseekcomplete"
+  ></video>
+  <view class="weda-ui_video-mp_error" wx:if="{{videoErrStatus}}"> 视频资源加载出错，错误信息：{{videoErrMsg}} </view>
+</view>

package/components/wedaVideo/index.wxss

@@ -0,0 +1,20 @@
+/* component/videojs.wxss */
+
+.weda-ui_video-mp {
+  width: 100%;
+  position: relative;
+}
+
+.weda-ui_video-mp_error {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: rgba(0, 0, 0);
+  top: 0;
+  left: 0;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}

package/components/wxOpenApi/phone/index.js

@@ -0,0 +1,122 @@
+import classNames from '../../../utils/classnames';
+import destr from '../../../utils/destr';
+import { callWedaApi } from '../../../utils/tcb';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    text: {
+      type: String,
+      value: '按钮标题',
+    },
+    size: {
+      type: String,
+      value: 'default',
+    },
+    type: {
+      type: String,
+      value: 'wechat',
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    formType: {
+      type: String,
+    },
+    openType: {
+      type: String,
+      value: 'getPhoneNumber',
+    },
+  },
+  data: {
+    cls: '',
+  },
+  methods: {
+    async getPhoneNumber(e) {
+      if (
+        e?.detail?.errMsg?.includes('fail') ||
+        e?.detail?.errno ||
+        !e?.detail?.code
+      ) {
+        console.warn(
+          '获取手机号失败:',
+          e?.detail || { errMsg: '可能基础库版本过低' }
+        );
+        this.triggerEvent(
+          'phonefail',
+          e?.detail || { errMsg: '获取手机号失败，可能基础库版本过低' }
+        );
+        return;
+      }
+      const res = await callWedaApi({
+        action: 'InvokeComponentWxModule',
+        data: {
+          WxRemoteMethod: 'GetPhoneNumber',
+          Method: 'InvokeComponentWxData',
+          ReqBody: JSON.stringify({ code: e?.detail?.code }),
+        },
+      });
+      if (!res?.Data) {
+        this.triggerEvent('phonefail', { errMsg: '获取手机号失败' });
+        return;
+      }
+      const parseData = destr(res?.Data) || {};
+      const { phone_info } = parseData;
+      if (!phone_info) {
+        this.triggerEvent('phonefail', { errMsg: '获取手机号失败' });
+        return;
+      }
+      this.triggerEvent('phonesuccess', {
+        ...phone_info,
+        timestamp: phone_info?.watermark?.timestamp || '',
+      });
+    },
+    init() {
+      const { className, size, type, disabled } = this.data;
+      const cls = classNames('weda-ui', {
+        'weda-button': true,
+        'weui-btn': true,
+        'weui-btn_mini': size === 'mini',
+        'weui-btn_large': size === 'large',
+        'weui-btn_primary': type === 'primary' || type === 'wechat',
+        'weui-btn_default': type === 'default',
+        'weui-btn_warn': type === 'warn',
+        'weui-btn_wechat': type === 'wechat',
+        'weui-btn_disabled': disabled,
+        [className]: className,
+      });
+
+      this.setData({ cls });
+    },
+  },
+  observers: {
+    'className,size,type,disabled': function () {
+      this.init();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.init();
+    },
+  },
+});

package/components/wxOpenApi/phone/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/components/wxOpenApi/phone/index.wxml

@@ -0,0 +1,4 @@
+<button id="{{id}}" class="{{cls}}" style="{{style}}" size="{{size}}" loading="{{loading}}" disabled="{{disabled}}" form-type="{{formType}}" open-type="{{openType}}" bindgetphonenumber="getPhoneNumber">
+  {{text ? text : ''}}
+  <slot name="contentSlot" wx:if="{{!text}}" />
+</button>

package/components/wxOpenApi/phone/index.wxss

@@ -0,0 +1,26 @@
+@import '../../../style/weda-ui.wxss';
+
+.weui-btn.weui-btn_primary:not(.weui-btn_disabled):active {
+  background-color: var(--weui-TAG-TEXT-BLUE);
+}
+
+.weui-btn.weui-btn_primary.weui-btn_wechat:not(.weui-btn_disabled):active {
+  background-color: var(--weui-TAG-TEXT-GREEN);
+}
+
+.weui-btn.weui-btn_primary.weui-btn_wechat {
+  background-color: var(--weui-WECHAT);
+}
+
+.weda-ui.weui-btn.weui-btn_large {
+  font-size: large;
+  display: block;
+  padding-left: 7px;
+  padding-right: 7px;
+  text-align: center;
+  width: 100%;
+}
+
+button::after {
+  border: none;
+}

package/components/wxOpenApi/phoneCode/index.js

@@ -0,0 +1,102 @@
+import classNames from '../../../utils/classnames';
+
+Component({
+  options: {
+    virtualHost: true,
+    multipleSlots: true,
+  },
+  properties: {
+    className: {
+      type: String,
+      value: '',
+    },
+    style: {
+      type: String,
+      value: '',
+    },
+    id: {
+      type: String,
+      value: '',
+    },
+    text: {
+      type: String,
+      value: '按钮标题',
+    },
+    size: {
+      type: String,
+      value: 'default',
+    },
+    type: {
+      type: String,
+      value: 'wechat',
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    formType: {
+      type: String,
+    },
+    openType: {
+      type: String,
+      value: 'getPhoneNumber',
+    },
+  },
+  data: {
+    cls: '',
+  },
+  methods: {
+    async getPhoneCodeNumber(e) {
+      if (
+        e?.detail?.errMsg?.includes('fail') ||
+        e?.detail?.errno ||
+        !e?.detail?.code
+      ) {
+        console.warn(
+          '获取手机号授权令牌失败:',
+          e?.detail || { errMsg: '可能基础库版本过低' }
+        );
+        this.triggerEvent(
+          'phoneCodeFail',
+          e?.detail || { errMsg: '获取手机号授权令牌失败，可能基础库版本过低' }
+        );
+        return;
+      }
+      const { code } = e.detail;
+      this.triggerEvent('phoneCodeSuccess', {
+        code,
+      });
+    },
+    init() {
+      const { className, size, type, disabled } = this.data;
+      const cls = classNames('weda-ui', {
+        'weda-button': true,
+        'weui-btn': true,
+        'weui-btn_mini': size === 'mini',
+        'weui-btn_large': size === 'large',
+        'weui-btn_primary': type === 'primary' || type === 'wechat',
+        'weui-btn_default': type === 'default',
+        'weui-btn_warn': type === 'warn',
+        'weui-btn_wechat': type === 'wechat',
+        'weui-btn_disabled': disabled,
+        [className]: className,
+      });
+
+      this.setData({ cls });
+    },
+  },
+  observers: {
+    'className,size,type,disabled': function () {
+      this.init();
+    },
+  },
+  lifetimes: {
+    attached() {
+      this.init();
+    },
+  },
+});

package/components/wxOpenApi/phoneCode/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "shared"
+}

package/components/wxOpenApi/phoneCode/index.wxml

@@ -0,0 +1,4 @@
+<button id="{{id}}" class="{{cls}}" style="{{style}}" size="{{size}}" loading="{{loading}}" disabled="{{disabled}}" form-type="{{formType}}" open-type="{{openType}}" bindgetphonenumber="getPhoneCodeNumber">
+  {{text ? text : ''}}
+  <slot name="contentSlot" wx:if="{{!text}}" />
+</button>

package/components/wxOpenApi/phoneCode/index.wxss

@@ -0,0 +1,26 @@
+@import '../../../style/weda-ui.wxss';
+
+.weui-btn.weui-btn_primary:not(.weui-btn_disabled):active {
+  background-color: var(--weui-TAG-TEXT-BLUE);
+}
+
+.weui-btn.weui-btn_primary.weui-btn_wechat:not(.weui-btn_disabled):active {
+  background-color: var(--weui-TAG-TEXT-GREEN);
+}
+
+.weui-btn.weui-btn_primary.weui-btn_wechat {
+  background-color: var(--weui-WECHAT);
+}
+
+.weda-ui.weui-btn.weui-btn_large {
+  font-size: large;
+  display: block;
+  padding-left: 7px;
+  padding-right: 7px;
+  text-align: center;
+  width: 100%;
+}
+
+button::after {
+  border: none;
+}