jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseConPhone/JfbBaseConPhone.vue

@@ -0,0 +1,707 @@
+<template>
+  <view
+    class="jfb-base-con-phone"
+    @click="handleEditxSelect"
+    :class="{ editx: isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-con-phone__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-con-phone__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-con-phone__body" v-if="done">
+      <view v-if="has_times === 'Y'">
+        <view
+          class="jfb-base-con-phone__body-wrap"
+          :style="{
+            height: topHeight + 'rpx',
+            width: topWidth + 'rpx',
+            backgroundImage: `url(${background})`,
+            backgroundSize: '100% 100%',
+          }"
+        >
+          <view v-if="showCode" class="jfb-base-con-phone__body-wrap-input">
+            <view>
+              <input
+                @input="filterSpaces"
+                v-model="phoneNumber"
+                placeholder="请输入手机号"
+                type="text"
+              />
+            </view>
+            <view
+              class="jfb-base-con-phone__body-wrap-input-code"
+              style="margin-bottom: 54rpx"
+            >
+              <input
+                v-model="valid_code"
+                placeholder="请输入验证码"
+                type="text"
+              />
+              <xd-button
+                :disabled="disabled"
+                class="jfb-base-con-phone__body-wrap-input-code-btn"
+                type="primary"
+                :bg-color="mainColor"
+                size="small"
+                @click="handleSendCode"
+              >{{ message }}</xd-button>
+            </view>
+            <xd-button
+              type="primary"
+              :bg-color="mainColor"
+              width="360rpx"
+              radius="20rpx"
+              size="small"
+              :disabled="!phoneNumber || !valid_code"
+              @click="handleConfirmCheck"
+            >确认领取</xd-button>
+          </view>
+          <view v-else class="jfb-base-con-phone__body-wrap-input">
+            <view class="jfb-base-con-phone__body-wrap-input-phone">
+              <view class="jfb-base-con-phone__body-wrap-input-phone-change">
+                <view>当前登录手机号</view>
+                <xd-button
+                  style="margin: 0"
+                  type="primary"
+                  :bg-color="mainColor"
+                  size="small"
+                  @click="showCode = true"
+                >切换手机号</xd-button>
+              </view>
+              <view>{{ showOhoneNumber }}</view>
+            </view>
+            <xd-button
+              type="primary"
+              :bg-color="mainColor"
+              width="360rpx"
+              radius="20rpx"
+              size="medium"
+              @click="handleConfirmCheck"
+            >直接领取</xd-button>
+          </view>
+        </view>
+        <view
+          :style="{
+            height: bottomHeight + 'rpx',
+            width: bottomWidth + 'rpx',
+            backgroundImage: `url(${used_background})`,
+            backgroundSize: '100% 100%',
+          }"
+        >
+          <view
+            v-if="showBtn === 'Y'"
+            class="jfb-base-con-phone__body-wrap-btn"
+          >
+            <XdButton
+              size="medium"
+              type="primary"
+              :bg-color="mainColor"
+              radius="20rpx"
+              @click="handleTo(btnOneUrl)"
+              >{{ btnOneName }}</XdButton
+            >
+            <XdButton
+              size="medium"
+              type="primary"
+              :bg-color="mainColor"
+              radius="20rpx"
+              @click="handleTo(btnTwoUrl)"
+              >{{ btnTwoName }}</XdButton
+            >
+          </view>
+        </view>
+      </view>
+      <view
+        :style="{height: layoutInfo.bodyMinHeightRpx + 'rpx',}"
+        v-else
+        class="empty_data"
+      >
+        <image :src="emptyBg"></image>
+        <text>{{ errmessage }}</text>
+      </view>
+      <!--签名-->
+      <xd-dailog :show.sync="dialogShow" title="签名" class="my_dialog">
+        <view class="dialog_head">
+          <view class="h_main">请签名</view>
+          <view class="h_sub">请务必由本人签收，字迹工整</view>
+        </view>
+        <view class="sign_box">
+          <xd-signature ref="signatureRef" v-if="showSignatureRef"></xd-signature>
+        </view>
+        <view slot="btn" class="btn_wrap">
+          <xd-button style="width: 220rpx;" @click="clearSign">重写</xd-button>
+          <xd-button style="width: 220rpx;margin-left: 60rpx;" type="primary" @click="submitSign">确定</xd-button>
+        </view>
+      </xd-dailog>
+      <!--签名-->
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseConPhoneMixin from "./JfbBaseConPhoneMixin";
+import { getContainerPropsValue, getImageInfo } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { mapState } from "vuex";
+import colorCardMixins from "@/mixins/colorCardMixins";
+import getServiceUrl from "@/common/getServiceUrl";
+import XdDailog from "@/components/XdDailog/XdDailog"
+import XdSignature from "@/components/XdSignature/XdSignature"
+
+export default {
+  name: "JfbBaseConPhone",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdDailog,
+    XdSignature
+  },
+  computed: {
+    ...mapState(["pageBusinessCode"]),
+    emptyBg() {
+      return this.getNoData();
+    },
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseConPhoneMixin, colorCardMixins],
+  data() {
+    return {
+      showCode: true,
+      phone_signature:'N', //是否需要签名
+      phone_signature_url: '', //签名url地址
+      phoneNumber: "", //手机号
+      valid_code: "", //验证码
+      btnOneName: "",
+      btnOneUrl: "",
+      btnTwoName: "",
+      btnTwoUrl: "",
+      message: "发送验证码",
+      countdownTimer: null,
+      timeRemaining: 120,
+      disabled: false,
+      background: "",
+      method: "entry",
+      options: {},
+      activity_id: "",
+      done: false,
+      has_times: "N",
+      errmessage: "",
+      showOhoneNumber: "", //仅用于展示
+      order_num: null,
+      maxTime: 5, //最长轮询2的N次方（秒）
+      date: 2, //时间底数
+      time: 0, //时间幂指数
+      timeer: null,
+      topHeight: "",
+      topWidth: "750",
+      used_background: "",
+      bottomHeight: "",
+      bottomWidth: "750",
+      showBtn: "N",
+
+      //签名
+      dialogShow: false,
+      showSignatureRef: false,
+
+    };
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+  },
+  created() {
+    console.log(this.layoutInfo, "layoutInfo");
+    this.init(this.container);
+  },
+  destroyed() {
+    if (this.timeer) {
+      clearTimeout(this.timeer);
+    }
+  },
+  methods: {
+    async onJfbLoad(options) {
+      let res = await jfbRootExec("getUserPhone", {
+        vm: this,
+        data: {},
+      });
+      //返回信息设置
+      this.showOhoneNumber = res.phone_number;
+      if (this.showOhoneNumber) {
+        this.showCode = false;
+      }
+
+      //参数设置
+      this.options = options;
+      this.activity_id = options.activity_id;
+      this.method = options.distribution_method
+        ? options.distribution_method
+        : "phone";
+      await this.getList();
+    },
+
+    //==签名==========
+    clearSign(){
+      this.$refs.signatureRef.clear()
+    },
+    submitSign(){
+      this.$refs.signatureRef.canvasToTempFilePath({
+        success: async (res) => {
+          let url = res.tempFilePath
+          if(!res.isEmpty){
+            //上传签名图片
+            this.$xdShowLoading({});
+            this.phone_signature_url = await this.doSubmitSign(url);
+            this.$xdHideLoading();
+            this.dialogShow = false;
+            this.handleConfirm();
+          }else{
+            uni.showToast({
+              title: "签名不能为空",
+              icon: "none"
+            })
+          }
+        }
+      })
+    },
+    doSubmitSign(url){
+      let fileName = "sign.png";
+      let file = null;
+      // #ifdef H5
+      file = this.base64ToFile(url,fileName);
+      // #endif
+      return new Promise((resolve,reject) => {
+        jfbRootExec("getConOssSign", {
+          vm: this,
+          data: { name: fileName }
+        }).then(res => {
+          console.log(res);
+          let OSSAccessKeyId = res['id']
+          let cdnUrl = res['cdn_url']
+          delete res['id']
+          delete res['cdn_url']
+          // #ifdef H5
+          uni.uploadFile({
+            url: res.action,
+            file: file,
+            name: 'file',
+            formData: {
+              ...res,
+              OSSAccessKeyId: OSSAccessKeyId,
+              name: fileName,
+              cdnUrl: cdnUrl,
+              success_action_status: 200
+            },
+            success: (r) => {
+              resolve(`/${res.key}`);
+            },
+            fail:(err)=>{
+              resolve('');
+              console.error(err)
+            }
+          });
+          // #endif
+          // #ifdef MP-WEIXIN
+          wx.uploadFile({
+            url: res.action,
+            filePath: url,
+            name: 'file',
+            formData: {
+              ...res,
+              OSSAccessKeyId: OSSAccessKeyId,
+              name: fileName,
+              cdnUrl: cdnUrl,
+              success_action_status: 200
+            },
+            success: (res) => {
+              resolve(`/${res.key}`);
+            },
+            fail:(err)=>{
+              console.error(err)
+            }
+          });
+          // #endif
+        }).catch(err => {
+          console.error(err)
+          reject();
+        })
+      })
+    },
+    base64ToFile(base64String, filename){
+      var arr = base64String.split(',');
+      var mime = arr[0].match(/:(.*?);/)[1];
+      var bstr = atob(arr[1]);
+      var n = bstr.length;
+      var u8arr = new Uint8Array(n);
+      while(n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], filename, {type:mime});
+    },
+    //==签名==========
+    filterSpaces(event) {
+      // 使用replace方法去除用户输入的空格
+      let value = event.target.value.replace(/\s+/g, "");
+      // 更新数据以移除空格
+      this.phoneNumber = value;
+      // 将处理后的值反映到视图
+      event.target.value = value;
+    },
+    validatePhoneNumber(phoneNumber) {
+      // 定义手机号正则表达式
+      const regex = /^1[3-9]\d{9}$/;
+
+      // 检查输入的手机号是否符合格式
+      return !!phoneNumber.match(regex);
+    },
+    getList() {
+      jfbRootExec("getCouponPhoneList", {
+        vm: this,
+        data: {
+          ...this.options,
+          distribution_method: this.method,
+          namespace: this.pageBusinessCode,
+          activity_id: this.activity_id,
+        },
+      })
+        .then(async (res) => {
+          console.log(res, "res");
+          this.has_times = res.has_times;
+          this.showBtn = res.phone_button;
+          this.btnOneName = res.button_name_one;
+          this.btnTwoName = res.button_name_two;
+          this.btnOneUrl = res.button_url_one;
+          this.btnTwoUrl = res.button_url_two;
+          this.phone_signature =  res.phone_signature || 'N';
+          let image = await getImageInfo(getServiceUrl(res.background));
+          let image1 = await getImageInfo(getServiceUrl(res.used_background));
+          console.log({ ...image }, "imageimage");
+          this.topHeight = image.imgHeight / this.$rpxNum;
+          this.topWidth = "100%";
+          this.bottomHeight = image1.imgHeight / this.$rpxNum;
+          this.bottomWidth = "100%";
+          this.background = getServiceUrl(res.background);
+          this.used_background = getServiceUrl(res.used_background);
+          this.errmessage = res.message;
+          this.done = true;
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {},
+    handleTo(url) {
+      this.$xdUniHelper.navigateTo({
+        url: url,
+      });
+    },
+    handleSendCode() {
+      if (this.phoneNumber.length < 11) {
+        uni.showToast({
+          title: "请输入11位手机号",
+          icon: "none",
+        });
+        return;
+      }
+      if (!this.validatePhoneNumber(this.phoneNumber)) {
+        uni.showToast({
+          title: "手机号格式不正确",
+          icon: "none",
+        });
+        return;
+      }
+      // 发送验证码的异步操作
+      uni.showToast({
+        title: "发送中",
+        icon: "loading",
+      });
+      jfbRootExec("sendMsgConPhone", {
+        vm: this,
+        data: {
+          phone_number: this.phoneNumber,
+          biz_name: "login",
+        },
+      }).then((res) => {
+        this.startCountdown();
+      });
+    },
+    startCountdown() {
+      // 设置剩余时间
+      this.timeRemaining = 120;
+      // 设置定时器，每秒执行一次
+      this.countdownTimer = setInterval(() => {
+        // 每秒减少1
+        this.timeRemaining--;
+        // 更新显示
+        this.message = `${this.timeRemaining}s`;
+        // 禁用按钮
+        this.disabled = true;
+        // 如果时间小于等于0，则重新开始
+        if (this.timeRemaining <= 0) {
+          this.message = "重新发送";
+          this.disabled = false;
+          // 清除定时器
+          clearInterval(this.countdownTimer);
+          // 重新设置时间
+          this.timeRemaining = 120;
+        }
+      }, 1000);
+    },
+    handleConfirmCheck(){
+      //不需要签名逻辑
+      if(this.phone_signature === 'N') {
+        this.handleConfirm();
+        return
+      }
+      //开启签名功能
+      this.dialogShow = true;
+      this.showSignatureRef  = true;
+
+    },
+    handleConfirm() {
+      let data = {
+        ...this.options,
+        distribution_method: this.method,
+        namespace: this.pageBusinessCode,
+        activity_id: this.activity_id,
+        phone: this.showCode ? this.phoneNumber : null,
+        valid_code: this.showCode ? this.valid_code : null,
+        biz_name: "login",
+      }
+      if(this.phone_signature === 'Y') data['phone_signature'] = this.phone_signature_url;
+      this.$xdShowLoading({});
+      jfbRootExec("getAllCouponPhone", {vm: this, data: data})
+        .then((res) => {
+          //失败状态
+          if (res.code === 400) {
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: res.message,
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            this.getList();
+            return;
+          }
+
+          //成功处理
+          this.order_num = res.tmp_order_number;
+          setTimeout(() => {
+            this.getResult();
+          }, 1000);
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+    getResult() {
+      jfbRootExec("getCouponPhoneResult", {
+        vm: this,
+        data: {
+          ...this.options,
+          tmp_order_number: this.order_num,
+        },
+      })
+        .then((res) => {
+          if (res.status_type === "success") {
+            this.order_num = null;
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: "领取成功",
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            this.getList();
+            if (this.timeer) {
+              this.time = 0;
+              clearTimeout(this.timeer);
+            }
+            return;
+          }
+          if (res.status_type === "error") {
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: res.message,
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            if (res.code == 400) {
+              this.getList();
+            }
+            if (this.timeer) {
+              this.time = 0;
+              clearTimeout(this.timeer);
+            }
+            return;
+          }
+
+          this.timeer = setTimeout(() => {
+            this.getResult();
+            if (this.time > 5) {
+              this.$xdLog.setARMSInfo(
+                { message: "领取中" },
+                `pay_${res.status_type}`
+              );
+            }
+            this.time++;
+          }, Math.pow(this.date, this.time > this.maxTime ? this.maxTime : this.time) * 1000);
+        })
+        .catch((err) => {
+          this.$xdHideLoading();
+          console.log(err, "err");
+        });
+    },
+    onJfbShow() {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      this.time = 0;
+      if (this.order_num) this.getResult();
+    },
+
+    onJfbUnload() {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+    },
+
+    onJfbBack(options) {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      if (this.$configProject.isPreview) return;
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseConPhoneLess.less";
+
+.jfb-base-con-phone {
+  &__body {
+    .empty_data {
+      text-align: center;
+      color: #999999;
+      font-size: 28rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      & > image {
+        width: unit(400, rpx);
+        height: unit(400, rpx);
+      }
+    }
+    &-wrap {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-direction: column;
+      &-input {
+        border-radius: 40rpx;
+        background: rgba(255, 255, 255, 0.5);
+        padding: 70rpx 60rpx;
+        position: relative;
+        bottom: 120rpx;
+        input {
+          margin-bottom: 26rpx;
+          font-size: 28rpx;
+          background: #fff;
+          border-radius: 16rpx;
+          padding: 30rpx;
+          width: 540rpx;
+        }
+        &-code {
+          position: relative;
+          &-btn {
+            position: absolute;
+            right: 10rpx;
+            top: 20rpx;
+          }
+        }
+        &-phone {
+          padding: 30rpx;
+          width: 540rpx;
+          background: #fff;
+          border-radius: 16rpx;
+          margin-bottom: 32rpx;
+          & > view:nth-child(2) {
+            border-radius: 40rpx;
+            background: #f2f2f2;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 16rpx 120rpx 16rpx 120rpx;
+            margin-top: 30rpx;
+          }
+          &-change {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            & > view:first-child {
+              color: #999999;
+              font-size: 28rpx;
+            }
+          }
+        }
+      }
+      &-btn {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        width: 750rpx;
+        padding-top: 40rpx;
+      }
+    }
+  }
+
+  .my_dialog{
+    /deep/ .xd-dailog__body-content-box{
+      padding: 0;
+    }
+    .dialog_head{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 48rpx 0;
+
+      .h_main{
+        font-size: 36rpx;
+        color: #333333;
+        font-weight: 500;
+      }
+      .h_sub{
+        font-size: 24rpx;
+        color: #808080;
+        font-weight: 400;
+      }
+    }
+    .sign_box{
+      width: 600rpx;
+      height: 460rpx;
+      background-color: #F2F2F2;
+    }
+    .btn_wrap{
+      display: flex;
+    }
+  }
+}
+</style>