@atomicservice/ascf-base 1.0.14 → 1.0.16

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

@@ -0,0 +1,47 @@
+<as-cell>
+  <picker range="{{array}}" value="{{index}}" bindchange="bindChange" bindcancel="bindCancel">
+    <view class="picker">
+      <view>
+        <view class="picker-title">普通选择器</view>
+        <view class="picker-content">当前选择：{{array[index]}}</view>
+      </view>
+      <image class="picker-arrow" src="/image/toggle_arrow_right.svg" />
+    </view>
+  </picker>
+  <picker mode="multiSelector" range="{{multiArray}}" value="{{multiIndex}}" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" bindcancel="bindCancel">
+    <view class="picker">
+      <view>
+        <view class="picker-title">多列选择器</view>
+        <view class="picker-content">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}， {{multiArray[2][multiIndex[2]]}}</view>
+      </view>
+      <image class="picker-arrow" src="/image/toggle_arrow_right.svg" />
+    </view>
+  </picker>
+  <picker mode="time" value="{{time}}" start="{{startTime}}" end="{{endTime}}" bindchange="bindTimeChange" bindcancel="bindCancel">
+    <view class="picker">
+      <view>
+        <view class="picker-title">时间选择器</view>
+        <view class="picker-content">当前选择：{{time}}</view>
+      </view>
+      <image class="picker-arrow" src="/image/toggle_arrow_right.svg" />
+    </view>
+  </picker>
+  <picker mode="date" value="{{date}}" start="{{startDay}}" end="{{endDay}}" bindchange="bindDateChange" bindcancel="bindCancel">
+    <view class="picker">
+      <view>
+        <view class="picker-title">日期选择器</view>
+        <view class="picker-content">当前选择：{{date}}</view>
+      </view>
+      <image class="picker-arrow" src="/image/toggle_arrow_right.svg" />
+    </view>
+  </picker>
+  <picker mode="region" value="{{region}}" bindchange="bindRegionChange" bindcancel="bindCancel">
+    <view class="picker">
+      <view>
+        <view class="picker-title">省市区选择器</view>
+        <view class="picker-content">当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
+      </view>
+      <image class="picker-arrow" src="/image/toggle_arrow_right.svg" />
+    </view>
+  </picker>
+</as-cell>

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

@@ -0,0 +1,57 @@
+
+Page({
+  data: {
+    index: 0,
+    array: ['苹果', '橙子', '草莓', '樱桃', '火龙果'],
+    multiArray: [['短袖', '裤子', '长裙', '短裙', '连衣裙'], ['白色', '蓝色', '黄色', '红色'], ['XS', 'S', 'M', 'L']],
+    multiIndex: [0, 0, 0],
+    startDay: '2015-01-01',
+    endDay: '2030-01-01',
+    date: '2025-01-01',
+    startTime: '00:00',
+    endTime: '23:59',
+    time: '14:05',
+    region: ['广东省', '广州市', '海珠区']
+  },
+  bindChange(e) {
+    console.log('普通选择器发生改变，携带值为', e.detail.value)
+    this.setData({
+      index: e.detail.value,
+    })
+  },
+
+  bindMultiPickerChange(e) {
+    console.log('多列选择器发生改变，携带值为', e.detail.value)
+    this.setData({
+      multiIndex: e.detail.value
+    })
+  },
+
+  bindTimeChange(e) {
+    console.log('时间选择器发生改变，携带值为', e.detail.value)
+    this.setData({
+      time: e.detail.value
+    })
+  },
+
+  bindDateChange(e) {
+    console.log('日期选择器发生改变，携带值为', e.detail.value)
+    this.setData({
+      date: e.detail.value
+    })
+  },
+
+  bindRegionChange(e) {
+    console.log('省市区选择器发生改变，携带值为', e.detail.value)
+    this.setData({
+      region: e.detail.value
+    })
+  },
+
+  bindCancel(e) {
+    has.showToast({
+      title: '取消选择',
+      icon: 'none'
+    })
+  }
+})

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

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

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

@@ -0,0 +1,9 @@
+.picker-view-ui {
+    width: 100%;
+    height: 300px;
+}
+
+.picker-view-column-ui {
+    line-height: 50px;
+    text-align: center;
+}

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

@@ -0,0 +1,15 @@
+<as-cell title="{{year}}年{{month}}月{{period}}">
+  <picker-view class="picker-view-ui" indicator-style="height: 50px;" value="{{value}}" bindchange="bindChange">
+    <picker-view-column>
+      <view class="picker-view-column-ui" has:for="{{years}}" has:key="{{years}}">{{item}}年</view>
+    </picker-view-column>
+    <picker-view-column>
+      <view class="picker-view-column-ui" has:for="{{months}}" has:key="{{months}}">{{item}}月</view>
+    </picker-view-column>
+    <picker-view-column>
+      <view class="picker-view-column-ui" has:for="{{periodsIdx}}" has:key="{{periodsIdx}}">
+        {{periods[item]}}
+      </view>
+    </picker-view-column>
+  </picker-view>
+</as-cell>

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

@@ -0,0 +1,39 @@
+const years = [];
+const months = [];
+const periodsIdx = [];
+const periods = ["上旬", "中旬", "下旬"];
+
+for (let i = 2018; i <= 2030; i++) {
+  years.push(i);
+}
+
+for (let i = 1; i <= 12; i++) {
+  months.push(i);
+}
+
+for (let i = 0; i <= 2; i++) {
+  periodsIdx.push(i);
+}
+
+
+Page({
+  data: {
+    years,
+    year: 2024,
+    months,
+    month: 2,
+    periodsIdx,
+    periods,
+    period: "上旬",
+    value: [6, 1, 0]
+  },
+
+  bindChange(e) {
+    const val = e.detail.value;
+    this.setData({
+      year: this.data.years[val[0]],
+      month: this.data.months[val[1]],
+      period: this.data.periods[this.data.periodsIdx[val[2]]]
+    })
+  }
+})

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

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

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

@@ -0,0 +1,3 @@
+<as-cell>
+  <progress percent="100" show-info="{{true}}" duration=1000 stroke-width=4 active />
+</as-cell>

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+Page({
+  data: {
+    items: [
+      {value: 'A', name: 'A', checked: true},
+      {value: 'B', name: 'B'},
+      {value: 'C', name: 'C'},
+      {value: 'D', name: 'D', isdisabled:true}
+    ],
+    ischecked:true,
+    isdisabled:false,
+    setColor:'#09BB07',
+    enableColor:false,
+    eventData:'A'
+  },
+
+  radioChange(e) {
+    console.log('radio发生change事件，携带value值为：', e.detail.value)
+
+    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/radio/radio.json

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

package/dist/templates/ascfDemos/page/component/pages/rich-text/rich-text.css

@@ -0,0 +1,16 @@
+.rich-text-ui {
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  border-radius: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  height: 200px;
+}
+
+.textarea-ui {
+  height: 200px;
+}
+
+.btn-ui {
+  justify-content: center;
+  margin-bottom: 12px;
+}

package/dist/templates/ascfDemos/page/component/pages/rich-text/rich-text.hxml

@@ -0,0 +1,9 @@
+<as-cell title="通过HTML String渲染">
+     <textarea class="textarea-ui" maxlength="200" bindinput="bindKeyInput" value="{{htmlSnip}}" />
+    <button class="btn-ui" type="primary" bindtap="renderHtml">渲染HTML</button>
+    <view class="rich-text-ui">
+      <block has:if="{{renderedByHtml}}">
+        <rich-text nodes="{{htmlSnip}}"></rich-text>
+      </block>
+    </view>
+</as-cell>

package/dist/templates/ascfDemos/page/component/pages/rich-text/rich-text.js

@@ -0,0 +1,35 @@
+const htmlData =
+  `<div class="div_class">
+  <h1>Title</h1>
+  <p class="p">
+      该文本框支持&nbsp;<i>修改内容</i>&nbsp;,通过使用rich-text组件,<b>修改的内容会实时渲染为</b><em>HTML</em>
+  </p>
+</div>`
+
+Page({
+  data: {
+    htmlSnip: htmlData,
+    renderedByHtml: false,
+  },
+
+  bindKeyInput(e) {
+    this.setData({
+      htmlSnip: e.detail.value,
+    });
+  },
+
+
+  renderHtml() {
+    this.setData({
+      renderedByHtml: true
+    })
+  },
+
+  enterCode(e) {
+    console.log(e.detail.value)
+    this.setData({
+      htmlSnip: e.detail.value
+    })
+  }
+
+})

package/dist/templates/ascfDemos/page/component/pages/rich-text/rich-text.json

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

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

@@ -0,0 +1,70 @@
+.demo-text-1 {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #1AAD19;
+  color: #FFFFFF;
+  font-size: 36rpx;
+}
+
+.demo-text-1:before {
+  content: 'A';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.demo-text-2 {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #2782D7;
+  color: #FFFFFF;
+  font-size: 36rpx;
+}
+
+.demo-text-2:before {
+  content: 'B';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.demo-text-3 {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #FFFFFF;
+  color: #353535;
+  font-size: 36rpx;
+}
+
+.demo-text-3:before {
+  content: 'C';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.scroll-view_H {
+  white-space: nowrap;
+  align-self: center;
+}
+
+.scroll-view_V {
+  height: 300rpx;
+  align-self: center;
+}
+
+.scroll-view-item {
+  height: 300rpx;
+}
+
+.scroll-view-item_H {
+  display: inline-block;
+  width: 100%;
+  height: 300rpx;
+}

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

@@ -0,0 +1,21 @@
+<as-cell title="Vertical Scroll" subtitle="纵向滚动">
+  <scroll-view class="scroll-view_V" scroll-y="true" bindscrolltoupper="upper" bindscroll="scroll" bindscrolltolower="lower">
+    <view id="demo1" class="scroll-view-item demo-text-1"></view>
+    <view id="demo2" class="scroll-view-item demo-text-2"></view>
+    <view id="demo3" class="scroll-view-item demo-text-3"></view>
+  </scroll-view>
+</as-cell>
+<as-cell title="Horizontal Scroll" subtitle="横向滚动">
+  <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%" scroll-left="{{scrollLeft}}">
+    <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
+    <view id="demo2" class="scroll-view-item_H demo-text-2"></view>
+    <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
+  </scroll-view>
+</as-cell>
+<as-cell title="自定义下拉刷新" subtitle="自定义:">
+  <scroll-view class="scroll-view_V" scroll-y="true" refresher-background="{{refresherbackground}}" refresher-enabled="{{true}}">
+    <view id="demo1" class="scroll-view-item demo-text-1"></view>
+    <view id="demo2" class="scroll-view-item demo-text-2"></view>
+    <view id="demo3" class="scroll-view-item demo-text-3"></view>
+  </scroll-view>
+</as-cell>

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

@@ -0,0 +1,5 @@
+Page({
+  data: {
+    refresherbackground: '#FFFFFF'
+  }
+})

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

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

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

@@ -0,0 +1,6 @@
+<as-cell title="设置最小20/最大值200"></as-cell>
+<slider value="100" bindchange="slider1change" min="20" max="200" show-value />
+<as-cell title="设置step：10"></as-cell>
+<slider value="60" bindchange="slider2change" step="10" show-value />
+<as-cell title="不显示当前value"></as-cell>
+<slider value="50" bindchange="slider3change" />

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

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

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

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

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

@@ -0,0 +1,71 @@
+.swiper-item {
+  height: 150px;
+}
+
+.demo-text-1 {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #1AAD19;
+  color: #FFFFFF;
+  font-size: 36rpx;
+}
+
+.demo-text-1:before {
+  content: 'A';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.demo-text-2 {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #2782D7;
+  color: #FFFFFF;
+  font-size: 36rpx;
+}
+
+.demo-text-2:before {
+  content: 'B';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.demo-text-3 {
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  background-color: #FFFFFF;
+  color: #353535;
+  font-size: 36rpx;
+}
+
+.demo-text-3:before {
+  content: 'C';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.switch-box {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 16px;
+  margin-right: 10px;
+  margin-bottom: 8px;
+}
+
+.switch-box-space{
+  margin-top: 16px;
+}
+
+.switch-label {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+}

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

@@ -0,0 +1,21 @@
+<as-cell>
+  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{current}}" vertical="{{vertical}}">
+    <block has:for="{{background}}" has:key="*this">
+      <swiper-item>
+        <view class="swiper-item {{item}}"></view>
+      </swiper-item>
+    </block>
+  </swiper>
+</as-cell>
+<view class="switch-box switch-box-space">
+  <view class="switch-label">指示点</view>
+  <switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />
+</view>
+<view class="switch-box">
+  <view class="switch-label">自动播放</view>
+  <switch checked="{{autoplay}}" bindchange="changeAutoplay" />
+</view>
+<view class="switch-box">
+  <view class="switch-label">纵向</view>
+  <switch checked="{{vertical}}" bindchange="changeVertical" />
+</view>

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

@@ -0,0 +1,29 @@
+Page({
+  data: {
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    indicatorDots: true,
+    autoplay: false,
+    interval: 1000,
+    duration: 500,
+    current: 0,
+    vertical: false
+  },
+
+  changeIndicatorDots() {
+    this.setData({
+      indicatorDots: !this.data.indicatorDots
+    })
+  },
+
+  changeAutoplay() {
+    this.setData({
+      autoplay: !this.data.autoplay
+    })
+  },
+  changeVertical() {
+    this.setData({
+      vertical: !this.data.vertical
+    })
+  }
+
+})

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

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

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

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

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

@@ -0,0 +1,10 @@
+<as-cell title="当前状态：{{isChecked?`开启`:`关闭`}}">
+  <view class="switch-box">
+      <view class="switch-label">状态</view>
+      <switch checked="{{isChecked}}" disabled="{{isDisabled}}" bindchange="switch1Change" />
+    </view>
+    <view class="switch-box">
+      <view class="switch-label" bindchange="switch2Change">禁用Switch</view>
+      <switch bindchange="switch2Change" />
+    </view>
+</as-cell>

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

@@ -0,0 +1,20 @@
+Page({
+  data:{
+    isChecked:false,
+    isDisabled:false
+  },
+
+  switch1Change(e) {
+    console.log('switch1 发生改变，携带值为', e.detail.value)
+    this.setData({
+      isChecked: !this.data.isChecked
+    })
+  },
+
+  switch2Change(e) {
+    console.log('switch2 发生改变，携带值为', e.detail.value)
+    this.setData({
+      isDisabled: !this.data.isDisabled
+    })
+  }
+})

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

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

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

@@ -0,0 +1,14 @@
+.text-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: right;
+  line-height: 2em;
+  height: 200px;
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  border-radius: 8px;
+}
+
+.btn-ui {
+  justify-content: center;
+}

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

@@ -0,0 +1,9 @@
+<as-cell>
+  <view class="text-box">
+    <text decode="{{true}}" user-select="{{true}}">{{text}}</text>
+  </view>
+</as-cell>
+<as-cell>
+  <button class="btn-ui" type="primary" disabled="{{!canAdd}}" bindtap="add">add line</button>
+  <button class="btn-ui" disabled="{{!canRemove}}" bindtap="remove">remove line</button>
+</as-cell>