@atomicservice/ascf-base 1.0.13 → 1.0.15

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

@@ -0,0 +1,120 @@
+<as-cell title="设置icon大小：{{eventData}}">
+  <radio-group class="radio-box" bindchange="radioChange">
+    <label class="label-ui" has:for="{{items}}" has:key="{{item.value}}">
+      <radio value="{{item.value}}" checked="{{item.checked}}" />
+      <text>{{item.name}}</text>
+    </label>
+  </radio-group>
+  <view class="icon-box">
+    <icon type="success" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">success</view>
+      <view class="icon-box-desc">用于表示操作顺利完成</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="success_circle" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">success_circle</view>
+      <view class="icon-box-desc">用于表示操作顺利完成</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="success_no_circle" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">success_no_circle</view>
+      <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="safe_success" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">safe_success</view>
+      <view class="icon-box-desc">安全相关的操作已经成功完成</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="safe_warn" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">safe_warn</view>
+      <view class="icon-box-desc">安全操作相关的告警</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="info" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">info</view>
+      <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="info_circle" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">info_circle</view>
+      <view class="icon-box-desc">用于在表单中，表示有信息提示</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="warn" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">warn</view>
+      <view class="icon-box-desc">强烈警告,用户表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="warn" color="#C9C9C9" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">warn,设置color</view>
+      <view class="icon-box-desc">普通告警,用户表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="waiting" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">waiting</view>
+      <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="waiting_circle" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">waiting_circle</view>
+      <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="circle" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">circle</view>
+      <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="cancel" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">cancel</view>
+      <view class="icon-box-desc">用于在表单中，表示关闭或停止</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="download" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">download</view>
+      <view class="icon-box-desc">用于表示可下载</view>
+    </view>
+  </view>
+  <view class="icon-box">
+    <icon type="search" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">search</view>
+      <view class="icon-box-desc">用于搜索控件中，表示可搜索</view>
+    </view>
+  </view>
+  <view class="icon-box icon-box-space">
+    <icon type="clear" size="{{eventData}}"></icon>
+    <view class="icon-box-ctn">
+      <view class="icon-box-title">clear</view>
+      <view class="icon-box-desc">清除或取消操作</view>
+    </view>
+  </view>
+</as-cell>

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

@@ -0,0 +1,22 @@
+Page({
+  data: {
+    items: [
+      { value: '40', name: '40' },
+      { value: '60', name: '60', checked: 'true' },
+      { value: '80', name: '80' }
+    ],
+    eventData: '60'
+  },
+  radioChange(e) {
+    const items = this.data.items
+    for (let i = 0, len = items.length; i < len; ++i) {
+      items[i].checked = items[i].value === e.detail.value
+    }
+
+    this.setData({
+      items,
+      eventData: e.detail.value
+    })
+  },
+
+})

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

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

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

@@ -0,0 +1,3 @@
+.image {
+  width: 100%;
+}

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

@@ -0,0 +1,6 @@
+<as-cell title="本地资源">
+  <image class="image" mode="widthFix" src="../../image/roadway.png" />
+</as-cell>
+<as-cell title="线上资源">
+  <image class="image" mode="widthFix" src="https://h5hosting-drcn.dbankcdn.cn/cch5/wallet/ascf-cn/landscape.jpg" />
+</as-cell>

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

@@ -0,0 +1,2 @@
+Page({
+});

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

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

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

@@ -0,0 +1,9 @@
+.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;
+}

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

@@ -0,0 +1,9 @@
+<as-cell>
+  <input class="input-ui" type="number" placeholder="输入拉起数字键盘" />
+  <input class="input-ui" type="text" placeholder="输入拉起文本键盘" />
+  <input class="input-ui" password="{{true}}" placeholder="输入密码" />
+  <input class="input-ui" type="text" confirm-type="send" placeholder="输入时右下角为发送" />
+  <input class="input-ui" type="text" confirm-type="search" placeholder="右下角按钮为搜索" />
+  <input class="input-ui" type="text" confirm-type="next" placeholder="右下角按钮为下一步" />
+  <input class="input-ui" type="text" confirm-type="done" placeholder="右下角按钮为完成" />
+</as-cell>

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

@@ -0,0 +1,11 @@
+Page({
+  data: {
+    inputValue: "",
+  },
+
+  bindKeyInput(e) {
+    this.setData({
+      inputValue: e.detail.value,
+    });
+  },
+})

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

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

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

@@ -0,0 +1,10 @@
+.label-ui {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.checkbox-3 {
+  display: flex;
+}

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

@@ -0,0 +1,31 @@
+<as-cell title="表单组件在label内">
+  <checkbox-group>
+    <view has:for="{{checkboxItems}}">
+      <label class="label-ui">
+        <checkbox value="{{item.name}}" checked="{{item.checked}}"></checkbox>
+        <text>{{item.value}}</text>
+      </label>
+    </view>
+  </checkbox-group>
+</as-cell>
+<as-cell title="label用for标识表单组件">
+  <radio-group>
+    <view class="label-ui" has:for="{{radioItems}}">
+      <radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}"></radio>
+      <label for="{{item.name}}">
+        <text>{{item.name}}</text>
+      </label>
+    </view>
+  </radio-group>
+</as-cell>
+<as-cell title="label内有多个时选择第一个">
+  <label>
+    <view class="label-ui">
+      <checkbox>选项一</checkbox>
+    </view>
+    <view class="label-ui">
+      <checkbox>选项二</checkbox>
+    </view>
+    <view>点击该label下的文字默认选中第一个checkbox</view>
+  </label>
+</as-cell>

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

@@ -0,0 +1,12 @@
+Page({
+  data: {
+    checkboxItems: [
+      { name: 'HKD', value: '港元'},
+      { name: 'CNY', value: '人民币', checked: 'true' }
+    ],
+    radioItems: [
+      { name: 'HKD', value: '港元' },
+      { name: 'CNY', value: '人民币', checked: 'true' }
+    ]
+  }
+})

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

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

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

@@ -0,0 +1 @@
+<map style="width: 100%; height: 100vh" id="myMap" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" circles="{{circles}}" show-location="{{showLocation}}" />

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

@@ -0,0 +1,33 @@
+const lat = 31.984410259206815;
+const lon = 118.76625379397866;
+Page({
+  onReady() {
+    this._mapContext = has.createMapContext('myMap', this);
+  },
+
+  data: {
+    _mapContext: null,
+    showLocation: true,
+    latitude: lat,
+    longitude: lon,
+    markers: [
+      {
+        id: 0,
+        latitude: lat,
+        longitude: lon,
+        zIndex: 1,
+      },
+    ],
+    circles: [
+      {
+        latitude: lat,
+        longitude: lon,
+        radius: 120,
+        fillColor: '#0D000000',
+        color: '#99000000',
+        strokeWidth: 1,
+        zIndex: 15,
+      },
+    ],
+  },
+});

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

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

package/dist/templates/ascfDemos/page/component/pages/movable-area/movable-area.css

@@ -0,0 +1,39 @@
+movable-view {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100rpx;
+    width: 100rpx;
+    background: #1AAD19;
+    color: #fff;
+}
+
+movable-area {
+    height: 400rpx;
+    width: 400rpx;
+    margin: 50rpx;
+    background-color: #ccc;
+    overflow: hidden;
+}
+
+.max {
+    width: 600rpx;
+    height: 600rpx;
+}
+
+.page-section{
+    width: 100%;
+    margin-bottom: 60rpx;
+}
+
+.page-section:last-child{
+    margin-bottom: 0;
+}
+
+.page-section-title{
+    font-size: 28rpx;
+    color: #999999;
+    margin-bottom: 10rpx;
+    padding-left: 30rpx;
+    padding-right: 30rpx;
+}

package/dist/templates/ascfDemos/page/component/pages/movable-area/movable-area.hxml

@@ -0,0 +1,44 @@
+<view class="container">
+  <view class="page-body">
+  <!--scale-area传入合法值“true”-->
+    <view class="page-section">
+      <view class="page-section-title first">scale-area传入合法值“true"</view>
+      <view class="page-section-title first">预期：将缩放手势生效区域修改为整个movable-area</view>
+        <movable-area scale-area="{{true}}">
+          <movable-view direction="all" scale="{{true}}">text</movable-view>
+        </movable-area>
+    </view>
+    <!--scale-area传入合法值“true”-->
+    <view class="page-section">
+      <view class="page-section-title first">scale-area传入合法值“false"</view>
+      <view class="page-section-title first">预期：缩放手势生效区域只在movable-view中</view>
+        <movable-area scale-area="{{false}}">
+          <movable-view direction="all" scale="{{true}}">text</movable-view>
+        </movable-area>
+    </view>
+    <!--scale-area传入合法值“true”-->
+    <view class="page-section">
+      <view class="page-section-title first">scale-area传入非法值“ws"</view>
+      <view class="page-section-title first">预期：缩放手势生效区域只在movable-view中</view>
+        <movable-area scale-area="{{ws}}">
+          <movable-view direction="all" scale="{{true}}">text</movable-view>
+        </movable-area>
+    </view>
+    <!--scale-area传入合法值“true”-->
+    <view class="page-section">
+      <view class="page-section-title first">scale-area不设置</view>
+      <view class="page-section-title first">预期：缩放手势生效区域只在movable-view中</view>
+        <movable-area>
+          <movable-view direction="all" scale="{{true}}">text</movable-view>
+        </movable-area>
+    </view>
+    <!--scale-area传入合法值“true”-->
+    <view class="page-section">
+      <view class="page-section-title first">scale-area设置但不传入值</view>
+      <view class="page-section-title first">预期：将缩放手势生效区域修改为整个movable-area</view>
+        <movable-area scale-area>
+          <movable-view direction="all" scale="{{true}}">text</movable-view>
+        </movable-area>
+    </view>
+  </view>
+</view>

package/dist/templates/ascfDemos/page/component/pages/movable-area/movable-area.js

@@ -0,0 +1,59 @@
+// pages/component/movable-view/movable-view.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+})

package/dist/templates/ascfDemos/page/component/pages/movable-area/movable-area.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

package/dist/templates/ascfDemos/page/component/pages/movable-view/movable-view.css

@@ -0,0 +1,21 @@
+.movable-area-ui {
+  width: 200px;
+  height: 200px;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.movable-view-ui {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  margin-left: 75px;
+  margin-top: 75px;
+  background-color: #0A59F7;
+  justify-content: center;
+  align-items: center;
+  -webkit-text-fill-color: white;
+}
+
+.movable-area-space{
+  margin-bottom: 24px;
+}

package/dist/templates/ascfDemos/page/component/pages/movable-view/movable-view.hxml

@@ -0,0 +1,27 @@
+<as-cell title="direction:all" subtitle="所有方向均可移动">
+    <movable-area class="movable-area-ui">
+        <movable-view direction="all" class="movable-view-ui">text</movable-view>
+    </movable-area>
+</as-cell>
+<as-cell title="direction:vertical" subtitle="只支持沿横向移动">
+    <movable-area class="movable-area-ui">
+        <movable-view direction="horizontal" friction="1" class="movable-view-ui">
+            text
+        </movable-view>
+    </movable-area>
+</as-cell>
+<as-cell title="direction:horizontal" subtitle="只支持沿纵向移动">
+    <movable-area class="movable-area-ui">
+        <movable-view direction="vertical" friction="1" class="movable-view-ui">text</movable-view>
+    </movable-area>
+</as-cell>
+<as-cell title="direction:none" subtitle="不可移动">
+    <movable-area class="movable-area-ui">
+        <movable-view direction="none" class="movable-view-ui">text</movable-view>
+    </movable-area>
+</as-cell>
+<as-cell title="out-of-bounds" subtitle="支持超过可移动区域">
+    <movable-area class="movable-area-ui movable-area-space">
+        <movable-view direction="all" out-of-bounds class="movable-view-ui">text</movable-view>
+    </movable-area>
+</as-cell>

package/dist/templates/ascfDemos/page/component/pages/movable-view/movable-view.js

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

package/dist/templates/ascfDemos/page/component/pages/movable-view/movable-view.json

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

package/dist/templates/ascfDemos/page/component/pages/navigator/navigate/navigate.hxml

@@ -0,0 +1 @@
+<as-cell title="点击左上角返回回到之前页面"></as-cell>

package/dist/templates/ascfDemos/page/component/pages/navigator/navigate/navigate.js

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

package/dist/templates/ascfDemos/page/component/pages/navigator/navigate/navigate.json

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

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

@@ -0,0 +1,12 @@
+.navigator-text {
+  display: flex;
+  font-size: 16px;
+  color: #0A59F7;
+  background-color: rgba(0, 0, 0, 0.06);
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  height: 40px;
+  margin-bottom: 12px;
+}

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

@@ -0,0 +1,11 @@
+<as-cell>
+  <navigator url="navigate/navigate" open-type="navigate">
+    <view class="navigator-text">保留当前页面,跳转到新页面</view>
+  </navigator>
+  <navigator url="redirect/redirect" open-type="redirect">
+    <view class="navigator-text">关闭当前页面,跳转到新页面</view>
+  </navigator>
+  <navigator url="/page/API/index" open-type="switchTab">
+    <view class="navigator-text">跳转到tabBar页面</view>
+  </navigator>
+</as-cell>

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

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

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

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

package/dist/templates/ascfDemos/page/component/pages/navigator/reLaunch/reLaunch.hxml

@@ -0,0 +1 @@
+<as-cell title="唯一页面"></as-cell>

package/dist/templates/ascfDemos/page/component/pages/navigator/reLaunch/reLaunch.js

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

package/dist/templates/ascfDemos/page/component/pages/navigator/reLaunch/reLaunch.json

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

package/dist/templates/ascfDemos/page/component/pages/navigator/redirect/redirect.hxml

@@ -0,0 +1 @@
+<as-cell title="当前页不能返回上级页面"></as-cell>

package/dist/templates/ascfDemos/page/component/pages/navigator/redirect/redirect.js

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

package/dist/templates/ascfDemos/page/component/pages/navigator/redirect/redirect.json

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

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

@@ -0,0 +1,25 @@
+.picker-title {
+  font-size: 16px;
+  line-height: 21px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.9)
+}
+
+.picker {
+  display: flex;
+  align-items: center;
+  border-bottom: .5px solid #18243133;
+  padding: 11px 0;
+}
+
+.picker-content {
+  font-size: 14px;
+  line-height: 19px;
+  color:rgba(0, 0, 0, 0.6)
+}
+
+.picker-arrow {
+  margin-left: auto;
+  width: 24px;
+  height: 24px;
+}