jufubao-base 1.0.232-beta3 → 1.0.232-beta4

package/src/components/JfbBaseConsumpCode/JfbBaseConsumpCode.vue

@@ -1,43 +1,108 @@
 <template>
-  <view
-    class="jfb-base-consump-code"
-    @click="handleEditxSelect"
-    :class="{ editx : isEditx && active }"
-  >
+  <view class="jfb-base-consump-code" @click="handleEditxSelect" :class="{ editx : isEditx && active }">
     <!--#ifdef H5-->
-    <view
-      class="jfb-base-consump-code__edit"
-      :class="{ editx : isEditx && active }"
-      v-if="isEditx && active"
-    >
+    <view class="jfb-base-consump-code__edit" :class="{ editx : isEditx && active }" v-if="isEditx && active">
       <view class="jfb-base-consump-code__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-consump-code__body">
-      <view>测试插件( {{containerId}} )</view>
+    <view class="jfb-base-consump-code__body" :style="{
+      minHeight: layoutInfo.bodyMinHeightRpx + 'rpx',
+      background: 'url(https://img.js.design/assets/img/678f560988986af5661c2876.png#a3be067970d2c78a56d08024581a9ca0)',
+      backgroundSize: '100% 100%'
+    }">
+      <view class="content-box">
+        <view class="logo-box">
+          <image src="https://img.js.design/assets/img/67e9ea4307c4c2e467435b30.jpeg#d0969ce63b2aef1069a03e984e9acd13"
+            class="logo"></image>
+        </view>
+        <view v-if="!showMask&&showDialog">
+          <view @click="handleToShop" class="shop">
+            <view>门店名称</view>
+            <XdFontIcon size="20" icon="iconxiangyou_xian"></XdFontIcon>
+          </view>
+          <image mode="aspectFit" class="bar-code"
+            src="http://www.expba.com/cgi-bin/GInfo.dll?MfcISAPICommand=BarCode&ccode=464564655&ih=60&ntype=10"></image>
+          <view class="bar-code-text">N328490214783094723</view>
+          <image mode="aspectFit" class="qrcode"
+            src="">
+          </image>
+          <view class="code-refresh">{{expiration_sec_str}}后自动更新</view>
+          <view class="vip">
+            <view class="vip-title">
+              <view class="vip-title-left">PLUS会员专享</view>
+              <view class="vip-title-right">
+                <span>8</span>折
+              </view>
+            </view>
+            <view class="vip-open" @click="handleToOpen">
+              <xd-font-icon color="#FCBF28" size="20" icon="iconjinhangzhong"></xd-font-icon>
+              <span>立即开通</span>
+              <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
+            </view>
+          </view>
+        </view>
+        <view class="mask-box" v-else>
+          <view class="mask">
+            <view class="mask-title">为了给您提供更好的服务需要获取您的位置信息</view>
+            <view class="mask-open">
+              PLUS会员专享 <span :style="{color:mainColor,marginLeft:'8rpx'}">8</span>折 <span @click="handleToOpen"
+                :style="{color:mainColor,marginLeft:'15rpx'}">立即开通</span>
+            </view>
+          </view>
+        </view>
+      </view>
     </view>
+    <XdDialog :show.sync="showDialog" :showClose="false" :showTitle="false">
+      <view class="dialog-title" slot="title">门店确认</view>
+      <view class="dialog-content">
+        <view>当前门店：<span :style="{color:mainColor}">xxxxxxx门店</span></view>
+        <view>请确认您是否在当前门店中</view>
+      </view>
+      <view class="dialog-btns" slot="btn">
+        <XdButton @click="handleToShop" bgColor="#EEEEEE" color="#888888" size="small" type="info">更换门店</XdButton>
+        <XdButton @click="handleConfirm" size="small" type="primary">确认</XdButton>
+      </view>
+    </XdDialog>
   </view>
 </template>
 
 <script>
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import XdDialog from "@/components/XdDailog/XdDailog";
+  import XdButton from "@/components/XdButton/XdButton";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseConsumpCodeMixin from "./JfbBaseConsumpCodeMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
+  import { mapState } from 'vuex';
+
   export default {
     name: "JfbBaseConsumpCode",
     components: {
-      XdFontIcon
+      XdFontIcon,
+      XdDialog,
+      XdButton
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseConsumpCodeMixin
     ],
     data() {
       return {
-
-        //todo
+        openPath: "",
+        shopPath: "",
+        successPath: "",
+        showDialog: false,
+        showMask: false,
+        shop_id: '',
+        secondTimer: null,
+        expiration_sec: '',
+        code_url: '',
+        statusTimer: null,
+        validTimer: null,
+        payChannels: [],
+        channel_provider_id: "",
+        options: {}
       }
     },
     watch: {
@@ -45,34 +110,343 @@
         if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) this.init(value)
       },
+      stateLocation(n, o) {
+        if (JSON.stringify(n) === JSON.stringify(o)) return;
+        this.onJfbLoad(this.options)
+      }
+    },
+    computed: {
+      ...mapState({
+        stateCity: state => state.cityLocation.city,
+        stateLocation: state => state.cityLocation.location || {},
+        brandInfo: state => state.brandInfo,
+      }),
+      expiration_sec_str() {
+        //秒数转 x分x秒
+        let second = this.expiration_sec;
+        if (second < 60) {
+          return second + "秒";
+        }
+        let min = parseInt(second / 60);
+        let sec = second % 60;
+        return `${min}分${sec}秒`;
+      },
     },
     created() {
       this.init(this.container);
-
-      //todo
     },
     methods: {
       onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
+        this.options = options
+        if (!this.isPreview) {
+          if (Object.keys(this.stateLocation).length === 0) {
+            this.showMask = true;
+            this.showDialog = false;
+            return
+          }
+        }
+        this.shop_id = options.shop_id;
+        if (this.shop_id) {
+          this.showDialog = false;
+          //todo 通过shop_id获取数据
+          this.p_getAsyncStep();
+          this.p_getListUserPayChannel();
+        } else {
+          this.showDialog = true;
+        }
       },
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
+        this.openPath = getContainerPropsValue(
+          container,
+          "content.openPath",
+          { value: "" }
+        ).value;
+        this.shopPath = getContainerPropsValue(
+          container,
+          "content.shopPath",
+          { value: "" }
+        ).value;
+        this.successPath = getContainerPropsValue(
+          container,
+          "content.successPath",
+          { value: "" }
+        ).value;
+      },
+      async p_getAsyncStep() {
+        await this.p_getQuickPayQRCode();
+        this.p_getQRCodeStatus();
+      },
+      p_getListUserPayChannel() {
+        const { pay_channels } = this.projectAttr;
+        jfbRootExec("getListUserPayChannel", {
+          vm: this,
+          data: {
+            providers: pay_channels && pay_channels.join(","),
+          },
+        }).then((res) => {
+          console.log("p_getListUserPayChannel", res);
+          this.payChannels = res.list;
+          this.channel_provider_id = res.list[0].channel_provider_id;
+        });
+      },
+      p_getQuickPayQRCode() {
+        return new Promise((resolve, reject) => {
+          // this.$xdShowLoading({});
+          jfbRootExec("getQuickPayQRCode", {
+            vm: this,
+            data: {
+              shop_id: this.shop_id,
+              temp_order_id: this.temp_order_id
+            }
+          }).then(res => {
+            // this.$xdHideLoading();
+            this.temp_order_id = res.temp_order_id;
+
+            let code_url = this.brandInfo['api_host'] + res.code_url;
+            if (this.isPreview) code_url = res.code_url;
+            this.code_url = code_url;
+            this.expiration_sec = res.expiration_sec;
+            clearInterval(this.secondTimer);
+            this.secondTimer = setInterval(() => {
+              this.expiration_sec--;
+              if (this.expiration_sec <= 0) {
+                clearInterval(this.secondTimer);
+                this.p_getQuickPayQRCode();
+              }
+            }, 1000);
+            resolve();
+          }).catch(err => {
+            console.error(err);
+            reject(err);
+          })
+        })
+      },
+      p_getQRCodeStatus() {
+        jfbRootExec("getQRCodeStatus", {
+          vm: this,
+          data: {
+            temp_order_id: this.temp_order_id,
+            shop_id: this.shop_id
+          }
+        }).then(res => {
+          //P处理中 Y成功 E 失败
+          if (res.status === 'P') {
+            if (!this.isPreview) {
+              if (this.statusTimer) clearTimeout(this.statusTimer);
+              this.statusTimer = setTimeout(() => {
+                this.p_getQRCodeStatus();
+              }, 2000);
+            }
+          } else if (res.status === 'Y') {
+            //订单下单有效时间 秒
+            this.orderSeconds = res.seconds;
+            if (this.orderSeconds > 0) {
+              this.validTimer = setInterval(() => {
+                this.orderSeconds--;
+                if (this.orderSeconds <= 0) {
+                  this.handlerOderFail();
+                }
+
+              }, 1000)
+            }
+            this.p_createOrder();
+          } else if (res.status === 'E') {
+            this.$xdAlert({
+              content: res.message,
+              time: 1500,
+              isClose: false,
+              zIndex: 5000
+            });
+          }
+        })
+      },
+      p_createOrder() {
+        jfbRootExec("batchUseCardCreated", {
+          vm: this,
+          data: {
+            temp_order_id: this.temp_order_id,
+            business_code: this.xnamespace,
+          }
+        }).then(res => {
+          this.request_order_id = res.request_order_id;
+          this.p_getOrderStatus();
+        }).catch(err => {
+          this.handlerOderFail();
+        })
+      },
+      p_getOrderStatus() {
+        jfbRootExec("getAsyncSubmitStatus", {
+          vm: this,
+          data: {
+            request_order_id: this.request_order_id
+          }
+        }).then(res => {
+          let { hand_status, hand_status_msg, order_id, pay_order_id, need_pay_price } = res;
 
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
+          if (hand_status === 'U') {
+            this.orderTimer = setTimeout(() => {
+              this.p_getOrderStatus();
+            }, 2000)
+          } else if (hand_status === 'S') {  //成功
+            if (parseFloat(need_pay_price) > 0) {//补差
+              this.handleThirdPay(pay_order_id, order_id);
+            } else {//订单成功
+              this.$xdUniHelper.redirectTo({
+                url: this.successPath + `?order_id=${order_id}`
+              })
+            }
+          } else if (hand_status === 'F') {
+            this.handlerOderFail();
+            this.$xdAlert({
+              content: hand_status_msg || '支付失败',
+              time: 3000,
+              isClose: false,
+              zIndex: 5000
+            });
+          }
+        })
+      },
+      openTemplatePay(paySignData, cb) {
+        const { timeStamp, ...otherData } = paySignData;
+        otherData["timestamp"] = timeStamp;
+        // #ifdef H5
+        this.jwxSDK.chooseWXPay({
+          ...otherData,
+          success: (res) => {
+            this.$xdLog.setARMSInfo({ options: this.options, res }, 'pay_success');
+            uni.showToast({
+              title: "支付成功",
+            });
+            cb(res);
+          },
+          cancel: () => {
+            this.onRefreshPage();
+            this.$xdLog.setARMSInfo(this.options, 'cancel_pay');
+            uni.showToast({
+              title: "取消支付",
+            });
+          },
+          fail: (error) => {
+            this.onRefreshPage();
+            if (typeof error === 'string') error = { error: error }
+            if (window['jwxJfbSDKParams']) error = Object.assign(error, paySignData, window['jwxJfbSDKParams'])
+            this.$xdLog.setARMSError(error)
+            uni.showToast({
+              title: "支付失败",
+            });
+          },
+        });
+        // #endif
+        // #ifdef MP
+        wx.requestPayment({
+          ...paySignData,
+          success: (res) => {
+            this.$xdLog.setARMSInfo({ options: this.options, res }, 'pay_success');
+            uni.showToast({
+              title: "支付成功",
+              icon: "none",
+            });
+            cb(res);
+          },
+          fail: (err) => {
+            this.onRefreshPage();
+            this.$xdLog.setARMSError({
+              options: this.options,
+              error: JSON.stringify(err)
+            });
+            uni.showToast({
+              title: "支付失败",
+              icon: "none",
+            });
+          },
+        });
+        // #endif
+      },
+      onRefreshPage() {
+        this.temp_order_id = "";
+        if (this.validTimer) clearInterval(this.validTimer)
+        this.p_getAsyncStep();
+      },
+      handleThirdPay(pay_order_id, main_order_id) {
+        let { login_providers = [] } = this.projectAttr;
+        let data = {
+          order_id: pay_order_id,
+          channel_provider_id: this.channel_provider_id,
+          login_providers: login_providers.join(","),
+        };
+        //设置支付成功页面地址
+        if (!this.$configProject.isPreview) {
+          data['pay_success_url'] = '';
+          // #ifdef H5
+          data['pay_success_url'] = `${window.location.protocol}//${window.location.host}/${this.projectAttr.deploy_dir}`;
+          // #endif
+          data['pay_success_url'] += this.successPath + `?order_id=${main_order_id}`;
+        }
 
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
+        jfbRootExec("setThirdPlace", {
+          vm: this,
+          data,
+        })
+          .then((res) => {
+            this.$xdHideLoading();
+            const { channel_data } = res;
+            const paySignData = JSON.parse(Base64.decode(channel_data));
+            this.openTemplatePay(paySignData, (ps) => {
+              jfbRootExec("updatePay", {
+                vm: this,
+                data: {
+                  main_order_id: main_order_id,
+                },
+              })
+                .then((res) => {
+                  this.$xdUniHelper.redirectTo({
+                    url: this.successPath + `?order_id=${main_order_id}`
+                  });
+                })
+                .catch(error => {
+                  this.$xdLog.setARMSCustomError('update_loading_fail', { options: this.options, error });
+                });
+            })
+          });
+      },
+      //订单失效
+      handlerOderFail() {
+        console.warn("handlerOderFail");
+        this.temp_order_id = "";
+        clearInterval(this.validTimer);
+        clearTimeout(this.orderTimer);
+        clearInterval(this.secondTimer);
+      },
+      handleToShop() {
+        this.$xdUniHelper.navigateTo({
+          url: this.shopPath
+        });
+      },
+      handleToOpen() {
+        this.$xdUniHelper.navigateTo({
+          url: this.openPath
+        });
+      },
+      handleConfirm() {
+        //todo 经纬度获取第一个门店
+        this.showDialog = false;
+        this.p_getAsyncStep();
+      },
+      onJfbUnload(options) {
+        console.log('event.onJfbUnload', options)
+        if(this.secondTimer) clearInterval(this.secondTimer);
+        if(this.statusTimer) clearTimeout(this.statusTimer);
+        if(this.orderTimer) clearTimeout(this.orderTimer);
+      },
+      onJfbBack(options) {
+        console.log('event.onJfbBack', options)
+        if(this.secondTimer) clearInterval(this.secondTimer);
+        if(this.statusTimer) clearTimeout(this.statusTimer);
+        if(this.orderTimer) clearTimeout(this.orderTimer);
       },
       onJfbScroll(options) {
         console.log('event.onJfbScroll', options)
@@ -86,9 +460,6 @@
       onJfbHide(options) {
         console.log('event.onJfbHide', options)
       },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
       onJfbUpdate(...data) {
         console.log('event.onJfbUpdate', data)
       },
@@ -104,8 +475,183 @@
   @import "./JfbBaseConsumpCodeLess.less";
 
   .jfb-base-consump-code {
-    &__body{
+    &__body {
+      .content-box {
+        margin: 180rpx 30rpx 0 30rpx;
+        background-color: #fff;
+        padding: 90rpx 40rpx 60rpx 40rpx;
+        border-radius: 24rpx;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .logo-box {
+          width: 130rpx;
+          height: 130rpx;
+          background-color: #fff;
+          position: absolute;
+          top: -65rpx;
+          left: 50%;
+          transform: translate(-50%, 0);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 50%;
+
+          .logo {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 50%;
+          }
+        }
+
+      }
+
+      .shop {
+        border: 2rpx solid #E6E6E6;
+        padding: 32rpx 40rpx;
+        border-radius: 24rpx;
+        color: #fff;
+        font-size: 28rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 520rpx;
+        background: linear-gradient(135deg, #2D2824 0%, #625344 100%);
+        ;
+      }
+
+      .bar-code {
+        height: 120rpx;
+        width: 600rpx;
+        margin: 40rpx 0 16rpx 0;
+
+        &-text {
+          color: #999999;
+          font-size: 24rpx;
+          text-align: center;
+        }
+      }
+
+      .qrcode {
+        width: 300rpx;
+        height: 300rpx;
+        margin: 50rpx 0 20rpx 0;
+      }
+
+      .code-refresh {
+        color: #999;
+        font-size: 24rpx;
+        margin-bottom: 40rpx;
+        border-bottom: 2rpx dashed #E5E5E5;
+        width: 95%;
+        text-align: center;
+        padding-bottom: 40rpx;
+      }
+
+      .vip {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        &-title {
+          display: flex;
+          align-items: center;
+          padding-left: 20rpx;
+
+          &-left {
+            background: linear-gradient(90deg, #665646 0%, #473D34 52.05%, #2B2623 100%);
+            color: #EFD5C3;
+            font-size: 24rpx;
+            border-radius: 74rpx 0rpx 0rpx 74rpx;
+            padding: 20rpx 20rpx 20rpx 24rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
+          &-right {
+            background: linear-gradient(270deg, #FCD6B8 0%, #FCEDD7 100%);
+            border-radius: 0px 80rpx 80rpx 0px;
+            padding: 6rpx 36rpx;
+            font-size: 24rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &>span {
+              color: #D10300;
+              font-weight: 700;
+              font-size: 48rpx;
+              margin-right: 5rpx;
+            }
+          }
+        }
+
+        &-open {
+          display: flex;
+          color: #86541E;
+          font-size: 28rpx;
+          align-items: center;
+
+          &>span {
+            margin: 0 8rpx;
+          }
+        }
+      }
+
+      .mask-box {
+        margin: 0 auto;
+
+        .mask {
+          width: 660rpx;
+          height: 640rpx;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          background: url('https://img-b.jufubao.cn/uploads/20250407/11e6e600ab4395c44d42489bc7b25034.jpg') no-repeat;
+          background-size: contain;
+
+          &-title {
+            font-size: 26rpx;
+            color: #666666;
+            margin-bottom: 48rpx;
+            width: 300rpx;
+            text-align: center;
+          }
+
+          &-open {
+            font-size: 28rpx;
+          }
+        }
+      }
+    }
+
+    .dialog-title {
+      color: #333;
+      font-size: 32rpx;
+    }
+
+    .dialog-content {
+      padding-bottom: 30rpx;
+      border-bottom: 2rpx dashed #E5E5E5;
+      font-size: 26rpx;
+      color: #999999;
+
+      &>view:first-child {
+        margin-bottom: 10rpx;
+      }
+    }
+
+    .dialog-btns {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
 
     }
   }
-</style>
+</style>