支付寶小程序 UI·新手引導-ETC 步驟

本示例展示新手接入 ETC 的相關操作步驟。

使用說明

本示例為純客戶端代碼，可直接在模擬器和在真機預覽。

更多詳情請參見 代碼市場。

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊

在 JSON 中引入組件路徑

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

調(diào)用

分別在 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 切換的狀態(tài)
   */
  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);
    // 調(diào)用彈出窗組件的顯示
    this.popRef.handleShow();
  },
  /**
   * 彈出窗關閉
   */
  onPopClose(e) {
    console.log('onPopClose:', e);
  },
  /**
   * 彈出窗取消
   */
  onPopCancel(e) {
    console.log('onPopCancel:', e);
  },
  /**
   * 彈出窗確認
   */
  onPopConfirm(e) {
    console.log('onPopConfirm:', e);
    // 調(diào)用步驟組件的下一步
    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;
}

屬性