支付宝小程序 UI·新手引导-ETC 步骤

本示例展示新手接入 ETC 的相关操作步骤。

使用说明

本示例为纯客户端代码，可直接在模拟器和在真机预览。

更多详情请参见 代码市场。

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

{
  "usingComponents": {
    "move-demo": "mashi-open-snippets/es/etc-novice-guide/index"
  }}

调用

分别在 AXML、JS、ACSS 中输入以下代码

<view class="etc-novice-guide-page" style="background-image:url({{bgImage}})">
    <etc-confirm ref="savePopRef" title="{{confirmData.title}}" subTitle="{{confirmData.subTitle}}" cancelButtonText="{{confirmData.cancelButtonText}}" confirmButtonText="{{confirmData.confirmButtonText}}" onClose="onPopClose" onCancel="onPopCancel" onConfirm="onPopConfirm"></etc-confirm>
    <!-- 动画 -->
    <block a:if="{{showLottie === 0}}">
        <view class="etc-novice-guide-lottie1-out">
            <lottie id="lottie-step1" class="etc-novice-guide-lottie1" path="https://gw.alipayobjects.com/os/basement_prod/955552a7-4d63-462b-8905-89ce48c81dd7.json" speed="1.0" autoplay="{{true}}" repeatCount="-1" />
        </view>
    </block>
    <block a:elif="{{showLottie === 1}}">
         <view class="etc-novice-guide-lottie2-out">
            <lottie id="lottie-step2" class="etc-novice-guide-lottie2" path="https://gw.alipayobjects.com/os/basement_prod/1874be4f-1945-4e60-91ad-c58487e69dbd.json" speed="1.0" autoplay="{{true}}" repeatCount="-1" />
        </view>
    </block>
    <block a:else>
         <view class="etc-novice-guide-lottie3-out">
            <lottie id="lottie-step3" class="etc-novice-guide-lottie3" path="https://gw.alipayobjects.com/os/basement_prod/7728bce8-1dc5-4a51-a729-f9decbe3fbec.json" speed="1.0" autoplay="{{true}}" repeatCount="-1" />
        </view>
    </block>
    <view>
        <etc-novice-guide ref="saveRef" data="{{item1}}" onClickStep="onClickStep" onClickBottomText="onClickBottomText" onConfirm="onConfirm"/>
    </view>
</view>

Page({
  data: {
    bgImage1: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*i9lcQI-9VEQAAAAAAAAAAABkARQnAQ',
    bgImage2: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*xEPYS5KvzGEAAAAAAAAAAABkARQnAQ',
    bgImage: '',
    showLottie: 0,
    confirmData: {
      title: '确认设备已固定',
      subTitle: '激活后请勿拆卸移动，否则将失效',
      cancelButtonText: '取消',
      confirmButtonText: '确认已固定'
    },
    item1: [
      {
        title: '车辆熄火，开启手机蓝牙',
        subTitle: '避免手机连接车载蓝牙，安卓手机打开GPS定位增强蓝牙型号',
        preText: '上一步',
        midText: '1/3',
        nextText: '下一步',
        bottomText: ['我的客服'],
        audio: 'https://gw.alipayobjects.com/mdn/industry_l/afts/file/A*xfpQRawS3lwAAAAAAAAAAABkARQnAQ',
      },
      {
        title: '安装ETC设备',
        subTitle: '固定后请勿将ETC设备拆下，以免失效',
        preText: '上一步',
        midText: '2/3',
        nextText: '下一步',
        bottomText: ['常见问题', "安装指南"],
        confirmation: true,
        audio: 'https://gw.alipayobjects.com/mdn/industry_l/afts/file/A*fUB-R7T6phMAAAAAAAAAAABkARQnAQ',
      },
      {
        title: '开启ETC设备蓝牙',
        subTitle: '芯片卡朝上插入后，按下按钮蓝灯闪烁',
        preText: '上一步',
        midText: '3/3',
        nextText: '立即激活',
        bottomText: ['常见问题', "安装指南"],
        audio: 'https://gw.alipayobjects.com/mdn/industry_l/afts/file/A*yHDHRL3vAE8AAAAAAAAAAABkARQnAQ',
      }
    ],
  },
  onLoad() {
    // 开始是背景图1
    this.setData({
      bgImage: this.data.bgImage1
    })
  },
  saveRef(ref) {
    this.noticeRef = ref;
  },
  savePopRef(ref) {
    this.popRef = ref;
  },
  /**
   * 返回 step 切换的状态
   */
  onClickStep(val) {
    console.log('onClickStep:', val)
    // 设置背景图
    if (val.fromStep === 0 && val.toStep === 1) {
      this.setData({
        bgImage: this.data.bgImage2
      })
    }
    if (val.fromStep === 1 && val.toStep === 0) {
      this.setData({
        bgImage: this.data.bgImage1
      })
    }
    // 设置播放的动画
    this.setData({
      showLottie: val.toStep
    })
  },
  /**
   * 点击底部文案
   * @param {*} val
   */
  onClickBottomText(val) {
    console.log('onClickBottomText:', val)
  },
  /**
   * 进行下一步前需要确认
   * @param {*} val
   */
  onConfirm(val) {
    console.log('onConfirm:', val);
    // 调用弹出窗组件的显示
    this.popRef.handleShow();
  },
  /**
   * 弹出窗关闭
   */
  onPopClose(e) {
    console.log('onPopClose:', e);
  },
  /**
   * 弹出窗取消
   */
  onPopCancel(e) {
    console.log('onPopCancel:', e);
  },
  /**
   * 弹出窗确认
   */
  onPopConfirm(e) {
    console.log('onPopConfirm:', e);
    // 调用步骤组件的下一步
    this.noticeRef.next();
  },
});

.etc-novice-guide-page {
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background-color:rgb(242, 242, 242);
    height:100vh;
    box-sizing:border-box;
    //background-image:url(https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*i9lcQI-9VEQAAAAAAAAAAABkARQnAQ);
    background-size:100%;
}


.etc-novice-guide-page-rectangle{
    position: absolute;
    top:69.28rpx;
    left:352rpx;
    width:166rpx;
    height:103rpx;
}


.etc-novice-guide-page-arrow{
    position: absolute;
    top:196.96rpx;
    left:406.59rpx;
    width:70rpx;
    height:70rpx;
}


.etc-novice-guide-page-card {
    position: absolute;
    top:277.28rpx;
    left:340rpx;
    width:195rpx;
    height:140rpx;
}
.etc-novice-guide-lottie1-out {
    position:absolute;
    top:221rpx;
}
.etc-novice-guide-lottie1 {
    width:750rpx;
    height:580rpx;
}


.etc-novice-guide-lottie2-out {
    position:absolute;
    top:139rpx;
}


.etc-novice-guide-lottie2 {
    width:750rpx;
    height:400rpx;
}


.etc-novice-guide-lottie3-out {
    position:absolute;
    top:261rpx;
}


.etc-novice-guide-lottie3 {
    width:750rpx;
    height:516rpx;
}

属性