自定义环形加载条控件；编写支付结果页；ui排版自测；

.tea/configuration/mini-program.json

-{"tinyType":"alipayiot","tinyCnName":"支付宝 IoT","tinyProjectType":"xpaas-mini","alipayiot:xpaas-mini:tinyIcon":"https://gw.alipayobjects.com/mdn/rms_c763d8/afts/img/A*vNMFT7X_u3sAAAAAAAAAAABkARQnAQ","alipayiot:xpaas-mini:auditLink":null,"alipayiot:xpaas-mini:whiteListLink":null,"alipayiot:xpaas-mini:createLink":null,"alipayiot:xpaas-mini:component2":false,"alipayiot:xpaas-mini:_enableAutoPush":false,"alipayiot:xpaas-mini:_appIdList":[],"alipayiot:xpaas-mini:uploadTime":"","alipayiot:xpaas-mini:packageSize":0,"alipayiot:xpaas-mini:lastDeviceName":"蜻蜓F4","isSimulatorOpen":true,"isNotFirstToggleSimulator":true,"alipayiot:xpaas-mini:MockStore":{"localLoginInfo":{"name":"ywxadmin","password":"1234567a","sn":""},"localAccountInfo":{"accountId":126,"actType":1,"agreement":1,"isShopCart":0,"merchantId":"2088222276054714","merchantName":"一网鲜（杭州）信息科技有限公司","realName":"力拔山兮气盖世时不利兮骓不逝","storeList":[{"address":"杭州市江干区科技园路2号","hasStoreManager":1,"storeId":"001","storeName":"一网鲜"}],"token":"431145114888654848","userName":"ywxadmin","userPhone":"13858057743"}},"storageVersion":"1.5.7"}
+{"tinyType":"alipayiot","tinyCnName":"支付宝 IoT","tinyProjectType":"xpaas-mini","alipayiot:xpaas-mini:tinyIcon":"https://gw.alipayobjects.com/mdn/rms_c763d8/afts/img/A*vNMFT7X_u3sAAAAAAAAAAABkARQnAQ","alipayiot:xpaas-mini:auditLink":null,"alipayiot:xpaas-mini:whiteListLink":null,"alipayiot:xpaas-mini:createLink":null,"alipayiot:xpaas-mini:component2":false,"alipayiot:xpaas-mini:_enableAutoPush":false,"alipayiot:xpaas-mini:_appIdList":[],"alipayiot:xpaas-mini:uploadTime":"","alipayiot:xpaas-mini:packageSize":0,"alipayiot:xpaas-mini:lastDeviceName":"蜻蜓F4","isSimulatorOpen":true,"isNotFirstToggleSimulator":true,"alipayiot:xpaas-mini:MockStore":{"localLoginInfo":{"name":"ywxadmin","password":"1234567a","sn":""},"localAccountInfo":{"accountId":126,"actType":1,"agreement":1,"isShopCart":0,"merchantId":"2088222276054714","merchantName":"一网鲜（杭州）信息科技有限公司","realName":"力拔山兮气盖世时不利兮骓不逝","storeList":[{"address":"杭州市江干区科技园路2号","hasStoreManager":1,"storeId":"001","storeName":"一网鲜"}],"token":"431398226761175040","userName":"ywxadmin","userPhone":"13858057743"}},"storageVersion":"1.5.7"}
\ No newline at end of file

.tea/entryFiles-development/config$.js

@@ -2,6 +2,6 @@
 const g = typeof global !== 'undefined' ? global : self;
 g.appXAppJson = {
   "app": {
-    "$homepage": "pages/login/login"
+    "$homepage": "pages/paysuccess/paysuccess"
   }
 };

.tea/entryFiles-development/index$.web.js

 require('@alipay/appx-compiler/lib/sjsEnvInit');
 require('./config$');
 
+require('../../custom_widgets/spin/spin?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
 require('../../node_modules/mini-antui/es/input-item/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
+require('../../pages/paysuccess/paysuccess?hash=8a39df616008c86a406618844f053cdc5567752b');
 require('../../pages/login/login?hash=4ebd76d5932655db30c27bd67ebeb700d746609f');
 require('../../pages/index/index?hash=32d7d2807ed4e666ef03b4b3fe8c38ecf2e34e68');

.tea/entryFiles-development/index$.worker.js

@@ -29,7 +29,9 @@ if(AFAppX.registerApp) {
 
 function success() {
 require('../../app');
+require('../../custom_widgets/spin/spin?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
 require('../../node_modules/mini-antui/es/input-item/index?hash=05d2a9730dd6009bf9446182f9c985f40f8c0f43');
+require('../../pages/paysuccess/paysuccess?hash=8a39df616008c86a406618844f053cdc5567752b');
 require('../../pages/login/login?hash=4ebd76d5932655db30c27bd67ebeb700d746609f');
 require('../../pages/index/index?hash=32d7d2807ed4e666ef03b4b3fe8c38ecf2e34e68');
 }

.tea/layout.json

-{"layout":{"left":{"currentId":"scm_container","size":310},"right":{"currentId":""},"bottom":{"currentId":"","size":307}},"storageVersion":"1.5.7"}
+{"layout":{"left":{"currentId":"","size":310},"right":{"currentId":""},"bottom":{"currentId":""}},"storageVersion":"1.5.7"}
\ No newline at end of file

app.json

 {
   "pages": [
+    "pages/paysuccess/paysuccess",
     "pages/login/login",
     "pages/index/index"
   ],

custom_widgets/spin/spin.acss

+.cirqueBox {
+    position: relative;
+    width: 186rpx;
+    height: 186rpx;
+    border-radius: 50%;
+    -webkit-mask: radial-gradient(transparent, transparent 83rpx, #000 0);
+    mask: radial-gradient(transparent 83rpx, #000 0);
+}
+
+.cirque2 {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: #0e7afa;
+    z-index: 1;
+}
+
+.cirque1 {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: #aaa;
+    z-index: 2;
+    animation: mymove 1.5s linear infinite;
+}
+
+@keyframes mymove {
+    0% {
+        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 393rpx 93rpx, 93rpx -207rpx);
+    }
+    25% {
+        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 393rpx 93rpx, 393rpx 93rpx);
+    }
+    50% {
+        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, 93rpx 393rpx, 93rpx 393rpx, 93rpx 393rpx);
+    }
+    75% {
+        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, -207rpx 93rpx, -207rpx 93rpx, -207rpx 93rpx, -207rpx 93rpx);
+    }
+    100% {
+        clip-path: polygon(93rpx 93rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx, 93rpx -207rpx);
+    }
+}
\ No newline at end of file

custom_widgets/spin/spin.axml

+<view class="cirqueBox">
+  <view class="cirque2"></view>
+  <view class="cirque1"></view>
+</view>
\ No newline at end of file

custom_widgets/spin/spin.js

+Component({
+  mixins: [],
+  data: {},
+  props: {},
+  didMount() {},
+  didUpdate() {},
+  didUnmount() {},
+  methods: {},
+});

custom_widgets/spin/spin.json

+{
+  "component": true
+}
\ No newline at end of file

pages/login/login.js

@@ -134,7 +134,7 @@ Page({
       });
       //跳转广告页
       my.reLaunch({
-        url: "/pages/ad/ad"
+        url: "/pages/paysuccess/paysuccess"
       });
       my.showToast({
         type: 'success',

pages/paysuccess/paysuccess.acss

+page {
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+}
+
+.topTitle {
+  display: flex;
+  width: 662rpx;
+  align-content: center;
+  align-items: center;
+  /* border: 2px solid red; */
+  font-size: 45rpx;
+  font-weight: bold;
+  margin: 0 auto;
+}
+
+.payInfo {
+  position: relative;
+  width: 624rpx;
+  height: 430rpx;
+  margin: 0 auto;
+  margin-top: 38rpx;
+  /* align-content: center;
+  align-items: center; */
+  /* border: 2px solid red; */
+}
+
+.orderPrice {
+  display: absolute;
+  width: 464rpx;
+  height: 34rpx;
+  font-size: 34rpx;
+  color: #7A8599;
+  margin: 0 auto;
+  margin-top: 148rpx;
+  align-content: center;
+  align-items: center;
+  /* border: 2px solid red; */
+}
+
+.discount {
+  display: absolute;
+  width: 464rpx;
+  height: 34rpx;
+  font-size: 34rpx;
+  color: #7A8599;
+  margin: 0 auto;
+  margin-top: 30rpx;
+  align-content: center;
+  align-items: center;
+  /* border: 2px solid red; */
+}
+
+.payPrice {
+  display: absolute;
+  width: 464rpx;
+  height: 34rpx;
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #000000;
+  margin: 0 auto;
+  margin-top: 64rpx;
+  align-content: center;
+  align-items: center;
+  /* border: 2px solid red; */
+}
+
+.printLoading {
+  position: relative;
+  width: 186rpx;
+  height: 186rpx;
+  margin: 0 auto;
+  margin-top: 38rpx;
+  /* border: 2px solid red; */
+}
+
+.voucher{
+  display: flex;
+  position: fixed;
+  flex-direction: column;
+  width: 662rpx;
+  align-content: center;
+  height: 100%;
+  margin-bottom: 0rpx;
+  border: 2px solid red;
+}
\ No newline at end of file

pages/paysuccess/paysuccess.axml

+<view class="page">
+  <view class="topTitle">
+    <view style="margin:0 auto;margin-top:38rpx;">
+      <image mode="aspectFit" style="width:53rpx;height:53rpx;margin-right:26rpx;float:left;" src="/images/ic_success.png"/>
+      <view style="height:53rpx;display:flex;">
+        <text>支付成功</text>
+      </view>
+    </view>
+  </view>
+  <view class="payInfo">
+    <image mode="aspectFit" style="width:624rpx;height:430rpx;" src="/images/bg_print_paper.png"/>
+    <view style="position:absolute;left:0rpx;top:0rpx;width:624rpx;height:430rpx;">
+      <view class="orderPrice">
+        <text style="float:left;">订单总额</text>
+        <text style="font-weight:bold;float:right;">￥--.--</text>
+      </view>
+      <view class="discount">
+        <text style="float:left;">商家优惠</text>
+        <text style="font-weight:bold;float:right;">-￥--.--</text>
+      </view>
+      <view class="payPrice">
+        <text style="float:left;" decode=true>共计 {{}} 件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实付：</text>
+        <text style="font-weight:bold;float:right;color:#F72911;">-￥--.--</text>
+      </view>
+    </view>
+  </view>
+  <view class="printLoading">
+    <i-spin></i-spin>
+    <view style="position:absolute;width:100%;height:100%;left:0rpx;top:0rpx;color:#000000;font-weight:bold;">
+      <view style="display: absolute;margin:0 auto;align-content: center;align-items: center;text-align:center;line-height:186rpx;">
+        <text>{{}}</text>
+      </view>
+    </view>
+  </view>
+  <view class="voucher">
+  
+  </view>
+</view>
\ No newline at end of file

pages/paysuccess/paysuccess.js

+Page({
+  data: {},
+  onLoad() {},
+});

pages/paysuccess/paysuccess.json

+{
+    "usingComponents": {
+        "i-spin": "/custom_widgets/spin/spin"
+    }
+}
\ No newline at end of file