jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBasePay/JfbBasePay.vue

@@ -0,0 +1,642 @@
+<template>
+  <view
+    class="jfb-base-pay"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-pay__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-pay__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-pay__body">
+      <view>
+        <view class="column-group">
+          <view class="column-item" style="margin-bottom: 5rpx">
+            <view class="column_label"> 订单总额 </view>
+            <view class="column_value text-gray">
+              <xd-unit
+                :price="payInfo.total_amount"
+                :isOld="false"
+                :font-size="28"
+                :icon-size="0.28"
+              ></xd-unit>
+            </view>
+          </view>
+          <view v-if="cardList.length" class="column-item" style="padding-bottom: 0;">
+            <view class="column_label">
+              我的票券
+              <view class="label_sub">（已使用{{ cardList.length }}张票券）</view>
+            </view>
+            <view class="column_value">
+              <!-- <xd-button width="220rpx" radius="60rpx" type="primary" size="small" @click="xdDownDrawer=true">使用新票券</xd-button> -->
+              <xd-unit
+                :price="payInfo.card_amount"
+                :isOld="false"
+                :font-size="28"
+                :icon-size="0.28"
+              ></xd-unit>
+            </view>
+          </view>
+        </view>
+        <view class="ticket_list" v-if="cardList.length">
+          <view
+            :style="{
+              backgroundColor:jfbPayBgColor
+            }"
+            class="ticket_item"
+            v-for="ticket in cardList"
+            :key="ticket.card_number"
+          >
+            <view class="_header">
+              <view class="flex align-center">
+                <view class="margin-right">
+                  <xd-font-icon
+                    icon="iconkaquan"
+                    color="#ffc65d"
+                    size="32"
+                  ></xd-font-icon>
+                </view>
+                <text> {{ ticket.card_type_name }}</text>
+              </view>
+              <!-- <xd-radio size="mini" @change="flat => handlerTicketSelect(flat, ticket.card_number)" :value="checkedCards.includes(ticket.card_number)"></xd-radio> -->
+            </view>
+            <view class="_cont">
+              <view>ID：{{ ticket.card_number }}</view>
+              <view>有效期至：{{ ticket.end_time }}</view>
+            </view>
+            <view class="_footer" :style="{borderTop:'1px solid ' + borderColor }">
+              <view class="_item">
+                <text>剩余：</text>
+                <xd-unit
+                  :price="ticket.card_point"
+                  :isOld="false"
+                  :font-size="28"
+                  :icon-size="0.28"
+                  :unit="ticket.unit"
+                ></xd-unit
+              ></view>
+              <view v-if="ticket.use_card_point" class="_item text-primary">
+                <text>使用：</text>
+                <xd-unit
+                  :price="ticket.use_card_point"
+                  :isOld="false"
+                  :font-size="28"
+                  :icon-size="0.28"
+                  :unit="ticket.unit"
+                ></xd-unit>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="remain_pay" v-if="payInfo.channel_amount > 0">
+        <view style="border-bottom: 2rpx solid #eee;" class="column-group">
+          <view class="column-item" style="padding: 30rpx 60rpx">
+            <view class="column_label">仍需扣点<text class="label_sub">（可使用多张票券点数）</text></view>
+            <view class="column_value text-primary">
+              <xd-unit
+                :price="payInfo.channel_amount"
+                :isOld="false"
+                :font-size="28"
+                :icon-size="0.28"
+              ></xd-unit>
+            </view>
+          </view>
+        </view>
+        <view class="remain_header">
+          <view>选择以下补差方式</view>
+          <view class="flex align-center text-primary">
+            <view class="margin-right">继续补差</view>
+            <xd-unit
+              :price="payInfo.channel_amount"
+              :is-show-icon="false"
+              unit="元"
+              :isOld="false"
+              :font-size="24"
+              :icon-size="0.3"
+            ></xd-unit>
+          </view>
+        </view>
+        <view class="pay_list">
+          <view
+            v-for="item in payChannels"
+            :key="item.channel_provider_id"
+            class="pay_item"
+          >
+            <view class="icon">
+              <image mode="scaleToFill" :src="item['channel_logo']" style="height:64rpx; width: 64rpx" />
+            </view>
+            <view class="pay_name">{{ item.channel_provider_name }}</view>
+            <xd-radio
+              @change="(flat) => handlerPayCheck(item.channel_provider_id, flat)"
+              :value="channel_provider_id === item.channel_provider_id"
+              size="mini"
+            ></xd-radio>
+          </view>
+        </view>
+      </view>
+      <view class="bottom_btn-mask"></view>
+      <view v-if="is_can_pay==='Y'" class="bottom_btn" :style="prod_bottom">
+        <xd-button
+          width="360rpx"
+          type="primary"
+          radius="50rpx"
+          @click="doThirdPay"
+        >确认</xd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBasePayMixin from "./JfbBasePayMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdButton from "@/components/XdButton/XdButton";
+import XdForm from "@/components/XdForm/XdForm";
+import XdFormItem from "@/components/XdFormItem/XdFormItem";
+import XdFormInput from "@/components/XdFormInput/XdFormInput";
+import XdRadio from "@/components/XdRadio/XdRadio";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import StyleForm from "@/utils/StyleForm";
+import {isWechat,isWechatTools} from "@/utils/xd.base";
+import color from "color";
+const Color = require('color');
+let styleForm = new StyleForm({bgColor: '#fafafa'}, getContainerPropsValue, 'pay', true);
+
+export default {
+  name: "JfbBasePay",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdForm,
+    XdFormItem,
+    XdFormInput,
+    XdRadio,
+    XdUnit,
+  },
+  mixins: [JfbBasePayMixin, componentsMixins, extsMixins],
+  data() {
+    return {
+      selfMask: true,
+      payChannels: [],
+      channel_provider_id: "",
+      cardList: [], //展示
+      needPayPrice: 1000,
+      type: "",
+
+      is_can_pay: "Y",
+      can_pay_message: "",
+      order_id: "",
+      main_order_id: "",
+      total_price: "",
+      jwxSDK: null,
+      payInfo: {
+        total_amount: 0,
+        channel_amount: 0,
+        card_amount: 0,
+      },
+      //面板
+      paySuccessPath: "", //支付成功
+      rechargeSuccessPath: "", //充值成功
+      ...styleForm.getDataItem(),
+      borderColor:'rgba(0,0,0,0)',
+      options:{}
+    };
+  },
+  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 });
+    },
+    getSuccessUrl(){
+      let url = this.paySuccessPath;
+      if(this.type === 'recharge'||this.type==='delay') {
+        url = this.rechargeSuccessPath || url;
+      }
+      return url
+    },
+    ...styleForm.getComputedItem(),
+  },
+  created() {
+    this.init(this.container);
+
+    // #ifdef H5
+    if (!this.$configProject.isPreview && (isWechat() || isWechatTools())){
+      this.p_getH5WxAuthorize()
+    }
+    // #endif
+  },
+  methods: {
+    onJfbLoad(options) {
+      this.options = options
+      this.order_id = options.order_id;
+      this.main_order_id = options.main_order_id;
+      this.type = options.type;
+      this.p_getPayOrderDetail();
+      this.p_getListUserPayChannel();
+
+      //充值延期不进行检查订单状态
+      if((this.type !== 'recharge'&&this.type!=='delay')) {
+        this.p_getBaseOrderDetail();
+      }
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.paySuccessPath = getContainerPropsValue(
+        container,
+        "content.pay_success_path",
+        { value: "" }
+      ).value;
+      this.rechargeSuccessPath = getContainerPropsValue(
+        container,
+        "content.rechargeSuccessPath",
+        { value: "" }
+      ).value;
+      styleForm.getInitItem(this, container);
+      this.borderColor = color(this.jfbPayBgColor).lighten(0.5).hex();
+    },
+    getTimeFormat(time) {
+      let date = null;
+      if (time == +time) {
+        if ((time + "").length <= 10) date = new Date(+time * 1000);
+        else date = new Date(+time);
+        return (
+          date.getFullYear() +
+          "-" +
+          (date.getMonth() + 1) +
+          "-" +
+          date.getDate()
+        );
+      }
+      return time;
+    },
+    p_getBaseOrderDetail(){
+      return new Promise((resolve, reject) => {
+        jfbRootExec("getBaseOrderStatus", {
+          vm: this,
+          data: {
+            main_order_id: this.main_order_id,
+          }
+        }).then(res => {
+          let { is_can_pay, can_pay_message } = res.can_pay_info
+          this.is_can_pay = is_can_pay;
+          this.can_pay_message = can_pay_message;
+          if(is_can_pay !== "Y"){
+            uni.showToast({
+              title: can_pay_message,
+              icon: 'none',
+              duration: 3000
+            });
+            reject();
+            // this.$xdNavigateBack()
+          }
+          resolve();
+        }).catch(err => {
+          reject();
+        })
+      })
+    },
+    p_getPayOrderDetail() {
+      jfbRootExec("getPayOrderDetail", {
+        vm: this,
+        data: {
+          order_id: this.order_id,
+        },
+      }).then((res) => {
+        this.payInfo = res;
+        this.cardList = res.order_card_data.map((item) => {
+          item["end_time"] = this.getTimeFormat(item.end_time);
+          return item;
+        });
+      });
+    },
+    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;
+      });
+    },
+    p_getH5WxAuthorize() {
+      jfbRootExec("getH5WxAuthorize", {
+        vm: this,
+        data: {jsApiList: ["chooseWXPay"],},
+      })
+        .then((res) => {
+          this.jwxSDK = res.jwxSDK;
+        })
+        .catch(error => {
+          this.$xdAlert({
+            content: error,
+          });
+        });
+    },
+
+    //第三方支付
+    async doThirdPay() {
+      if (this.$configProject.isPreview) return;
+
+      if((this.type !== 'recharge'&&this.type!=='delay')) {
+        await this.p_getBaseOrderDetail();
+      }
+      const {channel_provider_id, order_id, payInfo} = this;
+      let {login_providers = []} = this.projectAttr;
+      console.log(this.projectAttr)
+      if (+payInfo.channel_amount > 0 && !this.channel_provider_id) {
+        uni.showToast({
+          title: "请选择支付方式",
+          icon: "none",
+        });
+        return false;
+      }
+      this.$xdShowLoading({});
+
+      let data = {
+        order_id,
+        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.getSuccessUrl + `?order_id=${this.main_order_id}`;
+      }
+      console.warn(`setThirdPlace.data:${data}`);
+      jfbRootExec("setThirdPlace", {
+        vm: this,
+        data,
+      })
+        .then((res) => {
+          this.$xdHideLoading();
+          // #ifdef H5
+          if(res && res.payment_type === 'url') {
+            console.warn(`setThirdPlace.type:url`);
+            console.warn(`setThirdPlace.res.${res.payment_url}`);
+            window.location.replace(res.payment_url);
+            return
+          }
+          // #endif
+          console.warn(`setThirdPlace.type:slef`);
+          const { channel_data } = res;
+          const paySignData = JSON.parse(Base64.decode(channel_data));
+          this.openTemplatePay(paySignData, (ps) => {
+            jfbRootExec("updatePay", {
+              vm: this,
+              data: {
+                main_order_id: this.main_order_id,
+              },
+            })
+              .then((res) => {
+                if(this.type) {
+                  this.$xdUniHelper.redirectTo({
+                    url: this.getSuccessUrl + `?order_id=${this.main_order_id}&type=${this.type}`
+                  });
+                } else {
+                  this.$xdUniHelper.redirectTo({
+                    url: this.getSuccessUrl + `?order_id=${this.main_order_id}`
+                  });
+                }
+              })
+              .catch(error=>{
+                this.$xdLog.setARMSCustomError('update_loading_fail', {options: this.options, error});
+							});
+          });
+        })
+        .catch((err) => this.$xdHideLoading());
+    },
+    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');
+          console.log("pay success", res);
+          uni.showToast({
+            title: "支付成功",
+          });
+          cb(res);
+        },
+        cancel: () => {
+          this.$xdLog.setARMSInfo(this.options, 'cancel_pay');
+          uni.showToast({
+            title: "取消支付",
+          });
+        },
+        fail: (error) => {
+          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.$xdLog.setARMSError({
+            options: this.options,
+            error: JSON.stringify(err)
+          });
+          uni.showToast({
+            title: "支付失败",
+            icon: "none",
+          });
+        },
+      });
+      // #endif
+    },
+    handlerPayCheck(channel_provider_id, flat) {
+      if (flat) this.channel_provider_id = channel_provider_id;
+      else this.channel_provider_id = "";
+    },
+
+    onJfbBack(options) {
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBasePayLess.less";
+
+.margin-right {
+  margin-right: unit(8, rpx)
+}
+
+.jfb-base-pay {
+  &__body {
+    color: #333;
+    // padding-bottom: 150rpx;
+    .column-group {
+      .column-item {
+        background: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 30rpx 60rpx;
+
+        .column_label {
+          display: flex;
+          align-items: center;
+          font-size: 28rpx;
+          font-weight: bold;
+        }
+        .column_value {
+          display: flex;
+          align-items: center;
+          font-size: 24rpx;
+          .xd-coins {
+            margin-left: 8rpx;
+          }
+        }
+        .label_sub {
+          font-size: 24rpx;
+          color: #999999;
+          font-weight: normal;
+        }
+      }
+    }
+
+    .ticket_list {
+      background: #ffffff;
+      padding: unit(30, rpx);
+      .ticket_item {
+        width: 690rpx;
+        border-radius: 10rpx;
+        margin: 0 auto 30rpx auto;
+        padding: 30rpx 0 10rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        ._header {
+          display: flex;
+          justify-content: space-between;
+          padding: 0rpx 30rpx;
+          font-size: 28rpx;
+          font-weight: bold;
+        }
+        ._cont {
+          display: flex;
+          font-size: unit(20, rpx);
+          padding: unit(18, rpx) unit(30, rpx);
+          color: #777777;
+          & > view:nth-child(1) {
+            margin-right: unit(30, rpx);
+          }
+        }
+        ._footer {
+          display: flex;
+          justify-content: space-between;
+          font-size: 24rpx;
+          padding: 20rpx 30rpx;
+          ._item {
+            display: flex;
+            align-items: center;
+          }
+        }
+      }
+    }
+
+    .remain_pay {
+      background: #ffffff;
+      .remain_header {
+        display: flex;
+        justify-content: space-between;
+        padding: 30rpx 60rpx 0;
+        color: #999999;
+        font-size: 24rpx;
+      }
+      .pay_item {
+        display: flex;
+        align-items: center;
+        border-radius: 10rpx;
+        padding: 36rpx 60rpx;
+        box-sizing: border-box;
+        margin: 0 auto;
+        font-size: 28rpx;
+
+        .icon {
+          width: 64rpx;
+          height: 64rpx;
+          border-radius: 32rpx;
+          margin-right: 30rpx;
+          overflow: hidden;
+        }
+        .pay_name {
+          flex: 1;
+        }
+      }
+    }
+    .bottom_btn {
+      position: fixed;
+      width: 100%;
+      display:flex;
+      justify-content: center;
+      align-items: center;
+      height: unit(120, rpx);
+      background: #ffffff;
+
+      &-mask {
+        height: unit(120, rpx);
+      }
+    }
+  }
+}
+.text-gray {
+  color: #999999;
+}
+.text-primary {
+
+}
+.flex {
+  display: flex;
+}
+.align-center {
+  align-items: center;
+}
+</style>

package/src/components/{JfbBaseLine/JfbBaseLineLess.less → JfbBasePay/JfbBasePayLess.less}

@@ -12,19 +12,31 @@
 }
 
 //start
-.jfb-base-line {
-  border: 1px dashed rgba(0, 0, 0, 0);
+.jfb-base-pay {
   box-sizing: border-box;
 
-  &.editx {
-    position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
   }
 
-  &:hover {
-    border: 1px dashed blue;
+  &.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;
+    }
+
   }
 
 
@@ -55,3 +67,13 @@
   }
 }
 //end
+
+
+/**notPreview**/
+.jfb-base-pay {
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
+}
+/**endNotPreview**/