gxd-uni-library-editx 1.0.0

package/src/components/XdSuccess/XdSuccess.vue

@@ -0,0 +1,527 @@
+<template>
+  <view class="xd-success">
+    <view class="xd-success__header">
+      <view class="xd-success__header-bg" :style="{background:bgColor}"></view>
+      <view class="xd-success__header-content">
+        <view class="xd-success__header-content-body">
+          <view class="xd-success__header-content-body-icon" v-if="order === null">
+            <view>
+              <xd-font-icon
+                size="80"
+                icon="iconshijian"
+                color="#333"
+              ></xd-font-icon>
+            </view>
+            <view>处理中</view>
+          </view>
+          <template v-else>
+            <view>
+              <xd-font-icon
+                :size="order['iconSize']"
+                :icon="order['icon']"
+                :color="order['iconColor']"
+              ></xd-font-icon>
+            </view>
+            <view v-if="order && order['orderName']">{{order['orderName']}}</view>
+            <view v-if="info">{{info['tips']}}</view>
+            <template v-if="code">
+              <!--电子码(号码+密码)-->
+              <template v-if="code['numberAndPassword']">
+                <view class="xd-success__numberAndPassword"
+                  v-for="(nap,nindex) in code['numberAndPassword']"
+                  :key="nindex"
+                >
+                  <view v-for="(it,codeIndex) in nap" :key="codeIndex">
+                    <view>
+                      <view>{{it['label']}}</view>
+                      <view>{{it['value']}}</view>
+                    </view>
+                    <view>
+                      <xd-button @click="copy(it['value'])" type="primary" size="mini">复制</xd-button>
+                    </view>
+                  </view>
+                </view>
+              </template>
+              <!--电子码(号码+密码)-->
+              <!--电子码（密码)-->
+              <view class="xd-success__code" v-if="code['code']">
+                <view v-for="(it,codeIndex) in code['code']" :key="codeIndex">
+                  <view>
+                    <view>{{it['label']}}</view>
+                    <view>{{it['value']}}</view>
+                  </view>
+                  <view>
+                    <xd-button @click="copy(it['value'])" type="primary" size="mini">复制</xd-button>
+                  </view>
+                </view>
+              </view>
+              <!--电子码（密码)-->
+              <!--二维码-->
+              <view class="xd-success__codeimg" v-if="code['twocode']">
+                <view v-for="(it,codeIndex) in code['twocode']" :key="codeIndex">
+                  <image class="twocode" :src="it['value']"></image>
+                  <view>{{it['label']}}</view>
+                </view>
+              </view>
+              <!--二维码-->
+              <!--条形码-->
+              <view class="xd-success__codeimg" v-if="code['barcode']">
+                <view v-for="(it,codeIndex) in code['barcode']" :key="codeIndex">
+                  <image mode="aspectFit" class="barcode" :src="it['value']"></image>
+                  <view>{{it['label']}}</view>
+                </view>
+              </view>
+              <!--条形码-->
+            </template>
+            <!--app使用提示-->
+            <view class="xd-success__tips" v-if="app && app['use_desc']">
+              <view>（为了方便使用请<text :style="{color: $mainColor}">截屏保存</text>兑换码）</view>
+              <view :style="{color: $mainColor}">{{app['use_desc']}}</view>
+            </view>
+            <!--app使用提示 结束-->
+            <!--按钮操作-->
+            <view class="xd-success__header-btn">
+              <view v-for="(btn,index) in info['btn']" :key="index">
+                <xd-button
+                  v-if="btn['label']"
+                  size="small"
+                  :type="btn['type']"
+                  @click="handleBtnClick(btn)"
+                >{{btn['label']}}</xd-button>
+              </view>
+            </view>
+            <!--按钮操作 结束-->
+          </template>
+        </view>
+      </view>
+    </view>
+    <view class="xd-success__content" v-if="info && info['content']">
+      <xd-more :background="titleBackground">宝贝详情</xd-more>
+      <view class="xd-success__content-body">
+        <xd-content-xss :html="info['content']"></xd-content-xss>
+      </view>
+    </view>
+    <view class="xd-success__notice" v-if="info && info['desc'] && info['descTitle']">
+      <view>{{info['descTitle']}}</view>
+      <view>
+        <xd-content-xss :html="info['desc']"></xd-content-xss>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import XdButton from "@/components/XdButton/XdButton";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdContentXss from "@/components/XdContentXss/XdContentXss";
+  import XdMore from "@/components/XdMore/XdMore";
+
+  export default {
+    name: "XdSuccess",
+    components: {
+      XdContentXss,
+      XdFontIcon,
+      XdButton,
+      XdMore
+    },
+    props:{
+      
+      //最大N次方
+      maxTime: {
+        type: Number,
+        default: 5
+      },
+      
+      //文字颜色
+      titleBackground: {
+        type: String,
+        default: '#eee'
+      },
+      
+      //状态显示区域状态
+      bgColor: {
+        type: String,
+        default: ''
+      },
+    },
+    
+    data(){
+      return {
+        order: null, //订单信息
+        info: null, //基础信息
+        app: null, //app使用提示
+        code: null,
+
+        date: 2, //时间底数
+        time: 1, //时间幂指数
+
+        //status => 3000:成功  3002:失败  3001:进行中
+        status: '3001',
+      }
+    },
+
+    created() {
+      this.intval();
+    },
+
+    methods: {
+      
+      /**
+       * @description 是否为空
+       * @param data
+       */
+      isEmpty(data) {
+        return this.$xdUniHelper.isEmpty(data);
+      },
+
+      /**
+       *@description 复制功能
+       * @param  text
+       */
+      copy(text) {
+        // #ifdef H5
+        this.$copyText(text).then(
+          res => {
+            this.$xdAlert({content: '复制成功'})
+          }
+        )
+        // #endif
+        // #ifndef H5
+        uni.setClipboardData({
+          data: text,
+          success: () => {
+            this.$xdAlert({content: '复制成功'})
+          }
+        })
+        // #endif
+      },
+
+      handleBtnClick(btn, item){
+        this.$emit('onBtn',{btn, item})
+      },
+
+      intval(){
+        
+        //订单完成
+        if(this.status === '3000') {
+          this.$emit('onOrderDone');
+          return;
+        }
+
+        //订单失败
+        if(this.status === '3002') return;
+
+        //订单进行中
+        this.$emit('getStatus', ({info, order, app, code, ...other})=>{
+          if (this.$xdUniHelper.checkVarType(order) === 'object') {
+            if (order) this.order= order;
+            if (info) this.info = info;
+            if (app) this.app = app;
+            if (code) this.code = code;
+            this.status = order.orderStatus;
+            this.time++;
+            
+            console.log('getStatus', info, order, other);
+            
+            setTimeout(()=>{
+              this.intval();
+            }, Math.pow(this.date, (this.time > this.maxTime ? this.maxTime: this.time)) * 1000);
+          }
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .xd-success {
+    &__header {
+      position: relative;
+      padding-top: unit(100,rpx);
+      
+      &-btn {
+        padding-top: unit(40, rpx);
+        display: flex;
+        justify-content: center!important;
+        
+        & > view {
+          margin: 0 unit(20, rpx);
+        }
+      }
+
+      &-bg {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top:0;
+        height: unit(260,rpx);
+        border-radius: 0 0 unit(20,rpx) unit(20, rpx);
+        z-index: 1;
+      }
+
+      &-content {
+        position: relative;
+        z-index: 3;
+        background: #fff;
+        margin:0 unit(20,rpx);
+        box-sizing: border-box;
+        border-radius: unit(15,rpx);
+        box-shadow: 0 0 unit(15,rpx) rgba(0,0,0,.2);
+        padding: unit(40,rpx) unit(20, rpx);
+
+        &-body {
+          min-height: unit(320, rpx);
+
+          &-icon {
+            height: unit(320, rpx) !important;
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            align-items: center;
+
+            & > view {
+              padding: 0!important;
+              margin: 0!important;
+            }
+          }
+
+          & > view {
+            text-align: center;
+          }
+
+          &> view:first-child {
+            line-height: unit(100, rpx);
+            height: unit(100, rpx);
+          }
+
+          &> view:nth-child(2) {
+            font-size: @xd-font-size-lg + 4;
+            padding: unit(20,rpx);
+            line-height: unit(40,rpx);
+            height: unit(40, rpx);
+          }
+
+          & > view:nth-child(3) {
+            font-size: @xd-font-size-base;
+            color: #999;
+          }
+
+          & > view:last-child {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            
+          }
+        }
+
+
+      }
+
+
+    }
+
+    &__numberAndPassword {
+      .uni-box-radius();
+      margin-top: unit(20, rpx);
+      background: #fff;
+      font-size: @xd-font-size-base;
+      padding: unit(20, rpx);
+      box-sizing: border-box;
+
+
+      & > view {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: unit(20, rpx);
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+
+        & > view:first-child {
+          flex: 1;
+          .uni-break-word();
+          margin-right: unit(20, rpx);
+          background: #f8f8f8;
+          padding: unit(10, rpx);
+          border-radius: unit(15, rpx);
+          font-size: @xd-font-size-lg - 2;
+
+          &:hover {
+            background: #ececec;
+          }
+
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          color: #333;
+
+          & > view:first-child {
+            flex-shrink: 0;
+          }
+
+          & > view:last-child {
+            flex: 1;
+            width: 0;
+            text-align: left;
+          }
+        }
+
+        & > view:last-child {
+          width: unit(120, rpx);
+        }
+      }
+    }
+
+    &__code {
+      .uni-box-radius();
+      margin-top: unit(20, rpx);
+      background: #fff;
+      font-size: @xd-font-size-base;
+      padding: unit(20, rpx);
+      box-sizing: border-box;
+
+      & > view {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-bottom: unit(20, rpx);
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+
+        & > view:first-child {
+          flex: 1;
+          .uni-break-word();
+          margin-right: unit(20, rpx);
+          background: #f8f8f8;
+          padding: unit(10, rpx);
+          border-radius: unit(15, rpx);
+          font-size: @xd-font-size-lg - 2;
+
+          &:hover {
+            background: #ececec;
+          }
+
+          display: flex;
+          justify-content: center;
+          align-items: flex-start;
+
+          & > view:first-child {
+            flex-shrink: 0;
+          }
+
+          & > view:last-child {
+            flex: 1;
+            width: 0;
+            text-align: left;
+          }
+        }
+
+        & > view:last-child {
+          width: unit(120, rpx);
+        }
+      }
+
+      & .twocode {
+        width: unit(160, rpx);
+        height: unit(160, rpx);
+      }
+
+      & .barcode {
+        width: unit(320, rpx);
+        height: unit(160, rpx);
+      }
+    }
+
+    &__codeimg {
+      .uni-box-radius();
+      margin-top: unit(20, rpx);
+      background: #fff;
+      font-size: @xd-font-size-base;
+      padding: unit(20, rpx);
+      box-sizing: border-box;
+
+      & > view {
+        text-align: center;
+        padding-bottom: unit(10, rpx);
+        margin-bottom: unit(10, rpx);
+        border-bottom: 1px solid #efefef;
+
+        &:last-child {
+          border-bottom: 0;
+          padding-bottom: 0;
+        }
+
+        & > view:first-child {
+          flex: 1;
+          .uni-break-word();
+          margin-right: unit(20, rpx);
+          background: #f8f8f8;
+          padding: unit(10, rpx);
+          border-radius: unit(15, rpx);
+
+          &:hover {
+            background: #ececec;
+          }
+        }
+
+        & > view:last-child {
+          width: 100%;
+          text-align: center;
+          font-size: @xd-font-size-lg - 2;
+        }
+      }
+
+      .twocode {
+        width: unit(300, rpx);
+        height: unit(300, rpx);
+      }
+
+      .barcode {
+        max-height: unit(180, rpx);
+        max-width: 100%;
+      }
+    }
+
+    &__tips {
+      font-size: @xd-font-size-base + 2;
+      padding-top: unit(20, rpx);
+      line-height: unit(40, rpx);
+    }
+
+    &__notice {
+      margin-top: unit(40, rpx);
+      padding: unit(30,rpx) unit(60,rpx);
+      font-size: @xd-font-size-base;
+      line-height: unit(44,rpx);
+      color: #666;
+
+      & > view:first-child {
+        font-weight: bold;
+        font-size: unit(36, rpx);
+        padding-bottom: unit(20, rpx);
+      }
+    }
+
+    &__content {
+      margin: 0 unit(20, rpx);
+
+      /deep/ .app-no-more {
+        font-size: @xd-font-size-base + 6
+      }
+
+      &-body {
+        background: #fff;
+        border-radius: unit(15, rpx);
+        padding: unit(20, rpx);
+        box-sizing: border-box;
+        font-size: unit(30, rpx);
+        line-height: unit(55, rpx);
+        box-shadow: 0 0 unit(15, rpx) rgba(0, 0, 0, .2);
+      }
+    }
+  }
+</style>

package/src/components/XdSwipeSelect/XdSwipeSelect.vue

@@ -0,0 +1,99 @@
+<template>
+  <view class="xd-swipe">
+    <scroll-view
+      class="xd-swipe__scroll"
+      scroll-y
+      :show-scrollbar="false"
+      @scroll="handleScroll"
+      :scroll-into-view="selectId"
+      :croll-with-animation="true"
+    >
+      <view class="xd-swipe__item" :id="getId(index)" v-for="(item,index) in 20" :key="index">{{item}}</view>
+
+    </scroll-view>
+  </view>
+
+</template>
+
+<script>
+  export default {
+    name: "XdSwipeSelect",
+    data(){
+      return {
+        selectId: 'xd-swipe-item-0',
+        timeer: null,
+
+        top: 0,
+        itemHeight: 0,
+        boxHeight: 0
+      }
+    },
+
+    created(){
+      setTimeout(()=> {
+        this.selectId = 'xd-swipe-item-10';
+      }, 300);
+
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          this.$xdUniHelper.getWindowHeight(['#xd-swipe-item-0','.xd-swipe'], this)
+            .then(res => {
+              this.itemHeight = res['#xd-swipe-item-0'].height;
+              this.boxHeight = res['.xd-swipe'].height;
+            })
+            .catch()
+        }, 50)
+
+      })
+
+    },
+
+    methods: {
+      handleScrollStop(e){
+        console.log(e)
+      },
+      handleScroll(e){
+        if(this.timeer) {
+          clearTimeout(this.timeer);
+          this.timeer = null;
+        }
+        this.timeer = setTimeout(()=>{
+          this.handleScrollStop(e);
+        }, 100)
+      },
+      getId(index){
+        return `xd-swipe-item-${index}`;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+
+  /* #ifdef MP-WEIXIN || APP-PLUS */
+  /deep/ .uni-scroll-view::-webkit-scrollbar {
+    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
+    display: none
+  }
+  /* #endif */
+
+  .xd-swipe {
+    &__scroll {
+      height: unit(500, rpx);
+      width: unit(300, rpx);
+      padding: unit(30, rpx);
+      box-sizing: border-box;
+    }
+
+    &__item {
+      height: unit(60, rpx);
+      background: #eee;
+      margin: unit(20, rpx) 0;
+    }
+  }
+
+
+
+
+
+</style>