@atomicservice/ascf-base 1.0.13 → 1.0.15

package/dist/templates/ascfDemos/page/component/index.css

@@ -0,0 +1,11 @@
+/* 列表的列表 */
+.category-list {
+  display: grid;
+  row-gap: 12px;
+  padding: 12px 16px;
+}
+
+.card {
+  border-radius: 20px;
+  background-color: white;
+}

package/dist/templates/ascfDemos/page/component/index.hxml

@@ -0,0 +1,7 @@
+<as-container title="{{title}}" logo="{{logo}}" desc="{{desc}}">
+  <view class="category-list">
+    <view class="card" has:for="{{route}}" has:for-item="item">
+      <as-toggle-list category="{{item.category}}" list="{{item.list}}" />
+    </view>
+  </view>
+</as-container>

package/dist/templates/ascfDemos/page/component/index.js

@@ -0,0 +1,10 @@
+import config from '../../config/component.config';
+
+Page({
+  data: {
+    title: config.title,
+    logo: config.logo,
+    desc: config.desc,
+    route: config.route
+  },
+})

package/dist/templates/ascfDemos/page/component/index.json

@@ -0,0 +1,7 @@
+{
+  "navigationStyle": "custom",
+  "usingComponents": {
+    "as-container": "asui/as-container/as-container",
+    "as-toggle-list": "asui/as-toggle-list/as-toggle-list"
+  }
+}

package/dist/templates/ascfDemos/page/component/pages/button/button.css

@@ -0,0 +1,11 @@
+.minibtn-ui {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-ui {
+  justify-content: center;
+  align-self: center;
+  margin-bottom: 16px;
+}

package/dist/templates/ascfDemos/page/component/pages/button/button.hxml

@@ -0,0 +1,11 @@
+<as-cell>
+  <view class="minibtn-ui">
+    <button type="primary" size="mini">mini</button>
+  </view>
+  <button class="btn-ui" type="primary">主要操作按钮</button>
+  <button class="btn-ui" type="default">次要操作按钮</button>
+  <button class="btn-ui" type="warn">警告按钮</button>
+  <button class="btn-ui" type="default" plain="true">描边按钮</button>
+  <button class="btn-ui" type="default" disabled="true">禁用按钮</button>
+  <button class="btn-ui" type="default" loading="true">loading按钮</button>
+</as-cell>

package/dist/templates/ascfDemos/page/component/pages/button/button.js

@@ -0,0 +1,4 @@
+Page({
+
+})
+

package/dist/templates/ascfDemos/page/component/pages/button/button.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "button"
+}

package/dist/templates/ascfDemos/page/component/pages/camera/camera.css

@@ -0,0 +1,12 @@
+.con_camera {
+  padding: 50rpx 33rpx 0;
+}
+camera {
+  width: 100%;
+  height: 500rpx;
+  margin-bottom: 50rpx;
+}
+.btnclasss {
+  width: 100%;
+  margin-bottom: 25rpx;
+}

package/dist/templates/ascfDemos/page/component/pages/camera/camera.hxml

@@ -0,0 +1,8 @@
+<view class="con_camera">
+  <camera flash="auto" resolution="low" device-position="back" binderror="error" bindstop="stop"
+    bindinitdone="initdone">
+  </camera>
+  <button bindtap="takePhoto" class="btnclasss">拍照并保存</button>
+  <button bindtap="startRecord" class="btnclasss">开始录像</button>
+  <button type="primary" bindtap="stopRecord" class="btnclasss">结束录像并保存</button>
+</view>

package/dist/templates/ascfDemos/page/component/pages/camera/camera.js

@@ -0,0 +1,113 @@
+Page({
+  onReady: function () {
+    this.ctx = has.createCameraContext();
+  },
+  takePhoto() {
+    const that = this;
+    this.ctx.takePhoto({
+      quality: 'medium',
+      success: (res) => {
+        that.toSaveImage(res.tempImagePath);
+        console.log('takePhoto normal success', res);
+      },
+      fail: (res) => {
+        console.log('takePhoto normal fail', res);
+      },
+      complete: (res) => {
+        console.log('takePhoto normal complete');
+      },
+    });
+  },
+  toSaveImage(path) {
+    has.saveImageToPhotosAlbum({
+      filePath: path,
+      success(res) {
+        console.log('saveImageToPhotosAlbum success', res);
+        has.showToast({
+          title: '保存图片成功',
+          icon: 'none',
+        });
+      },
+      fail(res) {
+        console.log('saveImageToPhotosAlbum fail', res);
+        has.showToast({
+          title: '保存图片失败',
+          icon: 'none',
+        });
+      },
+      complete(res) {
+        console.log('saveImageToPhotosAlbum complete');
+      },
+    });
+  },
+  startRecord() {
+    const that = this;
+    that.ctx.startRecord({
+      timeout: 30,
+      timeoutCallback: (res) => {
+        has.showToast({
+          title: '录制时长达到上限',
+          icon: 'none',
+        });
+        that.toSaveVideo(res.tempVideoPath);
+        console.log('timeoutCallback Result', JSON.stringify(res));
+      },
+      success: () => {
+        has.showToast({
+          title: '开始录像',
+          icon: 'none',
+        });
+        console.log('startRecord success');
+      },
+      fail: (res) => {
+        console.log('startRecord fail', res);
+      },
+    });
+  },
+  stopRecord() {
+    const that = this;
+    this.ctx.stopRecord({
+      success: (res) => {
+        that.toSaveVideo(res.tempVideoPath);
+        console.log('stopRecord success', JSON.stringify(res));
+      },
+      fail: (res) => {
+        console.log('stopRecord fail', res);
+      },
+    });
+  },
+  toSaveVideo(path) {
+    has.saveVideoToPhotosAlbum({
+      filePath: path,
+      success() {
+        has.showToast({
+          title: '保存视频成功',
+          icon: 'none',
+        });
+        console.log('saveVideoToPhotosAlbum success');
+      },
+      fail(res) {
+        has.showToast({
+          title: '保存视频失败',
+          icon: 'none',
+        });
+        console.log('saveVideoToPhotosAlbum fail');
+      },
+      complete() {
+        console.log('saveVideoToPhotosAlbum complete');
+      },
+    });
+  },
+  error(e) {
+    console.log('用户不允许使用摄像头:', e.detail);
+  },
+  stop(e) {
+    console.log('摄像头非正常终止:', e.detail);
+  },
+  initdone(e) {
+    console.log('相机初始化完成:', e.detail);
+  },
+  scancode(e) {
+    console.log('扫码识别成功:', e.detail);
+  },
+});

package/dist/templates/ascfDemos/page/component/pages/camera/camera.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "camera"
+}

package/dist/templates/ascfDemos/page/component/pages/canvas/canvas.css

@@ -0,0 +1,10 @@
+.canvas {
+  height: 300px;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.btn-ui {
+  margin-top: 24px;
+  justify-content: center;
+}

package/dist/templates/ascfDemos/page/component/pages/canvas/canvas.hxml

@@ -0,0 +1,5 @@
+<as-cell>
+    <canvas canvas-id="myCanvas" class="canvas" type="2d"></canvas>
+    <button class="btn-ui" type="primary" bindtap="drawRectangle">点击在画布绘制矩形</button>
+    <button class="btn-ui" type="primary" bindtap="canvasToTempFilePath">点击保存至相册</button>
+</as-cell>

package/dist/templates/ascfDemos/page/component/pages/canvas/canvas.js

@@ -0,0 +1,49 @@
+Page({
+  drawRectangle() {
+    const ctx = has.createCanvasContext('myCanvas');
+    ctx.setFillStyle('#0A59F7');
+    ctx.fillRect(30, 30, 200, 100);
+    ctx.draw();
+  },
+  canvasToTempFilePath() {
+    const that = this;
+    has.canvasToTempFilePath({
+      canvasId: 'myCanvas',
+      x: 0,
+      y: 0,
+      width: 300,
+      height: 200,
+      destWidth: 80,
+      destHeight: 80,
+      success(e) {
+        that.toSave(e.tempFilePath);
+        console.log('canvasToTempFilePath success', e);
+      },
+      fail(e) {
+        console.log('canvasToTempFilePath fail', e);
+      },
+    });
+  },
+  toSave(url) {
+    has.saveImageToPhotosAlbum({
+      filePath: url,
+      success(res) {
+        console.log('saveImageToPhotosAlbum success', res);
+        has.showToast({
+          title: '保存图片成功',
+          icon: 'none',
+        });
+      },
+      fail(res) {
+        console.log('saveImageToPhotosAlbum fail', res);
+        has.showToast({
+          title: '保存图片失败',
+          icon: 'none',
+        });
+      },
+      complete(res) {
+        console.log('saveImageToPhotosAlbum complete');
+      },
+    });
+  },
+});

package/dist/templates/ascfDemos/page/component/pages/canvas/canvas.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "canvas"
+}

package/dist/templates/ascfDemos/page/component/pages/checkbox/checkbox.css

@@ -0,0 +1,13 @@
+.label {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.checkbox_label {
+  padding-left: 15px;
+  padding-right: 15px;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+}

package/dist/templates/ascfDemos/page/component/pages/checkbox/checkbox.hxml

@@ -0,0 +1,8 @@
+<as-cell title="选中的值：{{changeData}}">
+  <checkbox-group bindchange="checkboxChange">
+    <label class="label" has:for="{{items}}" has:key="{{item.value}}">
+      <checkbox value="{{item.value}}" checked="{{item.checked}}" disabled="{{item.disabled}}" />
+      <view class="checkbox_label">{{item.name}}</view>
+    </label>
+  </checkbox-group>
+</as-cell>

package/dist/templates/ascfDemos/page/component/pages/checkbox/checkbox.js

@@ -0,0 +1,17 @@
+Page({
+  data: {
+    items: [
+      { value: 'A', name: 'A', checked: true },
+      { value: 'B', name: 'B' },
+      { value: 'C', name: 'C', checked: true },
+      { value: 'D', name: 'D', disabled: true },
+    ],
+    changeData: ['A', 'C']
+  },
+
+  checkboxChange(e) {
+    this.setData({
+      changeData: e.detail.value
+    })
+  }
+})

package/dist/templates/ascfDemos/page/component/pages/checkbox/checkbox.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "checkbox"
+}

package/dist/templates/ascfDemos/page/component/pages/checkboxgroup/checkboxgroup.css

@@ -0,0 +1,14 @@
+@import "../../../common/lib/asui.css";
+
+.checkbox{
+  margin-right: 20rpx;
+}
+.myScoll {
+  width: 100%;
+  background-color: #F0F4F3;
+  height: 1300rpx;
+  white-space: nowrap;
+}
+.page-section-title{
+  margin: 20rpx 0;
+}

package/dist/templates/ascfDemos/page/component/pages/checkboxgroup/checkboxgroup.hxml

@@ -0,0 +1,26 @@
+<import src="../../../common/head.hxml"/>
+<import src="../../../common/foot.hxml"/>
+
+<view class="container">
+<scroll-view class="myScoll" scroll-y="true" scroll-x="true">
+  <template is="head" data="{{title: 'checkboxgroup'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+      <view class="asui-cells asui-cells_after-title">
+        <checkbox-group bindchange="checkboxChange">
+          <label class="asui-cell asui-check__label" has:for="{{items}}" has:key="{{item.value}}">
+            <view class="asui-cell__hd">
+              <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
+            </view>
+            <view class="asui-cell__bd">{{item.name}}</view>
+          </label>
+        </checkbox-group>
+      </view>
+      <view class="page-section-title">选中项发生改变时触发事件:</view>
+      <view class="page-section-title">{{changeDataValue}}</view>
+    </view>
+   </view>
+  <template is="foot"/>
+   </scroll-view>
+</view>

package/dist/templates/ascfDemos/page/component/pages/checkboxgroup/checkboxgroup.js

@@ -0,0 +1,21 @@
+Page({
+  data: {
+    items: [
+      {value: 'USA', name: '美国'},
+      {value: 'CHN', name: '中国'},
+      {value: 'BRA', name: '巴西'},
+      {value: 'JPN', name: '日本'},
+      {value: 'ENG', name: '英国'},
+      {value: 'FRA', name: '法国'}
+    ],
+    changeDataValue:''
+  },
+
+  checkboxChange(e) {
+    const values = e.detail.value;
+
+    this.setData({
+      changeDataValue: JSON.stringify(values)
+    })
+  }
+})

package/dist/templates/ascfDemos/page/component/pages/checkboxgroup/checkboxgroup.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "checkboxgroup"
+  }

package/dist/templates/ascfDemos/page/component/pages/form/form.css

@@ -0,0 +1,27 @@
+.group-ui {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.label-ui {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  row-gap: 8px;
+  padding-right: 24px;
+}
+
+.input-ui {
+  height: 35px;
+  width: auto;
+  margin-bottom: 16px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.btn-ui {
+  justify-content: center;
+}

package/dist/templates/ascfDemos/page/component/pages/form/form.hxml

@@ -0,0 +1,53 @@
+<form catchsubmit="formSubmit" catchreset="formReset">
+  <as-cell title="switch">
+    <switch name="switch" />
+  </as-cell>
+  <as-cell title="radio">
+    <radio-group class="group-ui" name="radio">
+      <label>
+        <view class="label-ui">
+          <radio value="radio1" />
+          <text>选项一</text>
+        </view>
+      </label>
+      <label>
+        <view class="label-ui">
+          <radio value="radio2" />
+          <text>选项二</text>
+        </view>
+      </label>
+    </radio-group>
+  </as-cell>
+  <as-cell title="checkbox">
+    <checkbox-group class="group-ui" name="checkbox">
+      <label>
+        <view class="label-ui">
+          <checkbox value="checkbox1" />
+          <text>选项一</text>
+        </view>
+      </label>
+      <label>
+        <view class="label-ui">
+          <checkbox value="checkbox2" />
+          <text>选项二</text>
+        </view>
+      </label>
+    </checkbox-group>
+  </as-cell>
+  <as-cell title="slider"></as-cell>
+  <slider value="50" name="slider" activeColor="{{activeColor}}" show-value></slider>
+  <as-cell title="input">
+    <input class="input-ui" name="input" placeholder="这是一个输入框" />
+  </as-cell>
+  <as-cell title="picker">
+    <picker name="picker" mode="date" value="{{date}}" start="{{startDay}}" end="{{endDay}}" bindchange="bindDateChange">
+      <view>当前选择: {{date}}</view>
+    </picker>
+  </as-cell>
+  <as-cell>
+    <view class="btn-ui">
+      <button type="primary" formType="submit">Submit</button>
+      <button formType="reset">Reset</button>
+    </view>
+  </as-cell>
+</form>

package/dist/templates/ascfDemos/page/component/pages/form/form.js

@@ -0,0 +1,33 @@
+
+Page({
+  data: {
+    formSubmitResult: '',
+    formResetResult: '',
+    startDay: '2015-01-01',
+    endDay: '2030-01-01',
+    date: '2024-12-01',
+    activeColor: '#0A59F7'
+  },
+
+  bindDateChange(e) {
+    console.log('日期选择器发生改变，携带值为', e.detail.value)
+    this.setData({
+      date: e.detail.value
+    })
+  },
+
+  formSubmit(e) {
+    console.log('form submit:', e.detail.value)
+    this.setData({
+      formSubmitResult: e.detail.value,
+    })
+  },
+
+  formReset(e) {
+    console.log('form reset:', e.detail.value)
+    this.setData({
+      formResetResult: e.detail.value,
+      date: '2024-12-01'
+    })
+  }
+})

package/dist/templates/ascfDemos/page/component/pages/form/form.json

@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "form"
+}

package/dist/templates/ascfDemos/page/component/pages/icon/icon.css

@@ -0,0 +1,39 @@
+.radio-box {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  width: 100%;
+}
+
+.label-ui {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+.icon-box {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.icon-box-ctn {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 8px;
+}
+
+.icon-box-space {
+  margin-bottom: 16px;
+}
+
+.icon-box-title {
+  padding-left: 15px;
+  font-size: 16px;
+}
+
+.icon-box-desc {
+  padding-left: 15px;
+  font-size: 14px;
+}