jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseCardInfoEntry/JfbBaseCardInfoEntry.vue

@@ -0,0 +1,864 @@
+<template>
+  <view
+    class="jfb-base-card-info-entry"
+    @click="handleEditxSelect"
+    :class="{ editx: isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-card-info-entry__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-card-info-entry__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-card-info-entry__body" :style="{minHeight: layoutInfo.bodyMinHeightRpx + 'rpx'}">
+      <view v-if="!qrcode && showForm">
+        <view>
+          <view class="jfb-base-card-info-entry__body-form" @click="handleLabel('card_number')">
+            <view class="jfb-base-card-info-entry__body-form-label">票券号码</view>
+            <input
+              placeholder-style="line-height:26rpx;font-size:28rpx;color:#ccc"
+              type="number"
+              :focus="card_number_focus"
+              max="32"
+              v-model="card_number"
+              :placeholder="card_num_placeholder"
+            />
+          </view>
+          <view class="jfb-base-card-info-entry__body-form" @click="handleLabel('card_password')">
+            <view class="jfb-base-card-info-entry__body-form-label">票券密码</view>
+            <input
+              max="18"
+              placeholder-style="line-height:26rpx;font-size:28rpx;color:#ccc"
+              :password="isPassword"
+              :focus="card_password_focus"
+              v-model="card_password"
+              :placeholder="card_pwd_placeholder"
+            />
+            <!--#ifdef H5-->
+            <xd-font-icon
+              @click.stop="handleIcon()"
+              :icon="isPassword ? 'iconbiyan' : 'iconchakan'"
+            ></xd-font-icon>
+            <!--#endif-->
+            <!--#ifdef MP-WEIXIN-->
+            <xd-font-icon
+              :width="72"
+              :height="72"
+              @click.stop="handleIcon()"
+              :icon="isPassword ? 'iconbiyan' : 'iconchakan'"
+            ></xd-font-icon>
+            <!--#endif-->
+          </view>
+        </view>
+        <view :style="{ height: '100rpx' }"></view>
+        <view class="fixe_bottom" :style="prod_bottom">
+          <view>
+            <xd-button
+              type="primary"
+              width="460rpx"
+              @click="handleGetInfo"
+            >确认</xd-button>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="showInfo && info !== null">
+        <view
+          class="card-list"
+          :style="{
+            background: headerBg['color'],
+            backgroundSize: '100%'
+          }">
+          <view class="card-list-warp" :style="{backgroundImage: `url(${headerBg['image']})`}">
+            <view class="card-list__title"><view>{{info['card_type_name']}}</view></view>
+            <view class="card-list__content">
+              <view>
+                <text>券号：</text>
+                <text>{{info.card_number}}</text>
+              </view>
+            </view>
+            <view class="card-list__date">
+              <text>有效期：</text>
+              <text>{{info.end_time}}</text>
+            </view>
+            <view class="card-list__yue" v-if="isShowBalance">
+              <text>余额：</text>
+              <text>{{info.card_point}} {{ info.unit }}</text>
+            </view>
+            <view class="card-list__other" v-if="info.other_card_point && info.card_point_type === 2">
+              <view><text>购买其他物品可抵：</text><text>{{info.other_card_point}} {{ info.unit }}</text></view>
+            </view>
+          </view>
+        </view>
+        <view
+          v-if="info.site_entry_settings && info.site_entry_settings.length > 0"
+          class="jfb-base-card-info-entry__body-business"
+        >
+          <view class="jfb-base-card-info-entry__body-business-title">支持业务板块</view>
+          <view style="display: flex;align-content: center;justify-content: flex-start;">
+            <view class="jfb-base-card-info-entry__body-business-content">
+              <view
+                class="jfb-base-card-info-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">
+          <view>
+            <xd-button
+              type="primary"
+              width="460rpx"
+              @click="handleToLink"
+            >立即绑定</xd-button>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec, jfbRootFnExec } from "@/utils/xd.event";
+import JfbBaseCardInfoEntryMixin from "./JfbBaseCardInfoEntryMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import getServiceUrl from "@/common/getServiceUrl";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import colorCardMixins from "@/mixins/colorCardMixins";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import XdButton from "@/components/XdButton/XdButton";
+
+export default {
+  name: "JfbBaseCardInfoEntry",
+  components: {
+    XdFontIcon,
+    XdUnit,
+    XdButton,
+  },
+  mixins: [
+    componentsMixins, extsMixins, JfbBaseCardInfoEntryMixin,colorCardMixins
+  ],
+  data() {
+    return {
+      info: null,
+      card_number: "", //卡号
+      card_password: "", //卡密码
+      isPassword: true,
+      card_num_placeholder: "",
+      card_pwd_placeholder: "",
+      showInfo: false,
+      entryGroupId: '',//加载入口数据组别
+
+      qrcode: "", //二维码
+      showForm: true,
+      hasCon: "",
+
+      //页面跳转地址
+      backUrl: "",
+      headerBg: {},
+      my_card_url: "",  //我的票券跳转地址
+      inCallbackUrlOrg:'',//是否带有回调地址
+      is_show_balance: "N", //是否显示余额
+
+      card_password_focus: false,
+      card_number_focus: false,
+    };
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+  },
+  computed: {
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
+    },
+
+    isShowBalance(){
+      if(this.info && this.info.is_expired === "Y"){
+        return this.is_show_balance === "Y";
+      }
+      return true;
+    },
+  },
+  created() {
+    this.init(this.container);
+  },
+
+  methods: {
+    handleLabel(el){
+      this.card_password_focus = false;
+      this.card_number_focus = false;
+      setTimeout(()=>{
+        this[`${el}_focus`] = true;
+      },50)
+    },
+
+    handleIcon(){
+      this.isPassword = !this.isPassword
+    },
+    toShowCouponDialog(){
+      if(this.info){
+        jfbRootFnExec(this, 'onCustomEvent')("@showBaseConDialog", {user_card_number: this.info.card_number})
+      }
+    },
+    handleToLink() {
+      if(this.info.card_point===0) {
+        this.$xdConfirm({
+          styles: this.styles,
+          content: "票券余额为0，是否确认绑定?",
+          width: "80%",
+          success: (res) => {
+            if (res.confirm) {
+              this.handleToBind()
+            }
+          },
+        });
+        return
+      }
+      this.handleToBind()
+    },
+    handleToBind() {
+      if (this.qrcode) {
+        jfbRootExec("qrCardBindEntry", {
+          vm: this,
+          data: {
+            card_qrcode: this.qrcode,
+            is_show_pop: "Y",
+          },
+        })
+          .then((res) => {
+            this.handlerAfterBindCard(res);
+          })
+          .catch();
+      } else {
+        jfbRootExec("pwdCardBindEntry", {
+          vm: this,
+          data: {
+            card_password: this.card_password,
+            card_number: this.card_number + "",
+            is_show_entry_settings: "Y",
+            is_show_pop: "Y",
+          },
+        })
+          .then((res) => {
+            console.log(this.$xdAlert, "this.$xdAlertfsdfs");
+            this.handlerAfterBindCard(res);
+          })
+          .catch();
+      }
+    },
+    handlerAfterBindCard(res){
+      if(res.pop_info && res.pop_info.pop_code === '1001'){
+        this.handleBindConfirm();
+        return;
+      }
+
+      if(this.hasCon){
+        this.toShowCouponDialog();
+        this.$bus.$on("onCloseConDialog",(container_id) => {
+          if(container_id === this.hasCon){
+            let path = this.getUrlCallback(this.backUrl)
+            this.$xdUniHelper.redirectTo({
+              url: path,
+            });
+          }
+        })
+      }else{
+        this.$xdAlert({
+          content: "票券绑定成功",
+          close: () => {
+            let path = this.getUrlCallback(this.backUrl)
+            this.$xdUniHelper.redirectTo({
+              url: path,
+            });
+          },
+        });
+      }
+    },
+    //卡券已被自己绑定时的弹框
+    handleBindConfirm(){
+      this.$xdConfirm({
+        styles: this.styles,
+        width: '90%',
+        content: '您已绑定该票券，无需再次绑定',
+        confirmText: '我的票券',
+        cancelText: '返回',
+        showClose: false,
+        success: (res) => {
+          if (res.confirm) {
+            let path = this.getUrlCallback(this.my_card_url || this.backUrl)
+            this.$xdUniHelper.redirectTo({
+              url: path,
+            });
+          }else{
+          }
+        }
+      })
+    },
+    init(container) {
+      this.backUrl = getContainerPropsValue(container, "content.back_url", { value: "/pages/card/card" }).value;
+      this.card_num_placeholder = getContainerPropsValue(container, "content.card_num_placeholder", "请输入券号(电子券除外)");
+      this.card_pwd_placeholder = getContainerPropsValue(container, "content.card_pwd_placeholder", "请输入密码");
+      this.my_card_url = getContainerPropsValue(container, 'content.my_card_url', { value: "" }).value;
+      this.is_show_balance = getContainerPropsValue(container, 'content.is_show_balance', "N");
+      //'wechat_mini_program|default'
+      this.entryGroupId = getContainerPropsValue(container,"content.entryGroupId","default");
+    },
+    onJfbLoad(options) {
+      this.qrcode = options.qrcode || options.pa;
+
+      //#ifdef MP-WEIXIN
+      if(this.qrcode) {
+        this.qrcode = decodeURIComponent(this.qrcode);
+      }
+      //#endif
+
+      if(options.inCallback) {
+        this.inCallbackUrlOrg = options.inCallback;
+      }
+
+
+      if (this.qrcode) {
+        jfbRootExec("getByQrCardDetailEntry", {
+          vm: this,
+          data: {
+            card_qrcode: decodeURIComponent(this.qrcode),
+            is_show_entry_settings: "Y",
+            group_id: this.entryGroupId
+          },
+        })
+          .then((res) => {
+            res.is_exchange_name = res.is_exchange === "Y" ? "可转换" : "不可转换";
+            let temp = {};
+            Object.keys(res).map((key) => {
+              if (key === "card_point" || key === "other_card_point") {
+                temp[key] = this.$xdUniHelper.divisionFloatNumber(
+                  res[key],
+                  100
+                );
+              } else if (key === "unit") {
+                temp[key] = res[key];
+              } else {
+                temp[key] = res[key];
+              }
+            });
+
+            //过滤入口配置
+            if(res && res.site_entry_settings && res.site_entry_settings.length > 0) {
+              res['site_entry_settings'] = this.filterNotSupportEntry(res['site_entry_settings']);
+            }
+
+
+            if(res && res.site_entry_settings && res.site_entry_settings.length > 0) {
+              temp.site_entry_settings = res.site_entry_settings.filter(item=>{
+                item['image_url'] = getServiceUrl(item['image_url'])
+                return res.business_codes.includes(item.business_code)
+              })
+            }
+
+            this.headerBg = this.getCardThemes(res.card_type_name);
+            this.showInfo = true;
+            this.info = temp;
+          })
+          .catch();
+      }
+    },
+    getInfoByCard() {
+      jfbRootExec("getByPwdCardDetailEntry", {
+        vm: this,
+        data: {
+          card_password: this.card_password,
+          card_number: this.card_number + "",
+          is_show_entry_settings: "Y"
+        },
+      })
+        .then((res) => {
+          res.is_exchange_name =
+            res.is_exchange === "Y" ? "可转换" : "不可转换";
+          let temp = {};
+          Object.keys(res).map((key) => {
+            if (key === "card_point" || key === "other_card_point") {
+              temp[key] = this.$xdUniHelper.divisionFloatNumber(res[key], 100);
+              // temp[key] = res[key];
+            } else if (key === "unit") {
+              temp[key] = res[key];
+            } else {
+              temp[key] = res[key];
+            }
+          });
+          if(res && res.site_entry_settings && res.site_entry_settings.length>0) {
+            temp.site_entry_settings = res.site_entry_settings.filter(item=>{
+              item['image_url'] = getServiceUrl(item['image_url'])
+              return res.business_codes.includes(item.business_code)
+            })
+          }
+          this.headerBg = this.getCardThemes(res.card_type_name);
+          this.showInfo = true;
+          this.showForm = false;
+          this.info = temp;
+        })
+        .catch();
+    },
+    isEmpty(str) {
+      return str === null || str === "";
+    },
+    handleGetInfo() {
+      if (this.isEmpty(this.card_password)) {
+        this.$xdAlert({
+          content: "请填写票券密码",
+          time: 1500,
+          isClose: false,
+          zIndex: 5000,
+        });
+        return;
+      }
+      this.getInfoByCard();
+    },
+    onJfbBack(options) {
+      this.$xdUniHelper.navigateBack();
+    },
+    onJfbShow(options) {
+      this.onJfbLoad(options);
+    },
+    onJfbCustomEvent({action, data}){
+      if(action === 'baseConDialog@hasCon'){
+        this.hasCon = data;
+      }
+      console.log('onJfbCustomEvent',action, data);
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseCardInfoEntryLess.less";
+
+.jfb-base-card-info-entry {
+  &__body {
+    color: #333;
+    padding: unit(26, rpx);
+
+    &-form {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: unit(24, rpx);
+      padding: unit(40, rpx);
+      border-bottom: unit(2, rpx) solid #eeeeee;
+      background: #fff;
+
+      &-label {
+        width: unit(120, rpx);
+        color: #a6a6a6;
+        margin-right: unit(70, rpx);
+        text-align: center;
+        font-size: unit(28, rpx);
+      }
+
+      & .mp {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 72rpx;
+        height: 72rpx
+      }
+
+      input {
+        font-size: unit(28, rpx);
+        flex: 1;
+      }
+
+      &-value {
+        flex: 1;
+      }
+
+      &-code {
+        background: #f5f5f5;
+        border-radius: unit(6, rpx);
+        width: unit(180, rpx);
+        height: unit(80, rpx);
+        line-height: unit(80, rpx);
+        font-size: unit(48, rpx);
+        color: #a6a6a6;
+        text-align: center;
+      }
+    }
+    .logo-icon {
+      width: unit(100, rpx) !important;
+      height: unit(100, rpx) !important;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50rpx, -50rpx);
+    }
+    .card-list {
+      overflow: hidden;
+      border-radius: unit(16, rpx);
+      margin-bottom: unit(30, rpx);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+
+      &__title {
+        height: unit(56, rpx);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        & > view {
+          padding: 0 unit(80, rpx);
+          font-size: unit(24, rpx);
+          line-height: unit(56, rpx);
+          background: rgba(102, 102, 102, 0.4);
+          color: #fff;
+          border-radius: 0 0 unit(16, rpx) 0;
+        }
+
+      }
+
+      &__content {
+        padding: unit(10, rpx) unit(40, rpx) 0;
+        height: unit(86, rpx);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        & > view:first-child {
+          font-size: unit(36, rpx);
+          line-height: unit(86, rpx);
+          color: #fff;
+          font-weight: 700;
+        }
+
+        & > view:nth-child(2) {
+          font-size: unit(24, rpx);
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          flex-flow: wrap;
+          flex-direction: column;
+          color: #fff;
+        }
+      }
+
+      &__date {
+        padding: 0 unit(40, rpx);
+        font-size: unit(28, rpx);
+        line-height: unit(32, rpx);
+        color: #fff;
+      }
+
+      &__yue {
+        padding: unit(10, rpx) unit(40, rpx) 0;
+        font-size: unit(28, rpx);
+        line-height: unit(32, rpx);
+        color: #fff;
+
+        & > text:nth-child(2) {
+          font-weight: 700;
+        }
+      }
+
+      &__other {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        padding: unit(20, rpx) unit(40, rpx) 0;
+        margin-top: unit(0, rpx);
+
+        & > view {
+          border-radius:unit(8, rpx);
+          background: rgba(255, 255, 255, 0.2);
+          height: unit(48, rpx);
+          line-height: unit(48, rpx);
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          font-weight: 400;
+          font-size: unit(24, rpx);
+          padding: 0 unit(20, rpx);
+          color: #fff;
+        }
+
+
+      }
+
+      &__nodata {
+        padding: unit(20, rpx) unit(40, rpx) 0;
+        margin-top: unit(0, rpx);
+        color: #fff;
+        font-size: unit(28, rpx);
+      }
+
+      &__entry {
+        padding: unit(20, rpx) unit(40, rpx) 0;
+        & > view {
+          line-height: unit(64, rpx);
+          text-align: center;
+          font-size: unit(26, rpx);
+          border-radius: unit(32, rpx);
+          background: rgba(255, 255, 255, 1);
+          box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+          font-weight: 500;
+        }
+      }
+
+      &__entrys {
+        margin: unit(20, rpx) unit(20, rpx) 0;
+        padding: unit(30, rpx);
+        border-radius: unit(16, rpx);
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0 unit(4, rpx) unit(8, rpx) rgba(156, 62, 0, 0.11);
+
+        &-title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+
+          & > view:first-child {
+            font-size: unit(28, rpx);
+            font-weight: 500;
+            flex: 1;
+          }
+
+          & > view:nth-child(2) {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            flex-shrink: 0;
+            font-size: unit(20, rpx);
+            color: #999;
+          }
+        }
+
+        &-scroll {
+
+        }
+
+        &-item {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-flow: nowrap;
+          margin-left: unit(-14, rpx);
+          padding-top: unit(20, 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;
+            }
+
+          }
+
+
+        }
+      }
+
+      &-warp {
+        width: unit(700, rpx);
+        // min-height: unit(290, rpx);
+        position: relative;
+        border-radius: unit(16, rpx);
+        background-size: 100%;
+        padding-bottom: unit(20, rpx);
+      }
+    }
+
+    &-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);
+
+      & > 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);
+
+          & > 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);
+            .uni-cut(1,36);
+          }
+
+          & > 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 {
+      height: unit(100, rpx);
+      padding: 0 unit(40, rpx);
+      background: #fff;
+      box-shadow: 0 0 unit(16, rpx) rgba(0, 0, 0, 0.05);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > view {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+      .flex_l {
+        display: flex;
+        align-items: center;
+        font-size: unit(32, rpx);
+      }
+    }
+  }
+}
+</style>