gxd-uni-library-editx 1.0.0

package/src/components/XdMySuccess/XdMySuccess.vue

@@ -0,0 +1,603 @@
+<template>
+  <view class="xd-success">
+    <view class="xd-success__header">
+      <view class="xd-success__header-bg"></view>
+      <view class="xd-success__header-content">
+        <view class="xd-success__header-content-body">
+          <view class="xd-success__header-content-body-icon" v-if="orderInfo === null">
+            <view>
+              <xd-font-icon
+                v-if="orderInfo === null"
+                size="80"
+                icon="iconshijian"
+                color="#333"
+              ></xd-font-icon>
+            </view>
+            <view>处理中</view>
+          </view>
+          <template v-else>
+            <view>
+              <xd-font-icon
+                v-if="orderInfo"
+                :size="orderInfo['iconSize']"
+                :icon="orderInfo['icon']"
+                :color="orderInfo['iconColor']"
+              ></xd-font-icon>
+            </view>
+            <view v-if="orderInfo && orderInfo['orderName']">{{orderInfo && orderInfo['orderName']}}</view>
+            <view v-if="status==='3000'">{{item['tips']}}</view>
+            <!--电子码(号码+密码)-->
+            <template v-if="item['numberAndPassword'] && !isEmpty(item['numberAndPassword'])">
+              <view
+                      class="xd-success__numberAndPassword"
+                      v-for="(nap,nindex) in item['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="small">复制</xd-button>
+                  </view>
+                </view>
+              </view>
+            </template>
+            <!--电子码(号码+密码)-->
+            <!--电子码（密码)-->
+            <view class="xd-success__code" v-if="item['code'] && !isEmpty(item['code'])">
+              <view v-for="(it,codeIndex) in item['code']" :key="codeIndex">
+                <view>
+                  <view>{{it['label']}}</view>
+                  <view>{{it['value']}}</view>
+                </view>
+                <view>
+                  <xd-button @click="copy(it['value'])" btn-type="primary" size="small">复制</xd-button>
+                </view>
+              </view>
+            </view>
+            <!--电子码（密码)-->
+            <!--二维码-->
+            <view
+                    class="xd-success__codeimg"
+                    v-if="item['twocode'] && !isEmpty(item['twocode'])"
+            >
+              <view v-for="(it,codeIndex) in item['twocode']" :key="codeIndex">
+                <image class="twocode" :src="it['value']"></image>
+                <view>{{it['label']}}</view>
+              </view>
+            </view>
+            <!--二维码-->
+            <!--条形码-->
+            <view
+                    class="xd-success__codeimg"
+                    v-if="item['barcode']  && !isEmpty(item['barcode'])"
+            >
+              <view v-for="(it,codeIndex) in item['barcode']" :key="codeIndex">
+                <image mode="aspectFit" class="barcode" :src="it['value']"></image>
+                <view>{{it['label']}}</view>
+              </view>
+            </view>
+            <!--条形码-->
+            <view class="xd-success__tips" v-if="item['use_desc']">
+              <view>（为了方便使用请
+                <text :style="{color: $mainColor}">截屏保存</text>
+                兑换码）
+              </view>
+              <view :style="{color: $mainColor}">{{item['use_desc']}}</view>
+            </view>
+            <view>
+              <view
+                      v-for="(btn,index) in item['btn']"
+                      :key="index"
+              >
+                <xd-button
+                        size="small"
+                        :type="btn['type']"
+                        @click="handleBtnClick(btn,item)"
+                >{{btn['label']}}
+                </xd-button>
+              </view>
+            </view>
+          </template>
+        </view>
+      </view>
+    </view>
+    <view class="xd-success__content" v-if="item &&item['content']">
+      <xd-more :background="titleBackground">宝贝详情</xd-more>
+      <view class="xd-success__content-body">
+        <xd-content-xss :html="item['content']"></xd-content-xss>
+      </view>
+    </view>
+    <view class="xd-success__notice" v-if="item && item['desc'] && item['descTitle']">
+      <view>{{item['descTitle']}}</view>
+      <view>
+        <xd-content-xss :html="item['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: "XdMySuccess",
+    components: {
+      XdContentXss,
+      XdFontIcon,
+      XdButton,
+      XdMore
+    },
+    props:{
+      //基础静态信息
+      info: {
+        type: Object | null,
+        default: null
+      },
+      maxTime: {
+        type: Number,
+        default: 5
+      },
+      titleBackground: {
+        type: String,
+        default: '#eee'
+      },
+    },
+    watch:{
+      info(value){
+        this.init(value);
+      },
+    },
+    data(){
+      return {
+        orderInfo: null,
+        item: null,
+
+        //订单状态信息数据格式
+        orderFormat: {
+          icon: 'iconshijian', //iconfont里面的图标 ， 成功=>icondingdanwancheng，失败：icongerenzhongxinchufabaocuo
+          iconSize: 80, //图标大小
+          iconColor: 'red', //图标颜色
+          orderName: '订单已支付成功', //订单状态名称
+          orderStatus: '3000', //订单状态名称
+        },
+
+        //基础静态信息
+        infoFormat: {
+          //提示语言
+          tips: '非常感谢您购买我们的产品',
+
+          //电子码使用描述
+          use_desc: '本兑换码：仅限于万达电影官方APP使用',
+
+          //电子码 （密码）
+          code: [
+            {label: "兑换码：", value: "jfbcake.oss-cn-beijing.aliyuncs.comliyuncs.com"},
+            {label: "兑换码：", value: "45122"}
+          ],
+
+          //电子码 （号码 + 密码）
+          numberAndPassword: [
+            [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}],
+            [{label: "券号：", value: "1515"}, {label: "密码：", value: "45122"}]
+          ],
+
+          //条形码
+          barcode: [
+            {
+              label: "券号:cardcardcardcard0001 密码：21337",
+              value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=&p=21337"
+            },
+            {
+              label: "券号:cardcardcardcard0001 密码：21337",
+              value: "http://sandbox-m-cake.jufubao.cn/rest/3.0/cakeshop/order/order/barcode_img?c=cardcardcardcard0001&p=21337"
+            }
+          ],
+
+          //二维码
+          twocode: [
+            {
+              label: "券号:cardcardcardcard0001 密码：21337",
+              value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
+            },
+            {
+              label: "券号:cardcardcardcard0001 密码：21337",
+              value: "https://c.jufubao.cn/web/pb/qrcode/image?content=21337"
+            }
+          ],
+
+          content: `\u003Cp\u003E\u003Cimg src=\u0022https:\\/\\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\\/20210119153542102.png?x-oss-process=style\\/common\u0022 style=\u0022width: 100%;\u0022\u003E\u003C\\/p\u003E\\n                                                                                                                        \u003Cdiv\u003E\u003Cimg src=\u0022https:\\/\\/jfb-public-images.oss-cn-qingdao.aliyuncs.com\\/7daysservice.jpeg\u0022 width=\u0022100%\u0022\u003E\u003C\\/div\u003E`,
+
+          //温馨提示
+          descTitle: '温馨提示',
+          desc: '支付成功后，聚福宝不会以付款异常、卡单、系统升级为由联系您。请勿泄露银行卡号、手机验证码，否则会造成钱款损失！谨防电话诈骗！',
+
+          //显示操作按钮（选填）（不显示按钮btn为空数组）
+          btn: [
+            {'label': '返回首页', value: 1, type: 'default', radius: '12rpx'},
+            {'label': '查看订单', value: 2, type: 'primary', radius: '12rpx'},
+          ]
+        },
+
+        date: 2, //时间底数
+        time: 1, //时间幂指数
+
+        //status => 3000:成功  3002:失败  3001:进行中
+        status: '3001',
+      }
+    },
+
+    created() {
+      if(this.info === null) this.init(this.infoFormat);
+      else this.init(this.info);
+      this.intval();
+    },
+
+    methods: {
+      init(value){
+        this.item = value;
+      },
+
+      /**
+       * @description 是否为空
+       * @param data
+       */
+      isEmpty(data) {
+        return this.$xdUniHelper.isEmpty(data);
+      },
+
+      /**
+       *@description 复制功能
+       * @param  text
+       */
+      copy(text) {
+        // #ifdef H5
+        this.$copyText(text).then(
+          res => {
+            uni.showToast({
+              title: '复制成功'
+            })
+          }
+        )
+        // #endif
+        // #ifndef H5
+        uni.setClipboardData({
+          data: text,
+          success: () => {
+            uni.showToast({
+              title: '复制成功'
+            })
+          }
+        })
+        // #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', (order)=>{
+          //使用测试数据
+          if(order === null) {
+            this.orderInfo = this.orderFormat;
+            return;
+          }
+
+          if (this.$xdUniHelper.checkVarType(order) === 'object') {
+            console.log('order',this.time, Math.pow(this.date, (this.time > this.maxTime ? this.maxTime : this.time)) * 1000);
+            this.orderInfo = order;
+            this.status = order.orderStatus;
+            this.time++;
+            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);
+
+      &-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;
+
+            & > view {
+              padding-top: unit(40,rpx);
+              margin: 0 unit(20,rpx);
+            }
+          }
+        }
+
+
+      }
+
+
+    }
+
+    &__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(100, 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;
+        background: rgb(238, 238, 238) !important;
+      }
+
+      &-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>