jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseCardInfo/JfbBaseCardInfo.vue

@@ -1,269 +1,531 @@
 <template>
   <view
     class="jfb-base-card-info"
-    @click="handleSelect"
-    :class="{ editx : isEditx && active }"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-card-info__edit"
-      :class="{ editx : isEditx && active }"
-      v-if="isEditx && active"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
     >
       <view class="jfb-base-card-info__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-card-info__body" style="position: relative" v-if="info!==null">
-      <view>
-        <view class="jfb-base-card-info__body-info" v-for="(item,index) in valueKey" :key="index">
-          <view class="jfb-base-card-info__body-info-label">{{item.label}}</view>
-          <view class="jfb-base-card-info__body-info-value">{{info[item.key]}}</view>
+    <view class="jfb-base-card-info__body" style="position: relative">
+      <view v-if="!qrcode && showForm">
+        <view>
+          <view class="jfb-base-card-info__body-form" @click="handleLabel('card_number')">
+            <view class="jfb-base-card-info__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__body-form" @click="handleLabel('card_password')">
+            <view class="jfb-base-card-info__body-form-label">票券密码</view>
+            <input
+              class="mp"
+              placeholder-style="line-height:26rpx;font-size:28rpx;color:#ccc"
+              max="18"
+              :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 class="jfb-base-card-info__body-points">
-          <view class="jfb-base-card-info__body-points-remain">
-            <view>
-              <view>商城</view>
-              <view>剩余点数</view>
+        <view class="jfb-base-card-info__body-footer" :style="prod_bottom">
+          <xd-button type="primary" width="360rpx" @click="handleGetInfo">确认</xd-button>
+        </view>
+      </view>
+
+      <view v-if="showInfo && info !== null">
+        <view>
+          <view
+            class="jfb-base-card-info__body-info"
+            v-for="(item, index) in showValueKey"
+            :key="index"
+          >
+            <view class="jfb-base-card-info__body-info-label">{{item.label}}</view>
+            <view class="jfb-base-card-info__body-info-value">{{info[item.key] }}</view>
+          </view>
+          <view v-if="isShowBalance" class="jfb-base-card-info__body-residue">
+            <view class="jfb-base-card-info__body-residue-wrap">
+              <view class="jfb-base-card-info__body-residue-label">
+                <view :style="{ color: '#242424', fontSize: '28rpx' }">剩余元宝</view>
+              </view>
+              <view class="jfb-base-card-info__body-residue-value">
+                <xd-unit
+                  iconSize="0.32"
+                  fontSize="28"
+                  :price="info.card_point"
+                  :is-old="true"
+                  :unit="info.unit || ''"
+                ></xd-unit>
+              </view>
+              <view
+                v-if="info.other_card_point && info.card_point_type !== 1"
+                class="jfb-base-card-info__body-residue-reach"
+              >购买其他物品可抵：{{ info.other_card_point }}</view>
             </view>
-            <view>{{info.card_point}}</view>
+            <view
+              class="jfb-base-card-info__body-residue-business"
+              v-if="info.card_point_type !== 1"
+            >所属业务线：{{ info.main_business_code_name }}</view>
           </view>
-          <view class="jfb-base-card-info__body-points-reach">购买其他物品可抵：{{info.other_card_point}}</view>
+          <view :style="{ height: '100rpx' }"></view>
+        </view>
+        <view class="jfb-base-card-info__body-footer" :style="prod_bottom">
+          <xd-button type="primary" width="360rpx" @click="handleToLink">立即绑定</xd-button>
         </view>
-        <view :style="{height:layoutInfo.bottom + 'rpx'}"></view>
-      </view>
-      <view class="jfb-base-card-info__body-footer"
-            :style="{bottom: layoutInfo.bottom + 'rpx',height: layoutInfo.bottom + 'rpx'}">
-        <xd-button type="primary" width="360rpx" @click="handleToLink">立即绑定</xd-button>
       </view>
     </view>
   </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import {jfbRootExec} from "@/utils/xd.event";
-  import {Base64} from 'js-base64'
-  import JfbBaseCardInfoMixin from "./JfbBaseCardInfoMixin";
-  import XdButton from "@/components/XdButton/XdButton";
-
-  export default {
-    name: "JfbBaseCardInfo",
-    components: {
-      XdFontIcon,
-      XdButton
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec, jfbRootFnExec } from "@/utils/xd.event";
+import { Base64 } from "js-base64";
+import JfbBaseCardInfoMixin from "./JfbBaseCardInfoMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import XdButton from "@/components/XdButton/XdButton";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdUnit from "@/components/XdUnit/XdUnit";
+
+export default {
+  name: "JfbBaseCardInfo",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdUnit,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseCardInfoMixin],
+  data() {
+    return {
+      info: null,
+      valueKey: [
+        {
+          label: "票券类型",
+          key: "card_type_name",
+        },
+        {
+          label: "票券号码",
+          key: "card_number",
+        },
+        {
+          label: "票券状态",
+          key: "card_status_name",
+        },
+        {
+          label: "有效期",
+          key: "end_time",
+        },
+      ],
+      card_number: "", //卡号
+      card_password: "", //卡密码
+      isPassword: true,
+      card_num_placeholder: "",
+      card_pwd_placeholder: "",
+
+      showInfo: false,
+
+      qrcode: "", //二维码
+      showForm: true,
+      hasCon: "", //是否有优惠券
+
+      //页面跳转地址
+      backUrl: "",
+      is_show_balance: "N", //是否显示余额
+      my_card_url: "", //我的票券跳转地址
+
+      inCallbackUrlOrg:'',//是否带有回调地址
+
+      card_password_focus: false,
+      card_number_focus: false,
+
+    };
+  },
+  computed: {
+    prod_bottom() {
+      return this.fixedStyle({ height: 0, zIndex: 111 });
     },
-    mixins: [
-      JfbBaseCardInfoMixin
-    ],
-    data() {
-      return {
-        info: null,
-        valueKey: [
-          {
-            label: '票券名称',
-            key: 'main_product_name'
-          },
-          {
-            label: '票券号码',
-            key: 'card_number'
-          },
-          {
-            label: '票券类型',
-            key: 'card_type_name'
-          },
-          {
-            label: '票券状态',
-            key: 'card_status_name'
-          },
-          {
-            label: '票券转换',
-            key: 'is_exchange_name'
+    isShowBalance(){
+      if(this.info && this.info.is_expired === "Y"){
+        return this.is_show_balance === "Y";
+      }
+      return true;
+    },
+    showValueKey(){
+      if(this.info && this.info.is_expired === "Y"){
+        return this.valueKey.filter(item => item.key !== "end_time");
+      }
+      return this.valueKey;
+    },
+  },
+  watch:{
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+  },
+  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(path) {
+      if (this.qrcode) {
+        jfbRootExec("qrCardBind", {
+          vm: this,
+          data: {
+            card_qrcode: this.qrcode,
+            is_show_pop: "Y"
           },
-          {
-            label: '有效期',
-            key: 'end_time'
+        })
+          .then((res) => {
+            this.handlerAfterBindCard(res);
+          })
+          .catch();
+      }
+      else {
+        jfbRootExec("pwdCardBind", {
+          vm: this,
+          data: {
+            card_password: this.card_password,
+            card_number: this.card_number + "",
+            is_show_pop: "Y"
           },
-        ],
-        card_password: '',//卡密码
-        card_number: '',//卡号
-        qrcode: '',//二维码
-        //todo
+        })
+          .then((res) => {
+            this.handlerAfterBindCard(res);
+          })
+          .catch();
       }
     },
-    created() {
+    handlerAfterBindCard(res){
+      //已绑定卡券处理
+      if(res.pop_info && res.pop_info.pop_code === '1001'){
+        this.handleBindConfirm();
+        return;
+      }
+
+      let path = this.getUrlCallback(this.my_card_url || this.backUrl);
+      //有优惠券处理
+      if(this.hasCon){
+        this.toShowCouponDialog();
+        this.$bus.$on("onCloseConDialog",(container_id) => {
+          if(container_id === this.hasCon){
+            this.$xdUniHelper.redirectTo({
+              url: path,
+            });
+          }
+        })
+      }
 
-      //todo
+      //票券绑定成功
+      else{
+        this.$xdAlert({
+          content: "票券绑定成功",
+          close: () => {
+            this.$xdUniHelper.redirectTo({
+              url: path,
+            });
+          },
+        });
+      }
     },
-    methods: {
-      handleToLink(path) {
-        if (this.card_password) {
-          jfbRootExec('pwdCardBind',
-            {
-              vm: this,
-              data: {
-                card_password: this.card_password,
-                card_number: this.card_number
-              }
 
-            }).then((res) => {
-            this.$xdAlert({
-              content: '绑定成功',
-              close: () => {
-                this.$xdUniHelper.redirectTo({
-                  url: '/pages/card/card'
-                })
-              }
-            })
-          }).catch()
-        } else if (this.qrcode) {
-          jfbRootExec('qrCardBind',
-            {
-              vm: this,
-              data: {
-                card_qrcode: this.qrcode
-              }
-            }).then((res) => {
-            this.$xdAlert({
-              content: '绑定成功',
-              close: () => {
-                this.$xdUniHelper.redirectTo({
-                  url: '/pages/card/card'
-                })
-              }
-            })
-          }).catch()
+    //卡券已被自己绑定时的弹框
+    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{
+          }
         }
-      },
-      onJfbLoad(options) {
-        this.qrcode = options.qrcode
-        this.card_number = Base64.decode(options.card_number)
-        this.card_password = Base64.decode(options.pwd)
-        if (this.card_password) {
-          jfbRootExec('getByPwdCardDetail',
-            {
-              vm: this,
-              data: {
-                card_password: this.card_password,
-                card_number: this.card_number
-              }
+      })
+    },
+    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.is_show_balance = getContainerPropsValue(container, 'content.is_show_balance', "N");
+      this.my_card_url = getContainerPropsValue(container, 'content.my_card_url', { value: "" }).value;
+    },
+    onJfbLoad(options) {
+      this.qrcode = options.qrcode || options.pa;
 
-            }).then((res) => {
-            res.is_exchange_name = res.is_exchange === 'Y' ? '可转换' : '不可转换'
-            this.info = res
-          }).catch()
-        } else if (this.qrcode) {
-          jfbRootExec('getByQrCardDetail',
-            {
-              vm: this,
-              data: {
-                card_qrcode: this.qrcode
-              }
-            }).then((res) => {
-            res.is_exchange_name = res.is_exchange === 'Y' ? '可转换' : '不可转换'
-            this.info = res
-          }).catch()
-        }
+      //#ifdef MP-WEIXIN
+      if(this.qrcode) {
+        this.qrcode = decodeURIComponent(this.qrcode);
+      }
+      //#endif
 
-      },
-      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)
-        this.$xdUniHelper.navigateBack()
-      },
-    }
-  }
+      if(options.inCallback) {
+        this.inCallbackUrlOrg = options.inCallback;
+      }
 
+      if (this.qrcode) {
+        jfbRootExec("getByQrCardDetail", {
+          vm: this,
+          data: {
+            card_qrcode: decodeURIComponent(this.qrcode),
+          },
+        })
+          .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];
+              }
+            });
+            this.showInfo = true;
+            this.info = temp;
+          })
+          .catch();
+      }
+    },
+    getInfoByCard() {
+      jfbRootExec("getByPwdCardDetail", {
+        vm: this,
+        data: {
+          card_password: this.card_password,
+          card_number: this.card_number + "",
+        },
+      })
+        .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];
+            }
+          });
+          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 "./JfbBaseCardInfoLess.less";
+@import "./JfbBaseCardInfoLess.less";
+
+.jfb-base-card-info {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+
+  &__body {
+    color: #333;
+    &-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;
 
-  .jfb-base-card-info {
-    border: 1px dashed rgba(0, 0, 0, 0);
-    box-sizing: border-box;
+      &-label {
+        width: unit(120, rpx);
+        color: #a6a6a6;
+        margin-right: unit(70, rpx);
+        text-align: center;
+        font-size: unit(28, rpx);
+      }
 
-    &__body {
-      &-info {
+      & .mp {
         display: flex;
+        justify-content: center;
         align-items: center;
-        justify-content: flex-start;
-        font-size: unit(30, rpx);
-        padding: unit(60, rpx);
-        border-bottom: unit(2, rpx) solid #EEEEEEFF;
-
-        &-label {
-          width: unit(120, rpx);
-          color: #A6A6A6;
-          margin-right: unit(70, rpx);
-          text-align: center;
-        }
+        height: 72rpx
+      }
 
-        &-value {
-          flex: 1;
-        }
+      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;
+      }
+    }
+
+    &-info {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      font-size: unit(24, rpx);
+      padding: unit(40, rpx);
+      background: #fff;
+      border-bottom: unit(2, rpx) solid #eeeeeeff;
+
+      &-label {
+        width: unit(120, rpx);
+        color: #a6a6a6;
+        margin-right: unit(70, rpx);
+        text-align: center;
+
+      }
+
+      &-value {
+        flex: 1;
       }
+    }
+
+    &-residue {
+      padding: unit(40, rpx);
+      background: #fffdf5;
 
-      &-points {
+      &-wrap {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: unit(60, rpx);
-        background: #F9F9F9;
-
-        &-remain {
-          display: flex;
-          align-items: flex-end;
-
-          & > view:nth-child(1) {
-            font-size: unit(30, rpx);
-
-            & > view:nth-child(1) {
-              width: unit(60, rpx);
-              height: unit(30, rpx);
-              line-height: unit(30, rpx);
-              border-radius: unit(10, rpx);
-              background: #FFE786;
-              color: #8D5F18;
-              font-size: unit(18, rpx);
-              text-align: center;
-            }
+      }
 
-            & > view:nth-child(2) {
-              color: #A6A6A6;
-            }
-          }
+      &-reach {
+        color: #777777;
+        font-size: unit(20, rpx);
+        flex: 1;
+        text-align: right;
+      }
 
-          & > view:nth-child(2) {
-            font-size: unit(30, rpx);
-            color: #EC4D71;
-            margin-left: unit(70, rpx);
-          }
-        }
+      &-business {
+        padding-top: unit(20, rpx);
+        border-radius: unit(10, rpx);
+        color: #BA9968;
+        font-size: unit(20, rpx);
+        line-height: unit(30,rpx);
+      }
 
-        &-reach {
-          color: #777777;
-          font-size: unit(22, rpx);
-        }
+      &-label {
+        margin-right: unit(48, rpx);
       }
 
-      &-footer {
-        position: fixed;
-        left: 0;
-        right: 0;
-        background: #fff;
-        padding-top: unit(20, rpx);
+      &-value {
+        display: flex;
+        /*align-items: center;*/
+        // padding-top: unit(25, rpx);
+
+        & > view:nth-child(1) {
+          color: #ff5733;
+          font-size: unit(40, rpx);
+          margin-right: unit(10, rpx);
+        }
       }
     }
+
+    &-footer {
+      position: fixed;
+      left: 0;
+      right: 0;
+      height: unit(320, rpx);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
+}
 </style>