jufubao-base 1.0.56-beta2005 → 1.0.56-beta2007

package/src/components/JfbBaseCardDetailEntry/JfbBaseCardDetailEntry.vue

@@ -2,109 +2,715 @@
   <view
     class="jfb-base-card-detail-entry"
     @click="handleEditxSelect"
-    :class="{ editx : isEditx && active }"
+    :class="{ editx: isEditx && active }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-card-detail-entry__edit"
-      :class="{ editx : isEditx && active }"
+      :class="{ editx: isEditx && active }"
       v-if="isEditx && active"
     >
-      <view class="jfb-base-card-detail-entry__edit-icon" @click="delEdit">删除</view>
+      <view class="jfb-base-card-detail-entry__edit-icon" @click="delEdit"
+        >删除</view
+      >
     </view>
     <!-- #endif -->
-    <view class="jfb-base-card-detail-entry__body">
-      <view>测试插件( {{containerId}} )</view>
+    <view class="jfb-base-card-detail-entry__body" v-if="info!==null">
+      <view
+        class="jfb-base-card-detail-entry__body-header"
+        :style="{
+          background: headerBg.color,
+          backgroundSize: '100%',
+        }"
+      >
+        <view
+          class="jfb-base-card-detail-entry__body-header-wrap"
+          :style="{
+            backgroundImage: `url(${headerBg.image})`,
+          }"
+        >
+          <view class="jfb-base-card-detail-entry__body-header-item">
+            <view>券名：</view>
+            <view>{{info.card_type_name}}</view>
+          </view>
+          <view
+            style="padding-bottom: 0px"
+            class="jfb-base-card-detail-entry__body-header-item"
+          >
+            <view>券号：</view>
+            <view>{{info.card_number}}</view>
+          </view>
+        </view>
+      </view>
+      <view
+        class="jfb-base-card-detail-entry__body-content"
+      >
+        <view
+          :class="
+            item.key === 'other_card_point'
+              ? 'jfb-base-card-detail-entry__body-content-special'
+              : 'jfb-base-card-detail-entry__body-content-item'
+          "
+          v-for="(item, index) in valueKey"
+          :key="index"
+        >
+        <view> {{ item.label }}： </view>
+          <xd-unit v-if="item.type === 'price'&&info.unit==='点'" fontSize="28" :price="info[item.key]">
+          </xd-unit>
+          <view :style="{color:mainColor,fontWeight:500}" v-else-if="item.type === 'price'&&info.unit==='次'">
+            {{ info[item.key] }}
+            <text>{{info.unit}}</text>
+          </view>
+          <view style="color: #333; font-weight: 500" v-else>
+            {{ info[item.key] }}
+            <text v-if="item.type === 'type'">券</text>
+          </view>
+        </view>
+      </view>
+      <view class="jfb-base-card-detail-entry__body-qrcode">
+        <view>
+          <view>
+            <image mode="aspectFit" :src="info.barcode"></image>
+          </view>
+        </view>
+        <view style="position: relative">
+          <image
+            :style="{width: '300rpx', height: '300rpx'}"
+            :src="info.card_qrcode"
+          ></image>
+          <image v-if="isBrandLogo" class="logo-icon" :src="brandLogo"></image>
+        </view>
+        <view :style="{marginTop: '20rpx'}" v-if="timeStr">消费二维码，有效期为{{ info["card_qrcode_expire"] / 60 }}分钟</view>
+        <view v-if="timeStr">距离刷新还有{{ timeStr }}</view>
+      </view>
+      <view
+      v-if="info.site_entry_settings&&info.site_entry_settings.length>0"
+      class="jfb-base-card-detail-entry__body-business"
+      >
+       <view
+       class="jfb-base-card-detail-entry__body-business-title"
+       >
+      业务板块
+      </view>
+      <view style="display:flex;align-content:center;justify-content:center">
+        <view class="jfb-base-card-detail-entry__body-business-content">
+        <view 
+        class="jfb-base-card-detail-entry__body-business-content-item"
+        v-for="(item,index) in info.site_entry_settings" 
+        :key="index">
+          <view><image :src="item.image_url"></image></view>
+          <view>{{item.entry_name}}</view>
+        </view>
+      </view>
+      </view>
+    </view>
+    <view :style="{height: '100rpx'}"></view>
+        <!-- 靠底支付 -->
+        <view class="fixe_bottom" :style="prod_bottom">
+          <!-- <xd-button 
+          radius="8rpx" 
+          size="small" 
+          type="primary">
+          消费记录
+        </xd-button> -->
+          <xd-button 
+          v-if="info.is_exchange==='Y'"
+          @click="handleToShift" 
+          radius="8rpx" 
+          size="small" 
+          type="primary">
+          券转换
+        </xd-button>
+          <xd-button 
+          v-if="isShowUnbind"
+          @click="handleUnBindCard" 
+          radius="8rpx" 
+          size="small" 
+          type="primary">
+          解除绑定
+        </xd-button>
+        </view>
     </view>
   </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import { jfbRootExec } from "@/utils/xd.event";
-  import JfbBaseCardDetailEntryMixin from "./JfbBaseCardDetailEntryMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
-  import componentsMixins from "@/mixins/componentsMixins";
-  import extsMixins from "@/mixins/extsMixins";
-  export default {
-    name: "JfbBaseCardDetailEntry",
-    components: {
-      XdFontIcon
-    },
-    mixins: [
-      componentsMixins, extsMixins, JfbBaseCardDetailEntryMixin
-    ],
-    data() {
-      return {
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseCardDetailEntryMixin from "./JfbBaseCardDetailEntryMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import colorCardMixins from "@/mixins/colorCardMixins";
+import getServiceUrl from "@/common/getServiceUrl";
+import { mapState } from "vuex";
+import { Base64 } from "js-base64";
+import XdPwPay from "./XdPwPay";
+import XdEditPwd from "./XdEditPwd";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import XdButton from '@/components/XdButton/XdButton'
+export default {
+  name: "JfbBaseCardDetailEntry",
+  components: {
+    XdFontIcon,
+    XdPwPay,
+    XdEditPwd,
+    XdUnit,
+    XdButton
+  },
+  mixins: [
+    componentsMixins,extsMixins,JfbBaseCardDetailEntryMixin,colorCardMixins,
+  ],
+  data() {
+    return {
+      userInfo: null, //用户信息（暂时不可用）
+
+      info: null,
+      valueKey: [
+        {
+          label: "票券余额",
+          key: "card_point",
+          type: "price",
+        },
+        {
+          label: "购买其他物品可抵",
+          key: "other_card_point",
+          type: "price",
+        },
+        {
+          label: "有效期限",
+          key: "end_time",
+          type: "normal",
+        },
+      ],
+      timeStr: "",
+      timeer: null,
+      date: 2, //时间底数
+      time: 2, //时间幂指数
+      refrushTimeer: null,
+      maxTime: 30, //最大执行时间幂指数
+      editShow: false,
+      pwdTitle: "",
+      editPhone: "",
+      editTitle: "",
+      show: false,
+      textList: [],
+      password: "",
+      card_number: "",
+      stopTimer: false, //停止轮询
+      download: "",
+      qrcode: "",
+      backUrl: "",
+      shift_url: "",
 
-        //todo
+      //品牌logo
+      brandLogo:
+        "data:image/png;base64,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",
+      isBrandLogo: false,
+
+      isShowUnbind: false, //是否启动绑定按钮
+      headerBg: {},
+    };
+  },
+  watch: {
+    container(value) {
+      this.init(value);
+    },
+  },
+  computed: {
+    ...mapState(["brandInfo"]),
+    prod_bottom() {
+        return this.fixedStyle({height: 0, zIndex: 111});
+      },
+  },
+  created() {},
+  methods: {
+    onJfbLoad(options) {
+      console.log(options,'optionsoptionsoptionsoptions');
+      if (options["x-params"]) {
+        try {
+          let params = JSON.parse(Base64.decode(options["x-params"]));
+          this.brandLogo = params["qrcode_logo"];
+        } catch (e) {
+          console.warn(options["x-params"]);
+        }
       }
+
+      this.$nextTick(() => {
+        this.card_number = options.card_number;
+        this.init();
+
+        // if (card_number) {
+        //   this.card_number = card_number;
+        //   if (this.brandInfo['is_enable_pay_password'] === 'N') {
+        //     this.init();
+        //   } else if (this.brandInfo['is_enable_pay_password'] === 'Y' && this.userInfo['has_user_set_password'] === 'N') {
+        //     this.editShow = true
+        //     this.pwdTitle = '您还未设置支付密码，请设置您的平台支付密码'
+        //   } else if (this.brandInfo['is_enable_pay_password'] === 'Y' && this.userInfo['has_user_set_password'] === 'Y') {
+        //     this.show = true
+        //     this.textList = [
+        //       {
+        //         label: '查看卡详情',
+        //       },
+        //       {
+        //         label: '请输入支付密码',
+        //       }
+        //     ]
+        //   }
+        //   this.first = true;
+        // } else {
+        //   setTimeout(() => {
+        //     this.$xdUniHelper.navigateTo({
+        //       url: `/pages/index/index`
+        //     }, false)
+        //   }, 2000)
+        // }
+      });
     },
-    watch: {
-      container(value) {
-        this.init(value)
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init() {
+      this.detail();
+      this.refrush();
+      this.backUrl = getContainerPropsValue( this.container,  "content.back_url", { value: "" }).value;
+      this.shift_url = getContainerPropsValue( this.container,  "content.shift_url", { value: "" }).value;
+    },
+    /**
+     * @description 获取卡详情
+     */
+    detail() {
+      jfbRootExec("getBaseByIdCardDetailEntry", {
+        vm: this,
+        data: {
+          card_number: this.card_number,
+          is_show_entry_settings: "Y",
+        },
+      })
+        .then((res) => {
+          if (res && res.card_point) {
+            res["card_point"] = this.$xdUniHelper.divisionFloatNumber(
+              res.card_point,
+              100
+            );
+          }
+          if (res && res.card_point) {
+            res["other_card_point"] = this.$xdUniHelper.divisionFloatNumber(
+              res.other_card_point,
+              100
+            );
+          }
+          if(res && res.site_entry_settings && res.site_entry_settings.length>0) {
+            res.site_entry_settings = res.site_entry_settings.map(item=>{
+              item['image_url'] = getServiceUrl(item['image_url'])
+              return item
+            })
+          }
+          this.info = res;
+          this.setInval(this.info.card_qrcode_expire);
+          this.show = false;
+          this.headerBg = this.getCardThemes(res.card_type_name);
+
+          //显示按钮
+          if (res["is_show_qrcode_logo"] === "Y") {
+            this.isBrandLogo = true;
+          }
+
+          this.isShowUnbind =
+            res["is_can_unbind"] === "Y" || res["is_can_unbind"] === undefined;
+        })
+        .catch((err) => {
+          // this.$refs["pwPay"].clearPwd();
+        });
+    },
+    refrush() {
+      if (this.stopTimer) return;
+      if (this.time >= this.maxTime) {
+        clearTimeout(this.refrushTimeer);
+        console.log("refrushTimeer.end");
+        return;
       }
+      this.time++;
+      let time =
+        this.time >= 5 ? 32 * 1000 : Math.pow(this.date, this.time) * 1000;
+      this.refrushTimeer = setTimeout(() => {
+        jfbRootExec("getCardYueEntry", {
+          vm: this,
+          data: {
+            card_number: this.card_number,
+          },
+        })
+          .then((res) => {
+            //res[4]['value'] = this.$xdUniHelper.random(20,30);
+            let refrushInfo = this.$xdUniHelper.cloneDeep(this.info);
+            if (res && res !== null && Object.keys(res).length > 0) {
+              if (res.card_point) {
+                refrushInfo.card_point = this.$xdUniHelper.divisionFloatNumber(
+                  res.card_point,
+                  100
+                );
+              }
+              if (res.other_card_point) {
+                refrushInfo.other_card_point =
+                  this.$xdUniHelper.divisionFloatNumber(
+                    res.other_card_point,
+                    100
+                  );
+              }
+            }
+
+            this.info = refrushInfo;
+            this.refrush();
+            this.show = false;
+          })
+          .catch();
+      }, time);
+    },
+    handleOnClose() {
+      this.editShow = false;
+    },
+    handlePwdOnSubmit(val) {
+      this.password = val;
+      this.init();
+    },
+
+    handleOnForget() {
+      this.editShow = true;
+      this.editTitle = "请验证您的手机并修改支付密码";
     },
-    created() {
-      this.init(this.container);
 
-      //todo
+    handlePwdClose() {
+      this.$helper.navigateBack();
     },
-    methods: {
-      onJfbLoad(options) {
+    handleUnBindCard() {
+      this.$xdConfirm({
+        $vm: this,
+        content: "您确定要解除绑定卡券吗",
+        title: "系统提示",
+        width: "80%",
+        isTitle: true,
+        zIndex: 2000,
+        vm: this,
+        success: (res) => {
+          if (res.confirm) {
+            clearTimeout(this.timeer);
+            clearTimeout(this.refrushTimeer);
+            this.stopTimer = true;
+            jfbRootExec("deleteCardUnbindEntry", {
+              vm: this,
+              data: {
+                card_number: this.card_number + "",
+              },
+            })
+              .then((res) => {
+                this.$xdAlert({
+                  content: "解绑成功",
+                  close: () => {
+                    this.$xdUniHelper.redirectTo({
+                      url: this.backUrl || this.settings.index,
+                    });
+                  },
+                });
+              })
+              .catch((err) => {
+                console.log(err, "err");
+                this.stopTimer = false;
+              });
+          }
+        },
+      });
+    },
+    setInval(time) {
+      console.log("pppppp", time);
+      this.timeer = setInterval(() => {
+        if (time === 0) {
+          this.timeStr = "00分00秒";
+          clearInterval(this.timeer);
+          if (!this.stopTimer) this.detail();
+        } else {
+          time--;
+          let f = Math.floor(time / 60);
+          f = f < 10 ? "0" + f : f;
+          let m = time % 60;
+          m = m < 10 ? "0" + m : m;
+          this.timeStr = `${f}分${m}秒`;
+        }
+      }, 1000);
+    },
+    handleToShift() {
+      this.$xdUniHelper.navigateTo({
+          url: this.shift_url,
+      });
+    },
+    onJfbBack(options) {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      if (this.refrushTimeer) {
+        clearTimeout(this.refrushTimeer);
+      }
+      this.$xdUniHelper.navigateBack();
+    },
+    onJfbUnload() {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      if (this.refrushTimeer) {
+        clearTimeout(this.refrushTimeer);
+      }
+    },
+    onJfbScroll(options) {
+      console.log("event.onJfbScroll", options);
+    },
+    onJfbReachBottom(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+    onJfbShow(options) {
+      console.log("event.onJfbShow", options);
+      this.onJfbLoad(options)
+      // if (this.first) {
+      //   if (this.brandInfo["is_enable_pay_password"] === "N") {
+      //     this.init();
+      //   } else if (
+      //     this.brandInfo["is_enable_pay_password"] === "Y" &&
+      //     this.userInfo["has_user_set_password"] === "N"
+      //   ) {
+      //     this.editShow = true;
+      //     this.pwdTitle = "您还未设置支付密码，请设置您的平台支付密码";
+      //   } else if (
+      //     this.brandInfo["is_enable_pay_password"] === "Y" &&
+      //     this.userInfo["has_user_set_password"] === "Y"
+      //   ) {
+      //     this.show = true;
+      //     this.textList = [
+      //       {
+      //         label: "查看卡详情",
+      //       },
+      //       {
+      //         label: "请输入支付密码",
+      //       },
+      //     ];
+      //   }
+      // }
+    },
+    onJfbHide(options) {
+      console.log("event.onJfbHide", options);
+    },
+    onJfbBack(options) {
+      console.log("event.onJfbBack", options);
+    },
+    onJfbUpdate(...data) {
+      console.log("event.onJfbUpdate", data);
+    },
+    onJfbCustomEvent(options) {
+      console.log("event.onJfbReachBottom", options);
+    },
+  },
+};
+</script>
 
-        // jfbRootExec('baiduUserLogin', {
+<style scoped lang="less">
+@import "./JfbBaseCardDetailEntryLess.less";
 
-        //   vm: this,//   data: {
+.jfb-base-card-detail-entry {
+  &__body {
+    color: #333;
+    .logo-icon {
+      width: unit(100, rpx) !important;
+      height: unit(100, rpx) !important;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50rpx, -50rpx);
+    }
+    margin: unit(26, rpx);
+    &-header {
+      border-radius: unit(16, rpx);
+      font-size: unit(40, rpx);
+      font-weight: 700;
+      padding: unit(48, rpx) unit(32, rpx);
+      color: #fff;
 
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
+      &-wrap {
+        width: unit(700, rpx);
+        border-radius: unit(16, rpx);
+        background-size: 100%;
+      }
 
-        //   }
+      &-item {
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        padding-bottom: unit(32, rpx);
+      }
+    }
 
-        // }).then().catch()
-      },
-      /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
-       */
-      init(container) {
+    &-content {
+      background: #fff;
+      border-radius: unit(16, rpx);
+      padding: unit(38, rpx) 0;
+      margin-top: unit(24, rpx);
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+      &-item {
+        display: flex;
+        color: #666;
+        justify-content: space-between;
+        align-content: center;
+        font-size: unit(28, rpx);
+        padding: unit(16, rpx) unit(48, rpx);
+      }
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
-      },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
-      onJfbUpdate(...data) {
-        console.log('event.onJfbUpdate', data)
-      },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
+      &-special {
+        display: flex;
+        color: #666;
+        justify-content: space-between;
+        font-size: unit(24, rpx);
+        padding: unit(18, rpx) unit(24, rpx);
+        margin: 0 unit(24, rpx);
+        border-radius: unit(16, rpx);
+        background: #f9f9f9;
+        align-content: center;
+      }
     }
-  }
 
-</script>
+    &-qrcode {
+      text-align: center;
+      font-size: @xd-font-size-base;
+      line-height: unit(36, rpx);
+      background: #fff;
+      border-radius: unit(16,rpx);
+      margin-top: unit(24, rpx);
+      padding: unit(20,rpx) unit(70,rpx) unit(70,rpx) unit(70,rpx);
 
-<style scoped lang="less">
-  @import "./JfbBaseCardDetailEntryLess.less";
+      & > view {
+        // margin-bottom: unit(20, rpx);
+
+        & > view {
+          margin-bottom: 0;
+        }
+      }
+
+      & > view:nth-child(1) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        height: unit(200, rpx);
+        width: 100%;
+        margin-top: unit(20, rpx);
+
+        & > view {
+          width: 100%;
+          height: unit(200, rpx);
+          padding: unit(10, rpx);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          & > image {
+            max-width: 100%;
+            max-height: unit(200, rpx);
+          }
+        }
+      }
+
+      & > view:nth-child(2) {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: unit(20, rpx);
+
+        & > view {
+          width: unit(450, rpx);
+          height: unit(450, rpx);
+          padding: unit(10, rpx);
 
-  .jfb-base-card-detail-entry {
-    &__body{
+          & > image {
+            width: unit(450, rpx);
+            height: unit(450, rpx);
+          }
+        }
+      }
+    }
+
+    &-business {
+      background: #fff;
+      border-radius: unit(16,rpx);
+      margin-top: unit(24,rpx);
+
+      &-title {
+        font-size: unit(28,rpx);
+        font-weight: 500;
+        text-align: center;
+        padding: unit(28,rpx);
+      }
 
+      &-content {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      flex-flow: wrap;
+      padding-left: unit(30, rpx);
+      
+      & > view {
+        width: unit(120, rpx);
+        margin-right: unit(10, rpx);
+        flex-shrink: 0;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        
+        & > view:first-child {
+          width: unit(76, rpx);
+          height: unit(76, rpx);
+          overflow: hidden;
+    
+          & > image {
+            height: 100%;
+            width: 100%;
+          }
+        }
+        
+        & > view:nth-child(2) {
+          margin-top: unit(10, rpx);
+          font-size: unit(24, rpx);
+          line-height: unit(36, rpx);
+          margin-bottom: unit(10, rpx);
+        }
+        
+        & > view:nth-child(3) {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-shrink: 0;
+          font-size: unit(20, rpx);
+          color: #999;
+        }
+        
+        &:last-child {
+          margin-right: 0;
+        } 
+      }
+    }
     }
+
+    .fixe_bottom{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: unit(100, rpx);
+        padding: 0 unit(40, rpx);
+        background: #FFF;
+        box-shadow: 0 0 unit(16, rpx) rgba(0,0,0,.05);
+        .flex_l{
+          display: flex;
+          align-items: center;
+          font-size: unit(32,rpx);
+        }
+      }
   }
+}
 </style>