jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBaseConList/JfbBaseConList.vue

@@ -0,0 +1,818 @@
+<template>
+  <view
+    class="jfb-base-con-list"
+    @click="handleEditxSelect"
+    :class="{
+      editx: isEditx && active,
+      noBorder: noBorder,
+    }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-con-list__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active && !noBorder"
+    >
+      <view class="jfb-base-con-list__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-con-list__body">
+      <view
+        v-if="done"
+        :style="{
+          backgroundImage: `url(${background})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+          minHeight: `${layoutInfo.bodyMinHeightRpx}rpx`,
+        }"
+      >
+        <view v-if="is_blank_page==='N'">
+          <view class="jfb-base-con-list__body-content">
+            <view class="jfb-base-con-list__body-content-header">
+              <view class="jfb-base-con-list__body-content-header-left">
+                <view :style="{ backgroundColor: '#FF4D4A' }"></view>
+                <view>赠送优惠券</view>
+              </view>
+              <view
+                :style="{
+                  color: '#FA2125',
+                  backgroundColor: contentBackground,
+                }"
+                class="jfb-base-con-list__body-content-header-right"
+                @click="showRule = true"
+              >
+                <text>领券规则</text>
+                <xd-font-icon size="20" icon="iconxiangyou_xian"></xd-font-icon>
+              </view>
+            </view>
+
+            <view v-if="isAll">
+              <view v-if="isRandom">
+                <view class="jfb-base-con-list__body-content-list">
+                  <view style="text-align:center;padding-top:140rpx;padding-bottom:54rpx">
+                    <img
+                      style="width:360rpx;height:340rpx"
+                      :src="app_coupon_bottom_url"
+                      alt=""
+                    />
+                  </view>
+                  <xd-button
+                    size="small"
+                    type="primary"
+                    :style="btn_style"
+                    @click="can_take!=='Y'?toCoupon():getAllCoupont()"
+                    >{{ btn_txt }}</xd-button
+                  >
+                </view>
+              </view>
+              <view v-else>
+                <view
+                  class="jfb-base-con-list__body-content-list"
+                >
+                  <view>
+                    <view v-for="(item, index) in couponList" :key="index">
+                      <view
+                        class="jfb-base-con-list__body-content-list-item"
+                        :class="'status_' + item.can_take_num"
+                        :style="{
+                          backgroundColor:
+                            item.can_take_num === 'Y' || item.can_take_num === 'P'
+                              ? contentBackground
+                              : '#F3F3F3',
+                        }"
+                      >
+                        <view class="item_head">
+                          <image
+                            class="t_icon"
+                            mode="widthFix"
+                            :src="item.headIcon"
+                          ></image>
+                          <view>{{ item.prize_type }}</view>
+                        </view>
+                        <view class="item_sub">{{ item.prize_name }}</view>
+                        <xd-font-icon
+                          size="100"
+                          :style="{
+                            color: item.iconColor,
+                            position: 'absolute',
+                            right: '0rpx',
+                            top: '0rpx',
+                          }"
+                          :icon="item.icon"
+                        ></xd-font-icon>
+                      </view>
+                    </view>
+                  </view>
+                  <xd-button
+                    size="small"
+                    type="primary"
+                    :style="btn_style"
+                    @click="can_take!=='Y'?toCoupon():getAllCoupont()"
+                    >{{ btn_txt }}</xd-button
+                  >
+                </view>
+              </view>
+            </view>
+
+            <view v-else>
+              <view
+                v-if="can_take === 'Y' && has_times === 'Y'"
+                class="jfb-base-con-list__body-content-list"
+              >
+                <view v-for="(item, index) in couponList" :key="index">
+                  <view
+                    class="jfb-base-con-list__body-content-list-item"
+                    :class="'status_' + item.can_take_num"
+                    :style="{
+                      backgroundColor:
+                        item.can_take_num === 'Y' || item.can_take_num === 'P'
+                          ? contentBackground
+                          : '#F3F3F3',
+                    }"
+                  >
+                    <view class="item_head">
+                      <image
+                        class="t_icon"
+                        mode="widthFix"
+                        :src="item.headIcon"
+                      ></image>
+                      <view>{{ item.prize_type }}</view>
+                    </view>
+                    <view class="item_sub">{{ item.prize_name }}</view>
+                    <xd-font-icon
+                      size="100"
+                      :style="{
+                        color: item.iconColor,
+                        position: 'absolute',
+                        right: '0rpx',
+                        top: '0rpx',
+                      }"
+                      :icon="item.icon"
+                    ></xd-font-icon>
+                    <view class="btn_wrap">
+                      <xd-button
+                        size="small"
+                        :disabled="
+                          item.can_take_num !== 'Y' &&
+                          item.remain_card_count == 0
+                        "
+                        @click="getCoupont(item)"
+                        type="primary"
+                        style="width: 170rpx; height: 60rpx"
+                        :style="item.btn"
+                        :color="item.infoColor"
+                        >{{ item.btn_txt }}</xd-button
+                      >
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view
+                v-else
+                class="jfb-base-con-list__body-content-list"
+                style="padding-bottom: 60rpx"
+              >
+                <image mode="widthFix" :src="used_up_url"></image>
+              </view>
+            </view>
+          </view>
+          <view class="jfb-base-con-list__body-content-foot" @click="toCoupon">
+            <view
+              :style="{
+                padding: outPadding,
+                border: border,
+                borderRadius: radius + 'rpx',
+                color: btnTextColor,
+                backgroundColor: btnBgColor,
+                boxShadow: shadow,
+                fontSize: btnTextSize+'rpx'
+              }"
+              >查看已领票券</view>
+          </view>
+        </view>
+
+        <view v-else class="empty_data">
+          <image :src="emptyBg"></image>
+          {{ message }}
+        </view>
+        <xd-dailog
+          :cancel="false"
+          :confirm="false"
+          title="活动规则说明"
+          :show.sync="showRule"
+        >
+          <xd-content-xss
+            style="text-align: left"
+            :html="notice"
+          ></xd-content-xss>
+        </xd-dailog>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdButton from "@/components/XdButton/XdButton";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseConListMixin from "./JfbBaseConListMixin";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import XdDailog from "@/components/XdDailog/XdDailog";
+import XdContentXss from "@/components/XdContentXss/XdContentXss";
+import getServiceUrl from "@/common/getServiceUrl";
+import colorCardMixins from "@/mixins/colorCardMixins";
+import { mapState } from "vuex";
+const Color = require("color");
+
+export default {
+  name: "JfbBaseConList",
+  components: {
+    XdFontIcon,
+    XdButton,
+    XdDailog,
+    XdContentXss,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseConListMixin, colorCardMixins],
+  data() {
+    return {
+      contentBackground: "",
+      iconColor: "",
+      couponList: [],
+      notice: "",
+      showRule: false,
+      btn: "",
+      activity_id: "",
+      background: "",
+      app_coupon_url: "",
+      used_up_url: "",
+      can_take: "",
+      has_times: "",
+      method: "entry",
+      maxTime: 5, //最长轮询2的N次方（秒）
+      date: 2, //时间底数
+      time: 0, //时间幂指数
+      timeer: null,
+      order_num: null,
+      done: false,
+      message: "",
+      options: {},
+      next_url: "",
+      collectedPath: "",
+
+      //按钮设置
+      btnBgColor: "",
+      btnTextColor: "",
+      padding: {},
+      radius: 0,
+      //边框
+      is_border: "N",
+      is_border_c: "",
+      is_border_w: "",
+      //投影
+      is_shadow: "Y",
+      is_shadow_bg: 0,
+      is_shadow_w: 0,
+
+      isAll: false,
+      isRandom: false,
+      btn_txt: "",
+      btn_style: {},
+      btnTextSize: '',
+      is_blank_page: 'Y',
+      foreign_id: null
+    };
+  },
+  computed: {
+    ...mapState(["pageBusinessCode"]),
+    emptyBg() {
+      return this.getNoData();
+    },
+    outPadding() {
+      let str = `${this.checkValue(this.padding.top, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.padding.right, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.padding.bottom, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.padding.left, 0)}rpx`;
+      return str;
+    },
+    border() {
+      if (this.is_border === "Y")
+        return `${this.is_border_w}rpx solid ${this.is_border_c}`;
+      else return "0";
+    },
+    shadow() {
+      if (this.is_shadow === "Y")
+        return `0 0 ${this.is_shadow_w}rpx ${this.is_shadow_bg}`;
+      else return "0 0 0 rgba(0,0,0,0)";
+    },
+  },
+  watch: {
+    container(value,oldValue) {
+      if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject['isPreview']) this.init(value)
+    },
+  },
+  created() {
+    this.init(this.container);
+  },
+  destroyed() {
+    if (this.timeer) {
+      clearTimeout(this.timeer);
+    }
+  },
+  methods: {
+    init(value) {
+      this.contentBackground = "#FFF8F8";
+      this.iconColor = "#FF4D4A";
+      this.collectedPath = getContainerPropsValue(
+        value,
+        "content.collectedPath",
+        { value: "" }
+      ).value;
+
+      this.padding = getContainerPropsValue(value, "content.padding", {});
+      this.btnBgColor = getContainerPropsValue(
+        value,
+        "content.btnBgColor",
+        "rgba(0,0,0,0)"
+      );
+      this.btnTextColor = getContainerPropsValue(
+        value,
+        "content.btnTextColor",
+        "#666"
+      );
+      this.btnTextSize = getContainerPropsValue(
+        value,
+        "content.btnTextSize",
+        "28"
+      );
+      this.radius = getContainerPropsValue(value, "content.radius", "0");
+
+      this.is_border = getContainerPropsValue(value, "content.is_border", "N");
+      this.is_border_c = getContainerPropsValue(
+        value,
+        "content.is_border_c",
+        "#e5e5e5"
+      );
+      this.is_border_w = getContainerPropsValue(
+        value,
+        "content.is_border_w",
+        1
+      );
+
+      this.is_shadow = getContainerPropsValue(value, "content.is_shadow", "N");
+      this.is_shadow_bg = getContainerPropsValue(
+        value,
+        "content.is_shadow_bg",
+        "#fff"
+      );
+      this.is_shadow_w = getContainerPropsValue(
+        value,
+        "content.is_shadow_w",
+        "10"
+      );
+    },
+
+    getList() {
+      jfbRootExec("getCouponList", {
+        vm: this,
+        data: {
+          ...this.options,
+          distribution_method: this.method,
+          namespace: this.pageBusinessCode,
+          activity_id: this.activity_id,
+        },
+      })
+        .then((res) => {
+          this.background = getServiceUrl(res.background);
+          this.used_up_url = res.used_up_url && getServiceUrl(res.used_up_url);
+          this.app_activity_button =
+            res.app_activity_button && getServiceUrl(res.app_activity_button);
+          this.app_activity_url =
+            res.app_activity_url && getServiceUrl(res.app_activity_url);
+          this.app_coupon_bottom_url =
+            res.app_coupon_bottom_url &&
+            getServiceUrl(res.app_coupon_bottom_url);
+          this.can_take = res.can_take;
+          this.has_times = res.has_times;
+          this.next_url = res.next_url;
+          this.isAll = res.receive_method === "batch";
+          this.isRandom = res.distribution_type === "random";
+          // 判断是否是一键领取
+          if (this.isAll) {
+            // 定义按钮文字
+            let btn_txt = "";
+            // 设置按钮样式
+            this.btn_style = res.app_coupon_button_bg_url
+              ? {
+                  // 设置背景图片
+                  backgroundImage: `url(${getServiceUrl(
+                    res.can_take !== "Y"
+                      ? res.app_coupon_button_see_url
+                      : res.app_coupon_button_bg_url
+                  )})`,
+                  // 设置背景大小
+                  backgroundSize: "100% 100%",
+                  // 设置背景重复
+                  backgroundRepeat: "no-repeat",
+                  // 设置背景颜色
+                  backgroundColor: "",
+                  height: '70rpx',
+                  width: '450rpx',
+                  marginTop: '26rpx'
+                }
+              : {
+                  // 设置背景颜色
+                  backgroundColor: "#FB5B3F",
+                  height: '70rpx',
+                  width: '450rpx',
+                  marginTop: '26rpx'
+                };
+            // 设置按钮文字
+            btn_txt = res.can_take === "Y" ? "一键领取" : "去查看";
+            // 判断是否是随机领取
+            if (this.isRandom) {
+              // 设置按钮文字
+              btn_txt = res.can_take === "Y" ? "开心领取" : "去查看";
+            }
+            // 设置按钮文字
+            this.btn_txt = btn_txt;
+          }
+
+          if (res.list && res.list.length) {
+            this.couponList = res.list.map((item) => {
+              let mapArr = { Y: "去查看", P: "领取", N: "已发完" };
+              item.btn_txt = mapArr[item.can_take_num];
+              if (item.can_take_num === "Y" || item.can_take_num === "P") {
+                //按钮样式
+                item.btn = res.app_coupon_button_bg_url
+                  ? {
+                      backgroundImage: `url(${getServiceUrl(
+                        item.can_take_num === "Y"
+                          ? res.app_coupon_button_see_url
+                          : res.app_coupon_button_bg_url
+                      )})`,
+                      backgroundSize: "100% 100%",
+                      backgroundRepeat: "no-repeat",
+                      backgroundColor: "",
+                      margin: "0",
+                    }
+                  : {
+                      backgroundColor: "#FB5B3F",
+                      margin: "0",
+                    };
+                //整块背景
+                item.headIcon = getServiceUrl(res.app_coupon_url);
+                item.couponBackground = {
+                  backgroundImage: `url(${getServiceUrl(res.app_coupon_url)})`,
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                };
+                //icon
+                item.icon =
+                  item.can_take_num === "Y" ? "iconyilingqu" : "icondailingqu";
+                //icon颜色
+                item.iconColor =
+                  item.can_take_num === "Y" ? "#D6D6D6" : this.iconColor;
+                //券名称颜色
+                item.nameColor = "#FB5B3F";
+                //其他文字颜色
+                item.infoColor = "#fff";
+              } else {
+                //按钮样式
+                item.btn = { background: "#D6D6D6", margin: "0" };
+                //整块背景
+                item.headIcon = getServiceUrl(res.app_coupon_invalid_url);
+                item.couponBackground = {
+                  backgroundImage: `url(${getServiceUrl(
+                    res.app_coupon_invalid_url
+                  )})`,
+                  backgroundSize: "100%",
+                  backgroundRepeat: "no-repeat",
+                };
+                //icon
+                item.icon = "iconyifawan";
+                //icon颜色
+                item.iconColor = "#D6D6D6";
+                //券名称颜色
+                item.nameColor = "#BBBBBB";
+                //其他文字颜色
+                item.infoColor = "#BBBBBB";
+              }
+              return item;
+            });
+          }
+          console.log("couponList", this.couponList);
+          this.message = res.message;
+          this.notice = res.about;
+          this.done = true;
+          this.is_blank_page = res.is_blank_page;
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+
+    toCoupon() {
+      this.$xdUniHelper.navigateTo({
+        url: this.next_url || this.collectedPath,
+      });
+    },
+
+    getCoupont(item) {
+      if (item.can_take_num === "Y") {
+        this.toCoupon();
+        return;
+      }
+      this.$xdShowLoading({});
+      jfbRootExec("getOnceCoupon", {
+        vm: this,
+        data: {
+          ...this.options,
+          distribution_method: this.method,
+          namespace: this.pageBusinessCode,
+          activity_id: this.activity_id,
+          prize_id: item.prize_id,
+          foreign_id: this.foreign_id
+        },
+      })
+        .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");
+        });
+    },
+
+    getAllCoupont() {
+      this.$xdShowLoading({});
+      jfbRootExec("getAllCoupon", {
+        vm: this,
+        data: {
+          ...this.options,
+          distribution_method: this.method,
+          namespace: this.pageBusinessCode,
+          activity_id: this.activity_id,
+          foreign_id: this.foreign_id
+        },
+      })
+        .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("getCouponResult", {
+        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,
+            });
+            setTimeout(()=>{
+              this.getList();
+              this.btn_txt = "去查看";
+              if (this.timeer) {
+                this.time = 0;
+                clearTimeout(this.timeer);
+              }
+            },2000)
+            return;
+          }
+          if (res.status_type === "error") {
+            this.$xdHideLoading();
+            this.$xdAlert({
+              content: res.message,
+              zIndex: 3200,
+              time: 2000,
+              isClose: false,
+            });
+            setTimeout(()=>{
+              if (res.code == 400) {
+              this.getList();
+              }
+              if (this.timeer) {
+                this.time = 0;
+                clearTimeout(this.timeer);
+              }
+            },2000)
+            return;
+          }
+
+          this.timeer = setTimeout(() => {
+            this.getResult();
+            if (this.time > 5) {
+              this.$xdLog.setARMSInfo(
+                { message: "领取中" },
+                `pay_${res.status_type}`
+              );
+            }
+            this.btn_txt = `领取中 ${res.success_num}/${res.total_num}`;
+            this.time++;
+          }, Math.pow(this.date, this.time > this.maxTime ? this.maxTime : this.time) * 1000);
+        })
+        .catch((err) => {
+          this.$xdHideLoading();
+          console.log(err, "err");
+        });
+    },
+
+    onJfbLoad(options) {
+      console.log(this.pageBusinessCode, "pageNamespace");
+      this.options = options;
+      this.activity_id = options.activity_id;
+      this.foreign_id = options.foreign_id;
+      this.method = options.distribution_method
+        ? options.distribution_method
+        : "entry";
+      // this.getContent();
+      this.getList();
+    },
+
+    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 "./JfbBaseConListLess.less";
+
+.jfb-base-con-list {
+  &__body {
+    & > view {
+      position: relative;
+      overflow-y: auto;
+      padding-top: 220rpx;
+      box-sizing: border-box;
+      background-color: #fafafa;
+    }
+
+    .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);
+      }
+    }
+
+    &-content {
+      border-radius: unit(20, rpx);
+      background: #fff;
+      padding: unit(34, rpx);
+      margin-right: auto;
+      margin-left: auto;
+      width: unit(650, rpx);
+
+      &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &-left {
+          display: flex;
+          align-items: center;
+          font-size: unit(32, rpx);
+          & > view:first-child {
+            width: unit(8, rpx);
+            height: unit(36, rpx);
+            border-radius: unit(4, rpx);
+            margin-right: unit(20, rpx);
+          }
+        }
+
+        &-right {
+          display: flex;
+          font-size: unit(24, rpx);
+          padding: unit(8, rpx) unit(16, rpx);
+          border-radius: unit(24, rpx);
+        }
+      }
+
+      &-list {
+        margin-top: unit(20, rpx);
+
+        &-item {
+          display: flex;
+          flex-direction: column;
+          padding: unit(40, rpx) unit(40, rpx);
+          border-radius: unit(12, rpx);
+          margin: unit(20, rpx) auto 0 auto;
+          position: relative;
+
+          &.status_N {
+            .item_head {
+              color: #bbbbbb;
+            }
+            .item_sub {
+              color: #bbbbbb;
+            }
+          }
+          .btn_wrap {
+            position: absolute;
+            right: 30rpx;
+            bottom: 40rpx;
+          }
+
+          .item_head {
+            display: flex;
+            align-items: center;
+            font-size: 40rpx;
+            color: #000000;
+            font-weight: 500;
+
+            .t_icon {
+              width: 44rpx;
+              margin-right: 20rpx;
+              max-height: 80rpx;
+            }
+          }
+          .item_sub {
+            margin-top: 26rpx;
+            color: #ff4d4a;
+            font-size: 36rpx;
+            font-weight: 400;
+          }
+        }
+      }
+      &-foot {
+        margin: unit(40, rpx) 0;
+        display: flex;
+        justify-items: center;
+        align-items: center;
+        flex-flow: column;
+        & > view {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+}
+</style>