jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseConDialog/JfbBaseConDialog.vue

@@ -0,0 +1,580 @@
+<template>
+  <view
+    class="jfb-base-con-dialog"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-con-dialog__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-con-dialog__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-con-dialog__body">
+      <view v-if="isShow" class="jfb-base-con-dialog__body-dialog">
+        <view class="jfb-base-con-dialog__body-dialog-mask" @click.stop="handleMaskHide"></view>
+        <view v-if="distribution_method !== 'card_binded'" class="jfb-base-con-dialog__body-dialog-content">
+          <view v-if="list.length>1" class="jfb-base-con-dialog__body-dialog-content-num">
+            <text>{{ currentIndex + 1 }}/{{ list.length }}</text>
+          </view>
+          <view style="display: flex; align-items: center">
+            <view
+              @click="handleChange('left')"
+              v-if="this.type === 2 && this.currentIndex !== 0"
+              class="jfb-base-con-dialog__body-dialog-content-left"
+            >
+              <xd-font-icon icon="iconxiangzuo_xian"></xd-font-icon>
+            </view>
+            <view class="jfb-base-con-dialog__body-dialog-content-image">
+              <image :src="currentImage"></image>
+              <image @click="handleToList" :src="currentBtnImage"></image>
+            </view>
+            <view
+              v-if="this.type === 2 && this.currentIndex !== list.length - 1"
+              @click="handleChange('right')"
+              class="jfb-base-con-dialog__body-dialog-content-right"
+            >
+              <xd-font-icon icon="iconxiangyou_xian"></xd-font-icon>
+            </view>
+          </view>
+          <xd-font-icon
+            @click="handleClose"
+            class="jfb-base-con-dialog__body-dialog-content-close"
+            icon="iconguanbi_xian"
+            color="#fff"
+            size="64"
+          ></xd-font-icon>
+        </view>
+        <view v-else class="jfb-base-con-dialog__body-dialog-content">
+          <xd-cou-card-bind
+            :isAll="isAll"
+            :isRandom="isRandom"
+            :list="couponList"
+            :setting="couponOther"
+            @closeDialog="handleCardBindClose"
+            @getCoupont="handleGetCoupon"
+            @getAllCoupont="getAllCoupont"
+          ></xd-cou-card-bind>
+        </view>
+      </view>
+      <view
+        :style="{ background: backgroundColor, color: warningColor }"
+        class="jfb-base-con-dialog__body-pop"
+        v-if="isPreview"
+      >弹框方便编辑(占位)，在线上此模块不显</view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec, JfbEvent, jfbRootFnExec } from "@/utils/xd.event";
+import JfbBaseConDialogMixin from "./JfbBaseConDialogMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import getServiceUrl from "@/common/getServiceUrl";
+import colorCardMixins from "@/mixins/colorCardMixins";
+const Color = require("color");
+import { mapState } from "vuex";
+import storage from "@/common/storage";
+import XdCouCardBind from "./XdCouCardBind";
+
+export default {
+  name: "JfbBaseConDialog",
+  components: {
+    XdFontIcon,
+    XdCouCardBind
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseConDialogMixin],
+  data() {
+    return {
+      list_url: "",
+      list: [],
+      currentImage: "",
+      currentBtnImage: "",
+      currentIndex: 0,
+      isShow: false,
+      type: 1,
+      isPreview: false, //是否预览
+      activity_id: "",
+      backgroundColor: "",
+      distribution_method: "homed", //触发事件
+      dispatchData: "", //触发事件参数
+
+      couponList: [],
+      couponOther: {},
+      order_num: null,
+      timer: null,
+      timeNum: 0,
+
+      //预览是否显示弹窗
+      is_preview_hide_dailog: false,
+
+      isAll: false,
+      isRandom: false
+    };
+  },
+  computed: {
+    ...mapState(["pageBusinessCode"]),
+  },
+  watch: {
+    container(value,oloValue) {
+      if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+    is_preview_hide_dailog(value){
+      if(value === true) this.isShow = false;
+      else {
+        storage.remove(this.containerId);
+        this.onJfbLoad();
+      }
+    },
+  },
+  created() {
+    this.isPreview = this.$configProject.isPreview;
+    this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
+    this.init(this.container);
+  },
+  methods: {
+    handleMaskHide(){
+      if(this.isPreview ) this.isShow = false;
+    },
+
+    init(value) {
+      this.list_url = getContainerPropsValue(value, "content.list_url", {value: "",}).value;
+      this.distribution_method = getContainerPropsValue(value, "content.distribution_method", "homed");
+      this.type = getContainerPropsValue(value, "content.type", 1);
+      this.time = Number(getContainerPropsValue(value, "content.time", 3));
+      this.is_preview_hide_dailog = getContainerPropsValue(value, "content.is_hide_dailog", 'N') === 'Y';
+    },
+
+    //领取优惠券
+    handleGetCoupon(item){
+      this.$xdShowLoading({});
+      jfbRootExec("getOnceCoupon", {
+        vm: this,
+        data: {
+          prize_id: item.prize_id,
+          distribution_method: this.distribution_method,
+          ...this.dispatchData
+        }
+      }).then(res => {
+        if (res.code === 400) {
+          this.$xdHideLoading();
+          this.$xdAlert({
+            content: res.message,
+            zIndex: 3200,
+            time: 2000,
+            isClose: false,
+          });
+          this.getDialogList();
+          return;
+        }
+        this.order_num = res.tmp_order_number;
+        setTimeout(()=>{
+          this.getResult();
+        },1000)
+      }).catch((err) => {
+        console.log(err, "err");
+      });
+    },
+
+    getResult(is_auto='N') {
+      jfbRootExec("getCouponResult", {
+        vm: this,
+        data: {
+          tmp_order_number: this.order_num,
+          ...this.dispatchData
+        },
+      })
+        .then((res) => {
+          if (res.status_type === "success") {
+            if(is_auto==='Y') {
+              this.order_num = null;
+              this.handleCardBindClose();
+              this.$xdHideLoading();
+              if (this.timer) {
+                this.timeNum = 0;
+                clearTimeout(this.timer);
+              }
+              return
+            }
+            this.order_num = null;
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: "领取成功",
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            setTimeout(()=>{
+              this.getDialogList();
+              if (this.timer) {
+                this.timeNum = 0;
+                clearTimeout(this.timer);
+              }
+            },2000)
+            return;
+          }
+          if (res.status_type === "error") {
+            if(is_auto==='Y') {
+              this.handleCardBindClose();
+              this.$xdHideLoading();
+              if (this.timer) {
+                this.timeNum = 0;
+                clearTimeout(this.timer);
+              }
+              return
+            }
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: res.message,
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            setTimeout(()=>{
+              if (res.code === 400) {
+                this.getDialogList();
+              }
+              if (this.timer) {
+                this.timeNum = 0;
+                clearTimeout(this.timer);
+              }
+            },2000)
+            return;
+          }
+
+          this.timer = setTimeout(() => {
+            this.getResult();
+            if (this.timeNum > 5) {
+              this.$xdLog.setARMSInfo(
+                { message: "领取中" },
+                `pay_${res.status_type}`
+              );
+            }
+            this.timeNum++;
+          }, Math.pow(2, this.timeNum > 5 ? 5 : this.timeNum) * 1000);
+        })
+        .catch((err) => {
+          this.$xdHideLoading();
+          console.log(err, "err");
+        });
+    },
+
+    p_getDialogList(){
+      jfbRootExec("getCouponDialogList", {
+        vm: this,
+        data: {
+          namespace: this.pageBusinessCode,
+          distribution_method: this.distribution_method,
+          ...this.dispatchData
+        },
+      })
+        .then((res) => {
+          this.list = res.list;
+          if(res.list.length === 0) return;
+          this.currentImage = getServiceUrl(
+            this.list[this.currentIndex].app_activity_url
+          );
+          this.currentBtnImage = getServiceUrl(
+            this.list[this.currentIndex].app_activity_button
+          );
+          this.activity_id = this.list[this.currentIndex].activity_id;
+          this.handlePop();
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+
+    p_getCouponList(){
+      jfbRootExec("getDialogCouponList", {
+        vm: this,
+        data: {
+          distribution_method: this.distribution_method,
+          ...this.dispatchData
+        }
+      }).then(res => {
+        const { list, ...other } = res;
+        this.couponList = list;
+        this.couponOther = other;
+        this.isAll = res.receive_method==="batch"
+        this.isRandom = res.distribution_type==="random"
+        this.activity_id = res.activity_id
+        if(res.receive_method !== "batch") {
+          if(res.can_take === "Y" && res.has_times === "Y" && list.length > 0){
+          if (this.isPreview) {
+            console.log(getContainerPropsValue(value, "content.is_show_dailog", 'Y'))
+            this.isShow = getContainerPropsValue(value, "content.is_show_dailog", 'Y') === 'N';
+            }else this.isShow = true;
+          }else{
+            this.handleCardBindClose();
+          }
+        } else {
+          if(res.receive_type==='auto') {
+            this.getAllCoupont('Y')
+          } else {
+            if(res.can_take === "Y"){
+            if (this.isPreview) {
+              console.log(getContainerPropsValue(value, "content.is_show_dailog", 'Y'))
+              this.isShow = getContainerPropsValue(value, "content.is_show_dailog", 'Y') === 'N';
+              }else this.isShow = true;
+            }else{
+              this.handleCardBindClose();
+            }
+          }
+        }
+      })
+    },
+
+    getDialogList() {
+      if(this.distribution_method === 'card_binded'){
+        this.p_getCouponList();
+      }else{
+        this.p_getDialogList();
+      }
+    },
+
+    getAllCoupont(is_auto='N') {
+      this.p_getAllDialogList(is_auto);
+    },
+
+    p_getAllDialogList(is_auto='N') {
+      //getAllCoupon
+      this.$xdShowLoading({});
+      jfbRootExec("getAllCoupon", {
+        vm: this,
+        data: {
+          distribution_method: this.distribution_method,
+          activity_id: this.activity_id,
+          is_auto: is_auto,
+          ...this.dispatchData
+        }
+      }).then(res => {
+        if (res.code === 400) {
+          if(is_auto==='Y') {
+            this.$xdHideLoading();
+            this.handleCardBindClose()
+            return
+          }
+          this.$xdHideLoading();
+          this.$xdAlert({
+            content: res.message,
+            zIndex: 3200,
+            time: 2000,
+            isClose: false,
+          });
+          setTimeout(()=>{
+            this.getDialogList();
+          },2000)          
+          return;
+        }
+        this.order_num = res.tmp_order_number;
+        setTimeout(()=>{
+          this.getResult(is_auto);
+        },1000)
+      }).catch((err) => {
+        console.log(err, "err");
+      });
+    },
+
+    handlePop() {
+      console.warn(`this.time${this.time * 60 + "分钟"}`);
+      storage.set(this.containerId, 1, this.time);
+      this.isShow = true;
+    },
+
+    onJfbLoad(options) {
+
+      //预览模式
+      if(this.isPreview) {
+        if(!this.is_preview_hide_dailog) this.getDialogList();
+        return;
+      }
+
+      //非绑卡组件与支付组件（直接触发）
+      if (!storage.get(this.containerId) &&
+        this.distribution_method !== "paid" &&
+        this.distribution_method !== "card_binded"
+      ){
+        this.getDialogList();
+      }
+      //支付跟绑卡是主动触发
+      if(this.distribution_method === 'card_binded'){
+        jfbRootFnExec(this, 'onCustomEvent')("baseConDialog@hasCon", this.containerId);
+      }
+    },
+    handleCardBindClose(){
+      this.isShow = false;
+      this.$bus.$emit("onCloseConDialog", this.containerId);
+    },
+
+    onJfbUpdate(data) {
+      storage.remove(this.containerId);
+      this.getDialogList();
+    },
+
+    onJfbShow(options) {
+      this.isShow=false
+      this.onJfbLoad(options);
+    },
+
+    handleToList() {
+      let otherParams = "";
+      try {
+        if(this.dispatchData && this.$xdUniHelper.checkVarType(this.dispatchData) === 'object') {
+          otherParams = this.$xdUniHelper.jsonToParams(this.dispatchData);
+        }
+      } catch (error) {}
+      let curCoup = this.list[this.currentIndex];
+      let linkUrl = this.list_url;
+      if(curCoup.show_url){
+        linkUrl = curCoup.show_url
+      }
+
+      this.$xdUniHelper.navigateTo({
+        url: `${linkUrl}?activity_id=${this.activity_id}&distribution_method=${this.distribution_method}&${otherParams}`,
+      });
+    },
+
+    handleClose() {
+      //切换下一张，没有下一张，关闭
+      if (this.currentIndex === (this.list.length - 1) || this.type === 2) {
+        this.isShow = false;
+        return;
+      }
+      this.currentIndex = this.currentIndex + 1;
+      this.currentImage = getServiceUrl(
+        this.list[this.currentIndex].app_activity_url
+      );
+      this.currentBtnImage = getServiceUrl(
+        this.list[this.currentIndex].app_activity_button
+      );
+      this.activity_id = this.list[this.currentIndex].activity_id;
+    },
+
+    handleChange(type) {
+      this.currentIndex = type === "left" ? this.currentIndex - 1 : this.currentIndex + 1;
+      //不小于0，不大于数组长度
+      this.currentIndex = Math.max(
+        0,
+        Math.min(this.currentIndex, this.list.length - 1)
+      );
+      this.currentImage = getServiceUrl(
+        this.list[this.currentIndex].app_activity_url
+      );
+      this.currentBtnImage = getServiceUrl(
+        this.list[this.currentIndex].app_activity_button
+      );
+      this.activity_id = this.list[this.currentIndex].activity_id;
+    },
+
+    onJfbCustomEvent({action, data}){
+      if(action === '@showBaseConDialog'){
+        this.dispatchData = data;
+        this.getDialogList();
+      }
+    }
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseConDialogLess.less";
+
+.jfb-base-con-dialog {
+  &__body {
+     &-pop {
+      min-height: 100rpx;
+      text-align: center;
+      vertical-align: middle;
+      color: #666;
+      font-size: unit(24, rpx);
+      line-height: 100rpx;
+    }
+    &-dialog {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 3000;
+
+      &-mask {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, 0.3);
+      }
+
+      &-content {
+        max-height: unit(1000, rpx);
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: flex;
+        flex-direction: column;
+        &-num {
+          margin: 0 auto;
+          background: rgba(255, 255, 255, 0.5);
+          border-radius: unit(40, rpx);
+          padding: unit(8, rpx) unit(24, rpx);
+          color: #fff;
+          font-size: unit(40, rpx);
+        }
+        &-close {
+          margin-top: 20rpx;
+          margin: 0 auto;
+        }
+        &-left {
+          background: rgba(255, 255, 255, 0.1);
+          padding: unit(40, rpx) unit(10, rpx);
+          color: #fff;
+          border-radius: unit(40, rpx);
+        }
+        &-right {
+          background: rgba(255, 255, 255, 0.1);
+          padding: unit(40, rpx) unit(10, rpx);
+          color: #fff;
+          border-radius: unit(40, rpx);
+        }
+        &-image {
+          min-width: unit(600, rpx);
+          min-height: unit(800, rpx);
+          height: unit(800, rpx);
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          margin: 20rpx;
+          position: relative;
+
+          & > image:first-child {
+            width: 100%;
+            height: 100%;
+          }
+
+          & > image:nth-child(2) {
+            width: unit(448, rpx);
+            height: unit(70, rpx);
+            position: absolute;
+            bottom: unit(100, rpx);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/JfbBaseConDialog/JfbBaseConDialogLess.less

@@ -0,0 +1,79 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-con-dialog {
+  box-sizing: border-box;
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx,&.editx:hover {
+    position: relative;
+    min-height: unit(100, rpx);
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
+
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-con-dialog {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/

package/src/components/JfbBaseConDialog/JfbBaseConDialogMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-con-dialog'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}