gxd-uni-library-editx 1.0.102 → 1.0.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gxd-uni-library-editx",
-  "version": "1.0.102",
+  "version": "1.0.103",
   "private": false,
   "description": "聚福宝基础插件专用库",
   "main": "index.js",

package/src/components/XdCouponChose/XdCouponChose.vue

@@ -0,0 +1,1013 @@
+<template>
+  <view class="xd-card-pay">
+    <slot></slot>
+    <xd-down-drawer
+      :show.sync="xdDownDrawer"
+      :isBodyClose="false"
+      :z-index="3000"
+    >
+      <view style="height: 80rpx; background: #fff"></view>
+      <view class="jfb-cashier-verification-pay__body">
+        <view class="column-group">
+          <view class="column-item">
+            <view class="column_label">
+              我的票券
+              <view
+                :style="{ color: style.$warningColor }"
+                v-if="checkedCards.length > 0"
+                class="label_sub"
+                >（已使用{{ checkedCards.length }}张票券）</view
+              >
+              <view
+                :style="{ marginLeft: '20rpx', color: style.$warningColor }"
+                class="label_sub"
+                v-else
+                >请勾选票券</view
+              >
+            </view>
+            <view class="column_value">
+              <xd-button
+                width="220rpx"
+                radius="60rpx"
+                type="primary"
+                size="small"
+                @click="xdDownDrawerNewCard = true"
+                >使用新票券</xd-button
+              >
+            </view>
+          </view>
+          <view class="column-item">
+            <view class="column_label">
+              仍需支付
+              <view class="label_sub">（可使用多张票券支付）</view>
+            </view>
+            <view class="column_value text-primary">
+              <xd-unit
+                :price="needPayPrice"
+                :isOld="false"
+                :font-size="32"
+                :icon-size="0.3"
+              ></xd-unit>
+            </view>
+          </view>
+        </view>
+        <view class="ticket_list" :key="renderChecked">
+          <view v-if="showCouponList.length" class="coupon_list">
+            <xd-coupon-item
+              style="margin-bottom: 20rpx"
+              v-for="(item, i) in showCouponList"
+              :key="i"
+              :couponRadius="couponRadius"
+              :couponImageUrl="couponImageUrl"
+              :couponTitleBgColor="couponTitleBgColor"
+              :couponUseBtnPadding="couponUseBtnPadding"
+              :couponBtnRadius="couponBtnRadius"
+              :couponBtnTextStyle="couponBtnTextStyle"
+              :couponLeftBgColor="couponLeftBgColor"
+              :item="item"
+              @useCoupon="doCardLogin(item)"
+            >
+              <template slot="btn">
+                <xd-radio
+                  class="cou_btn"
+                  :disabled="item.is_valid === 'N' || item.card_point == 0"
+                  size="mini"
+                  @change="(flat) => handlerTicketSelect(flat, item)"
+                  :value="checkedCards.includes(item.card_number)"
+                ></xd-radio>
+              </template>
+            </xd-coupon-item>
+            <view v-if="!hasCouponList" class="no_more_card"
+              >没有更多券了，查看失效的票券 ></view
+            >
+          </view>
+          <view :style="{color: mainColor}" class="ticket_add_new" @click="xdDownDrawerNewCard = true">
+            <view :style="{backgroundColor: mainColor}" class="plus_icon">+</view>
+            <view>使用新票券</view>
+          </view>
+        </view>
+        <view style="height: 100rpx"></view>
+        <view v-if="xdDownDrawer" class="bottom_btn" :style="alert_bottom">
+          <xd-button
+            width="360rpx"
+            type="primary"
+            radius="50rpx"
+            @click="doTicketPay"
+            >确认支付</xd-button
+          >
+        </view>
+      </view>
+    </xd-down-drawer>
+    <xd-down-drawer
+      :show.sync="xdDownDrawerNewCard"
+      :z-index="3010"
+      height="580rpx"
+      @close="switchValidToken"
+    >
+      <view class="drawer_title">使用新票券</view>
+      <xd-form label-width="180" label-align="left" content-align="left">
+        <xd-form-item label="票券号码" content-align="left">
+          <view class="flex align-center">
+            <xd-form-input
+              placeholder="电子码无需输入券号"
+              v-model="cardForm.card_number"
+            />
+            <view v-if="isQrCode" class="scan_icon" @click="doScanCode">
+              <xd-font-icon icon="iconsaoma"></xd-font-icon>
+            </view>
+          </view>
+        </xd-form-item>
+        <xd-form-item label="票券密码" content-align="left">
+          <xd-form-input
+            placeholder="请输入票券密码"
+            v-model="cardForm.card_password"
+          />
+        </xd-form-item>
+        <xd-form-item label="验证码" content-align="left">
+          <view class="flex align-center">
+            <xd-form-input
+              placeholder="请输入验证码"
+              v-model="cardForm.valid_code"
+            />
+            <view
+              v-if="cardForm.valid_token"
+              class="capture"
+              @click="switchValidToken"
+            >
+              <image
+                style="width: 100%; height: 100%"
+                :src="
+                  validImageAPIUrl +
+                  '?image_width=180&image_height=80&token=' +
+                  cardForm.valid_token
+                "
+              />
+            </view>
+          </view>
+        </xd-form-item>
+      </xd-form>
+      <xd-button
+        width="360rpx"
+        type="primary"
+        radius="50rpx"
+        @click="addNewCoupon()"
+        >使用新票券</xd-button
+      >
+      <view :style="{ height: layoutInfo.bottom + 'rpx' }"></view>
+    </xd-down-drawer>
+  </view>
+</template>
+<script>
+/**
+ * @description 选择卡券支付 & 支持三方支付
+ * @property show                   {Boolean}         是否显示支付卡券弹窗
+ * @property layoutInfo             {Object}          XdLayout返回的布局信息
+ * @property validImageAPIUrl       {String}          图片验证码接口API地址
+ * @property jwxSDK                 {Object}          JSSDK授权对象
+ * @property price                  {Number|String}   订单总额 单位元
+ * @property getSettleListCoupons     {Function(successCallBack(cardList))}               获取支付卡券列表
+ * @property setSettleSelectCoupon    {Function(options, successCallBack, errCallBack)}   选择卡券列表
+ * @property addSettleCoupon          {Function(options, successCallBack)}                添加卡券
+ *
+ */
+import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer";
+import XdButton from "@/components/XdButton/XdButton";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdRadio from "@/components/XdRadio/XdRadio";
+import XdForm from "@/components/XdForm/XdForm";
+import XdFormItem from "@/components/XdFormItem/XdFormItem";
+import XdFormInput from "@/components/XdFormInput/XdFormInput";
+import XdCouponItem from "@/components/XdCouponItem/XdCouponItem";
+import {
+  getParentsStyle, //获取页面风格单个键值值
+  getParentsStyles, //获取页面风格列表
+  isQrCode,
+} from "@/utils/xd.base";
+
+export default {
+  name: "XdCardPayChose",
+  components: {
+    XdDownDrawer,
+    XdButton,
+    XdUnit,
+    XdFontIcon,
+    XdRadio,
+    XdForm,
+    XdFormItem,
+    XdFormInput,
+    XdCouponItem,
+  },
+  props: {
+    show: false,
+    layoutInfo: {},
+    validImageAPIUrl: {
+      //图片验证码 接口地址
+      type: String,
+    },
+    orderTotalPrice: {
+      //订单总额 单位元
+      type: String | Number,
+      default: "100",
+    },
+    orderNeedPayPrice: {
+      type: String | Number,
+      default: "100",
+    },
+    jwxSDK: {
+      //JSSDK授权对象
+      type: Object,
+    },
+    getSettleListCoupons: {
+      //支付卡券列表
+      type: Function,
+    },
+    setSettleSelectCoupon: {
+      //选择卡券列表
+      type: Function,
+    },
+    addSettleCoupon: {
+      //添加卡券
+      type: Function,
+    },
+    hadChoseCoupon: {
+      type: null | Array,
+    },
+    mainColor: {
+      type: String,
+    },
+    couponRadius: {
+      type: String,
+      default: "16",
+    },
+    couponLeftBgColor: {
+      type: String,
+      default: "linear-gradient(180deg, #FFA852 0%, #FF5733 100%)",
+    },
+    couponImageUrl: {
+      type: Object | String,
+    },
+    couponTitleBgColor: {
+      type: String,
+      default: "rgba(255, 87, 51, 0.1)",
+    },
+    couponUseBtnPadding: {
+      type: Object,
+      default() {
+        return {
+          top: 20,
+          right: 20,
+          bottom: 10,
+          left: 20,
+        };
+      },
+    },
+    couponBtnRadius: {
+      type: String,
+      default: "16",
+    },
+    couponBtnTextStyle: {
+      type: Object,
+      default() {
+        return {
+          color: "#fff",
+          bgColor: "#ff5722",
+          fontSize: "30rpx",
+          fontWeight: "normal",
+        };
+      },
+    },
+  },
+  watch: {
+    show(n, o) {
+      this.xdDownDrawer = n;
+    },
+    xdDownDrawer(n, o) {
+      console.log("xdDownDrawer value", n, o);
+      if (n) {
+        console.log(this.hadChoseCoupon);
+        let checkedArr = (this.hadChoseCoupon || []).map((c) => c.card_number);
+        this.selectedCardList = this.selectedCardList.map((item) => {
+          if (!checkedArr.includes(item.card_number)) {
+            this.needPayPrice = +this.needPayPrice + item["card_use_price"];
+            this.cardPayPrice = this.cardPayPrice - item.card_use_price;
+            item["card_use_point"] = 0;
+          }
+          return item;
+        });
+      }
+      this.$emit("update:show", n);
+      this.$emit("onAlert");
+    },
+    orderTotalPrice: {
+      handler(n) {
+        this.clearChecked();
+      },
+    },
+    orderNeedPayPrice(n, o) {
+      console.log("orderNeedPayPrice", n);
+      this.needPayPrice = n;
+    },
+    xdDownDrawerNewCard(n) {
+      if (!n) {
+        this.cardForm = {
+          card_number: "",
+          card_password: "",
+          valid_code: "",
+          valid_token: this.$xdUniHelper.randomChar(20),
+        };
+      }
+    },
+  },
+  data() {
+    return {
+      xdDownDrawer: false,
+      xdDownDrawerNewCard: false,
+      channel_provider_id: "",
+      cardList: [], //展示
+      selectedCardList: [],
+      needPayPrice: 0,
+      cardPayPrice: 0,
+      cardForm: {
+        //添加新卡券表单
+        card_number: "",
+        card_password: "",
+        valid_code: "", //验证码正文
+        valid_token: "", //验证码token
+      },
+      renderChecked: "renderChecked",
+
+      total_price: "",
+      style: {},
+      isQrCode: false,
+      hasCouponList: false,
+    };
+  },
+  computed: {
+    showCouponList() {
+      //筛选出不存在于cardList的数据
+      let otherCardList = this.selectedCardList.filter((item) => {
+        let cur = this.cardList.find(
+          (ii) => ii.card_number == item.card_number
+        );
+        return !cur;
+      });
+      //合并selectedCardList数据到对应的cardList
+      let combineList = this.cardList.map((item) => {
+        let cur = this.selectedCardList.find(
+          (ii) => ii.card_number == item.card_number
+        );
+        if (cur) return Object.assign(item, cur);
+        return item;
+      });
+      return combineList.concat(otherCardList);
+    },
+    checkedCards() {
+      return this.showCouponList
+        .filter((item) => item.card_use_point > 0)
+        .map((item) => item.card_number);
+    },
+    //提交是的selectedCardList, 由于取消选中不走接口 & 避免取消隐藏
+    submitCardList() {
+      return this.selectedCardList.filter((item) => item.card_use_point > 0);
+    },
+    alert_bottom() {
+      return this.fixedStyle({ paddingBottom: 24, zIndex: 110 });
+    },
+  },
+  async created() {
+    this.isQrCode = isQrCode(this);
+    this.switchValidToken();
+    this.style = await getParentsStyles(this.$parent);
+    console.log(this.mainColor,'this.$parent');
+    this.handleInit();
+  },
+  methods: {
+    handleInit() {
+      this.total_price = this.$xdUniHelper.multiplyFloatNumber(
+        this.orderTotalPrice,
+        100
+      );
+      this.needPayPrice = this.total_price;
+      this.getList();
+      this.selectedCardList = this.selectedCardList.map((item) => {
+        item["card_use_point"] = 0;
+        return item;
+      });
+    },
+    clearChecked() {
+      console.log("xdCardPayChose", this.orderTotalPrice);
+      this.total_price = this.$xdUniHelper.multiplyFloatNumber(
+        this.orderTotalPrice,
+        100
+      );
+      this.needPayPrice = this.total_price;
+      this.cardPayPrice = 0;
+      this.selectedCardList = this.selectedCardList.map((item) => {
+        item["card_use_point"] = 0;
+        return item;
+      });
+      this.doTicketPay();
+    },
+    divideFloatNumber(num) {
+      return this.$xdUniHelper.divisionFloatNumber(num, 100);
+    },
+    fixedStyle(options = {}, type = "bottom") {
+      let paddingBottom = options.paddingBottom || options.height || 0;
+      if (options.paddingBottom) delete options.paddingBottom;
+      if (options.height) delete options.height;
+      let obj = Object.assign(
+        {},
+        {
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 100,
+        },
+        options
+      );
+      let style = "position: fixed";
+      style = `${style};left:${obj.left}rpx`;
+      style = `${style};right:${obj.right}rpx`;
+      style = `${style};z-index:${obj.zIndex}`;
+      if (type === "bottom") {
+        let padding =
+          (this.layoutInfo.bottomHeight +
+            this.layoutInfo.footerHeight +
+            paddingBottom) *
+          this.$rpxNum;
+        style = `${style}; padding-bottom:calc(${padding}px + constant(safe-area-inset-bottom));`;
+        style = `${style}; padding-bottom:calc(${padding}px + env(safe-area-inset-bottom));`;
+        style = `${style};bottom:0;`;
+      }
+      if (type === "top") {
+        style = `${style};top:${obj.top}rpx`;
+      }
+      return style;
+    },
+    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;
+    },
+    getList() {
+      //获取卡券列表
+      this.getSettleListCoupons((cardList) => {
+        this.$xdLog.setARMSInfo(
+          this.filterMGinfo(cardList),
+          "init_binded_list"
+        );
+        this.cardList = cardList;
+      });
+    },
+    //选卡弹出项
+    useCardPop(data) {
+      return new Promise((resolve, reject) => {
+        uni.showModal({
+          title: "提示",
+          content: data.pop_message,
+          confirmText: data.confirm_text,
+          cancelText: data.cancel_text,
+          success: function (res) {
+            if (res.confirm) {
+              resolve(2);
+            } else if (res.cancel) {
+              // reject("取消支付");
+              if (data.pop_type == "confirm") {
+                resolve();
+              } else {
+                resolve(3);
+              }
+            }
+          },
+          fail: function (res) {
+            reject(res);
+          },
+        });
+      });
+    },
+
+    //选择卡券
+    handlerTicketSelect(flat, ticket, options) {
+      if (flat) {
+        //选择卡券，重新调用接口获取 selectedCardList, neePayPrice
+        const { submitCardList, total_price } = this;
+        let callThis = this;
+        // #ifdef MP
+        callThis = this.$parent;
+        // #endif
+        this.$xdShowLoading({});
+        callThis.setSettleSelectCoupon(
+          {
+            total_price,
+            card_number: ticket.card_number,
+            selected_card_list_json: JSON.stringify(submitCardList),
+            ...options,
+          },
+          (res) => {
+            let resOptions = JSON.parse(JSON.stringify(res));
+            if (resOptions["selected_card_list1"])
+              delete resOptions["selected_card_list1"];
+            if (resOptions["selected_card_list"]) {
+              resOptions["selected_card_list"] = this.filterMGinfo(
+                resOptions["selected_card_list"]
+              );
+            }
+            this.$xdLog.setARMSInfo(
+              {
+                card_number: ticket.card_number,
+                selected_card_list_json: this.filterMGinfo(submitCardList),
+                ...options,
+                res: resOptions,
+              },
+              "select_binded_card"
+            );
+            this.$xdHideLoading();
+            const {
+              selected_card_list,
+              need_pay_price,
+              is_need_pop,
+              card_total_use_price,
+            } = res;
+            if (is_need_pop) {
+              this.useCardPop(res)
+                .then((select_content) => {
+                  if (select_content) {
+                    this.handlerTicketSelect(true, ticket, { select_content });
+                  } else {
+                    this.handlerTicketSelect(false, ticket);
+                  }
+                })
+                .catch(() => {});
+            } else {
+              this.selectedCardList = selected_card_list;
+              this.needPayPrice = need_pay_price;
+              this.cardPayPrice = card_total_use_price;
+              this.renderChecked = Date.now();
+            }
+          },
+          (err) => {
+            this.$xdHideLoading();
+            this.renderChecked = Date.now();
+          }
+        );
+      } else {
+        this.$xdLog.setARMSInfo(
+          {
+            ticket: this.filterMGinfo(ticket),
+            ...options,
+          },
+          "cancel_card"
+        );
+        //不走接口， selectedCardList不是真实选中的
+        this.selectedCardList = this.selectedCardList.map((item) => {
+          if (item.card_number == ticket.card_number) {
+            this.needPayPrice = +this.needPayPrice + item["card_use_price"];
+            item["card_use_price"] = 0;
+            item["card_use_point"] = 0;
+          }
+          return item;
+        });
+        if (ticket.is_new) {
+          this.cardList = this.cardList.filter(
+            (item) => item.card_number != ticket.card_number
+          );
+          this.selectedCardList = this.selectedCardList.filter(
+            (item) => item.card_number != ticket.card_number
+          );
+        }
+        this.cardPayPrice = this.cardPayPrice - ticket.card_use_price;
+        this.renderChecked = Date.now();
+      }
+    },
+
+    filterMGinfo(list) {
+      //深拷贝
+      if (
+        this.$xdUniHelper.checkVarType(list) === "object" ||
+        this.$xdUniHelper.checkVarType(list) === "array"
+      ) {
+        list = JSON.parse(JSON.stringify(list));
+      }
+      //object
+      if (this.$xdUniHelper.checkVarType(list) === "object") {
+        if (list.card_use_certificate)
+          list.card_use_certificate =
+            list.card_use_certificate.substr(0, 2) +
+            "********" +
+            list.card_use_certificate.substr(-3);
+        if (list.card_cert)
+          list.card_cert =
+            list.card_cert.substr(0, 2) +
+            "********" +
+            list.card_cert.substr(-3);
+        if (list.card_password)
+          list.card_password =
+            list.card_password.substr(0, 2) +
+            "********" +
+            list.card_password.substr(-3);
+        return list;
+      }
+
+      //array
+      return list.map((item) => {
+        if (item.card_use_certificate)
+          item.card_use_certificate =
+            item.card_use_certificate.substr(0, 2) +
+            "********" +
+            item.card_use_certificate.substr(-3);
+        if (item.card_cert)
+          item.card_cert =
+            item.card_cert.substr(0, 2) +
+            "********" +
+            item.card_cert.substr(-3);
+        if (item.card_password)
+          item.card_password =
+            item.card_password.substr(0, 2) +
+            "********" +
+            item.card_password.substr(-4);
+        return item;
+      });
+    },
+
+    //添加新卡券
+    addNewCoupon(options = {}) {
+      const { cardForm, total_price, submitCardList } = this;
+      let err_tip = "";
+      if (!cardForm.card_qrcode) {
+        if (!cardForm.valid_code) err_tip = "验证码不能为空";
+        else if (!cardForm.card_number && !cardForm.card_password)
+          err_tip = "票券和密码不能为空";
+      }
+      if (err_tip) {
+        return uni.showToast({
+          title: err_tip,
+          icon: "none",
+        });
+      }
+      let callThis = this;
+      // #ifdef MP
+      callThis = this.$parent;
+      // #endif
+      this.$xdShowLoading({});
+      callThis.addSettleCoupon(
+        {
+          ...cardForm,
+          selected_card_list_json: JSON.stringify(submitCardList),
+          total_price,
+          ...options,
+        },
+        (res) => {
+          let resOptions = JSON.parse(JSON.stringify(res));
+          resOptions.selected_card_list = this.filterMGinfo(
+            resOptions.selected_card_list
+          );
+          this.$xdLog.setARMSInfo(
+            {
+              ...options,
+              total_price,
+              cardForm: {
+                ...cardForm,
+                card_password: cardForm.card_password
+                  ? cardForm.card_password.substr(0, 2) +
+                    "********" +
+                    cardForm.card_password.substr(-3)
+                  : "",
+              },
+              selected_card_list_json: this.filterMGinfo(submitCardList),
+              res: resOptions,
+            },
+            "add_card"
+          );
+          this.$xdHideLoading();
+
+          //成功回调
+          let {
+            selected_card_list = [],
+            need_pay_price,
+            is_need_pop,
+            card_total_use_price,
+          } = res;
+
+          if (is_need_pop) {
+            this.useCardPop(res)
+              .then((select_content) => {
+                if (select_content) this.addNewCoupon({ select_content });
+                // this.handlerTicketSelect(true, cardForm.card_number, {select_content})
+              })
+              .catch((e) => {
+                console.error(e);
+              });
+            return;
+          } else {
+            // filterCard 去重后的卡券
+            let r_cards = this.cardList.map((item) => item.card_number);
+            let filterCard = selected_card_list.filter(
+              (item) => !r_cards.includes(item.card_number)
+            );
+            //重合的卡券列表
+            let repeatCardList = selected_card_list.filter((item) =>
+              r_cards.includes(item.card_number)
+            );
+
+            if (repeatCardList.length > 0) {
+              for (let i = 0; i < repeatCardList.length; i++) {
+                let repeatCard = repeatCardList[i];
+                //重复的以前的卡数据
+                let oldCard = this.cardList.find(
+                  (item) => item.card_number == repeatCard.card_number
+                );
+                //自动选中当前重合的卡券
+                if (
+                  this.selectedCardList.findIndex(
+                    (item) => item.card_number == repeatCard.card_number
+                  ) == -1
+                ) {
+                  this.selectedCardList.push({ ...oldCard, ...repeatCard });
+                } else {
+                  this.selectedCardList = this.selectedCardList.map((item) => {
+                    if (item.card_number == repeatCard.card_number) {
+                      item = { ...oldCard, ...repeatCard };
+                    }
+                    return item;
+                  });
+                }
+              }
+            }
+
+            selected_card_list = filterCard.map((item) => {
+              item["is_new"] = true;
+              return item;
+            });
+            this.cardList = selected_card_list.concat(this.cardList);
+            this.selectedCardList = selected_card_list.concat(
+              this.selectedCardList
+            );
+            this.needPayPrice = need_pay_price;
+            this.cardPayPrice = card_total_use_price;
+          }
+          this.xdDownDrawerNewCard = false;
+          this.renderChecked = Date.now();
+          //清空cardForm
+          this.cardForm = {
+            card_number: "",
+            card_password: "",
+            valid_code: "",
+          };
+          this.switchValidToken();
+        },
+        (err) => {
+          this.$xdHideLoading();
+          this.switchValidToken();
+        }
+      );
+    },
+    //确认支付
+    async doTicketPay() {
+      const { cardPayPrice, submitCardList, needPayPrice } = this;
+      let postData = {
+        cardPayPrice: cardPayPrice,
+        selectedCardList: submitCardList,
+        needPayPrice: needPayPrice,
+      };
+      this.$emit("onChose", postData);
+    },
+    //刷新图片验证码
+    switchValidToken() {
+      let valid_token = this.$xdUniHelper.randomChar(20);
+      this.$set(this.cardForm, "valid_token", valid_token);
+    },
+    //扫码
+    doScanCode() {
+      // #ifdef H5
+      this.jwxSDK.scanQRCode({
+        needResult: 1,
+        success: (res) => {
+          // this.$set(this.cardForm, 'card_number', res.resultStr)
+          this.$set(this.cardForm, "card_qrcode", res.resultStr);
+          this.addNewCoupon();
+        },
+      });
+      // #endif
+      // #ifdef MP
+      uni.scanCode({
+        success: (res) => {
+          console.log("scanCode", res);
+          // this.$set(this.cardForm, 'card_number', res.result)
+          this.$set(this.cardForm, "card_qrcode", res.result);
+          this.addNewCoupon();
+        },
+      });
+      // #endif
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.xd-card-pay {
+  .text-gray {
+    color: #999999;
+  }
+  .text-primary {
+    color: #fe7a63;
+  }
+  .flex {
+    display: flex;
+  }
+  .align-center {
+    align-items: center;
+  }
+  .drawer_title {
+    line-height: 100rpx;
+    text-align: center;
+    font-size: 32rpx;
+  }
+  .scan_icon {
+    width: 32rpx;
+    height: 32rpx;
+  }
+  .capture {
+    width: 180rpx;
+    height: 80rpx;
+    background: #ddd;
+  }
+}
+.coupon_list {
+  ::v-deep .xd-coupon_item {
+    margin: var(--card-list-margin) 0;
+  }
+}
+.cou_btn{
+  position: absolute;
+  padding: 10rpx 30rpx;
+  border-radius: 12rpx;
+  right: 20rpx;
+  bottom: 20rpx;
+}
+.no_more_card{
+  text-align: center;
+  padding: 20rpx 0;
+  color: #CCCCCC;
+  font-size: 28rpx;
+}
+.jfb-cashier-verification-pay {
+  &__body {
+    padding-bottom: 150rpx;
+    max-height: 70vh;
+    overflow: auto;
+    .column-group {
+      .column-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid rgba(238, 238, 238, 1);
+        padding: 30rpx 50rpx;
+
+        .column_label {
+          display: flex;
+          align-items: center;
+          font-size: 28rpx;
+        }
+        .column_value {
+          display: flex;
+          align-items: center;
+          font-size: 24rpx;
+          .xd-coins {
+            margin-left: 8rpx;
+          }
+        }
+        .label_sub {
+          font-size: 18rpx;
+          color: #999999;
+        }
+      }
+    }
+
+    .ticket_list {
+      padding: 40rpx;
+      .ticket_add_new {
+        width: 690rpx;
+        height: 220rpx;
+        border-radius: 10rpx;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
+        margin: 30rpx auto;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: 24rpx;
+
+        .plus_icon {
+          color: #ffffff;
+          border-radius: 20rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 48rpx;
+          width: 80rpx;
+          height: 80rpx;
+          margin-bottom: 20rpx;
+        }
+      }
+      .ticket_item {
+        width: 690rpx;
+        border-radius: 10rpx;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
+        margin: 30rpx auto;
+        padding: 30rpx 0 20rpx;
+        ._header {
+          display: flex;
+          justify-content: space-between;
+          padding: 0rpx 30rpx;
+          font-size: 28rpx;
+        }
+        ._cont {
+          display: flex;
+          font-size: 18rpx;
+          padding: 24rpx 30rpx;
+          border-bottom: 1px solid rgba(242, 242, 242, 1);
+          color: #777777;
+        }
+        ._footer {
+          display: flex;
+          justify-content: space-between;
+          padding: 24rpx 30rpx 12rpx;
+          font-size: 24rpx;
+          ._item {
+            display: flex;
+            align-items: center;
+          }
+        }
+        .orther_pay {
+          display: inline-block;
+          background: #f5f5f5;
+          font-size: 24rpx;
+          font-weight: 400;
+          border-radius: 8rpx;
+          color: #999999;
+          padding: 8rpx 20rpx;
+          margin: 16rpx 0 0 30rpx;
+        }
+      }
+    }
+
+    .remain_pay {
+      .remain_header {
+        display: flex;
+        justify-content: space-between;
+        padding: 30rpx 50rpx 0;
+        color: #999999;
+        font-size: 24rpx;
+      }
+      .pay_item {
+        display: flex;
+        align-items: center;
+        width: 700rpx;
+        height: 120rpx;
+        border-radius: 10rpx;
+        background: rgba(255, 255, 255, 1);
+        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
+        padding: 24rpx 35rpx;
+        box-sizing: border-box;
+        margin: 30rpx auto;
+        font-size: 28rpx;
+
+        .icon {
+          width: 64rpx;
+          height: 64rpx;
+          border-radius: 32rpx;
+          // background: #DDD;
+          margin-right: 30rpx;
+        }
+        .pay_name {
+          flex: 1;
+        }
+      }
+    }
+    .bottom_btn {
+      position: fixed;
+      width: 100%;
+      padding: 24rpx 0;
+      background: #ffffff;
+      box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.1);
+      transition: 500ms all;
+      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+      padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+    }
+  }
+}
+</style>

package/src/components/XdCouponItem/XdCouponItem.vue

@@ -0,0 +1,273 @@
+<template>
+  <view class="xd-coupon_item" :style="couponItemBoxStyle">
+    <view class="coupon_left" :style="{
+      background: couponLeftBgColor
+    }">
+      <view class="_point">
+        <xd-unit
+          :unitFontSize="24"
+          :fontSize="48"
+          :price="item.card_point"
+          :isOld="false"
+          :unit="item.unit || ''"
+          :colorNew="'#ffffff'"
+        ></xd-unit>
+        <!-- <text style="font-size: 24rpx;">{{ item.unit }}</text> -->
+      </view>
+      <view class="_rule">{{ item.card_use_rule }}</view>
+    </view>
+    <view class="coupon_right" :style="couponRightItemBoxStyle">
+      <view class="cont_top" :style="{
+        background: couponTitleBgColor
+      }">{{ item.card_type_name }}</view>
+      <view class="cont_main">
+        <view class="cou_number">券号：{{ item.card_number }}</view>
+        <view class="cou_time">有效期：{{ item.end_time }}</view>
+        <view class="cou_point">
+          余额：
+          <xd-unit
+            :unitFontSize="24"
+            :fontSize="28"
+            :price="item.card_point"
+            :isOld="false"
+            :unit="item.unit || ''"
+            :colorNew="'#333333'"
+          ></xd-unit>
+        </view>
+        <slot name="btn">
+          <view class="cou_btn"
+            :style="[
+              item.is_login === 'Y' ? couponBtnActiveStyle : couponBtnStyle,
+              {
+                padding: couponBtnPadding,
+                borderRadius: couponBtnRadius + 'rpx'
+              }
+            ]"
+            @click="goToUseCoupon"
+          >{{item.is_login === 'Y' ? '已登录' : '去使用'}}</view>
+        </slot>
+      </view>
+      <view class="cont_bottom">
+        <view class="switch_rule" @click="switchRule">
+          <view>使用规则</view>
+          <view>
+            <xd-font-icon v-if="!expand" icon="iconxia_down" size="24"></xd-font-icon>
+            <xd-font-icon v-else icon="iconshang_up" size="24"></xd-font-icon>
+          </view>
+        </view>
+        <view v-if="expand" class="expand_rule">
+          {{ item.card_use_rule }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  import getServiceUrl from '@/common/getServiceUrl'
+  import XdUnit from "@/components/XdUnit/XdUnit";
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  export default{
+    name: "XdCouponItem",
+    components: {
+      XdFontIcon,
+      XdUnit
+    },
+    props: {
+      item:{
+        type: Object,
+      },
+      couponRadius: {
+        type: String,
+        default: "16"
+      },
+      couponLeftBgColor: {
+        type: String,
+        default: 'linear-gradient(180deg, #FFA852 0%, #FF5733 100%)'
+      },
+      couponImageUrl: {
+        type: Object | String
+      },
+      couponTitleBgColor: {
+        type: String,
+        default: "rgba(255, 87, 51, 0.1)"
+      },
+      couponUseBtnPadding: {
+        type: Object,
+        default(){
+          return {
+            top: 20,
+            right: 20,
+            bottom: 10,
+            left: 20
+          }
+        },
+      },
+      couponBtnRadius: {
+        type: String,
+        default: "16"
+      },
+      couponBtnTextStyle: {
+        type: Object,
+        default(){
+          return {
+            color: '#fff',
+            bgColor: '#ff5722',
+            fontSize: '30rpx',
+            fontWeight: 'normal'
+          }
+        }
+      }
+    },
+    data() {
+      return {
+        expand: false,
+      }
+    },
+    computed: {
+      couponItemBoxStyle(){
+        return this.styleObjectToString({
+          borderRadius: this.couponRadius + 'rpx',
+        })
+      },
+      couponBtnPadding(){
+        let padding = `${this.checkValue(this.couponUseBtnPadding.top, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.right, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.bottom, 20)}rpx`;
+        padding = `${padding} ${this.checkValue(this.couponUseBtnPadding.left, 20)}rpx`;
+        return padding;
+      },
+      couponBtnStyle(){
+        let styleObj = {
+          color: this.couponBtnTextStyle['color'] || '#333',
+          background: this.couponBtnTextStyle['bgColor'] || '#fff',
+          fontSize: this.couponBtnTextStyle['fontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['fontWeight'] || 'normal',
+        }
+        return this.styleObjectToString(styleObj)
+      },
+      couponBtnActiveStyle(){
+        return this.styleObjectToString({
+          color: this.couponBtnTextStyle['actColor'] || '#fff',
+          background: this.couponBtnTextStyle['actBgColor'] || '#ff5722',
+          fontSize: this.couponBtnTextStyle['actFontSize'] || '30rpx',
+          fontWeight: this.couponBtnTextStyle['actFontWeight'] || 'normal',
+        })
+      },
+      couponRightItemBoxStyle(){
+        let image = {};
+        if(this.cardImageUrl) image = {
+          backgroundImage: `url(${this.getCouponBgImage})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+        }
+        return this.styleObjectToString(image)
+      },
+      getCouponBgImage(){
+        let bg = '';
+        if(this.$xdUniHelper.checkVarType(this.couponImageUrl) === 'object'
+          || this.$xdUniHelper.checkVarType(this.couponImageUrl) === 'array'
+        ) {
+          if(!this.$xdUniHelper.isEmpty(this.couponImageUrl)) {
+            return getServiceUrl(this.couponImageUrl.url)
+          }
+        }
+        return bg
+      },
+    },
+    methods: {
+      switchRule(){
+        this.expand = !this.expand;
+      },
+      goToUseCoupon(){
+        this.$emit('useCoupon', this.item);
+      },
+      checkValue(value, dValue = 0){
+        if(value === undefined || value === '' || value === null) return dValue;
+        return Number(value || 0);
+      },
+    }
+  }
+
+</script>
+<style lang="less" scoped>
+  .xd-coupon_item{
+    display: flex;
+    margin: 20rpx 0;
+    border-radius: 16rpx;
+    background: #FFFFFF;
+    overflow: hidden;
+    .coupon_left{
+      color: #FFFFFF;
+      width: 170rpx;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+
+      ._point{
+        font-size: 48rpx;
+      }
+      ._rule{
+        font-size: 24rpx;
+      }
+    }
+    .coupon_right{
+      flex: 1;
+      width: 530rpx;
+      .cont_top{
+        background: rgba(255, 87, 51, 0.1);
+        padding: 8rpx 40rpx;
+        font-size: 24rpx;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+      .cont_main{
+        position: relative;
+        padding: 28rpx 20rpx 28rpx 40rpx;
+        color: #333333;
+        .cou_number{
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+        .cou_time{
+          font-size: 28rpx;
+          margin: 16rpx 0;
+        }
+        .cou_point{
+          font-size: 28rpx;
+          display: flex;
+          align-items: center;
+        }
+        .cou_btn{
+          position: absolute;
+          padding: 10rpx 30rpx;
+          background-color: #ddd;
+          border-radius: 12rpx;
+          right: 20rpx;
+          bottom: 20rpx;
+        }
+      }
+      .cont_bottom{
+        background: #EEEEEE;
+        .switch_rule{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 12rpx 40rpx;
+          font-size: 24rpx;
+          color: #666666;
+        }
+        .expand_rule{
+          padding: 12rpx 40rpx;
+          font-size: 20rpx;
+          color: #333333;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          background-color: #F5F5F5;
+        }
+      }
+    }
+  }
+</style>